@orchestrator-ui/orchestrator-ui-components 1.25.0 → 1.26.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @orchestrator-ui/orchestrator-ui-components@1.25.0 build
+> @orchestrator-ui/orchestrator-ui-components@1.26.0 build
 > tsup src/index.ts --format esm --dts --tsconfig tsconfig.build.json
 
 CLI Building entry: src/index.ts
@@ -9,6 +9,6 @@
 ESM Build start
 DTS Build start
 ESM dist/index.js 2.15 MB
-ESM ⚡️ Build success in 925ms
-DTS ⚡️ Build success in 13888ms
-DTS dist/index.d.ts 173.36 KB
+ESM ⚡️ Build success in 803ms
+DTS ⚡️ Build success in 13528ms
+DTS dist/index.d.ts 173.37 KB

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @orchestrator-ui/orchestrator-ui-components@1.25.0 lint
+> @orchestrator-ui/orchestrator-ui-components@1.26.0 lint
 > eslint "src/**/*.ts*"
 
 

package/.turbo/turbo-test.log

@@ -1,19 +1,19 @@
 
-> @orchestrator-ui/orchestrator-ui-components@1.25.0 test
+> @orchestrator-ui/orchestrator-ui-components@1.26.0 test
 > jest
 
-PASS Orchestrator UI Components Tests src/components/WfoSubscription/utils/utils.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoForms/formFields/utils.spec.ts
 PASS Orchestrator UI Components Tests src/utils/date.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoForms/formFields/utils.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoSubscription/utils/utils.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTree/treeUtils.spec.ts
-PASS Orchestrator UI Components Tests src/pages/processes/timelineUtils.spec.ts
 PASS Orchestrator UI Components Tests src/utils/getProductNamesFromProcess.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoTable/WfoDataGridTable/WfodataGridColumns.spec.ts
+PASS Orchestrator UI Components Tests src/pages/processes/timelineUtils.spec.ts
 PASS Orchestrator UI Components Tests src/utils/string.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoTable/WfoDataGridTable/WfodataGridColumns.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/WfoTableWithFilter/updateQueryString.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoTable/utils/tableUtils.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/utils/tableConfigPersistence.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoTable/utils/tableUtils.spec.ts
 PASS Orchestrator UI Components Tests src/utils/resultFlattener.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoPageTemplate/WfoSidebar/utils/menuItemIsAllowed.spec.ts
 PASS Orchestrator UI Components Tests src/messages/getTranslationMessages.spec.ts
@@ -23,17 +23,17 @@ PASS Orchestrator UI Components Tests src/utils/getEnvironmentVariables.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/utils/columns.spec.ts
 PASS Orchestrator UI Components Tests src/utils/filterData.spec.ts
 PASS Orchestrator UI Components Tests src/utils/sortObjectKeys.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoWorkflowSteps/stepListUtils.spec.ts
 PASS Orchestrator UI Components Tests src/utils/getTokenName.spec.ts
-PASS Orchestrator UI Components Tests src/utils/environmentVariables.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoWorkflowSteps/stepListUtils.spec.ts
 PASS Orchestrator UI Components Tests src/utils/onlyUnique.spec.ts
+PASS Orchestrator UI Components Tests src/utils/environmentVariables.spec.ts
 PASS Orchestrator UI Components Tests src/utils/uuid.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoPageTemplate/WfoPageHeader/utils/toHexColorWithOpacity.spec.ts
-PASS Orchestrator UI Components Tests src/utils/getQueryVariablesForExport.spec.ts
 PASS Orchestrator UI Components Tests src/utils/getTypedFieldFromObject.spec.ts
+PASS Orchestrator UI Components Tests src/utils/getQueryVariablesForExport.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoPageTemplate/WfoPageHeader/utils/toHexColorWithOpacity.spec.ts
 
 Test Suites: 29 passed, 29 total
 Tests:       167 passed, 167 total
 Snapshots:   0 total
-Time:        3.979 s
+Time:        4.002 s
 Ran all test suites.

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @orchestrator-ui/orchestrator-ui-components
 
+## 1.26.0
+
+### Minor Changes
+
+- 3508ff8: Sort product block instance values by field name
+
+### Patch Changes
+
+- 257ef6e: Added number type to parseDate function
+
 ## 1.25.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -4039,7 +4039,7 @@ declare const getCsvFileNameWithDate: (fileNameWithoutExtension: string) => stri
 declare const csvDownloadHandler: <T extends object, U extends object>(dataFetchFunction: () => Promise<T | undefined>, dataMapper: (data: T) => U[], pageInfoMapper: (data: T) => GraphQLPageInfo, keyOrder: string[], filename: string, addToastFunction: (type: ToastTypes, text: string, title: string) => void, translationFunction: (translationKey: string, variables?: TranslationValues | undefined) => string) => () => Promise<void>;
 
 declare const getCurrentBrowserLocale: () => string;
-declare const parseDate: (date: string | null | undefined) => Date | null;
+declare const parseDate: (date: string | null | undefined | number) => Date | null;
 declare const calculateTimeDifference: (from: string, to: string) => string;
 declare const formatDate: (dateString: string | undefined | null) => string;
 declare const parseIsoString: (dateToStringParser: (date: Date | null) => string) => (date: string | null) => string;

package/dist/index.js

