@orchestrator-ui/orchestrator-ui-components 1.14.2 → 1.15.0

package/package.json

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

package/src/contexts/OrchestratorConfigContext.tsx

@@ -17,6 +17,8 @@ export const OrchestratorConfigContext = createContext<OrchestratorConfig>({
     authActive: true,
     useWebSockets: false,
     useThemeToggle: false,
+    showWorkflowInformationLink: false,
+    workflowInformationLinkUrl: '',
 });
 
 export type OrchestratorConfigProviderProps = {

package/src/messages/en-GB.json

@@ -210,7 +210,8 @@
             "lastUpdate": "Last update",
             "relatedSubscriptions": "Related subscriptions",
             "subscriptions": "{count, plural, =0 {0 subscriptions} =1 {1 subscription} other {# subscriptions}}",
-            "customer": "Customer"
+            "customer": "Customer",
+            "openWorkflowTaskInfo": "open workflow/task information in a new tab"
         },
         "steps": {
             "taskSteps": "Task steps",

package/src/messages/nl-NL.json

@@ -209,7 +209,8 @@
             "lastUpdate": "Laatste update",
             "relatedSubscriptions": "Gerelateerde subscriptions",
             "subscriptions": "{count, plural, =0 {0 subscriptions} =1 {1 subscriptie} other {# subscriptions}}",
-            "customer": "Customer"
+            "customer": "Customer",
+            "openWorkflowTaskInfo": "open workflow-/taakinformatie op een nieuw tabblad"
         },
         "steps": {
             "steps": "Workflow stappen",

package/src/pages/processes/WfoProcessDetail.tsx

@@ -30,13 +30,14 @@ import {
     usePolicy,
 } from '@/hooks';
 import { WfoRefresh, WfoXCircleFill } from '@/icons';
-import { ProcessDetail, ProcessStatus } from '@/types';
-import { parseDateRelativeToToday, parseIsoString } from '@/utils';
-
 import {
     RenderDirection,
     WfoProcessListSubscriptionsCell,
-} from './WfoProcessListSubscriptionsCell';
+    WfoProductInformationWithLink,
+} from '@/pages';
+import { ProcessDetail, ProcessStatus } from '@/types';
+import { parseDateRelativeToToday, parseIsoString } from '@/utils';
+
 import { getIndexOfCurrentStep } from './timelineUtils';
 
 interface ProcessHeaderValueProps {
@@ -192,7 +193,10 @@ export const WfoProcessDetail = ({
                 <EuiFlexItem>
                     <EuiPageHeader pageTitle={pageTitle} />
                     <EuiSpacer />
-                    <EuiText size="s">{productNames}</EuiText>
+                    <WfoProductInformationWithLink
+                        productNames={productNames}
+                        workflowName={processDetail?.workflowName ?? ''}
+                    />
                 </EuiFlexItem>
                 <EuiFlexGroup
                     justifyContent="flexEnd"

package/src/pages/processes/WfoProductInformationWithLink.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButtonIcon, EuiFlexGroup, EuiText, EuiToolTip } from '@elastic/eui';
+
+import { useGetOrchestratorConfig } from '@/hooks';
+
+interface WfoProductInformationWithLinkProps {
+    workflowName: string;
+    productNames: string;
+}
+
+export const WfoProductInformationWithLink = ({
+    workflowName,
+    productNames,
+}: WfoProductInformationWithLinkProps) => {
+    const { workflowInformationLinkUrl, showWorkflowInformationLink } =
+        useGetOrchestratorConfig();
+    const t = useTranslations('processes.detail');
+    const docsUrl = workflowInformationLinkUrl + workflowName;
+    return (
+        <EuiFlexGroup gutterSize={'s'} alignItems={'center'}>
+            {showWorkflowInformationLink && (
+                <EuiToolTip content={t('openWorkflowTaskInfo')}>
+                    <a href={docsUrl} target="_blank">
+                        <EuiButtonIcon iconSize={'l'} iconType={'iInCircle'} />
+                    </a>
+                </EuiToolTip>
+            )}
+            <EuiText size="s">{productNames}</EuiText>
+        </EuiFlexGroup>
+    );
+};

package/src/pages/processes/index.ts

@@ -1,3 +1,4 @@
 export * from './WfoProcessListSubscriptionsCell';
 export * from './WfoProcessDetailPage';
 export * from './WfoStartProcessPage';
+export * from './WfoProductInformationWithLink';

package/src/types/types.ts

@@ -521,9 +521,11 @@ export type OrchestratorConfig = {
     processesEndpoint: string;
     subscriptionActionsEndpoint: string;
     subscriptionProcessesEndpoint: string;
+    workflowInformationLinkUrl: string;
     authActive: boolean;
     useWebSockets: boolean;
     useThemeToggle: boolean;
+    showWorkflowInformationLink: boolean;
 };
 
 export enum ColorModes {