mirror of
https://github.com/datahub-project/datahub.git
synced 2025-12-25 00:48:45 +00:00
fix logic for multiple entities found and clean up messy code (#8113)
This commit is contained in:
parent
798ce3d6c8
commit
e60b827a50
@ -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>;
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user