Feat: Support for column customization for Glossary term table

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

@@ -43,18 +43,27 @@ import {
   approveTagsTask,
   assignTagToGlossaryTerm,
   changeTermHierarchyFromModal,
+  clickSaveButton,
   confirmationDragAndDropGlossary,
   createDescriptionTaskForGlossary,
   createGlossary,
   createGlossaryTerms,
   createTagTaskForGlossary,
   deleteGlossaryOrGlossaryTerm,
+  deselectColumns,
+  dragAndDropColumn,
   dragAndDropTerm,
+  filterStatus,
   goToAssetsTab,
+  openColumnDropdown,
   renameGlossaryTerm,
   selectActiveGlossary,
   selectActiveGlossaryTerm,
+  selectColumns,
+  toggleAllColumnsSelection,
   validateGlossaryTerm,
+  verifyAllColumns,
+  verifyColumnsVisibility,
   verifyGlossaryDetails,
   verifyGlossaryTermAssets,
 } from '../../utils/glossary';
@@ -924,6 +933,141 @@ test.describe('Glossary tests', () => {
     }
   });
 
+  test('Column selection and visibility for Glossary Terms table', async ({
+    browser,
+  }) => {
+    const { page, afterAction, apiContext } = await performAdminLogin(browser);
+    const glossary1 = new Glossary();
+    const glossaryTerm1 = new GlossaryTerm(glossary1);
+    const glossaryTerm2 = new GlossaryTerm(glossary1);
+    glossary1.data.terms = [glossaryTerm1, glossaryTerm2];
+
+    try {
+      await glossary1.create(apiContext);
+      await glossaryTerm1.create(apiContext);
+      await glossaryTerm2.create(apiContext);
+      await sidebarClick(page, SidebarItem.GLOSSARY);
+      await selectActiveGlossary(page, glossary1.data.displayName);
+
+      await test.step(
+        'Open column dropdown and select columns and check if they are visible',
+        async () => {
+          await openColumnDropdown(page);
+          const checkboxLabels = ['Reviewer', 'Synonyms'];
+          await selectColumns(page, checkboxLabels);
+          await clickSaveButton(page);
+          await verifyColumnsVisibility(page, checkboxLabels, true);
+        }
+      );
+
+      await test.step(
+        'Open column dropdown and deselect columns and check if they are hidden',
+        async () => {
+          await openColumnDropdown(page);
+          const checkboxLabels = ['Reviewer', 'Owners'];
+          await deselectColumns(page, checkboxLabels);
+          await clickSaveButton(page);
+          await verifyColumnsVisibility(page, checkboxLabels, false);
+        }
+      );
+
+      await test.step('All columns selection', async () => {
+        await toggleAllColumnsSelection(page, true);
+        const tableColumns = [
+          'TERMS',
+          'DESCRIPTION',
+          'REVIEWER',
+          'SYNONYMS',
+          'OWNERS',
+          'STATUS',
+          'ACTIONS',
+        ];
+        await verifyAllColumns(page, tableColumns, true);
+      });
+    } finally {
+      await glossaryTerm1.delete(apiContext);
+      await glossaryTerm2.delete(apiContext);
+      await glossary1.delete(apiContext);
+      await afterAction();
+    }
+  });
+
+  test('Glossary Terms Table Status filtering', async ({ browser }) => {
+    const { page, afterAction, apiContext } = await performAdminLogin(browser);
+    const glossary1 = new Glossary();
+    const glossaryTerm1 = new GlossaryTerm(glossary1);
+    const glossaryTerm2 = new GlossaryTerm(glossary1);
+    glossary1.data.terms = [glossaryTerm1, glossaryTerm2];
+
+    try {
+      await glossary1.create(apiContext);
+      await glossaryTerm1.create(apiContext);
+      await glossaryTerm2.create(apiContext);
+      await sidebarClick(page, SidebarItem.GLOSSARY);
+      await selectActiveGlossary(page, glossary1.data.displayName);
+
+      await test.step(
+        'Deselect status and check if the table has filtered rows',
+        async () => {
+          await filterStatus(page, ['Draft'], ['Approved']);
+        }
+      );
+
+      await test.step(
+        'Re-select the status and check if it appears again',
+        async () => {
+          await filterStatus(page, ['Draft'], ['Draft', 'Approved']);
+        }
+      );
+    } finally {
+      await glossaryTerm1.delete(apiContext);
+      await glossaryTerm2.delete(apiContext);
+      await glossary1.delete(apiContext);
+      await afterAction();
+    }
+  });
+
+  test('Column dropdown drag-and-drop functionality for Glossary Terms table', async ({
+    browser,
+  }) => {
+    const { page, afterAction, apiContext } = await performAdminLogin(browser);
+    const glossary1 = new Glossary();
+    const glossaryTerm1 = new GlossaryTerm(glossary1);
+    const glossaryTerm2 = new GlossaryTerm(glossary1);
+    glossary1.data.terms = [glossaryTerm1, glossaryTerm2];
+
+    try {
+      await glossary1.create(apiContext);
+      await glossaryTerm1.create(apiContext);
+      await glossaryTerm2.create(apiContext);
+      await sidebarClick(page, SidebarItem.GLOSSARY);
+      await selectActiveGlossary(page, glossary1.data.displayName);
+      await openColumnDropdown(page);
+      const dragColumn = 'Owners';
+      const dropColumn = 'Status';
+      await dragAndDropColumn(page, dragColumn, dropColumn);
+      const saveButton = page.locator('.ant-btn-primary', {
+        hasText: 'Save',
+      });
+      await saveButton.click();
+      const columnHeaders = await page.locator('thead th');
+      const columnText = await columnHeaders.allTextContents();
+
+      expect(columnText).toEqual([
+        'Terms',
+        'Description',
+        'Status',
+        'Owners',
+        'Actions',
+      ]);
+    } finally {
+      await glossaryTerm1.delete(apiContext);
+      await glossaryTerm2.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

@@ -1004,3 +1004,152 @@ export const approveTagsTask = async (
 
   await expect(tagVisibility).toBe(true);
 };
+
+export async function openColumnDropdown(page: Page): Promise<void> {
+  const dropdownButton = page.getByTestId('glossary-column-dropdown');
+
+  await expect(dropdownButton).toBeVisible();
+
+  await dropdownButton.click();
+}
+
+export async function selectColumns(
+  page: Page,
+  checkboxLabels: string[]
+): Promise<void> {
+  for (const label of checkboxLabels) {
+    const checkbox = page.locator('.glossary-dropdown-label', {
+      hasText: label,
+    });
+    await checkbox.click();
+  }
+}
+
+export async function deselectColumns(
+  page: Page,
+  checkboxLabels: string[]
+): Promise<void> {
+  for (const label of checkboxLabels) {
+    const checkbox = page.locator('.glossary-dropdown-label', {
+      hasText: label,
+    });
+    await checkbox.click();
+  }
+}
+
+export async function clickSaveButton(page: Page): Promise<void> {
+  const saveButton = page.locator('.ant-btn-primary', {
+    hasText: 'Save',
+  });
+  await saveButton.click();
+}
+
+export async function verifyColumnsVisibility(
+  page: Page,
+  checkboxLabels: string[],
+  shouldBeVisible: boolean
+): Promise<void> {
+  const glossaryTermsTable = page.getByTestId('glossary-terms-table');
+
+  await expect(glossaryTermsTable).toBeVisible();
+
+  for (const label of checkboxLabels) {
+    const termsColumnHeader = glossaryTermsTable.locator('th', {
+      hasText: label,
+    });
+    if (shouldBeVisible) {
+      await expect(termsColumnHeader).toBeVisible();
+    } else {
+      await expect(termsColumnHeader).toBeHidden();
+    }
+  }
+}
+
+export async function toggleAllColumnsSelection(
+  page: Page,
+  isSelected: boolean
+): Promise<void> {
+  const dropdownButton = page.getByTestId('glossary-column-dropdown');
+
+  await expect(dropdownButton).toBeVisible();
+
+  await dropdownButton.click();
+
+  const checkboxLabel = 'All';
+  const checkbox = page.locator('.custom-glossary-col-sel-checkbox', {
+    hasText: checkboxLabel,
+  });
+  if (isSelected) {
+    await checkbox.click();
+  }
+  await clickSaveButton(page);
+}
+
+export async function verifyAllColumns(
+  page: Page,
+  tableColumns: string[],
+  shouldBeVisible: boolean
+): Promise<void> {
+  const glossaryTermsTable = page.getByTestId('glossary-terms-table');
+
+  await expect(glossaryTermsTable).toBeVisible();
+
+  for (const columnHeader of tableColumns) {
+    const termsColumnHeader = glossaryTermsTable.locator('th', {
+      hasText: columnHeader,
+    });
+
+    if (shouldBeVisible) {
+      await expect(termsColumnHeader).toBeVisible();
+    } else {
+      if (columnHeader !== 'TERMS') {
+        await expect(termsColumnHeader).not.toBeVisible();
+      } else {
+        await expect(termsColumnHeader).toBeVisible();
+      }
+    }
+  }
+}
+export const filterStatus = async (
+  page: Page,
+  statusLabels: string[],
+  expectedStatus: string[]
+): Promise<void> => {
+  const dropdownButton = page.getByTestId('glossary-status-dropdown');
+  await dropdownButton.click();
+
+  for (const label of statusLabels) {
+    const checkbox = page.locator('.glossary-dropdown-label', {
+      hasText: label,
+    });
+    await checkbox.click();
+  }
+
+  const saveButton = page.locator('.ant-btn-primary', {
+    hasText: 'Save',
+  });
+  await saveButton.click();
+
+  const glossaryTermsTable = page.getByTestId('glossary-terms-table');
+  const rows = glossaryTermsTable.locator('tbody tr');
+  const statusColumnIndex = 3;
+
+  for (let i = 0; i < (await rows.count()); i++) {
+    const statusCell = rows
+      .nth(i)
+      .locator(`td:nth-child(${statusColumnIndex + 1})`);
+    const statusText = await statusCell.textContent();
+
+    expect(expectedStatus).toContain(statusText);
+  }
+};
+
+export const dragAndDropColumn = async (
+  page: Page,
+  dragColumn: string,
+  dropColumn: string
+) => {
+  await page
+    .locator('.draggable-menu-item', { hasText: dragColumn })
+    .dragTo(page.locator('.draggable-menu-item', { hasText: dropColumn }));
+};