fix logic for multiple entities found and clean up messy code (#8113)

Author: Joshua Eilers

datahub-web-react/src/app/embed/lookup/EmbedLookup.tsx

@@ -1,16 +1,11 @@
-import React from 'react';
-import { useParams } from 'react-router';
+import React, { useEffect } from 'react';
+import { useHistory, useParams } from 'react-router';
 import styled from 'styled-components';
+import { LoadingOutlined } from '@ant-design/icons';
 import { ErrorSection } from '../../shared/error/ErrorSection';
 import useGetEntityByUrl from './useGetEntityByUrl';
 import LookupNotFound from './LookupNotFound';
 import LookupFoundMultiple from './LookupFoundMultiple';
-import LookupLoading from './LookupLoading';
-import GoToLookup from './GoToLookup';
-
-type RouteParams = {
-    url: string;
-};
 
 const PageContainer = styled.div`
     display: flex;
@@ -19,17 +14,29 @@ const PageContainer = styled.div`
     height: 85vh;
 `;
 
+const LookupLoading = styled(LoadingOutlined)`
+    font-size: 50px;
+`;
+
+type RouteParams = {
+    url: string;
+};
+
 const EmbedLookup = () => {
+    const history = useHistory();
     const { url: encodedUrl } = useParams<RouteParams>();
     const decodedUrl = decodeURIComponent(encodedUrl);
-    const { count, entity, error, loading } = useGetEntityByUrl(decodedUrl);
+    const { embedUrl, notFound, foundMultiple, error } = useGetEntityByUrl(decodedUrl);
+
+    useEffect(() => {
+        if (embedUrl) history.push(embedUrl);
+    }, [embedUrl, history]);
 
     const getContent = () => {
-        if (loading) return <LookupLoading />;
         if (error) return <ErrorSection />;
-        if (count === 0 || !entity) return <LookupNotFound url={encodedUrl} />;
-        if (count > 1) return <LookupFoundMultiple url={encodedUrl} />;
-        return <GoToLookup entityType={entity.type} entityUrn={entity.urn} />;
+        if (notFound) return <LookupNotFound url={encodedUrl} />;
+        if (foundMultiple) return <LookupFoundMultiple url={encodedUrl} />;
+        return <LookupLoading />;
     };
 
     return <PageContainer>{getContent()}</PageContainer>;

datahub-web-react/src/app/embed/lookup/GoToLookup.tsx

@@ -1,13 +1,16 @@
-import { useMemo } from 'react';
 import { useGetSearchResultsForMultipleQuery } from '../../../graphql/search.generated';
 import { FilterOperator } from '../../../types.generated';
 import { UnionType } from '../../search/utils/constants';
 import { generateOrFilters } from '../../search/utils/generateOrFilters';
+import { PageRoutes } from '../../../conf/Global';
+import { useEntityRegistry } from '../../useEntityRegistry';
+import { urlEncodeUrn } from '../../entity/shared/utils';
 
 const URL_FIELDS = ['externalUrl', 'chartUrl', 'dashboardUrl'] as const;
 
 const useGetEntityByUrl = (externalUrl: string) => {
-    const { data, loading, error } = useGetSearchResultsForMultipleQuery({
+    const registry = useEntityRegistry();
+    const { data, error } = useGetSearchResultsForMultipleQuery({
         variables: {
             input: {
                 query: '*',
@@ -25,20 +28,24 @@ const useGetEntityByUrl = (externalUrl: string) => {
         },
     });
 
-    const entities = data?.searchAcrossEntities?.searchResults.map((result) => result.entity) ?? [];
-    const count = entities.length;
-    const entity = count === 1 ? entities[0] : null;
+    const getLookupData = () => {
+        if (!data) return {} as const;
 
-    return useMemo(
-        () =>
-            ({
-                count,
-                entity,
-                loading,
-                error,
-            } as const),
-        [count, entity, error, loading],
-    );
+        const entities = data.searchAcrossEntities?.searchResults.map((result) => result.entity) ?? [];
+        const notFound = entities.length === 0;
+        const foundMultiple = entities.length > 1;
+        const entity = entities.length === 1 ? entities[0] : null;
+        const embedUrl = entity
+            ? `${PageRoutes.EMBED}/${registry.getPathName(entity.type)}/${urlEncodeUrn(entity.urn)}`
+            : null;
+
+        return { notFound, foundMultiple, embedUrl } as const;
+    };
+
+    return {
+        error,
+        ...getLookupData(),
+    } as const;
 };
 
 export default useGetEntityByUrl;