fix(orchestrator): validation order with ui:order (#1308)

Signed-off-by: Marek Libra <marek.libra@gmail.com>

Author: mareklibra

workspaces/orchestrator/.changeset/twenty-fishes-count.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator-form-react': patch
+---
+
+Fixing validation of multi-step wizard when ui:order is used by supplying correct step fields.

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/OrchestratorFormWrapper.tsx

@@ -32,6 +32,7 @@ import {
   useOrchestratorFormApiOrDefault,
 } from '@red-hat-developer-hub/backstage-plugin-orchestrator-form-api';
 
+import { getActiveStepKey } from '../utils/getSortedStepEntries';
 import { useStepperContext } from '../utils/StepperContext';
 import useValidator from '../utils/useValidator';
 import { AuthRequester } from './AuthRequester';
@@ -75,7 +76,8 @@ const FormComponent = (decoratorProps: FormDecoratorProps) => {
     if (!isMultiStep) {
       return undefined;
     }
-    return Object.keys(schema.properties || {})[activeStep];
+
+    return getActiveStepKey(schema, activeStep);
   };
 
   const onSubmit = async (_formData: JsonObject) => {

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/StepperObjectField.tsx

@@ -13,14 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { useMemo } from 'react';
 
 import { JsonObject } from '@backstage/types';
 
 import ObjectField from '@rjsf/core/lib/components/fields/ObjectField';
 import { ErrorSchema, FieldProps, IdSchema } from '@rjsf/utils';
-import type { JSONSchema7, JSONSchema7Definition } from 'json-schema';
-import get from 'lodash/get';
+import type { JSONSchema7 } from 'json-schema';
 
+import { getSortedStepEntries } from '../utils/getSortedStepEntries';
 import OrchestratorFormStepper, {
   OrchestratorFormStep,
   OrchestratorFormToolbar,
@@ -36,28 +37,16 @@ const StepperObjectField = ({
   errorSchema,
   ...props
 }: FieldProps<JsonObject, JSONSchema7>) => {
-  if (schema.properties === undefined) {
+  const sortedStepEntries = useMemo(
+    () => getSortedStepEntries(schema),
+    [schema],
+  );
+  if (sortedStepEntries === undefined) {
     throw new Error(
       "Stepper object field is not supported for schema that doesn't contain properties",
     );
   }
 
-  const uiOrder = get(schema, 'ui:order') as string[] | undefined;
-  let sortedStepEntries = Object.entries(schema.properties);
-  if (uiOrder && uiOrder.length > 0) {
-    sortedStepEntries = uiOrder
-      .map(key =>
-        schema.properties?.[key] ? [key, schema.properties[key]] : undefined,
-      )
-      .filter(Boolean) as [string, JSONSchema7Definition][];
-
-    Object.entries(schema.properties).forEach(([key, subSchema]) => {
-      if (!uiOrder.includes(key)) {
-        sortedStepEntries.push([key, subSchema]);
-      }
-    });
-  }
-
   const steps = sortedStepEntries.reduce<OrchestratorFormStep[]>(
     (prev, [key, subSchema]) => {
       if (typeof subSchema === 'boolean') {

workspaces/orchestrator/plugins/orchestrator-form-react/src/utils/getSortedStepEntries.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { JSONSchema7, JSONSchema7Definition } from 'json-schema';
+import get from 'lodash/get';
+
+/**
+ * Get step entries from the schema sorted by the ui:order property.
+ * If the ui:order property is not present, the step entries are sorted by the order of the properties in the schema.
+ *
+ * @param schema - The schema to get the sorted step entries from.
+ * @returns An array of [key, subSchema] pairs, a subSchema conforms a single wizard step.
+ */
+export const getSortedStepEntries = (
+  schema: JSONSchema7,
+): [string, JSONSchema7Definition][] | undefined => {
+  if (!schema.properties) {
+    return undefined;
+  }
+
+  let sortedStepEntries = Object.entries(schema.properties);
+
+  const uiOrder = get(schema, 'ui:order') as string[] | undefined;
+  if (uiOrder && uiOrder.length > 0) {
+    sortedStepEntries = uiOrder
+      .map(key =>
+        schema.properties?.[key] ? [key, schema.properties[key]] : undefined,
+      )
+      .filter(Boolean) as [string, JSONSchema7Definition][];
+
+    Object.entries(schema.properties).forEach(([key, subSchema]) => {
+      if (!uiOrder.includes(key)) {
+        sortedStepEntries.push([key, subSchema]);
+      }
+    });
+  }
+
+  return sortedStepEntries;
+};
+
+export const getActiveStepKey = (
+  schema: JSONSchema7,
+  activeStep: number,
+): string => {
+  const sortedStepEntries = getSortedStepEntries(schema) ?? [];
+  const activeKey = sortedStepEntries[activeStep]?.[0];
+  if (!activeKey) {
+    throw new Error(
+      `Active step key not found for activeStep: ${activeStep} in schema: ${JSON.stringify(schema)}`,
+    );
+  }
+  return activeKey;
+};

workspaces/orchestrator/plugins/orchestrator-form-react/src/utils/useValidator.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 The Backstage Authors
+ * Copyright Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { JsonObject } from '@backstage/types';
 
 import {
@@ -29,6 +30,7 @@ import validatorAjv from '@rjsf/validator-ajv8';
 import _validator from '@rjsf/validator-ajv8';
 import type { JSONSchema7 } from 'json-schema';
 
+import { getActiveStepKey } from './getSortedStepEntries';
 import { useStepperContext } from './StepperContext';
 
 // add the activeStep to the validator to force rjsf form to rerender when activeStep changes. This doesn't happen because it assumes function are equal.
@@ -51,7 +53,6 @@ const useValidator = (isMultiStepSchema: boolean) => {
       customValidate: CustomValidator<JsonObject, JSONSchema7, any>,
     ): ValidationData<JsonObject> => {
       let validationData = validatorAjv.validateFormData(formData, _schema);
-
       if (customValidate) {
         const errorHandler = customValidate(
           formData,
@@ -68,7 +69,7 @@ const useValidator = (isMultiStepSchema: boolean) => {
         return validationData;
       }
 
-      const activeKey = Object.keys(_schema.properties || {})[activeStep];
+      const activeKey = getActiveStepKey(_schema, activeStep);
       return {
         errors: validationData.errors.filter(err =>
           err.property?.startsWith(`.${activeKey}.`),