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

package/src/components/WfoForms/UserInputFormStyling.ts

@@ -1,80 +0,0 @@
-import { css } from '@emotion/react';
-
-// Todo: theme with decent colors from theme (style was copied from v1)
-const PRIMARY_COLOR = '#0077cc';
-
-export const userInputFormStyling = css`
-    .user-input-form {
-        h3 {
-            padding: 20px 0;
-            font-size: larger;
-            font-weight: bold;
-            margin-bottom: 15px;
-        }
-
-        .form-input {
-            margin: 20px 0;
-
-            padding-bottom: 20px;
-
-            em {
-                margin-bottom: 1px;
-            }
-
-            &.first_lightpath,
-            &.second_lightpath,
-            p.label {
-                text-transform: uppercase;
-                font-weight: bold;
-                color: ${PRIMARY_COLOR};
-            }
-
-            &.downgrade_redundant_lp_choice,
-            &.service_ports_primary,
-            &.service_ports_secondary {
-                margin-left: 40px;
-            }
-
-            b {
-                // styles the arrows of numeric input
-                margin-top: 4px;
-                margin-left: 1px;
-            }
-        }
-
-        section.form-errors {
-            padding-bottom: 20px;
-        }
-
-        .actions {
-            display: flex;
-            margin-top: 25px;
-
-            .notes {
-                display: flex;
-                align-items: center;
-                flex-grow: 2;
-            }
-
-            label {
-                margin-right: 10px;
-            }
-        }
-    }
-
-    /* EUI specific styling for the forms */
-
-    .euiFormRow {
-        margin-bottom: 26px; // For service ports this add margin to the label??
-    }
-
-    .euiFormRow__labelWrapper {
-        flex-direction: column;
-        margin-top: -10px;
-    }
-
-    .euiFormRow__label__large {
-        font-size: +1.1em;
-        margin-bottom: 0;
-    }
-`;

package/src/components/WfoForms/UserInputFormWizard.tsx

@@ -1,127 +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 React, { useEffect, useState } from 'react';
-
-import { useRouter } from 'next/router';
-import hash from 'object-hash';
-
-import type { ConfirmDialogHandler } from '@/contexts';
-import { HttpStatus, handlePromiseErrorWithCallback } from '@/rtk';
-import { FormNotCompleteResponse, InputForm } from '@/types/forms';
-
-import { WfoUserInputForm } from './UserInputForm';
-
-interface Form {
-    form: InputForm;
-    hasNext?: boolean;
-}
-
-interface UserInputFormWizardProps {
-    stepUserInput: InputForm;
-    stepSubmit: (processInput: object[]) => Promise<unknown>;
-    cancel?: ConfirmDialogHandler;
-    isTask: boolean;
-    hasNext?: boolean;
-    isResuming?: boolean;
-    allowSubmit?: boolean;
-}
-
-function stop(e: React.SyntheticEvent) {
-    if (e !== undefined && e !== null) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-}
-
-export const UserInputFormWizard = ({
-    hasNext = false,
-    stepUserInput,
-    stepSubmit,
-    cancel,
-    isTask,
-    isResuming = false,
-    allowSubmit = true,
-}: UserInputFormWizardProps) => {
-    const router = useRouter();
-    const [forms, setForms] = useState<Form[]>([
-        { form: stepUserInput, hasNext: hasNext },
-    ]);
-    const [userInputs, setUserInputs] = useState<object[]>([]);
-
-    useEffect(() => {
-        setForms([{ form: stepUserInput, hasNext: hasNext }]);
-    }, [hasNext, stepUserInput]);
-
-    const previous: ConfirmDialogHandler = (e) => {
-        if (e) {
-            stop(e);
-        }
-        const current = forms.pop();
-        setForms(forms.filter((item) => item !== current));
-    };
-
-    const submit = (currentFormData: object) => {
-        const newUserInputs = userInputs.slice(0, forms.length - 1);
-        newUserInputs.push(currentFormData);
-
-        const promise = stepSubmit(newUserInputs);
-        const callback = (data: FormNotCompleteResponse) => {
-            window.scrollTo(0, 0);
-            setForms([
-                ...forms,
-                { form: data.form, hasNext: data.meta?.hasNext },
-            ]);
-            setUserInputs(newUserInputs);
-        };
-
-        return handlePromiseErrorWithCallback<FormNotCompleteResponse>(
-            promise,
-            HttpStatus.FormNotComplete,
-            callback,
-        );
-    };
-
-    const currentForm = forms[forms.length - 1];
-    const currentUserInput = userInputs[forms.length - 1];
-    if (!currentForm || !currentForm.form.properties) {
-        return null;
-    }
-
-    /* Generate a key based on input widget names that results in a new
-     * clean instance + rerender of UserInputForm if the form changes. Without this, state of previous,
-     * wizard step can cause wrong/weird default values for forms inputs.
-     *
-     * Note: to ensure a new form for multiple form wizard steps with exactly the same fields and labels on
-     * the form the hash is calculated on the form object itself + length, which generates a unique hash as it
-     * has a changing ".length" attribute.
-     * */
-    const key = hash.sha1({ form: currentForm.form, length: forms.length });
-    return (
-        <WfoUserInputForm
-            key={key}
-            router={router}
-            stepUserInput={currentForm.form}
-            validSubmit={submit}
-            previous={previous}
-            hasNext={currentForm.hasNext}
-            hasPrev={forms.length > 1}
-            cancel={cancel}
-            userInput={currentUserInput}
-            isTask={isTask}
-            isResuming={isResuming}
-            disabled={!allowSubmit}
-        />
-    );
-};

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

