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

This commit is contained in:
Joshua Eilers 2023-05-24 08:03:50 -07:00 committed by GitHub
parent 798ce3d6c8
commit e60b827a50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 55 deletions

View File

@ -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>;

View File

@ -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 <LookupLoading />;
};
export default GoToLookup;

View File

@ -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;

View File

@ -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;