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

package/package.json

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

package/src/components/WfoForms/formFields/ListAddField.tsx

@@ -53,9 +53,9 @@ function ListAdd({
         !disabled &&
         !(
             parent.maxCount! <=
-            Math.max(initialCount ?? 0, parent.value!.length)
+            Math.max(initialCount ?? 0, parent?.value!.length)
         );
-    const count = 1 + Math.max((initialCount ?? 0) - parent.value!.length, 0);
+    const count = 1 + Math.max((initialCount ?? 0) - parent?.value!.length, 0);
 
     function onAction(event: React.KeyboardEvent | React.MouseEvent) {
         if (

package/src/components/WfoForms/formFields/ListDelField.tsx

@@ -50,15 +50,20 @@ function ListDel({
     )[0];
 
     const limitNotReached =
-        !disabled && !(parent.minCount! >= parent.value!.length);
+        parent &&
+        !disabled &&
+        parent.minCount &&
+        parent.value &&
+        !(parent.minCount >= parent.value.length);
 
     function onAction(event: React.KeyboardEvent | React.MouseEvent) {
         if (
+            parent &&
             limitNotReached &&
             !readOnly &&
             (!('key' in event) || event.key === 'Enter')
         ) {
-            const value = parent.value!.slice();
+            const value = parent?.value!.slice();
             value.splice(nameIndex, 1);
             parent.onChange(value);
         }

package/src/components/WfoForms/formFields/deprecated/VlanField.tsx

@@ -227,10 +227,8 @@ function Vlan({
             : undefined;
 
     let message = '';
-    if (!imsIsLoading) {
-        if (missingInIms) {
-            message = t('widgets.vlan.missingInIms');
-        } else if (portIsTagged && nsiVlansOnly) {
+    if (!imsIsLoading && subscriptionId) {
+        if (portIsTagged && nsiVlansOnly) {
             const initialUsedVlans = schema
                 .getInitialValue('service_ports', {})
                 .map((sp: { vlan: string }) => sp.vlan);

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/icons/WfoTrash.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoTrash: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 24 24`}
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/trash</title>
+        <g id="Symbols" stroke={color} strokeWidth="1.5" fill="none">
+            <g id="icon/trash" fill="none">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                />
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/index.ts

@@ -33,3 +33,4 @@ export * from './WfoContactEnvelopeFill';
 export * from './WfoBell';
 export * from './WfoWarningTriangle';
 export * from './WfoExternalLink';
+export * from './WfoTrash';

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/rtk/endpoints/subscriptionInUseByRelationsList.ts

@@ -21,7 +21,7 @@ export const subscriptionInUseByRelationQuery = `
         subscriptions(
             first: ${NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS}
             after: 0
-            filterBy: [{field: "subscriptionId", value: $subscriptionIds},{field: "status", value: ${nonTerminalSubscriptionStatuses}}]
+            filterBy: [{field: "subscriptionId", value: $subscriptionIds},{field: "status", value: "${nonTerminalSubscriptionStatuses}"}]
           ) {
             page {
               product {

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 {