fix(extension) Fixes routing for the embed pages for chrome extension (#9648)

datahub-web-react/src/Mocks.tsx

@@ -40,6 +40,8 @@ import { ListRecommendationsDocument } from './graphql/recommendations.generated
 import { FetchedEntity } from './app/lineage/types';
 import { DEFAULT_APP_CONFIG } from './appConfigContext';
 import { GetQuickFiltersDocument } from './graphql/quickFilters.generated';
+import { GetGrantedPrivilegesDocument } from './graphql/policy.generated';
+import { VIEW_ENTITY_PAGE } from './app/entity/shared/constants';
 
 export const user1 = {
     __typename: 'CorpUser',
@@ -3713,6 +3715,20 @@ export const mocks = [
             data: [],
         },
     },
+    {
+        request: {
+            query: GetGrantedPrivilegesDocument,
+            variables: {
+                input: {
+                    actorUrn: 'urn:li:corpuser:3',
+                    resourceSpec: { resourceType: EntityType.Dataset, resourceUrn: dataset3.urn },
+                },
+            },
+        },
+        result: {
+            data: { getGrantedPrivileges: { privileges: [VIEW_ENTITY_PAGE] } },
+        },
+    },
 ];
 
 export const mocksWithSearchFlagsOff = [

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { PageRoutes } from '../conf/Global';
+import EmbeddedPage from './embed/EmbeddedPage';
+import { useEntityRegistry } from './useEntityRegistry';
+import EmbedLookup from './embed/lookup';
+
+export default function EmbedRoutes() {
+    const entityRegistry = useEntityRegistry();
+
+    return (
+        <>
+            <Route exact path={PageRoutes.EMBED_LOOKUP} render={() => <EmbedLookup />} />
+            {entityRegistry.getEntities().map((entity) => (
+                <Route
+                    key={`${entity.getPathName()}/${PageRoutes.EMBED}`}
+                    path={`${PageRoutes.EMBED}/${entity.getPathName()}/:urn`}
+                    render={() => <EmbeddedPage entityType={entity.type} />}
+                />
+            ))}
+        </>
+    );
+}

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

@@ -3,11 +3,9 @@ import { Switch, Route } from 'react-router-dom';
 import { Layout } from 'antd';
 import { HomePage } from './home/HomePage';
 import { SearchRoutes } from './SearchRoutes';
-import { PageRoutes } from '../conf/Global';
-import EmbeddedPage from './embed/EmbeddedPage';
-import { useEntityRegistry } from './useEntityRegistry';
 import AppProviders from './AppProviders';
-import EmbedLookup from './embed/lookup';
+import EmbedRoutes from './EmbedRoutes';
+import { PageRoutes } from '../conf/Global';
 
 /**
  * Container for all views behind an authentication wall.
@@ -18,16 +16,7 @@ export const ProtectedRoutes = (): JSX.Element => {
             <Layout>
                 <Switch>
                     <Route exact path="/" render={() => <HomePage />} />
-                    <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={PageRoutes.EMBED} render={() => <EmbedRoutes />} />
                     <Route path="/*" render={() => <SearchRoutes />} />
                 </Switch>
             </Layout>

datahub-web-react/src/app/__tests__/Routes.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { mocks } from '../../Mocks';
+import TestPageContainer from '../../utils/test-utils/TestPageContainer';
+import { Routes } from '../Routes';
+
+test('renders embed page properly', async () => {
+    const { getByText } = render(
+        <MockedProvider mocks={mocks} addTypename={false}>
+            <TestPageContainer initialEntries={['/embed/dataset/urn:li:dataset:3']}>
+                <Routes />
+            </TestPageContainer>
+        </MockedProvider>,
+    );
+
+    await waitFor(() => expect(getByText('Yet Another Dataset')).toBeInTheDocument());
+});

datahub-web-react/src/app/embed/EmbeddedPage.tsx

@@ -39,7 +39,7 @@ export default function EmbeddedPage({ entityType }: Props) {
         });
     }, [entityType, urn]);
 
-    const { urn : authenticatedUserUrn } = useUserContext();
+    const { urn: authenticatedUserUrn } = useUserContext();
     const { data } = useGetGrantedPrivilegesQuery({
         variables: {
             input: {
@@ -48,6 +48,7 @@ export default function EmbeddedPage({ entityType }: Props) {
             },
         },
         fetchPolicy: 'cache-first',
+        skip: !authenticatedUserUrn,
     });
 
     const privileges = data?.getGrantedPrivileges?.privileges || [];