ui: worked on DQ feedback part 3 (#12149)

* ui: worked on DQ feedback part 3

* updated name of test suite ingestion name
- Added description field in test case expand view
- Added functionality to update displayname of test case

* added testCase in re-indexing

* integrated permission in DQ

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

@@ -116,7 +116,7 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
       ...testCase,
       parameterValues,
       description,
-      name: value.name,
+      displayName: value.displayName,
     };
     const jsonPatch = compare(testCase, updatedTestCase);
 
@@ -124,10 +124,10 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
       try {
         setIsLoadingOnSave(true);
         const updateRes = await updateTestCaseById(
-          testCase.id || '',
+          testCase.id ?? '',
           jsonPatch
         );
-        onUpdate && onUpdate(updateRes);
+        onUpdate?.(updateRes);
         showSuccessToast(
           t('server.update-entity-success', { entity: t('label.test-case') })
         );
@@ -216,17 +216,17 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
           layout="vertical"
           name="tableTestForm"
           onFinish={handleFormSubmit}>
-          <Form.Item required label={`${t('label.table')}:`} name="table">
+          <Form.Item required label={`${t('label.table')}`} name="table">
             <Input disabled />
           </Form.Item>
           {isColumn && (
-            <Form.Item required label={`${t('label.column')}:`} name="column">
+            <Form.Item required label={`${t('label.column')}`} name="column">
               <Input disabled />
             </Form.Item>
           )}
           <Form.Item
             required
-            label={`${t('label.name')}:`}
+            label={`${t('label.name')}`}
             name="name"
             rules={[
               {
@@ -236,6 +236,9 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
             ]}>
             <Input disabled placeholder={t('message.enter-test-case-name')} />
           </Form.Item>
+          <Form.Item label={t('label.display-name')} name="displayName">
+            <Input placeholder={t('message.enter-test-case-name')} />
+          </Form.Item>
           <Form.Item
             required
             label={`${t('label.test-entity', {
@@ -247,7 +250,7 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
 
           {GenerateParamsField()}
 
-          <Form.Item label={`${t('label.description')}:`} name="description">
+          <Form.Item label={`${t('label.description')}`} name="description">
             <RichTextEditor
               height="200px"
               initialValue={testCase?.description || ''}

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

@@ -22,6 +22,7 @@ import {
   deployIngestionPipelineById,
   updateIngestionPipeline as putIngestionPipeline,
 } from 'rest/ingestionPipelineAPI';
+import { getIngestionName } from 'utils/ServiceUtils';
 import {
   DEPLOYED_PROGRESS_VAL,
   INGESTION_PROGRESS_END_VAL,
@@ -36,7 +37,8 @@ import {
 import { IngestionPipeline } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
 import {
   getIngestionFrequency,
-  replaceSpaceWith_,
+  getNameFromFQN,
+  replaceAllSpacialCharWith_,
   Transi18next,
 } from '../../utils/CommonUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
@@ -113,7 +115,12 @@ const TestSuiteIngestion: React.FC<TestSuiteIngestionProps> = ({
   };
 
   const createIngestionPipeline = async (repeatFrequency: string) => {
-    const updatedName = replaceSpaceWith_(testSuite.name);
+    const tableName = replaceAllSpacialCharWith_(
+      getNameFromFQN(
+        testSuite.executableEntityReference?.fullyQualifiedName ?? ''
+      )
+    );
+    const updatedName = getIngestionName(tableName, PipelineType.TestSuite);
 
     const ingestionPayload: CreateIngestionPipeline = {
       airflowConfig: {
@@ -121,10 +128,10 @@ const TestSuiteIngestion: React.FC<TestSuiteIngestionProps> = ({
           ? undefined
           : repeatFrequency,
       },
-      name: `${updatedName}_${PipelineType.TestSuite}`,
+      name: updatedName,
       pipelineType: PipelineType.TestSuite,
       service: {
-        id: testSuite.id || '',
+        id: testSuite.id ?? '',
         type: camelCase(PipelineType.TestSuite),
       },
       sourceConfig: {

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

@@ -138,16 +138,18 @@ const TestCaseForm: React.FC<TestCaseFormProps> = ({
             : value,
       })
     );
+    const name =
+      value.testName?.trim() ||
+      `${columnName ? columnName : table.name}_${snakeCase(
+        selectedTestType
+      )}_${cryptoRandomString({
+        length: 4,
+        type: 'alphanumeric',
+      })}`;
 
     return {
-      name:
+      name,
-        value.testName?.trim() ||
+      displayName: name,
-        `${columnName ? columnName : table.name}_${snakeCase(
-          selectedTestType
-        )}_${cryptoRandomString({
-          length: 4,
-          type: 'alphanumeric',
-        })}`,
       entityLink: generateEntityLink(
         isColumnFqn ? `${decodedEntityFQN}.${columnName}` : decodedEntityFQN,
         isColumnFqn

openmetadata-ui/src/main/resources/ui/src/components/AddTestCaseList/AddTestCaseList.component.tsx

@@ -10,11 +10,10 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Checkbox, Col, List, Modal, Row, Space, Typography } from 'antd';
+import { Button, Checkbox, Col, List, Row, Space, Typography } from 'antd';
-import { AxiosError } from 'axios';
 import Searchbar from 'components/common/searchbar/Searchbar';
 import Loader from 'components/Loader/Loader';
-import { getTableTabPath, PAGE_SIZE_MEDIUM } from 'constants/constants';
+import { getTableTabPath, PAGE_SIZE } from 'constants/constants';
 import { SearchIndex } from 'enums/search.enum';
 import { TestCase } from 'generated/tests/testCase';
 import {
@@ -26,13 +25,11 @@ import React, { UIEventHandler, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { searchQuery } from 'rest/searchAPI';
-import { addTestCaseToLogicalTestSuite } from 'rest/testAPI';
 import { getNameFromFQN } from 'utils/CommonUtils';
 import { getEntityName } from 'utils/EntityUtils';
 import { getDecodedFqn } from 'utils/StringsUtils';
 import { getEntityFqnFromEntityLink } from 'utils/TableUtils';
-import { showErrorToast } from 'utils/ToastUtils';
+import { AddTestCaseModalProps } from './AddTestCaseList.interface';
-import { AddTestCaseModalProps } from './AddTestCaseModal.interface';
 
 // Todo: need to help from backend guys for ES query
 // export const getQueryFilterToExcludeTest = (testCase: EntityReference[]) => ({
@@ -47,12 +44,12 @@ import { AddTestCaseModalProps } from './AddTestCaseModal.interface';
 //   },
 // });
 
-export const AddTestCaseModal = ({
+export const AddTestCaseList = ({
-  open,
   onCancel,
   existingTest,
-  testSuiteId,
   onSubmit,
+  cancelText,
+  submitText,
 }: AddTestCaseModalProps) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -74,7 +71,7 @@ export const AddTestCaseModal = ({
         setIsLoading(true);
         const res = await searchQuery({
           pageNumber: page,
-          pageSize: PAGE_SIZE_MEDIUM,
+          pageSize: PAGE_SIZE,
           searchIndex: SearchIndex.TEST_CASE,
           query: searchText,
           // queryFilter: getQueryFilterToExcludeTest(existingTest),
@@ -100,17 +97,8 @@ export const AddTestCaseModal = ({
     const testCaseIds = [...(selectedItems?.values() ?? [])].map(
       (test) => test.id ?? ''
     );
-
+    onSubmit(testCaseIds);
-    try {
+    setIsLoading(false);
-      await addTestCaseToLogicalTestSuite({ testCaseIds, testSuiteId });
-
-      onSubmit();
-      onCancel();
-    } catch (error) {
-      showErrorToast(error as AxiosError);
-    } finally {
-      setIsLoading(false);
-    }
   };
 
   const onScroll: UIEventHandler<HTMLElement> = useCallback(
@@ -126,7 +114,7 @@ export const AddTestCaseModal = ({
           });
       }
     },
-    [searchTerm, totalCount, items]
+    [searchTerm, totalCount, items, isLoading]
   );
 
   const handleCardClick = (details: TestCase) => {
@@ -160,99 +148,92 @@ export const AddTestCaseModal = ({
     }
   };
   useEffect(() => {
-    if (open) {
+    fetchTestCases({ searchText: searchTerm });
-      fetchTestCases({ searchText: searchTerm });
+  }, [searchTerm]);
-    }
-  }, [open, searchTerm]);
 
   return (
-    <Modal
+    <Row gutter={[0, 16]}>
-      centered
+      <Col span={24}>
-      destroyOnClose
+        <Searchbar
-      closable={false}
+          removeMargin
-      okButtonProps={{
+          showClearSearch
-        loading: isLoading,
+          showLoadingStatus
-      }}
+          placeholder={t('label.search-entity', {
-      open={open}
+            entity: t('label.test-case-plural'),
-      title={t('label.add-entity', { entity: t('label.test-case-plural') })}
+          })}
-      width={750}
+          searchValue={searchTerm}
-      onCancel={onCancel}
+          onSearch={handleSearch}
-      onOk={handleSubmit}>
+        />
-      <Row gutter={[0, 16]}>
+      </Col>
-        <Col span={24}>
+      <Col span={24}>
-          <Searchbar
+        <List loading={{ spinning: false, indicator: <Loader /> }}>
-            removeMargin
+          <VirtualList
-            showClearSearch
+            data={items}
-            showLoadingStatus
+            height={500}
-            placeholder={t('label.search-entity', {
+            itemKey="id"
-              entity: t('label.test-case-plural'),
+            onScroll={onScroll}>
-            })}
+            {({ _source: test }) => {
-            searchValue={searchTerm}
+              const tableFqn = getEntityFqnFromEntityLink(test.entityLink);
-            onSearch={handleSearch}
+              const tableName = getNameFromFQN(tableFqn);
-          />
+              const isColumn = test.entityLink.includes('::columns::');
-        </Col>
-        <Col span={24}>
-          <List loading={{ spinning: false, indicator: <Loader /> }}>
-            <VirtualList
-              data={items}
-              height={500}
-              itemKey="id"
-              onScroll={onScroll}>
-              {({ _source: test }) => {
-                const tableFqn = getEntityFqnFromEntityLink(test.entityLink);
-                const tableName = getNameFromFQN(tableFqn);
-                const isColumn = test.entityLink.includes('::columns::');
 
-                return (
+              return (
-                  <Space
+                <Space
-                    className="m-b-md border rounded-4 p-sm cursor-pointer"
+                  className="m-b-md border rounded-4 p-sm cursor-pointer"
-                    direction="vertical"
+                  direction="vertical"
-                    onClick={() => handleCardClick(test)}>
+                  onClick={() => handleCardClick(test)}>
-                    <Space className="justify-between w-full">
+                  <Space className="justify-between w-full">
-                      <Typography.Paragraph
+                    <Typography.Paragraph
-                        className="m-0 font-medium text-base"
+                      className="m-0 font-medium text-base"
-                        data-testid={test.name}>
+                      data-testid={test.name}>
-                        {getEntityName(test)}
+                      {getEntityName(test)}
-                      </Typography.Paragraph>
+                    </Typography.Paragraph>
 
-                      <Checkbox checked={selectedItems?.has(test.id ?? '')} />
+                    <Checkbox checked={selectedItems?.has(test.id ?? '')} />
-                    </Space>
-                    <Typography.Paragraph className="m-0">
-                      {getEntityName(test.testDefinition)}
-                    </Typography.Paragraph>
-                    <Typography.Paragraph className="m-0">
-                      <Link
-                        data-testid="table-link"
-                        to={getTableTabPath(tableFqn, 'profiler')}
-                        onClick={(e) => e.stopPropagation()}>
-                        {tableName}
-                      </Link>
-                    </Typography.Paragraph>
-                    {isColumn && (
-                      <Space>
-                        <Typography.Text className="font-medium text-xs">{`${t(
-                          'label.column'
-                        )}:`}</Typography.Text>
-                        <Typography.Text className="text-grey-muted text-xs">
-                          {getNameFromFQN(
-                            getDecodedFqn(
-                              getEntityFqnFromEntityLink(
-                                test.entityLink,
-                                isColumn
-                              ),
-                              true
-                            )
-                          ) ?? '--'}
-                        </Typography.Text>
-                      </Space>
-                    )}
                   </Space>
-                );
+                  <Typography.Paragraph className="m-0">
-              }}
+                    {getEntityName(test.testDefinition)}
-            </VirtualList>
+                  </Typography.Paragraph>
-          </List>
+                  <Typography.Paragraph className="m-0">
-        </Col>
+                    <Link
-      </Row>
+                      data-testid="table-link"
-    </Modal>
+                      to={getTableTabPath(tableFqn, 'profiler')}
+                      onClick={(e) => e.stopPropagation()}>
+                      {tableName}
+                    </Link>
+                  </Typography.Paragraph>
+                  {isColumn && (
+                    <Space>
+                      <Typography.Text className="font-medium text-xs">{`${t(
+                        'label.column'
+                      )}:`}</Typography.Text>
+                      <Typography.Text className="text-grey-muted text-xs">
+                        {getNameFromFQN(
+                          getDecodedFqn(
+                            getEntityFqnFromEntityLink(
+                              test.entityLink,
+                              isColumn
+                            ),
+                            true
+                          )
+                        ) ?? '--'}
+                      </Typography.Text>
+                    </Space>
+                  )}
+                </Space>
+              );
+            }}
+          </VirtualList>
+        </List>
+      </Col>
+      <Col className="d-flex justify-end items-center p-y-xss" span={24}>
+        <Button type="link" onClick={onCancel}>
+          {cancelText ?? t('label.cancel')}
+        </Button>
+        <Button loading={isLoading} type="primary" onClick={handleSubmit}>
+          {submitText ?? t('label.submit')}
+        </Button>
+      </Col>
+    </Row>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/AddTestCaseList/AddTestCaseList.interface.ts

@@ -13,9 +13,9 @@
 import { EntityReference } from 'generated/tests/testCase';
 
 export interface AddTestCaseModalProps {
-  open: boolean;
+  onCancel?: () => void;
-  onCancel: () => void;
+  onSubmit: (testCaseIds: string[]) => void;
-  onSubmit: () => void;
+  existingTest?: EntityReference[];
-  existingTest: EntityReference[];
+  cancelText?: string;
-  testSuiteId: string;
+  submitText?: string;
 }

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/SummaryPanel.component.tsx

@@ -13,6 +13,7 @@
 import { Col, Row } from 'antd';
 import { AxiosError } from 'axios';
 import { SummaryCard } from 'components/common/SummaryCard/SummaryCard.component';
+import { usePermissionProvider } from 'components/PermissionProvider/PermissionProvider';
 import { TestSummary } from 'generated/tests/testSuite';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,6 +24,8 @@ import { SummaryPanelProps } from './SummaryPanel.interface';
 
 export const SummaryPanel = ({ testSuiteId }: SummaryPanelProps) => {
   const { t } = useTranslation();
+  const { permissions } = usePermissionProvider();
+  const { testCase: testCasePermission } = permissions;
 
   const [summary, setSummary] = useState<TestSummary>();
   const [isLoading, setIsLoading] = useState(true);
@@ -40,8 +43,10 @@ export const SummaryPanel = ({ testSuiteId }: SummaryPanelProps) => {
   };
 
   useEffect(() => {
-    fetchTestSummary();
+    if (testCasePermission?.ViewAll || testCasePermission?.ViewBasic) {
-  }, [testSuiteId]);
+      fetchTestSummary();
+    }
+  }, [testSuiteId, testCasePermission]);
 
   return (
     <Row wrap gutter={[16, 16]}>

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx

@@ -13,6 +13,7 @@
 import { Col, Row } from 'antd';
 import { AxiosError } from 'axios';
 import Searchbar from 'components/common/searchbar/Searchbar';
+import { usePermissionProvider } from 'components/PermissionProvider/PermissionProvider';
 import DataQualityTab from 'components/ProfilerDashboard/component/DataQualityTab';
 import { INITIAL_PAGING_VALUE, PAGE_SIZE } from 'constants/constants';
 import { SearchIndex } from 'enums/search.enum';
@@ -29,7 +30,11 @@ import QueryString from 'qs';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { searchQuery } from 'rest/searchAPI';
-import { getListTestCase, ListTestCaseParams } from 'rest/testAPI';
+import {
+  getListTestCase,
+  getTestCaseById,
+  ListTestCaseParams,
+} from 'rest/testAPI';
 import { showErrorToast } from 'utils/ToastUtils';
 import { DataQualitySearchParams } from '../DataQuality.interface';
 import { SummaryPanel } from '../SummaryPannel/SummaryPanel.component';
@@ -38,6 +43,8 @@ export const TestCases = () => {
   const history = useHistory();
   const location = useLocation();
   const { tab } = useParams<{ tab: DataQualityPageTabs }>();
+  const { permissions } = usePermissionProvider();
+  const { testCase: testCasePermission } = permissions;
 
   const params = useMemo(() => {
     const search = location.search;
@@ -115,16 +122,31 @@ export const TestCases = () => {
         pageSize: PAGE_SIZE,
         searchIndex: SearchIndex.TEST_CASE,
         query: searchValue,
+        fetchSource: false,
       });
-      const hits = (
+      const promise = (
         response.hits.hits as SearchHitBody<
           SearchIndex.TEST_CASE,
           TestCaseSearchSource
         >[]
-      ).map((value) => value._source);
+      ).map((value) =>
+        getTestCaseById(value._id ?? '', {
+          fields: 'testDefinition,testCaseResult,testSuite',
+        })
+      );
+
+      const value = await Promise.allSettled(promise);
+
+      const testSuites = value.reduce((prev, curr) => {
+        if (curr.status === 'fulfilled') {
+          return [...prev, curr.value.data];
+        }
+
+        return prev;
+      }, [] as TestCase[]);
 
       setTestCase({
-        data: hits,
+        data: testSuites,
         paging: { total: response.hits.total.value ?? 0 },
       });
     } catch (error) {
@@ -151,14 +173,16 @@ export const TestCases = () => {
   };
 
   useEffect(() => {
-    if (tab === DataQualityPageTabs.TEST_CASES) {
+    if (testCasePermission?.ViewAll || testCasePermission?.ViewBasic) {
-      if (searchValue) {
+      if (tab === DataQualityPageTabs.TEST_CASES) {
-        searchTestCases();
+        if (searchValue) {
-      } else {
+          searchTestCases();
-        fetchTestCases();
+        } else {
+          fetchTestCases();
+        }
       }
     }
-  }, [tab, searchValue]);
+  }, [tab, searchValue, testCasePermission]);
 
   return (
     <Row className="p-x-lg p-t-md" gutter={[16, 16]}>

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuites/TestSuites.component.tsx

@@ -17,6 +17,7 @@ import FilterTablePlaceHolder from 'components/common/error-with-placeholder/Fil
 import NextPrevious from 'components/common/next-previous/NextPrevious';
 import { OwnerLabel } from 'components/common/OwnerLabel/OwnerLabel.component';
 import Searchbar from 'components/common/searchbar/Searchbar';
+import { usePermissionProvider } from 'components/PermissionProvider/PermissionProvider';
 import { TableProfilerTab } from 'components/ProfilerDashboard/profilerDashboard.interface';
 import ProfilerProgressWidget from 'components/TableProfiler/Component/ProfilerProgressWidget';
 import {
@@ -55,6 +56,8 @@ export const TestSuites = () => {
     useParams<{ tab: DataQualityPageTabs }>();
   const history = useHistory();
   const location = useLocation();
+  const { permissions } = usePermissionProvider();
+  const { testSuite: testSuitePermission } = permissions;
 
   const [testSuites, setTestSuites] = useState<PagingResponse<TestSuite[]>>({
     data: [],
@@ -177,8 +180,10 @@ export const TestSuites = () => {
   };
 
   useEffect(() => {
-    fetchTestSuites();
+    if (testSuitePermission?.ViewAll || testSuitePermission?.ViewBasic) {
-  }, [tab]);
+      fetchTestSuites();
+    }
+  }, [tab, testSuitePermission]);
 
   return (
     <Row className="p-x-lg p-t-md" gutter={[16, 16]}>
@@ -192,13 +197,14 @@ export const TestSuites = () => {
             />
           </Col>
           <Col>
-            {tab === DataQualityPageTabs.TEST_SUITES && (
+            {tab === DataQualityPageTabs.TEST_SUITES &&
-              <Link to={ROUTES.ADD_TEST_SUITES}>
+              testSuitePermission?.Create && (
-                <Button type="primary">
+                <Link to={ROUTES.ADD_TEST_SUITES}>
-                  {t('label.add-entity', { entity: t('label.test-suite') })}
+                  <Button type="primary">
-                </Button>
+                    {t('label.add-entity', { entity: t('label.test-suite') })}
-              </Link>
+                  </Button>
-            )}
+                </Link>
+              )}
           </Col>
         </Row>
       </Col>

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx

@@ -11,8 +11,9 @@
  *  limitations under the License.
  */
 
-import { Button, Col, Row, Typography } from 'antd';
+import { Button, Col, Row, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
+import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer';
 import DatePickerMenu from 'components/DatePickerMenu/DatePickerMenu.component';
 import {
   GREEN_3,
@@ -97,13 +98,13 @@ const TestSummary: React.FC<TestSummaryProps> = ({
       const values = result.testResultValue?.reduce((acc, curr) => {
         return {
           ...acc,
-          [curr.name || 'value']: round(parseFloat(curr.value ?? ''), 2) || 0,
+          [curr.name ?? 'value']: round(parseFloat(curr.value ?? ''), 2) || 0,
         };
       }, {});
 
       chartData.push({
         name: getFormattedDateFromSeconds(result.timestamp as number),
-        status: result.testCaseStatus || '',
+        status: result.testCaseStatus ?? '',
         ...values,
       });
     });
@@ -111,9 +112,9 @@ const TestSummary: React.FC<TestSummaryProps> = ({
     setChartData({
       information:
         currentData[0]?.testResultValue?.map((info, i) => ({
-          label: info.name || '',
+          label: info.name ?? '',
           color: COLORS[i],
-        })) || [],
+        })) ?? [],
       data: chartData,
     });
   };
@@ -251,13 +252,16 @@ const TestSummary: React.FC<TestSummaryProps> = ({
 
     if (isSqlQuery) {
       return (
-        <Row className="sql-expression-container" gutter={8} key={param.name}>
+        <Row
-          <Col span={showExpandIcon ? 2 : 3}>
+          className="sql-expression-container"
+          gutter={[8, 8]}
+          key={param.name}>
+          <Col span={24}>
             <Typography.Text className="text-grey-muted">
               {`${param.name}:`}
             </Typography.Text>
           </Col>
-          <Col span={showExpandIcon ? 22 : 21}>
+          <Col span={24}>
             <SchemaEditor
               editorClass="table-query-editor"
               mode={{ name: CSMode.SQL }}
@@ -344,30 +348,37 @@ const TestSummary: React.FC<TestSummaryProps> = ({
         )}
       </Col>
       <Col span={24}>
-        {showParameters && (
+        <Row align="top" data-testid="params-container" gutter={[16, 16]}>
-          <Row align="top" data-testid="params-container" gutter={16}>
+          {showParameters && (
             <Col>
               <Typography.Text className="text-grey-muted">
                 {`${t('label.parameter')}:`}
               </Typography.Text>
-            </Col>
-            <Col>
               {!isEmpty(parameterValuesWithoutSqlExpression) ? (
                 <Row className="parameter-value-container" gutter={[4, 4]}>
                   {parameterValuesWithoutSqlExpression?.map(showParamsData)}
                 </Row>
               ) : (
-                <Typography.Text type="secondary">
+                <Typography.Text className="m-l-xs" type="secondary">
                   {t('label.no-parameter-available')}
                 </Typography.Text>
               )}
             </Col>
-          </Row>
+          )}
-        )}
+          {!isUndefined(parameterValuesWithSqlExpression) ? (
-
+            <Col>{parameterValuesWithSqlExpression.map(showParamsData)}</Col>
-        {!isUndefined(parameterValuesWithSqlExpression)
+          ) : null}
-          ? parameterValuesWithSqlExpression.map(showParamsData)
+          {data.description && (
-          : null}
+            <Col>
+              <Space direction="vertical" size={4}>
+                <Typography.Text className="text-grey-muted">
+                  {`${t('label.description')}:`}
+                </Typography.Text>
+                <RichTextEditorPreviewer markdown={data.description} />
+              </Space>
+            </Col>
+          )}
+        </Row>
       </Col>
     </Row>
   );

openmetadata-ui/src/main/resources/ui/src/components/TestSuite/AddTestSuiteForm/AddTestSuiteForm.tsx

@@ -118,6 +118,7 @@ const AddTestSuiteForm: React.FC<AddTestSuiteFormProps> = ({
       <Form.Item label={t('label.description')} name="description">
         <RichTextEditor
           data-testid="test-suite-description"
+          height="200px"
           initialValue={testSuite?.description ?? ''}
           onTextChange={(value) => form.setFieldsValue({ description: value })}
         />

openmetadata-ui/src/main/resources/ui/src/components/TestSuite/TestSuiteStepper/TestSuiteStepper.tsx

@@ -11,34 +11,28 @@
  *  limitations under the License.
  */
 
-import { Button, Col, Form, Row, Select, Space, Typography } from 'antd';
+import { Col, Row, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import RightPanel from 'components/AddDataQualityTest/components/RightPanel';
 import { getRightPanelForAddTestSuitePage } from 'components/AddDataQualityTest/rightPanelData';
+import { AddTestCaseList } from 'components/AddTestCaseList/AddTestCaseList.component';
 import ResizablePanels from 'components/common/ResizablePanels/ResizablePanels';
 import SuccessScreen from 'components/common/success-screen/SuccessScreen';
 import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
 import IngestionStepper from 'components/IngestionStepper/IngestionStepper.component';
 import { HTTP_STATUS_CODE } from 'constants/auth.constants';
-import { PAGE_SIZE_LARGE } from 'constants/constants';
 import {
   STEPS_FOR_ADD_TEST_SUITE,
   TEST_SUITE_STEPPER_BREADCRUMB,
 } from 'constants/TestSuite.constant';
 import { FormSubmitType } from 'enums/form.enum';
 import { OwnerType } from 'enums/user.enum';
-import { TestCase } from 'generated/tests/testCase';
 import { TestSuite } from 'generated/tests/testSuite';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import {
+import { addTestCaseToLogicalTestSuite, createTestSuites } from 'rest/testAPI';
-  addTestCaseToLogicalTestSuite,
-  createTestSuites,
-  getListTestCase,
-} from 'rest/testAPI';
 import { getCurrentUserId } from 'utils/CommonUtils';
-import { getEntityName } from 'utils/EntityUtils';
 import { getTestSuitePath } from 'utils/RouterUtils';
 import { showErrorToast } from 'utils/ToastUtils';
 import AddTestSuiteForm from '../AddTestSuiteForm/AddTestSuiteForm';
@@ -48,11 +42,9 @@ const TestSuiteStepper = () => {
   const history = useHistory();
   const [activeServiceStep, setActiveServiceStep] = useState(1);
   const [testSuiteResponse, setTestSuiteResponse] = useState<TestSuite>();
-  const [testCases, setTestCases] = useState<TestCase[]>([]);
-  const [selectedTestCase, setSelectedTestCase] = useState<string[]>([]);
 
   const handleViewTestSuiteClick = () => {
-    history.push(getTestSuitePath(testSuiteResponse?.fullyQualifiedName || ''));
+    history.push(getTestSuitePath(testSuiteResponse?.fullyQualifiedName ?? ''));
   };
 
   const handleTestSuitNextClick = (data: TestSuite) => {
@@ -60,7 +52,7 @@ const TestSuiteStepper = () => {
     setActiveServiceStep(2);
   };
 
-  const onSubmit = async (data: { testCase: string[] }) => {
+  const onSubmit = async (data: string[]) => {
     try {
       const owner = {
         id: getCurrentUserId(),
@@ -74,7 +66,7 @@ const TestSuiteStepper = () => {
       });
       setTestSuiteResponse(response);
       await addTestCaseToLogicalTestSuite({
-        testCaseIds: data.testCase,
+        testCaseIds: data,
         testSuiteId: response.id ?? '',
       });
       setActiveServiceStep(3);
@@ -100,61 +92,15 @@ const TestSuiteStepper = () => {
     }
   };
 
-  const fetchTestCases = async () => {
-    try {
-      const response = await getListTestCase({ limit: PAGE_SIZE_LARGE });
-      setTestCases(response.data);
-    } catch (error) {
-      setTestCases([]);
-    }
-  };
-
-  useEffect(() => {
-    fetchTestCases();
-  }, []);
-
-  const selectTestCase = useMemo(() => {
-    return (
-      <Form
-        data-testid="test-case-form"
-        initialValues={{ testCase: selectedTestCase }}
-        layout="vertical"
-        name="selectTestCase"
-        onFinish={onSubmit}
-        onValuesChange={({ testCase }) => setSelectedTestCase(testCase)}>
-        <Form.Item label={t('label.test-case-plural')} name="testCase">
-          <Select
-            mode="multiple"
-            placeholder={t('label.please-select-entity', {
-              entity: t('label.test-case-plural'),
-            })}>
-            {testCases.map((test) => (
-              <Select.Option key={test.id}>{getEntityName(test)}</Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item noStyle>
-          <Space className="w-full justify-end" size={16}>
-            <Button
-              data-testid="back-button"
-              onClick={() => setActiveServiceStep(1)}>
-              {t('label.back')}
-            </Button>
-            <Button
-              data-testid="submit-button"
-              htmlType="submit"
-              type="primary">
-              {t('label.submit')}
-            </Button>
-          </Space>
-        </Form.Item>
-      </Form>
-    );
-  }, [testCases, selectedTestCase, testSuiteResponse]);
-
   const RenderSelectedTab = useCallback(() => {
     if (activeServiceStep === 2) {
-      return selectTestCase;
+      return (
+        <AddTestCaseList
+          cancelText={t('label.back')}
+          onCancel={() => setActiveServiceStep(1)}
+          onSubmit={onSubmit}
+        />
+      );
     } else if (activeServiceStep === 3) {
       return (
         <SuccessScreen

openmetadata-ui/src/main/resources/ui/src/constants/elasticsearch.constant.ts

@@ -72,6 +72,10 @@ export const ELASTIC_SEARCH_INDEX_ENTITIES = [
     value: 'query',
     label: t('label.query'),
   },
+  {
+    value: 'testCase',
+    label: t('label.test-case'),
+  },
 ];
 
 export const ELASTIC_SEARCH_INITIAL_VALUES = {

openmetadata-ui/src/main/resources/ui/src/pages/TestSuiteDetailsPage/TestSuiteDetailsPage.component.tsx

@@ -11,9 +11,9 @@
  *  limitations under the License.
  */
 
-import { Button, Col, Row, Space } from 'antd';
+import { Button, Col, Modal, Row, Space } from 'antd';
 import { AxiosError } from 'axios';
-import { AddTestCaseModal } from 'components/AddTestCaseModal/AddTestCaseModal.component';
+import { AddTestCaseList } from 'components/AddTestCaseList/AddTestCaseList.component';
 import { useAuthContext } from 'components/authentication/auth-provider/AuthProvider';
 import Description from 'components/common/description/Description';
 import ManageButton from 'components/common/entityPageInfo/ManageButton/ManageButton';
@@ -38,6 +38,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
 import {
+  addTestCaseToLogicalTestSuite,
   getListTestCase,
   getTestSuiteByName,
   ListTestCaseParams,
@@ -154,6 +155,19 @@ const TestSuiteDetailsPage = () => {
     fetchTestCases();
   };
 
+  const handleAddTestCaseSubmit = async (testCaseIds: string[]) => {
+    try {
+      await addTestCaseToLogicalTestSuite({
+        testCaseIds,
+        testSuiteId: testSuite?.id ?? '',
+      });
+      setIsTestCaseModalOpen(false);
+      fetchTestCases();
+    } catch (error) {
+      showErrorToast(error as AxiosError);
+    }
+  };
+
   const fetchTestSuiteByName = async () => {
     try {
       const response = await getTestSuiteByName(testSuiteFQN, {
@@ -309,11 +323,16 @@ const TestSuiteDetailsPage = () => {
               titleLinks={slashedBreadCrumb}
             />
             <Space>
-              <Button
+              {(testSuitePermissions.EditAll ||
-                type="primary"
+                testSuitePermissions.EditTests) && (
-                onClick={() => setIsTestCaseModalOpen(true)}>
+                <Button
-                {t('label.add-entity', { entity: t('label.test-case-plural') })}
+                  type="primary"
-              </Button>
+                  onClick={() => setIsTestCaseModalOpen(true)}>
+                  {t('label.add-entity', {
+                    entity: t('label.test-case-plural'),
+                  })}
+                </Button>
+              )}
               <ManageButton
                 isRecursiveDelete
                 afterDeleteAction={afterDeleteAction}
@@ -366,13 +385,22 @@ const TestSuiteDetailsPage = () => {
           />
         </Col>
         <Col span={24}>
-          <AddTestCaseModal
+          <Modal
-            existingTest={testSuite?.tests ?? []}
+            centered
+            destroyOnClose
+            closable={false}
+            footer={null}
             open={isTestCaseModalOpen}
-            testSuiteId={testSuite?.id ?? ''}
+            title={t('label.add-entity', {
-            onCancel={() => setIsTestCaseModalOpen(false)}
+              entity: t('label.test-case-plural'),
-            onSubmit={afterSubmitAction}
+            })}
-          />
+            width={750}>
+            <AddTestCaseList
+              existingTest={testSuite?.tests ?? []}
+              onCancel={() => setIsTestCaseModalOpen(false)}
+              onSubmit={handleAddTestCaseSubmit}
+            />
+          </Modal>
         </Col>
       </Row>
     </PageLayoutV1>

openmetadata-ui/src/main/resources/ui/src/rest/testAPI.ts

@@ -113,6 +113,16 @@ export const getTestCaseByFqn = async (
 
   return response;
 };
+export const getTestCaseById = async (
+  id: string,
+  params?: Pick<ListParams, 'fields' | 'include'>
+) => {
+  const response = await APIClient.get<TestCase>(`${testCaseUrl}/${id}`, {
+    params,
+  });
+
+  return response;
+};
 
 export const createTestCase = async (data: CreateTestCase) => {
   const response = await APIClient.post<