#14387 UI: Test case values not loading on first edit, shows up on second (#14773)

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataQualityAndProfiler.spec.js

@@ -53,7 +53,7 @@ const testSuite = {
   name: `${tableFqn}.testSuite`,
   executableEntityReference: tableFqn,
 };
-const testCase = {
+const testCase1 = {
   name: `user_tokens_table_column_name_to_exist_${uuid()}`,
   entityLink: `<#E::table::${testSuite.executableEntityReference}>`,
   parameterValues: [{ name: 'columnName', value: 'id' }],
@@ -61,6 +61,16 @@ const testCase = {
   description: 'test case description',
   testSuite: testSuite.name,
 };
+const testCase2 = {
+  name: `email_column_values_to_be_in_set_${uuid()}`,
+  entityLink: `<#E::table::${testSuite.executableEntityReference}::columns::email>`,
+  parameterValues: [
+    { name: 'allowedValues', value: '["gmail","yahoo","collate"]' },
+  ],
+  testDefinition: 'columnValuesToBeInSet',
+  testSuite: testSuite.name,
+};
+
 let testCaseId = '';
 
 const OWNER1 = 'Aaron Johnson';
@@ -139,10 +149,16 @@ describe('Data Quality and Profiler should work properly', () => {
           method: 'POST',
           url: `/api/v1/dataQuality/testCases`,
           headers: { Authorization: `Bearer ${token}` },
-          body: testCase,
+          body: testCase1,
         }).then((response) => {
           testCaseId = response.body.id;
         });
+        cy.request({
+          method: 'POST',
+          url: `/api/v1/dataQuality/testCases`,
+          headers: { Authorization: `Bearer ${token}` },
+          body: testCase2,
+        });
       });
     });
   });
@@ -797,6 +813,55 @@ describe('Data Quality and Profiler should work properly', () => {
       .contains(sqlQuery);
   });
 