@@ -1,243 +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 React, { useReducer } from 'react';
-
-import { useTranslations } from 'next-intl';
-import { connectField, filterDOMProps } from 'uniforms';
-
-import { EuiCheckbox, EuiFlexItem, EuiText } from '@elastic/eui';
-
-import { useWithOrchestratorTheme } from '@/hooks';
-
-import { getAcceptFieldStyles } from './AcceptFieldStyling';
-import { FieldProps } from './types';
-
-type AcceptItemType =
-    | 'info'
-    | 'label'
-    | 'warning'
-    | 'url'
-    | 'checkbox'
-    | '>checkbox'
-    | 'checkbox?'
-    | '>checkbox?'
-    | 'skip'
-    | 'margin'
-    | 'value';
-type AcceptItem = [string, AcceptItemType, Record<string, string>?];
-type AcceptValue = 'SKIPPED' | 'ACCEPTED' | 'INCOMPLETE';
-
-export type AcceptFieldProps = FieldProps<AcceptValue, { data?: AcceptItem[] }>;
-
-declare module 'uniforms' {
-    interface FilterDOMProps {
-        data: never;
-    }
-}
-
-filterDOMProps.register('data');
-
-interface AcceptState {
-    checks: { [index: number]: boolean };
-    skip: boolean;
-    allChecked: boolean;
-}
-
-interface Action {
-    field: number;
-    type: string;
-    value: boolean;
-}
-
-function Accept({
-    disabled,
-    className = '',
-    name,
-    onChange,
-    error,
-    showInlineError,
-    errorMessage,
-    data,
-    ...props
-}: AcceptFieldProps) {
-    const t = useTranslations();
-    const { acceptFieldStyle } = useWithOrchestratorTheme(getAcceptFieldStyles);
-
-    const legacy = !data;
-    const i18nBaseKey = data
-        ? `pydanticForms.backendTranslations.${name}_accept`
-        : 'pydanticForms.backendTranslations';
-
-    data = data ?? [
-        [name, 'label', {}],
-        [`${name}_info`, 'info', {}],
-        [name, 'checkbox', {}],
-    ];
-
-    const [state, dispatch] = useReducer(
-        (state: AcceptState, action: Action) => {
-            if (action.type === 'skip') {
-                state.skip = action.value;
-                state.checks = {};
-            } else {
-                state.checks[action.field] = action.value;
-            }
-
-            // We intentionally skip optional checkboxes here
-            state.allChecked = data!
-                .map(
-                    (entry: AcceptItem, index: number) =>
-                        [entry, state.checks[index] || false] as [
-                            AcceptItem,
-                            boolean,
-                        ],
-                )
-                .filter((entry: [AcceptItem, boolean]) =>
-                    entry[0][1].endsWith('checkbox'),
-                )
-                .map((entry: [AcceptItem, boolean]) => entry[1])
-                .every((check: boolean) => check);
-
-            onChange(
-                state.skip
-                    ? 'SKIPPED'
-                    : state.allChecked
-                    ? 'ACCEPTED'
-                    : 'INCOMPLETE',
-            );
-
-            return { ...state };
-        },
-        { checks: {}, skip: false, allChecked: false },
-    );
-
-    return (
-        <EuiFlexItem css={acceptFieldStyle}>
-            <section
-                {...filterDOMProps(props)}
-                className={`${className} acceptField`}
-            >
-                {data.map((entry, index) => {
-                    const label = t(`${i18nBaseKey}.${entry[0]}`, entry[2]);
-
-                    switch (entry[1]) {
-                        case 'label':
-                            return (
-                                <label
-                                    key={index}
-                                    className="euiFormLabel euiFormRow__label"
-                                >
-                                    {label}
-                                </label>
-                            );
-                        case 'info':
-                            return (
-                                <EuiText key={index} size="m">
-                                    {label}
-                                </EuiText>
-                            );
-                        case 'url':
-                            return (
-                                <div key={index}>
-                                    <a
-                                        href={entry[0]}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                    >
-                                        {entry[0]}
-                                    </a>
-                                </div>
-                            );
-                        case 'value':
-                            return (
-                                <div key={index}>
-                                    <input value={entry[0]} disabled={true} />
-                                </div>
-                            );
-                        case 'margin':
-                            return <br key={index} />;
-                        case 'warning':
-                            return (
-                                <label
-                                    key={index}
-                                    className="euiFormLabel euiFormRow__label warning"
-                                >
-                                    {label}: <br />
-                                </label>
-                            );
-                        case 'skip':
-                            return (
-                                <EuiCheckbox
-                                    id={entry[0]}
-                                    key={index}
-                                    name={entry[0]}
-                                    onChange={(
-                                        e: React.FormEvent<HTMLInputElement>,
-                                    ) => {
-                                        const target =
-                                            e.target as HTMLInputElement;
-                                        dispatch({
-                                            field: index,
-                                            type: 'skip',
-                                            value: target.checked,
-                                        });
-                                    }}
-                                    checked={state.skip}
-                                    label={label}
-                                    className={'skip'}
-                                />
-                            );
-                        default:
-                            return (
-                                <EuiCheckbox
-                                    id={entry[0] + (legacy ? '' : index)}
-                                    key={index}
-                                    name={entry[0] + (legacy ? '' : index)} // Index needed to allow checkboxes with same name (we can skip this in legacy mode)
-                                    className={
-                                        entry[1].startsWith('>')
-                                            ? 'level_2'
-                                            : undefined
-                                    }
-                                    onChange={(
-                                        e: React.FormEvent<HTMLInputElement>,
-                                    ) => {
-                                        const target =
-                                            e.target as HTMLInputElement;
-
-                                        dispatch({
-                                            field: index,
-                                            type: 'check',
-                                            value: target.checked,
-                                        });
-                                    }}
-                                    checked={state.checks[index]}
-                                    label={label}
-                                    readOnly={state.skip || disabled}
-                                />
-                            );
-                    }
-                })}
-
-                {error && showInlineError && (
-                    <em className="error">
-                        <div className="backend-validation">{errorMessage}</div>
-                    </em>
-                )}
-            </section>
-        </EuiFlexItem>
-    );
-}
-
-export const AcceptField = connectField(Accept);

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

