fix(striker-ui): align network links in StrikerInitForm confirm

striker-ui/components/NetworkInitForm.tsx

@@ -143,6 +143,7 @@ const CLASS_PREFIX = 'NetworkInitForm';
 const CLASSES = {
   ifaceNotApplied: `${CLASS_PREFIX}-network-interface-not-applied`,
 };
+const INITIAL_IFACES = [undefined, undefined];
 
 const NETWORK_TYPES: Record<string, string> = {
   bcn: 'Back-Channel Network',
@@ -152,7 +153,7 @@ const NETWORK_TYPES: Record<string, string> = {
 const REQUIRED_NETWORKS: NetworkInput[] = [
   {
     inputUUID: '30dd2ac5-8024-4a7e-83a1-6a3df7218972',
-    interfaces: [],
+    interfaces: [...INITIAL_IFACES],
     ipAddress: '10.200.1.1',
     isRequired: true,
     name: `${NETWORK_TYPES.bcn} 1`,
@@ -162,7 +163,7 @@ const REQUIRED_NETWORKS: NetworkInput[] = [
   },
   {
     inputUUID: 'e7ef3af5-5602-440c-87f8-69c242e3d7f3',
-    interfaces: [],
+    interfaces: [...INITIAL_IFACES],
     ipAddress: '10.201.1.1',
     isRequired: true,
     name: `${NETWORK_TYPES.ifn} 1`,
@@ -962,7 +963,7 @@ const NetworkInitForm = forwardRef<
   const createNetwork = useCallback(() => {
     networkInputs.unshift({
       inputUUID: uuidv4(),
-      interfaces: [],
+      interfaces: [...INITIAL_IFACES],
       ipAddress: '',
       name: 'Unknown Network',
       subnetMask: '',

striker-ui/components/StrikerInitForm.tsx

@@ -156,22 +156,27 @@ const StrikerInitForm: FC = () => {
                         )
                       </BodyText>
                     </Grid>
-                    {interfaces.map((iface, interfaceIndex) => {
+                    {interfaces.map((iface, ifaceIndex) => {
-                      if (iface === undefined) {
+                      let key = `network-confirm-${inputUUID}-interface${ifaceIndex}`;
-                        return <></>;
+                      let ifaceName = 'none';
-                      }
+
+                      if (iface) {
+                        const { networkInterfaceName, networkInterfaceUUID } =
+                          iface;
 
-                      const { networkInterfaceName } = iface;
+                        key = `${key}-${networkInterfaceUUID}`;
+                        ifaceName = networkInterfaceName;
+                      }
 
                       return (
-                        <>
+                        <Grid container key={key} item>
                           <Grid item xs={1}>
-                            <BodyText>{`Link ${interfaceIndex + 1}`}</BodyText>
+                            <BodyText>{`Link ${ifaceIndex + 1}`}</BodyText>
                           </Grid>
                           <Grid item xs={1}>
-                            <MonoText>{networkInterfaceName}</MonoText>
+                            <MonoText>{ifaceName}</MonoText>
                           </Grid>
-                        </>
+                        </Grid>
                       );
                     })}
                     <Grid item xs={2}>