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

main
Tsu-ba-me 2 years ago
parent 56100ee62b
commit f22024e3db
  1. 137
      striker-ui/components/NetworkInitForm.tsx
  2. 11
      striker-ui/lib/getFilled.ts

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

@ -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;
Loading…
Cancel
Save