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

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);

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;
-          }
         }
       }
     }

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}

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;

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 && (
+      expandable ? (
-        <Icon
+        <>
-          className="mr-1"
+          {isDraggable && <Icon className="drag-icon" component={DragIcon} />}
-          component={expanded ? DropDownIcon : RightArrowIcon}
+          <Icon
-          data-testid="expand-icon"
+            className="mr-1"
-          size={16}
+            component={expanded ? DropDownIcon : RightArrowIcon}
-          onClick={(e) => onExpand(record, e)}
+            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" />
+          </>
+        )
       ),
   };