Skip to content

Commit 8a1c180

Browse files
kanavnarulamacdavid-leifkerKanav Narulamac
authored
feat(): Add parent container hierarchy label to the container (#11705)
Co-authored-by: mac <[email protected]> Co-authored-by: david-leifker <[email protected]> Co-authored-by: Kanav Narula <[email protected]> Co-authored-by: mac <[email protected]> Co-authored-by: mac <[email protected]>
1 parent bb67af0 commit 8a1c180

File tree

6 files changed

+43
-3
lines changed

6 files changed

+43
-3
lines changed

datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx

+13-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { useGetSearchResultsLazyQuery } from '../../../../../../../graphql/searc
55
import { Container, Entity, EntityType } from '../../../../../../../types.generated';
66
import { useEnterKeyListener } from '../../../../../../shared/useEnterKeyListener';
77
import { useEntityRegistry } from '../../../../../../useEntityRegistry';
8+
import { getParentEntities } from '../../../../../../search/filters/utils';
9+
import ParentEntities from '../../../../../../search/filters/ParentEntities';
810

911
type Props = {
1012
onCloseModal: () => void;
@@ -26,14 +28,18 @@ const StyleTag = styled(Tag)`
2628
align-items: center;
2729
`;
2830

29-
const PreviewImage = styled.img`
31+
export const PreviewImage = styled.img`
3032
max-height: 18px;
3133
width: auto;
3234
object-fit: contain;
3335
background-color: transparent;
3436
margin-right: 4px;
3537
`;
3638

39+
export const ParentWrapper = styled.div`
40+
max-width: 400px;
41+
`;
42+
3743
export const ContainerSelectModal = ({ onCloseModal, defaultValues, onOkOverride, titleOverride }: Props) => {
3844
const [containerSearch, { data: platforSearchData }] = useGetSearchResultsLazyQuery();
3945
const entityRegistry = useEntityRegistry();
@@ -65,10 +71,16 @@ export const ContainerSelectModal = ({ onCloseModal, defaultValues, onOkOverride
6571
// Renders a search result in the select dropdown.
6672
const renderSearchResult = (entity: Container) => {
6773
const displayName = entityRegistry.getDisplayName(EntityType.Container, entity);
74+
const parentEntities: Entity[] = getParentEntities(entity as Entity) || [];
6875

6976
const truncatedDisplayName = displayName.length > 25 ? `${displayName.slice(0, 25)}...` : displayName;
7077
return (
7178
<Tooltip title={displayName}>
79+
{parentEntities.length > 0 && (
80+
<ParentWrapper>
81+
<ParentEntities parentEntities={parentEntities} />
82+
</ParentWrapper>
83+
)}
7284
<PreviewImage src={entity.platform?.properties?.logoUrl || undefined} alt={entity.properties?.name} />
7385
<span>{truncatedDisplayName}</span>
7486
</Tooltip>

datahub-web-react/src/app/search/SearchFilterLabel.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ import CustomAvatar from '../shared/avatar/CustomAvatar';
2323
import { IconStyleType } from '../entity/Entity';
2424
import { formatNumber } from '../shared/formatNumber';
2525
import useGetBrowseV2LabelOverride from './filters/useGetBrowseV2LabelOverride';
26+
import { getParentEntities } from './filters/utils';
27+
import { ParentWrapper } from '../entity/shared/containers/profile/sidebar/Container/ContainerSelectModal';
28+
import ParentEntities from './filters/ParentEntities';
2629

2730
type Props = {
2831
field: string;
@@ -157,11 +160,17 @@ export const SearchFilterLabel = ({ field, value, entity, count, hideCount }: Pr
157160
if (entity?.type === EntityType.Container) {
158161
const container = entity as Container;
159162
const displayName = entityRegistry.getDisplayName(EntityType.Container, container);
163+
const parentEntities: Entity[] = getParentEntities(container as Entity) || [];
160164
const truncatedDisplayName = displayName.length > 25 ? `${displayName.slice(0, 25)}...` : displayName;
161165
return (
162166
<Tooltip title={displayName}>
163167
{!!container.platform?.properties?.logoUrl && (
164-
<PreviewImage src={container.platform?.properties?.logoUrl} alt={container.properties?.name} />
168+
<>
169+
<ParentWrapper style={{ width: '200px' }}>
170+
<ParentEntities parentEntities={parentEntities} />
171+
</ParentWrapper>
172+
<PreviewImage src={container.platform?.properties?.logoUrl} alt={container.properties?.name} />
173+
</>
165174
)}
166175
<span>
167176
{truncatedDisplayName}

datahub-web-react/src/app/search/filters/FilterOption.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { generateColor } from '../../entity/shared/components/styled/StyledTag';
88
import { ANTD_GRAY } from '../../entity/shared/constants';
99
import { useEntityRegistry } from '../../useEntityRegistry';
1010
import {
11+
CONTAINER_FILTER_NAME,
1112
ENTITY_SUB_TYPE_FILTER_NAME,
1213
MAX_COUNT_VAL,
1314
PLATFORM_FILTER_NAME,
@@ -125,7 +126,7 @@ export default function FilterOption({
125126
const { field, value, count, entity } = filterOption;
126127
const entityRegistry = useEntityRegistry();
127128
const { icon, label } = getFilterIconAndLabel(field, value, entityRegistry, entity || null, 14);
128-
const shouldShowIcon = field === PLATFORM_FILTER_NAME && icon !== null;
129+
const shouldShowIcon = (field === PLATFORM_FILTER_NAME || field === CONTAINER_FILTER_NAME) && icon !== null;
129130
const shouldShowTagColor = field === TAGS_FILTER_NAME && entity?.type === EntityType.Tag;
130131
const isSubTypeFilter = field === TYPE_NAMES_FILTER_NAME;
131132
const parentEntities: Entity[] = getParentEntities(entity as Entity) || [];

datahub-web-react/src/app/search/filters/utils.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
FacetFilterInput,
2121
FacetMetadata,
2222
GlossaryTerm,
23+
Container,
2324
} from '../../../types.generated';
2425
import { IconStyleType } from '../../entity/Entity';
2526
import {
@@ -186,6 +187,15 @@ export function getFilterIconAndLabel(
186187
entityRegistry.getIcon(EntityType.DataPlatform, size || 12, IconStyleType.ACCENT, ANTD_GRAY[9])
187188
);
188189
label = filterEntity ? entityRegistry.getDisplayName(EntityType.DataPlatform, filterEntity) : filterValue;
190+
} else if (filterField === CONTAINER_FILTER_NAME) {
191+
// Scenario where the filter entity exists and filterField is container
192+
const logoUrl = (filterEntity as Container)?.platform?.properties?.logoUrl;
193+
icon = logoUrl ? (
194+
<PlatformIcon src={logoUrl} size={size} />
195+
) : (
196+
entityRegistry.getIcon(EntityType.DataPlatform, size || 12, IconStyleType.ACCENT, ANTD_GRAY[9])
197+
);
198+
label = entityRegistry.getDisplayName(EntityType.Container, filterEntity);
189199
} else if (filterField === BROWSE_PATH_V2_FILTER_NAME) {
190200
icon = <FolderFilled size={size} color="black" />;
191201
label = getLastBrowseEntryFromFilterValue(filterValue);
@@ -196,6 +206,7 @@ export function getFilterIconAndLabel(
196206
filterEntity,
197207
size,
198208
);
209+
199210
icon = newIcon;
200211
label = newLabel;
201212
} else {
@@ -344,6 +355,9 @@ export function getParentEntities(entity: Entity): Entity[] | null {
344355
if (entity.type === EntityType.Domain) {
345356
return (entity as Domain).parentDomains?.domains || [];
346357
}
358+
if (entity.type === EntityType.Container) {
359+
return (entity as Container).parentContainers?.containers || [];
360+
}
347361
return null;
348362
}
349363

datahub-web-react/src/graphql/fragments.graphql

+1
Original file line numberDiff line numberDiff line change
@@ -1010,6 +1010,7 @@ fragment entityContainer on Container {
10101010

10111011
fragment parentContainerFields on Container {
10121012
urn
1013+
type
10131014
properties {
10141015
name
10151016
}

datahub-web-react/src/graphql/search.graphql

+3
Original file line numberDiff line numberDiff line change
@@ -910,6 +910,9 @@ fragment facetFields on FacetMetadata {
910910
properties {
911911
name
912912
}
913+
parentContainers {
914+
...parentContainersFields
915+
}
913916
}
914917
... on CorpUser {
915918
username

0 commit comments

Comments
 (0)