From f6cde6a903069e0a40c008472b24f1a0e48468ec Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Thu, 18 Aug 2022 16:38:02 -0400
Subject: [PATCH] fix(striker-ui): extend iface drag begin to whole row

---
 striker-ui/components/NetworkInitForm.tsx | 82 ++++++++++++++++++-----
 1 file changed, 66 insertions(+), 16 deletions(-)

diff --git a/striker-ui/components/NetworkInitForm.tsx b/striker-ui/components/NetworkInitForm.tsx
index b4a2edd8..d0d2394c 100644
--- a/striker-ui/components/NetworkInitForm.tsx
+++ b/striker-ui/components/NetworkInitForm.tsx
@@ -72,6 +72,7 @@ type NetworkInput = {
 type NetworkInterfaceInputMap = Record<
   string,
   {
+    metadata: NetworkInterfaceOverviewMetadata;
     isApplied?: boolean;
   }
 >;
@@ -130,6 +131,11 @@ const MOCK_NICS: NetworkInterfaceOverviewMetadata[] = [
   },
 ];
 
+const CLASS_PREFIX = 'NetworkInitForm';
+const CLASSES = {
+  ifaceNotApplied: `${CLASS_PREFIX}-network-interface-not-applied`,
+};
+
 const NETWORK_TYPES: Record<string, string> = {
   bcn: 'Back-Channel Network',
   ifn: 'Internet-Facing Network',
@@ -574,19 +580,17 @@ const NetworkInitForm = forwardRef<
   >(`${API_BASE_URL}/network-interface`, {
     refreshInterval: 2000,
     onSuccess: (data) => {
-      if (data instanceof Array) {
-        const map = data.reduce<NetworkInterfaceInputMap>(
-          (reduceContainer, { networkInterfaceUUID }) => {
-            reduceContainer[networkInterfaceUUID] =
-              networkInterfaceInputMap[networkInterfaceUUID] ?? {};
+      const map = data.reduce<NetworkInterfaceInputMap>((result, metadata) => {
+        const { networkInterfaceUUID } = metadata;
 
-            return reduceContainer;
-          },
-          {},
-        );
+        result[networkInterfaceUUID] = networkInterfaceInputMap[
+          networkInterfaceUUID
+        ] ?? { metadata };
 
-        setNetworkInterfaceInputMap(map);
-      }
+        return result;
+      }, {});
+
+      setNetworkInterfaceInputMap(map);
     },
   });
 
@@ -972,7 +976,8 @@ const NetworkInitForm = forwardRef<
       };
   }, [networkInterfaceHeld, networkInterfaceInputMap]);
   const dragAreaDraggingSx: MUIBoxProps['sx'] = useMemo(
-    () => (networkInterfaceHeld ? { cursor: 'grabbing' } : {}),
+    () =>
+      networkInterfaceHeld ? { cursor: 'grabbing', userSelect: 'none' } : {},
     [networkInterfaceHeld],
   );
   const floatingNetworkInterface: JSX.Element = useMemo(() => {
@@ -1030,11 +1035,14 @@ const NetworkInitForm = forwardRef<
 
   useEffect(() => {
     const map = networkInterfaces.reduce<NetworkInterfaceInputMap>(
-      (reduceContainer, { networkInterfaceUUID }) => {
-        reduceContainer[networkInterfaceUUID] =
-          networkInterfaceInputMap[networkInterfaceUUID] ?? {};
+      (result, metadata) => {
+        const { networkInterfaceUUID } = metadata;
+
+        result[networkInterfaceUUID] = networkInterfaceInputMap[
+          networkInterfaceUUID
+        ] ?? { metadata };
 
-        return reduceContainer;
+        return result;
       },
       {},
     );
@@ -1110,8 +1118,42 @@ const NetworkInitForm = forwardRef<
           columns={createNetworkInterfaceTableColumns((row) => {
             setNetworkInterfaceHeld(row);
           }, networkInterfaceInputMap)}
+          componentsProps={{
+            row: {
+              onMouseDown: ({
+                target: {
+                  parentElement: {
+                    dataset: { id: networkInterfaceUUID = undefined } = {},
+                  } = {},
+                } = {},
+              }: {
+                target?: { parentElement?: { dataset?: { id?: string } } };
+              }) => {
+                if (networkInterfaceUUID) {
+                  const { isApplied, metadata } =
+                    networkInterfaceInputMap[networkInterfaceUUID];
+
+                  if (!isApplied) {
+                    setNetworkInterfaceHeld(metadata);
+                  }
+                }
+              },
+            },
+          }}
           disableColumnMenu
           disableSelectionOnClick
+          getRowClassName={({ row: { networkInterfaceUUID } }) => {
+            const { isApplied } =
+              networkInterfaceInputMap[networkInterfaceUUID] ?? false;
+
+            let className = '';
+
+            if (!isApplied) {
+              className += ` ${CLASSES.ifaceNotApplied}`;
+            }
+
+            return className;
+          }}
           getRowId={({ networkInterfaceUUID }) => networkInterfaceUUID}
           hideFooter
           rows={networkInterfaces}
@@ -1125,6 +1167,14 @@ const NetworkInitForm = forwardRef<
             [`& .${muiGridClasses.cell}:focus`]: {
               outline: 'none',
             },
+
+            [`& .${muiGridClasses.row}.${CLASSES.ifaceNotApplied}:hover`]: {
+              cursor: 'grab',
+
+              [`& .${muiGridClasses.cell} p`]: {
+                cursor: 'auto',
+              },
+            },
           }}
         />
         <FlexBox