@@ -1,35 +0,0 @@
-import { css } from '@emotion/react';
-
-import { WfoTheme } from '@/hooks';
-
-export const getAcceptFieldStyles = ({ theme }: WfoTheme) => {
-    const acceptFieldStyle = css({
-        '.acceptField': {
-            'label.warning': {
-                color: theme.colors.danger,
-            },
-            '.skip': {
-                color: theme.colors.success,
-                fontStyle: 'italic',
-            },
-
-            // Don't touch the margin + padding: they also control if the user can click on the checkbox instead of label
-            '.level_2': {
-                marginLeft: '24px',
-                padding: 0,
-                label: {
-                    marginTop: 0,
-                },
-            },
-
-            '.labelTitle': {
-                fontWeight: '600',
-                color: theme.colors.text,
-            },
-        },
-    });
-
-    return {
-        acceptFieldStyle: acceptFieldStyle,
-    };
-};

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

@@ -1,77 +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 React from 'react';
-
-import { connectField, filterDOMProps } from 'uniforms';
-
-import { EuiCheckbox, EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
-
-import { FieldProps } from '@/components';
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useWithOrchestratorTheme } from '@/hooks';
-
-import { boolFieldStyling } from './BoolFieldStyling';
-
-export type BoolFieldProps = FieldProps<boolean>;
-
-function Bool({
-    disabled,
-    id,
-    className = '',
-    label,
-    description,
-    name,
-    onChange,
-    readOnly,
-    value,
-    error,
-    showInlineError,
-    errorMessage,
-    ...props
-}: BoolFieldProps) {
-    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
-
-    return (
-        <EuiFlexItem css={boolFieldStyling}>
-            <section
-                {...filterDOMProps(props)}
-                className={`${className} bool-field`}
-            >
-                <EuiFormRow
-                    css={formRowStyle}
-                    label={label}
-                    labelAppend={<EuiText size="m">{description}</EuiText>}
-                    error={showInlineError ? errorMessage : false}
-                    isInvalid={error}
-                    id={id}
-                    fullWidth
-                >
-                    <EuiCheckbox
-                        checked={value || false}
-                        disabled={disabled}
-                        id={id}
-                        name={name}
-                        label={label || <div>&nbsp;</div>}
-                        onChange={() =>
-                            !disabled && !readOnly && onChange(!value)
-                        }
-                    />
-                </EuiFormRow>
-            </section>
-        </EuiFlexItem>
-    );
-}
-
-export const BoolField = connectField(Bool, { kind: 'leaf' });

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

