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,77 +148,87 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
           placeholder="Select test suite"
         />
       </Form.Item>
-      <Divider plain>OR</Divider>
+      {hasAccess && (
-
-      {isNewTestSuite ? (
         <>
-          <Typography.Paragraph
+          <Divider plain>OR</Divider>
-            className="tw-text-base tw-mt-5"
-            data-testid="new-test-title">
-            New Test Suite
-          </Typography.Paragraph>
-          <Form.Item
-            label="Name:"
-            name="testSuiteName"
-            rules={[
-              {
-                required: isNewTestSuite,
-                message: 'Name is required!',
-              },
-              {
-                validator: (_, value) => {
-                  if (testSuites.some((suite) => suite.name === value)) {
-                    return Promise.reject('Name already exist!');
-                  }
 
-                  return Promise.resolve();
+          {isNewTestSuite ? (
-                },
+            <>
-              },
+              <Typography.Paragraph
-            ]}>
+                className="text-base m-t-lg"
-            <Input
+                data-testid="new-test-title">
-              data-testid="test-suite-name"
+                New Test Suite
-              placeholder="Enter test suite name"
+              </Typography.Paragraph>
-            />
+              <Form.Item
-          </Form.Item>
+                label="Name:"
-          <Form.Item
+                name="testSuiteName"
-            label="Description:"
+                rules={[
-            name="description"
+                  {
-            rules={[
+                    required: isEmpty(form.getFieldValue('testSuiteId')),
-              {
+                    message: 'Name is required!',
-                required: true,
+                  },
-                validator: () => {
+                  {
-                  if (isEmpty(getDescription())) {
+                    validator: (_, value) => {
-                    return Promise.reject('Description is required!');
+                      if (testSuites.some((suite) => suite.name === value)) {
-                  }
+                        return Promise.reject('Name already exist!');
+                      }
 
-                  return Promise.resolve();
+                      return Promise.resolve();
-                },
+                    },
-              },
+                  },
-            ]}>
+                ]}>
-            <RichTextEditor
+                <Input
-              initialValue={initialValue?.description || ''}
+                  data-testid="test-suite-name"
-              ref={markdownRef}
+                  placeholder="Enter test suite name"
-              style={{
+                />
-                margin: 0,
+              </Form.Item>
-              }}
+              <Form.Item
-            />
+                label="Description:"
-          </Form.Item>
+                name="description"
+                rules={[
+                  {
+                    required: isEmpty(form.getFieldValue('testSuiteId')),
+                    validator: () => {
+                      if (
+                        isEmpty(getDescription()) &&
+                        isEmpty(form.getFieldValue('testSuiteId'))
+                      ) {
+                        return Promise.reject('Description is required!');
+                      }
+
+                      return Promise.resolve();
+                    },
+                  },
+                ]}>
+                <RichTextEditor
+                  initialValue={initialValue?.description || ''}
+                  ref={markdownRef}
+                  style={{
+                    margin: 0,
+                  }}
+                  onTextChange={() => {
+                    resetSelectedId();
+                  }}
+                />
+              </Form.Item>
+            </>
+          ) : (
+            <Row className="m-b-xlg" justify="center">
+              <Button
+                data-testid="create-new-test-suite"
+                icon={
+                  <SVGIcons
+                    alt="plus"
+                    className="w-4 m-r-xss"
+                    icon={Icons.ICON_PLUS_PRIMERY}
+                  />
+                }
+                onClick={() => setIsNewTestSuite(true)}>
+                <span className="tw-text-primary">Create new test suite</span>
+              </Button>
+            </Row>
+          )}
         </>
-      ) : (
-        <Row className="tw-mb-10" justify="center">
-          <Button
-            data-testid="create-new-test-suite"
-            icon={
-              <SVGIcons
-                alt="plus"
-                className="tw-w-4 tw-mr-1"
-                icon={Icons.ICON_PLUS_PRIMERY}
-              />
-            }
-            onClick={() => setIsNewTestSuite(true)}>
-            <span className="tw-text-primary">Create new test suite</span>
-          </Button>
-        </Row>
       )}
 
       <Form.Item noStyle>

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;