@orchestrator-ui/orchestrator-ui-components 6.8.0 → 7.0.1

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

@@ -1,15 +0,0 @@
-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 './FileUploadField';
-export * from './types';
-export * from './utils';
-export * from './SubscriptionField';

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

@@ -1,74 +0,0 @@
-import { GraphQlSinglePage, Subscription } from '@/types';
-
-export interface ServicePort {
-    subscription_id?: string;
-    vlan?: string;
-    bandwidth?: number;
-    nonremovable?: boolean;
-    modifiable?: boolean;
-}
-
-export enum PortMode {
-    TAGGED = 'tagged',
-    UNTAGGED = 'untagged',
-    LINK_MEMBER = 'link_member',
-}
-
-export enum ProductTag {
-    MSC = 'MSC',
-    MSCNL = 'MSCNL',
-    IRBSP = 'IRBSP',
-    SP = 'SP',
-    SPNL = 'SPNL',
-    AGGSP = 'AGGSP',
-    AGGSPNL = 'AGGSPNL',
-}
-
-export interface ImsPort {
-    id: number;
-    line_name: string;
-    node: string;
-    port: string;
-    iface_type: string;
-    patchposition: string;
-    status: string;
-}
-
-export interface ImsNode {
-    id: number;
-    name: string;
-    status: string;
-}
-
-export interface SortOption<nameStrings = string> {
-    name: nameStrings;
-    descending: boolean;
-}
-
-export interface IpPrefix {
-    id: number;
-    prefix: string;
-    version: number;
-}
-
-export interface IpBlock {
-    id: number;
-    prefix: string;
-    ip_network: string;
-    description: string;
-    state: number;
-    parent: number;
-    version: number;
-    parent_ipam_id: number;
-    is_subnet: boolean;
-    state_repr: string;
-}
-
-export type NodeSubscriptionOption = Pick<
-    Subscription,
-    'subscriptionId' | 'description'
->;
-
-export interface NodeSubscriptionOptionsResult {
-    subscriptions: GraphQlSinglePage<NodeSubscriptionOption>;
-}

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

@@ -1 +0,0 @@
-export const ipamStates = ['Free', 'Allocated', null, 'Planned', null, null];

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

@@ -1,30 +0,0 @@
-export * from './AcceptField';
-export * from './BoolField';
-export * from './DividerField';
-export * from './ErrorField';
-export * from './ErrorsField';
-export * from './LabelField';
-export * from './ListAddField';
-export * from './ListDelField';
-export * from './ListField';
-export * from './ListSelectField';
-export * from './LongTextField';
-export * from './NumField';
-export * from './RadioField';
-export * from './SelectField';
-export * from './SubmitField';
-export * from './SubscriptionSummaryField';
-export * from './TextField';
-export * from './DateField';
-export * from './LocationCodeField';
-export * from './deprecated';
-export * from './NestField';
-export * from './OptGroupField';
-export * from './SummaryField';
-export * from './CustomerField';
-export * from './ConnectedSelectField';
-export * from './deprecated/FileUploadField';
-export * from './commonStyles';
-export * from './types';
-export * from './SummaryFieldStyling';
-export * from './AcceptFieldStyling';

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

