fix(striker-ui): simplify input tests in general, network init forms

striker-ui/components/GeneralInitForm.tsx

@@ -24,7 +24,7 @@ import OutlinedInputWithLabel, {
 import pad from '../lib/pad';
 import SuggestButton from './SuggestButton';
 import { createTestInputFunction, testNotBlank } from '../lib/test_input';
-import { InputTestBatches } from '../types/TestInputFunction';
+import { InputTestBatches, InputTestInputs } from '../types/TestInputFunction';
 import { BodyText } from './Text';
 
 type GeneralInitFormForwardRefContent = {
@@ -198,7 +198,9 @@ const GeneralInitForm = forwardRef<
       [INPUT_TEST_IDS.confirmAdminPassword]: {
         defaults: {
           getValue: () =>
-            confirmAdminPasswordInputRef.current.getValue?.call(null),
+            isConfirmAdminPassword
+              ? confirmAdminPasswordInputRef.current.getValue?.call(null)
+              : adminPasswordInputRef.current.getValue?.call(null),
           onSuccess: () => {
             setConfirmAdminPasswordInputMessage(undefined);
           },
@@ -313,6 +315,7 @@ const GeneralInitForm = forwardRef<
       },
     }),
     [
+      isConfirmAdminPassword,
       setAdminPasswordInputMessage,
       setConfirmAdminPasswordInputMessage,
       setDomainNameInputMessage,
@@ -321,16 +324,25 @@ const GeneralInitForm = forwardRef<
       setOrganizationPrefixInputMessage,
     ],
   );
-
   const testInput = useMemo(
     () => createTestInputFunction(inputTests),
     [inputTests],
   );
+
   const testAllInputs = useCallback(
     (...excludeTestIds: string[]) =>
       testInput({ excludeTestIds, isIgnoreOnCallbacks: true }),
     [testInput],
   );
