Merge pull request #60 from newrelic/dnd-kpis

feat: add kpi drag-n-drop
newrelic · Jul 26, 2023 · 341063a · 341063a
2 parents f7270a2 + 780abd1
commit 341063a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/src/components/kpi-bar/index.js b/src/components/kpi-bar/index.js
@@ -12,6 +12,7 @@ import { Button, Icon, HeadingText, PlatformStateContext } from 'nr1';
 
 import { SimpleBillboard } from '@newrelic/nr-labs-components';
 
+import IconsLib from '../icons-lib';
 import { KPI_MODES, MODES, SIGNAL_TYPES } from '../../constants';
 import { useFetchKpis } from '../../hooks';
 import KpiEditButtons from './edit-buttons';
@@ -47,6 +48,39 @@ const KpiBar = ({ kpis = [], onChange = () => null, mode = MODES.KIOSK }) => {
 
   const kpisContainer = useRef();
 
+  const dragItemIndex = useRef();
+  const dragOverItemIndex = useRef();
+
+  const dragStartHandler = (e, index) => {
+    dragItemIndex.current = index;
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const dragOverHandler = (e, index) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    dragOverItemIndex.current = index;
+  };
+
+  const dropHandler = (e) => {
+    e.preventDefault();
+    const itemIndex = dragItemIndex.current;
+    const overIndex = dragOverItemIndex.current;
+    if (
+      !Number.isInteger(itemIndex) ||
+      !Number.isInteger(overIndex) ||
+      itemIndex === overIndex
+    )
+      return;
+    const updatedKpis = [...kpis];
+    const item = updatedKpis[itemIndex];
+    updatedKpis.splice(itemIndex, 1);
+    updatedKpis.splice(overIndex, 0, item);
+    onChange(updatedKpis);
+    dragItemIndex.current = null;
+    dragOverItemIndex.current = null;
+  };
+
   useEffect(() => {
     selectedKpi.current = {};
     selectedKpiIndex.current = -1;
@@ -195,7 +229,16 @@ const KpiBar = ({ kpis = [], onChange = () => null, mode = MODES.KIOSK }) => {
             id={`kpi-container-${index}`}
             key={index}
             className="kpi-container"
+            draggable={mode === MODES.EDIT}
+            onDragStart={(e) => dragStartHandler(e, index)}
+            onDragOver={(e) => dragOverHandler(e, index)}
+            onDrop={(e) => dropHandler(e)}
           >
+            {mode === MODES.EDIT && (
+              <span className="drag-handle">
+                <IconsLib type={IconsLib.TYPES.HANDLE} />
+              </span>
+            )}
             <div className="kpi-data">
               <SimpleBillboard
                 metric={metricFromQuery(queryResults, index)}

diff --git a/src/components/kpi-bar/styles.scss b/src/components/kpi-bar/styles.scss
@@ -64,6 +64,10 @@ $kpiBarEditModeMaxWidth: calc(99% - 190px);
       gap: 0.125rem;
       width: max-content;
 
+      .drag-handle {
+        margin-top: 0.25rem;
+        cursor: pointer;
+      }
 
       .kpi-data {
         height: 100%;