fix(ui): Playwright Cover For Column Search (#22783)

* playwright cover for column search

* fixed test

* fixed flaky test

* fix flakyness

* fixed flakyness

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Table.spec.ts

@@ -13,6 +13,10 @@
 import { expect } from '@playwright/test';
 import { SidebarItem } from '../../constant/sidebar';
 import { TableClass } from '../../support/entity/TableClass';
+import { Glossary } from '../../support/glossary/Glossary';
+import { GlossaryTerm } from '../../support/glossary/GlossaryTerm';
+import { ClassificationClass } from '../../support/tag/ClassificationClass';
+import { TagClass } from '../../support/tag/TagClass';
 import { performAdminLogin } from '../../utils/admin';
 import { redirectToHomePage } from '../../utils/common';
 import {
@@ -441,3 +445,135 @@ test.describe('Table & Data Model columns table pagination', () => {
     });
   });
 });
+
+test.describe(
+  'Tags and glossary terms should be consistent for search ',
+  () => {
+    const glossary = new Glossary();
+    const glossaryTerm = new GlossaryTerm(glossary);
+    const testClassification = new ClassificationClass();
+    const testTag = new TagClass({
+      classification: testClassification.data.name,
+    });
+
+    test.beforeAll(async ({ browser }) => {
+      const { apiContext } = await performAdminLogin(browser);
+
+      await glossary.create(apiContext);
+      await glossaryTerm.create(apiContext);
+      await testClassification.create(apiContext);
+      await testTag.create(apiContext);
+    });
+
+    test.afterAll(async ({ browser }) => {
+      const { apiContext } = await performAdminLogin(browser);
+
+      await glossary.delete(apiContext);
+      await glossaryTerm.delete(apiContext);
+      await testClassification.delete(apiContext);
+      await testTag.delete(apiContext);
+    });
+
+    test('Glossary term should be consistent for search', async ({
+      dataConsumerPage: page,
+    }) => {
+      await page.goto('/table/sample_data.ecommerce_db.shopify.dim_customer');
+
+      await page
+        .locator(
+          '[data-row-key="sample_data.ecommerce_db.shopify.dim_customer.customer_id"] [data-testid="glossary-tags-0"] [data-testid="entity-tags"] svg'
+        )
+        .click();
+      await page.waitForSelector('.ant-select-dropdown', { state: 'visible' });
+      await page.waitForSelector(
+        '.ant-select-dropdown [data-testid="loader"]',
+        {
+          state: 'detached',
+        }
+      );
+      await page
+        .locator('.ant-select-dropdown')
+        .getByTestId(`tag-${glossary.responseData.fullyQualifiedName}`)
+        .getByTestId('expand-icon')
+        .click();
+      await page
+        .getByTestId(`tag-${glossaryTerm.responseData.fullyQualifiedName}`)
+        .click();
+
+      await page.getByTestId('saveAssociatedTag').click();
+
+      await page.waitForResponse('api/v1/columns/name/*');
+
+      await expect(
+        page.getByTestId(`tag-${glossaryTerm.responseData.fullyQualifiedName}`)
+      ).toContainText(glossaryTerm.responseData.displayName);
+
+      const getRequest = page.waitForResponse(
+        'api/v1/tables/name/sample_data.ecommerce_db.shopify.dim_customer/columns/*'
+      );
+
+      await page
+        .getByTestId('search-bar-container')
+        .getByTestId('searchbar')
+        .fill('customer_id');
+
+      await getRequest;
+
+      await expect(
+        page
+          .getByTestId('glossary-tags-0')
+          .getByTestId(`tag-${glossaryTerm.responseData.fullyQualifiedName}`)
+      ).toContainText(glossaryTerm.responseData.displayName);
+    });
+
+    test('Tags term should be consistent for search', async ({
+      dataConsumerPage: page,
+    }) => {
+      await page.goto('/table/sample_data.ecommerce_db.shopify.dim_customer');
+
+      await page
+        .locator(
+          '[data-row-key="sample_data.ecommerce_db.shopify.dim_customer.customer_id"] [data-testid="classification-tags-0"] [data-testid="entity-tags"] svg'
+        )
+        .click();
+
+      await page.waitForSelector('.ant-select-dropdown', { state: 'visible' });
+      await page.waitForSelector(
+        '.ant-select-dropdown [data-testid="loader"]',
+        {
+          state: 'detached',
+        }
+      );
+      await page
+        .locator('[data-testid="tag-selector"] input')
+        .fill(testTag.data.name);
+      await page
+        .locator('.ant-select-dropdown')
+        .getByTestId(`tag-${testTag.responseData.fullyQualifiedName}`)
+        .click();
+
+      await page.getByTestId('saveAssociatedTag').click();
+
+      await page.waitForResponse('api/v1/columns/name/*');
+
+      await expect(
+        page.getByTestId(`tag-${testTag.responseData.fullyQualifiedName}`)
+      ).toContainText(testTag.responseData.displayName);
+
+      await page
+        .getByTestId('search-bar-container')
+        .getByTestId('searchbar')
+        .fill('customer_id');
+
+      await page.waitForResponse(
+        'api/v1/tables/name/sample_data.ecommerce_db.shopify.dim_customer/columns/*'
+      );
+
+      await expect(
+        page
+          .getByTestId('classification-tags-0')
+          .getByTestId(`tag-${testTag.responseData.fullyQualifiedName}`)
+      ).toContainText(testTag.responseData.displayName);
+    });
+  }
+);