@orchestrator-ui/orchestrator-ui-components 1.4.0 → 1.5.0

package/package.json

@@ -1,7 +1,26 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.4.0",
-    "license": "MIT",
+    "version": "1.5.0",
+    "license": "Apache-2.0",
+    "description": "Library of UI Components used to display the workflow orchestrator frontend",
+    "author": {
+        "name": "Workflow Orchestrator Programme",
+        "email": "workfloworchestrator.board@commonsconservancy.org",
+        "url": "https://www.workfloworchestrator.org"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/workfloworchestrator/orchestrator-ui-library.git"
+    },
+    "homepage": "https://www.workfloworchestrator.org",
+    "bugs": "https://github.com/workfloworchestrator/orchestrator-ui-library/issues",
+    "keywords": [
+        "orchestrator",
+        "workflow",
+        "workflow orchestrator",
+        "network",
+        "automation"
+    ],
     "scripts": {
         "test": "jest",
         "build": "tsup src/index.ts --format esm --dts --tsconfig tsconfig.build.json",

package/src/api/index.ts

@@ -14,12 +14,13 @@
  */
 import { AxiosInstance } from 'axios';
 
+import { LegacyProduct } from '@/api/types';
 import {
     ImsPort,
     IpBlock,
     IpPrefix,
     NodeSubscription,
-} from '@/components/WfoForms/formFields/surf/types';
+} from '@/components/WfoForms/formFields/deprecated/types';
 import { ProductDefinition } from '@/types';
 
 import { getAxiosInstance } from './axios';
@@ -142,8 +143,8 @@ export class ApiClient extends BaseApiClient {
         );
     };
 
