Skip to content

Commit 0e2f2d8

Browse files
asikowitzasikowitz
committed
add to preview cards; minor refactor of v2 default preview card
1 parent 8a86cf8 commit 0e2f2d8

File tree

15 files changed

+92
-70
lines changed

15 files changed

+92
-70
lines changed

‎datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ class GlossaryNodeEntity implements Entity<GlossaryNode> {
136136
name={this.displayName(data)}
137137
description={data?.properties?.description || ''}
138138
owners={data?.ownership?.owners}
139-
globalTags={data.globalTags}
139+
tags={data.tags ?? undefined}
140140
/>
141141
);
142142
};

‎datahub-web-react/src/app/entity/glossaryNode/preview/Preview.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { FolderOutlined } from '@ant-design/icons';
3-
import { EntityType, Owner, ParentNodesResult } from '../../../../types.generated';
3+
import { EntityType, GlobalTags, Owner, ParentNodesResult } from '../../../../types.generated';
44
import DefaultPreviewCard from '../../../preview/DefaultPreviewCard';
55
import { useEntityRegistry } from '../../../useEntityRegistry';
66

@@ -10,12 +10,14 @@ export const Preview = ({
1010
description,
1111
owners,
1212
parentNodes,
13+
tags,
1314
}: {
1415
urn: string;
1516
name: string;
1617
description?: string | null;
1718
owners?: Array<Owner> | null;
1819
parentNodes?: ParentNodesResult | null;
20+
tags?: GlobalTags;
1921
}): JSX.Element => {
2022
const entityRegistry = useEntityRegistry();
2123
return (
@@ -28,6 +30,7 @@ export const Preview = ({
2830
logoComponent={<FolderOutlined style={{ fontSize: '20px' }} />}
2931
type={entityRegistry.getEntityName(EntityType.GlossaryNode)}
3032
parentEntities={parentNodes?.nodes}
33+
tags={tags}
3134
/>
3235
);
3336
};

‎datahub-web-react/src/app/entity/glossaryTerm/GlossaryTermEntity.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export class GlossaryTermEntity implements Entity<GlossaryTerm> {
164164
description={data?.properties?.description || ''}
165165
owners={data?.ownership?.owners}
166166
domain={data.domain?.domain}
167-
globalTags={data.globalTags}
167+
tags={data.tags ?? undefined}
168168
/>
169169
);
170170
};

‎datahub-web-react/src/app/entity/glossaryTerm/preview/Preview.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { BookOutlined } from '@ant-design/icons';
3-
import { Deprecation, Domain, EntityType, Owner, ParentNodesResult } from '../../../../types.generated';
3+
import { Deprecation, Domain, EntityType, GlobalTags, Owner, ParentNodesResult } from '../../../../types.generated';
44
import DefaultPreviewCard from '../../../preview/DefaultPreviewCard';
55
import { useEntityRegistry } from '../../../useEntityRegistry';
66
import { IconStyleType, PreviewType } from '../../Entity';
@@ -16,6 +16,7 @@ export const Preview = ({
1616
parentNodes,
1717
previewType,
1818
domain,
19+
tags,
1920
}: {
2021
urn: string;
2122
name: string;
@@ -25,6 +26,7 @@ export const Preview = ({
2526
parentNodes?: ParentNodesResult | null;
2627
previewType: PreviewType;
2728
domain?: Domain | undefined;
29+
tags?: GlobalTags;
2830
}): JSX.Element => {
2931
const entityRegistry = useEntityRegistry();
3032
return (
@@ -44,6 +46,7 @@ export const Preview = ({
4446
entityTitleSuffix={
4547
<UrlButton href={getRelatedEntitiesUrl(entityRegistry, urn)}>View Related Entities</UrlButton>
4648
}
49+
tags={tags}
4750
/>
4851
);
4952
};

‎datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarTagsSection.tsx

+20-18
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,26 @@ export const SidebarTagsSection = ({ properties, readOnly }: Props) => {
3232

3333
return (
3434
<div>
35-
<span id={ENTITY_PROFILE_TAGS_ID}>
36-
<SidebarHeader title="Tags" />
37-
<TagTermGroup
38-
editableTags={
39-
properties?.customTagPath
40-
? getNestedValue(entityData, properties?.customTagPath)
41-
: entityData?.globalTags
42-
}
43-
canAddTag={canAddTag}
44-
canRemove
45-
showEmptyMessage
46-
entityUrn={mutationUrn}
47-
entityType={entityType}
48-
refetch={refetch}
49-
readOnly={readOnly}
50-
fontSize={12}
51-
/>
52-
</span>
35+
{canAddTag && (
36+
<span id={ENTITY_PROFILE_TAGS_ID}>
37+
<SidebarHeader title="Tags" />
38+
<TagTermGroup
39+
editableTags={
40+
properties?.customTagPath
41+
? getNestedValue(entityData, properties?.customTagPath)
42+
: entityData?.globalTags
43+
}
44+
canAddTag={canAddTag}
45+
canRemove
46+
showEmptyMessage
47+
entityUrn={mutationUrn}
48+
entityType={entityType}
49+
refetch={refetch}
50+
readOnly={readOnly}
51+
fontSize={12}
52+
/>
53+
</span>
54+
)}
5355
{canAddTerm && (
5456
<>
5557
<StyledDivider />

‎datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { AppstoreOutlined, FileOutlined, UnorderedListOutlined } from '@ant-design/icons';
2+
import { SidebarTagsSection } from '@app/entityV2/shared/containers/profile/sidebar/SidebarTagsSection';
23
import React from 'react';
34
import { BookmarksSimple } from '@phosphor-icons/react';
45
import { useGetGlossaryNodeQuery } from '../../../graphql/glossaryNode.generated';
@@ -129,6 +130,7 @@ class GlossaryNodeEntity implements Entity<GlossaryNode> {
129130
{
130131
component: SidebarOwnerSection,
131132
},
133+
{ component: SidebarTagsSection },
132134
{
133135
component: SidebarStructuredProperties,
134136
},
@@ -193,6 +195,7 @@ class GlossaryNodeEntity implements Entity<GlossaryNode> {
193195
EntityCapabilityType.OWNERS,
194196
EntityCapabilityType.DEPRECATION,
195197
EntityCapabilityType.SOFT_DELETE,
198+
EntityCapabilityType.TAGS,
196199
]);
197200
};
198201

‎datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { AppstoreOutlined, FileOutlined, LayoutOutlined, UnorderedListOutlined } from '@ant-design/icons';
2+
import { SidebarTagsSection } from '@app/entityV2/shared/containers/profile/sidebar/SidebarTagsSection';
23
import * as React from 'react';
34
import { BookmarkSimple } from '@phosphor-icons/react';
45
import { GetGlossaryTermQuery, useGetGlossaryTermQuery } from '../../../graphql/glossaryTerm.generated';
@@ -170,6 +171,7 @@ export class GlossaryTermEntity implements Entity<GlossaryTerm> {
170171
hideOwnerType: true,
171172
},
172173
},
174+
{ component: SidebarTagsSection },
173175
{
174176
component: SidebarStructuredProperties,
175177
},
@@ -237,6 +239,7 @@ export class GlossaryTermEntity implements Entity<GlossaryTerm> {
237239
EntityCapabilityType.OWNERS,
238240
EntityCapabilityType.DEPRECATION,
239241
EntityCapabilityType.SOFT_DELETE,
242+
EntityCapabilityType.TAGS,
240243
]);
241244
};
242245

‎datahub-web-react/src/app/previewV2/DefaultPreviewCard.tsx

+16-16
Original file line numberDiff line numberDiff line change
@@ -179,27 +179,27 @@ export default function DefaultPreviewCard({
179179
name,
180180
urn,
181181
data,
182-
logoUrl, // eslint-disable-next-line @typescript-eslint/no-unused-vars
183-
logoComponent,
182+
logoUrl,
183+
logoComponent, // eslint-disable-line @typescript-eslint/no-unused-vars
184184
url,
185185
entityType,
186186
type,
187187
typeIcon,
188188
platform,
189189
platformInstanceId,
190-
tags,
191-
owners, // eslint-disable-next-line @typescript-eslint/no-unused-vars
192-
topUsers,
193-
glossaryTerms,
194-
paths, // eslint-disable-next-line @typescript-eslint/no-unused-vars
195-
subHeader,
190+
tags, // eslint-disable-line @typescript-eslint/no-unused-vars
191+
owners, // eslint-disable-line @typescript-eslint/no-unused-vars
192+
topUsers, // eslint-disable-line @typescript-eslint/no-unused-vars
193+
glossaryTerms, // eslint-disable-line @typescript-eslint/no-unused-vars
194+
paths,
195+
subHeader, // eslint-disable-line @typescript-eslint/no-unused-vars
196196
snippet,
197-
insights, // eslint-disable-next-line @typescript-eslint/no-unused-vars
198-
domain, // eslint-disable-next-line @typescript-eslint/no-unused-vars
199-
dataProduct,
197+
insights,
198+
domain, // eslint-disable-line @typescript-eslint/no-unused-vars
199+
dataProduct, // eslint-disable-line @typescript-eslint/no-unused-vars
200200
container,
201-
deprecation, // eslint-disable-next-line @typescript-eslint/no-unused-vars
202-
entityCount,
201+
deprecation,
202+
entityCount, // eslint-disable-line @typescript-eslint/no-unused-vars
203203
titleSizePx,
204204
dataTestID,
205205
entityTitleSuffix,
@@ -356,9 +356,9 @@ export default function DefaultPreviewCard({
356356
/>
357357
)}
358358
<DefaultPreviewCardFooter
359-
glossaryTerms={glossaryTerms}
360-
tags={tags}
361-
owners={owners}
359+
glossaryTerms={data?.glossaryTerms?.terms || []}
360+
tags={data?.globalTags?.tags ?? []}
361+
owners={data?.ownership?.owners || []}
362362
entityCapabilities={supportedCapabilities}
363363
tier={tier}
364364
previewType={previewType}

‎datahub-web-react/src/app/previewV2/DefaultPreviewCardFooter.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ import {
88
DatasetStatsSummary,
99
EntityPath,
1010
EntityType,
11-
GlobalTags,
12-
GlossaryTerms,
11+
GlossaryTermAssociation,
1312
Maybe,
1413
Owner,
14+
TagAssociation,
1515
} from '../../types.generated';
1616
import { EntityCapabilityType, PreviewType } from '../entityV2/Entity';
1717
import PreviewCardFooterRightSection from './PreviewCardFooterRightSection';
@@ -21,9 +21,9 @@ import { entityHasCapability } from './utils';
2121
import { DatasetLastUpdatedMs, DashboardLastUpdatedMs } from '../entityV2/shared/utils';
2222

2323
interface DefaultPreviewCardFooterProps {
24-
glossaryTerms?: GlossaryTerms;
25-
tags?: GlobalTags;
26-
owners?: Array<Owner> | null;
24+
glossaryTerms: GlossaryTermAssociation[];
25+
tags: TagAssociation[];
26+
owners: Owner[];
2727
entityCapabilities: Set<EntityCapabilityType>;
2828
tier?: PopularityTier;
2929
entityTitleSuffix?: React.ReactNode;
@@ -43,6 +43,7 @@ const Container = styled.div`
4343
display: flex;
4444
justify-content: space-between;
4545
align-items: center;
46+
4647
.ant-btn-link {
4748
padding: inherit;
4849
}
@@ -103,7 +104,7 @@ const DefaultPreviewCardFooter: React.FC<DefaultPreviewCardFooterProps> = ({
103104
paths,
104105
isFullViewCard,
105106
}) => {
106-
const shouldRenderPillsRow = [glossaryTerms?.terms, tags?.tags, owners?.length].some(Boolean);
107+
const shouldRenderPillsRow = [glossaryTerms.length, tags.length, owners.length].some(Boolean);
107108
const shouldRenderEntityLink = previewType === PreviewType.HOVER_CARD && entityTitleSuffix;
108109
const shouldRenderRightSection =
109110
tier !== undefined ||

‎datahub-web-react/src/app/previewV2/Pills.tsx

+22-15
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ import SellOutlinedIcon from '@mui/icons-material/SellOutlined';
66
import styled from 'styled-components';
77
import { BookmarkSimple } from '@phosphor-icons/react';
88
import { useMatchedFieldsForList } from '../search/context/SearchResultContext';
9-
import { EntityPath, EntityType, GlobalTags, GlossaryTerms, LineageDirection, Owner } from '../../types.generated';
9+
import {
10+
EntityPath,
11+
EntityType,
12+
GlossaryTermAssociation,
13+
LineageDirection,
14+
Owner,
15+
TagAssociation,
16+
} from '../../types.generated';
1017
import { EntityCapabilityType } from '../entityV2/Entity';
1118
import MatchesContext, { PreviewSection } from '../shared/MatchesContext';
1219
import SearchPill from './SearchPill';
@@ -22,9 +29,9 @@ const PillsContainer = styled.div`
2229
`;
2330

2431
interface Props {
25-
glossaryTerms?: GlossaryTerms;
26-
tags?: GlobalTags;
27-
owners?: Array<Owner> | null;
32+
glossaryTerms: GlossaryTermAssociation[];
33+
tags: TagAssociation[];
34+
owners: Owner[];
2835
entityCapabilities: Set<EntityCapabilityType>;
2936
paths?: EntityPath[];
3037
entityType: EntityType;
@@ -49,34 +56,34 @@ const Pills = ({ glossaryTerms, tags, owners, entityCapabilities, paths, entityT
4956

5057
return (
5158
<PillsContainer>
52-
{showGlossaryTermsBadge && glossaryTerms && (
59+
{showGlossaryTermsBadge && !!glossaryTerms.length && (
5360
<SearchPill
5461
icon={<BookmarkSimple />}
55-
count={glossaryTerms.terms?.length || 0}
56-
enabled={!!glossaryTerms.terms?.length}
62+
count={glossaryTerms.length || 0}
63+
enabled={!!glossaryTerms.length}
5764
active={expandedSection === PreviewSection.GLOSSARY_TERMS}
5865
label=""
5966
countLabel="term"
60-
onClick={handlePillClick(PreviewSection.GLOSSARY_TERMS, glossaryTerms.terms)}
61-
highlightedText={glossaryTerms.terms?.length ? glossaryTerms?.terms[0]?.term?.properties?.name : ''}
67+
onClick={handlePillClick(PreviewSection.GLOSSARY_TERMS, glossaryTerms)}
68+
highlightedText={glossaryTerms.length ? glossaryTerms[0]?.term?.properties?.name : ''}
6269
/>
6370
)}
64-
{showTagsBadge && tags && (
71+
{showTagsBadge && !!tags.length && (
6572
<SearchPill
6673
icon={<SellOutlinedIcon />}
67-
count={tags.tags?.length || 0}
68-
enabled={!!tags.tags?.length}
74+
count={tags.length}
75+
enabled={!!tags.length}
6976
active={expandedSection === PreviewSection.TAGS}
7077
label=""
7178
countLabel="tag"
72-
onClick={handlePillClick(PreviewSection.TAGS, tags.tags)}
79+
onClick={handlePillClick(PreviewSection.TAGS, tags)}
7380
highlightedText={highlightedTag}
7481
/>
7582
)}
76-
{showOwnersBadge && owners && (
83+
{showOwnersBadge && !!owners.length && (
7784
<SearchPill
7885
icon={<AccountCircleOutlinedIcon />}
79-
count={owners.length || 0}
86+
count={owners.length}
8087
enabled={!!owners.length}
8188
active={expandedSection === PreviewSection.OWNERS}
8289
label=""

‎datahub-web-react/src/app/previewV2/__tests__/utils.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('Preview V2 utils tests', () => {
2323
expect(result).toBe(false);
2424
});
2525
it('getHighlightedTag -> get name of the tag', () => {
26-
const result = getHighlightedTag(globalTags);
26+
const result = getHighlightedTag(globalTags.tags || []);
2727
expect(result).toMatch('abc-sample-tag');
2828
});
2929
it('getHighlightedTag -> get empty output for empty tag', () => {

‎datahub-web-react/src/app/previewV2/utils.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Modal, message } from 'antd';
22
import { useBatchSetDataProductMutation } from '@src/graphql/dataProduct.generated';
33
import { useRemoveTermMutation, useUnsetDomainMutation } from '../../graphql/mutations.generated';
4-
import { BrowsePathV2, GlobalTags, Owner } from '../../types.generated';
4+
import { BrowsePathV2, Owner, TagAssociation } from '../../types.generated';
55
import { EntityCapabilityType } from '../entityV2/Entity';
66
import { useEntityContext } from '../entity/shared/EntityContext';
77

@@ -15,10 +15,10 @@ export const entityHasCapability = (
1515
capabilityToCheck: EntityCapabilityType,
1616
): boolean => capabilities.has(capabilityToCheck);
1717

18-
export const getHighlightedTag = (tags?: GlobalTags) => {
19-
if (tags && tags.tags?.length) {
20-
if (tags?.tags[0].tag.properties) return tags?.tags[0]?.tag?.properties?.name;
21-
return tags?.tags[0]?.tag?.name;
18+
export const getHighlightedTag = (tags?: TagAssociation[]) => {
19+
if (tags?.length) {
20+
if (tags[0].tag.properties) return tags[0]?.tag?.properties?.name;
21+
return tags[0]?.tag?.name;
2222
}
2323
return '';
2424
};

‎datahub-web-react/src/graphql/glossaryNode.graphql

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ query getGlossaryNode($urn: String!) {
3838
forms {
3939
...formsFields
4040
}
41-
globalTags {
41+
tags {
4242
...globalTagsFields
4343
}
4444
children: relationships(input: { types: ["IsPartOf"], direction: INCOMING, start: 0, count: 10000 }) {

‎datahub-web-react/src/graphql/glossaryTerm.graphql

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ query getGlossaryTerm($urn: String!, $start: Int, $count: Int) {
6363
domain {
6464
...entityDomain
6565
}
66-
globalTags {
66+
tags {
6767
...globalTagsFields
6868
}
6969
institutionalMemory {

0 commit comments

Comments
 (0)