@@ -1,86 +0,0 @@
-import { css } from '@emotion/react';
-
-export const listFieldStyling = css`
-    .list-field {
-        ul {
-            display: flex;
-            flex-direction: column;
-            flex-wrap: wrap;
-        }
-
-        li {
-            margin-top: -15px;
-            list-style: none;
-            width: 100%;
-            display: flex;
-            flex-wrap: wrap;
-            margin-left: 8px;
-
-            // We use '>' because we don't want the outer list to influence the inner list
-            > section {
-                display: flex;
-                flex-grow: 20;
-                flex-direction: column;
-
-                // We use '>' because we don't want the outer list to influence the inner list
-                & > * {
-                    display: flex;
-                    flex-direction: column;
-                    width: 99%;
-                    margin-left: 5px;
-                    &:first-of-type {
-                        margin-left: 0;
-                    }
-                }
-            }
-        }
-        div.add-item,
-        div.del-item {
-            display: flex;
-            align-items: center;
-            align-self: baseline;
-            margin: 5px;
-            margin-bottom: 30px;
-            cursor: pointer;
-
-            &[id$='0.remove'] {
-                margin-top: 15px;
-            }
-
-            label {
-                display: block;
-                margin-left: 5px;
-                cursor: pointer;
-            }
-        }
-        .nest-field + div.del-item[id$='0.remove'] {
-            margin-top: 33px;
-        }
-
-        div.del-item {
-            margin-top: 13px;
-        }
-
-        div.add-item {
-            align-self: flex-end;
-        }
-
-        // Used for nested lists (L2VPN)
-        &.outer-list {
-            // We use '>' because we don't want the outer list to influence the inner list
-            > ul > div.add-item {
-                align-self: flex-start;
-                padding: 0 2px 0 0;
-                align-items: center;
-            }
-            // We use '>' because we don't want the outer list to influence the inner list
-            > ul > li > div.del-item {
-                align-self: flex-start;
-            }
-            // We use '>' because we don't want the outer list to influence the inner list
-            > ul > li {
-                flex-direction: column;
-            }
-        }
-    }
-`;

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