@@ -46629,7 +46629,8 @@ var getStyles6 = (wfoTheme) => {
   });
   const leftColumnStyle = css10({
     width: 250,
-    flexShrink: 0
+    flexShrink: 0,
+    paddingTop: `${theme.base / 4}px`
   });
   const leftColumnStyleWithAlignSelf = css10({
     width: 250,
@@ -46770,6 +46771,16 @@ var WfoSubscriptionProductBlock = ({
               (productBlockInstanceValue) => !HIDDEN_KEYS.includes(
                 productBlockInstanceValue.field
               )
+            ).sort(
+              ({ field: fieldNameA }, { field: fieldNameB }) => {
+                if (fieldNameA < fieldNameB) {
+                  return -1;
+                }
+                if (fieldNameA > fieldNameB) {
+                  return 1;
+                }
+                return 0;
+              }
             ).map((productBlockInstanceValue, index) => {
               if (productBlockInstanceValue && !isEmpty2(
                 productBlockInstanceValue.value
@@ -55010,19 +55021,28 @@ var WfoStepForm = ({
   processId
 }) => {
   const [isProcessing, setIsProcessing] = useState35(false);
+  const [hasError, setHasError] = useState35(false);
   const { theme } = useOrchestratorTheme();
   const [resumeProcess] = useResumeProcessMutation();
   const submitForm = (processInput) => {
     if (!processId) {
       return Promise.reject();
     }
-    return resumeProcess({ processId, userInputs: processInput }).then(
-      () => {
-        setIsProcessing(true);
+    return resumeProcess({ processId, userInputs: processInput }).unwrap().then(() => {
+      setIsProcessing(true);
+    }).catch((error) => {
+      if ((error == null ? void 0 : error.status) !== 510 /* FormNotComplete */) {
+        if ((error == null ? void 0 : error.status) === 400 /* BadRequest */) {
+          throw error;
+        }
+        console.error(error);
+        setHasError(true);
+      } else {
+        throw error;
       }
-    );
+    });
   };
-  return /* @__PURE__ */ jsx161(EuiFlexItem25, { css: { margin: theme.size.m }, children: isProcessing && /* @__PURE__ */ jsx161(WfoLoading, {}) || /* @__PURE__ */ jsx161(
+  return /* @__PURE__ */ jsx161(EuiFlexItem25, { css: { margin: theme.size.m }, children: hasError && /* @__PURE__ */ jsx161(WfoError, {}) || isProcessing && /* @__PURE__ */ jsx161(WfoLoading, {}) || /* @__PURE__ */ jsx161(
     UserInputFormWizard,
     {
       stepUserInput: userInputForm,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.25.0",
+    "version": "1.26.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx

@@ -212,6 +212,20 @@ export const WfoSubscriptionProductBlock = ({
                                                 productBlockInstanceValue.field,
                                             ),
                                     )
+                                    .sort(
+                                        (
+                                            { field: fieldNameA },
+                                            { field: fieldNameB },
+                                        ) => {
+                                            if (fieldNameA < fieldNameB) {
+                                                return -1;
+                                            }
+                                            if (fieldNameA > fieldNameB) {
+                                                return 1;
+                                            }
+                                            return 0;
+                                        },
+                                    )
                                     .map((productBlockInstanceValue, index) => {
                                         if (
                                             productBlockInstanceValue &&

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts

@@ -36,6 +36,7 @@ export const getStyles = (wfoTheme: WfoTheme) => {
     const leftColumnStyle = css({
         width: 250,
         flexShrink: 0,
+        paddingTop: `${theme.base / 4}px`,
     });
 
     const leftColumnStyleWithAlignSelf = css({

package/src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx

@@ -2,8 +2,9 @@ import React, { useState } from 'react';
 
 import { EuiFlexItem } from '@elastic/eui';
 
-import { UserInputFormWizard, WfoLoading } from '@/components';
+import { UserInputFormWizard, WfoError, WfoLoading } from '@/components';
 import { useOrchestratorTheme } from '@/hooks';
+import { HttpStatus } from '@/rtk';
 import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
 import { InputForm } from '@/types/forms';
 
@@ -19,6 +20,7 @@ export const WfoStepForm = ({
     processId,
 }: WfoStepFormProps) => {
     const [isProcessing, setIsProcessing] = useState<boolean>(false);
+    const [hasError, setHasError] = useState<boolean>(false);
     const { theme } = useOrchestratorTheme();
     const [resumeProcess] = useResumeProcessMutation();
 
@@ -27,16 +29,28 @@ export const WfoStepForm = ({
             return Promise.reject();
         }
 
-        return resumeProcess({ processId, userInputs: processInput }).then(
-            () => {
+        return resumeProcess({ processId, userInputs: processInput })
+            .unwrap()
+            .then(() => {
                 setIsProcessing(true);
-            },
-        );
+            })
+            .catch((error) => {
+                if (error?.status !== HttpStatus.FormNotComplete) {
+                    if (error?.status === HttpStatus.BadRequest) {
+                        // Rethrow the error so userInputForm can catch it and display validation errors
+                        throw error;
+                    }
+                    console.error(error);
+                    setHasError(true);
+                } else {
+                    throw error;
+                }
+            });
     };
 
     return (
         <EuiFlexItem css={{ margin: theme.size.m }}>
-            {(isProcessing && <WfoLoading />) || (
+            {(hasError && <WfoError />) || (isProcessing && <WfoLoading />) || (
                 <UserInputFormWizard
                     stepUserInput={userInputForm}
                     stepSubmit={submitForm}

package/src/utils/date.ts

@@ -2,7 +2,9 @@ import { Locale } from '../types/types';
 
 export const getCurrentBrowserLocale = () => window.navigator.language;
 
-export const parseDate = (date: string | null | undefined): Date | null => {
+export const parseDate = (
+    date: string | null | undefined | number,
+): Date | null => {
     if (date === null || date === undefined || date === '') {
         return null;
     }