refactor(ui): Refactor entity registry to be inside App Providers

datahub-web-react/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import { message } from 'antd';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -8,34 +8,11 @@ import { ThemeProvider } from 'styled-components';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import './App.less';
 import { Routes } from './app/Routes';
-import EntityRegistry from './app/entity/EntityRegistry';
-import { DashboardEntity } from './app/entity/dashboard/DashboardEntity';
-import { ChartEntity } from './app/entity/chart/ChartEntity';
-import { UserEntity } from './app/entity/user/User';
-import { GroupEntity } from './app/entity/group/Group';
-import { DatasetEntity } from './app/entity/dataset/DatasetEntity';
-import { DataFlowEntity } from './app/entity/dataFlow/DataFlowEntity';
-import { DataJobEntity } from './app/entity/dataJob/DataJobEntity';
-import { TagEntity } from './app/entity/tag/Tag';
-import { EntityRegistryContext } from './entityRegistryContext';
 import { Theme } from './conf/theme/types';
 import defaultThemeConfig from './conf/theme/theme_light.config.json';
 import { PageRoutes } from './conf/Global';
 import { isLoggedInVar } from './app/auth/checkAuthStatus';
 import { GlobalCfg } from './conf';
-import { GlossaryTermEntity } from './app/entity/glossaryTerm/GlossaryTermEntity';
-import { MLFeatureEntity } from './app/entity/mlFeature/MLFeatureEntity';
-import { MLPrimaryKeyEntity } from './app/entity/mlPrimaryKey/MLPrimaryKeyEntity';
-import { MLFeatureTableEntity } from './app/entity/mlFeatureTable/MLFeatureTableEntity';
-import { MLModelEntity } from './app/entity/mlModel/MLModelEntity';
-import { MLModelGroupEntity } from './app/entity/mlModelGroup/MLModelGroupEntity';
-import { DomainEntity } from './app/entity/domain/DomainEntity';
-import { ContainerEntity } from './app/entity/container/ContainerEntity';
-import GlossaryNodeEntity from './app/entity/glossaryNode/GlossaryNodeEntity';
-import { DataPlatformEntity } from './app/entity/dataPlatform/DataPlatformEntity';
-import { DataProductEntity } from './app/entity/dataProduct/DataProductEntity';
-import { DataPlatformInstanceEntity } from './app/entity/dataPlatformInstance/DataPlatformInstanceEntity';
-import { RoleEntity } from './app/entity/Access/RoleEntity';
 import possibleTypesResult from './possibleTypes.generated';
 
 /*
@@ -101,44 +78,16 @@ const App: React.VFC = () => {
         });
     }, []);
 
-    const entityRegistry = useMemo(() => {
-        const register = new EntityRegistry();
-        register.register(new DatasetEntity());
-        register.register(new DashboardEntity());
-        register.register(new ChartEntity());
-        register.register(new UserEntity());
-        register.register(new GroupEntity());
-        register.register(new TagEntity());
-        register.register(new DataFlowEntity());
-        register.register(new DataJobEntity());
-        register.register(new GlossaryTermEntity());
-        register.register(new MLFeatureEntity());
-        register.register(new MLPrimaryKeyEntity());
-        register.register(new MLFeatureTableEntity());
-        register.register(new MLModelEntity());
-        register.register(new MLModelGroupEntity());
-        register.register(new DomainEntity());
-        register.register(new ContainerEntity());
-        register.register(new GlossaryNodeEntity());
-        register.register(new RoleEntity());
-        register.register(new DataPlatformEntity());
-        register.register(new DataProductEntity());
-        register.register(new DataPlatformInstanceEntity());
-        return register;
-    }, []);
-
     return (
         <HelmetProvider>
             <ThemeProvider theme={dynamicThemeConfig}>
                 <Router>
                     <Helmet>
                         <title>{dynamicThemeConfig.content.title}</title>
                     </Helmet>
-                    <EntityRegistryContext.Provider value={entityRegistry}>
-                        <ApolloProvider client={client}>
-                            <Routes />
-                        </ApolloProvider>
-                    </EntityRegistryContext.Provider>
+                    <ApolloProvider client={client}>
+                        <Routes />
+                    </ApolloProvider>
                 </Router>
             </ThemeProvider>
         </HelmetProvider>

datahub-web-react/src/app/AppProviders.tsx

@@ -4,6 +4,7 @@ import { EducationStepsProvider } from '../providers/EducationStepsProvider';
 import UserContextProvider from './context/UserContextProvider';
 import QuickFiltersProvider from '../providers/QuickFiltersProvider';
 import SearchContextProvider from './search/context/SearchContextProvider';
+import EntityRegistryProvider from './EntityRegistryProvider';
 
 interface Props {
     children: React.ReactNode;
@@ -13,11 +14,13 @@ export default function AppProviders({ children }: Props) {
     return (
         <AppConfigProvider>
             <UserContextProvider>
-                <EducationStepsProvider>
-                    <QuickFiltersProvider>
-                        <SearchContextProvider>{children}</SearchContextProvider>
-                    </QuickFiltersProvider>
-                </EducationStepsProvider>
+                <EntityRegistryProvider>
+                    <EducationStepsProvider>
+                        <QuickFiltersProvider>
+                            <SearchContextProvider>{children}</SearchContextProvider>
+                        </QuickFiltersProvider>
+                    </EducationStepsProvider>
+                </EntityRegistryProvider>
             </UserContextProvider>
         </AppConfigProvider>
     );

datahub-web-react/src/app/EntityRegistryProvider.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { EntityRegistryContext } from '../entityRegistryContext';
+import useBuildEntityRegistry from './useBuildEntityRegistry';
+
+const EntityRegistryProvider = ({ children }: { children: React.ReactNode }) => {
+    const entityRegistry = useBuildEntityRegistry();
+    return <EntityRegistryContext.Provider value={entityRegistry}>{children}</EntityRegistryContext.Provider>;
+};
+
+export default EntityRegistryProvider;

datahub-web-react/src/app/ProtectedRoutes.tsx

@@ -13,25 +13,24 @@ import EmbedLookup from './embed/lookup';
  * Container for all views behind an authentication wall.
  */
 export const ProtectedRoutes = (): JSX.Element => {
-    const entityRegistry = useEntityRegistry();
-
     return (
         <AppProviders>
-            <Layout style={{ height: '100%', width: '100%' }}>
-                <Layout>
-                    <Switch>
-                        <Route exact path="/" render={() => <HomePage />} />
-                        <Route exact path={PageRoutes.EMBED_LOOKUP} render={() => <EmbedLookup />} />
-                        {entityRegistry.getEntities().map((entity) => (
+            <Layout>
+                <Switch>
+                    <Route exact path="/" render={() => <HomePage />} />
+                    <Route path={`${PageRoutes.EMBED_HEALTH}/:urn`} render={() => <EmbeddedHealthIcon />} />
+                    <Route exact path={PageRoutes.EMBED_LOOKUP} render={() => <EmbedLookup />} />
+                    {useEntityRegistry()
+                        .getEntities()
+                        .map((entity) => (
                             <Route
                                 key={`${entity.getPathName()}/${PageRoutes.EMBED}`}
                                 path={`${PageRoutes.EMBED}/${entity.getPathName()}/:urn`}
                                 render={() => <EmbeddedPage entityType={entity.type} />}
                             />
                         ))}
-                        <Route path="/*" render={() => <SearchRoutes />} />
-                    </Switch>
-                </Layout>
+                    <Route path="/*" render={() => <SearchRoutes />} />
+                </Switch>
             </Layout>
         </AppProviders>
     );

datahub-web-react/src/app/buildEntityRegistry.ts

@@ -0,0 +1,48 @@
+import EntityRegistry from './entity/EntityRegistry';
+import { DashboardEntity } from './entity/dashboard/DashboardEntity';
+import { ChartEntity } from './entity/chart/ChartEntity';
+import { UserEntity } from './entity/user/User';
+import { GroupEntity } from './entity/group/Group';
+import { DatasetEntity } from './entity/dataset/DatasetEntity';
+import { DataFlowEntity } from './entity/dataFlow/DataFlowEntity';
+import { DataJobEntity } from './entity/dataJob/DataJobEntity';
+import { TagEntity } from './entity/tag/Tag';
+import { GlossaryTermEntity } from './entity/glossaryTerm/GlossaryTermEntity';
+import { MLFeatureEntity } from './entity/mlFeature/MLFeatureEntity';
+import { MLPrimaryKeyEntity } from './entity/mlPrimaryKey/MLPrimaryKeyEntity';
+import { MLFeatureTableEntity } from './entity/mlFeatureTable/MLFeatureTableEntity';
+import { MLModelEntity } from './entity/mlModel/MLModelEntity';
+import { MLModelGroupEntity } from './entity/mlModelGroup/MLModelGroupEntity';
+import { DomainEntity } from './entity/domain/DomainEntity';
+import { ContainerEntity } from './entity/container/ContainerEntity';
+import GlossaryNodeEntity from './entity/glossaryNode/GlossaryNodeEntity';
+import { DataPlatformEntity } from './entity/dataPlatform/DataPlatformEntity';
+import { DataProductEntity } from './entity/dataProduct/DataProductEntity';
+import { DataPlatformInstanceEntity } from './entity/dataPlatformInstance/DataPlatformInstanceEntity';
+import { RoleEntity } from './entity/Access/RoleEntity';
+
+export default function buildEntityRegistry() {
+    const registry = new EntityRegistry();
+    registry.register(new DatasetEntity());
+    registry.register(new DashboardEntity());
+    registry.register(new ChartEntity());
+    registry.register(new UserEntity());
+    registry.register(new GroupEntity());
+    registry.register(new TagEntity());
+    registry.register(new DataFlowEntity());
+    registry.register(new DataJobEntity());
+    registry.register(new GlossaryTermEntity());
+    registry.register(new MLFeatureEntity());
+    registry.register(new MLPrimaryKeyEntity());
+    registry.register(new MLFeatureTableEntity());
+    registry.register(new MLModelEntity());
+    registry.register(new MLModelGroupEntity());
+    registry.register(new DomainEntity());
+    registry.register(new ContainerEntity());
+    registry.register(new GlossaryNodeEntity());
+    registry.register(new RoleEntity());
+    registry.register(new DataPlatformEntity());
+    registry.register(new DataProductEntity());
+    registry.register(new DataPlatformInstanceEntity());
+    return registry;
+}

datahub-web-react/src/app/useBuildEntityRegistry.tsx

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import buildEntityRegistry from './buildEntityRegistry';
+
+export default function useBuildEntityRegistry() {
+    return useMemo(() => {
+        return buildEntityRegistry();
+    }, []);
+}