From e65f9600b3c0660bd3a4dae9e522e818efcdf648 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Sun, 8 Oct 2023 04:29:58 +0530
Subject: [PATCH] fix(ui): revamp dropable ui effect for glossary terms table
 (#13443)

* revamp dropable ui effect for glossary terms table

* logic change for getting classname

* supported one drop style
---
 .../components/Draggable/DraggableBodyRow.tsx |  8 +++---
 .../components/Team/TeamDetails/teams.less    |  2 +-
 .../ui/src/styles/components/table.less       | 28 +++++++++++++------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Draggable/DraggableBodyRow.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Draggable/DraggableBodyRow.tsx
index 21528c25df1..7f318f3d00f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Draggable/DraggableBodyRow.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Draggable/DraggableBodyRow.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import classNames from 'classnames';
 import { isUndefined } from 'lodash';
 import React, { useEffect, useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
@@ -41,8 +42,7 @@ const DraggableBodyRow = <T extends DraggableUnion>({
 
       return {
         isOver: monitor.isOver(),
-        dropClassName:
-          dragIndex < (index ?? 0) ? 'drop-over-downward' : 'drop-over-upward',
+        dropClassName: dragIndex !== index ? 'drop-over-child' : '',
       };
     },
     hover: () => {
@@ -56,7 +56,7 @@ const DraggableBodyRow = <T extends DraggableUnion>({
   // here we are passing the drag record
   const [{ isDragging }, drag] = useDrag({
     type: DRAGGABLE_BODY_ROW,
-    item: { record },
+    item: { record, index },
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
@@ -71,7 +71,7 @@ const DraggableBodyRow = <T extends DraggableUnion>({
 
   return (
     <tr
-      className={`${className} ${isOver ? dropClassName : ''}`}
+      className={classNames(isOver ? dropClassName : '')}
       ref={ref}
       style={{
         cursor: 'move',
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less
index 20f014aa9e8..4c538a04c75 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less
@@ -68,7 +68,7 @@
         }
       }
 
-      .drop-over-upward {
+      .drop-over-having-child {
         td {
           background: @active-color;
         }
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 081cb2ccdfd..8abc81f9e76 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
@@ -89,21 +89,33 @@
 }
 
 .drop-over-background {
-  .drop-over-upward {
+  .drop-over-child {
     td {
       background: @active-color;
-      border-bottom: 2px solid @primary-color;
+      border: 2px dashed @primary-color;
+      border-left: transparent;
+
+      &:first-child {
+        border-left: 2px dashed @primary-color;
+      }
+      &:last-child {
+        border-right: 2px dashed @primary-color !important;
+      }
     }
   }
 }
 
 .drop-over-table {
-  .ant-table-tbody {
-    .ant-table-cell {
-      background: @active-color;
-    }
-    tr.ant-table-row:hover > td {
-      background: @active-color;
+  .ant-table {
+    table {
+      border-collapse: collapse;
+      .ant-table-tbody {
+        border: 2px dashed @primary-color;
+
+        td {
+          background: @active-color;
+        }
+      }
     }
   }
 }