fix(striker-ui): split network interfaces into links

striker-ui/components/DropArea.tsx

@@ -0,0 +1,18 @@
+import { Box as MUIBox, styled } from '@mui/material';
+
+import { GREY } from '../lib/consts/DEFAULT_THEME';
+
+const DropArea = styled(MUIBox)(() => ({
+  borderColor: GREY,
+  borderStyle: 'dashed',
+  borderWidth: '4px',
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '.6em',
+
+  '& > :not(:first-child)': {
+    marginTop: '.3em',
+  },
+}));
+
+export default DropArea;

striker-ui/components/NetworkInitForm.tsx

@@ -21,6 +21,7 @@ import { BLUE, GREY, TEXT } from '../lib/consts/DEFAULT_THEME';
 
 import BriefNetworkInterface from './BriefNetworkInterface';
 import Decorator from './Decorator';
+import DropArea from './DropArea';
 import OutlinedInputWithLabel from './OutlinedInputWithLabel';
 import pad from '../lib/pad';
 import { InnerPanel, InnerPanelHeader } from './Panels';
@@ -105,6 +106,12 @@ const REQUIRED_NETWORKS = [
   },
 ];
 
+const MAX_INTERFACES_PER_NETWORK = 2;
+const NETWORK_INTERFACE_TEMPLATE = Array.from(
+  { length: MAX_INTERFACES_PER_NETWORK },
+  (unused, index) => index + 1,
+);
+
 const createNetworkInterfaceTableColumns = (
   handleDragMouseDown: (
     row: NetworkInterfaceOverviewMetadata,
@@ -270,9 +277,11 @@ const NetworkInitForm: FC = () => {
 
     createDropMouseUpHandler =
       (interfaces: NetworkInterfaceOverviewMetadata[]) => () => {
-        interfaces.push(networkInterfaceHeld);
+        if (interfaces.length < MAX_INTERFACES_PER_NETWORK) {
+          interfaces.push(networkInterfaceHeld);
 
-        networkInterfaceInputMap[networkInterfaceUUID].isApplied = true;
+          networkInterfaceInputMap[networkInterfaceUUID].isApplied = true;
+        }
       };
 
     floatingNetworkInterface = (
@@ -435,10 +444,10 @@ const NetworkInitForm: FC = () => {
               networkIndex < optionalNetworkInputsLength;
 
             return (
-              <InnerPanel key={`network-input-${inputUUID}`}>
+              <InnerPanel key={`network-${inputUUID}`}>
                 <InnerPanelHeader>
                   <SelectWithLabel
-                    id={`network-input-${inputUUID}-name`}
+                    id={`network-${inputUUID}-name`}
                     isReadOnly={!isNetworkOptional}
                     label="Network name"
                     selectItems={Object.entries(NETWORK_TYPES).map(
@@ -482,29 +491,39 @@ const NetworkInitForm: FC = () => {
                     },
                   }}
                 >
-                  <MUIBox
+                  {NETWORK_INTERFACE_TEMPLATE.map((linkNumber) => {
-                    onMouseUp={createDropMouseUpHandler?.call(null, interfaces)}
+                    const linkName = `Link ${linkNumber}`;
-                    sx={{
+                    const networkInterfaceIndex = linkNumber - 1;
-                      borderColor: TEXT,
+                    const networkInterface = interfaces[networkInterfaceIndex];
-                      borderStyle: 'dashed',
+                    const { networkInterfaceUUID } = networkInterface || {};
-                      borderWidth: '4px',
+
-                      display: 'flex',
+                    return (
-                      flexDirection: 'column',
+                      <MUIBox
-                      padding: '.6em',
+                        key={`network-${inputUUID}-link-${linkNumber}`}
-
+                        sx={{
-                      '& > :not(:first-child)': {
+                          alignItems: 'center',
-                        marginTop: '.3em',
+                          display: 'flex',
-                      },
+                          flexDirection: 'row',
-                    }}
+
-                  >
+                          '& > :not(:first-child)': {
-                    {interfaces.length > 0 ? (
+                            marginLeft: '1em',
-                      interfaces.map(
+                          },
-                        (networkInterface, networkInterfaceIndex) => {
+
-                          const { networkInterfaceUUID } = networkInterface;
+                          '& > :last-child': {
-
+                            flexGrow: 1,
-                          return (
+                          },
+                        }}
+                      >
+                        <BodyText text={linkName} />
+                        <DropArea
+                          onMouseUp={createDropMouseUpHandler?.call(
+                            null,
+                            interfaces,
+                          )}
+                        >
+                          {networkInterface ? (
                             <BriefNetworkInterface
-                              key={`brief-network-interface-${networkInterfaceUUID}`}
+                              key={`network-interface-${networkInterfaceUUID}`}
                               networkInterface={networkInterface}
                               onClose={() => {
                                 interfaces.splice(networkInterfaceIndex, 1);
@@ -525,13 +544,13 @@ const NetworkInitForm: FC = () => {
                                 });
                               }}
                             />
-                          );
+                          ) : (
-                        },
+                            <BodyText text="Drop to add interface." />
-                      )
+                          )}
-                    ) : (
+                        </DropArea>
-                      <BodyText text="Drag interfaces here to add to this network." />
+                      </MUIBox>
-                    )}
+                    );
-                  </MUIBox>
+                  })}
                   <OutlinedInputWithLabel
                     label="IP address"
                     onChange={({ target: { value } }) => {