diff --git a/datahub-web-react/src/app/embed/lookup/EmbedLookup.tsx b/datahub-web-react/src/app/embed/lookup/EmbedLookup.tsx index ab8aa7a5a5..f3110a7049 100644 --- a/datahub-web-react/src/app/embed/lookup/EmbedLookup.tsx +++ b/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(); 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 ; if (error) return ; - if (count === 0 || !entity) return ; - if (count > 1) return ; - return ; + if (notFound) return ; + if (foundMultiple) return ; + return ; }; return {getContent()}; diff --git a/datahub-web-react/src/app/embed/lookup/GoToLookup.tsx b/datahub-web-react/src/app/embed/lookup/GoToLookup.tsx deleted file mode 100644 index d02ad78032..0000000000 --- a/datahub-web-react/src/app/embed/lookup/GoToLookup.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { useEffect } from 'react'; -import { useHistory } from 'react-router'; -import { EntityType } from '../../../types.generated'; -import { useEntityRegistry } from '../../useEntityRegistry'; -import { PageRoutes } from '../../../conf/Global'; -import { urlEncodeUrn } from '../../entity/shared/utils'; -import LookupLoading from './LookupLoading'; - -const GoToLookup = ({ entityType, entityUrn }: { entityType: EntityType; entityUrn: string }) => { - const registry = useEntityRegistry(); - const history = useHistory(); - useEffect(() => { - const entityUrl = `${PageRoutes.EMBED}/${registry.getPathName(entityType)}/${urlEncodeUrn(entityUrn)}`; - history.push(entityUrl); - }, [entityType, entityUrn, history, registry]); - return ; -}; - -export default GoToLookup; diff --git a/datahub-web-react/src/app/embed/lookup/LookupLoading.tsx b/datahub-web-react/src/app/embed/lookup/LookupLoading.tsx deleted file mode 100644 index 47be4ee83c..0000000000 --- a/datahub-web-react/src/app/embed/lookup/LookupLoading.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { LoadingOutlined } from '@ant-design/icons'; -import styled from 'styled-components'; - -const LookupLoading = styled(LoadingOutlined)` - font-size: 50px; -`; - -export default LookupLoading; diff --git a/datahub-web-react/src/app/embed/lookup/useGetEntityByUrl.ts b/datahub-web-react/src/app/embed/lookup/useGetEntityByUrl.ts index 209114e301..f11a3a02b4 100644 --- a/datahub-web-react/src/app/embed/lookup/useGetEntityByUrl.ts +++ b/datahub-web-react/src/app/embed/lookup/useGetEntityByUrl.ts @@ -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;