fix(striker-ui): test interfaces per network in NetworkInitForm

striker-ui/components/NetworkInitForm.tsx

@@ -38,6 +38,7 @@ import BriefNetworkInterface from './BriefNetworkInterface';
 import Decorator from './Decorator';
 import DropArea from './DropArea';
 import FlexBox from './FlexBox';
+import getFilled from '../lib/getFilled';
 import IconButton from './IconButton';
 import InputWithRef, { InputForwardedRefContent } from './InputWithRef';
 import { Message } from './MessageBox';
@@ -146,8 +147,9 @@ const PER_NETWORK_INPUT_COUNT = 3;
 const INPUT_TEST_IDS = {
   dnsCSV: 'domainNameServerCSV',
   gateway: 'gateway',
-  networkName: (prefix: string) => `${prefix}Name`,
+  networkInterfaces: (prefix: string) => `${prefix}Interface`,
   networkIPAddress: (prefix: string) => `${prefix}IPAddress`,
+  networkName: (prefix: string) => `${prefix}Name`,
   networkSubnet: (prefix: string) => `${prefix}SubnetMask`,
 };
 
@@ -301,6 +303,10 @@ const NetworkForm: FC<{
     () => `network${networkIndex}`,
     [networkIndex],
   );
+  const interfacesInputTestId = useMemo(
+    () => INPUT_TEST_IDS.networkInterfaces(inputTestPrefix),
+    [inputTestPrefix],
+  );
   const ipAddressInputTestId = useMemo(
     () => INPUT_TEST_IDS.networkIPAddress(inputTestPrefix),
     [inputTestPrefix],
@@ -309,7 +315,6 @@ const NetworkForm: FC<{
     () => INPUT_TEST_IDS.networkSubnet(inputTestPrefix),
     [inputTestPrefix],
   );
-
   const isNetworkOptional = useMemo(
     () => networkIndex < optionalNetworkInputsLength,
     [networkIndex, optionalNetworkInputsLength],
@@ -408,11 +413,25 @@ const NetworkForm: FC<{
             >
               <BodyText sx={{ whiteSpace: 'nowrap' }} text={linkName} />
               <DropArea
-                onMouseUp={createDropMouseUpHandler?.call(
+                onMouseUp={(...args) => {
+                  createDropMouseUpHandler
+                    ?.call(null, interfaces, networkInterfaceIndex)
+                    ?.call(null, ...args);
+
+                  const isLocalValid = testInput({
+                    inputs: {
+                      [interfacesInputTestId]: {
+                        value: getFilled(interfaces).length,
+                      },
+                    },
+                    tests: inputTests,
+                  });
+
+                  toggleSubmitDisabled?.call(
                     null,
-                  interfaces,
+                    isLocalValid && testAllInputs(interfacesInputTestId),
-                  networkInterfaceIndex,
+                  );
-                )}
+                }}
               >
                 {networkInterface ? (
                   <BriefNetworkInterface
@@ -426,6 +445,20 @@ const NetworkForm: FC<{
                       setNetworkInterfaceInputMap({
                         ...networkInterfaceInputMap,
                       });
+
+                      const isLocalValid = testInput({
+                        inputs: {
+                          [interfacesInputTestId]: {
+                            value: getFilled(interfaces).length,
+                          },
+                        },
+                        tests: inputTests,
+                      });
+
+                      toggleSubmitDisabled?.call(
+                        null,
+                        isLocalValid && testAllInputs(interfacesInputTestId),
+                      );
                     }}
                   />
                 ) : (
@@ -628,12 +661,13 @@ const NetworkInitForm = forwardRef<
       },
     };
 
-    networkInputs.forEach(({ ipAddress, name, subnetMask }, networkIndex) => {
+    networkInputs.forEach(
+      ({ interfaces, ipAddress, name, subnetMask }, networkIndex) => {
         const inputTestPrefix = `network${networkIndex}`;
 
-      tests[INPUT_TEST_IDS.networkName(inputTestPrefix)] = {
+        tests[INPUT_TEST_IDS.networkInterfaces(inputTestPrefix)] = {
-        defaults: { value: name },
+          defaults: { value: getFilled(interfaces).length },
-        tests: [{ test: testNotBlank }],
+          tests: [{ test: ({ value }) => (value as number) > 0 }],
         };
         tests[INPUT_TEST_IDS.networkIPAddress(inputTestPrefix)] = {
           defaults: {
@@ -654,6 +688,10 @@ const NetworkInitForm = forwardRef<
             { test: testNotBlank },
           ],
         };
+        tests[INPUT_TEST_IDS.networkName(inputTestPrefix)] = {
+          defaults: { value: name },
+          tests: [{ test: testNotBlank }],
+        };
         tests[INPUT_TEST_IDS.networkSubnet(inputTestPrefix)] = {
           defaults: {
             onSuccess: () => {
@@ -673,7 +711,8 @@ const NetworkInitForm = forwardRef<
             { test: testNotBlank },
           ],
         };
-    });
+      },
+    );
 
     return tests;
   }, [

striker-ui/lib/getFilled.ts

@@ -0,0 +1,11 @@
+const getFilled = <T>(
+  array: T[],
+  { isReverse = false }: { isReverse?: boolean } = {},
+): T[] =>
+  array.filter(
+    isReverse
+      ? (element: T) => element === undefined
+      : (element: T) => element !== undefined,
+  );
+
+export default getFilled;