-    products = (): Promise<ProductDefinition[]> => {
-        return this.fetchJson<ProductDefinition[]>(PRODUCTS_ENDPOINT);
+    products = (): Promise<LegacyProduct[]> => {
+        return this.fetchJson<LegacyProduct[]>(PRODUCTS_ENDPOINT);
     };
     productById = (productId: string): Promise<ProductDefinition> => {
         return this.fetchJson(`${PRODUCTS_ENDPOINT}${productId}`);

package/src/api/types.ts

@@ -0,0 +1,53 @@
+// These types are specifically for the axios calls
+// When replacing the REST calls with GraphQL, these types should be removed
+
+export type LegacyFixedInput = {
+    name: string;
+    value: string;
+    created_at: number;
+    fixed_input_id: string;
+    product_id: string;
+};
+
+export type LegacyWorkflow = {
+    name: string;
+    description: string;
+    target: string;
+    created_at: number;
+    workflow_id: string;
+};
+
+export type LegacyResourceType = {
+    resource_type_id: string;
+    resource_type: string;
+    description: string;
+};
+
+export type LegacyProductBlock = {
+    product_block_id: string;
+    name: string;
+    tag: string;
+    description: string;
+    status: string;
+    created_at: number;
+    end_date: number;
+    resource_types: LegacyResourceType[];
+    parent_ids: string[];
+};
+
+export type LegacyProduct = {
+    name: string;
+    tag: string;
+    description: string;
+    product_id: string;
+    created_at: number;
+    product_type: string;
+    end_date: number;
+    status: string;
+    fixed_inputs: LegacyFixedInput[];
+    workflows: LegacyWorkflow[];
+    product_blocks: LegacyProductBlock[];
+    create_subscription_workflow_key: string;
+    modify_subscription_workflow_key: string;
+    terminate_subscription_workflow_key: string;
+};

package/src/components/WfoDropdownButton/WfoDropdownButton.tsx

@@ -12,6 +12,7 @@ interface WfoDropdownButtonProps {
 
 export const WfoDropdownButton = ({
     label,
+    isDisabled = false,
     children,
 }: WfoDropdownButtonProps) => {
     const [isHovered, setIsHovered] = useState(false);
@@ -58,6 +59,7 @@ export const WfoDropdownButton = ({
                     legend={'Buttons'}
                     options={buttonOptions}
                     onChange={onButtonClick}
+                    isDisabled={isDisabled}
                 />
             }
             isOpen={isPopoverOpen}

package/src/components/WfoForms/AutoFieldLoader.tsx

@@ -44,12 +44,12 @@ export function autoFieldFunction(
     switch (fieldType) {
         case Number:
             switch (format) {
-                case 'imsPortId': // Surf specific
+                case 'imsPortId': // Deprecated
                     return ImsPortIdField;
-                case 'imsNodeId': // Surf specific
+                case 'imsNodeId': // Deprecated
                     return ImsNodeIdField;
                 case 'timestamp':
-                    return TimestampField; // Surf specific
+                    return TimestampField; // Deprecated
             }
             break;
         case Object:
@@ -78,13 +78,13 @@ export function autoFieldFunction(
                     return CustomerField;
                 case 'locationCode':
                     return LocationCodeField;
-                case 'contactPersonName': // Surf specific
+                case 'contactPersonName': // Deprecated
                     return ContactPersonNameField;
-                case 'vlan': // Surf specific
+                case 'vlan': // Deprecated
                     return VlanField;
                 case 'accept':
                     return AcceptField;
-                case 'ipvanynetwork': // Surf specific
+                case 'ipvanynetwork': // Deprecated
                     return IpNetworkField;
             }
             break;

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

@@ -19,7 +19,8 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiCheckbox, EuiFlexItem, EuiText } from '@elastic/eui';
 
-import { useWithOrchestratorTheme } from '../../../hooks';
+import { useWithOrchestratorTheme } from '@/hooks';
+
 import { getStyles } from './AcceptFieldStyling';
 import { FieldProps } from './types';
 

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

@@ -18,7 +18,8 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiCheckbox, EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
-import { FieldProps } from '../../../types/forms';
+import { FieldProps } from '@/types';
+
 import { boolFieldStyling } from './BoolFieldStyling';
 
 export type BoolFieldProps = FieldProps<boolean>;

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

@@ -18,7 +18,7 @@ import { connectField } from 'uniforms';
 
 import { EuiHorizontalRule } from '@elastic/eui';
 
-import { FieldProps } from '../../../types/forms';
+import { FieldProps } from '@/types';
 
 export type DividerFieldProps = FieldProps<null, object, null, HTMLDivElement>;
 

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

@@ -16,7 +16,7 @@ import React from 'react';
 
 import { connectField, filterDOMProps } from 'uniforms';
 
-import { FieldProps } from '../../../types/forms';
+import { FieldProps } from '@/types';
 
 export type ErrorFieldProps = FieldProps<null>;
 

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

@@ -16,7 +16,7 @@ import React from 'react';
 
 import { connectField, filterDOMProps } from 'uniforms';
 
-import { FieldProps } from '../../../types/forms';
+import { FieldProps } from '@/types';
 
 export type LabelFieldProps = FieldProps<null, object, null, HTMLDivElement>;
 

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

@@ -20,7 +20,8 @@ import { connectField, filterDOMProps, joinName, useField } from 'uniforms';
 
 import { EuiIcon, EuiText } from '@elastic/eui';
 
-import { useOrchestratorTheme } from '../../../hooks';
+import { useOrchestratorTheme } from '@/hooks';
+
 import { FieldProps } from './types';
 
 export type ListAddFieldProps = FieldProps<

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

@@ -19,7 +19,8 @@ import { connectField, filterDOMProps, joinName, useField } from 'uniforms';
 
 import { EuiIcon, EuiText } from '@elastic/eui';
 
-import { useOrchestratorTheme } from '../../../hooks';
+import { useOrchestratorTheme } from '@/hooks';
+
 import { FieldProps } from './types';
 
 export type ListDelFieldProps = FieldProps<

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

@@ -18,7 +18,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiText, EuiTextArea } from '@elastic/eui';
 
-import { FieldProps } from '../../../types/forms';
+import { FieldProps } from '@/types';
 
 export type LongTextFieldProps = FieldProps<
     string,

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

@@ -18,7 +18,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFieldNumber, EuiFormRow, EuiText } from '@elastic/eui';
 
-import { FieldProps } from '../../../types/forms';
+import { FieldProps } from '@/types';
 
 export type NumFieldProps = FieldProps<
     number,

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

@@ -19,7 +19,8 @@ import get from 'lodash/get';
 import { useTranslations } from 'next-intl';
 import { connectField, filterDOMProps } from 'uniforms';
 
-import { ProductDefinition } from '../../../types';
+import type { LegacyProduct } from '@/api/types';
+
 import { useAxiosApiClient } from '../useAxiosApiClient';
 import { SelectFieldProps, UnconnectedSelectField } from './SelectField';
 
@@ -44,15 +45,15 @@ function Product({ name, productIds, ...props }: ProductFieldProps) {
 
     const productById = (
         id: string,
-        products: ProductDefinition[],
-    ): ProductDefinition => {
-        return products.find((prod) => prod.productId === id)!;
+        products: LegacyProduct[],
+    ): LegacyProduct => {
+        return products.find((prod) => prod.product_id === id)!;
     };
 
-    if (isLoading || error) return null;
+    if (isLoading || error || !data) return null;
 
     const products = productIds
-        ? data?.map((id) => productById(id.productId, data))
+        ? productIds?.map((id) => productById(id, data))
         : data;
 
     const productLabelLookup =
@@ -60,7 +61,7 @@ function Product({ name, productIds, ...props }: ProductFieldProps) {
             mapping,
             product,
         ) {
-            mapping[product.productId] = product.name;
+            mapping[product.product_id] = product.name;
             return mapping;
         }, {}) ?? {};
 

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

@@ -19,7 +19,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiRadio, EuiText } from '@elastic/eui';
 
-import { FieldProps } from '../../../types/forms';
+import { FieldProps } from '@/types';
 
 const base64 =
     typeof btoa !== 'undefined'

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

@@ -21,7 +21,8 @@ import { joinName, useField, useForm } from 'uniforms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
-import { useOrchestratorTheme } from '../../../hooks';
+import { useOrchestratorTheme } from '@/hooks';
+
 import { ListField, ListFieldProps } from './ListField';
 import { ListItemField } from './ListItemField';
 import { ListSelectField } from './ListSelectField';
@@ -146,7 +147,8 @@ export function UnconnectedSelectField({
                         name={name}
                         onChange={(option) => {
                             if (!readOnly) {
-                                onChange(option?.value);
+                                // @ts-expect-error - null needs to be passed in some cases to remove something (eg. a fw endpoint in an l2vpn)
+                                onChange(option?.value ?? null);
                             }
                         }}
                         styles={reactSelectInnerComponentStyles}

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

@@ -16,7 +16,7 @@ import React from 'react';
 
 import { filterDOMProps, useForm } from 'uniforms';
 
-import { FieldProps } from '../../../types/forms';
+import { FieldProps } from '@/types';
 
 export type SubmitFieldProps = FieldProps<
     null,

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

@@ -33,12 +33,13 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { useOrchestratorTheme } from '../../../hooks';
-import { useGetSubscriptionDropdownOptions } from '../../../hooks/surf/useGetSubscriptionDropdownOptions';
-import { SubscriptionDropdownOption } from '../../../types';
+import { useOrchestratorTheme } from '@/hooks';
+import { useGetSubscriptionDropdownOptions } from '@/hooks/deprecated/useGetSubscriptionDropdownOptions';
+import { SubscriptionDropdownOption } from '@/types';
+
 import { subscriptionFieldStyling } from './SubscriptionFieldStyling';
+import { PortMode, ProductTag } from './deprecated/types';
 import { getReactSelectInnerComponentStyles } from './reactSelectStyles';
-import { PortMode, ProductTag } from './surf/types';
 import { FieldProps, Option } from './types';
 import { getPortMode } from './utils';
 

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

@@ -18,7 +18,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFieldText, EuiFormRow, EuiText } from '@elastic/eui';
 
-import { FieldProps } from '../../../types/forms';
+import { FieldProps } from '@/types';
 
 export type TextFieldProps = FieldProps<string>;
 

package/src/components/WfoForms/formFields/{ContactPersonAutocomplete.tsx → deprecated/ContactPersonAutocomplete.tsx}

@@ -18,10 +18,11 @@ import scrollIntoView from 'scroll-into-view';
 
 import { EuiFlexItem } from '@elastic/eui';
 
-import { useWithOrchestratorTheme } from '../../../hooks';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { ContactPerson } from '../types';
+import { isEmpty } from '../utils';
 import { getStyles } from './ContactPersonAutocompleteStyles';
-import { ContactPerson } from './types';
-import { isEmpty } from './utils';
 
 interface ContactPersonAutocompleteProps {
     query: string;

package/src/components/WfoForms/formFields/{ContactPersonNameField.tsx → deprecated/ContactPersonNameField.tsx}

@@ -27,9 +27,10 @@ import {
 
 import { EuiFieldText, EuiFormRow, EuiText } from '@elastic/eui';
 
-import { useAxiosApiClient } from '../useAxiosApiClient';
+import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
+
+import { ContactPerson, FieldProps } from '../types';
 import { ContactPersonAutocomplete } from './ContactPersonAutocomplete';
-import { ContactPerson, FieldProps } from './types';
 
 export function stop(e: React.SyntheticEvent) {
     if (e !== undefined && e !== null) {

package/src/components/WfoForms/formFields/{ImsNodeIdField.tsx → deprecated/ImsNodeIdField.tsx}

@@ -18,9 +18,10 @@ import { get } from 'lodash';
 import { useTranslations } from 'next-intl';
 import { connectField, filterDOMProps } from 'uniforms';
 
-import { useAxiosApiClient } from '../useAxiosApiClient';
-import { SelectFieldProps, UnconnectedSelectField } from './SelectField';
-import { ImsNode } from './surf/types';
+import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
+
+import { SelectFieldProps, UnconnectedSelectField } from '../SelectField';
+import { ImsNode } from './types';
 
 export type ImsNodeIdFieldProps = {
     onChange: (value?: number | undefined) => void;

package/src/components/WfoForms/formFields/{ImsPortIdField.tsx → deprecated/ImsPortIdField.tsx}

@@ -21,12 +21,12 @@ import { connectField, filterDOMProps } from 'uniforms';
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
 import { getReactSelectInnerComponentStyles } from '@/components/WfoForms/formFields/reactSelectStyles';
+import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
 import { useOrchestratorTheme } from '@/hooks';
 
-import { useAxiosApiClient } from '../useAxiosApiClient';
+import { FieldProps, Option } from '../types';
 import { imsPortIdFieldStyling } from './ImsPortIdFieldStyling';
-import { ImsNode, ImsPort, NodeSubscription } from './surf/types';
-import { FieldProps, Option } from './types';
+import { ImsNode, ImsPort, NodeSubscription } from './types';
 
 export type ImsPortFieldProps = FieldProps<
     number,
@@ -102,6 +102,9 @@ function ImsPortId({
                 return;
             }
 
+            // Clears the value when another selection is made
+            onChange(undefined);
+
             setLoading(true);
             setNodeId(value);
             setPorts([]);
@@ -217,7 +220,7 @@ function ImsPortId({
                                     }}
                                     options={port_options}
                                     placeholder={portPlaceholder}
-                                    value={port_value}
+                                    value={port_value || null}
                                     isSearchable={true}
                                     isDisabled={
                                         disabled ||

package/src/components/WfoForms/formFields/{IpNetworkField.tsx → deprecated/IpNetworkField.tsx}

@@ -19,10 +19,11 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiCallOut, EuiFormRow, EuiText } from '@elastic/eui';
 
+import SplitPrefix from '@/components/WfoForms/formFields/deprecated/SplitPrefix';
+
+import { FieldProps } from '../types';
 import IpPrefixTableField from './IpPrefixTableField';
-import SplitPrefix from './SplitPrefix';
-import { IpBlock } from './surf/types';
-import { FieldProps } from './types';
+import { IpBlock } from './types';
 
 export type IPvAnyNetworkFieldProps = FieldProps<
     string,

package/src/components/WfoForms/formFields/{IpPrefixTableField.tsx → deprecated/IpPrefixTableField.tsx}

@@ -29,11 +29,12 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { ApiClientContext } from '../../../contexts';
+import { ApiClientContext } from '@/contexts';
+
+import { Option, prop } from '../types';
 import { ipPrefixTableFieldStyling } from './IpPrefixTableFieldStyling';
-import { IpBlock, IpPrefix, SortOption } from './surf/types';
-import { ipamStates } from './surf/utils';
-import { Option, prop } from './types';
+import { IpBlock, IpPrefix, SortOption } from './types';
+import { ipamStates } from './utils';
 
 type SortKeys = 'id' | 'prefix' | 'description' | 'state_repr';
 

package/src/components/WfoForms/formFields/{SplitPrefix.tsx → deprecated/SplitPrefix.tsx}

@@ -19,9 +19,10 @@ import { range } from 'lodash';
 
 import { EuiFlexItem } from '@elastic/eui';
 
-import { ApiClientContext } from '../../../contexts';
+import { ApiClientContext } from '@/contexts';
+
+import { Option } from '../types';
 import { splitPrefixStyling } from './SplitPrefixStyling';
-import { Option } from './types';
 
 interface IProps {
     id: string;

package/src/components/WfoForms/formFields/{TimestampField.tsx → deprecated/TimestampField.tsx}

@@ -19,7 +19,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiDatePicker, EuiFormRow, EuiText } from '@elastic/eui';
 
-import { FieldProps } from './types';
+import { FieldProps } from '../types';
 
 export function utcTimestampToLocalMoment(utc_timestamp: number) {
     // Convert UTC timestamp to localized Moment object

package/src/components/WfoForms/formFields/{VlanField.tsx → deprecated/VlanField.tsx}

@@ -20,10 +20,11 @@ import { connectField, filterDOMProps, joinName, useForm } from 'uniforms';
 
 import { EuiFieldText, EuiFormRow, EuiText } from '@elastic/eui';
 
-import { useIsTaggedPort } from '../../../hooks/surf/useIsTaggedPort';
-import { useAxiosApiClient } from '../useAxiosApiClient';
-import { ServicePort } from './surf/types';
-import { FieldProps } from './types';
+import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
+import { useIsTaggedPort } from '@/hooks/deprecated/useIsTaggedPort';
+
+import { FieldProps } from '../types';
+import { ServicePort } from './types';
 
 function inValidVlan(vlan: string) {
     const value = vlan || '0';

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

@@ -0,0 +1,13 @@
+export * from './ContactPersonAutocomplete';
+export * from './ContactPersonAutocompleteStyles';
+export * from './ContactPersonNameField';
+export * from './ImsNodeIdField';
+export * from './ImsPortIdField';
+export * from './ImsPortIdFieldStyling';
+export * from './IpNetworkField';
+export * from './IpPrefixTableFieldStyling';
+export * from './SplitPrefixStyling';
+export * from './TimestampField';
+export * from './VlanField';
+export * from './types';
+export * from './utils';

package/src/components/WfoForms/formFields/{surf → deprecated}/types.ts

@@ -1,4 +1,4 @@
-import { ProductDefinition } from '../../../../types';
+import { ProductDefinition } from '@/types';
 
 export interface NodeSubscription {
     name: string;

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

@@ -17,16 +17,11 @@ export * from './SubmitField';
 export * from './SubscriptionSummaryField';
 export * from './TextField';
 export * from './DateField';
-export * from './TimestampField';
-export * from './ContactPersonNameField';
-export * from './ImsNodeIdField';
-export * from './ImsPortIdField';
 export * from './LocationCodeField';
-export * from './VlanField';
+export * from './deprecated';
 export * from './NestField';
 export * from './OptGroupField';
 export * from './SubscriptionField';
-export * from './IpNetworkField';
 export * from './SummaryField';
 export * from './CustomerField';
 export * from './ConnectedSelectField';

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

@@ -6,7 +6,7 @@ import {
     SubscriptionStatus,
     WorkflowTarget,
 } from '../../../types';
-import { ProductTag } from './surf/types';
+import { ProductTag } from './deprecated/types';
 import {
     getPortMode,
     subscriptionHasTaggedPortModeInstanceValue,

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

@@ -1,7 +1,8 @@
 import { isDate } from 'moment';
 
-import { ProductBlockInstance, SubscriptionDetail } from '../../../types';
-import { PortMode, ProductTag } from './surf/types';
+import { ProductBlockInstance, SubscriptionDetail } from '@/types';
+
+import { PortMode, ProductTag } from './deprecated/types';
 
 // NOTE: There might potentially (?) be more productBlockInstances with portMod but we get the last one here
 export const getPortMode = (

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -121,13 +121,7 @@ export const WfoStartProcessPage = ({
                     // Resolve handler
                     (result) => {
                         const process = result as { id: string };
-                        // TODO: Use toast hook to display success message
                         if (process.id) {
-                            // eslint-disable-next-line no-console
-                            console.log(
-                                'resolver successfullly!: ',
-                                process.id,
-                            );
                             const basePath = isTask
                                 ? PATH_TASKS
                                 : PATH_WORKFLOWS;