diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx index 681f89831b92c4..818d75c37696dc 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx @@ -5,6 +5,8 @@ import { useGetSearchResultsLazyQuery } from '../../../../../../../graphql/searc import { Container, Entity, EntityType } from '../../../../../../../types.generated'; import { useEnterKeyListener } from '../../../../../../shared/useEnterKeyListener'; import { useEntityRegistry } from '../../../../../../useEntityRegistry'; +import { getParentEntities } from '../../../../../../search/filters/utils'; +import ParentEntities from '../../../../../../search/filters/ParentEntities'; type Props = { onCloseModal: () => void; @@ -26,7 +28,7 @@ const StyleTag = styled(Tag)` align-items: center; `; -const PreviewImage = styled.img` +export const PreviewImage = styled.img` max-height: 18px; width: auto; object-fit: contain; @@ -34,6 +36,10 @@ const PreviewImage = styled.img` margin-right: 4px; `; +export const ParentWrapper = styled.div` + max-width: 400px; +`; + export const ContainerSelectModal = ({ onCloseModal, defaultValues, onOkOverride, titleOverride }: Props) => { const [containerSearch, { data: platforSearchData }] = useGetSearchResultsLazyQuery(); const entityRegistry = useEntityRegistry(); @@ -65,10 +71,16 @@ export const ContainerSelectModal = ({ onCloseModal, defaultValues, onOkOverride // Renders a search result in the select dropdown. const renderSearchResult = (entity: Container) => { const displayName = entityRegistry.getDisplayName(EntityType.Container, entity); + const parentEntities: Entity[] = getParentEntities(entity as Entity) || []; const truncatedDisplayName = displayName.length > 25 ? `${displayName.slice(0, 25)}...` : displayName; return ( + {parentEntities.length > 0 && ( + + + + )} {truncatedDisplayName} diff --git a/datahub-web-react/src/app/search/SearchFilterLabel.tsx b/datahub-web-react/src/app/search/SearchFilterLabel.tsx index 5a0e75cc2ae1ce..2ed2d4608de0d2 100644 --- a/datahub-web-react/src/app/search/SearchFilterLabel.tsx +++ b/datahub-web-react/src/app/search/SearchFilterLabel.tsx @@ -23,6 +23,9 @@ import CustomAvatar from '../shared/avatar/CustomAvatar'; import { IconStyleType } from '../entity/Entity'; import { formatNumber } from '../shared/formatNumber'; import useGetBrowseV2LabelOverride from './filters/useGetBrowseV2LabelOverride'; +import { getParentEntities } from './filters/utils'; +import { ParentWrapper } from '../entity/shared/containers/profile/sidebar/Container/ContainerSelectModal'; +import ParentEntities from './filters/ParentEntities'; type Props = { field: string; @@ -157,11 +160,17 @@ export const SearchFilterLabel = ({ field, value, entity, count, hideCount }: Pr if (entity?.type === EntityType.Container) { const container = entity as Container; const displayName = entityRegistry.getDisplayName(EntityType.Container, container); + const parentEntities: Entity[] = getParentEntities(container as Entity) || []; const truncatedDisplayName = displayName.length > 25 ? `${displayName.slice(0, 25)}...` : displayName; return ( {!!container.platform?.properties?.logoUrl && ( - + <> + + + + + )} {truncatedDisplayName} diff --git a/datahub-web-react/src/app/search/filters/FilterOption.tsx b/datahub-web-react/src/app/search/filters/FilterOption.tsx index 3749f44cbf6718..50b78c7f0685c9 100644 --- a/datahub-web-react/src/app/search/filters/FilterOption.tsx +++ b/datahub-web-react/src/app/search/filters/FilterOption.tsx @@ -8,6 +8,7 @@ import { generateColor } from '../../entity/shared/components/styled/StyledTag'; import { ANTD_GRAY } from '../../entity/shared/constants'; import { useEntityRegistry } from '../../useEntityRegistry'; import { + CONTAINER_FILTER_NAME, ENTITY_SUB_TYPE_FILTER_NAME, MAX_COUNT_VAL, PLATFORM_FILTER_NAME, @@ -125,7 +126,7 @@ export default function FilterOption({ const { field, value, count, entity } = filterOption; const entityRegistry = useEntityRegistry(); const { icon, label } = getFilterIconAndLabel(field, value, entityRegistry, entity || null, 14); - const shouldShowIcon = field === PLATFORM_FILTER_NAME && icon !== null; + const shouldShowIcon = (field === PLATFORM_FILTER_NAME || field === CONTAINER_FILTER_NAME) && icon !== null; const shouldShowTagColor = field === TAGS_FILTER_NAME && entity?.type === EntityType.Tag; const isSubTypeFilter = field === TYPE_NAMES_FILTER_NAME; const parentEntities: Entity[] = getParentEntities(entity as Entity) || []; diff --git a/datahub-web-react/src/app/search/filters/utils.tsx b/datahub-web-react/src/app/search/filters/utils.tsx index f115277a049674..bd747777d11175 100644 --- a/datahub-web-react/src/app/search/filters/utils.tsx +++ b/datahub-web-react/src/app/search/filters/utils.tsx @@ -20,6 +20,7 @@ import { FacetFilterInput, FacetMetadata, GlossaryTerm, + Container, } from '../../../types.generated'; import { IconStyleType } from '../../entity/Entity'; import { @@ -186,6 +187,15 @@ export function getFilterIconAndLabel( entityRegistry.getIcon(EntityType.DataPlatform, size || 12, IconStyleType.ACCENT, ANTD_GRAY[9]) ); label = filterEntity ? entityRegistry.getDisplayName(EntityType.DataPlatform, filterEntity) : filterValue; + } else if (filterField === CONTAINER_FILTER_NAME) { + // Scenario where the filter entity exists and filterField is container + const logoUrl = (filterEntity as Container)?.platform?.properties?.logoUrl; + icon = logoUrl ? ( + + ) : ( + entityRegistry.getIcon(EntityType.DataPlatform, size || 12, IconStyleType.ACCENT, ANTD_GRAY[9]) + ); + label = entityRegistry.getDisplayName(EntityType.Container, filterEntity); } else if (filterField === BROWSE_PATH_V2_FILTER_NAME) { icon = ; label = getLastBrowseEntryFromFilterValue(filterValue); @@ -196,6 +206,7 @@ export function getFilterIconAndLabel( filterEntity, size, ); + icon = newIcon; label = newLabel; } else { @@ -344,6 +355,9 @@ export function getParentEntities(entity: Entity): Entity[] | null { if (entity.type === EntityType.Domain) { return (entity as Domain).parentDomains?.domains || []; } + if (entity.type === EntityType.Container) { + return (entity as Container).parentContainers?.containers || []; + } return null; } diff --git a/datahub-web-react/src/graphql/fragments.graphql b/datahub-web-react/src/graphql/fragments.graphql index 67dbdbbb22f309..ade63f151d1a09 100644 --- a/datahub-web-react/src/graphql/fragments.graphql +++ b/datahub-web-react/src/graphql/fragments.graphql @@ -1010,6 +1010,7 @@ fragment entityContainer on Container { fragment parentContainerFields on Container { urn + type properties { name } diff --git a/datahub-web-react/src/graphql/search.graphql b/datahub-web-react/src/graphql/search.graphql index 4a10d5fe250de1..3e26dd7121b72c 100644 --- a/datahub-web-react/src/graphql/search.graphql +++ b/datahub-web-react/src/graphql/search.graphql @@ -910,6 +910,9 @@ fragment facetFields on FacetMetadata { properties { name } + parentContainers { + ...parentContainersFields + } } ... on CorpUser { username