fix(striker-ui): enable add network by dragging NIC

striker-ui/pages/init/index.tsx

@@ -7,6 +7,7 @@ import {
   iconButtonClasses as muiIconButtonClasses,
 } from '@mui/material';
 import {
+  Add as MUIAddIcon,
   Check as MUICheckIcon,
   Close as MUICloseIcon,
   DragHandle as MUIDragHandleIcon,
@@ -297,16 +298,17 @@ const NetworkInterfaceList: FC = () => {
     interfaces: NetworkInterfaceOverviewMetadata[],
   ) => MUIBoxProps['onMouseUp'];
   let floatingNetworkInterface: JSX.Element = <></>;
+  let handleCreateNetworkMouseUp: MUIBoxProps['onMouseUp'];
   let handlePanelMouseMove: MUIBoxProps['onMouseMove'];
 
   if (networkInterfaceHeld) {
+    const { networkInterfaceUUID } = networkInterfaceHeld;
+
     createDropMouseUpHandler =
       (interfaces: NetworkInterfaceOverviewMetadata[]) => () => {
         interfaces.push(networkInterfaceHeld);
 
-        networkInterfaceInputMap[
-          networkInterfaceHeld.networkInterfaceUUID
-        ].isApplied = true;
+        networkInterfaceInputMap[networkInterfaceUUID].isApplied = true;
       };
 
     floatingNetworkInterface = (
@@ -321,6 +323,17 @@ const NetworkInterfaceList: FC = () => {
       />
     );
 
+    handleCreateNetworkMouseUp = () => {
+      networkInputs.push({
+        ipAddress: '',
+        name: '',
+        interfaces: [networkInterfaceHeld],
+        subnetMask: '',
+      });
+
+      networkInterfaceInputMap[networkInterfaceUUID].isApplied = true;
+    };
+
     handlePanelMouseMove = ({ nativeEvent: { clientX, clientY } }) => {
       setDragMousePosition({
         x: clientX,
@@ -399,24 +412,65 @@ const NetworkInterfaceList: FC = () => {
               },
             }}
           />
-          {networkInputs.map(({ interfaces, ipAddress, name, subnetMask }) => (
+          <MUIBox
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              overflowX: 'auto',
+
+              '& > *': {
+                marginBottom: '1em',
+                marginTop: '1em',
+              },
+
+              '& > :not(:first-child)': {
+                marginLeft: '1em',
+              },
+            }}
+          >
+            <MUIBox
+              onMouseUp={handleCreateNetworkMouseUp}
+              sx={{
+                alignItems: 'center',
+                borderColor: TEXT,
+                borderStyle: 'dashed',
+                borderWidth: '4px',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                padding: '.6em',
+              }}
+            >
+              <MUIAddIcon fontSize="large" sx={{ color: GREY }} />
+              <BodyText
+                text="Drag interfaces here to create a new network."
+                sx={{
+                  textAlign: 'center',
+                }}
+              />
+            </MUIBox>
+            {networkInputs.map(
+              ({ interfaces, ipAddress, name, subnetMask }, networkIndex) => (
                 <InnerPanel key={`network-input-${name.toLowerCase()}`}>
                   <InnerPanelHeader>
-                <BodyText text={name} />
+                    <OutlinedInputWithLabel label="Network name" value={name} />
                   </InnerPanelHeader>
                   <MUIBox
                     sx={{
                       display: 'flex',
-                  flexDirection: { xs: 'column', md: 'row' },
+                      flexDirection: 'column',
                       margin: '.6em',
 
-                  '& > *': {
-                    flexBasis: '50%',
+                      '& > :not(:first-child)': {
+                        marginTop: '1em',
                       },
                     }}
                   >
                     <MUIBox
-                  onMouseUp={createDropMouseUpHandler?.call(null, interfaces)}
+                      onMouseUp={createDropMouseUpHandler?.call(
+                        null,
+                        interfaces,
+                      )}
                       sx={{
                         borderColor: TEXT,
                         borderStyle: 'dashed',
@@ -446,6 +500,13 @@ const NetworkInterfaceList: FC = () => {
                                     networkInterfaceUUID
                                   ].isApplied = false;
 
+                                  if (
+                                    networkIndex > 1 &&
+                                    interfaces.length === 0
+                                  ) {
+                                    networkInputs.splice(networkIndex, 1);
+                                  }
+
                                   setNetworkInterfaceInputMap({
                                     ...networkInterfaceInputMap,
                                   });
@@ -455,15 +516,9 @@ const NetworkInterfaceList: FC = () => {
                           },
                         )
                       ) : (
-                    <BodyText text="Drag interfaces here to add." />
+                        <BodyText text="Drag interfaces here to add to this network." />
                       )}
                     </MUIBox>
-                <MUIBox
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                  }}
-                >
                     <OutlinedInputWithLabel
                       label="IP address"
                       value={ipAddress}
@@ -473,9 +528,10 @@ const NetworkInterfaceList: FC = () => {
                       value={subnetMask}
                     />
                   </MUIBox>
-              </MUIBox>
                 </InnerPanel>
-          ))}
+              ),
+            )}
+          </MUIBox>
         </MUIBox>
       )}
     </Panel>