fix(ui): update glossary term table upon new term added (#19296)

* fix(ui): update glossary term table upon new term added

* fix the active tab getting change and added the playwright test

---------

Co-authored-by: Ashish Gupta <ashish@getcollate.io>
Co-authored-by: Aniket Katkar <aniketkatkar97@gmail.com>

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts

@@ -47,6 +47,7 @@ import {
   confirmationDragAndDropGlossary,
   createDescriptionTaskForGlossary,
   createGlossary,
+  createGlossaryTerm,
   createGlossaryTerms,
   createTagTaskForGlossary,
   deleteGlossaryOrGlossaryTerm,
@@ -1232,6 +1233,36 @@ test.describe('Glossary tests', () => {
     }
   });
 
+  test('Add Glossary Term inside another Term', async ({ browser }) => {
+    const { page, afterAction, apiContext } = await performAdminLogin(browser);
+    const glossary1 = new Glossary();
+    const glossaryTerm1 = new GlossaryTerm(glossary1);
+    const glossary2 = new Glossary();
+    glossary2.data.terms = [new GlossaryTerm(glossary2)];
+
+    try {
+      await glossary1.create(apiContext);
+      await glossaryTerm1.create(apiContext);
+      await redirectToHomePage(page);
+      await sidebarClick(page, SidebarItem.GLOSSARY);
+      await selectActiveGlossary(page, glossary1.data.displayName);
+      await selectActiveGlossaryTerm(page, glossaryTerm1.data.displayName);
+      await page.getByTestId('terms').click();
+
+      await createGlossaryTerm(
+        page,
+        glossary2.data.terms[0].data,
+        'Approved',
+        false,
+        true
+      );
+    } finally {
+      await glossaryTerm1.delete(apiContext);
+      await glossary1.delete(apiContext);
+      await afterAction();
+    }
+  });
+
   test.afterAll(async ({ browser }) => {
     const { afterAction, apiContext } = await performAdminLogin(browser);
     await user1.delete(apiContext);

openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts

@@ -388,12 +388,18 @@ export const deleteGlossary = async (page: Page, glossary: GlossaryData) => {
 export const fillGlossaryTermDetails = async (
   page: Page,
   term: GlossaryTermData,
-  validateCreateForm = true
+  validateCreateForm = true,
+  isGlossaryTerm = false
 ) => {
   // Safety check to close potential glossary not found alert
   // Arrived due to parallel testing
   await closeFirstPopupAlert(page);
-  await page.click('[data-testid="add-new-tag-button-header"]');
+
+  if (isGlossaryTerm) {
+    await page.click('[data-testid="add-placeholder-button"]');
+  } else {
+    await page.click('[data-testid="add-new-tag-button-header"]');
+  }
 
   await page.waitForSelector('[role="dialog"].edit-glossary-modal');
 
@@ -586,28 +592,39 @@ export const updateGlossaryTermDataFromTree = async (
 export const validateGlossaryTerm = async (
   page: Page,
   term: GlossaryTermData,
-  status: 'Draft' | 'Approved'
+  status: 'Draft' | 'Approved',
+  isGlossaryTermPage = false
 ) => {
   // eslint-disable-next-line no-useless-escape
   const escapedFqn = term.fullyQualifiedName.replace(/\"/g, '\\"');
   const termSelector = `[data-row-key="${escapedFqn}"]`;
   const statusSelector = `[data-testid="${escapedFqn}-status"]`;
 
-  await expect(page.locator(termSelector)).toContainText(term.name);
-  await expect(page.locator(statusSelector)).toContainText(status);
+  if (isGlossaryTermPage) {
+    await expect(page.getByTestId(term.name)).toBeVisible();
+  } else {
+    await expect(page.locator(termSelector)).toContainText(term.name);
+    await expect(page.locator(statusSelector)).toContainText(status);
+  }
 };
 
 export const createGlossaryTerm = async (
   page: Page,
   term: GlossaryTermData,
   status: 'Draft' | 'Approved',
-  validateCreateForm = true
+  validateCreateForm = true,
+  isGlossaryTermPage = false
 ) => {
-  await fillGlossaryTermDetails(page, term, validateCreateForm);
+  await fillGlossaryTermDetails(
+    page,
+    term,
+    validateCreateForm,
+    isGlossaryTermPage
+  );
   const glossaryTermResponse = page.waitForResponse('/api/v1/glossaryTerms');
   await page.click('[data-testid="save-glossary-term"]');
   await glossaryTermResponse;
-  await validateGlossaryTerm(page, term, status);
+  await validateGlossaryTerm(page, term, status, isGlossaryTermPage);
 };
 
 export const createGlossaryTerms = async (

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/GlossaryTermsV1.component.tsx

@@ -211,12 +211,12 @@ const GlossaryTermsV1 = ({
                     {getCountBadge(
                       childGlossaryTerms.length,
                       '',
-                      activeTab === 'terms'
+                      activeTab === EntityTabs.TERMS
                     )}
                   </span>
                 </div>
               ),
-              key: EntityTabs.GLOSSARY_TERMS,
+              key: EntityTabs.TERMS,
               children: (
                 <GlossaryTermTab
                   className="p-md glossary-term-table-container"

openmetadata-ui/src/main/resources/ui/src/components/Glossary/useGlossary.store.ts

@@ -72,12 +72,28 @@ export const useGlossaryStore = create<{
     }
   },
   insertNewGlossaryTermToChildTerms: (glossary: GlossaryTerm) => {
-    const { glossaryChildTerms } = get();
+    const { glossaryChildTerms, activeGlossary } = get();
 
-    // Typically used to updated the glossary term list in the glossary page
-    set({
-      glossaryChildTerms: findAndUpdateNested(glossaryChildTerms, glossary),
-    });
+    const glossaryTerm = 'glossary' in activeGlossary;
+
+    // If activeGlossary is Glossary term & User is adding term to the activeGlossary term
+    // we don't need to find in hierarchy
+    if (
+      glossaryTerm &&
+      activeGlossary.fullyQualifiedName === glossary.parent?.fullyQualifiedName
+    ) {
+      set({
+        glossaryChildTerms: [
+          ...glossaryChildTerms,
+          glossary,
+        ] as ModifiedGlossary[],
+      });
+    } else {
+      // Typically used to updated the glossary term list in the glossary page
+      set({
+        glossaryChildTerms: findAndUpdateNested(glossaryChildTerms, glossary),
+      });
+    }
   },
   setGlossaryChildTerms: (glossaryChildTerms: ModifiedGlossary[]) => {
     set({ glossaryChildTerms });