Skip to content

Commit

Permalink
feat(): Add parent container hierarchy label to the container (datahu…
Browse files Browse the repository at this point in the history 
…b-project#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]>
  • Loading branch information
@kanavnarula @david-leifker
6 people authored Dec 9, 2024
1 parent bb67af0 commit 8a1c180
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 3 deletions.
14 changes: 13 additions & 1 deletion ...react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -26,14 +28,18 @@ const StyleTag = styled(Tag)`
align-items: center;
`;

const PreviewImage = styled.img`
export const PreviewImage = styled.img`
max-height: 18px;
width: auto;
object-fit: contain;
background-color: transparent;
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();
Expand Down Expand Up @@ -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 (
<Tooltip title={displayName}>
{parentEntities.length > 0 && (
<ParentWrapper>
<ParentEntities parentEntities={parentEntities} />
</ParentWrapper>
)}
<PreviewImage src={entity.platform?.properties?.logoUrl || undefined} alt={entity.properties?.name} />
<span>{truncatedDisplayName}</span>
</Tooltip>
Expand Down
11 changes: 10 additions & 1 deletion datahub-web-react/src/app/search/SearchFilterLabel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 (
<Tooltip title={displayName}>
{!!container.platform?.properties?.logoUrl && (
<PreviewImage src={container.platform?.properties?.logoUrl} alt={container.properties?.name} />
<>
<ParentWrapper style={{ width: '200px' }}>
<ParentEntities parentEntities={parentEntities} />
</ParentWrapper>
<PreviewImage src={container.platform?.properties?.logoUrl} alt={container.properties?.name} />
</>
)}
<span>
{truncatedDisplayName}
Expand Down
3 changes: 2 additions & 1 deletion datahub-web-react/src/app/search/filters/FilterOption.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) || [];
Expand Down
14 changes: 14 additions & 0 deletions datahub-web-react/src/app/search/filters/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
FacetFilterInput,
FacetMetadata,
GlossaryTerm,
Container,
} from '../../../types.generated';
import { IconStyleType } from '../../entity/Entity';
import {
Expand Down Expand Up @@ -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 ? (
<PlatformIcon src={logoUrl} size={size} />
) : (
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 = <FolderFilled size={size} color="black" />;
label = getLastBrowseEntryFromFilterValue(filterValue);
Expand All @@ -196,6 +206,7 @@ export function getFilterIconAndLabel(
filterEntity,
size,
);

icon = newIcon;
label = newLabel;
} else {
Expand Down Expand Up @@ -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;
}

Expand Down
1 change: 1 addition & 0 deletions datahub-web-react/src/graphql/fragments.graphql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1010,6 +1010,7 @@ fragment entityContainer on Container {

fragment parentContainerFields on Container {
urn
type
properties {
name
}
Expand Down
3 changes: 3 additions & 0 deletions datahub-web-react/src/graphql/search.graphql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -910,6 +910,9 @@ fragment facetFields on FacetMetadata {
properties {
name
}
parentContainers {
...parentContainersFields
}
}
... on CorpUser {
username
Expand Down

0 comments on commit 8a1c180

Please sign in to comment.