From 4fdf14f2da256223ee45ea0b25ad3aae477a7718 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 21 Dec 2022 09:52:51 +0530
Subject: [PATCH] UI : Fix the missing drag icon from Teams Table (#9429)

* Fix the drag icon from Teams Table

* added drag option in expandable config

* remove unwanted css changes
---
 .../components/TeamDetails/TeamHierarchy.tsx  |  2 +-
 .../ui/src/components/TeamDetails/teams.less  | 31 -------------------
 .../resources/ui/src/pages/service/index.tsx  |  5 +--
 .../ui/src/styles/components/table.less       | 29 +++++++++++++++++
 .../resources/ui/src/utils/TableUtils.tsx     | 31 +++++++++++++------
 5 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
index ccc887f75ee..2ee87ff3598 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
@@ -134,7 +134,7 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
 
   const expandableConfig: ExpandableConfig<Team> = useMemo(
     () => ({
-      ...getTableExpandableConfig<Team>(),
+      ...getTableExpandableConfig<Team>(true),
       onExpand: (isOpen, record) => {
         if (isOpen && isEmpty(record.children)) {
           onTeamExpand(false, record.fullyQualifiedName, true);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less
index 1d9d63e1416..8a5600f1fd4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less
@@ -54,40 +54,9 @@
         td {
           border-right: none;
           background: @white;
-
-          .drag-icon {
-            width: 12px;
-            height: 12px;
-            margin-right: 6px;
-            display: inline-flex;
-            visibility: hidden;
-          }
-
-          .expand-icon {
-            cursor: pointer;
-          }
-
-          .expand-cell-icon-container {
-            display: inline-flex;
-            margin-right: 8px;
-          }
-
-          .expand-cell-empty-icon-container {
-            width: 16px;
-            height: 16px;
-            display: inline-flex;
-          }
-        }
-
-        .ant-table-cell-with-append {
-          display: flex;
-          align-items: center;
         }
         .ant-table-cell-row-hover {
           background: @body-dark-bg-color;
-          .drag-icon {
-            visibility: initial;
-          }
         }
       }
     }
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 e67c3edf34b..f979724accf 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
@@ -1017,11 +1017,12 @@ const ServicePage: FunctionComponent = () => {
                     isRecursiveDelete
                     afterDeleteAction={() =>
                       history.push(
-                        `/settings/services/${
+                        getSettingPath(
+                          GlobalSettingsMenuCategory.SERVICES,
                           SERVICE_CATEGORY_TYPE[
                             serviceCategory as keyof typeof SERVICE_CATEGORY_TYPE
                           ]
-                        }`
+                        )
                       )
                     }
                     allowSoftDelete={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
index 0012b5d9dd9..3cac3cb58e4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
@@ -9,6 +9,35 @@
   .ant-table-bordered {
     table {
       border: 1px solid #dde3ea;
+
+      tbody {
+        tr {
+          td {
+            .drag-icon {
+              width: 12px;
+              height: 12px;
+              margin-right: 2px;
+              display: inline-flex;
+              visibility: hidden;
+            }
+
+            .expand-icon {
+              cursor: pointer;
+            }
+
+            .expand-cell-empty-icon-container {
+              width: 16px;
+              height: 16px;
+              display: inline-flex;
+            }
+          }
+        }
+        .ant-table-cell-row-hover {
+          .drag-icon {
+            visibility: initial;
+          }
+        }
+      }
     }
     .ant-table-container > .ant-table-content > table > tbody > tr > td {
       border-right: none;
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
index 09ab55e0f12..2bef3ad94d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
@@ -19,6 +19,7 @@ import { upperCase } from 'lodash';
 import { EntityTags } from 'Models';
 import React from 'react';
 import { ReactComponent as DashboardIcon } from '../assets/svg/dashboard-grey.svg';
+import { ReactComponent as DragIcon } from '../assets/svg/drag.svg';
 import { ReactComponent as DropDownIcon } from '../assets/svg/DropDown.svg';
 import { ReactComponent as RightArrowIcon } from '../assets/svg/ic-right-arrow.svg';
 import { ReactComponent as MlModelIcon } from '../assets/svg/mlmodal.svg';
@@ -369,17 +370,29 @@ export const getTestResultBadgeIcon = (status?: TestCaseStatus) => {
   }
 };
 
-export function getTableExpandableConfig<T>(): ExpandableConfig<T> {
+export function getTableExpandableConfig<T>(
+  isDraggable?: boolean
+): ExpandableConfig<T> {
   const expandableConfig: ExpandableConfig<T> = {
     expandIcon: ({ expanded, onExpand, expandable, record }) =>
-      expandable && (
-        <Icon
-          className="mr-1"
-          component={expanded ? DropDownIcon : RightArrowIcon}
-          data-testid="expand-icon"
-          size={16}
-          onClick={(e) => onExpand(record, e)}
-        />
+      expandable ? (
+        <>
+          {isDraggable && <Icon className="drag-icon" component={DragIcon} />}
+          <Icon
+            className="mr-1"
+            component={expanded ? DropDownIcon : RightArrowIcon}
+            data-testid="expand-icon"
+            size={16}
+            onClick={(e) => onExpand(record, e)}
+          />
+        </>
+      ) : (
+        isDraggable && (
+          <>
+            <Icon className="drag-icon" component={DragIcon} />
+            <div className="expand-cell-empty-icon-container" />
+          </>
+        )
       ),
   };