fix(striker-ui): set interfaces as applied during read from host detail in network config

striker-ui/components/NetworkInitForm.tsx

@@ -602,8 +602,6 @@ const NetworkInitForm = forwardRef<
     [hostType],
   );
 
-  const [isReadHostDetail, setIsReadHostDetail] = useState<boolean>(false);
-
   const [dragMousePosition, setDragMousePosition] = useState<{
     x: number;
     y: number;
@@ -618,8 +616,11 @@ const NetworkInitForm = forwardRef<
   >();
   const [gatewayInterface, setGatewayInterface] = useState<string>('');
 
-  const gatewayInputRef = useRef<InputForwardedRefContent<'string'>>({});
   const dnsCSVInputRef = useRef<InputForwardedRefContent<'string'>>({});
+  const gatewayInputRef = useRef<InputForwardedRefContent<'string'>>({});
+  /** Avoid state here to prevent triggering multiple renders when reading
+   * host detail. */
+  const isReadHostDetailRef = useRef<boolean>(false);
   const messageGroupRef = useRef<MessageGroupForwardedRefContent>({});
 
   const {
@@ -1181,44 +1182,57 @@ const NetworkInitForm = forwardRef<
       Object.keys(networkInterfaceInputMap).length > 0 &&
       expectHostDetail &&
       hostDetail &&
-      !isReadHostDetail
+      !isReadHostDetailRef.current
     ) {
-      setNetworkInputs(
+      isReadHostDetailRef.current = true;
-        Object.values(previousNetworks).reduce<NetworkInput[]>(
+
-          (previous, { ip, link1Uuid, link2Uuid = '', subnetMask, type }) => {
+      const applied: string[] = [];
-            const name = NETWORK_TYPES[type];
+      const inputs = Object.values(previousNetworks).reduce<NetworkInput[]>(
-            const typeCount =
+        (previous, { ip, link1Uuid, link2Uuid = '', subnetMask, type }) => {
-              getNetworkTypeCount(type, { inputs: previous }) + 1;
+          const name = NETWORK_TYPES[type];
-            const isRequired = requiredNetworks[type] === typeCount;
+          const typeCount = getNetworkTypeCount(type, { inputs: previous }) + 1;
-
+          const isRequired = requiredNetworks[type] === typeCount;
-            previous.push({
+
-              inputUUID: uuidv4(),
+          applied.push(link1Uuid, link2Uuid);
-              interfaces: [
+
-                networkInterfaceInputMap[link1Uuid]?.metadata,
+          previous.push({
-                networkInterfaceInputMap[link2Uuid]?.metadata,
+            inputUUID: uuidv4(),
-              ],
+            interfaces: [
-              ipAddress: ip,
+              networkInterfaceInputMap[link1Uuid]?.metadata,
-              isRequired,
+              networkInterfaceInputMap[link2Uuid]?.metadata,
-              name,
+            ],
-              subnetMask,
+            ipAddress: ip,
-              type,
+            isRequired,
-              typeCount,
+            name,
-            });
+            subnetMask,
+            type,
+            typeCount,
+          });
 
-            return previous;
+          return previous;
-          },
+        },
-          [],
+        [],
-        ),
       );
 
-      setIsReadHostDetail(true);
+      setNetworkInterfaceInputMap((previous) => {
+        const result = { ...previous };
+
+        applied.forEach((uuid) => {
+          if (result[uuid]) {
+            result[uuid].isApplied = true;
+          }
+        });
+
+        return result;
+      });
+
+      setNetworkInputs(inputs);
     }
   }, [
     createNetwork,
     expectHostDetail,
     getNetworkTypeCount,
     hostDetail,
-    isReadHostDetail,
     networkInputs,
     networkInterfaceInputMap,
     previousNetworks,