From ba0f55d7c333eee158adeccb124b6ac38c3b4ef8 Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Tue, 20 Dec 2022 11:12:51 +0530 Subject: [PATCH] UI : Added header and sub-headers for the page (#9378) * Added subheaders for the page * remove header from team and change setting button * changes as per comments --- .../ui/src/assets/svg/ic-settings-primery.svg | 12 +- .../BotListV1/BotListV1.component.tsx | 22 +- .../ui/src/components/Services/Services.tsx | 32 ++- .../TableProfiler/TableProfilerV1.tsx | 203 +++++++++--------- .../ui/src/components/UserList/UserListV1.tsx | 25 ++- .../ManageButton/ManageButton.less | 5 + .../header/PageHeader.component.tsx | 36 ++++ .../components/header/PageHeader.style.less | 30 +++ .../ui/src/constants/PageHeaders.constant.ts | 117 ++++++++++ .../CustomPropertiesPageV1.tsx | 25 ++- .../PoliciesListPage/PoliciesListPage.tsx | 5 +- .../RolesPage/RolesListPage/RolesListPage.tsx | 5 +- .../src/pages/UserListPage/UserListPageV1.tsx | 1 + .../src/main/resources/ui/src/styles/app.less | 5 - 14 files changed, 395 insertions(+), 128 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/header/PageHeader.component.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/header/PageHeader.style.less create mode 100644 openmetadata-ui/src/main/resources/ui/src/constants/PageHeaders.constant.ts diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-settings-primery.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-settings-primery.svg index 1ec991a98b2..6c33d1b45b8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-settings-primery.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-settings-primery.svg @@ -1,4 +1,12 @@ + - - + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx index fa0a0073646..d126cef0c5c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx @@ -25,6 +25,7 @@ import { PAGE_SIZE_LARGE, } from '../../constants/constants'; import { BOTS_DOCS } from '../../constants/docs.constants'; +import { PAGE_HEADERS } from '../../constants/PageHeaders.constant'; import { EntityType } from '../../enums/entity.enum'; import { Bot, ProviderType } from '../../generated/entity/bot'; import { Include } from '../../generated/type/include'; @@ -38,6 +39,7 @@ import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder' import NextPrevious from '../common/next-previous/NextPrevious'; import RichTextEditorPreviewer from '../common/rich-text-editor/RichTextEditorPreviewer'; import Searchbar from '../common/searchbar/Searchbar'; +import PageHeader from '../header/PageHeader.component'; import Loader from '../Loader/Loader'; import { BotListV1Props } from './BotListV1.interfaces'; @@ -234,15 +236,11 @@ const BotListV1 = ({ ) : ( - - + + - + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx index ebd42258a6f..72c1f258eb9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx @@ -11,9 +11,9 @@ * limitations under the License. */ -import { Button as ButtonAntd, Card, Col, Row, Tooltip } from 'antd'; +import { Button as ButtonAntd, Card, Col, Row, Space, Tooltip } from 'antd'; import { isEmpty } from 'lodash'; -import React, { Fragment, useMemo } from 'react'; +import React, { Fragment, useCallback, useMemo } from 'react'; import { Link, useHistory } from 'react-router-dom'; import { useAuthContext } from '../../authentication/auth-provider/AuthProvider'; import { @@ -22,6 +22,7 @@ import { } from '../../constants/constants'; import { CONNECTORS_DOCS } from '../../constants/docs.constants'; import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil'; +import { PAGE_HEADERS } from '../../constants/PageHeaders.constant'; import { servicesDisplayName } from '../../constants/Services.constant'; import { ServiceCategory } from '../../enums/service.enum'; import { Operation } from '../../generated/entity/policies/policy'; @@ -43,6 +44,7 @@ import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder' import NextPrevious from '../common/next-previous/NextPrevious'; import RichTextEditorPreviewer from '../common/rich-text-editor/RichTextEditorPreviewer'; import { leftPanelAntCardStyle } from '../containers/PageLayout'; +import PageHeader from '../header/PageHeader.component'; import { usePermissionProvider } from '../PermissionProvider/PermissionProvider'; interface ServicesProps { @@ -79,12 +81,34 @@ const Services = ({ [permissions, serviceName] ); + const getServicePageHeader = useCallback(() => { + switch (serviceName) { + case ServiceCategory.DATABASE_SERVICES: + return PAGE_HEADERS.DATABASES_SERVICES; + case ServiceCategory.DASHBOARD_SERVICES: + return PAGE_HEADERS.DASHBOARD_SERVICES; + case ServiceCategory.MESSAGING_SERVICES: + return PAGE_HEADERS.MESSAGING_SERVICES; + case ServiceCategory.METADATA_SERVICES: + return PAGE_HEADERS.METADATA_SERVICES; + case ServiceCategory.ML_MODEL_SERVICES: + return PAGE_HEADERS.ML_MODELS_SERVICES; + case ServiceCategory.PIPELINE_SERVICES: + return PAGE_HEADERS.PIPELINES_SERVICES; + default: + return PAGE_HEADERS.DATABASES_SERVICES; + } + }, [serviceName]); + return ( {serviceData.length ? ( -
+ + -
+ 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 bb20a63aa1c..0261690df38 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 @@ -26,18 +26,20 @@ import { import { SwitchChangeEventHandler } from 'antd/lib/switch'; import { AxiosError } from 'axios'; import classNames from 'classnames'; -import { isUndefined } from 'lodash'; +import { isUndefined, map } from 'lodash'; import { SelectableOption } from 'Models'; import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Link, useParams } from 'react-router-dom'; import { ReactComponent as ColumnProfileIcon } from '../../assets/svg/column-profile.svg'; import { ReactComponent as DataQualityIcon } from '../../assets/svg/data-quality.svg'; +import { ReactComponent as SettingIcon } from '../../assets/svg/ic-settings-primery.svg'; import { ReactComponent as NoDataIcon } from '../../assets/svg/no-data-icon.svg'; import { ReactComponent as TableProfileIcon } from '../../assets/svg/table-profile.svg'; import { getLatestTableProfileByFqn } from '../../axiosAPIs/tableAPI'; import { getListTestCase, ListTestCaseParams } from '../../axiosAPIs/testAPI'; import { API_RES_MAX_SIZE } from '../../constants/constants'; +import { PAGE_HEADERS } from '../../constants/PageHeaders.constant'; import { INITIAL_TEST_RESULT_SUMMARY, PROFILER_FILTER_RANGE, @@ -53,9 +55,9 @@ import { } from '../../utils/CommonUtils'; import { updateTestResults } from '../../utils/DataQualityAndProfilerUtils'; import { getAddDataQualityTableTestPath } from '../../utils/RouterUtils'; -import SVGIcons, { Icons } from '../../utils/SvgUtils'; import { generateEntityLink } from '../../utils/TableUtils'; import { showErrorToast } from '../../utils/ToastUtils'; +import PageHeader from '../header/PageHeader.component'; import DataQualityTab from '../ProfilerDashboard/component/DataQualityTab'; import { ProfilerDashboardTab } from '../ProfilerDashboard/profilerDashboard.interface'; import ColumnProfileTable from './Component/ColumnProfileTable'; @@ -110,13 +112,21 @@ const TableProfilerV1: FC = ({ permissions }) => { return testCaseStatus; }, []); + const getPageHeader = useMemo(() => { + if (isProfiler) { + return PAGE_HEADERS.TABLE_PROFILE; + } else if (isDataQuality) { + return PAGE_HEADERS.DATA_QUALITY; + } else { + return PAGE_HEADERS.COLUMN_PROFILE; + } + }, [isProfiler, isDataQuality]); + const testCaseTypeOption = useMemo(() => { - const testCaseStatus: SelectableOption[] = Object.entries(TestType).map( - ([key, value]) => ({ - label: key, - value: value, - }) - ); + const testCaseStatus: SelectableOption[] = map(TestType, (value, key) => ({ + label: key, + value: value, + })); testCaseStatus.unshift({ label: t('label.all'), value: '', @@ -321,100 +331,97 @@ const TableProfilerV1: FC = ({ permissions }) => { - - {isDataQuality && ( - <> - - - - + + + + + + + {isDataQuality && ( + <> + + + + + + + + )} + + {isProfiler && ( - - - )} + )} - {isProfiler && ( -