fix(ui): glossary terms table expand / collapse state (#19205)

open-metadata · Jan 3, 2025 · 6f79067 · 6f79067
1 parent cdef12c
commit 6f79067
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/...c/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/...c/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
@@ -106,10 +106,14 @@ const GlossaryTermTab = ({
     useGlossaryStore();
   const { t } = useTranslation();
 
-  const glossaryTerms = useMemo(
-    () => (glossaryChildTerms as ModifiedGlossaryTerm[]) ?? [],
-    [glossaryChildTerms]
-  );
+  const { glossaryTerms, expandableKeys } = useMemo(() => {
+    const terms = (glossaryChildTerms as ModifiedGlossaryTerm[]) ?? [];
+
+    return {
+      expandableKeys: findExpandableKeysForArray(terms),
+      glossaryTerms: terms,
+    };
+  }, [glossaryChildTerms]);
 
   const [movedGlossaryTerm, setMovedGlossaryTerm] =
     useState<MoveGlossaryTermType>();
@@ -143,10 +147,6 @@ const GlossaryTermTab = ({
     return null;
   }, [isGlossary, activeGlossary]);
 
-  const expandableKeys = useMemo(() => {
-    return findExpandableKeysForArray(glossaryTerms);
-  }, [glossaryTerms]);
-
   const columns = useMemo(() => {
     const data: ColumnsType<ModifiedGlossaryTerm> = [
       {
@@ -818,6 +818,10 @@ const GlossaryTermTab = ({
     );
   }
 
+  const filteredGlossaryTerms = glossaryTerms.filter((term) =>
+    selectedStatus.includes(term.status as string)
+  );
+
   return (
     <Row className={className} gutter={[0, 16]}>
       <Col span={24}>
@@ -897,9 +901,7 @@ const GlossaryTermTab = ({
               columns={rearrangedColumns.filter((col) => !col.hidden)}
               components={TABLE_CONSTANTS}
               data-testid="glossary-terms-table"
-              dataSource={glossaryTerms.filter((term) =>
-                selectedStatus.includes(term.status as string)
-              )}
+              dataSource={filteredGlossaryTerms}
               expandable={expandableConfig}
               loading={isTableLoading}
               pagination={false}

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/useGlossary.store.ts b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/useGlossary.store.ts
@@ -18,6 +18,7 @@ import { findAndUpdateNested } from '../../utils/GlossaryUtils';
 
 export type ModifiedGlossary = Glossary & {
   children?: GlossaryTermWithChildren[];
+  childrenCount?: number;
 };
 
 export const useGlossaryStore = create<{

diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.test.ts b/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.test.ts
@@ -223,7 +223,7 @@ describe('Glossary Utils', () => {
   });
 });
 
-describe('findAndUpdateNested', () => {
+describe('Glossary Utils - findAndUpdateNested', () => {
   it('should add new term to the correct parent', () => {
     const terms: ModifiedGlossary[] = [
       {
@@ -263,6 +263,7 @@ describe('findAndUpdateNested', () => {
 
     const updatedTerms = findAndUpdateNested(terms, newTerm);
 
+    expect(updatedTerms[0].childrenCount).toBe(1);
     expect(updatedTerms[0].children).toHaveLength(1);
     expect(updatedTerms?.[0].children?.[0]).toEqual(newTerm);
   });
@@ -310,14 +311,11 @@ describe('findAndUpdateNested', () => {
 
     const updatedTerms = findAndUpdateNested(terms, newTerm);
 
-    expect(
-      updatedTerms?.[0].children && updatedTerms?.[0].children[0].children
-    ).toHaveLength(1);
-    expect(
-      updatedTerms?.[0].children &&
-        updatedTerms?.[0].children[0].children &&
-        updatedTerms?.[0].children[0].children[0]
-    ).toEqual(newTerm);
+    const modifiedTerms = updatedTerms[0].children?.[0].children ?? [];
+
+    expect(modifiedTerms).toHaveLength(1);
+    expect(updatedTerms[0].children?.[0].childrenCount).toBe(1);
+    expect(modifiedTerms[0]).toEqual(newTerm);
   });
 
   it('should not modify terms if parent is not found', () => {

diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/GlossaryUtils.tsx
@@ -409,9 +409,13 @@ export const findAndUpdateNested = (
   // So we need to find the parent term and update it's children
   return terms.map((term) => {
     if (term.fullyQualifiedName === newTerm.parent?.fullyQualifiedName) {
+      const children = [...(term.children || []), newTerm] as GlossaryTerm[];
+
       return {
         ...term,
-        children: [...(term.children || []), newTerm] as GlossaryTerm[],
+        children,
+        // Need to update childrenCount in case of 0 to update expand / collapse icon
+        childrenCount: children.length,
       } as ModifiedGlossary;
     } else if ('children' in term && term.children?.length) {
       return {