GEN-1530: fix DQ Layout Improvements (#18754)

* GEN-1530: fix DQ Layout Improvements * fixed failing playwright test
open-metadata · Nov 24, 2024 · 31c2dee · 31c2dee
1 parent 0e41609
commit 31c2dee
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 10 deletions.
diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts
@@ -191,7 +191,7 @@ test('Column test case', PLAYWRIGHT_INGESTION_TAG_OBJ, async ({ page }) => {
     await testDefinitionResponse;
     await page.fill('#tableTestForm_testName', NEW_COLUMN_TEST_CASE.name);
     await page.click('#tableTestForm_testTypeId');
-    await page.click(`[title="${NEW_COLUMN_TEST_CASE.label}"]`);
+    await page.click(`[data-testid="${NEW_COLUMN_TEST_CASE.type}"]`);
     await page.fill(
       '#tableTestForm_params_minLength',
       NEW_COLUMN_TEST_CASE.min

diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestCases.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestCases.spec.ts
@@ -56,7 +56,7 @@ test('Table difference test case', async ({ page }) => {
       const tableListSearchResponse = page.waitForResponse(
         `/api/v1/search/query?q=*index=table_search_index*`
       );
-      await page.getByTitle('Compare 2 tables for').click();
+      await page.getByTestId('tableDiff').click();
       await tableListSearchResponse;
       await page.click('#tableTestForm_params_table2');
       const tableSearchResponse = page.waitForResponse(
@@ -180,7 +180,7 @@ test('Custom SQL Query', async ({ page }) => {
       await page.getByTestId('test-case').click();
       await page.getByTestId('test-case-name').fill(testCase.name);
       await page.getByTestId('test-type').click();
-      await page.getByTitle('Custom SQL Query').click();
+      await page.getByTestId('tableCustomSQLQuery').click();
       await page.click('#tableTestForm_params_strategy');
       await page.locator('.CodeMirror-scroll').click();
       await page
@@ -289,7 +289,7 @@ test('Column Values To Be Not Null', async ({ page }) => {
         NEW_COLUMN_TEST_CASE_WITH_NULL_TYPE.type
       );
       await page.click(
-        `[title="${NEW_COLUMN_TEST_CASE_WITH_NULL_TYPE.label}"]`
+        `[data-testid="${NEW_COLUMN_TEST_CASE_WITH_NULL_TYPE.type}"]`
       );
       await page.fill(
         descriptionBox,

diff --git a/...in/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseForm.tsx b/...in/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseForm.tsx
@@ -11,7 +11,16 @@
  *  limitations under the License.
  */
 
-import { Button, Form, FormProps, Input, Select, Space } from 'antd';
+import {
+  Button,
+  Form,
+  FormProps,
+  Input,
+  Select,
+  Space,
+  Typography,
+} from 'antd';
+import { DefaultOptionType } from 'antd/lib/select';
 import { AxiosError } from 'axios';
 import cryptoRandomString from 'crypto-random-string-with-promisify-polyfill';
 import { t } from 'i18next';
@@ -281,11 +290,21 @@ const TestCaseForm: React.FC<TestCaseFormProps> = ({
     });
   }, [activeColumnFqn]);
 
-  const testTypeOptions = useMemo(
+  const testTypeOptions: DefaultOptionType[] = useMemo(
     () =>
       testDefinitions.map((suite) => ({
-        label: getEntityName(suite),
+        label: (
+          <div data-testid={suite.fullyQualifiedName}>
+            <Typography.Paragraph className="m-b-0">
+              {getEntityName(suite)}
+            </Typography.Paragraph>
+            <Typography.Paragraph className="m-b-0 text-grey-muted text-xs">
+              {suite.description}
+            </Typography.Paragraph>
+          </div>
+        ),
         value: suite.fullyQualifiedName ?? '',
+        labelValue: getEntityName(suite),
       })),
 
     [testDefinitions]
@@ -378,6 +397,7 @@ const TestCaseForm: React.FC<TestCaseFormProps> = ({
           filterOption={filterSelectOptions}
           options={testTypeOptions}
           placeholder={t('label.select-field', { field: t('label.test-type') })}
+          popupClassName="no-wrap-option"
           onChange={handleTestDefinitionChange}
         />
       </Form.Item>

diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.test.ts b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.test.ts
@@ -22,6 +22,7 @@ import {
 } from '../generated/type/tagLabel';
 import {
   digitFormatter,
+  filterSelectOptions,
   getBase64EncodedString,
   getIsErrorMatch,
   getNameFromFQN,
@@ -294,4 +295,55 @@ describe('Tests for CommonUtils', () => {
       expect(isDeleted(null)).toBe(false);
     });
   });
+
+  describe('filterSelectOptions', () => {
+    it('should return true if input matches option labelValue', () => {
+      const input = 'test';
+      const option = {
+        labelValue: 'Test Label',
+        value: 'testValue',
+        label: 'Test Label',
+      };
+
+      expect(filterSelectOptions(input, option)).toBe(true);
+    });
+
+    it('should return true if input matches option value', () => {
+      const input = 'test';
+      const option = {
+        labelValue: 'Label',
+        label: 'Label',
+        value: 'testValue',
+      };
+
+      expect(filterSelectOptions(input, option)).toBe(true);
+    });
+
+    it('should return false if input does not match option labelValue or value', () => {
+      const input = 'test';
+      const option = { labelValue: 'Label', value: 'value', label: 'Label' };
+
+      expect(filterSelectOptions(input, option)).toBe(false);
+    });
+
+    it('should return false if option is undefined', () => {
+      const input = 'test';
+
+      expect(filterSelectOptions(input)).toBe(false);
+    });
+
+    it('should handle non-string option value gracefully', () => {
+      const input = 'test';
+      const option = { labelValue: 'Label', value: 123, label: 'Label' };
+
+      expect(filterSelectOptions(input, option)).toBe(false);
+    });
+
+    it('should handle empty input gracefully', () => {
+      const input = '';
+      const option = { labelValue: 'Label', value: 'value', label: 'Label' };
+
+      expect(filterSelectOptions(input, option)).toBe(true);
+    });
+  });
 });
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
@@ -13,6 +13,7 @@
 
 /* eslint-disable @typescript-eslint/ban-types */
 
+import { DefaultOptionType } from 'antd/lib/select';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { t } from 'i18next';
@@ -845,11 +846,13 @@ export const getServiceTypeExploreQueryFilter = (serviceType: string) => {
 
 export const filterSelectOptions = (
   input: string,
-  option?: { label: string; value: string }
+  option?: DefaultOptionType
 ) => {
   return (
-    toLower(option?.label).includes(toLower(input)) ||
-    toLower(option?.value).includes(toLower(input))
+    toLower(option?.labelValue).includes(toLower(input)) ||
+    toLower(isString(option?.value) ? option?.value : '').includes(
+      toLower(input)
+    )
   );
 };