fix(striker-ui): enable pass previous values to CommonFenceInputGroup

main
Tsu-ba-me 2 years ago
parent 4006bd04b0
commit 645fd3f0d6
  1. 41
      striker-ui/components/CommonFenceInputGroup.tsx
  2. 13
      striker-ui/types/APIFence.d.ts
  3. 2
      striker-ui/types/CommonFenceInputGroup.d.ts

@ -40,9 +40,13 @@ const MAP_TO_INPUT_BUILDER: MapToInputBuilder = {
), ),
}; };
const combineIds = (...pieces: string[]) => pieces.join('-');
const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({ const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({
fenceId, fenceId,
fenceTemplate, fenceTemplate,
previousFenceName,
previousFenceParameters,
}) => { }) => {
const fenceParameterElements = useMemo(() => { const fenceParameterElements = useMemo(() => {
let result: ReactNode; let result: ReactNode;
@ -50,6 +54,20 @@ const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({
if (fenceTemplate && fenceId) { if (fenceTemplate && fenceId) {
const { parameters: fenceParameters } = fenceTemplate[fenceId]; const { parameters: fenceParameters } = fenceTemplate[fenceId];
let mapToPreviousFenceParameterValues: FenceParameters = {};
if (previousFenceParameters) {
mapToPreviousFenceParameterValues = Object.entries(
previousFenceParameters,
).reduce<FenceParameters>((previous, [parameterId, parameterValue]) => {
const newKey = combineIds(fenceId, parameterId);
previous[newKey] = parameterValue;
return previous;
}, {});
}
const { optional: optionalInputs, required: requiredInputs } = const { optional: optionalInputs, required: requiredInputs } =
Object.entries(fenceParameters).reduce<{ Object.entries(fenceParameters).reduce<{
optional: ReactElement[]; optional: ReactElement[];
@ -71,15 +89,18 @@ const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({
const buildInput = const buildInput =
MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string; MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string;
const fenceJoinParameterId = `${fenceId}-${parameterId}`; const fenceJoinParameterId = combineIds(fenceId, parameterId);
const initialValue =
mapToPreviousFenceParameterValues[fenceJoinParameterId] ??
parameterDefault;
const parameterIsRequired = isRequired === '1'; const parameterIsRequired = isRequired === '1';
const parameterInput = buildInput({ const parameterInput = buildInput({
id: fenceJoinParameterId, id: fenceJoinParameterId,
isChecked: CHECKED_STATES.includes(parameterDefault), isChecked: CHECKED_STATES.includes(initialValue),
isRequired: parameterIsRequired, isRequired: parameterIsRequired,
label: parameterId, label: parameterId,
selectOptions: parameterSelectOptions, selectOptions: parameterSelectOptions,
value: parameterDefault, value: initialValue,
}); });
if (parameterIsRequired) { if (parameterIsRequired) {
@ -94,28 +115,34 @@ const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({
optional: [], optional: [],
required: [ required: [
MAP_TO_INPUT_BUILDER.string({ MAP_TO_INPUT_BUILDER.string({
id: `${fenceId}-name`, id: combineIds(fenceId, 'name'),
isRequired: true, isRequired: true,
label: 'Fence device name', label: 'Fence device name',
value: previousFenceName,
}), }),
], ],
}, },
); );
result = ( result = (
<> <FlexBox
sx={{
'& > div:first-child': { marginTop: 0 },
'& > div': { marginBottom: 0 },
}}
>
<ExpandablePanel expandInitially header="Required parameters"> <ExpandablePanel expandInitially header="Required parameters">
<FlexBox margin=".4em 0">{requiredInputs}</FlexBox> <FlexBox margin=".4em 0">{requiredInputs}</FlexBox>
</ExpandablePanel> </ExpandablePanel>
<ExpandablePanel header="Optional parameters"> <ExpandablePanel header="Optional parameters">
<FlexBox margin=".4em 0">{optionalInputs}</FlexBox> <FlexBox margin=".4em 0">{optionalInputs}</FlexBox>
</ExpandablePanel> </ExpandablePanel>
</> </FlexBox>
); );
} }
return result; return result;
}, [fenceId, fenceTemplate]); }, [fenceId, fenceTemplate, previousFenceName, previousFenceParameters]);
return <>{fenceParameterElements}</>; return <>{fenceParameterElements}</>;
}; };

@ -5,6 +5,19 @@ type FenceParameterType =
| 'select' | 'select'
| 'string'; | 'string';
type FenceParameters = {
[parameterId: string]: string;
};
type APIFenceOverview = {
[fenceUUID: string]: {
fenceAgent: string;
fenceParameters: FenceParameters;
fenceName: string;
fenceUUID: string;
};
};
type APIFenceTemplate = { type APIFenceTemplate = {
[fenceId: string]: { [fenceId: string]: {
actions: string[]; actions: string[];

@ -14,6 +14,8 @@ type MapToInputBuilder = Partial<
type CommonFenceInputGroupOptionalProps = { type CommonFenceInputGroupOptionalProps = {
fenceId?: string; fenceId?: string;
fenceTemplate?: APIFenceTemplate; fenceTemplate?: APIFenceTemplate;
previousFenceName?: string;
previousFenceParameters?: FenceParameters;
}; };
type CommonFenceInputGroupProps = CommonFenceInputGroupOptionalProps; type CommonFenceInputGroupProps = CommonFenceInputGroupOptionalProps;

Loading…
Cancel
Save