fix(striker-ui): sort fence parameters before display

striker-ui/components/CommonFenceInputGroup.tsx

@@ -69,60 +69,63 @@ const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({
       }
 
       const { optional: optionalInputs, required: requiredInputs } =
-        Object.entries(fenceParameters).reduce<{
+        Object.entries(fenceParameters)
-          optional: ReactElement[];
+          .sort(([a], [b]) => (a > b ? 1 : -1))
-          required: ReactElement[];
+          .reduce<{
-        }>(
+            optional: ReactElement[];
-          (
+            required: ReactElement[];
-            previous,
+          }>(
-            [
+            (
-              parameterId,
+              previous,
-              {
+              [
-                content_type: contentType,
+                parameterId,
-                default: parameterDefault,
+                {
-                options: parameterSelectOptions,
+                  content_type: contentType,
-                required: isRequired,
+                  default: parameterDefault,
-              },
+                  options: parameterSelectOptions,
-            ],
+                  required: isRequired,
-          ) => {
+                },
-            const { optional, required } = previous;
+              ],
-            const buildInput =
+            ) => {
-              MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string;
+              const { optional, required } = previous;
-
+              const buildInput =
-            const fenceJoinParameterId = combineIds(fenceId, parameterId);
+                MAP_TO_INPUT_BUILDER[contentType] ??
-            const initialValue =
+                MAP_TO_INPUT_BUILDER.string;
-              mapToPreviousFenceParameterValues[fenceJoinParameterId] ??
+
-              parameterDefault;
+              const fenceJoinParameterId = combineIds(fenceId, parameterId);
-            const parameterIsRequired = isRequired === '1';
+              const initialValue =
-            const parameterInput = buildInput({
+                mapToPreviousFenceParameterValues[fenceJoinParameterId] ??
-              id: fenceJoinParameterId,
+                parameterDefault;
-              isChecked: CHECKED_STATES.includes(initialValue),
+              const parameterIsRequired = isRequired === '1';
-              isRequired: parameterIsRequired,
+              const parameterInput = buildInput({
-              label: parameterId,
+                id: fenceJoinParameterId,
-              selectOptions: parameterSelectOptions,
+                isChecked: CHECKED_STATES.includes(initialValue),
-              value: initialValue,
+                isRequired: parameterIsRequired,
-            });
+                label: parameterId,
-
+                selectOptions: parameterSelectOptions,
-            if (parameterIsRequired) {
+                value: initialValue,
-              required.push(parameterInput);
+              });
-            } else {
+
-              optional.push(parameterInput);
+              if (parameterIsRequired) {
-            }
+                required.push(parameterInput);
-
+              } else {
-            return previous;
+                optional.push(parameterInput);
-          },
+              }
-          {
+
-            optional: [],
+              return previous;
-            required: [
+            },
-              MAP_TO_INPUT_BUILDER.string({
+            {
-                id: combineIds(fenceId, 'name'),
+              optional: [],
-                isRequired: true,
+              required: [
-                label: 'Fence device name',
+                MAP_TO_INPUT_BUILDER.string({
-                value: previousFenceName,
+                  id: combineIds(fenceId, 'name'),
-              }),
+                  isRequired: true,
-            ],
+                  label: 'Fence device name',
-          },
+                  value: previousFenceName,
-        );
+                }),
+              ],
+            },
+          );
 
       result = (
         <FlexBox