From 9abf63f476d4f1cc3b2e8aaa5ba3da4dbd9c63c2 Mon Sep 17 00:00:00 2001 From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com> Date: Sat, 27 Aug 2022 13:11:35 +0530 Subject: [PATCH] fix(ui): service page ui updates (#6927) * fix(ui): service page ui updates tag page left panel height issue * update layout for settings page * ignore long URL lint errors * update tests * fix cypress tests * fix cypress failing * fix cypress tests failure --- .../src/main/resources/ui/.eslintrc | 1 + .../resources/ui/cypress/common/common.js | 6 +- .../ui/src/assets/svg/ic-delete-colored.svg | 6 + .../components/AddWebhook/AddWebhook.test.tsx | 3 +- .../GlobalSetting/GlobalSetting.less | 1 - .../GlobalSetting/GlobalSetting.tsx | 8 +- .../GlobalSetting/GlobalSettingLeftPanel.tsx | 16 +- .../ui/src/components/Services/Services.tsx | 150 +++++++++--------- .../ui/src/components/TeamDetails/Teams.tsx | 13 +- .../ui/src/components/Webhooks/WebhooksV1.tsx | 135 +++++++++------- .../src/components/containers/PageLayout.tsx | 4 + .../components/containers/PageLayoutV1.tsx | 60 +++++++ .../CustomPropertiesPageV1.tsx | 16 +- .../GlobalSettingPage/GlobalSettingPage.tsx | 2 +- .../ui/src/pages/service/index.test.tsx | 6 + .../resources/ui/src/pages/service/index.tsx | 43 +++-- .../ui/src/styles/layout/page-layout.less | 11 ++ .../main/resources/ui/src/utils/SvgUtils.tsx | 11 ++ 18 files changed, 321 insertions(+), 171 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-delete-colored.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less diff --git a/openmetadata-ui/src/main/resources/ui/.eslintrc b/openmetadata-ui/src/main/resources/ui/.eslintrc index db5939d079c..47094f71586 100644 --- a/openmetadata-ui/src/main/resources/ui/.eslintrc +++ b/openmetadata-ui/src/main/resources/ui/.eslintrc @@ -67,6 +67,7 @@ "code": 200, "comments": 120, "ignoreTrailingComments": true, + "ignoreUrls": true, "tabWidth": 2 } ], diff --git a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js b/openmetadata-ui/src/main/resources/ui/cypress/common/common.js index 8cece468767..c5e243b659c 100644 --- a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js +++ b/openmetadata-ui/src/main/resources/ui/cypress/common/common.js @@ -187,15 +187,11 @@ export const deleteCreatedService = (typeOfService, service_Name) => { cy.wait(1000); - cy.get('[data-testid="manage-button"]') + cy.get('[data-testid="service-delete"]') .should('exist') .should('be.visible') .click(); - cy.get('[data-testid="delete-button"] > .tw-font-medium') - .should('exist') - .should('be.visible') - .click(); //Clicking on permanent delete radio button and checking the service name cy.get('[data-testid="hard-delete-option"]') diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-delete-colored.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-delete-colored.svg new file mode 100644 index 00000000000..dd8ddb72b82 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-delete-colored.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.test.tsx index 9ad94cf2e5d..0df1e7e575c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.test.tsx @@ -24,7 +24,7 @@ import { import React from 'react'; import { MemoryRouter } from 'react-router'; import { FormSubmitType } from '../../enums/form.enum'; -import { Webhook } from '../../generated/entity/events/webhook'; +import { Webhook, WebhookType } from '../../generated/entity/events/webhook'; import AddWebhook from './AddWebhook'; import { AddWebhookProps } from './AddWebhook.interface'; @@ -376,6 +376,7 @@ describe.skip('Test AddWebhook component', () => { data={mockData as Webhook} header="Edit Webhook" mode={FormSubmitType.EDIT} + webhookType={WebhookType.Generic} />, { wrapper: MemoryRouter, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less index 82d94f30ba6..ffefb5c8dd3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less @@ -20,7 +20,6 @@ .global-setting-left-panel.ant-menu-root.ant-menu-inline { background: @background-color; border: 0px; - overflow: hidden; .ant-menu-item::after { left: 0; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx index 0888214e89d..6470f8afd7c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx @@ -13,17 +13,17 @@ import React from 'react'; import GlobalSettingRouter from '../../router/GlobalSettingRouter'; -import PageLayout from '../containers/PageLayout'; +import PageLayoutV1 from '../containers/PageLayoutV1'; import './GlobalSetting.less'; import GlobalSettingLeftPanel from './GlobalSettingLeftPanel'; const GlobalSetting = () => { return ( - }> - + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx index f69b5a1d67d..2683c03a642 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx @@ -55,15 +55,13 @@ const GlobalSettingLeftPanel = () => { }; return ( -
- -
+ ); }; 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 9b151db57fb..3560fdc9f7c 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 @@ -64,82 +64,90 @@ const Services = ({ }; return ( -
+ {serviceData.length ? ( -
- - - -
- - {serviceData.map((service, index) => ( - - -
-
-
- - - -
- {service.description ? ( - - ) : ( - - No description - - )} + +
+ + + +
+ + + + {serviceData.map((service, index) => ( + + +
+
+
+ + + +
+ {service.description ? ( + + ) : ( + + No description + + )} +
+ {getOptionalFields(service, serviceName)} +
+
+ + + {service.serviceType} +
- {getOptionalFields(service, serviceName)}
-
- - - {service.serviceType} - +
+
+ {getServiceLogo(service.serviceType || '', 'tw-h-8')} +
-
-
- {getServiceLogo(service.serviceType || '', 'tw-h-8')} -
-
-
- - - ))} - + + + ))} + + + {showPagination(paging) && (
)} -
+ ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Teams.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Teams.tsx index bc8298b094a..46914bb2a6d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Teams.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Teams.tsx @@ -12,7 +12,7 @@ */ import { Button, Col, Row, Space, Switch } from 'antd'; -import React, { FC } from 'react'; +import React, { FC, useMemo } from 'react'; import { Team } from '../../generated/entity/teams/team'; import TeamHierarchy from './TeamHierarchy'; import './teams.less'; @@ -36,6 +36,15 @@ const Teams: FC = ({ onAddTeamClick, onTeamExpand, }) => { + const filteredData = useMemo( + () => + data.filter( + (d) => + (showDeletedTeam && d.deleted) || (!showDeletedTeam && !d.deleted) + ), + [data, showDeletedTeam] + ); + return ( @@ -54,7 +63,7 @@ const Teams: FC = ({ - + ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx index 13f816bb267..10e7936d3be 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx @@ -11,7 +11,7 @@ * limitations under the License. */ -import { Card, Select, Space } from 'antd'; +import { Card, Col, Row, Select, Space } from 'antd'; import classNames from 'classnames'; import { isNil } from 'lodash'; import React, { FC, useEffect, useMemo, useState } from 'react'; @@ -110,66 +110,81 @@ const WebhooksV1: FC = ({ } return ( - -
-
- + + + + {filteredData.length > 0 && ( + + + + )} + + + + {filteredData.length ? ( + <> + {filteredData.map((webhook, index) => ( +
+ +
+ ))} + {Boolean(!isNil(paging.after) || !isNil(paging.before)) && ( + + )} + + ) : ( + fetchErrorPlaceHolder('No webhooks found for applied filters') )} - - ) : ( - fetchErrorPlaceHolder('No webhooks found for applied filters') - )} -
-
{rightPanel}
- + + + + +
{rightPanel}
+ + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx index 66e769f39e9..53eb15aea73 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx @@ -32,6 +32,10 @@ export const leftPanelAntCardStyle = { marginLeft: '4px', }; +/** + * + * @deprecated Please use {@link https://github.com/open-metadata/OpenMetadata/blob/main/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx PageLayoutV1} + */ const PageLayout: FC = ({ leftPanel, header, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx new file mode 100644 index 00000000000..c39fa96462f --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx @@ -0,0 +1,60 @@ +/* + * Copyright 2021 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Col, Row } from 'antd'; +import React, { FC, HTMLAttributes, ReactNode } from 'react'; +import './../../styles/layout/page-layout.less'; + +interface PageLayoutProp extends HTMLAttributes { + leftPanel?: ReactNode; + header?: ReactNode; + rightPanel?: ReactNode; +} + +export const pageContainerStyles = { + height: '100%', + padding: '1rem', +}; + +const PageLayoutV1: FC = ({ + leftPanel, + children, + rightPanel, + className, +}: PageLayoutProp) => { + return ( + + {leftPanel && ( + +
+ {leftPanel} +
+ + )} + + {children} + + {rightPanel && {rightPanel}} + + ); +}; + +export default PageLayoutV1; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx index f7f5cd2e5be..6cc15309d02 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx @@ -11,6 +11,7 @@ * limitations under the License. */ +import { Col, Row } from 'antd'; import { AxiosError } from 'axios'; import { compare } from 'fast-json-patch'; import { isUndefined } from 'lodash'; @@ -120,15 +121,18 @@ const CustomEntityDetailV1 = () => { } return ( -
-
+ + -
-
+ + {activeTab === 2 && (
{ />
)} -
-
+ + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx index d6c5aff6f2e..2c0d7eaef36 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx @@ -17,7 +17,7 @@ import GlobalSetting from '../../components/GlobalSetting/GlobalSetting'; const GlobalSettingPage = () => { return ( - + ); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.test.tsx index d3d30d5ecf4..6a3b7761194 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.test.tsx @@ -238,6 +238,12 @@ jest.mock('../../utils/TableUtils', () => ({ getUsagePercentile: jest.fn(), })); +jest.mock('antd', () => ({ + ...jest.requireActual('antd'), + Row: jest.fn().mockImplementation(({ children }) =>

{children}

), + Col: jest.fn().mockImplementation(({ children }) =>

{children}

), +})); + jest.mock('../../utils/ToastUtils', () => ({ showErrorToast: jest.fn(), })); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx index 1456bc41c94..b08840c4127 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx @@ -11,7 +11,7 @@ * limitations under the License. */ -import { Space } from 'antd'; +import { Col, Row, Space } from 'antd'; import { AxiosError } from 'axios'; import classNames from 'classnames'; import { isNil, isUndefined, startCase } from 'lodash'; @@ -35,8 +35,8 @@ import { getPipelines } from '../../axiosAPIs/pipelineAPI'; import { getServiceByFQN, updateService } from '../../axiosAPIs/serviceAPI'; import { getTopics } from '../../axiosAPIs/topicsAPI'; import { Button } from '../../components/buttons/Button/Button'; +import DeleteWidgetModal from '../../components/common/DeleteWidget/DeleteWidgetModal'; import Description from '../../components/common/description/Description'; -import ManageButton from '../../components/common/entityPageInfo/ManageButton/ManageButton'; import EntitySummaryDetails from '../../components/common/EntitySummaryDetails/EntitySummaryDetails'; import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder'; import ErrorPlaceHolderIngestion from '../../components/common/error-with-placeholder/ErrorPlaceHolderIngestion'; @@ -45,7 +45,6 @@ import RichTextEditorPreviewer from '../../components/common/rich-text-editor/Ri import TabsPane from '../../components/common/TabsPane/TabsPane'; import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component'; import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface'; -import PageContainer from '../../components/containers/PageContainer'; import Ingestion from '../../components/Ingestion/Ingestion.component'; import Loader from '../../components/Loader/Loader'; import ServiceConnectionDetails from '../../components/ServiceConnectionDetails/ServiceConnectionDetails.component'; @@ -89,6 +88,7 @@ import { setServiceSchemaCount, setServiceTableCount, } from '../../utils/ServiceUtils'; +import { IcDeleteColored } from '../../utils/SvgUtils'; import { getEntityLink, getUsagePercentile } from '../../utils/TableUtils'; import { showErrorToast } from '../../utils/ToastUtils'; @@ -128,6 +128,8 @@ const ServicePage: FunctionComponent = () => { const [schemaCount, setSchemaCount] = useState(0); const [tableCount, setTableCount] = useState(0); + const [deleteWidgetVisible, setDeleteWidgetVisible] = useState(false); + const getCountLabel = () => { switch (serviceName) { case ServiceCategory.DASHBOARD_SERVICES: @@ -880,8 +882,12 @@ const ServicePage: FunctionComponent = () => { goToEditConnection(); }; + const handleDelete = () => { + setDeleteWidgetVisible(true); + }; + return ( - <> + {isLoading ? ( ) : isError ? ( @@ -889,7 +895,7 @@ const ServicePage: FunctionComponent = () => { {getEntityMissingError(serviceName as string, serviceFQN)} ) : ( - +
@@ -898,7 +904,21 @@ const ServicePage: FunctionComponent = () => { className="tw-justify-between" style={{ width: '100%' }}> - + + Delete + + { schemaCount, tableCount )} - entityFQN={serviceFQN} entityId={serviceDetails?.id} entityName={serviceDetails?.name || ''} entityType={serviceName?.slice(0, -1)} + visible={deleteWidgetVisible} + onCancel={() => setDeleteWidgetVisible(false)} /> -
+
{extraInfo.map((info, index) => ( {
{
- + )} - + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less new file mode 100644 index 00000000000..0f267750dc5 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less @@ -0,0 +1,11 @@ +.page-layout-v1-vertical-scroll { + // 64 header + ( 16 + 16 )spacing Y + height: calc(100vh - 96px); + overflow-y: auto; +} + +.page-layout-v1-left-panel { + border: 1px rgb(221, 227, 234) solid; + border-radius: '4px'; + box-shadow: 1px 1px 8px rgb(0 0 0 / 6%); +} diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx index ddc61c01f96..ab4fae3c1d5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx @@ -66,6 +66,9 @@ import IconGithubStar from '../assets/svg/github-star.svg'; import IconAllApplication from '../assets/svg/ic-all-application.svg'; import IconCheckCircle from '../assets/svg/ic-check-circle.svg'; import IconCommentGrey from '../assets/svg/ic-comment-grey.svg'; +import IconDeleteColored, { + ReactComponent as IcDeleteColored, +} from '../assets/svg/ic-delete-colored.svg'; import IconDelete from '../assets/svg/ic-delete.svg'; import IconDownArrow from '../assets/svg/ic-down-arrow.svg'; import IconEditLineageColor from '../assets/svg/ic-edit-lineage-colored.svg'; @@ -336,6 +339,7 @@ export const Icons = { POLICIES: 'policies', INFO_SECONDARY: 'info-secondary', ICON_REMOVE: 'icon-remove', + DELETE_COLORED: 'icon-delete-colored', IC_EDIT_PRIMARY: 'ic-edit-primary', }; @@ -990,6 +994,11 @@ const SVGIcons: FunctionComponent = ({ break; + case Icons.DELETE_COLORED: + IconComponent = IconDeleteColored; + + break; + default: IconComponent = null; @@ -1009,3 +1018,5 @@ const SVGIcons: FunctionComponent = ({ }; export default SVGIcons; + +export { IcDeleteColored };