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

openmetadata-ui/src/main/resources/ui/.eslintrc

@@ -67,6 +67,7 @@
         "code": 200,
         "comments": 120,
         "ignoreTrailingComments": true,
+        "ignoreUrls": true,
         "tabWidth": 2
       }
     ],

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"]')

openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-delete-colored.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1843 2.8125H16.6687V2.10938C16.6687 0.946266 15.7224 0 14.5593 0H8.93433C7.77122 0 6.82495 0.946266 6.82495 2.10938V2.8125H3.30933C2.14622 2.8125 1.19995 3.75877 1.19995 4.92188C1.19995 5.856 1.8105 6.64973 2.65331 6.9263L3.90745 22.0658C3.99778 23.1504 4.92112 24 6.00951 24H17.4841C18.5726 24 19.4959 23.1504 19.5863 22.0654L20.8403 6.92625C21.6832 6.64973 22.2937 5.856 22.2937 4.92188C22.2937 3.75877 21.3474 2.8125 20.1843 2.8125ZM8.2312 2.10938C8.2312 1.72167 8.54662 1.40625 8.93433 1.40625H14.5593C14.947 1.40625 15.2625 1.72167 15.2625 2.10938V2.8125H8.2312V2.10938ZM18.1848 21.949C18.1547 22.3105 17.847 22.5938 17.4841 22.5938H6.00951C5.64675 22.5938 5.33897 22.3105 5.30892 21.9494L4.07311 7.03125H19.4205L18.1848 21.949ZM20.1843 5.625H3.30933C2.92162 5.625 2.6062 5.30958 2.6062 4.92188C2.6062 4.53417 2.92162 4.21875 3.30933 4.21875H20.1843C20.572 4.21875 20.8875 4.53417 20.8875 4.92188C20.8875 5.30958 20.572 5.625 20.1843 5.625Z" fill="currentColor"/>
+<path d="M9.18619 20.4409L8.48307 9.09715C8.45902 8.70954 8.12354 8.41474 7.7378 8.43888C7.3502 8.46293 7.05549 8.79659 7.07949 9.18415L7.78262 20.5279C7.80573 20.9007 8.11529 21.1876 8.48373 21.1876C8.89093 21.1876 9.21118 20.8446 9.18619 20.4409Z" fill="currentColor"/>
+<path d="M12 8.4375C11.6117 8.4375 11.2969 8.75231 11.2969 9.14062V20.4844C11.2969 20.8727 11.6117 21.1875 12 21.1875C12.3883 21.1875 12.7031 20.8727 12.7031 20.4844V9.14062C12.7031 8.75231 12.3883 8.4375 12 8.4375Z" fill="currentColor"/>
+<path d="M16.2622 8.43887C15.8755 8.41483 15.541 8.70953 15.517 9.09714L14.8139 20.4409C14.7899 20.8284 15.0846 21.1621 15.4722 21.1861C15.86 21.2101 16.1934 20.9153 16.2174 20.5279L16.9206 9.18414C16.9446 8.79653 16.6499 8.46287 16.2622 8.43887Z" fill="currentColor"/>
+</svg>

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,

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;

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 (
-    <PageLayout
+    <PageLayoutV1
-      classes="tw-h-full tw-px-6"
+      className="tw-h-full tw-px-6"
       leftPanel={<GlobalSettingLeftPanel />}>
       <GlobalSettingRouter />
-    </PageLayout>
+    </PageLayoutV1>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx

@@ -55,7 +55,6 @@ const GlobalSettingLeftPanel = () => {
   };
 
   return (
-    <div className="tw-mx-1 left-panel-container">
     <Menu
       className="global-setting-left-panel"
       items={items}
@@ -63,7 +62,6 @@ const GlobalSettingLeftPanel = () => {
       selectedKeys={[`${settingCategory}.${tab}`]}
       onClick={onClick}
     />
-    </div>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx

@@ -64,9 +64,10 @@ const Services = ({
   };
 
   return (
-    <div className="tw-py-1" data-testid="services-container">
+    <Row data-testid="services-container">
       {serviceData.length ? (
         <Fragment>
+          <Col span={24}>
             <div className="tw-flex tw-justify-end" data-testid="header">
               <NonAdminAction
                 position="bottom"
@@ -83,9 +84,11 @@ const Services = ({
                 </Button>
               </NonAdminAction>
             </div>
+          </Col>
+          <Col span={24}>
             <Row data-testid="data-container" gutter={[16, 16]}>
               {serviceData.map((service, index) => (
-              <Col key={index} span={6}>
+                <Col key={index} lg={8} xl={6}>
                   <Card size="small" style={leftPanelAntCardStyle}>
                     <div
                       className="tw-flex tw-justify-between tw-text-grey-muted"
@@ -93,7 +96,10 @@ const Services = ({
                       <div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
                         <div>
                           <Link
-                          to={getServiceDetailsPath(service.name, serviceName)}>
+                            to={getServiceDetailsPath(
+                              service.name,
+                              serviceName
+                            )}>
                             <button>
                               <h6
                                 className="tw-text-base tw-text-grey-body tw-font-medium tw-text-left tw-truncate tw-w-48"
@@ -140,6 +146,8 @@ const Services = ({
                 </Col>
               ))}
             </Row>
+          </Col>
+
           {showPagination(paging) && (
             <NextPrevious
               currentPage={currentPage}
@@ -175,7 +183,7 @@ const Services = ({
           </div>
         </div>
       )}
-    </div>
+    </Row>
   );
 };
 

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<TeamsProps> = ({
   onAddTeamClick,
   onTeamExpand,
 }) => {
+  const filteredData = useMemo(
+    () =>
+      data.filter(
+        (d) =>
+          (showDeletedTeam && d.deleted) || (!showDeletedTeam && !d.deleted)
+      ),
+    [data, showDeletedTeam]
+  );
+
   return (
     <Row className="team-list-container" gutter={[16, 16]}>
       <Col span={24}>
@@ -54,7 +63,7 @@ const Teams: FC<TeamsProps> = ({
         </Space>
       </Col>
       <Col span={24}>
-        <TeamHierarchy data={data} onTeamExpand={onTeamExpand} />
+        <TeamHierarchy data={filteredData} onTeamExpand={onTeamExpand} />
       </Col>
     </Row>
   );

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,24 +110,32 @@ const WebhooksV1: FC<WebhooksV1Props> = ({
   }
 
   return (
-    <Space align="start" className="tw-w-full webhook-page-container" size={20}>
+    <Row gutter={[16, 16]}>
-      <div className="tw-w-full">
+      <Col flex="auto">
-        <div className="tw-flex tw-items-center tw-justify-between">
+        <Row gutter={[16, 16]}>
+          <Col xs={18}>
             <Select
               showArrow
               bordered={false}
-            className="tw-w-48 tw-mb-3 tw-text-body webhook-filter-select cursor-pointer"
+              className="tw-text-body webhook-filter-select cursor-pointer"
               mode="multiple"
               options={statuses}
               placeholder="Filter by status"
+              style={{ minWidth: '148px' }}
               onChange={onStatusFilter}
             />
+          </Col>
+          <Col xs={6}>
+            <Space
+              align="center"
+              className="tw-w-full tw-justify-end"
+              size={16}>
               {filteredData.length > 0 && (
                 <NonAdminAction
                   position="bottom"
                   title={TITLE_FOR_NON_ADMIN_ACTION}>
                   <Button
-                className={classNames('tw-h-8 tw-rounded tw-mb-3', {
+                    className={classNames('tw-h-8 tw-rounded ', {
                       'tw-opacity-40': !isAdminUser && !isAuthDisabled,
                     })}
                     data-testid="add-webhook-button"
@@ -135,11 +143,14 @@ const WebhooksV1: FC<WebhooksV1Props> = ({
                     theme="primary"
                     variant="contained"
                     onClick={onAddWebhook}>
-                Add {webhookType === WebhookType.Slack ? 'Slack' : 'Webhook'}
+                    Add{' '}
+                    {webhookType === WebhookType.Slack ? 'Slack' : 'Webhook'}
                   </Button>
                 </NonAdminAction>
               )}
-        </div>
+            </Space>
+          </Col>
+          <Col xs={24}>
             {filteredData.length ? (
               <>
                 {filteredData.map((webhook, index) => (
@@ -167,9 +178,13 @@ const WebhooksV1: FC<WebhooksV1Props> = ({
             ) : (
               fetchErrorPlaceHolder('No webhooks found for applied filters')
             )}
-      </div>
+          </Col>
+        </Row>
+      </Col>
+      <Col flex="312px">
         <div className="webhook-right-panel">{rightPanel}</div>
-    </Space>
+      </Col>
+    </Row>
   );
 };
 

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<PageLayoutProp> = ({
   leftPanel,
   header,

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<HTMLDivElement> {
+  leftPanel?: ReactNode;
+  header?: ReactNode;
+  rightPanel?: ReactNode;
+}
+
+export const pageContainerStyles = {
+  height: '100%',
+  padding: '1rem',
+};
+
+const PageLayoutV1: FC<PageLayoutProp> = ({
+  leftPanel,
+  children,
+  rightPanel,
+  className,
+}: PageLayoutProp) => {
+  return (
+    <Row className={className} gutter={[16, 16]} style={pageContainerStyles}>
+      {leftPanel && (
+        <Col flex="312px">
+          <div className="page-layout-v1-left-panel page-layout-v1-vertical-scroll">
+            {leftPanel}
+          </div>
+        </Col>
+      )}
+      <Col
+        className="page-layout-v1-center page-layout-v1-vertical-scroll"
+        flex={
+          leftPanel && rightPanel
+            ? 'calc(100% - 624px)'
+            : leftPanel || rightPanel
+            ? 'calc(100% - 312px)'
+            : '1080px'
+        }>
+        {children}
+      </Col>
+      {rightPanel && <Col span={6}>{rightPanel}</Col>}
+    </Row>
+  );
+};
+
+export default PageLayoutV1;

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 (
-    <div data-testid="custom-entity-container">
+    <Row
-      <div className="global-settings-tabs">
+      className="tw-my-2"
+      data-testid="custom-entity-container"
+      gutter={[16, 16]}>
+      <Col className="global-settings-tabs" span={24}>
         <TabsPane
           activeTab={activeTab}
           setActiveTab={onTabChange}
           tabs={tabs}
         />
-      </div>
+      </Col>
-      <div className="tw-mt-4">
+      <Col span={24}>
         {activeTab === 2 && (
           <div data-testid="entity-schema">
             <SchemaEditor
@@ -156,8 +160,8 @@ const CustomEntityDetailV1 = () => {
             />
           </div>
         )}
-      </div>
+      </Col>
-    </div>
+    </Row>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx

@@ -17,7 +17,7 @@ import GlobalSetting from '../../components/GlobalSetting/GlobalSetting';
 
 const GlobalSettingPage = () => {
   return (
-    <PageContainerV1 className="tw-pt-4">
+    <PageContainerV1>
       <GlobalSetting />
     </PageContainerV1>
   );

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 }) => <p>{children}</p>),
+  Col: jest.fn().mockImplementation(({ children }) => <p>{children}</p>),
+}));
+
 jest.mock('../../utils/ToastUtils', () => ({
   showErrorToast: jest.fn(),
 }));

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<number>(0);
   const [tableCount, setTableCount] = useState<number>(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 (
-    <>
+    <Row>
       {isLoading ? (
         <Loader />
       ) : isError ? (
@@ -889,7 +895,7 @@ const ServicePage: FunctionComponent = () => {
           {getEntityMissingError(serviceName as string, serviceFQN)}
         </ErrorPlaceHolder>
       ) : (
-        <PageContainer>
+        <Col span={24}>
           <div
             className="tw-px-6 tw-w-full tw-h-full tw-flex tw-flex-col"
             data-testid="service-page">
@@ -898,7 +904,21 @@ const ServicePage: FunctionComponent = () => {
               className="tw-justify-between"
               style={{ width: '100%' }}>
               <TitleBreadcrumb titleLinks={slashedTableName} />
-              <ManageButton
+              <Button
+                data-testid="service-delete"
+                size="small"
+                theme="primary"
+                variant="outlined"
+                onClick={handleDelete}>
+                <IcDeleteColored
+                  className="tw-mr-1.5"
+                  height={14}
+                  viewBox="0 0 24 24"
+                  width={14}
+                />
+                Delete
+              </Button>
+              <DeleteWidgetModal
                 isRecursiveDelete
                 allowSoftDelete={false}
                 deleteMessage={getDeleteEntityMessage(
@@ -907,14 +927,15 @@ const ServicePage: FunctionComponent = () => {
                   schemaCount,
                   tableCount
                 )}
-                entityFQN={serviceFQN}
                 entityId={serviceDetails?.id}
                 entityName={serviceDetails?.name || ''}
                 entityType={serviceName?.slice(0, -1)}
+                visible={deleteWidgetVisible}
+                onCancel={() => setDeleteWidgetVisible(false)}
               />
             </Space>
 
-            <div className="tw-flex tw-gap-1 tw-mb-2 tw-mt-1 tw-ml-7 tw-flex-wrap">
+            <div className="tw-flex tw-gap-1 tw-mb-2 tw-mt-1 tw-flex-wrap">
               {extraInfo.map((info, index) => (
                 <span className="tw-flex" key={index}>
                   <EntitySummaryDetails
@@ -932,7 +953,7 @@ const ServicePage: FunctionComponent = () => {
             </div>
 
             <div
-              className="tw-my-2 tw-ml-2"
+              className="tw-my-2 tw--ml-5"
               data-testid="description-container">
               <Description
                 description={description || ''}
@@ -1057,9 +1078,9 @@ const ServicePage: FunctionComponent = () => {
               </div>
             </div>
           </div>
-        </PageContainer>
+        </Col>
       )}
-    </>
+    </Row>
   );
 };
 

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%);
+}

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<Props> = ({
 
       break;
 
+    case Icons.DELETE_COLORED:
+      IconComponent = IconDeleteColored;
+
+      break;
+
     default:
       IconComponent = null;
 
@@ -1009,3 +1018,5 @@ const SVGIcons: FunctionComponent<Props> = ({
 };
 
 export default SVGIcons;
+
+export { IcDeleteColored };