fix(ui): Issues around Add Data Quality Test #7498 (#7597)

* UI: Fixed issue: UI: Issues around Add Data Quality Test #7498

* remove tailwind class

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

@@ -22,17 +22,20 @@ import {
   Space,
   Typography,
 } from 'antd';
+import { useForm } from 'antd/lib/form/Form';
 import { AxiosError } from 'axios';
 import { isEmpty } from 'lodash';
 import { EditorContentRef } from 'Models';
 import React, { useEffect, useRef, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
+import { useAuthContext } from '../../../authentication/auth-provider/AuthProvider';
 import { getListTestSuites } from '../../../axiosAPIs/testAPI';
 import {
   API_RES_MAX_SIZE,
   getTableTabPath,
 } from '../../../constants/constants';
 import { TestSuite } from '../../../generated/tests/testSuite';
+import { useAuth } from '../../../hooks/authHooks';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import RichTextEditor from '../../common/rich-text-editor/RichTextEditor';
@@ -46,7 +49,18 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
   initialValue,
 }) => {
   const { entityTypeFQN } = useParams<Record<string, string>>();
+  const { isAdminUser } = useAuth();
+  const { isAuthDisabled } = useAuthContext();
+  const [form] = useForm();
+  const hasAccess = isAdminUser || isAuthDisabled;
   const history = useHistory();
+  const [formData, setFormData] = useState<{
+    testSuiteId: string;
+    testSuiteName: string;
+  }>({
+    testSuiteId: initialValue?.data?.id || '',
+    testSuiteName: initialValue?.name || '',
+  });
   const [isNewTestSuite, setIsNewTestSuite] = useState(
     initialValue?.isNewTestSuite ?? false
   );
@@ -69,6 +83,10 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
     return markdownRef.current?.getEditorContent() || '';
   };
 
+  const resetSelectedId = () => {
+    form.setFieldsValue({ testSuiteId: undefined });
+  };
+
   const handleCancelClick = () => {
     history.push(getTableTabPath(entityTypeFQN, 'profiler'));
   };
@@ -78,7 +96,7 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
       name: value.testSuiteName,
       description: getDescription(),
       data: testSuites.find((suite) => suite.id === value.testSuiteId),
-      isNewTestSuite,
+      isNewTestSuite: isEmpty(formData.testSuiteId),
     };
 
     onSubmit(data);
@@ -92,21 +110,37 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
 
   return (
     <Form
+      form={form}
       initialValues={{
         testSuiteId: initialValue?.data?.id,
         testSuiteName: initialValue?.name,
       }}
       layout="vertical"
       name="selectTestSuite"
-      onFinish={handleFormSubmit}>
+      onFinish={handleFormSubmit}
+      onValuesChange={(value, values) => {
+        setFormData(values);
+        if (value.testSuiteId) {
+          markdownRef?.current?.clearEditorContent();
+          form.setFieldsValue({
+            ...values,
+            testSuiteName: '',
+          });
+        } else if (value.testSuiteName) {
+          resetSelectedId();
+        }
+      }}>
       <Form.Item
         label="Test Suite:"
         name="testSuiteId"
         rules={[
-          { required: !isNewTestSuite, message: 'Test suite is required' },
+          {
+            required:
+              !isNewTestSuite || !isEmpty(form.getFieldValue('testSuiteId')),
+            message: 'Test suite is required',
+          },
         ]}>
         <Select
-          disabled={isNewTestSuite}
           options={testSuites.map((suite) => ({
             label: suite.name,
             value: suite.id,
@@ -114,12 +148,14 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
           placeholder="Select test suite"
         />
       </Form.Item>
+      {hasAccess && (
+        <>
           <Divider plain>OR</Divider>
 
           {isNewTestSuite ? (
             <>
               <Typography.Paragraph
-            className="tw-text-base tw-mt-5"
+                className="text-base m-t-lg"
                 data-testid="new-test-title">
                 New Test Suite
               </Typography.Paragraph>
@@ -128,7 +164,7 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
                 name="testSuiteName"
                 rules={[
                   {
-                required: isNewTestSuite,
+                    required: isEmpty(form.getFieldValue('testSuiteId')),
                     message: 'Name is required!',
                   },
                   {
@@ -151,9 +187,12 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
                 name="description"
                 rules={[
                   {
-                required: true,
+                    required: isEmpty(form.getFieldValue('testSuiteId')),
                     validator: () => {
-                  if (isEmpty(getDescription())) {
+                      if (
+                        isEmpty(getDescription()) &&
+                        isEmpty(form.getFieldValue('testSuiteId'))
+                      ) {
                         return Promise.reject('Description is required!');
                       }
 
@@ -167,17 +206,20 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
                   style={{
                     margin: 0,
                   }}
+                  onTextChange={() => {
+                    resetSelectedId();
+                  }}
                 />
               </Form.Item>
             </>
           ) : (
-        <Row className="tw-mb-10" justify="center">
+            <Row className="m-b-xlg" justify="center">
               <Button
                 data-testid="create-new-test-suite"
                 icon={
                   <SVGIcons
                     alt="plus"
-                className="tw-w-4 tw-mr-1"
+                    className="w-4 m-r-xss"
                     icon={Icons.ICON_PLUS_PRIMERY}
                   />
                 }
@@ -186,6 +228,8 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
               </Button>
             </Row>
           )}
+        </>
+      )}
 
       <Form.Item noStyle>
         <Space className="tw-w-full tw-justify-end" size={16}>

openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx

@@ -62,6 +62,9 @@ const RichTextEditor = forwardRef<editorRef, RichTextEditorProp>(
       getEditorContent() {
         return editorValue;
       },
+      clearEditorContent() {
+        richTextEditorRef.current?.getInstance().setMarkdown('');
+      },
     }));
 
     useEffect(() => {

openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts

@@ -561,6 +561,7 @@ declare module 'Models' {
 
   export interface EditorContentRef {
     getEditorContent: () => string;
+    clearEditorContent: () => void;
   }
 
   // Feed interfaces and types

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -84,3 +84,8 @@
 .opacity-60 {
   opacity: 0.6;
 }
+
+.text-base {
+  font-size: 1rem /* 16px */;
+  line-height: 1.5rem /* 24px */;
+}

openmetadata-ui/src/main/resources/ui/src/styles/components/size.less

@@ -14,3 +14,6 @@
 .w-40 {
   width: 10rem /* 160px */;
 }
+.w-4 {
+  width: 1rem /* 16px */;
+}

openmetadata-ui/src/main/resources/ui/src/styles/spacing.less

@@ -14,6 +14,12 @@
 @import '~antd/dist/antd.less';
 @import url('./variables.less');
 
+//lg: 24px;
+//md: 16px;
+//sm: 12px;
+//xs: 8px;
+//xss: 4px;
+
 .m-0 {
   margin: 0 !important;
 }
@@ -65,6 +71,9 @@
 .m-r-0 {
   margin-right: 0 !important;
 }
+.m-r-xss {
+  margin-right: @margin-xss;
+}
 .m-r-xs {
   margin-right: @margin-xs;
 }
@@ -122,6 +131,9 @@
 .m-b-lg {
   margin-bottom: @margin-lg;
 }
+.m-b-xlg {
+  margin-bottom: @margin-xlg;
+}
 .m-auto {
   margin: auto;
 }

openmetadata-ui/src/main/resources/ui/src/styles/variables.less

@@ -30,3 +30,5 @@
 @switch-sm-height: 12px;
 @switch-min-width: 30px;
 @switch-sm-min-width: 23px;
+@padding-xlg: 48px;
+@margin-xlg: 48px;