From 6fb2b87a2900577d81b5c9aa5d46bd2207c5cf64 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Thu, 22 Sep 2022 18:39:21 +0530 Subject: [PATCH] fix(ui): Issues around Add Data Quality Test #7498 (#7597) * UI: Fixed issue: UI: Issues around Add Data Quality Test #7498 * remove tailwind class --- .../components/SelectTestSuite.tsx | 186 +++++++++++------- .../rich-text-editor/RichTextEditor.tsx | 3 + .../resources/ui/src/interface/types.d.ts | 1 + .../src/main/resources/ui/src/styles/app.less | 5 + .../ui/src/styles/components/size.less | 3 + .../main/resources/ui/src/styles/spacing.less | 12 ++ .../resources/ui/src/styles/variables.less | 2 + 7 files changed, 141 insertions(+), 71 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/SelectTestSuite.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/SelectTestSuite.tsx index 9821d0c263c..40827742b2a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/SelectTestSuite.tsx +++ b/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 = ({ initialValue, }) => { const { entityTypeFQN } = useParams>(); + 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 = ({ 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 = ({ 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 = ({ return (
+ onFinish={handleFormSubmit} + onValuesChange={(value, values) => { + setFormData(values); + if (value.testSuiteId) { + markdownRef?.current?.clearEditorContent(); + form.setFieldsValue({ + ...values, + testSuiteName: '', + }); + } else if (value.testSuiteName) { + resetSelectedId(); + } + }}> - - { - if (isEmpty(getDescription())) { - return Promise.reject('Description is required!'); - } + {isNewTestSuite ? ( + <> + + New Test Suite + + { + if (testSuites.some((suite) => suite.name === value)) { + return Promise.reject('Name already exist!'); + } - return Promise.resolve(); - }, - }, - ]}> - - + return Promise.resolve(); + }, + }, + ]}> + + + { + if ( + isEmpty(getDescription()) && + isEmpty(form.getFieldValue('testSuiteId')) + ) { + return Promise.reject('Description is required!'); + } + + return Promise.resolve(); + }, + }, + ]}> + { + resetSelectedId(); + }} + /> + + + ) : ( + + + + )} - ) : ( - - - )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx index 6b3787bcde1..0bea63f3e33 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx @@ -62,6 +62,9 @@ const RichTextEditor = forwardRef( getEditorContent() { return editorValue; }, + clearEditorContent() { + richTextEditorRef.current?.getInstance().setMarkdown(''); + }, })); useEffect(() => { diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts index 20e4bdc8bfe..78b6a2588cb 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts +++ b/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 diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less index 6e662744093..0ef05a1a462 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less +++ b/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 */; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less index 287d72dc061..7c83d5d595f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less +++ b/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 */; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less index b721d38f257..8598930b5ae 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less +++ b/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; } diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less index 6c4b7118a34..c84227988a4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less +++ b/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;