+  const testInputSeparate = useCallback(
+    (id: string, input: InputTestInputs[string]) => {
+      const isLocalValid = testInput({
+        inputs: { [id]: input },
+      });
+      toggleSubmitDisabled?.call(null, isLocalValid && testAllInputs(id));
+    },
+    [testInput, testAllInputs, toggleSubmitDisabled],
+  );
   const populateOrganizationPrefixInput = useCallback(
     ({
       organizationName = organizationNameInputRef.current.getValue?.call(null),
@@ -489,19 +501,13 @@ const GeneralInitForm = forwardRef<
                     inputLabelProps={{ isNotifyRequired: true }}
                     label="Prefix"
                     onChange={({ target: { value } }) => {
-                      testInput({
+                      testInputSeparate(INPUT_TEST_IDS.organizationPrefix, {
-                        inputs: {
                         [INPUT_TEST_IDS.organizationPrefix]: {
                           max: MAX_ORGANIZATION_PREFIX_LENGTH,
                           min: MIN_ORGANIZATION_PREFIX_LENGTH,
                           value,
                         },
-                        },
                       });
-                      toggleSubmitDisabled?.call(
-                        null,
-                        testAllInputs(INPUT_TEST_IDS.organizationPrefix),
-                      );
                       setIsShowOrganizationPrefixSuggest(
                         isOrganizationPrefixPrereqFilled(),
                       );
@@ -533,13 +539,7 @@ const GeneralInitForm = forwardRef<
                     inputLabelProps={{ isNotifyRequired: true }}
                     label="Striker #"
                     onChange={({ target: { value } }) => {
-                      testInput({
+                      testInputSeparate(INPUT_TEST_IDS.hostNumber, { value });
-                        inputs: { [INPUT_TEST_IDS.hostNumber]: { value } },
-                      });
-                      toggleSubmitDisabled?.call(
-                        null,
-                        testAllInputs(INPUT_TEST_IDS.hostNumber),
-                      );
                     }}
                     onHelp={() => {
                       setHelpMessage(
@@ -568,13 +568,7 @@ const GeneralInitForm = forwardRef<
                   inputLabelProps={{ isNotifyRequired: true }}
                   label="Domain name"
                   onChange={({ target: { value } }) => {
-                    testInput({
+                    testInputSeparate(INPUT_TEST_IDS.domainName, { value });
-                      inputs: { [INPUT_TEST_IDS.domainName]: { value } },
-                    });
-                    toggleSubmitDisabled?.call(
-                      null,
-                      testAllInputs(INPUT_TEST_IDS.domainName),
-                    );
                   }}
                   onHelp={() => {
                     setHelpMessage(
@@ -603,13 +597,7 @@ const GeneralInitForm = forwardRef<
                   inputLabelProps={{ isNotifyRequired: true }}
                   label="Host name"
                   onChange={({ target: { value } }) => {
-                    testInput({
+                    testInputSeparate(INPUT_TEST_IDS.hostName, { value });
-                      inputs: { [INPUT_TEST_IDS.hostName]: { value } },
-                    });
-                    toggleSubmitDisabled?.call(
-                      null,
-                      testAllInputs(INPUT_TEST_IDS.hostName),
-                    );
                     setIsShowHostNameSuggest(isHostNamePrereqFilled());
                   }}
                   onHelp={() => {
@@ -654,13 +642,9 @@ const GeneralInitForm = forwardRef<
                     inputLabelProps={{ isNotifyRequired: true }}
                     label="Admin password"
                     onChange={({ target: { value } }) => {
-                      testInput({
+                      testInputSeparate(INPUT_TEST_IDS.adminPassword, {
-                        inputs: { [INPUT_TEST_IDS.adminPassword]: { value } },
+                        value,
                       });
-                      toggleSubmitDisabled?.call(
-                        null,
-                        testAllInputs(INPUT_TEST_IDS.adminPassword),
-                      );
                     }}
                     onHelp={() => {
                       setHelpMessage(
@@ -690,15 +674,9 @@ const GeneralInitForm = forwardRef<
                       }}
                       label="Confirm password"
                       onChange={({ target: { value } }) => {
-                        testInput({
+                        testInputSeparate(INPUT_TEST_IDS.confirmAdminPassword, {
-                          inputs: {
+                          value,
-                            [INPUT_TEST_IDS.confirmAdminPassword]: { value },
-                          },
                         });
-                        toggleSubmitDisabled?.call(
-                          null,
-                          testAllInputs(INPUT_TEST_IDS.confirmAdminPassword),
-                        );
                       }}
                     />
                   }

striker-ui/components/NetworkInitForm.tsx

@@ -49,8 +49,8 @@ import periodicFetch from '../lib/fetchers/periodicFetch';
 import SelectWithLabel from './SelectWithLabel';
 import Spinner from './Spinner';
 import sumstring from '../lib/sumstring';
-import { testInput, testNotBlank } from '../lib/test_input';
+import { createTestInputFunction, testNotBlank } from '../lib/test_input';
-import { InputTestBatches } from '../types/TestInputFunction';
+import { InputTestBatches, InputTestInputs } from '../types/TestInputFunction';
 import { BodyText, DataGridCellText } from './Text';
 
 type NetworkInput = {
@@ -264,7 +264,6 @@ const NetworkForm: FC<{
     interfaceIndex: number,
   ) => MUIBoxProps['onMouseUp'];
   getNetworkTypeCount: (targetType: string, lastIndex?: number) => number;
-  inputTests: InputTestBatches;
   networkIndex: number;
   networkInput: NetworkInput;
   networkInputs: NetworkInput[];
@@ -274,12 +273,10 @@ const NetworkForm: FC<{
   setNetworkInterfaceInputMap: Dispatch<
     SetStateAction<NetworkInterfaceInputMap>
   >;
-  testAllInputs: (...excludeTestIds: string[]) => boolean;
+  testInputSeparate: (id: string, input: InputTestInputs[string]) => void;
-  toggleSubmitDisabled?: ToggleSubmitDisabledFunction;
 }> = ({
   createDropMouseUpHandler,
   getNetworkTypeCount,
-  inputTests,
   networkIndex,
   networkInput,
   networkInputs,
@@ -287,8 +284,7 @@ const NetworkForm: FC<{
   optionalNetworkInputsLength,
   setNetworkInputs,
   setNetworkInterfaceInputMap,
-  testAllInputs,
+  testInputSeparate,
-  toggleSubmitDisabled,
 }) => {
   const theme = useTheme();
   const breakpointMedium = useMediaQuery(theme.breakpoints.up('md'));
@@ -418,19 +414,9 @@ const NetworkForm: FC<{
                     ?.call(null, interfaces, networkInterfaceIndex)
                     ?.call(null, ...args);
 
-                  const isLocalValid = testInput({
+                  testInputSeparate(interfacesInputTestId, {
-                    inputs: {
-                      [interfacesInputTestId]: {
                     value: getFilled(interfaces).length,
-                      },
-                    },
-                    tests: inputTests,
                   });
-
-                  toggleSubmitDisabled?.call(
-                    null,
-                    isLocalValid && testAllInputs(interfacesInputTestId),
-                  );
                 }}
               >
                 {networkInterface ? (
@@ -445,20 +431,9 @@ const NetworkForm: FC<{
                       setNetworkInterfaceInputMap({
                         ...networkInterfaceInputMap,
                       });
-
+                      testInputSeparate(interfacesInputTestId, {
-                      const isLocalValid = testInput({
-                        inputs: {
-                          [interfacesInputTestId]: {
                         value: getFilled(interfaces).length,
-                          },
-                        },
-                        tests: inputTests,
                       });
-
-                      toggleSubmitDisabled?.call(
-                        null,
-                        isLocalValid && testAllInputs(interfacesInputTestId),
-                      );
                     }}
                   />
                 ) : (
@@ -475,19 +450,7 @@ const NetworkForm: FC<{
               inputLabelProps={{ isNotifyRequired: true }}
               label="IP address"
               onChange={({ target: { value } }) => {
-                const isLocalValid = testInput({
+                testInputSeparate(ipAddressInputTestId, { value });
-                  inputs: {
-                    [ipAddressInputTestId]: {
-                      value,
-                    },
-                  },
-                  tests: inputTests,
-                });
-
-                toggleSubmitDisabled?.call(
-                  null,
-                  isLocalValid && testAllInputs(ipAddressInputTestId),
-                );
               }}
               value={ipAddress}
             />
@@ -501,17 +464,7 @@ const NetworkForm: FC<{
               inputLabelProps={{ isNotifyRequired: true }}
               label="Subnet mask"
               onChange={({ target: { value } }) => {
-                const isLocalValid = testInput({
+                testInputSeparate(subnetMaskInputTestId, { value });
-                  inputs: {
-                    [subnetMaskInputTestId]: { value },
-                  },
-                  tests: inputTests,
-                });
-
-                toggleSubmitDisabled?.call(
-                  null,
-                  isLocalValid && testAllInputs(subnetMaskInputTestId),
-                );
               }}
               value={subnetMask}
             />
@@ -525,7 +478,6 @@ const NetworkForm: FC<{
 
 NetworkForm.defaultProps = {
   createDropMouseUpHandler: undefined,
-  toggleSubmitDisabled: undefined,
 };
 
 const NetworkInitForm = forwardRef<
@@ -722,15 +674,24 @@ const NetworkInitForm = forwardRef<
     setNetworkIPAddressInputMessage,
     setNetworkSubnetMaskInputMessage,
   ]);
+  const testInput = useMemo(
+    () => createTestInputFunction(inputTests),
+    [inputTests],
+  );
 
   const testAllInputs = useCallback(
     (...excludeTestIds: string[]) =>
-      testInput({
+      testInput({ excludeTestIds, isIgnoreOnCallbacks: true }),
-        excludeTestIds,
+    [testInput],
-        isIgnoreOnCallbacks: true,
+  );
-        tests: inputTests,
+  const testInputSeparate = useCallback(
-      }),
+    (id: string, input: InputTestInputs[string]) => {
-    [inputTests],
+      const isLocalValid = testInput({
+        inputs: { [id]: input },
+      });
+      toggleSubmitDisabled?.call(null, isLocalValid && testAllInputs(id));
+    },
+    [testInput, testAllInputs, toggleSubmitDisabled],
   );
   const clearNetworkInterfaceHeld = useCallback(() => {
     setNetworkInterfaceHeld(undefined);
@@ -997,7 +958,6 @@ const NetworkInitForm = forwardRef<
                   {...{
                     createDropMouseUpHandler,
                     getNetworkTypeCount,
-                    inputTests,
                     networkIndex,
                     networkInput,
                     networkInputs,
@@ -1005,8 +965,7 @@ const NetworkInitForm = forwardRef<
                     optionalNetworkInputsLength,
                     setNetworkInputs,
                     setNetworkInterfaceInputMap,
-                    testAllInputs,
+                    testInputSeparate,
-                    toggleSubmitDisabled,
                   }}
                 />
               );
@@ -1023,15 +982,7 @@ const NetworkInitForm = forwardRef<
                 id="network-init-gateway"
                 inputLabelProps={{ isNotifyRequired: true }}
                 onChange={({ target: { value } }) => {
-                  const isLocalValid = testInput({
+                  testInputSeparate(INPUT_TEST_IDS.gateway, { value });
-                    inputs: { [INPUT_TEST_IDS.gateway]: { value } },
-                    tests: inputTests,
-                  });
-
-                  toggleSubmitDisabled?.call(
-                    null,
-                    isLocalValid && testAllInputs(INPUT_TEST_IDS.gateway),
-                  );
                 }}
                 label="Gateway"
               />
@@ -1044,15 +995,7 @@ const NetworkInitForm = forwardRef<
                 id="network-init-dns-csv"
                 inputLabelProps={{ isNotifyRequired: true }}
                 onChange={({ target: { value } }) => {
-                  const isLocalValid = testInput({
+                  testInputSeparate(INPUT_TEST_IDS.dnsCSV, { value });
-                    inputs: { [INPUT_TEST_IDS.dnsCSV]: { value } },
-                    tests: inputTests,
-                  });
-
-                  toggleSubmitDisabled?.call(
-                    null,
-                    isLocalValid && testAllInputs(INPUT_TEST_IDS.dnsCSV),
-                  );
                 }}
                 label="Domain name server(s)"
               />