fix(striker-ui): relocate add network button

striker-ui/components/NetworkInitForm.tsx

@@ -24,6 +24,7 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -35,6 +36,7 @@ import { BLUE, GREY } from '../lib/consts/DEFAULT_THEME';
 import BriefNetworkInterface from './BriefNetworkInterface';
 import Decorator from './Decorator';
 import DropArea from './DropArea';
+import FlexBox from './FlexBox';
 import IconButton from './IconButton';
 import InputWithRef, { InputForwardedRefContent } from './InputWithRef';
 import OutlinedInputWithLabel from './OutlinedInputWithLabel';
@@ -425,8 +427,6 @@ const NetworkInitForm = forwardRef<NetworkInitFormForwardRefContent>(
       NetworkInterfaceOverviewMetadata | undefined
     >();
 
-    const optionalNetworkInputsLength = networkInputs.length - 2;
-
     const { data: networkInterfaces = MOCK_NICS, isLoading } = periodicFetch<
       NetworkInterfaceOverviewMetadata[]
     >(`${API_BASE_URL}/network-interface`, {
@@ -448,10 +448,22 @@ const NetworkInitForm = forwardRef<NetworkInitFormForwardRefContent>(
       },
     });
 
+    const optionalNetworkInputsLength: number = useMemo(
+      () => networkInputs.length - 2,
+      [networkInputs],
+    );
+    const isDisableAddNetworkButton: boolean = useMemo(
+      () =>
+        networkInputs.length >= networkInterfaces.length ||
+        Object.values(networkInterfaceInputMap).every(
+          ({ isApplied }) => isApplied,
+        ),
+      [networkInputs, networkInterfaces, networkInterfaceInputMap],
+    );
+
     const clearNetworkInterfaceHeld = useCallback(() => {
       setNetworkInterfaceHeld(undefined);
     }, []);
-
     const createNetwork = useCallback(() => {
       networkInputs.unshift({
         inputUUID: uuidv4(),
@@ -464,7 +476,6 @@ const NetworkInitForm = forwardRef<NetworkInitFormForwardRefContent>(
 
       setNetworkInputs([...networkInputs]);
     }, [networkInputs]);
-
     const getNetworkTypeCount = useCallback(
       (targetType: string, lastIndex = 0) => {
         let count = 0;
@@ -647,25 +658,25 @@ const NetworkInitForm = forwardRef<NetworkInitFormForwardRefContent>(
               },
             }}
           />
-          <MUIBox
+          <FlexBox
+            row
             sx={{
-              display: 'flex',
+              '& > :first-child': {
-              flexDirection: 'row',
+                alignSelf: 'start',
-              justifyContent: 'center',
+                marginTop: '1.1em',
+              },
+
+              '& > :last-child': {
+                flexGrow: 1,
+              },
             }}
           >
             <IconButton
-              disabled={
+              disabled={isDisableAddNetworkButton}
-                networkInputs.length >= networkInterfaces.length ||
-                Object.values(networkInterfaceInputMap).every(
-                  ({ isApplied }) => isApplied,
-                )
-              }
               onClick={createNetwork}
             >
               <MUIAddIcon />
             </IconButton>
-          </MUIBox>
             <MUIBox
               sx={{
                 alignItems: 'strech',
@@ -707,6 +718,7 @@ const NetworkInitForm = forwardRef<NetworkInitFormForwardRefContent>(
                 );
               })}
             </MUIBox>
+          </FlexBox>
         </MUIBox>
       </MUIBox>
     );