@orchestrator-ui/orchestrator-ui-components 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.8.0",
+    "version": "0.9.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",
@@ -19,7 +19,7 @@
         "axios": "^1.6.5",
         "graphql-request": "^6.1.0",
         "invariant": "^2.2.4",
-        "moment": "2.29.4",
+        "moment": "^2.29.4",
         "moment-timezone": "^0.5.43",
         "next-auth": "^4.23.1",
         "next-intl": "^3.4.1",
@@ -55,20 +55,20 @@
         "@types/jest": "^29.5.8",
         "@types/object-hash": "^3.0.6",
         "@types/scroll-into-view": "^1.16.3",
-        "esbuild": "^0.19.9",
+        "esbuild": "^0.20.0",
         "esbuild-jest": "^0.5.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-watch-typeahead": "^2.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.2.1",
+        "storybook": "^7.6.15",
         "tsup": "^8.0.1",
-        "uniforms-bridge-simple-schema-2": "^3.8.1",
-        "typescript": "^5.3.2"
+        "typescript": "^5.3.2",
+        "uniforms-bridge-simple-schema-2": "^3.8.1"
     },
     "peerDependencies": {
-        "@elastic/eui": "^92.1.0",
+        "@elastic/eui": "^93.1.1",
         "next": "^14.0.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

package/src/api/index.ts

@@ -19,11 +19,12 @@ import {
     IpBlock,
     IpPrefix,
     NodeSubscription,
-} from '../components/WfoForms/formFields/surf/types';
-import { ProductDefinition } from '../types';
+} from '@/components/WfoForms/formFields/surf/types';
+import { ProductDefinition } from '@/types';
+
 import { getAxiosInstance } from './axios';
 
-const FORMS_ENDPOINT = 'surf/forms/';
+const CIM_FORMS_ENDPOINT = 'surf/cim/forms/';
 const PROCESS_ENDPOINT = 'processes/';
 const PRODUCTS_ENDPOINT = 'products/';
 
