From fae21c5a76551d21bb0ee9aa6dc5bd3318b1cef5 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Sat, 4 Oct 2025 11:18:45 +0530 Subject: [PATCH] feat: Refactor QualityTab component layout and enhance test case filtering options --- .../QualityTab/QualityTab.component.tsx | 204 ++++++------------ 1 file changed, 60 insertions(+), 144 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/QualityTab/QualityTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/QualityTab/QualityTab.component.tsx index fd74c72600f..70854974908 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/QualityTab/QualityTab.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/QualityTab/QualityTab.component.tsx @@ -10,30 +10,17 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { DownOutlined } from '@ant-design/icons'; -import { Grid } from '@mui/material'; -import { - Button, - Col, - Dropdown, - Form, - Row, - Select, - Space, - Tabs, - Tooltip, -} from 'antd'; +import { Grid, Stack } from '@mui/material'; +import { Col, Form, Row, Select, Space, Tabs } from 'antd'; import { isEmpty } from 'lodash'; import { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { ReactComponent as AddItemIcon } from '../../../../../assets/svg/add-item-icon.svg'; -import { ReactComponent as SettingIcon } from '../../../../../assets/svg/ic-settings-primery.svg'; import { ReactComponent as RedCircleIcon } from '../../../../../assets/svg/red-circle-with-dash.svg'; import { ReactComponent as SuccessTicketIcon } from '../../../../../assets/svg/success-ticket-with-check.svg'; import { ReactComponent as YellowCalendarIcon } from '../../../../../assets/svg/yellow-calendar.icon.svg'; import { INITIAL_PAGING_VALUE } from '../../../../../constants/constants'; -import { PAGE_HEADERS } from '../../../../../constants/PageHeaders.constant'; import { DEFAULT_SORT_ORDER, TEST_CASE_STATUS_OPTION, @@ -47,7 +34,6 @@ import { TestCaseType } from '../../../../../enums/TestSuite.enum'; import { Operation } from '../../../../../generated/entity/policies/policy'; import { PipelineType } from '../../../../../generated/entity/services/ingestionPipelines/ingestionPipeline'; import { TestCaseStatus } from '../../../../../generated/tests/testCase'; -import LimitWrapper from '../../../../../hoc/LimitWrapper'; import useCustomLocation from '../../../../../hooks/useCustomLocation/useCustomLocation'; import { getIngestionPipelines } from '../../../../../rest/ingestionPipelineAPI'; import { ListTestCaseParamsBySearch } from '../../../../../rest/testAPI'; @@ -63,9 +49,7 @@ import { NextPreviousProps } from '../../../../common/NextPrevious/NextPrevious. import Searchbar from '../../../../common/SearchBarComponent/SearchBar.component'; import SummaryCardV1 from '../../../../common/SummaryCard/SummaryCardV1'; import TabsLabel from '../../../../common/TabsLabel/TabsLabel.component'; -import { TestLevel } from '../../../../DataQuality/AddDataQualityTest/components/TestCaseFormV1.interface'; import TestSuitePipelineTab from '../../../../DataQuality/TestSuite/TestSuitePipelineTab/TestSuitePipelineTab.component'; -import PageHeader from '../../../../PageHeader/PageHeader.component'; import DataQualityTab from '../../DataQualityTab/DataQualityTab'; import { TableProfilerTab } from '../../ProfilerDashboard/profilerDashboard.interface'; import { useTableProfiler } from '../TableProfilerProvider'; @@ -77,12 +61,9 @@ export const QualityTab = () => { onTestCaseUpdate, allTestCases, isTestsLoading, - isTableDeleted, testCasePaging, table, testCaseSummary, - onSettingButtonClick, - onTestCaseDrawerOpen, } = useTableProfiler(); const { getResourceLimit } = useLimitStore(); @@ -95,7 +76,7 @@ export const QualityTab = () => { showPagination, } = testCasePaging; - const { editTest, editDataProfile } = useMemo(() => { + const { editTest } = useMemo(() => { return { editTest: permissions && @@ -221,6 +202,28 @@ export const QualityTab = () => { : undefined; }, [table]); + const handleTestCaseStatusChange = (value: TestCaseStatus) => { + if (value !== selectedTestCaseStatus) { + setSelectedTestCaseStatus(value); + fetchAllTests({ + testCaseType: selectedTestType, + testCaseStatus: isEmpty(value) ? undefined : value, + }); + } + }; + + const handleTestCaseTypeChange = (value: TestCaseType) => { + if (value !== selectedTestType) { + setSelectedTestType(value); + fetchAllTests({ + testCaseType: value, + testCaseStatus: isEmpty(selectedTestCaseStatus) + ? undefined + : selectedTestCaseStatus, + }); + } + }; + const tabs = useMemo( () => [ { @@ -243,6 +246,26 @@ export const QualityTab = () => { onSearch={handleSearchTestCase} /> + +
+ + + + + +
+ { @@ -301,32 +324,6 @@ export const QualityTab = () => { ] ); - const handleTestCaseStatusChange = (value: TestCaseStatus) => { - if (value !== selectedTestCaseStatus) { - setSelectedTestCaseStatus(value); - fetchAllTests({ - testCaseType: selectedTestType, - testCaseStatus: isEmpty(value) ? undefined : value, - }); - } - }; - - const handleTestCaseTypeChange = (value: TestCaseType) => { - if (value !== selectedTestType) { - setSelectedTestType(value); - fetchAllTests({ - testCaseType: value, - testCaseStatus: isEmpty(selectedTestCaseStatus) - ? undefined - : selectedTestCaseStatus, - }); - } - }; - - const handleAddTestClick = (type: TestLevel) => { - onTestCaseDrawerOpen(type); - }; - const handleTabChange = () => { navigate( { @@ -337,22 +334,6 @@ export const QualityTab = () => { ); }; - const addButtonContent = useMemo( - () => [ - { - label: , - key: '1', - onClick: () => handleAddTestClick(TestLevel.TABLE), - }, - { - label: , - key: '2', - onClick: () => handleAddTestClick(TestLevel.COLUMN), - }, - ], - [] - ); - if (permissions && !permissions?.ViewTests) { return ( { } return ( - - - - - - - -
- - - - + + + {totalTestCaseSummary?.map((summary) => ( + + + + ))} + - {editTest && !isTableDeleted && ( - - - - - - - - )} - - {editDataProfile && ( - - - - )} - -
- - - - - - {totalTestCaseSummary?.map((summary) => ( - - - - ))} - - - - - - + + ); };