feat(glossary): splitting apart tags & terms into their own visual sections

datahub-web-react/src/app/entity/shared/constants.ts

@@ -26,6 +26,10 @@ export const EMPTY_MESSAGES = {
         title: 'No tags added yet',
         description: 'Tag entities to help make them more discoverable and call out their most important attributes.',
     },
+    terms: {
+        title: 'No terms added yet',
+        description: 'Apply glossary terms to entities to classify their data.',
+    },
     owners: {
         title: 'No owners added yet',
         description:

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

@@ -1,28 +1,45 @@
 import React from 'react';
+import styled from 'styled-components';
+
 import TagTermGroup from '../../../../../shared/tags/TagTermGroup';
 import { SidebarHeader } from './SidebarHeader';
 import { useEntityData, useRefetch } from '../../../EntityContext';
 
+const TermSection = styled.div`
+    margin-top: 20px;
+`;
+
 export const SidebarTagsSection = ({ properties }: { properties?: any }) => {
     const canAddTag = properties?.hasTags;
     const canAddTerm = properties?.hasTerms;
 
     const { urn, entityType, entityData } = useEntityData();
+
     const refetch = useRefetch();
     return (
         <div>
             <SidebarHeader title="Tags" />
             <TagTermGroup
                 editableTags={entityData?.globalTags}
-                editableGlossaryTerms={entityData?.glossaryTerms}
                 canAddTag={canAddTag}
-                canAddTerm={canAddTerm}
                 canRemove
                 showEmptyMessage
                 entityUrn={urn}
                 entityType={entityType}
                 refetch={refetch}
             />
+            <TermSection>
+                <SidebarHeader title="Glossary Terms" />
+                <TagTermGroup
+                    editableGlossaryTerms={entityData?.glossaryTerms}
+                    canAddTerm={canAddTerm}
+                    canRemove
+                    showEmptyMessage
+                    entityUrn={urn}
+                    entityType={entityType}
+                    refetch={refetch}
+                />
+            </TermSection>
         </div>
     );
 };

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx

@@ -63,31 +63,50 @@ export default function SchemaTable({
 
     const descriptionRender = useDescriptionRenderer(editableSchemaMetadata, onUpdateDescription);
     const usageStatsRenderer = useUsageStatsRenderer(usageStats);
-    const tagAndTermRender = useTagsAndTermsRenderer(
+    const tagRenderer = useTagsAndTermsRenderer(
         editableSchemaMetadata,
         onUpdateTags,
         tagHoveredIndex,
         setTagHoveredIndex,
+        { showTags: true, showTerms: false },
     );
+    const termRenderer = useTagsAndTermsRenderer(
+        editableSchemaMetadata,
+        onUpdateTags,
+        tagHoveredIndex,
+        setTagHoveredIndex,
+        { showTags: false, showTerms: true },
+    );
+
+    const onTagTermCell = (record: SchemaField, rowIndex: number | undefined) => ({
+        onMouseEnter: () => {
+            if (editMode) {
+                setTagHoveredIndex(`${record.fieldPath}-${rowIndex}`);
+            }
+        },
+        onMouseLeave: () => {
+            if (editMode) {
+                setTagHoveredIndex(undefined);
+            }
+        },
+    });
+
+    const tagColumn = {
+        width: 125,
+        title: 'Tags',
+        dataIndex: 'globalTags',
+        key: 'tag',
+        render: tagRenderer,
+        onCell: onTagTermCell,
+    };
 
-    const tagAndTermColumn = {
-        width: 150,
-        title: 'Tags & Terms',
+    const termColumn = {
+        width: 125,
+        title: 'Terms',
         dataIndex: 'globalTags',
         key: 'tag',
-        render: tagAndTermRender,
-        onCell: (record: SchemaField, rowIndex: number | undefined) => ({
-            onMouseEnter: () => {
-                if (editMode) {
-                    setTagHoveredIndex(`${record.fieldPath}-${rowIndex}`);
-                }
-            },
-            onMouseLeave: () => {
-                if (editMode) {
-                    setTagHoveredIndex(undefined);
-                }
-            },
-        }),
+        render: termRenderer,
+        onCell: onTagTermCell,
     };
 
     const usageColumn = {
@@ -105,7 +124,7 @@ export default function SchemaTable({
         width: 300,
     };
 
-    let allColumns: ColumnsType<ExtendedSchemaFields> = [...defaultColumns, descriptionColumn, tagAndTermColumn];
+    let allColumns: ColumnsType<ExtendedSchemaFields> = [...defaultColumns, descriptionColumn, tagColumn, termColumn];
 
     if (hasUsageStats) {
         allColumns = [...allColumns, usageColumn];

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/utils/useTagsAndTermsRenderer.tsx

@@ -16,6 +16,7 @@ export default function useTagsAndTermsRenderer(
     onUpdateTags: (update: GlobalTagsUpdate, record?: EditableSchemaFieldInfo) => Promise<any>,
     tagHoveredIndex: string | undefined,
     setTagHoveredIndex: (index: string | undefined) => void,
+    options: { showTags: boolean; showTerms: boolean },
 ) {
     const { urn } = useEntityData();
     const refetch = useRefetch();
@@ -27,14 +28,14 @@ export default function useTagsAndTermsRenderer(
 
         return (
             <TagTermGroup
-                uneditableTags={tags}
-                editableTags={relevantEditableFieldInfo?.globalTags}
-                uneditableGlossaryTerms={record.glossaryTerms}
-                editableGlossaryTerms={relevantEditableFieldInfo?.glossaryTerms}
+                uneditableTags={options.showTags ? tags : null}
+                editableTags={options.showTags ? relevantEditableFieldInfo?.globalTags : null}
+                uneditableGlossaryTerms={options.showTerms ? record.glossaryTerms : null}
+                editableGlossaryTerms={options.showTerms ? relevantEditableFieldInfo?.glossaryTerms : null}
                 canRemove
                 buttonProps={{ size: 'small' }}
-                canAddTag={tagHoveredIndex === `${record.fieldPath}-${rowIndex}`}
-                canAddTerm={tagHoveredIndex === `${record.fieldPath}-${rowIndex}`}
+                canAddTag={tagHoveredIndex === `${record.fieldPath}-${rowIndex}` && options.showTags}
+                canAddTerm={tagHoveredIndex === `${record.fieldPath}-${rowIndex}` && options.showTerms}
                 onOpenModal={() => setTagHoveredIndex(undefined)}
                 entityUrn={urn}
                 entityType={EntityType.Dataset}

datahub-web-react/src/app/shared/tags/TagTermGroup.tsx

@@ -64,7 +64,11 @@ export default function TagTermGroup({
     const entityRegistry = useEntityRegistry();
     const [showAddModal, setShowAddModal] = useState(false);
     const [addModalType, setAddModalType] = useState(EntityType.Tag);
-    const tagsEmpty = !editableTags?.tags?.length;
+    const tagsEmpty =
+        !editableTags?.tags?.length &&
+        !uneditableTags?.tags?.length &&
+        !editableGlossaryTerms?.terms?.length &&
+        !uneditableGlossaryTerms?.terms?.length;
     const [removeTagMutation] = useRemoveTagMutation();
     const [removeTermMutation] = useRemoveTermMutation();
 
@@ -203,11 +207,16 @@ export default function TagTermGroup({
                     </TagLink>
                 );
             })}
-            {showEmptyMessage && (canAddTag || canAddTerm) && tagsEmpty && (
+            {showEmptyMessage && canAddTag && tagsEmpty && (
                 <Typography.Paragraph type="secondary">
                     {EMPTY_MESSAGES.tags.title}. {EMPTY_MESSAGES.tags.description}
                 </Typography.Paragraph>
             )}
+            {showEmptyMessage && canAddTerm && tagsEmpty && (
+                <Typography.Paragraph type="secondary">
+                    {EMPTY_MESSAGES.terms.title}. {EMPTY_MESSAGES.terms.description}
+                </Typography.Paragraph>
+            )}
             {canAddTag && (uneditableTags?.tags?.length || 0) + (editableTags?.tags?.length || 0) < 10 && (
                 <NoElementButton
                     type={showEmptyMessage && tagsEmpty ? 'default' : 'text'}