+  it('Array params value should be visible while editing the test case', () => {
+    const tableName = DATABASE_SERVICE.entity.name;
+    interceptURL(
+      'GET',
+      `api/v1/tables/name/${DATABASE_SERVICE.service.name}.*.${tableName}?fields=*&include=all`,
+      'waitForPageLoad'
+    );
+    interceptURL(
+      'GET',
+      '/api/v1/dataQuality/testDefinitions/*',
+      'testCaseDefinition'
+    );
+    visitEntityDetailsPage({
+      term: tableName,
+      serviceName: DATABASE_SERVICE.service.name,
+      entity: DATA_ASSETS.tables,
+    });
+    verifyResponseStatusCode('@waitForPageLoad', 200);
+    cy.get('[data-testid="entity-header-display-name"]').should(
+      'contain',
+      tableName
+    );
+
+    cy.get('[data-testid="profiler"]').click();
+    interceptURL('GET', '/api/v1/dataQuality/testCases?fields=*', 'testCase');
+    cy.get('[data-testid="profiler-tab-left-panel"]')
+      .contains('Data Quality')
+      .click();
+    verifyResponseStatusCode('@testCase', 200);
+    cy.get(`[data-testid="${testCase2.name}"]`)
+      .scrollIntoView()
+      .should('be.visible');
+    cy.get(`[data-testid="edit-${testCase2.name}"]`)
+      .should('be.visible')
+      .click();
+
+    verifyResponseStatusCode('@testCaseDefinition', 200);
+
+    cy.get('#tableTestForm_params_allowedValues_0_value')
+      .scrollIntoView()
+      .should('have.value', 'gmail');
+    cy.get('#tableTestForm_params_allowedValues_1_value')
+      .scrollIntoView()
+      .should('have.value', 'yahoo');
+    cy.get('#tableTestForm_params_allowedValues_2_value')
+      .scrollIntoView()
+      .should('have.value', 'collate');
+  });
+
   it('Update displayName of test case', () => {
     interceptURL('GET', '/api/v1/dataQuality/testCases?*', 'getTestCase');
 
@@ -812,23 +877,23 @@ describe('Data Quality and Profiler should work properly', () => {
     verifyResponseStatusCode('@getTestCase', 200);
     interceptURL(
       'GET',
-      `/api/v1/search/query?q=*${testCase.name}*&index=test_case_search_index*`,
+      `/api/v1/search/query?q=*${testCase1.name}*&index=test_case_search_index*`,
       'searchTestCase'
     );
     cy.get(
       '[data-testid="test-case-container"] [data-testid="searchbar"]'
-    ).type(testCase.name);
+    ).type(testCase1.name);
     verifyResponseStatusCode('@searchTestCase', 200);
-    cy.get(`[data-testid="${testCase.name}"]`)
+    cy.get(`[data-testid="${testCase1.name}"]`)
       .scrollIntoView()
       .should('be.visible');
-    cy.get(`[data-testid="edit-${testCase.name}"]`).click();
+    cy.get(`[data-testid="edit-${testCase1.name}"]`).click();
     cy.get('.ant-modal-body').should('be.visible');
     cy.get('#tableTestForm_displayName').type('Table test case display name');
     interceptURL('PATCH', '/api/v1/dataQuality/testCases/*', 'updateTestCase');
     cy.get('.ant-modal-footer').contains('Submit').click();
     verifyResponseStatusCode('@updateTestCase', 200);
-    cy.get(`[data-testid="${testCase.name}"]`)
+    cy.get(`[data-testid="${testCase1.name}"]`)
       .scrollIntoView()
       .invoke('text')
       .then((text) => {

openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/EditTestCaseModal.tsx

@@ -16,7 +16,7 @@ import Modal from 'antd/lib/modal/Modal';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
 import { isEmpty } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ENTITY_NAME_REGEX } from '../../constants/regex.constants';
 import { Table } from '../../generated/entity/data/table';
@@ -50,6 +50,10 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
 }) => {
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const tableFqn = useMemo(
+    () => getEntityFqnFromEntityLink(testCase?.entityLink ?? ''),
+    [testCase]
+  );
   const [selectedDefinition, setSelectedDefinition] =
     useState<TestDefinition>();
   const [isLoading, setIsLoading] = useState(true);
@@ -80,27 +84,13 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
     },
   ];
 
-  const GenerateParamsField = useCallback(() => {
+  const paramsField = useMemo(() => {
     if (selectedDefinition?.parameterDefinition) {
       return <ParameterForm definition={selectedDefinition} table={table} />;
     }
 
-    return;
-  }, [testCase, selectedDefinition, table]);
-
-  const fetchTestDefinitionById = async () => {
-    setIsLoading(true);
-    try {
-      const definition = await getTestDefinitionById(
-        testCase.testDefinition.id || ''
-      );
-      setSelectedDefinition(definition);
-    } catch (error) {
-      showErrorToast(error as AxiosError);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+    return <></>;
+  }, [selectedDefinition, table]);
 
   const createTestCaseObj = (value: {
     testName: string;
@@ -161,7 +151,7 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
     }
   };
 
-  const getParamsValue = () => {
+  const getParamsValue = (selectedDefinition: TestDefinition) => {
     return testCase?.parameterValues?.reduce(
       (acc, curr) => ({
         ...acc,
@@ -186,21 +176,34 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
     }
   };
 
-  useEffect(() => {
-    if (testCase) {
-      fetchTestDefinitionById();
-      const tableFqn = getEntityFqnFromEntityLink(testCase?.entityLink);
+  const fetchTestDefinitionById = async () => {
+    setIsLoading(true);
+    try {
+      const definition = await getTestDefinitionById(
+        testCase.testDefinition.id || ''
+      );
       form.setFieldsValue({
         name: testCase?.name,
         testDefinition: testCase?.testDefinition?.name,
         displayName: testCase?.displayName,
-        params: getParamsValue(),
+        params: getParamsValue(definition),
         table: getNameFromFQN(tableFqn),
         column: getNameFromFQN(
           getEntityFqnFromEntityLink(testCase?.entityLink, isColumn)
         ),
         computePassedFailedRowCount: testCase?.computePassedFailedRowCount,
       });
+      setSelectedDefinition(definition);
+    } catch (error) {
+      showErrorToast(error as AxiosError);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (testCase) {
+      fetchTestDefinitionById();
 
       const isContainsColumnName = testCase.parameterValues?.find(
         (value) => value.name === 'columnName'
@@ -281,7 +284,7 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
             </>
           )}
 
-          {GenerateParamsField()}
+          {paramsField}
 
           {!showOnlyParameter && (
             <>