diff --git a/datahub-web-react/src/app/entity/group/GroupMembers.tsx b/datahub-web-react/src/app/entity/group/GroupMembers.tsx index 147c3f8030d0e..28e81b438d4cb 100644 --- a/datahub-web-react/src/app/entity/group/GroupMembers.tsx +++ b/datahub-web-react/src/app/entity/group/GroupMembers.tsx @@ -137,12 +137,13 @@ export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeM }, 3000); }; - const onRemoveMember = (memberUrn: string) => { + const onRemoveMember = (memberEntity: CorpUser) => { + const memberName = entityRegistry.getDisplayName(EntityType.CorpUser, memberEntity); Modal.confirm({ title: `Confirm Group Member Removal`, - content: `Are you sure you want to remove this user from the group?`, + content: `Are you sure you want to remove ${memberName} user from the group?`, onOk() { - removeGroupMember(memberUrn); + removeGroupMember(memberEntity?.urn); }, onCancel() {}, okText: 'Yes', @@ -155,7 +156,7 @@ export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeM const total = relationships?.total || 0; const groupMembers = relationships?.relationships?.map((rel) => rel.entity as CorpUser) || []; - const getItems = (urnID: string): MenuProps['items'] => { + const getItems = (userEntity: CorpUser): MenuProps['items'] => { return [ { key: 'make', @@ -169,7 +170,7 @@ export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeM { key: 'remove', disabled: isExternalGroup, - onClick: () => onRemoveMember(urnID), + onClick: () => onRemoveMember(userEntity), label: ( Remove from Group @@ -210,7 +211,7 @@ export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeM - + 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 681f89831b92c..818d75c37696d 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 5a0e75cc2ae1c..4f74009a15b29 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,14 @@ 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 3749f44cbf671..50b78c7f0685c 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 f115277a04967..b2db28f4e4c99 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 { @@ -190,14 +191,26 @@ export function getFilterIconAndLabel( icon = ; label = getLastBrowseEntryFromFilterValue(filterValue); } else if (filterEntity) { - const { icon: newIcon, label: newLabel } = getFilterWithEntityIconAndLabel( - filterValue, - entityRegistry, - filterEntity, - size, - ); - icon = newIcon; - label = newLabel; + // Scenario where the filter entity exists and filterField is container + if (filterField === CONTAINER_FILTER_NAME) { + const logoUrl = (filterEntity as Container)?.platform?.properties?.logoUrl; + icon = logoUrl ? ( + + ) : ( + entityRegistry.getIcon(EntityType.DataPlatform, size || 12, IconStyleType.ACCENT, ANTD_GRAY[9]) + ); + label = entityRegistry.getDisplayName(filterEntity.type, filterEntity) + } else { + const { icon: newIcon, label: newLabel } = getFilterWithEntityIconAndLabel( + filterValue, + entityRegistry, + filterEntity, + size, + ); + + icon = newIcon; + label = newLabel; + } } else { label = filterValue; } @@ -344,6 +357,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 7ce4082c42f61..501ff073d3477 100644 --- a/datahub-web-react/src/graphql/fragments.graphql +++ b/datahub-web-react/src/graphql/fragments.graphql @@ -1000,6 +1000,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 38c9df0a636d0..10e21560ff398 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