fix: 404 page layout (#16044)

* fix: 404 page layout

* Fix 404 page layout issue

openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx

@@ -19,6 +19,7 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 import { ROUTES } from '../../constants/constants';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import { useDomainStore } from '../../hooks/useDomainStore';
+import PageNotFound from '../../pages/PageNotFound/PageNotFound';
 import SignUpPage from '../../pages/SignUp/SignUpPage';
 import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase';
 import Appbar from '../AppBar/Appbar';
@@ -46,6 +47,8 @@ const AppContainer = () => {
       <Route exact component={SignUpPage} path={ROUTES.SIGNUP}>
         {!isEmpty(currentUser) && <Redirect to={ROUTES.HOME} />}
       </Route>
+      {/* Do not move this route as we don't want to render the sidebar and header in 404 page */}
+      <Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
 
       <Layout className="app-container">
         <Sider

openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx

@@ -13,18 +13,12 @@
 
 import { isNil } from 'lodash';
 import React, { useCallback, useEffect } from 'react';
-import { Route, Switch, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useAnalytics } from 'use-analytics';
-import AppContainer from '../../components/AppContainer/AppContainer';
-import { ROUTES } from '../../constants/constants';
 import { CustomEventTypes } from '../../generated/analytics/webAnalyticEventData';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
+import AppContainer from '../AppContainer/AppContainer';
 import { UnAuthenticatedAppRouter } from './UnAuthenticatedAppRouter';
-import withSuspenseFallback from './withSuspenseFallback';
-
-const PageNotFound = withSuspenseFallback(
-  React.lazy(() => import('../../pages/PageNotFound/PageNotFound'))
-);
 
 const AppRouter = () => {
   const location = useLocation();
@@ -70,12 +64,7 @@ const AppRouter = () => {
     return () => targetNode.removeEventListener('click', handleClickEvent);
   }, [handleClickEvent]);
 
-  return (
+  return isAuthenticated ? <AppContainer /> : <UnAuthenticatedAppRouter />;
-    <Switch>
-      {isAuthenticated ? <AppContainer /> : <UnAuthenticatedAppRouter />}
-      <Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
-    </Switch>
-  );
 };
 
 export default AppRouter;

openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AuthenticatedAppRouter.tsx

@@ -224,10 +224,6 @@ const AddQueryPage = withSuspenseFallback(
   React.lazy(() => import('../../pages/AddQueryPage/AddQueryPage.component'))
 );
 
-const PageNotFound = withSuspenseFallback(
-  React.lazy(() => import('../../pages/PageNotFound/PageNotFound'))
-);
-
 const IncidentManagerPage = withSuspenseFallback(
   React.lazy(() => import('../../pages/IncidentManager/IncidentManagerPage'))
 );
@@ -508,7 +504,7 @@ const AuthenticatedAppRouter: FunctionComponent = () => {
         ]}>
         <Redirect to={ROUTES.MY_DATA} />
       </Route>
-      <Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
+
       <Redirect to={ROUTES.NOT_FOUND} />
     </Switch>
   );

openmetadata-ui/src/main/resources/ui/src/components/AppRouter/UnAuthenticatedAppRouter.tsx

@@ -16,6 +16,7 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 import { ROUTES } from '../../constants/constants';
 import { AuthProvider } from '../../generated/configuration/authenticationConfiguration';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
+import PageNotFound from '../../pages/PageNotFound/PageNotFound';
 import SamlCallback from '../../pages/SamlCallback';
 import AccountActivationConfirmation from '../../pages/SignUp/account-activation-confirmation.component';
 import { isProtectedRoute } from '../../utils/AuthProvider.util';
@@ -83,6 +84,9 @@ export const UnAuthenticatedAppRouter = () => {
         </Route>
       )}
 
+      {/* keep this route before any conditional JSX.Element rendering */}
+      <Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
+
       {isBasicAuthProvider && (
         <>
           <Route exact component={BasicSignupPage} path={ROUTES.REGISTER} />

openmetadata-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OidcAuthenticator.tsx

@@ -26,7 +26,6 @@ import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
 import { ROUTES } from '../../../constants/constants';
 import { useApplicationStore } from '../../../hooks/useApplicationStore';
 import SignInPage from '../../../pages/LoginPage/SignInPage';
-import PageNotFound from '../../../pages/PageNotFound/PageNotFound';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import Loader from '../../common/Loader/Loader';
 import {
@@ -121,7 +120,6 @@ const OidcAuthenticator = forwardRef<AuthenticatorRef, Props>(
               <Redirect to={ROUTES.MY_DATA} />
             )}
           </Route>
-          <Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
           {!isSigningIn ? (
             <Route exact component={SignInPage} path={ROUTES.SIGNIN} />
           ) : null}