From 6f79067fd25573afa1d34162cbb234f9086b8475 Mon Sep 17 00:00:00 2001
From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
Date: Fri, 3 Jan 2025 10:21:37 +0530
Subject: [PATCH] fix(ui): glossary terms table expand / collapse state
 (#19205)

---
 .../GlossaryTermTab.component.tsx             | 24 ++++++++++---------
 .../components/Glossary/useGlossary.store.ts  |  1 +
 .../ui/src/utils/GlossaryUtils.test.ts        | 16 ++++++-------
 .../resources/ui/src/utils/GlossaryUtils.tsx  |  6 ++++-
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
index c0135d64f7b0..eb7d4538229b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
+++ b/openmetadata-ui/src/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
index f8799cb02a13..9b5c6f2afe46 100644
--- 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
index 11263c62500a..066663638f4f 100644
--- 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
index 713096acca0a..01709cb3435c 100644
--- 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 {