Show 'Start task' instead of 'Start workflow' for tasks + custom colors (#2332)

* Show 'Start task' button instead of 'Start workflow' for tasks + custom button texts and colors

* Adds changeset

* Update pydantic-forms ui to 0.10.1

Author: Georgi2704

.changeset/calm-dancers-greet.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+2246 Show 'Start task' button instead of 'Start workflow' for tasks + custom button texts and colors

package-lock.json

@@ -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.1",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

packages/orchestrator-ui-components/package.json

@@ -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}

packages/orchestrator-ui-components/src/components/WfoPydanticForm/Footer.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,