refactor how Pills is rendered

Author: asikowitz

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

@@ -1,4 +1,6 @@
-import React from 'react';
+import { LineageTabContext } from '@app/entityV2/shared/tabs/Lineage/LineageTabContext';
+import { useMatchedFieldsForList } from '@app/search/context/SearchResultContext';
+import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { Divider } from 'antd';
 import Pills from './Pills';
@@ -104,7 +106,23 @@ const DefaultPreviewCardFooter: React.FC<DefaultPreviewCardFooterProps> = ({
     paths,
     isFullViewCard,
 }) => {
-    const shouldRenderPillsRow = [glossaryTerms.length, tags.length, owners.length].some(Boolean);
+    const groupedMatches = useMatchedFieldsForList('fieldLabels');
+    const { lineageDirection, isColumnLevelLineage, selectedColumn } = useContext(LineageTabContext);
+
+    const showGlossaryTerms = entityHasCapability(entityCapabilities, EntityCapabilityType.GLOSSARY_TERMS);
+    const showTags = entityHasCapability(entityCapabilities, EntityCapabilityType.TAGS);
+    const showOwners = entityHasCapability(entityCapabilities, EntityCapabilityType.OWNERS);
+
+    // Only show the column paths pill on datasets who actually have columns to show
+    const shouldShowPaths =
+        !!paths?.length && entityType === EntityType.Dataset && isColumnLevelLineage && selectedColumn;
+    const shouldRenderPillsRow = [
+        showGlossaryTerms && glossaryTerms.length,
+        showTags && tags.length,
+        showOwners && owners.length,
+        groupedMatches.length,
+        shouldShowPaths,
+    ].some(Boolean);
     const shouldRenderEntityLink = previewType === PreviewType.HOVER_CARD && entityTitleSuffix;
     const shouldRenderRightSection =
         tier !== undefined ||
@@ -119,12 +137,12 @@ const DefaultPreviewCardFooter: React.FC<DefaultPreviewCardFooterProps> = ({
             <Container>
                 {isFullViewCard && (
                     <Pills
-                        glossaryTerms={glossaryTerms}
-                        tags={tags}
-                        owners={owners}
-                        entityCapabilities={entityCapabilities}
-                        paths={paths}
-                        entityType={entityType}
+                        glossaryTerms={showGlossaryTerms ? glossaryTerms : []}
+                        tags={showTags ? tags : []}
+                        owners={showOwners ? owners : []}
+                        groupedMatches={groupedMatches}
+                        paths={shouldRenderPillsRow ? paths : []}
+                        lineageDirection={lineageDirection}
                     />
                 )}
                 <RightSection isFullViewCard={isFullViewCard}>

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

@@ -1,24 +1,15 @@
 import { LayoutOutlined } from '@ant-design/icons';
+import { MatchesGroupedByFieldName } from '@app/searchV2/matches/constants';
 import React, { useContext } from 'react';
 import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
 import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
 import SellOutlinedIcon from '@mui/icons-material/SellOutlined';
 import styled from 'styled-components';
 import { BookmarkSimple } from '@phosphor-icons/react';
-import { useMatchedFieldsForList } from '../search/context/SearchResultContext';
-import {
-    EntityPath,
-    EntityType,
-    GlossaryTermAssociation,
-    LineageDirection,
-    Owner,
-    TagAssociation,
-} from '../../types.generated';
-import { EntityCapabilityType } from '../entityV2/Entity';
+import { EntityPath, GlossaryTermAssociation, LineageDirection, Owner, TagAssociation } from '../../types.generated';
 import MatchesContext, { PreviewSection } from '../shared/MatchesContext';
 import SearchPill from './SearchPill';
-import { entityHasCapability, getHighlightedTag } from './utils';
-import { LineageTabContext } from '../entityV2/shared/tabs/Lineage/LineageTabContext';
+import { getHighlightedTag } from './utils';
 
 const PillsContainer = styled.div`
     gap: 5px;
@@ -32,19 +23,14 @@ interface Props {
     glossaryTerms: GlossaryTermAssociation[];
     tags: TagAssociation[];
     owners: Owner[];
-    entityCapabilities: Set<EntityCapabilityType>;
+    groupedMatches: MatchesGroupedByFieldName[];
     paths?: EntityPath[];
-    entityType: EntityType;
+    lineageDirection: LineageDirection;
 }
 
-const Pills = ({ glossaryTerms, tags, owners, entityCapabilities, paths, entityType }: Props) => {
-    const { lineageDirection, isColumnLevelLineage, selectedColumn } = useContext(LineageTabContext);
+const Pills = ({ glossaryTerms, tags, owners, groupedMatches, paths, lineageDirection }: Props) => {
     const lineageDirectionText = lineageDirection === LineageDirection.Downstream ? 'downstream' : 'upstream';
     const { setExpandedSection, expandedSection } = useContext(MatchesContext);
-    const groupedMatches = useMatchedFieldsForList('fieldLabels');
-    const showGlossaryTermsBadge = entityHasCapability(entityCapabilities, EntityCapabilityType.GLOSSARY_TERMS);
-    const showTagsBadge = entityHasCapability(entityCapabilities, EntityCapabilityType.TAGS);
-    const showOwnersBadge = entityHasCapability(entityCapabilities, EntityCapabilityType.OWNERS);
     const highlightedTag = getHighlightedTag(tags);
 
     const handlePillClick = (section: PreviewSection | undefined, data) => (e) => {
@@ -56,7 +42,7 @@ const Pills = ({ glossaryTerms, tags, owners, entityCapabilities, paths, entityT
 
     return (
         <PillsContainer>
-            {showGlossaryTermsBadge && !!glossaryTerms.length && (
+            {!!glossaryTerms.length && (
                 <SearchPill
                     icon={<BookmarkSimple />}
                     count={glossaryTerms.length || 0}
@@ -68,7 +54,7 @@ const Pills = ({ glossaryTerms, tags, owners, entityCapabilities, paths, entityT
                     highlightedText={glossaryTerms.length ? glossaryTerms[0]?.term?.properties?.name : ''}
                 />
             )}
-            {showTagsBadge && !!tags.length && (
+            {!!tags.length && (
                 <SearchPill
                     icon={<SellOutlinedIcon />}
                     count={tags.length}
@@ -80,7 +66,7 @@ const Pills = ({ glossaryTerms, tags, owners, entityCapabilities, paths, entityT
                     highlightedText={highlightedTag}
                 />
             )}
-            {showOwnersBadge && !!owners.length && (
+            {!!owners.length && (
                 <SearchPill
                     icon={<AccountCircleOutlinedIcon />}
                     count={owners.length}
@@ -92,7 +78,7 @@ const Pills = ({ glossaryTerms, tags, owners, entityCapabilities, paths, entityT
                 />
             )}
 
-            {groupedMatches.length > 0 && (
+            {!!groupedMatches.length && (
                 <SearchPill
                     icon={<FindInPageOutlinedIcon />}
                     count={groupedMatches?.length || 0}
@@ -103,22 +89,17 @@ const Pills = ({ glossaryTerms, tags, owners, entityCapabilities, paths, entityT
                     onClick={handlePillClick(PreviewSection.MATCHES, groupedMatches)}
                 />
             )}
-            {/* only show the column paths pill on datasets who actually have columns to show */}
-            {paths &&
-                paths.length > 0 &&
-                entityType === EntityType.Dataset &&
-                isColumnLevelLineage &&
-                selectedColumn && (
-                    <SearchPill
-                        icon={<LayoutOutlined />}
-                        count={paths.length || 0}
-                        enabled={!!paths.length}
-                        active={expandedSection === PreviewSection.COLUMN_PATHS}
-                        label=""
-                        countLabel={`${lineageDirectionText} column`}
-                        onClick={handlePillClick(PreviewSection.COLUMN_PATHS, paths)}
-                    />
-                )}
+            {!!paths?.length && (
+                <SearchPill
+                    icon={<LayoutOutlined />}
+                    count={paths.length}
+                    enabled={!!paths.length}
+                    active={expandedSection === PreviewSection.COLUMN_PATHS}
+                    label=""
+                    countLabel={`${lineageDirectionText} column`}
+                    onClick={handlePillClick(PreviewSection.COLUMN_PATHS, paths)}
+                />
+            )}
         </PillsContainer>
     );
 };