@@ -1,64 +0,0 @@
-import { css } from '@emotion/react';
-
-// Todo: theme with decent colors from theme (style was copied from v1)
-const PRIMARY_COLOR = '#0077cc';
-const LIGHT_GREY_COLOR = '#eff2f3';
-const MEDIUM_GREY_COLOR = '#a6b6be';
-
-export const boolFieldStyling = css`
-
-  .bool-field {
-    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label {
-      z-index: unset;
-    }
-
-    label {
-      display: inline-block;
-      margin: 3px 0;
-      &.info {
-        margin-left: 10px;
-        cursor: pointer;
-      }
-    }
-
-    input[type="checkbox"] + label span {
-      font-size: 11px;
-      background-color: white;
-      border: 1px solid ${PRIMARY_COLOR};
-      border-radius: 3px;
-      padding: 1px 2px;
-      margin: 2px 0;
-      cursor: pointer;
-      i {
-        color: transparent;
-        padding: 0 1px;
-      }
-    }
-
-    input[type="checkbox"]:disabled + label span {
-      border: 1px solid ${MEDIUM_GREY_COLOR}
-      background-color: ${LIGHT_GREY_COLOR};
-      cursor: not-allowed;
-    }
-
-    input[type="checkbox"]:checked + label span {
-      border: 2px solid ${PRIMARY_COLOR};
-      border-radius: 2px;
-      box-shadow: none;
-      padding: 0;
-      i {
-        background-color: ${PRIMARY_COLOR};
-        color: white;
-        padding: 3px 2px;
-      }
-    }
-
-    input[type="checkbox"]:checked:disabled + label span {
-      border: 3px solid ${MEDIUM_GREY_COLOR};
-      cursor: default;
-      i {
-        background-color: ${MEDIUM_GREY_COLOR};
-      }
-    }
-  }
-`;

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

@@ -1,19 +0,0 @@
-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',
-});