diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/EditTestCaseModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/EditTestCaseModal.tsx index 7e865a7f7ec..94995b431b5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/EditTestCaseModal.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/EditTestCaseModal.tsx @@ -17,12 +17,11 @@ import { AxiosError } from 'axios'; import { compare } from 'fast-json-patch'; import { EditorContentRef } from 'Models'; import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { Controlled as CodeMirror } from 'react-codemirror2'; import { getTestDefinitionById, updateTestCaseById, } from '../../axiosAPIs/testAPI'; -import { codeMirrorOption } from '../../constants/profiler.constant'; +import { CSMode } from '../../enums/codemirror.enum'; import { TestCaseParameterValue } from '../../generated/tests/testCase'; import { TestDataType, @@ -32,6 +31,7 @@ import jsonData from '../../jsons/en'; import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils'; import RichTextEditor from '../common/rich-text-editor/RichTextEditor'; import Loader from '../Loader/Loader'; +import SchemaEditor from '../schema-editor/SchemaEditor'; import { EditTestCaseModalProps } from './AddDataQualityTest.interface'; import ParameterForm from './components/ParameterForm'; @@ -63,16 +63,13 @@ const EditTestCaseModal: React.FC = ({ Profile Sample Query - { - setSqlQuery((pre) => ({ ...pre, value })); - }} - onChange={(_Editor, _EditorChange, value) => { - setSqlQuery((pre) => ({ ...pre, value })); - }} + onChange={(value) => setSqlQuery((pre) => ({ ...pre, value }))} /> @@ -171,6 +168,12 @@ const EditTestCaseModal: React.FC = ({ testDefinition: testCase?.testDefinition?.name, params: getParamsValue(), }); + setSqlQuery( + testCase?.parameterValues?.[0] ?? { + name: 'sqlExpression', + value: '', + } + ); } }, [testCase]); @@ -190,6 +193,7 @@ const EditTestCaseModal: React.FC = ({ ) : (
= ({ data }) => { fetchTestResults(); }, [selectedTimeRange]); + const showParamsData = (param: TestCaseParameterValue) => { + const isSqlQuery = param.name === 'sqlExpression'; + + if (isSqlQuery) { + return ( +
+ {param.name}: + +
+ ); + } + + return ( +
+ {param.name}: + {param.value} +
+ ); + }; + const referenceArea = () => { const yValues = data.parameterValues?.reduce((acc, curr, i) => { return { ...acc, [`y${i + 1}`]: parseInt(curr.value || '') }; @@ -215,13 +246,14 @@ const TestSummary: React.FC = ({ data }) => { Parameter: - - {data.parameterValues?.map((param) => ( - - {param.name}: - {param.value} - - ))} + + {data.parameterValues && data.parameterValues.length > 0 ? ( + data.parameterValues.map(showParamsData) + ) : ( + + No Parameter Available + + )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.test.tsx index 44717840515..26ea3382345 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.test.tsx @@ -27,35 +27,14 @@ import TableProfilerV1 from './TableProfilerV1'; // mock library imports jest.mock('react-router-dom', () => ({ + useHistory: jest.fn().mockImplementation(() => { + jest.fn(); + }), Link: jest .fn() .mockImplementation(({ children }) => {children}), })); -jest.mock('antd', () => ({ - Button: jest - .fn() - .mockImplementation(({ children, ...props }) => ( - - )), - - Col: jest - .fn() - .mockImplementation(({ children, ...props }) => ( -
{children}
- )), - Row: jest - .fn() - .mockImplementation(({ children, ...props }) => ( -
{children}
- )), - Empty: jest - .fn() - .mockImplementation(({ description }) =>
{description}
), - Link: jest.fn().mockImplementation(({ children }) => {children}), - Tooltip: jest.fn().mockImplementation(({ children }) =>

{children}

), -})); - // mock internal imports jest.mock('./Component/ProfilerSettingsModal', () => { return jest.fn().mockImplementation(() => { @@ -106,21 +85,6 @@ describe('Test TableProfiler component', () => { expect(addTableTest).toBeInTheDocument(); }); - it('No data placeholder should be visible where there is no profiler', async () => { - render( - - ); - - const noProfiler = await screen.findByTestId( - 'no-profiler-placeholder-container' - ); - - expect(noProfiler).toBeInTheDocument(); - }); - it('CTA: Add table test should work properly', async () => { render(); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx index c2564e6a360..0a910ac8833 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx @@ -11,12 +11,20 @@ * limitations under the License. */ -import { Button, Col, Empty, Row, Tooltip } from 'antd'; +import { + Button, + Col, + Radio, + RadioChangeEvent, + Row, + Space, + Tooltip, +} from 'antd'; import { AxiosError } from 'axios'; import classNames from 'classnames'; -import { isEmpty, isUndefined } from 'lodash'; +import { isEmpty } from 'lodash'; import React, { FC, useEffect, useMemo, useState } from 'react'; -import { Link } from 'react-router-dom'; +import { Link, useHistory } from 'react-router-dom'; import { getListTestCase } from '../../axiosAPIs/testAPI'; import { API_RES_MAX_SIZE } from '../../constants/constants'; import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil'; @@ -35,6 +43,7 @@ import { import SVGIcons, { Icons } from '../../utils/SvgUtils'; import { generateEntityLink } from '../../utils/TableUtils'; import { showErrorToast } from '../../utils/ToastUtils'; +import { ProfilerDashboardTab } from '../ProfilerDashboard/profilerDashboard.interface'; import ColumnProfileTable from './Component/ColumnProfileTable'; import ProfilerSettingsModal from './Component/ProfilerSettingsModal'; import { @@ -50,12 +59,16 @@ const TableProfilerV1: FC = ({ hasEditAccess, }) => { const { profile, columns } = table; + const history = useHistory(); const [settingModalVisible, setSettingModalVisible] = useState(false); const [columnTests, setColumnTests] = useState([]); const [tableTests, setTableTests] = useState({ tests: [], results: INITIAL_TEST_RESULT_SUMMARY, }); + const [activeTab] = useState( + ProfilerDashboardTab.SUMMARY + ); const handleSettingModal = (value: boolean) => { setSettingModalVisible(value); @@ -92,6 +105,24 @@ const TableProfilerV1: FC = ({ ]; }, [profile, tableTests]); + const tabOptions = useMemo(() => { + return Object.values(ProfilerDashboardTab).filter( + (value) => value !== ProfilerDashboardTab.PROFILER + ); + }, []); + + const handleTabChange = (e: RadioChangeEvent) => { + const value = e.target.value as ProfilerDashboardTab; + if (ProfilerDashboardTab.DATA_QUALITY === value) { + history.push( + getProfilerDashboardWithFqnPath( + ProfilerDashboardType.TABLE, + table.fullyQualifiedName || '' + ) + ); + } + }; + const fetchAllTests = async () => { try { const { data } = await getListTestCase({ @@ -130,67 +161,49 @@ const TableProfilerV1: FC = ({ fetchAllTests(); }, [table]); - if (isUndefined(profile)) { - return ( -
- - - Data Profiler is an optional configuration in Ingestion. Please - enable the data profiler by following the documentation - - - here. - -

- } - /> -
- ); - } - return (
-
- - - - - - -
+ + + + + + + + + + + + {overallSummery.map((summery) => ( @@ -211,15 +224,6 @@ const TableProfilerV1: FC = ({

))} - - - View more detail - -
; }; editorClass?: string; + onChange?: (value: string) => void; }) => { const defaultOptions = { tabSize: JSON_TAB_SIZE, @@ -75,6 +78,13 @@ const SchemaEditor = ({ ): void => { setInternalValue(getSchemaEditorValue(value)); }; + const handleEditorInputChange = ( + _editor: Editor, + _data: EditorChange, + value: string + ): void => { + onChange && onChange(getSchemaEditorValue(value)); + }; return (
@@ -83,6 +93,7 @@ const SchemaEditor = ({ options={defaultOptions} value={internalValue} onBeforeChange={handleEditorInputBeforeChange} + onChange={handleEditorInputChange} />
);