@orchestrator-ui/orchestrator-ui-components 0.2.4 → 0.2.6

package/src/components/WfoForms/UserInputFormWizard.tsx

@@ -0,0 +1,120 @@
+/*
+ * 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 { ConfirmDialogActions } from '../../contexts/ConfirmationDialogProvider';
+import { FormNotCompleteResponse, InputForm } from '../../types/forms';
+import UserInputForm from './UserInputForm';
+import { useAxiosApiClient } from './useAxiosApiClient';
+
+interface Form {
+    form: InputForm;
+    hasNext?: boolean;
+}
+
+interface UserInputFormWizardProps {
+    stepUserInput: InputForm;
+    validSubmit: (processInput: object[]) => Promise<unknown>;
+    cancel: () => void;
+    hasNext?: boolean;
+}
+
+function stop(e: React.SyntheticEvent) {
+    if (e !== undefined && e !== null) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}
+
+function UserInputFormWizard({
+    hasNext = false,
+    stepUserInput,
+    validSubmit,
+    cancel,
+}: UserInputFormWizardProps) {
+    const router = useRouter();
+    const apiClient = useAxiosApiClient();
+    const [forms, setForms] = useState<Form[]>([
+        { form: stepUserInput, hasNext: hasNext },
+    ]);
+    const [userInputs, setUserInputs] = useState<object[]>([]);
+
+    useEffect(() => {
+        setForms([{ form: stepUserInput, hasNext: hasNext }]);
+    }, [hasNext, stepUserInput]);
+
+    const previous: ConfirmDialogActions['closeConfirmDialog'] = (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 result = validSubmit(newUserInputs);
+        return apiClient.catchErrorStatus<FormNotCompleteResponse>(
+            result,
+            510,
+            (json) => {
+                // Scroll to top when navigating to next screen of wizard
+                window.scrollTo(0, 0);
+                // setFlash(intl.formatMessage({ id: "process.flash.wizard_next_step" }));
+                setForms([
+                    ...forms,
+                    { form: json.form, hasNext: json.hasNext },
+                ]);
+                setUserInputs(newUserInputs);
+            },
+        );
+    };
+
+    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 (
+        <UserInputForm
+            key={key}
+            router={router}
+            stepUserInput={currentForm.form}
+            validSubmit={submit}
+            previous={previous}
+            hasNext={currentForm.hasNext}
+            hasPrev={forms.length > 1}
+            cancel={cancel}
+            userInput={currentUserInput}
+        />
+    );
+}
+
+export default UserInputFormWizard;

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

@@ -0,0 +1,239 @@
+/*
+ * 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 { getStyles } 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('pydanticForms.widgets');
+    const { acceptFieldStyle } = useWithOrchestratorTheme(getStyles);
+
+    const legacy = !data;
+    const i18nBaseKey = data ? `forms.fields.${name}_accept` : 'forms.fields';
+
+    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}
+                                </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

@@ -0,0 +1,29 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    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,
+                },
+            },
+        },
+    });
+
+    return {
+        acceptFieldStyle: acceptFieldStyle,
+    };
+};

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

@@ -0,0 +1,71 @@
+/*
+ * 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 '../../../types/forms';
+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) {
+    return (
+        <EuiFlexItem css={boolFieldStyling}>
+            <section
+                {...filterDOMProps(props)}
+                className={`${className} bool-field`}
+            >
+                <EuiFormRow
+                    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={name}
+                        onChange={() =>
+                            !disabled && !readOnly && onChange(!value)
+                        }
+                    />
+                </EuiFormRow>
+            </section>
+        </EuiFlexItem>
+    );
+}
+
+export const BoolField = connectField(Bool, { kind: 'leaf' });

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

@@ -0,0 +1,68 @@
+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;
+    }
+
+    input[type="checkbox"] {
+      display: none;
+    }
+
+    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/ContactPersonAutocomplete.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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, useRef } from 'react';
+
+import scrollIntoView from 'scroll-into-view';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '../../../hooks';
+import { getStyles } from './ContactPersonAutocompleteStyles';
+import { ContactPerson } from './types';
+import { isEmpty } from './utils';
+
+interface ContactPersonAutocompleteProps {
+    query: string;
+    selectedItem: number;
+    personIndex: number;
+    itemSelected: (value: ContactPerson, index: number) => void;
+    suggestions: ContactPerson[];
+}
+
+export const ContactPersonAutocomplete = ({
+    query,
+    selectedItem,
+    personIndex,
+    itemSelected,
+    suggestions,
+}: ContactPersonAutocompleteProps) => {
+    const { contactPersonAutocompleteStyling } =
+        useWithOrchestratorTheme(getStyles);
+
+    // Intentionally not done with state since we don't need a rerender
+    // This is only to store a ref for the scroll into view part
+    const selectedRowRef = useRef(null);
+
+    useEffect(() => {
+        if (!isEmpty(suggestions) && selectedRowRef.current) {
+            scrollIntoView(selectedRowRef.current);
+        }
+    }, [selectedItem, suggestions]);
+
+    const itemName = (item: ContactPerson, query: string) => {
+        const name = item.name;
+        const nameToLower = name.toLowerCase();
+        const indexOf = nameToLower.indexOf(query.toLowerCase());
+        const first = name.substring(0, indexOf);
+        const middle = name.substring(indexOf, indexOf + query.length);
+        const last = name.substring(indexOf + query.length);
+        return (
+            <span>
+                {first}
+                <span className="matched">{middle}</span>
+                {last}
+            </span>
+        );
+    };
+
+    return isEmpty(suggestions) ? null : (
+        <EuiFlexItem css={contactPersonAutocompleteStyling}>
+            <section className={`autocomplete`}>
+                <table className="result">
+                    <tbody>
+                        {suggestions.map((item, index) => (
+                            <tr
+                                key={index}
+                                className={
+                                    selectedItem === index ? 'active' : ''
+                                }
+                                onClick={() => itemSelected(item, personIndex)}
+                                ref={
+                                    selectedItem === index
+                                        ? selectedRowRef
+                                        : null
+                                }
+                            >
+                                <td>{itemName(item, query)}</td>
+                                <td>{item.email || ''}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </section>
+        </EuiFlexItem>
+    );
+};

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

@@ -0,0 +1,40 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const contactPersonAutocompleteStyling = css`
+        .autocomplete-container {
+            position: relative;
+        }
+
+        section.autocomplete {
+            position: relative;
+            z-index: 2000;
+            width: 100%;
+            border-radius: ${theme.border.radius.medium};
+            background-color: ${theme.colors.lightShade};
+            margin-bottom: 20px;
+
+            table.result {
+                z-index: 2000;
+
+                tbody tr {
+                    cursor: pointer;
+
+                    td {
+                        padding: 10px;
+                        width: 50%;
+                        vertical-align: middle;
+                        span.matched {
+                            font-weight: bold;
+                            text-decoration: underline;
+                        }
+                    }
+                }
+            }
+        }
+    `;
+    return {
+        contactPersonAutocompleteStyling,
+    };
+};