@@ -146,7 +147,7 @@ export class ApiClient extends ApiClientInterface {
         userInputs: object[],
     ): Promise<{ id: string }> => {
         return this.postPutJson(
-            `${FORMS_ENDPOINT}${formKey}`,
+            `${CIM_FORMS_ENDPOINT}${formKey}`,
             userInputs,
             'post',
             false,

package/src/components/WfoForms/AutoFieldLoader.tsx

@@ -4,6 +4,7 @@ import { AutoField } from 'uniforms-unstyled';
 import {
     AcceptField,
     BoolField,
+    ConnectedSelectField,
     ContactPersonNameField,
     CustomerField,
     DateField,
@@ -20,7 +21,6 @@ import {
     OptGroupField,
     ProductField,
     RadioField,
-    SelectField,
     SubscriptionField,
     SubscriptionSummaryField,
     SummaryField,
@@ -91,7 +91,9 @@ export function autoFieldFunction(
     }
 
     if (allowedValues && format !== 'accept') {
-        return checkboxes && fieldType !== Array ? RadioField : SelectField;
+        return checkboxes && fieldType !== Array
+            ? RadioField
+            : ConnectedSelectField;
     } else {
         switch (fieldType) {
             case Array:

package/src/components/WfoForms/CreateForm.tsx

@@ -14,7 +14,8 @@
  */
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { Form, FormNotCompleteResponse } from '../../types/forms';
+import { Form, FormNotCompleteResponse } from '@/types/forms';
+
 import UserInputFormWizard from './UserInputFormWizard';
 import { useAxiosApiClient } from './useAxiosApiClient';
 
@@ -23,10 +24,11 @@ interface IProps {
     preselectedInput?: unknown;
     formKey: string;
     handleSubmit: (userInputs: any) => void;
+    handleCancel?: () => void;
 }
 
 export function CreateForm(props: IProps) {
-    const { preselectedInput, formKey, handleSubmit } = props;
+    const { preselectedInput, formKey, handleSubmit, handleCancel } = props;
     const [form, setForm] = useState<Form>({});
     const { stepUserInput, hasNext } = form;
     const apiClient = useAxiosApiClient();
@@ -61,7 +63,7 @@ export function CreateForm(props: IProps) {
                 <UserInputFormWizard
                     stepUserInput={stepUserInput}
                     validSubmit={submit}
-                    cancel={() => alert('cancelled')}
+                    cancel={handleCancel}
                     hasNext={hasNext ?? false}
                     isTask={false}
                 />

package/src/components/WfoForms/UserInputForm.tsx

@@ -559,7 +559,11 @@ function UserInputForm({
                 color={buttons.next.color ?? 'primary'}
                 isLoading={processing}
                 type="submit"
-                iconType={() => <WfoPlayFill color="#FFF" />}
+                iconType={
+                    buttons.next.text
+                        ? undefined
+                        : () => <WfoPlayFill color="#FFF" />
+                }
                 iconSide="right"
             >
                 {buttons.next.text ?? t(nextButtonTranslationKey)}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { connectField } from 'uniforms';
+
+import type { SelectFieldProps } from './SelectField';
+import { UnconnectedSelectField } from './SelectField';
+
+/*
+ The selectField has a connected and unconnected version. When a SelectField is called from another field that
+ is connected it can cause errors as described here: https://github.com/workfloworchestrator/orchestrator-ui-library/issues/681
+ When called directly it will still need the props that the connectField function provides so it has a connected version as well.
+*/
+const ConnectedSelect = (props: SelectFieldProps) => {
+    return <UnconnectedSelectField {...props} />;
+};
+
+export const ConnectedSelectField = connectField(ConnectedSelect, {
+    kind: 'leaf',
+});

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

@@ -50,9 +50,16 @@ declare module 'uniforms' {
     interface FilterDOMProps {
         customerId: never;
         customerKey: never;
+        organisationKey: never;
+        organisationId: never;
     }
 }
-filterDOMProps.register('customerId', 'customerKey');
+filterDOMProps.register(
+    'customerId',
+    'customerKey',
+    'organisationKey',
+    'organisationId',
+);
 
 function ContactPersonName({
     disabled,

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

@@ -19,7 +19,7 @@ import { connectField } from 'uniforms';
 
 import { useGetCustomersQuery } from '@/rtk/endpoints';
 
-import { SelectField, SelectFieldProps } from './SelectField';
+import { SelectFieldProps, UnconnectedSelectField } from './SelectField';
 
 export type CustomerFieldProps = Omit<
     SelectFieldProps,
@@ -40,11 +40,11 @@ function Customer({ ...props }: CustomerFieldProps) {
     }
 
     return (
-        <SelectField
+        <UnconnectedSelectField
             {...props}
             allowedValues={Array.from(uuidCustomerNameMap.keys())}
             transform={(uuid: string) => uuidCustomerNameMap.get(uuid) || uuid}
-            disabled={isLoading}
+            disabled={isLoading || props.disabled}
             placeholder={
                 !isLoading
                     ? t('widgets.customer.placeholder')

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

@@ -19,7 +19,7 @@ import { useTranslations } from 'next-intl';
 import { connectField, filterDOMProps } from 'uniforms';
 
 import { useAxiosApiClient } from '../useAxiosApiClient';
-import { SelectField, SelectFieldProps } from './SelectField';
+import { SelectFieldProps, UnconnectedSelectField } from './SelectField';
 import { ImsNode } from './surf/types';
 
 export type ImsNodeIdFieldProps = {
@@ -91,7 +91,7 @@ function ImsNodeId({
         }, {}) ?? {};
 
     return (
-        <SelectField
+        <UnconnectedSelectField
             name=""
             {...props}
             allowedValues={Object.keys(imsNodeIdLabelLookup)}

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

@@ -20,12 +20,12 @@ that seems to be impossible with the new webpack.
 import React from 'react';
 
 import { get } from 'lodash';
-import { connectField, joinName, useField, useForm } from 'uniforms';
+import { joinName, useField, useForm } from 'uniforms';
 
 import { ListField, ListFieldProps } from './ListField';
 import { ListItemField } from './ListItemField';
 // Avoid circular deps
-import { SelectField } from './SelectField';
+import { UnconnectedSelectField } from './SelectField';
 import { FieldProps } from './types';
 
 export type ListSelectFieldProps = FieldProps<
@@ -33,11 +33,12 @@ export type ListSelectFieldProps = FieldProps<
     { allowedValues?: string[]; transform?(value: string): string }
 >;
 
-function ListSelect({
+export function ListSelectField({
     allowedValues = [],
     fieldType,
     name,
     transform,
+    ...props
 }: ListSelectFieldProps) {
     const nameArray = joinName(null, name);
     let parentName = joinName(nameArray.slice(0, -1));
@@ -70,23 +71,25 @@ function ListSelect({
         return (
             <ListField name={name}>
                 <ListItemField name="$">
-                    <SelectField
+                    <UnconnectedSelectField
                         name=""
                         transform={transform}
                         allowedValues={allowedValues}
+                        fieldType={fieldType}
+                        {...props}
                     />
                 </ListItemField>
             </ListField>
         );
     } else {
         return (
-            <SelectField
+            <UnconnectedSelectField
                 name=""
                 transform={transform}
                 allowedValues={allowedValues}
+                fieldType={fieldType}
+                {...props}
             />
         );
     }
 }
-
-export const ListSelectField = connectField(ListSelect, { kind: 'leaf' });

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

@@ -18,7 +18,7 @@ import { useTranslations } from 'next-intl';
 import { connectField, filterDOMProps } from 'uniforms';
 
 import { useAxiosApiClient } from '../useAxiosApiClient';
-import { SelectField, SelectFieldProps } from './SelectField';
+import { SelectFieldProps, UnconnectedSelectField } from './SelectField';
 
 export type LocationCodeFieldProps = { locationCodes?: string[] } & Omit<
     SelectFieldProps,
@@ -55,7 +55,7 @@ function LocationCode({ locationCodes, ...props }: LocationCodeFieldProps) {
     }, [axiosApiClient]);
 
     return (
-        <SelectField
+        <UnconnectedSelectField
             {...props}
             allowedValues={codes}
             placeholder={t('widgets.locationCode.placeholder')}

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

@@ -21,7 +21,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { ProductDefinition } from '../../../types';
 import { useAxiosApiClient } from '../useAxiosApiClient';
-import { SelectField, SelectFieldProps } from './SelectField';
+import { SelectFieldProps, UnconnectedSelectField } from './SelectField';
 
 export type ProductFieldProps = { productIds?: string[] } & Omit<
     SelectFieldProps,
@@ -65,7 +65,7 @@ function Product({ name, productIds, ...props }: ProductFieldProps) {
         }, {}) ?? {};
 
     return (
-        <SelectField
+        <UnconnectedSelectField
             name={name}
             {...props}
             allowedValues={Object.keys(productLabelLookup)}

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

@@ -17,13 +17,7 @@ import ReactSelect from 'react-select';
 
 import { get } from 'lodash';
 import { useTranslations } from 'next-intl';
-import {
-    connectField,
-    filterDOMProps,
-    joinName,
-    useField,
-    useForm,
-} from 'uniforms';
+import { joinName, useField, useForm } from 'uniforms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
@@ -39,7 +33,10 @@ export type SelectFieldProps = FieldProps<
     { allowedValues?: string[]; transform?(value: string): string }
 >;
 
-function Select({
+/*
+
+*/
+export function UnconnectedSelectField({
     allowedValues = [],
     disabled,
     fieldType,
@@ -106,16 +103,35 @@ function Select({
             <ListField name={name}>
                 <ListItemField name="$">
                     <ListSelectField
+                        {...{
+                            allowedValues,
+                            disabled,
+                            fieldType,
+                            id,
+                            label,
+                            description,
+                            name,
+                            onChange,
+                            placeholder,
+                            readOnly,
+                            transform,
+                            value,
+                            error,
+                            showInlineError,
+                            errorMessage,
+                        }}
+                        fieldType={fieldType}
                         name=""
                         transform={transform}
                         allowedValues={allowedValues}
+                        {...props}
                     />
                 </ListItemField>
             </ListField>
         );
     } else {
         return (
-            <section {...filterDOMProps(props)}>
+            <section>
                 <EuiFormRow
                     label={label}
                     labelAppend={<EuiText size="m">{description}</EuiText>}
@@ -148,5 +164,3 @@ function Select({
         );
     }
 }
-
-export const SelectField = connectField(Select);

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

@@ -166,6 +166,13 @@ function SubscriptionFieldDefinition({
             ].includes(subscription.product.tag as ProductTag)
         ) {
             const portMode = getPortMode(subscription.productBlockInstances);
+            const subscriptionTitle =
+                subscription.productBlockInstances[0].productBlockInstanceValues.find(
+                    (item) => item.field === 'title',
+                );
+            if (subscriptionTitle) {
+                return `${subscriptionSubstring} - ${description.trim()} - ${subscriptionTitle.value}`;
+            }
             return `${subscriptionSubstring} ${portMode?.toUpperCase()} ${description.trim()} ${
                 subscription.customer?.fullname
             }`;

package/src/components/WfoForms/formFields/index.ts

@@ -29,3 +29,4 @@ export * from './SubscriptionField';
 export * from './IpNetworkField';
 export * from './SummaryField';
 export * from './CustomerField';
+export * from './ConnectedSelectField';

package/src/components/WfoForms/formFields/utils.spec.ts

@@ -99,7 +99,7 @@ describe('formField utils', () => {
             expect(result).toEqual('NOTTAGGED');
         });
 
-        it('returns undefined if the last portMode if there are more than one productBlockInstanceValue with portmode', () => {
+        it('returns the first portMode if there are more than one productBlockInstanceValue with portmode', () => {
             const result = getPortMode([
                 getProductBlockInstance({
                     productBlockInstanceValues: [
@@ -118,7 +118,7 @@ describe('formField utils', () => {
                     ],
                 }),
             ]);
-            expect(result).toEqual('SECOND');
+            expect(result).toEqual('FIRST');
         });
 
         it('returns undefined if the productBlockInstances dont contain a portMode field', () => {

package/src/components/WfoForms/formFields/utils.ts

@@ -7,22 +7,20 @@ import { PortMode, ProductTag } from './surf/types';
 export const getPortMode = (
     productBlockInstances: ProductBlockInstance[],
 ): PortMode | undefined => {
-    const portMode = productBlockInstances?.reduce(
+    return productBlockInstances?.reduce(
         (portMode: PortMode | undefined, productBlockInstance) => {
             const portModeField =
                 productBlockInstance.productBlockInstanceValues.find(
                     (productBlockInstanceValue) =>
                         productBlockInstanceValue.field === 'portMode',
                 );
-            if (portModeField) {
+            if (!portMode && portModeField) {
                 return portModeField.value as PortMode;
             }
             return portMode;
         },
         undefined,
     );
-
-    return portMode;
 };
 
 export const isEmpty = (obj: unknown) => {

package/src/components/WfoForms/useAxiosApiClient.ts

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { ApiClientContext } from '../../contexts';
+import { ApiClientContext } from '@/contexts';
 
 export const useAxiosApiClient = () => {
     const { apiClient } = useContext(ApiClientContext);

package/src/contexts/ApiClientContext.tsx

@@ -1,9 +1,9 @@
 import React, { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 
+import { ApiClient, getApiClient } from '@/api';
 import { useSessionWithToken } from '@/hooks';
 
-import { ApiClient, getApiClient } from '../api';
 import { OrchestratorConfigContext } from './OrchestratorConfigContext';
 
 export interface ApiContext {

package/src/hooks/surf/useGetSubscriptionDropdownOptions.ts

@@ -6,7 +6,7 @@ import { useQueryWithGraphql } from '../useQueryWithGraphql';
 
 export const useGetSubscriptionDropdownOptions = (
     tags: string[] = [],
-    statuses: string[] = [],
+    statuses: string[] = ['active'],
 ) => {
     // The way the graphql filterBy clause on the backend handled multiple AND values is by joining them with -
     const tagValue = tags.join('-');

package/src/messages/en-GB.json

@@ -69,6 +69,9 @@
             "contactPersonName": {
                 "placeholder": "Name placeholder"
             },
+            "ipvAnyNetworkField": {
+                "manuallySelectedPrefix": "Manually selected prefix"
+            },
             "node_select": {
                 "nodes_loading": "Nodes loading",
                 "select_node": "Select node",
@@ -258,14 +261,14 @@
                     "no_modify_workflow": "This subscription can not be modified as the product has no modify workflows.",
                     "no_termination_workflow": "This subscription can not be terminated as the product has no termination workflows.",
                     "no_validate_workflow": "This subscription can not be validated as the product has no validate workflows.",
-                    "not_in_sync": "This subscription can not be modified because it is not in sync. This means there is some error in the registration of the subscription or that it is being modified by another workflow.",
-                    "relations_not_in_sync": "This subscription can not be modified because some related subscriptions are not insync. Locked subscriptions: {locked_relations}",
+                    "not_in_sync": "This subscription can not be modified because it is not in-sync. This means there is some error in the registration of the subscription or that it is being modified by another workflow.",
+                    "relations_not_in_sync": "This subscription can not be modified because some related subscriptions are not in-sync. Locked subscriptions: {locked_relations}",
                     "no_modify_subscription_in_use_by_others": "This subscription can not be modified because it is in use by one or more other subscriptions: {unterminated_parents}"
                 }
             },
             "subscriptionInstanceId": "Instance ID",
             "ownerSubscriptionId": "Owner subscription ID",
-            "inUseByRelations": "In use by relation",
+            "inUseByRelations": "In-use by subscription(s)",
             "showDetails": "Show details",
             "self": "Current subscription",
             "hideDetails": "Hide details",

package/src/messages/nl-NL.json

@@ -69,6 +69,9 @@
             "contactPersonName": {
                 "placeholder": "Naam placeholder"
             },
+            "ipvAnyNetworkField": {
+                "manuallySelectedPrefix": "Manually selected prefix"
+            },
             "node_select": {
                 "nodes_loading": "Nodes laden...",
                 "select_node": "Selecteer node",
@@ -163,10 +166,10 @@
             "customer": "Klant",
             "customerAbbreviation": "Klantafkorting",
             "subscriptions": "Subscriptions",
-            "createdBy": "Gecreëerd door",
+            "createdBy": "Aangemaakt door",
             "assignee": "Assignee",
             "processId": "Proces ID",
-            "started": "Gestart",
+            "started": "Starttijd",
             "lastModified": "Aangepast op",
             "workflowTarget": "Target",
             "productTag": "Product tag"
@@ -251,20 +254,20 @@
                 "terminate": "Terminate workflow",
                 "actions": "Acties",
                 "subscription": {
-                    "no_modify_deleted_related_objects": "This subscription can not be modified because it contains references to other systems that are deleted.",
-                    "no_modify_in_use_by_subscription": "This subscription can not be {action} as it is used in other subscriptions: {unterminated_in_use_by_subscriptions}",
-                    "no_modify_invalid_status": "This subscription can not be modified because of the status: {status}. Only subscriptions with status {usable_when} can be {action}.",
-                    "no_modify_workflow": "This subscription can not be modified as the product has no modify workflows.",
-                    "no_termination_workflow": "This subscription can not be terminated as the product has no termination workflows.",
-                    "no_validate_workflow": "This subscription can not be validated as the product has no validate workflows.",
-                    "not_in_sync": "This subscription can not be modified because it is not in sync. This means there is some error in the registration of the subscription or that it is being modified by another workflow.",
-                    "relations_not_in_sync": "This subscription can not be modified because some related subscriptions are not insync. Locked subscriptions: {locked_relations}",
-                    "no_modify_subscription_in_use_by_others": "This subscription can not be modified because it is in use by one or more other subscriptions: {unterminated_parents}"
+                    "no_modify_deleted_related_objects": "Deze subscription kan niet worden gewijzigd omdat het verwijzingen bevat naar andere systemen die zijn verwijderd.",
+                    "no_modify_in_use_by_subscription": "Deze subscription kan niet worden {gewijzigd} omdat het wordt gebruikt in andere subscriptions: {unterminated_in_use_by_subscriptions}",
+                    "no_modify_invalid_status": "Deze subscription kan niet worden gewijzigd vanwege de status: {status}. Alleen abonnementen met de status {usable_when} kunnen worden {action}.",
+                    "no_modify_workflow": "Deze subscription kan niet worden gewijzigd omdat het product geen modify workflows heeft.",
+                    "no_termination_workflow": "Deze subscription kan niet worden beëindigd omdat het product geen termination workflows heeft.",
+                    "no_validate_workflow": "Deze subscription kan niet worden gevalideerd omdat het product geen validate workflows heeft.",
+                    "not_in_sync": "Deze subscription kan niet worden gewijzigd omdat het niet in-sync is. Dit betekent dat er een fout zit in de registratie van de subscription of dat het wordt gewijzigd door een andere workflow.",
+                    "relations_not_in_sync": "Deze subscription kan niet worden gewijzigd omdat sommige gerelateerde subscriptions niet in-sync zijn. Geblokkeerde subscriptions: {locked_relations}",
+                    "no_modify_subscription_in_use_by_others": "Deze subscription kan niet worden gewijzigd omdat het in gebruik is door een of meer andere subscriptions: {unterminated_parents}"
                 }
             },
             "subscriptionInstanceId": "Instance ID",
             "ownerSubscriptionId": "Owner subscription ID",
-            "inUseByRelations": "In use by relation",
+            "inUseByRelations": "In gebruik door subscription(s)",
             "showDetails": "Toon details",
             "hideDetails": "Verberg details",
             "self": "Huidige subscription",
@@ -272,11 +275,11 @@
             "productName": "Produkt",
             "fixedInputs": "Fixed inputs",
             "productInfo": "Product info",
-            "noProductBlockSelected": "No product block selected",
+            "noProductBlockSelected": "Geen product block geselecteerd",
             "productBlocks": "Product blocks",
-            "ctaSelectProductBlock": "Select one or more product blocks to view their details",
-            "startedBy": "Started by",
-            "startedAt": "Started at",
+            "ctaSelectProductBlock": "Selecteer één of meer product blocks om de details te bekijken",
+            "startedBy": "Aangemaakt door",
+            "startedAt": "Starttijd",
             "status": "Status",
             "id": "ID",
             "blockTitleSubscriptionDetails": "Subscription details",

package/src/pages/processes/WfoProcessDetail.tsx

@@ -114,7 +114,14 @@ export const WfoProcessDetail = ({
 
     const retryButtonIsDisabled =
         buttonsAreDisabled ||
-        !listIncludesStatus([ProcessStatus.FAILED], processDetail?.lastStatus);
+        !listIncludesStatus(
+            [
+                ProcessStatus.FAILED,
+                ProcessStatus.API_UNAVAILABLE,
+                ProcessStatus.INCONSISTENT_DATA,
+            ],
+            processDetail?.lastStatus,
+        );
     const abortButtonIsDisabled =
         buttonsAreDisabled ||
         listIncludesStatus(

package/tsconfig.json

@@ -6,8 +6,8 @@
         "outDir": "./dist",
         "baseUrl": ".",
         "paths": {
-            "@/*": ["./src/*"],
-        },
+            "@/*": ["./src/*"]
+        }
     },
     "include": ["./src/**/*.ts", "./src/**/*.tsx"],
     "exclude": [
@@ -15,6 +15,6 @@
         "**/*.stories.ts",
         "**/*.stories.js",
         "**/*.stories.jsx",
-        "**/*.stories.tsx",
-    ],
+        "**/*.stories.tsx"
+    ]
 }