From bbdacc695b7aacced23e455a2d6ac539ef75b4fd Mon Sep 17 00:00:00 2001
From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
Date: Thu, 14 Mar 2024 20:38:18 +0530
Subject: [PATCH] fix(ui): entity details pages are not loading correctly
 (#15567)

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

* fix tests
---
 .../ui/src/components/AppContainer/AppContainer.tsx      | 5 +++--
 .../ui/src/components/AppRouter/EntityRouter.tsx         | 4 ----
 .../ui/src/utils/ApplicationRoutesClassBase.test.ts      | 9 +++++----
 .../resources/ui/src/utils/ApplicationRoutesClassBase.ts | 5 +++--
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx
index 317f33f6381..2cd63f4d68b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx
+++ b/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>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityRouter.tsx
index 8a902256765..ce6d22c312a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/EntityRouter.tsx
+++ b/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}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.test.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.test.ts
index 08298cd40df..927930dc865 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.test.ts
+++ b/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);
   });
 });
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts
index 1e760711cf5..ea902af16da 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/ApplicationRoutesClassBase.ts
+++ b/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;
   }
 }