@abgov/jsonforms-components 1.55.0 → 1.56.0

package/index.esm.js

@@ -4458,8 +4458,6 @@ const GoAInputText = props => {
         if (schema && schema.title === sinTitle && value !== '') {
           formattedValue = formatSin(value);
         }
-        /* TODO: add the unit test, when the solution is used */
-        /* istanbul ignore next */
         if (isVisited === false && setIsVisited) {
           setIsVisited();
         }
@@ -4470,11 +4468,9 @@ const GoAInputText = props => {
         });
       },
       onBlur: (name, value) => {
-        /* istanbul ignore next */
         if (isVisited === false && setIsVisited) {
           setIsVisited();
         }
-        /* istanbul ignore next */
         onBlurForTextControl({
           name,
           controlProps: props,
@@ -4528,8 +4524,6 @@ const MultiLineText = props => {
     // maxCount={schema.maxLength || 256}
     onKeyPress: (name, value, key) => {
       const newValue = autoCapitalize ? value.toUpperCase() : value;
-      /* TODO: add the unit test, when the solution is used */
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
@@ -4548,8 +4542,6 @@ const MultiLineText = props => {
       });
     },
     onChange: (name, value) => {
-      /* TODO: add the unit test, when the solution is used */
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
@@ -4642,8 +4634,6 @@ const GoADateInput = props => {
     disabled: !enabled,
     readonly: readOnly,
     onChange: (name, value) => {
-      /* TODO: add the unit test, when the solution is used */
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
@@ -4662,11 +4652,9 @@ const GoADateInput = props => {
       });
     },
     onBlur: (name, value) => {
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
-      /* istanbul ignore next */
       onBlurForDateControl({
         name,
         value,
@@ -4719,11 +4707,9 @@ const GoANumberInput = props => {
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     onBlur: (name, value) => {
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
-      /* istanbul ignore next */
       onBlurForNumericControl({
         name,
         value,
@@ -4731,8 +4717,6 @@ const GoANumberInput = props => {
       });
     },
     onChange: (name, value) => {
-      /* TODO: add the unit test, when the solution is used */
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
@@ -4787,10 +4771,7 @@ const GoAInputInteger = props => {
     placeholder: placeholder,
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-    /* istanbul ignore next */
     onBlur: (name, value) => {
-      /* TODO: add the unit test, when the solution is used */
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
@@ -4801,8 +4782,6 @@ const GoAInputInteger = props => {
       });
     },
     onChange: (name, value) => {
-      /* TODO: add the unit test, when the solution is used */
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
@@ -4822,7 +4801,6 @@ const GoAInputIntegerControl = withJsonFormsControlProps(GoAIntegerControl);
 
 const GoADateTimeInput = props => {
   var _a, _b, _c, _d, _e, _f, _g;
-  // eslint-disable-next-line
   const {
     data,
     config,
@@ -4865,11 +4843,9 @@ const GoADateTimeInput = props => {
       });
     },
     onBlur: (name, value) => {
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
-      /* istanbul ignore next */
       onBlurForDateControl({
         name,
         value,
@@ -4915,16 +4891,11 @@ const GoATimeInput = props => {
     readonly: readOnly,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     onBlur: (name, value) => {
-      /* istanbul ignore next */
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
-      /* istanbul ignore next */
       handleChange(path, value === '' ? undefined : value);
     },
-    // Dont use handleChange in the onChange event, use the keyPress or onBlur.
-    // If you use it onChange along with keyPress event it will cause a
-    // side effect that causes the validation to render when it shouldnt.
     onChange: (name, value) => {},
     onKeyPress: (name, value, key) => {
       onKeyPressForTimeControl({
@@ -6009,6 +5980,7 @@ const stepperReducer = (state, action) => {
           state.hasNextButton = id <= lastId;
           state.hasPrevButton = id !== 0;
           state.isOnReview = false;
+          state.maxReachedStep = Math.max(state.maxReachedStep, activeId);
           return Object.assign({}, state);
         }
       }
@@ -6078,7 +6050,8 @@ const createStepperContextInitData = props => {
     hasPrevButton: activeId > 0 && activeId !== (categories === null || categories === void 0 ? void 0 : categories.length),
     path,
     isOnReview: activeId === (categories === null || categories === void 0 ? void 0 : categories.length),
-    isValid: valid === true
+    isValid: valid === true,
+    maxReachedStep: 0
   };
 };
 const JsonFormsStepperContext = /*#__PURE__*/createContext(undefined);
@@ -6115,6 +6088,17 @@ const JsonFormsStepperContextProvider = ({
       selectCategory: id => {
         return stepperState.categories[id];
       },
+      validatePage: id => {
+        var _a;
+        stepperDispatch({
+          type: 'update/category',
+          payload: {
+            errors: (_a = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _a === void 0 ? void 0 : _a.errors,
+            id,
+            ajv
+          }
+        });
+      },
       goToPage: (id, updateCategoryId) => {
         var _a, _b, _c;
         ajv.validate(schema, ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.data) || {});
@@ -6147,6 +6131,7 @@ const JsonFormsStepperContextProvider = ({
   }, [stepperDispatch, stepperState, (_a = ctx.core) === null || _a === void 0 ? void 0 : _a.errors]);
   useEffect(() => {
     if ((context === null || context === void 0 ? void 0 : context.isProvided) === true) {
+      /* The block is used to cache the state for the tenant web app review editor  */
       stepperDispatch({
         type: 'update/uischema',
         payload: {
@@ -6155,21 +6140,10 @@ const JsonFormsStepperContextProvider = ({
           }))
         }
       });
+      context.goToPage(stepperState.maxReachedStep);
+      context.goToPage(stepperState.activeId);
     }
   }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema)]);
-  useEffect(() => {
-    const newState = createStepperContextInitData(Object.assign(Object.assign({}, StepperProps), {
-      activeId: stepperState === null || stepperState === void 0 ? void 0 : stepperState.activeId
-    }));
-    if (JSON.stringify(newState) !== JSON.stringify(stepperState)) {
-      stepperDispatch({
-        type: 'update/uischema',
-        payload: {
-          state: newState
-        }
-      });
-    }
-  }, [StepperProps]);
   return jsx(JsonFormsStepperContext.Provider, {
     value: context,
     children: children
@@ -6429,17 +6403,19 @@ const FormPagesView = props => {
   } = props;
   const enumerators = useContext(JsonFormContext);
   const formStepperCtx = useContext(JsonFormsStepperContext);
+  const {
+    validatePage,
+    goToPage
+  } = formStepperCtx;
   const {
     categories,
     isOnReview,
-    isValid
+    isValid,
+    activeId
   } = formStepperCtx.selectStepperState();
   const submitFormFunction = enumerators === null || enumerators === void 0 ? void 0 : enumerators.submitFunction.get('submit-form');
   const submitForm = submitFormFunction && submitFormFunction();
-  uischema.options || {};
   const [isOpen, setIsOpen] = useState(false);
-  useState(false);
-  const [selectedPage, setSelectedPage] = useState(0);
   const handleSubmit = () => {
     if (submitForm) {
       submitForm(data);
@@ -6450,8 +6426,9 @@ const FormPagesView = props => {
   const onCloseModal = () => {
     setIsOpen(false);
   };
-  // eslint-disable-next-line
-  uischema.options;
+  useEffect(() => {
+    validatePage(activeId);
+  }, [data]);
   return jsxs("div", {
     "data-testid": "form-stepper-test-wrapper",
     children: [jsx(Visible, {
@@ -6471,7 +6448,7 @@ const FormPagesView = props => {
               cells,
               data
             };
-            if (index === selectedPage && !isOnReview) {
+            if (index === activeId && !isOnReview) {
               return jsxs("div", {
                 "data-testid": `step_${index}-content-pages`,
                 style: {
@@ -6479,7 +6456,7 @@ const FormPagesView = props => {
                 },
                 children: [index > 0 && jsx(BackButton, {
                   testId: "back-button",
-                  link: () => setSelectedPage(index - 1),
+                  link: () => goToPage(activeId - 1),
                   text: "Back"
                 }), jsxs(PageRenderPadding, {
                   children: [jsxs("h3", {
@@ -6488,16 +6465,19 @@ const FormPagesView = props => {
                 }), jsx(PageRenderPadding, {
                   children: index !== categories.length - 1 ? jsx(GoAButton, {
                     type: "submit",
-                    onClick: () => setSelectedPage(index + 1),
-                    disabled: !category.isValid,
+                    onClick: () => goToPage(activeId + 1),
+                    disabled: !(category.isValid && category.isCompleted),
                     testId: "pages-save-continue-btn",
                     children: "Save and continue"
-                  }) : jsx(GoAButton, {
-                    type: 'primary',
-                    onClick: handleSubmit,
-                    disabled: !isValid,
-                    testId: "pages-submit-btn",
-                    children: "Submit"
+                  }) : jsx(GoAButtonGroup, {
+                    alignment: "end",
+                    children: jsx(GoAButton, {
+                      type: 'primary',
+                      onClick: handleSubmit,
+                      disabled: !isValid,
+                      testId: "pages-submit-btn",
+                      children: "Submit"
+                    })
                   })
                 })]
               }, `${category.label}`);
@@ -6543,8 +6523,8 @@ const categoriesAreValid = uischema => {
   return isValid;
 };
 const CategorizationStepperRendererTester = rankWith(2, and(uiTypeIs('Categorization'), categoriesAreValid, uischema => {
-  var _a;
-  return ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.variant) === 'stepper';
+  var _a, _b;
+  return ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.variant) === 'stepper' || ((_b = uischema.options) === null || _b === void 0 ? void 0 : _b.variant) === undefined;
 }));
 const CategorizationPagesRendererTester = rankWith(2, and(uiTypeIs('Categorization'), categoriesAreValid, uischema => {
   var _a;
@@ -9698,14 +9678,10 @@ const hasElements = schema => {
 const isEmptyElements = schema => {
   return 'elements' in schema && schema.elements !== undefined && schema.elements !== null && Object.keys(schema.elements).length === 0;
 };
-const hasVariant = schema => {
-  return 'options' in schema && schema.options !== undefined && schema.options !== null;
-};
 
 const errCategorizationHasNonCategories = "Each element of 'Categorizations' must be of type 'Category'";
 const errCategorizationHasNoElements = 'A Categorization must contain Categories.';
 const errNoElements = type => `A ${type} must contain elements.`;
-const errCategorizationHasNoVariant = 'A Categorization must contain Options with a variant.';
 const errMissingScope = 'A Control must have a scope';
 const errMalformedScope = scope => `Scope ${scope} must be prefixed with '#/'.`;
 const errUnknownScope = scope => `Failed to render: unknown scope ${scope}`;
@@ -9750,9 +9726,6 @@ const getUISchemaErrors = (uiSchema, schema) => {
     if (!hasElements(uiSchema)) {
       return errCategorizationHasNoElements;
     }
-    if (!hasVariant(uiSchema)) {
-      return errCategorizationHasNoVariant;
-    }
     // ensure each element has type Category, and that each category
     // has elements
     if (isLayout(uiSchema)) {
@@ -9834,8 +9807,9 @@ const createDefaultAjv = (...schemas) => {
   });
   ajv.addSchema(schemas);
   addErrors(ajv);
-  ajv.addFormat('file-urn', /^urn:ads:platform:file-service:v[0-9]:\/files\/[a-zA-Z0-9.-]*$/);
   addFormats(ajv);
+  ajv.addFormat('file-urn', /^urn:ads:platform:file-service:v[0-9]:\/files\/[a-zA-Z0-9.-]*$/);
+  ajv.addFormat('time', /^([01]\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/);
   return ajv;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.55.0",
+  "version": "1.56.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/FormStepper/context/StepperContext.d.ts

@@ -18,6 +18,7 @@ export interface JsonFormsStepperContextProps {
     selectPath: () => string;
     selectCategory: (id: number) => CategoryState;
     goToPage: (id: number, updateCategoryId?: number) => void;
+    validatePage: (id: number) => void;
     isProvided?: boolean;
 }
 export declare const JsonFormsStepperContext: import("react").Context<JsonFormsStepperContextProps | undefined>;

package/src/lib/Controls/FormStepper/context/types.d.ts

@@ -23,5 +23,6 @@ export interface StepperContextDataType {
     path: string;
     isOnReview: boolean;
     isValid: boolean;
+    maxReachedStep: number;
 }
 export type CategorizationElement = Category | Categorization;

package/src/lib/ErrorHandling/schemaValidation.d.ts

@@ -2,7 +2,6 @@ import { JsonSchema, UISchemaElement } from '@jsonforms/core';
 export declare const errCategorizationHasNonCategories = "Each element of 'Categorizations' must be of type 'Category'";
 export declare const errCategorizationHasNoElements = "A Categorization must contain Categories.";
 export declare const errNoElements: (type: string) => string;
-export declare const errCategorizationHasNoVariant = "A Categorization must contain Options with a variant.";
 export declare const errMissingScope = "A Control must have a scope";
 export declare const errMalformedScope: (scope: string) => string;
 export declare const errUnknownScope: (scope: string) => string;