@orchestrator-ui/orchestrator-ui-components 3.10.0 → 4.0.1

package/eslint.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from 'eslint/config';
+
+import wfoConfig from '@orchestrator-ui/eslint-config-custom';
+
+export default defineConfig([wfoConfig]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "3.10.0",
+    "version": "4.0.1",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -30,26 +30,25 @@
         "generate-version": "node -p \"'export const ORCHESTRATOR_UI_LIBRARY_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/configuration/version.ts && prettier --write src/configuration/version.ts",
         "build": "npm run generate-version && tsup src/index.ts",
         "tsc": "tsc --noEmit",
-        "lint": "eslint \"src/**/*.ts*\"",
+        "lint": "eslint",
         "dev": "npm run build -- --watch"
     },
     "dependencies": {
-        "@elastic/eui": "^97.0.0",
+        "@elastic/eui": "101.3.0",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",
         "@rtk-query/graphql-request-base-query": "^2.3.1",
-        "eslint": "^8.57.0",
         "graphql-request": "^6.1.0",
         "invariant": "^2.2.4",
         "lodash": "^4.17.21",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.43",
         "next-auth": "^4.24.5",
-        "next-intl": "^3.4.1",
+        "next-intl": "^3.26.5",
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.0.18",
+        "pydantic-forms": "^0.1.2",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",
@@ -81,7 +80,7 @@
         "uniforms-bridge-simple-schema-2": "^3.8.1"
     },
     "peerDependencies": {
-        "next": "^14.2.25 || ^15.2.3",
+        "next": "^15.3.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

package/src/components/WfoForms/UserInputForm.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
 /*
  * Copyright 2019-2023 SURF.
  * Licensed under the Apache License, Version 2.0 (the "License");

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

@@ -114,8 +114,8 @@ function Accept({
                 state.skip
                     ? 'SKIPPED'
                     : state.allChecked
-                    ? 'ACCEPTED'
-                    : 'INCOMPLETE',
+                      ? 'ACCEPTED'
+                      : 'INCOMPLETE',
             );
 
             return { ...state };

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

@@ -12,7 +12,6 @@
  * limitations under the License.
  *
  */
-
 /* NOTE: This component is only needed to avoid the circular import that started to be a problem
 after the upgrade to react-script 5.0. The original SelectField would import itself to handle the list:
 that seems to be impossible with the new webpack.

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

@@ -101,7 +101,7 @@ export function UnconnectedSelectField({
         if (selectedValue && selectedValue.value !== 'undefined') {
             onChange(selectedValue.value);
         }
-    }, []);
+    }, [onChange, selectedValue]);
 
     if (fieldType === Array) {
         // Avoid circular import with our own ListSelectField (instead of recursively trying to use SelectField)

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

@@ -80,8 +80,8 @@ function ImsNodeId({
         isLoading && locationCode
             ? t('widgets.node_select.nodes_loading')
             : nodes.length
-            ? t('widgets.node_select.select_node')
-            : t('forms.widgets.node_select.no_nodes_placeholder');
+              ? t('widgets.node_select.select_node')
+              : t('forms.widgets.node_select.no_nodes_placeholder');
 
     const imsNodeIdLabelLookup =
         nodes?.reduce<{ [index: string]: string }>(function (mapping, node) {

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

@@ -140,8 +140,8 @@ function ImsPortId({
     const portPlaceholder = loading
         ? t('widgets.nodePort.loadingPorts')
         : nodeId
-        ? t('widgets.nodePort.selectPort')
-        : t('widgets.nodePort.selectNodeFirst');
+          ? t('widgets.nodePort.selectPort')
+          : t('widgets.nodePort.selectNodeFirst');
 
     const nodeOptions: Option[] =
         nodeSubscriptionOptions?.map(nodeToOptionCorelink) || [];

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

@@ -165,7 +165,7 @@ function Vlan({
         ) {
             onChange('');
         }
-    }, [onChange, subscriptionId, isFetched, portIsTagged]);
+    }, [onChange, subscriptionId, isFetched, portIsTagged, value, disabled]);
 
     const [usedVlansInIms, setUsedVlansInIms] = useState<VlanRange[]>([]);
     const [missingInIms, setMissingInIms] = useState(false);
@@ -212,20 +212,20 @@ function Vlan({
     const placeholder = isLoading
         ? t('widgets.vlan.loadingIms')
         : subscriptionId
-        ? t('widgets.vlan.placeholder')
-        : t('widgets.vlan.placeholderNoServicePort');
+          ? t('widgets.vlan.placeholder')
+          : t('widgets.vlan.placeholderNoServicePort');
 
     const errorMessageExtra = missingInIms
         ? t('widgets.vlan.missingInIms')
         : !validFormat
-        ? t('widgets.vlan.invalidVlan')
-        : vlansInUse.length
-        ? vlansInUse.length >= 1 && vlansInUse[0] === 0
-            ? t('widgets.vlan.untaggedPortInUse')
-            : t('widgets.vlan.vlansInUseError', {
-                  vlans: vlanRangeFromNumbers(vlansInUse),
-              })
-        : undefined;
+          ? t('widgets.vlan.invalidVlan')
+          : vlansInUse.length
+            ? vlansInUse.length >= 1 && vlansInUse[0] === 0
+                ? t('widgets.vlan.untaggedPortInUse')
+                : t('widgets.vlan.vlansInUseError', {
+                      vlans: vlanRangeFromNumbers(vlansInUse),
+                  })
+            : undefined;
 
     let message = '';
     if (!isLoading && subscriptionId) {

package/src/components/WfoPageTemplate/WfoPageHeader/WfoHamburgerMenu.tsx

@@ -14,7 +14,7 @@ import { WfoQuestionCircle } from '@/icons/WfoQuestionCircle';
 import { useGetVersionsQuery } from '@/rtk/endpoints/versions';
 import { toOptionalArrayEntry } from '@/utils';
 
-export const WfoHamburgerMenu = ({}) => {
+export const WfoHamburgerMenu = () => {
     const t = useTranslations('hamburgerMenu');
     const [isPopoverOpen, setPopoverIsOpen] = useState(false);
     const { theme, isDarkThemeActive } = useOrchestratorTheme();

package/src/components/WfoSubscription/WfoCustomerDescriptionsField.tsx

@@ -28,9 +28,8 @@ export const WfoCustomerDescriptionsField: FC<
         customerDescriptionsCustomerNameStyle,
         customerDescriptionsFormStyle,
     } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
-    const [updateCustomerDescription, {}] =
-        useUpdateCustomerDescriptionMutation();
-    const [setCustomerDescription, {}] = useSetCustomerDescriptionMutation();
+    const [updateCustomerDescription] = useUpdateCustomerDescriptionMutation();
+    const [setCustomerDescription] = useSetCustomerDescriptionMutation();
     const customerIds = customerDescriptions.map(
         (customerDescription) => customerDescription.customerId,
     );

package/src/components/WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.tsx

@@ -85,7 +85,7 @@ export const TableSettingsModal = <T,>({
                 {columns.map(({ field, name, isVisible }) => (
                     <div key={field.toString()}>
                         <EuiFormRow
-                            display="columnCompressedSwitch"
+                            display="columnCompressed"
                             label={name}
                             css={formRowStyle}
                         >

package/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -60,8 +60,10 @@ export const WfoStep = React.forwardRef(
             getStepToggleExpandStyle,
         } = useWithOrchestratorTheme(getWorkflowStepsStyles);
         const t = useTranslations('processes.steps');
-        const hasHtmlMail =
-            step.stateDelta?.hasOwnProperty('confirmation_mail');
+        const hasHtmlMail = Object.prototype.hasOwnProperty.call(
+            step?.stateDelta || {},
+            'confirmation_mail',
+        );
 
         const stepContent = step.stateDelta
             ? getStepContent(step.stateDelta, showHiddenKeys)

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx

@@ -43,14 +43,12 @@ export const WfoProcessSubscriptionDelta = ({
 }) => {
     const { data, isFetching } = useGetRawProcessDetailQuery({ processId });
 
-    const subscriptionKey =
+    const subscriptionId =
         data?.current_state?.subscription?.subscription_id ?? '';
     const newText = data?.current_state?.subscription ?? null;
-    const oldText =
-        data?.current_state?.__old_subscriptions__ &&
-        subscriptionKey in data?.current_state?.__old_subscriptions__
-            ? data?.current_state?.__old_subscriptions__[subscriptionKey]
-            : null;
+    const oldSubscriptions = data?.current_state?.__old_subscriptions__ || {};
+    const oldSubscription = subscriptionId in oldSubscriptions;
+    const oldText = oldSubscription || null;
 
     return isFetching ? (
         <WfoLoading />

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.10.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '4.0.1';

package/src/pages/processes/WfoProcessDetail.tsx

@@ -154,7 +154,7 @@ export const WfoProcessDetail = ({
             question: t(
                 processIsTask ? 'retryTaskQuestion' : 'retryWorkflowQuestion',
                 {
-                    workflowName: processDetail?.workflowName,
+                    workflowName: processDetail?.workflowName || '',
                 },
             ),
             onConfirm: () => {
@@ -169,7 +169,7 @@ export const WfoProcessDetail = ({
             question: t(
                 processIsTask ? 'abortTaskQuestion' : 'abortWorkflowQuestion',
                 {
-                    workflowName: processDetail?.workflowName,
+                    workflowName: processDetail?.workflowName || '',
                 },
             ),
             onConfirm: () => {
@@ -183,7 +183,7 @@ export const WfoProcessDetail = ({
     const deleteAction = () =>
         showConfirmDialog({
             question: t('deleteQuestion', {
-                workflowName: processDetail?.workflowName,
+                workflowName: processDetail?.workflowName || '',
             }),
             onConfirm: () => {
                 if (processDetail?.processId) {

package/src/rtk/api.ts

@@ -142,7 +142,7 @@ export const orchestratorApi = createApi({
         );
 
         switch (baseQueryType) {
-            case BaseQueryTypes.fetch:
+            case BaseQueryTypes.fetch: {
                 const fetchFn = fetchBaseQuery({
                     baseUrl: customApi
                         ? customApi.apiBaseUrl
@@ -152,7 +152,8 @@ export const orchestratorApi = createApi({
                         catchErrorResponse(response, authActive),
                 });
                 return fetchFn(args, api, {});
-            default:
+            }
+            default: {
                 const graphqlFn = wfoGraphqlRequestBaseQuery(
                     {
                         url: customApi
@@ -166,6 +167,7 @@ export const orchestratorApi = createApi({
                     authActive,
                 );
                 return graphqlFn(args, api, {});
+            }
         }
     },
     endpoints: () => ({}),

package/src/types/types.ts

@@ -304,7 +304,7 @@ export type GraphQLPageInfo = {
     hasNextPage: boolean;
     hasPreviousPage: boolean;
     startCursor: number | null;
-    totalItems: number | null;
+    totalItems: number;
     endCursor: number | null;
     sortFields: string[];
     filterFields: string[];

package/src/utils/getDefaultTableConfig.ts

@@ -33,7 +33,7 @@ function getTableConfig<T>(
 
 export const getDefaultTableConfig = <T>(storageKey: string) => {
     switch (storageKey) {
-        case METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY:
+        case METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY: {
             const productBlockColumns: (keyof ProductBlockDefinition)[] = [
                 'productBlockId',
                 'status',
@@ -41,14 +41,14 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
                 'createdAt',
             ];
             return getTableConfig<T>(productBlockColumns as (keyof T)[]);
-
-        case METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY:
+        }
+        case METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY: {
             const resourceTypeColumns: (keyof ResourceTypeDefinition)[] = [
                 'resourceTypeId',
             ];
             return getTableConfig<T>(resourceTypeColumns as (keyof T)[]);
-
-        case METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY:
+        }
+        case METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY: {
             const productColumns: (keyof ProductDefinition)[] = [
                 'productId',
                 'productType',
@@ -56,22 +56,22 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
                 'createdAt',
             ];
             return getTableConfig<T>(productColumns as (keyof T)[]);
-
-        case METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY:
+        }
+        case METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY: {
             const workflowColumns: (keyof WorkflowDefinition)[] = [
                 'workflowId',
                 'createdAt',
             ];
             return getTableConfig<T>(workflowColumns as (keyof T)[]);
-
-        case METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY:
+        }
+        case METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY: {
             const taskColumns: (keyof WorkflowDefinition)[] = [
                 'workflowId',
                 'createdAt',
             ];
             return getTableConfig<T>(taskColumns as (keyof T)[]);
-
-        case ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY:
+        }
+        case ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY: {
             const activeProcessColumns: (keyof ProcessListItem)[] = [
                 'productName',
                 'customer',
@@ -80,8 +80,8 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
                 'startedAt',
             ];
             return getTableConfig<T>(activeProcessColumns as (keyof T)[]);
-
-        case COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY:
+        }
+        case COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY: {
             const completedProcessColumns: (keyof ProcessListItem)[] = [
                 'lastStep',
                 'productName',
@@ -91,7 +91,8 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
                 'startedAt',
             ];
             return getTableConfig<T>(completedProcessColumns as (keyof T)[]);
-        case ACTIVE_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY:
+        }
+        case ACTIVE_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY: {
             const activeTasksColumns: (keyof ProcessListItem)[] = [
                 'assignee',
                 'workflowTarget',
@@ -100,7 +101,8 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
                 'processId',
             ];
             return getTableConfig<T>(activeTasksColumns as (keyof T)[]);
-        case COMPLETED_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY:
+        }
+        case COMPLETED_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY: {
             const completedTasksColumns: (keyof ProcessListItem)[] = [
                 'assignee',
                 'workflowTarget',
@@ -109,13 +111,15 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
                 'processId',
             ];
             return getTableConfig<T>(completedTasksColumns as (keyof T)[]);
-        case SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY:
+        }
+        case SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY: {
             const subscriptionColumns: (keyof SubscriptionListItem)[] = [
                 'productName',
                 'customerFullname',
                 'metadata',
             ];
             return getTableConfig<T>(subscriptionColumns as (keyof T)[]);
+        }
         default:
             return getTableConfig();
     }

package/src/utils/getEnvironmentVariables.ts

@@ -7,18 +7,21 @@ export function getEnvironmentVariables<T>(
 ): Record<keyof T, string> {
     const missingEnvironmentVariables: string[] = [];
 
-    const environmentVariablesWithValues = envVars.reduce((acc, currentKey) => {
-        const value = process.env[currentKey.toString()];
+    const environmentVariablesWithValues = envVars.reduce(
+        (acc, currentKey) => {
+            const value = process.env[currentKey.toString()];
 
-        if (value === undefined) {
-            missingEnvironmentVariables.push(currentKey.toString());
-        }
+            if (value === undefined) {
+                missingEnvironmentVariables.push(currentKey.toString());
+            }
 
-        return {
-            ...acc,
-            [currentKey]: value || '',
-        };
-    }, {} as Record<keyof T, string>);
+            return {
+                ...acc,
+                [currentKey]: value || '',
+            };
+        },
+        {} as Record<keyof T, string>,
+    );
 
     if (missingEnvironmentVariables.length > 0) {
         console.warn(

package/eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-    extends: ['@orchestrator-ui/eslint-config-custom'],
-};

package/src/stories/Button.jsx

@@ -1,62 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-
-import './button.css';
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-    const mode = primary
-        ? 'storybook-button--primary'
-        : 'storybook-button--secondary';
-    return (
-        <button
-            type="button"
-            className={[
-                'storybook-button',
-                `storybook-button--${size}`,
-                mode,
-            ].join(' ')}
-            {...props}
-        >
-            {label}
-            <style jsx>{`
-                button {
-                    background-color: ${backgroundColor};
-                }
-            `}</style>
-        </button>
-    );
-};
-
-Button.propTypes = {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary: PropTypes.bool,
-    /**
-     * What background color to use
-     */
-    backgroundColor: PropTypes.string,
-    /**
-     * How large should the button be?
-     */
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    /**
-     * Button contents
-     */
-    label: PropTypes.string.isRequired,
-    /**
-     * Optional click handler
-     */
-    onClick: PropTypes.func,
-};
-
-Button.defaultProps = {
-    backgroundColor: null,
-    primary: false,
-    size: 'medium',
-    onClick: undefined,
-};

package/src/stories/Button.stories.js

@@ -1,45 +0,0 @@
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Example/Button',
-    component: Button,
-    parameters: {
-        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-        layout: 'centered',
-    },
-    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-    tags: ['autodocs'],
-    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary = {
-    args: {
-        primary: true,
-        label: 'Button',
-    },
-};
-
-export const Secondary = {
-    args: {
-        label: 'Button',
-    },
-};
-
-export const Large = {
-    args: {
-        size: 'large',
-        label: 'Button',
-    },
-};
-
-export const Small = {
-    args: {
-        size: 'small',
-        label: 'Button',
-    },
-};