@@ -1,41 +0,0 @@
-/*
- * Copyright 2019-2023 SURF.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-import { Ref } from 'react';
-
-import { HTMLFieldProps } from 'uniforms';
-
-export type FieldProps<
-    Value,
-    Extra = object,
-    InputElementType = HTMLInputElement,
-    ElementType = HTMLDivElement,
-> = HTMLFieldProps<
-    Value,
-    ElementType,
-    {
-        inputRef?: Ref<InputElementType>;
-        description?: string;
-    } & Extra
->;
-
-export interface ContactPerson {
-    name: string;
-    email: string;
-    phone?: string;
-}
-
-export function prop<T, K extends keyof T>(obj: T, key: K): T[K] {
-    return obj[key];
-}

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

@@ -1,296 +0,0 @@
-import type { ProductBlockInstance, SubscriptionDetail } from '@/types';
-
-import {
-    ProcessStatus,
-    ProductLifecycleStatus,
-    SubscriptionStatus,
-    WorkflowTarget,
-} from '../../../types';
-import { ProductTag } from './deprecated/types';
-import {
-    getPortMode,
-    subscriptionHasTaggedPortModeInstanceValue,
-    subscriptionHasTaggedProduct,
-} from './utils';
-
-const getProductBlockInstance = (
-    instanceProperties: Partial<ProductBlockInstance> = {},
-): ProductBlockInstance => ({
-    id: 1,
-    parent: 0,
-    productBlockInstanceValues: [],
-    subscriptionInstanceId: 'testId',
-    inUseByRelations: [],
-    subscription: {
-        subscriptionId: 'OwnerSubscriptionId',
-        description: 'OwnerSubscription description',
-    },
-    ...instanceProperties,
-});
-
-const testProductBlockInstances: ProductBlockInstance[] = [
-    getProductBlockInstance(),
-];
-
-const testSubscriptionDetail: SubscriptionDetail = {
-    subscriptionId: 'testId',
-    description: 'test description',
-    insync: false,
-    note: 'test note',
-    fixedInputs: [],
-    product: {
-        productId: 'testId',
-        createdAt: '999-09-09',
-        name: 'Test product name',
-        status: ProductLifecycleStatus.ACTIVE,
-        description: 'Test product description',
-        tag: '',
-        productType: 'testType',
-        endDate: '2222-02-02',
-    },
-    endDate: '2222-02-02',
-    startDate: '1111-01-01',
-    status: SubscriptionStatus.ACTIVE,
-    productBlockInstances: testProductBlockInstances,
-    metadata: {},
-    customerDescriptions: [],
-    processes: {
-        page: [
-            {
-                processId: 'Test process id',
-                lastStatus: ProcessStatus.ABORTED,
-                startedAt: '1111-01-01',
-                createdBy: 'Test',
-                workflowTarget: WorkflowTarget.CREATE,
-                workflowName: 'Test workflow name',
-                isTask: false,
-            },
-        ],
-    },
-};
-
-describe('formField utils', () => {
-    describe('getPortMode()', () => {
-        it('returns undefined if the productBlockInstances is an empty array', () => {
-            const result = getPortMode([]);
-            expect(result).toEqual(undefined);
-        });
-
-        it('returns undefined if the productBlockInstances dont contain a productBlockInstanceValues', () => {
-            const result = getPortMode([
-                getProductBlockInstance({
-                    productBlockInstanceValues: [
-                        {
-                            field: 'key1',
-                            value: 'value1',
-                        },
-                    ],
-                }),
-            ]);
-            expect(result).toEqual(undefined);
-        });
-
-        it('returns undefined if the productBlockInstances dont contain productBlockInstanceValues but none with portMode', () => {
-            const result = getPortMode([
-                getProductBlockInstance({
-                    productBlockInstanceValues: [
-                        {
-                            field: 'portMode',
-                            value: 'NOTTAGGED',
-                        },
-                    ],
-                }),
-            ]);
-            expect(result).toEqual('NOTTAGGED');
-        });
-
-        it('returns the first portMode if there are more than one productBlockInstanceValue with portmode', () => {
-            const result = getPortMode([
-                getProductBlockInstance({
-                    productBlockInstanceValues: [
-                        {
-                            field: 'portMode',
-                            value: 'FIRST',
-                        },
-                    ],
-                }),
-                getProductBlockInstance({
-                    productBlockInstanceValues: [
-                        {
-                            field: 'portMode',
-                            value: 'SECOND',
-                        },
-                    ],
-                }),
-            ]);
-            expect(result).toEqual('FIRST');
-        });
-
-        it('returns undefined if the productBlockInstances dont contain a portMode field', () => {
-            const result = getPortMode([
-                ...testProductBlockInstances,
-                {
-                    id: 1,
-                    parent: 0,
-                    productBlockInstanceValues: [],
-                    subscriptionInstanceId: 'testId',
-                    inUseByRelations: [],
-                    subscription: {
-                        subscriptionId: 'OwnerSubscriptionId',
-                        description: 'OwnerSubscription description',
-                    },
-                },
-            ]);
-            expect(result).toEqual(undefined);
-        });
-    });
-
-    describe('subscriptionHasPortModeInstanceValue()', () => {
-        it('returns false if the subscriptionDetail has no productBlockInstances', () => {
-            const result = subscriptionHasTaggedPortModeInstanceValue(
-                testSubscriptionDetail,
-            );
-            expect(result).toEqual(false);
-        });
-        it('returns false if the subscriptionDetail has no productBlockInstances with no productBlockInstanceValues', () => {
-            const subscriptionDetail: SubscriptionDetail = {
-                ...testSubscriptionDetail,
-                productBlockInstances: [
-                    {
-                        id: 1,
-                        parent: 0,
-                        productBlockInstanceValues: [],
-                        subscriptionInstanceId: 'testId',
-                        inUseByRelations: [],
-                        subscription: {
-                            subscriptionId: 'OwnerSubscriptionId 1',
-                            description: 'OwnerSubscriptionId description',
-                        },
-                    },
-                ],
-            };
-            const result =
-                subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail);
-            expect(result).toEqual(false);
-        });
-
-        it('returns false if the subscriptionDetail has no productBlockInstances with productBlockInstanceValues but not with portMode', () => {
-            const subscriptionDetail: SubscriptionDetail = {
-                ...testSubscriptionDetail,
-                productBlockInstances: [
-                    {
-                        id: 1,
-                        parent: 0,
-                        subscriptionInstanceId: 'testId',
-                        inUseByRelations: [],
-                        subscription: {
-                            subscriptionId: 'OwnerSubscriptionId 1',
-                            description: 'OwnerSubscriptionId description',
-                        },
-                        productBlockInstanceValues: [
-                            {
-                                field: 'key1',
-                                value: 'value1',
-                            },
-                            {
-                                field: 'key2',
-                                value: 'value2',
-                            },
-                        ],
-                    },
-                ],
-            };
-            const result =
-                subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail);
-            expect(result).toEqual(false);
-        });
-        it('returns false if the subscriptionDetail has no productBlockInstances with productBlockInstanceValues with portMode and value not tagged', () => {
-            const subscriptionDetail: SubscriptionDetail = {
-                ...testSubscriptionDetail,
-                productBlockInstances: [
-                    {
-                        id: 1,
-                        parent: 0,
-                        subscriptionInstanceId: 'testId',
-                        inUseByRelations: [],
-                        subscription: {
-                            subscriptionId: 'OwnerSubscriptionId 1',
-                            description: 'OwnerSubscriptionId description',
-                        },
-                        productBlockInstanceValues: [
-                            {
-                                field: 'key1',
-                                value: 'value1',
-                            },
-                            {
-                                field: 'portMode',
-                                value: 'NOTTAGGED',
-                            },
-                        ],
-                    },
-                ],
-            };
-            const result =
-                subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail);
-            expect(result).toEqual(false);
-        });
-        it('returns true if the subscriptionDetail has productBlockInstances with productBlockInstanceValues with field portMode and value = tagged', () => {
-            const subscriptionDetail: SubscriptionDetail = {
-                ...testSubscriptionDetail,
-                productBlockInstances: [
-                    {
-                        id: 1,
-                        parent: 0,
-                        subscriptionInstanceId: 'testId',
-                        inUseByRelations: [],
-                        subscription: {
-                            subscriptionId: 'OwnerSubscriptionId 1',
-                            description: 'OwnerSubscriptionId description',
-                        },
-                        productBlockInstanceValues: [
-                            {
-                                field: 'key1',
-                                value: 'value1',
-                            },
-                            {
-                                field: 'portMode',
-                                value: 'tagged',
-                            },
-                        ],
-                    },
-                ],
-            };
-            const result =
-                subscriptionHasTaggedPortModeInstanceValue(subscriptionDetail);
-            expect(result).toEqual(true);
-        });
-    });
-    describe('subscriptionHasTaggedProduct()', () => {
-        it('returns false if the subscriptionDetail.product.tag is undefined', () => {
-            const result = subscriptionHasTaggedProduct(testSubscriptionDetail);
-            expect(result).toEqual(false);
-        });
-        it('returns false if the subscriptionDetail.product.tag is not a tagged product', () => {
-            const subscriptionDetailTest: SubscriptionDetail = {
-                ...testSubscriptionDetail,
-                product: {
-                    ...testSubscriptionDetail.product,
-                    tag: 'RANDOMTAG',
-                },
-            };
-            const result = subscriptionHasTaggedProduct(subscriptionDetailTest);
-            expect(result).toEqual(false);
-        });
-        it('returns true if the subscriptionDetail.product.tag is a tagged product', () => {
-            const subscriptionDetailTest: SubscriptionDetail = {
-                ...testSubscriptionDetail,
-                product: {
-                    ...testSubscriptionDetail.product,
-                    tag: ProductTag.MSC,
-                },
-            };
-            const result = subscriptionHasTaggedProduct(subscriptionDetailTest);
-            expect(result).toEqual(true);
-        });
-    });
-});

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

@@ -1,69 +0,0 @@
-import { isDate } from 'moment/moment';
-
-import { PortMode, ProductTag } from '@/components';
-import {
-    ProductBlockInstance,
-    ProductBlockInstanceForDropdown,
-    SubscriptionDetail,
-} from '@/types';
-
-// NOTE: There might potentially (?) be more productBlockInstances with portMod but we get the last one here
-export const getPortMode = (
-    productBlockInstances:
-        | ProductBlockInstance[]
-        | ProductBlockInstanceForDropdown[],
-): PortMode | undefined => {
-    return productBlockInstances?.reduce(
-        (portMode: PortMode | undefined, productBlockInstance) => {
-            const portModeField =
-                productBlockInstance.productBlockInstanceValues.find(
-                    (productBlockInstanceValue) =>
-                        productBlockInstanceValue.field === 'portMode',
-                );
-            if (!portMode && portModeField) {
-                return portModeField.value as PortMode;
-            }
-            return portMode;
-        },
-        undefined,
-    );
-};
-
-export const isEmpty = (obj: unknown) => {
-    if (obj === undefined || obj === null) {
-        return true;
-    }
-    if (isDate(obj)) {
-        return false;
-    }
-    if (Array.isArray(obj)) {
-        return obj.length === 0;
-    }
-    if (typeof obj === 'string') {
-        return obj.trim().length === 0;
-    }
-    if (typeof obj === 'object') {
-        return Object.keys(obj).length === 0;
-    }
-    return false;
-};
-
-export const subscriptionHasTaggedPortModeInstanceValue = (
-    subscriptionDetail: SubscriptionDetail,
-): boolean => {
-    const portMode = getPortMode(subscriptionDetail.productBlockInstances);
-    return portMode && portMode === PortMode.TAGGED ? true : false;
-};
-
-export const subscriptionHasTaggedProduct = (
-    subscriptionDetail: SubscriptionDetail,
-): boolean => {
-    const productsWithTaggedPorts: string[] = [
-        ProductTag.MSC,
-        ProductTag.MSCNL,
-        ProductTag.IRBSP,
-    ];
-    return productsWithTaggedPorts.includes(subscriptionDetail.product.tag)
-        ? true
-        : false;
-};

package/src/components/WfoForms/index.ts

@@ -1,5 +0,0 @@
-export * from './AutoFields';
-export * from './UserInputForm';
-export * from './UserInputFormWizard';
-export * from './formFields';
-export * from './CreateForm';

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

@@ -1,67 +0,0 @@
-import React, { useState } from 'react';
-
-import { EuiFlexItem } from '@elastic/eui';
-
-import { UserInputFormWizard, WfoError, WfoLoading } from '@/components';
-import { useOrchestratorTheme } from '@/hooks';
-import { HttpStatus } from '@/rtk';
-import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
-import { FormUserPermissions, InputForm } from '@/types/forms';
-
-interface WfoStepFormProps {
-    userInputForm: InputForm;
-    isTask: boolean;
-    processId?: string;
-    userPermissions: FormUserPermissions;
-}
-
-export const WfoStepFormOld = ({
-    userInputForm,
-    isTask,
-    processId,
-    userPermissions,
-}: WfoStepFormProps) => {
-    const [isProcessing, setIsProcessing] = useState<boolean>(false);
-    const [hasError, setHasError] = useState<boolean>(false);
-    const { theme } = useOrchestratorTheme();
-    const [resumeProcess] = useResumeProcessMutation();
-
-    const submitForm = (processInput: object[]) => {
-        if (!processId) {
-            return Promise.reject();
-        }
-
-        return resumeProcess({ processId, userInputs: processInput })
-            .unwrap()
-            .then(() => {
-                setIsProcessing(true);
-            })
-            .catch((error) => {
-                if (error?.status !== HttpStatus.FormNotComplete) {
-                    if (error?.status === HttpStatus.BadRequest) {
-                        // Rethrow the error so userInputForm can catch it and display validation errors
-                        throw error;
-                    }
-                    console.error(error);
-                    setHasError(true);
-                } else {
-                    throw error;
-                }
-            });
-    };
-
-    return (
-        <EuiFlexItem css={{ margin: theme.size.m }}>
-            {(hasError && <WfoError />) || (isProcessing && <WfoLoading />) || (
-                <UserInputFormWizard
-                    stepUserInput={userInputForm}
-                    stepSubmit={submitForm}
-                    hasNext={false}
-                    isTask={isTask}
-                    isResuming={true}
-                    allowSubmit={userPermissions.resumeAllowed}
-                />
-            )}
-        </EuiFlexItem>
-    );
-};