@orchestrator-ui/orchestrator-ui-components 5.0.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.0.0",
+    "version": "5.2.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -48,7 +48,7 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.1.5",
+        "pydantic-forms": "^0.3.1",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

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

@@ -29,7 +29,7 @@ interface SubscriptionSummaryDisplayProps {
     subscriptionId: string;
 }
 
-const SubscriptionSummaryDisplay = ({
+export const SubscriptionSummaryDisplay = ({
     subscriptionId,
 }: SubscriptionSummaryDisplayProps) => {
     const { data } = useGetSubscriptionDetailQuery({

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

@@ -4,6 +4,8 @@ import { WfoTheme } from '@/hooks';
 
 export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
     const formRowStyle = css({
+        marginBottom: theme.base * 2,
+
         '.euiText': {
             color: theme.colors.text,
         },
@@ -19,7 +21,11 @@ export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
         },
     });
 
+    const errorStyle = css({
+        color: theme.colors.dangerText,
+    });
     return {
+        errorStyle,
         formRowStyle,
     };
 };

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

@@ -33,15 +33,12 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { PortMode, ProductTag } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { useGetSubscriptionDropdownOptions } from '@/hooks/deprecated/useGetSubscriptionDropdownOptions';
-import { SubscriptionDropdownOption } from '@/types';
+import { useGetSurfSubscriptionDropdownOptions } from '@/hooks/deprecated/useGetSurfSubcriptionDropdownOptions';
 
-import { getSelectFieldStyles } from './SelectField/styles';
+import { getSelectFieldStyles } from '../SelectField/styles';
+import { FieldProps, Option } from '../types';
 import { subscriptionFieldStyling } from './SubscriptionFieldStyling';
-import { FieldProps, Option } from './types';
-import { getPortMode } from './utils';
 
 declare module 'uniforms' {
     interface FilterDOMProps {
@@ -81,6 +78,18 @@ export type SubscriptionFieldProps = FieldProps<
     }
 >;
 
+function toPortModes(visiblePortMode: string): string[] {
+    if (visiblePortMode === 'all') {
+        return [];
+    }
+
+    if (visiblePortMode === 'normal') {
+        return ['tagged', 'untagged'];
+    }
+
+    return [visiblePortMode];
+}
+
 function SubscriptionFieldDefinition({
     disabled,
     id,
@@ -110,9 +119,6 @@ function SubscriptionFieldDefinition({
     const { reactSelectInnerComponentStyles } =
         useWithOrchestratorTheme(getSelectFieldStyles);
 
-    const { refetch, subscriptions, isFetching } =
-        useGetSubscriptionDropdownOptions(tags, statuses);
-
     const nameArray = joinName(null, name);
     let parentName = joinName(nameArray.slice(0, -1));
 
@@ -136,160 +142,50 @@ function SubscriptionFieldDefinition({
         ? get(model, customerKey, 'nonExistingOrgToFilterEverything')
         : customerId;
 
-    const makeLabel = (subscription: SubscriptionDropdownOption) => {
-        const description =
-            subscription.description ||
-            t('widgets.subscription.missingDescription');
-        const subscriptionSubstring = subscription.subscriptionId.substring(
-            0,
-            8,
-        );
-
-        if (['Node'].includes(subscription.product.tag)) {
-            const description =
-                subscription.description ||
-                t('widgets.subscription.missingDescription');
-            return `${subscription.subscriptionId.substring(
-                0,
-                8,
-            )} ${description.trim()}`;
-        } else if (
-            [
-                ProductTag.SP,
-                ProductTag.SPNL,
-                ProductTag.AGGSP,
-                ProductTag.AGGSPNL,
-                ProductTag.MSC,
-                ProductTag.MSCNL,
-                ProductTag.IRBSP,
-            ].includes(subscription.product.tag as ProductTag)
+    const getFilteredOptions = (optionsInput: Option[]): Option[] => {
+        // Remnant of the old logic in which much more filtering happened clientside, which is now done
+        // server-side by setting the required URL parameters.
+
+        // The 'uniqueItems' filter below should exclude options already chosen in other SubscriptionFields in the same parent Array.
+        // Although this partly relies on uniforms magic which will be reworked/replaced with pydantic-forms.
+        if (
+            parentName !== name &&
+            parent.fieldType === Array &&
+            // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
+            // TODO: Figure out why this is so
+            parent.uniqueItems
         ) {
-            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
-            }`;
+            const allValues: string[] = get(model, parentName, []);
+            const chosenValues = allValues.filter(
+                (_item, index) =>
+                    index.toString() !== nameArray[nameArray.length - 1],
+            );
+
+            return optionsInput.filter((option) =>
+                chosenValues.includes(option.value),
+            );
         } else {
-            return description.trim();
+            return optionsInput;
         }
     };
 
-    // Filter by product, needed because getSubscriptions might return more than we want
-    const getSubscriptionOptions = (): Option[] => {
-        const filteredSubscriptions = subscriptions?.filter((subscription) => {
-            // NOTE: useBandWith, productIds and tags need to be checked in this order as per the V1 logic
-
-            // If a bandwidth filter is supplied it needs to be applied to the subscription product
-            if (usedBandwidth) {
-                const portSpeedInput = subscription.fixedInputs.find(
-                    (fixedInput) => fixedInput.field === 'port_speed',
-                );
-                if (
-                    portSpeedInput?.value &&
-                    parseInt(portSpeedInput.value.toString(), 10) <
-                        parseInt(usedBandwidth.toString(), 10)
-                ) {
-                    return false;
-                }
-            }
-
-            // If specific productIds are provided the subscriptions needs to have one of those
-            if (
-                !usedBandwidth &&
-                productIds &&
-                productIds.length > 0 &&
-                !productIds.includes(subscription.product.productId)
-            ) {
-                return false;
-            }
-
-            if (
-                !usedBandwidth &&
-                !productIds &&
-                tags &&
-                tags?.length > 0 &&
-                !tags.includes(subscription.product.tag)
-            ) {
-                return false;
-            }
-
-            // If specific subscriptionIds are excluded the subscription can't be one ot those
-            if (
-                excludedSubscriptionIds &&
-                excludedSubscriptionIds.length > 0 &&
-                excludedSubscriptionIds.includes(subscription.subscriptionId)
-            ) {
-                return false;
-            }
-
-            // If a Port mode filter is applied we need to filter on that
-            if (visiblePortMode !== 'all') {
-                const portMode = getPortMode(
-                    subscription.productBlockInstances,
-                );
-                // For normal mode filter out all subscriptions that don't have tagged or untagged ports
-                if (
-                    visiblePortMode === 'normal' &&
-                    ![PortMode.TAGGED, PortMode.UNTAGGED, undefined].includes(
-                        portMode,
-                    )
-                ) {
-                    return false;
-                } else if (
-                    portMode !== visiblePortMode &&
-                    visiblePortMode !== 'normal'
-                ) {
-                    return false;
-                }
-            }
-
-            // If a customer filter is applied we need to filter on that
-            if (
-                usedCustomerId &&
-                subscription.customer?.customerId !== usedCustomerId
-            ) {
-                return false;
-            }
-
-            if (parentName !== name) {
-                if (
-                    parent.fieldType === Array &&
-                    // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
-                    // TODO: Figure out why this is so
-                    parent.uniqueItems
-                ) {
-                    const allValues: string[] = get(model, parentName, []);
-                    const chosenValues = allValues.filter(
-                        (_item, index) =>
-                            index.toString() !==
-                            nameArray[nameArray.length - 1],
-                    );
-                    if (!chosenValues.includes(subscription.subscriptionId)) {
-                        return false;
-                    }
-                }
-            }
-
-            return true;
-        });
-
-        return filteredSubscriptions
-            ? filteredSubscriptions.map((subscription) => ({
-                  label: makeLabel(subscription),
-                  value: subscription.subscriptionId,
-              }))
-            : [];
-    };
+    const excludeSubscriptionIds = excludedSubscriptionIds;
+    const portModes = toPortModes(visiblePortMode);
+    const {
+        refetch,
+        options: unfilteredOptions,
+        isFetching,
+    } = useGetSurfSubscriptionDropdownOptions(
+        tags,
+        statuses,
+        productIds,
+        excludeSubscriptionIds,
+        usedCustomerId,
+        portModes,
+        usedBandwidth,
+    );
 
-    const options = getSubscriptionOptions();
+    const options = getFilteredOptions(unfilteredOptions);
 
     const selectedValue = options.find(
         (option: Option) => option.value === value,

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

@@ -12,3 +12,4 @@ export * from './VlanField';
 export * from './FileUploadField';
 export * from './types';
 export * from './utils';
+export * from './SubscriptionField';

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

@@ -20,8 +20,8 @@ export * from './LocationCodeField';
 export * from './deprecated';
 export * from './NestField';
 export * from './OptGroupField';
-export * from './SubscriptionField';
 export * from './SummaryField';
 export * from './CustomerField';
 export * from './ConnectedSelectField';
 export * from './deprecated/FileUploadField';
+export * from './commonStyles';

package/src/components/WfoPydanticForm/Footer.tsx

@@ -11,13 +11,19 @@ import { usePydanticFormContext } from 'pydantic-forms';
 import { EuiButton, EuiHorizontalRule } from '@elastic/eui';
 
 import { useOrchestratorTheme } from '@/hooks';
-import { WfoPlayFill } from '@/icons';
 
 export const Footer = () => {
+    const {
+        rhf,
+        onCancel,
+        onPrevious,
+        allowUntouchedSubmit,
+        hasNext,
+        formInputData,
+    } = usePydanticFormContext();
+
     const { theme } = useOrchestratorTheme();
-    const t = useTranslations();
-    const { rhf, onCancel, allowUntouchedSubmit, isLoading } =
-        usePydanticFormContext();
+    const t = useTranslations('pydanticForms.userInputForm');
 
     const isDisabled: boolean =
         !rhf.formState.isValid ||
@@ -25,42 +31,77 @@ export const Footer = () => {
             !rhf.formState.isDirty &&
             !rhf.formState.isSubmitting);
 
+    const handlePrevious = () => {
+        if (onCancel) {
+            onCancel();
+        }
+    };
+
+    const PreviousButton = () => (
+        <EuiButton
+            id="button-submit-form-submit"
+            tabIndex={0}
+            fill
+            onClick={() => {
+                if (onPrevious) {
+                    onPrevious();
+                }
+            }}
+            color={'primary'}
+            iconSide="right"
+            aria-label={t('previous')}
+            disabled={isDisabled}
+        >
+            {t('previous')}
+        </EuiButton>
+    );
+
+    const CancelButton = () => (
+        <div
+            onClick={handlePrevious}
+            css={{
+                cursor: 'pointer',
+                color: theme.colors.link,
+                fontWeight: theme.font.weight.bold,
+                marginLeft: theme.base / 2,
+                display: 'flex',
+                alignItems: 'center',
+            }}
+        >
+            {t('cancel')}
+        </div>
+    );
+
+    const SubmitButton = () => {
+        const submitButtonLabel = hasNext ? t('next') : t('startWorkflow');
+
+        return (
+            <EuiButton
+                id="button-submit-form-submit"
+                tabIndex={0}
+                fill
+                color={'primary'}
+                type="submit"
+                iconSide="right"
+                aria-label={submitButtonLabel}
+                disabled={isDisabled}
+            >
+                {submitButtonLabel}
+            </EuiButton>
+        );
+    };
+
     return (
         <div>
             <EuiHorizontalRule />
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                <div
-                    onClick={() => {
-                        if (onCancel) {
-                            onCancel();
-                        }
-                    }}
-                    css={{
-                        cursor: 'pointer',
-                        color: theme.colors.link,
-                        fontWeight: theme.font.weight.bold,
-                        marginLeft: theme.base / 2,
-                        display: 'flex',
-                        alignItems: 'center',
-                    }}
-                >
-                    {t('cancel')}
+                <div>
+                    {(formInputData && formInputData.length > 0 && (
+                        <PreviousButton />
+                    )) || <CancelButton />}
                 </div>
 
-                <EuiButton
-                    id="button-submit-form-submit"
-                    tabIndex={0}
-                    fill
-                    color={'primary'}
-                    isLoading={isLoading}
-                    type="submit"
-                    iconType={() => <WfoPlayFill color="#FFF" />}
-                    iconSide="right"
-                    aria-label={t('startWorkflow')}
-                    disabled={isDisabled}
-                >
-                    {t('startWorkflow')}
-                </EuiButton>
+                <SubmitButton />
             </div>
         </div>
     );

package/src/components/WfoPydanticForm/Header.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { usePydanticFormContext } from 'pydantic-forms';
+
+import { css } from '@emotion/react';
+
+const headerStyling = css`
+    padding: 20px 0;
+    font-size: larger;
+    font-weight: bold;
+    margin-bottom: 15px;
+`;
+
+export const Header = () => {
+    const { pydanticFormSchema } = usePydanticFormContext();
+
+    return <h3 css={headerStyling}>{pydanticFormSchema?.title}</h3>;
+};

package/src/components/WfoPydanticForm/Row.tsx

@@ -1,30 +1,42 @@
 import React from 'react';
 
-import type { RowRenderer } from 'pydantic-forms';
+import type { RowRenderComponent } from 'pydantic-forms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
 
-export const Row: RowRenderer = ({
+export const Row: RowRenderComponent = ({
     title,
     description,
     error,
     isInvalid,
+    required,
     children,
 }) => {
-    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
+    const { formRowStyle, errorStyle } = useWithOrchestratorTheme(
+        getCommonFormFieldStyles,
+    );
+
+    const Label = () => {
+        return title ? (
+            <div css={error && errorStyle}>
+                {title} {required && '*'}
+            </div>
+        ) : undefined;
+    };
+
     return (
         <EuiFormRow
             css={formRowStyle}
-            label={title}
+            label={<Label />}
             labelAppend={<EuiText size="m">{description}</EuiText>}
             error={error}
             isInvalid={isInvalid}
             fullWidth
         >
-            <div>{children}</div>
+            <>{children}</>
         </EuiFormRow>
     );
 };