fix(ui): entity details pages are not loading correctly (#15567)

* fix(ui): entity details pages are not loading correctly

* fix tests

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

@@ -18,8 +18,8 @@ import { useTranslation } from 'react-i18next';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { ROUTES } from '../../constants/constants';
 import SignUpPage from '../../pages/SignUp/SignUpPage';
+import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase';
 import Appbar from '../AppBar/Appbar';
-import AuthenticatedAppRouter from '../AppRouter/AuthenticatedAppRouter';
 import { useAuthContext } from '../Auth/AuthProviders/AuthProvider';
 import LeftSidebar from '../MyData/LeftSidebar/LeftSidebar.component';
 import './app-container.less';
@@ -28,6 +28,7 @@ const AppContainer = () => {
   const { i18n } = useTranslation();
   const { Header, Sider, Content } = Layout;
   const { currentUser } = useAuthContext();
+  const AuthenticatedRouter = applicationRoutesClass.getRouteElements();
 
   const isDirectionRTL = useMemo(() => i18n.dir() === 'rtl', [i18n]);
 
@@ -51,7 +52,7 @@ const AppContainer = () => {
           </Header>
           <Layout>
             <Content className="main-content">
-              <AuthenticatedAppRouter />
+              <AuthenticatedRouter />
             </Content>
           </Layout>
         </Layout>

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

@@ -15,14 +15,11 @@ import { Redirect, Route, Switch, useParams } from 'react-router-dom';
 import { ROUTES } from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import EntityVersionPage from '../../pages/EntityVersionPage/EntityVersionPage.component';
-import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase';
 import entityUtilClassBase from '../../utils/EntityUtilClassBase';
 
 const EntityRouter = () => {
   const { entityType } = useParams<{ entityType: EntityType }>();
 
-  const RouteElements = applicationRoutesClass.getRouteElements();
-
   const Component = useMemo(
     () => entityUtilClassBase.getEntityDetailComponent(entityType),
     [entityType]
@@ -30,7 +27,6 @@ const EntityRouter = () => {
 
   return (
     <Switch>
-      {RouteElements && <RouteElements />}
       <Route
         exact
         component={EntityVersionPage}

openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.test.ts

@@ -11,18 +11,19 @@
  *  limitations under the License.
  */
 import { FC } from 'react';
+import AuthenticatedAppRouter from '../components/AppRouter/AuthenticatedAppRouter';
 import { ApplicationRoutesClassBase } from './ApplicationRoutesClassBase';
 
-describe('ApplicationRoutesClassCollate', () => {
+describe('ApplicationRoutesClassBase', () => {
   let applicationRoutesClassBase: ApplicationRoutesClassBase;
 
   beforeEach(() => {
     applicationRoutesClassBase = new ApplicationRoutesClassBase();
   });
 
-  it('should return CollateRouter from getRouteElements', () => {
-    const result: FC | null = applicationRoutesClassBase.getRouteElements();
+  it('should return AuthenticatedAppRouter from getRouteElements', () => {
+    const result: FC = applicationRoutesClassBase.getRouteElements();
 
-    expect(result).toBeNull();
+    expect(result).toBe(AuthenticatedAppRouter);
   });
 });

openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts

@@ -12,10 +12,11 @@
  */
 
 import { FC } from 'react';
+import AuthenticatedAppRouter from '../components/AppRouter/AuthenticatedAppRouter';
 
 class ApplicationRoutesClassBase {
-  public getRouteElements(): FC | null {
-    return null;
+  public getRouteElements(): FC {
+    return AuthenticatedAppRouter;
   }
 }