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
2025-08-26 18:06:03 +00:00 · 2022-08-27 13:11:35 +05:30 · 2022-08-27 13:11:35 +05:30 · 9abf63f476
commit 9abf63f476
parent f9a3f9988e
18 changed files with 321 additions and 171 deletions
--- 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
      }
    ],
--- 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"]')
--- 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
@ -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>
--- 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,
--- 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;
--- 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 (
-    <PageLayout
-      classes="tw-h-full tw-px-6"
+    <PageLayoutV1
+      className="tw-h-full tw-px-6"
      leftPanel={<GlobalSettingLeftPanel />}>
      <GlobalSettingRouter />
-    </PageLayout>
+    </PageLayoutV1>
  );
 };

--- 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 (
-    <div className="tw-mx-1 left-panel-container">
-      <Menu
-        className="global-setting-left-panel"
-        items={items}
-        mode="inline"
-        selectedKeys={[`${settingCategory}.${tab}`]}
-        onClick={onClick}
-      />
-    </div>
+    <Menu
+      className="global-setting-left-panel"
+      items={items}
+      mode="inline"
+      selectedKeys={[`${settingCategory}.${tab}`]}
+      onClick={onClick}
+    />
  );
 };

--- 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 (
-    <div className="tw-py-1" data-testid="services-container">
+    <Row data-testid="services-container">
      {serviceData.length ? (
        <Fragment>
-          <div className="tw-flex tw-justify-end" data-testid="header">
-            <NonAdminAction
-              position="bottom"
-              title={TITLE_FOR_NON_ADMIN_ACTION}>
-              <Button
-                className="tw-h-8 tw-rounded tw-mb-2"
-                data-testid="add-new-service-button"
-                disabled={!isAdminUser && !isAuthDisabled}
-                size="small"
-                theme="primary"
-                variant="contained"
-                onClick={handleAddServiceClick}>
-                Add New Service
-              </Button>
-            </NonAdminAction>
-          </div>
-          <Row data-testid="data-container" gutter={[16, 16]}>
-            {serviceData.map((service, index) => (
-              <Col key={index} span={6}>
-                <Card size="small" style={leftPanelAntCardStyle}>
-                  <div
-                    className="tw-flex tw-justify-between tw-text-grey-muted"
-                    data-testid="service-card">
-                    <div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
-                      <div>
-                        <Link
-                          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"
-                              data-testid={`service-name-${getEntityName(
-                                service
-                              )}`}
-                              title={getEntityName(service)}>
-                              {getEntityName(service)}
-                            </h6>
-                          </button>
-                        </Link>
-                        <div
-                          className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
-                          data-testid="service-description">
-                          {service.description ? (
-                            <RichTextEditorPreviewer
-                              enableSeeMoreVariant={false}
-                              markdown={service.description}
-                            />
-                          ) : (
-                            <span className="tw-no-description">
-                              No description
-                            </span>
-                          )}
+          <Col span={24}>
+            <div className="tw-flex tw-justify-end" data-testid="header">
+              <NonAdminAction
+                position="bottom"
+                title={TITLE_FOR_NON_ADMIN_ACTION}>
+                <Button
+                  className="tw-h-8 tw-rounded tw-mb-2"
+                  data-testid="add-new-service-button"
+                  disabled={!isAdminUser && !isAuthDisabled}
+                  size="small"
+                  theme="primary"
+                  variant="contained"
+                  onClick={handleAddServiceClick}>
+                  Add New Service
+                </Button>
+              </NonAdminAction>
+            </div>
+          </Col>
+          <Col span={24}>
+            <Row data-testid="data-container" gutter={[16, 16]}>
+              {serviceData.map((service, index) => (
+                <Col key={index} lg={8} xl={6}>
+                  <Card size="small" style={leftPanelAntCardStyle}>
+                    <div
+                      className="tw-flex tw-justify-between tw-text-grey-muted"
+                      data-testid="service-card">
+                      <div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
+                        <div>
+                          <Link
+                            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"
+                                data-testid={`service-name-${getEntityName(
+                                  service
+                                )}`}
+                                title={getEntityName(service)}>
+                                {getEntityName(service)}
+                              </h6>
+                            </button>
+                          </Link>
+                          <div
+                            className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
+                            data-testid="service-description">
+                            {service.description ? (
+                              <RichTextEditorPreviewer
+                                enableSeeMoreVariant={false}
+                                markdown={service.description}
+                              />
+                            ) : (
+                              <span className="tw-no-description">
+                                No description
+                              </span>
+                            )}
+                          </div>
+                          {getOptionalFields(service, serviceName)}
+                        </div>
+                        <div className="" data-testid="service-type">
+                          <label className="tw-mb-0">Type:</label>
+                          <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
+                            {service.serviceType}
+                          </span>
                        </div>
-                        {getOptionalFields(service, serviceName)}
                      </div>
-                      <div className="" data-testid="service-type">
-                        <label className="tw-mb-0">Type:</label>
-                        <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
-                          {service.serviceType}
-                        </span>
+                      <div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
+                        <div
+                          className="tw-flex tw-justify-end"
+                          data-testid="service-icon">
+                          {getServiceLogo(service.serviceType || '', 'tw-h-8')}
+                        </div>
                      </div>
                    </div>
-                    <div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
-                      <div
-                        className="tw-flex tw-justify-end"
-                        data-testid="service-icon">
-                        {getServiceLogo(service.serviceType || '', 'tw-h-8')}
-                      </div>
-                    </div>
-                  </div>
-                </Card>
-              </Col>
-            ))}
-          </Row>
+                  </Card>
+                </Col>
+              ))}
+            </Row>
+          </Col>
+
          {showPagination(paging) && (
            <NextPrevious
              currentPage={currentPage}
@ -175,7 +183,7 @@ const Services = ({
          </div>
        </div>
      )}
-    </div>
+    </Row>
  );
 };

--- 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<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>
  );
--- 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<WebhooksV1Props> = ({
  }

  return (
-    <Space align="start" className="tw-w-full webhook-page-container" size={20}>
-      <div className="tw-w-full">
-        <div className="tw-flex tw-items-center tw-justify-between">
-          <Select
-            showArrow
-            bordered={false}
-            className="tw-w-48 tw-mb-3 tw-text-body webhook-filter-select cursor-pointer"
-            mode="multiple"
-            options={statuses}
-            placeholder="Filter by status"
-            onChange={onStatusFilter}
-          />
-          {filteredData.length > 0 && (
-            <NonAdminAction
-              position="bottom"
-              title={TITLE_FOR_NON_ADMIN_ACTION}>
-              <Button
-                className={classNames('tw-h-8 tw-rounded tw-mb-3', {
-                  'tw-opacity-40': !isAdminUser && !isAuthDisabled,
-                })}
-                data-testid="add-webhook-button"
-                size="small"
-                theme="primary"
-                variant="contained"
-                onClick={onAddWebhook}>
-                Add {webhookType === WebhookType.Slack ? 'Slack' : 'Webhook'}
-              </Button>
-            </NonAdminAction>
-          )}
-        </div>
-        {filteredData.length ? (
-          <>
-            {filteredData.map((webhook, index) => (
-              <div className="tw-mb-3" key={index}>
-                <WebhookDataCard
-                  description={webhook.description}
-                  endpoint={webhook.endpoint}
-                  name={webhook.name}
-                  status={webhook.status}
-                  type={webhook.webhookType}
-                  onClick={onClickWebhook}
-                />
-              </div>
-            ))}
-            {Boolean(!isNil(paging.after) || !isNil(paging.before)) && (
-              <NextPrevious
-                currentPage={currentPage}
-                pageSize={PAGE_SIZE}
-                paging={paging}
-                pagingHandler={onPageChange}
-                totalCount={paging.total}
-              />
+    <Row gutter={[16, 16]}>
+      <Col flex="auto">
+        <Row gutter={[16, 16]}>
+          <Col xs={18}>
+            <Select
+              showArrow
+              bordered={false}
+              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-opacity-40': !isAdminUser && !isAuthDisabled,
+                    })}
+                    data-testid="add-webhook-button"
+                    size="small"
+                    theme="primary"
+                    variant="contained"
+                    onClick={onAddWebhook}>
+                    Add{' '}
+                    {webhookType === WebhookType.Slack ? 'Slack' : 'Webhook'}
+                  </Button>
+                </NonAdminAction>
+              )}
+            </Space>
+          </Col>
+          <Col xs={24}>
+            {filteredData.length ? (
+              <>
+                {filteredData.map((webhook, index) => (
+                  <div className="tw-mb-3" key={index}>
+                    <WebhookDataCard
+                      description={webhook.description}
+                      endpoint={webhook.endpoint}
+                      name={webhook.name}
+                      status={webhook.status}
+                      type={webhook.webhookType}
+                      onClick={onClickWebhook}
+                    />
+                  </div>
+                ))}
+                {Boolean(!isNil(paging.after) || !isNil(paging.before)) && (
+                  <NextPrevious
+                    currentPage={currentPage}
+                    pageSize={PAGE_SIZE}
+                    paging={paging}
+                    pagingHandler={onPageChange}
+                    totalCount={paging.total}
+                  />
+                )}
+              </>
+            ) : (
+              fetchErrorPlaceHolder('No webhooks found for applied filters')
            )}
-          </>
-        ) : (
-          fetchErrorPlaceHolder('No webhooks found for applied filters')
-        )}
-      </div>
-      <div className="webhook-right-panel">{rightPanel}</div>
-    </Space>
+          </Col>
+        </Row>
+      </Col>
+      <Col flex="312px">
+        <div className="webhook-right-panel">{rightPanel}</div>
+      </Col>
+    </Row>
  );
 };

--- 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<PageLayoutProp> = ({
  leftPanel,
  header,
--- a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx
+++ 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<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;
--- 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 (
-    <div data-testid="custom-entity-container">
-      <div className="global-settings-tabs">
+    <Row
+      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>
-      <div className="tw-mt-4">
+      </Col>
+      <Col span={24}>
        {activeTab === 2 && (
          <div data-testid="entity-schema">
            <SchemaEditor
@ -156,8 +160,8 @@ const CustomEntityDetailV1 = () => {
            />
          </div>
        )}
-      </div>
-    </div>
+      </Col>
+    </Row>
  );
 };

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

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