@orchestrator-ui/orchestrator-ui-components 6.7.5 → 6.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "6.7.5",
+    "version": "6.7.7",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -31,7 +31,7 @@
         "build": "npm run generate-version && tsup src/index.ts",
         "tsc": "tsc --noEmit",
         "lint": "eslint",
-        "dev": "npm run build -- --watch"
+        "dev": "tsup --watch"
     },
     "dependencies": {
         "@ag-ui/client": "0.0.39",
@@ -54,7 +54,7 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.10.0",
+        "pydantic-forms": "^0.10.2",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

package/src/components/WfoPydanticForm/Footer.tsx

@@ -12,15 +12,23 @@ import { EuiButton, EuiFlexGroup, EuiHorizontalRule } from '@elastic/eui';
 
 import { ConfirmationDialogContext } from '@/contexts';
 import { useOrchestratorTheme } from '@/hooks';
+import { WfoPlayCircle } from '@/icons';
+import { WfoThemeExtraColors } from '@/theme';
 
 import { RenderFormErrors } from './RenderFormErrors';
 
+type FooterProps = PydanticFormFooterProps & {
+    isTask?: boolean;
+};
+
 export const Footer = ({
     onCancel,
     onPrevious,
     hasNext,
     hasPrevious,
-}: PydanticFormFooterProps) => {
+    isTask = false,
+    buttons,
+}: FooterProps) => {
     const { theme } = useOrchestratorTheme();
     const t = useTranslations('pydanticForms.userInputForm');
     const { showConfirmDialog } = useContext(ConfirmationDialogContext);
@@ -34,24 +42,37 @@ export const Footer = ({
         }
     };
 
-    const PreviousButton = () => (
-        <EuiButton
-            data-testid="button-submit-form-previous"
-            id="button-submit-form-submit"
-            tabIndex={0}
-            fill
-            onClick={() => {
-                if (onPrevious) {
-                    onPrevious();
-                }
-            }}
-            color={'primary'}
-            iconSide="right"
-            aria-label={t('previous')}
-        >
-            {t('previous')}
-        </EuiButton>
-    );
+    const { next, previous } = buttons || {};
+
+    const PreviousButton = () => {
+        const previousButtonColor =
+            theme.colors[
+                (previous?.color as keyof WfoThemeExtraColors['colors']) ??
+                    'primary'
+            ];
+
+        return (
+            <EuiButton
+                data-testid="button-submit-form-previous"
+                id="button-submit-form-submit"
+                tabIndex={0}
+                fill
+                onClick={() => {
+                    if (onPrevious) {
+                        onPrevious();
+                    }
+                }}
+                css={{
+                    backgroundColor: previousButtonColor,
+                    padding: '12px',
+                }}
+                iconSide="right"
+                aria-label={t('previous')}
+            >
+                {previous?.text ?? t('previous')}
+            </EuiButton>
+        );
+    };
 
     const CancelButton = () => (
         <div
@@ -71,26 +92,45 @@ export const Footer = ({
     );
 
     const SubmitButton = () => {
-        const submitButtonLabel = hasNext ? t('next') : t('startWorkflow');
-
         /*
          * The submit button is used to submit the form data.
          * If there is a next step, it will be labeled as "Next".
          * If there is no next step, it will be labeled as "Start Workflow".
+         * If there is a label provided in the buttonNextProps, it will be used instead.
          * The button is styled with primary color and has an icon on the right side.
          * We don't use the disable property based on the form valid state here. When calculating the form valid state
          * react-hook-form might return a false negative - marking the form invalid - when not all fields have a defaultValue
          * which is a valid use case. https://chatgpt.com/share/6874ce66-35e8-800c-9434-725ff895ac44
          */
+
+        const submitButtonTranslated = hasNext
+            ? t('next')
+            : isTask
+            ? t('startTask')
+            : t('startWorkflow');
+
+        const submitButtonLabel = next?.text ?? submitButtonTranslated;
+        const submitIconType =
+            !hasNext && !next?.text
+                ? () => <WfoPlayCircle color="currentColor" />
+                : undefined;
+        const submitButtonColor = next?.color
+            ? (next?.color as keyof WfoThemeExtraColors['colors'])
+            : 'primary';
+
         return (
             <EuiButton
                 data-testid="button-submit-form-submit"
                 id="button-submit-form-submit"
                 tabIndex={0}
                 fill
-                color={'primary'}
+                css={{
+                    backgroundColor: submitButtonColor,
+                    padding: '12px',
+                }}
                 type="submit"
                 iconSide="right"
+                iconType={submitIconType}
                 aria-label={submitButtonLabel}
             >
                 {submitButtonLabel}

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -368,7 +368,7 @@ export const WfoPydanticForm = ({
 
         return {
             apiProvider: getPydanticFormProvider(),
-            footerRenderer: Footer,
+            footerRenderer: (props) => <Footer {...props} isTask={isTask} />,
             headerRenderer: Header,
             componentMatcherExtender: wfoComponentMatcherExtender,
             labelProvider: pydanticLabelProvider,
@@ -380,6 +380,7 @@ export const WfoPydanticForm = ({
     }, [
         customTranslations,
         getPydanticFormProvider,
+        isTask,
         pydanticLabelProvider,
         router.locale,
         wfoComponentMatcherExtender,

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.7.5';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.7.7';

package/src/hooks/useOrchestratorConfig.ts

@@ -1,13 +1,7 @@
-import { useState } from 'react';
-
 import { OrchestratorConfig } from '@/types';
 
 export const useOrchestratorConfig = (
     initialOrchestratorConfig: OrchestratorConfig,
 ) => {
-    const [orchestratorConfig] = useState(initialOrchestratorConfig);
-
-    return {
-        orchestratorConfig,
-    };
+    return { orchestratorConfig: initialOrchestratorConfig };
 };

package/src/messages/nl-NL.json

@@ -27,6 +27,7 @@
         "tableSettings": "Tabel instellingen",
         "openMenu": "Open menu",
         "incompatibleVersion": "Incompatibele versie",
+        "incompatibleVersionText": "De versie van de WFO UI is incompatibel met de version van orchestrator-core.",
         "minimumOrchestratorCoreVersion": "Minimale versie van orchestrator-core"
     },
     "common": {
@@ -182,6 +183,7 @@
             "usedInProductBlocks": "Gebruikt in product blocks"
         },
         "workflows": {
+            "workflowId": "ID",
             "name": "Workflow",
             "description": "Workflow beschrijving",
             "target": "Target",
@@ -189,6 +191,7 @@
             "createdAt": "Aangemaakt"
         },
         "tasks": {
+            "workflowId": "ID",
             "name": "Taak",
             "description": "Taak beschrijving",
             "target": "Target",
@@ -407,10 +410,10 @@
     },
     "settings": {
         "page": {
-            "engineStatusTitle": "Workflow engine status",
-            "workerStatusTitle": "Worker status",
             "flushButton": "Flush",
             "flushCacheSettingsTitle": "Flush cache instellingen",
+            "engineStatusTitle": "Workflow engine status",
+            "workerStatusTitle": "Worker status",
             "modifyEngine": "Wijzig engine status",
             "pauseEngine": "Pauseer  workflow engine",
             "runningProcesses": "Lopende processen",
@@ -422,6 +425,8 @@
             "numberOfQueuedJobs": "Aantal queued jobs",
             "numberOfRunningJobs": "Aantal running jobs",
             "numberOfWorkersOnline": "Aantal workers online",
+            "viewStatusPage": "Bekijk AO status pagina",
+            "aoStackStatus": "AO stack status",
             "noSettingsExposed": "Er zijn geen instellingen beschikbaar vanuit de backend. Om dit in te schakelen, raadpleeg de ",
             "settingsOverviewLink": "pagina Instellingenoverzicht in de documentatie"
         },
@@ -462,6 +467,7 @@
         }
     },
     "hamburgerMenu": {
+        "openMenu": "Open menu",
         "support": "Support",
         "softwareVersions": "Software Versies",
         "logout": "Logout",

package/tsconfig.json

@@ -2,14 +2,13 @@
     "extends": "@orchestrator-ui/tsconfig/base.json",
     "compilerOptions": {
         "strictNullChecks": true,
-        "rootDir": "./src",
-        "outDir": "./dist",
         "baseUrl": ".",
         "paths": {
             "@/*": ["./src/*"]
-        }
+        },
+        "noEmit": true
     },
-    "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+    "include": ["src", "./src/**/*.ts", "./src/**/*.tsx"],
     "exclude": [
         "node_modules",
         "**/*.stories.ts",

package/tsup.config.ts

@@ -1,10 +1,14 @@
 import { defineConfig } from 'tsup';
 
-export default defineConfig({
-    target: 'es2020',
-    format: ['esm'],
-    splitting: false,
+export default defineConfig((opts) => ({
+    entry: ['src/index.ts'],
     sourcemap: true,
-    dts: true,
-    tsconfig: 'tsconfig.build.json',
-});
+    splitting: false,
+    clean: !opts.watch,
+    dts: !opts.watch,
+    outDir: 'dist',
+    format: ['esm'],
+    platform: 'node',
+    target: 'es2022',
+    skipNodeModulesBundle: true,
+}));