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

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

@@ -0,0 +1,98 @@
+/*
+ * 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 cloneDeep from 'lodash/cloneDeep';
+import { useTranslations } from 'next-intl';
+import { connectField, filterDOMProps, joinName, useField } from 'uniforms';
+
+import { EuiIcon, EuiText } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../../hooks';
+import { FieldProps } from './types';
+
+export type ListAddFieldProps = FieldProps<
+    string,
+    { initialCount?: number; outerList?: boolean }
+>;
+
+// onChange not used on purpose
+function ListAdd({
+    disabled,
+    initialCount,
+    name,
+    readOnly,
+    value,
+    outerList = false,
+    ...props
+}: ListAddFieldProps) {
+    const { theme } = useOrchestratorTheme();
+    const t = useTranslations('pydanticForms.fields');
+
+    const nameParts = joinName(null, name);
+    const parentName = joinName(nameParts.slice(0, -1));
+    const parent = useField<
+        { initialCount?: number; maxCount?: number },
+        unknown[]
+    >(parentName, { initialCount }, { absoluteName: true })[0];
+
+    const limitNotReached =
+        !disabled &&
+        !(
+            parent.maxCount! <=
+            Math.max(initialCount ?? 0, parent.value!.length)
+        );
+    const count = 1 + Math.max((initialCount ?? 0) - parent.value!.length, 0);
+
+    function onAction(event: React.KeyboardEvent | React.MouseEvent) {
+        if (
+            limitNotReached &&
+            !readOnly &&
+            (!('key' in event) || event.key === 'Enter')
+        ) {
+            const newRowsValue = Array(count).fill(cloneDeep(value));
+            parent.onChange(parent.value!.concat(newRowsValue));
+        }
+    }
+
+    return (
+        <div
+            className="add-item"
+            {...filterDOMProps(props)}
+            onClick={onAction}
+            onKeyDown={onAction}
+            role="button"
+            tabIndex={0}
+        >
+            <EuiIcon
+                type="plus"
+                size="xxl"
+                color={
+                    !limitNotReached || disabled
+                        ? theme.colors.disabled
+                        : theme.colors.success
+                }
+            />
+            <label>
+                {outerList && <EuiText>{t(`${parentName}_add`)}</EuiText>}
+            </label>
+        </div>
+    );
+}
+
+export const ListAddField = connectField(ListAdd, {
+    initialValue: false,
+    kind: 'leaf',
+});

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

@@ -0,0 +1,95 @@
+/*
+ * 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 { useTranslations } from 'next-intl';
+import { connectField, filterDOMProps, joinName, useField } from 'uniforms';
+
+import { EuiIcon, EuiText } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../../hooks';
+import { FieldProps } from './types';
+
+export type ListDelFieldProps = FieldProps<
+    null,
+    { initialCount?: number; itemProps?: object; outerList?: boolean }
+>;
+
+// onChange prop not used on purpose
+function ListDel({
+    disabled,
+    name,
+    readOnly,
+    id,
+    outerList = false,
+    ...props
+}: ListDelFieldProps) {
+    const { theme } = useOrchestratorTheme();
+    const t = useTranslations('pydanticForms.fields');
+
+    const nameParts = joinName(null, name);
+    const nameIndex = +nameParts[nameParts.length - 1];
+    const parentName = joinName(nameParts.slice(0, -1));
+    const parent = useField<{ minCount?: number }, unknown[]>(
+        parentName,
+        {},
+        { absoluteName: true },
+    )[0];
+
+    const limitNotReached =
+        !disabled && !(parent.minCount! >= parent.value!.length);
+
+    function onAction(event: React.KeyboardEvent | React.MouseEvent) {
+        if (
+            limitNotReached &&
+            !readOnly &&
+            (!('key' in event) || event.key === 'Enter')
+        ) {
+            const value = parent.value!.slice();
+            value.splice(nameIndex, 1);
+            parent.onChange(value);
+        }
+    }
+
+    return (
+        <div
+            {...filterDOMProps(props)}
+            className="del-item"
+            id={`${id}.remove`}
+            onClick={onAction}
+            onKeyDown={onAction}
+            role="button"
+            tabIndex={0}
+        >
+            <EuiIcon
+                type="minus"
+                size="xxl"
+                color={
+                    !limitNotReached || disabled
+                        ? theme.colors.disabled
+                        : theme.colors.danger
+                }
+            />
+            <label>
+                {outerList && <EuiText>{t(`${parentName}_del`)}</EuiText>}
+            </label>
+        </div>
+    );
+}
+
+export const ListDelField = connectField(ListDel, {
+    initialValue: false,
+    kind: 'leaf',
+});

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

@@ -0,0 +1,113 @@
+/*
+ * 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, { Children, cloneElement, isValidElement } from 'react';
+
+import range from 'lodash/range';
+import { connectField, filterDOMProps, joinName, useField } from 'uniforms';
+
+import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
+
+import { ListAddField } from './ListAddField';
+import { ListItemField } from './ListItemField';
+import { listFieldStyling } from './listFieldStyling';
+import { FieldProps } from './types';
+
+declare module 'uniforms' {
+    interface FilterDOMProps {
+        items: never;
+        uniqueItems: never;
+        outerList: never;
+    }
+}
+filterDOMProps.register('minCount');
+filterDOMProps.register('maxCount');
+filterDOMProps.register('items');
+filterDOMProps.register('uniqueItems');
+filterDOMProps.register('outerList');
+
+export type ListFieldProps = FieldProps<
+    unknown[],
+    { initialCount?: number; itemProps?: object; uniqueItems?: boolean },
+    null,
+    HTMLUListElement
+>;
+
+function List({
+    disabled,
+    children = <ListItemField name="$" disabled={disabled} outerList={false} />,
+    initialCount = 1,
+    itemProps,
+    label,
+    description,
+    name,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    ...props
+}: ListFieldProps) {
+    const child = useField(joinName(name, '$'), {}, { absoluteName: true })[0];
+    const hasListAsChild = child.fieldType === Array;
+
+    return (
+        <EuiFlexItem css={listFieldStyling}>
+            <section
+                {...filterDOMProps(props)}
+                className={`list-field${hasListAsChild ? ' outer-list' : ''}`}
+            >
+                <EuiFormRow
+                    label={label}
+                    labelAppend={<EuiText size="m">{description}</EuiText>}
+                    error={showInlineError ? errorMessage : false}
+                    isInvalid={error}
+                    id={`formrow-${name}`}
+                    fullWidth
+                >
+                    <></>
+                </EuiFormRow>
+
+                <ul>
+                    {range(Math.max(value?.length ?? 0, initialCount ?? 0)).map(
+                        (itemIndex) =>
+                            Children.map(children, (child, childIndex) =>
+                                isValidElement(child)
+                                    ? cloneElement(child, {
+                                          key: `${itemIndex}-${childIndex}`,
+                                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                          // @ts-ignore
+                                          name: child.props.name?.replace(
+                                              '$',
+                                              itemIndex.toString(),
+                                          ),
+                                          outerList: hasListAsChild,
+                                          ...itemProps,
+                                      })
+                                    : child,
+                            ),
+                    )}
+
+                    <ListAddField
+                        initialCount={initialCount}
+                        name="$"
+                        disabled={disabled}
+                        outerList={hasListAsChild}
+                    />
+                </ul>
+            </section>
+        </EuiFlexItem>
+    );
+}
+
+export const ListField = connectField(List);

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

@@ -0,0 +1,40 @@
+/*
+ * 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, { ReactNode } from 'react';
+
+import { connectField } from 'uniforms';
+import { AutoField } from 'uniforms-unstyled';
+
+import { ListDelField } from './ListDelField';
+
+export type ListItemFieldProps = {
+    children?: ReactNode;
+    name: string;
+    outerList?: boolean;
+};
+
+function ListItem({
+    children = <AutoField label={null} name="" />,
+    outerList = false,
+}: ListItemFieldProps) {
+    return (
+        <li>
+            {children}
+            <ListDelField name="" outerList={outerList} />
+        </li>
+    );
+}
+
+export const ListItemField = connectField(ListItem, { initialValue: false });

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

@@ -0,0 +1,92 @@
+/*
+ * 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.
+ *
+ */
+
+/* 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.
+ */
+import React from 'react';
+
+import { get } from 'lodash';
+import { connectField, joinName, useField, useForm } from 'uniforms';
+
+import { ListField, ListFieldProps } from './ListField';
+import { ListItemField } from './ListItemField';
+// Avoid circular deps
+import { SelectField } from './SelectField';
+import { FieldProps } from './types';
+
+export type ListSelectFieldProps = FieldProps<
+    string | string[],
+    { allowedValues?: string[]; transform?(value: string): string }
+>;
+
+function ListSelect({
+    allowedValues = [],
+    fieldType,
+    name,
+    transform,
+}: ListSelectFieldProps) {
+    const nameArray = joinName(null, name);
+    let parentName = joinName(nameArray.slice(0, -1));
+
+    // We can't call useField conditionally so we call it for ourselves if there is no parent
+    if (parentName === '') {
+        parentName = name;
+    }
+    const parent = useField(parentName, {}, { absoluteName: true })[0];
+    const { model } = useForm();
+
+    if (parentName !== name) {
+        if (
+            parent.fieldType === Array &&
+            (parent as ListFieldProps).uniqueItems
+        ) {
+            const allValues: string[] = get(model, parentName, []);
+            const chosenValues = allValues.filter(
+                (_item, index) =>
+                    index.toString() !== nameArray[nameArray.length - 1],
+            );
+
+            allowedValues = allowedValues.filter(
+                (value) => !chosenValues.includes(value),
+            );
+        }
+    }
+
+    if (fieldType === Array) {
+        return (
+            <ListField name={name}>
+                <ListItemField name="$">
+                    <SelectField
+                        name=""
+                        transform={transform}
+                        allowedValues={allowedValues}
+                    />
+                </ListItemField>
+            </ListField>
+        );
+    } else {
+        return (
+            <SelectField
+                name=""
+                transform={transform}
+                allowedValues={allowedValues}
+            />
+        );
+    }
+}
+
+export const ListSelectField = connectField(ListSelect, { kind: 'leaf' });

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

@@ -0,0 +1,66 @@
+/*
+ * 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 { useTranslations } from 'next-intl';
+import { connectField, filterDOMProps } from 'uniforms';
+
+import { useAxiosApiClient } from '../useAxiosApiClient';
+import { SelectField, SelectFieldProps } from './SelectField';
+
+export type LocationCodeFieldProps = { locationCodes?: string[] } & Omit<
+    SelectFieldProps,
+    'placeholder' | 'allowedValues'
+>;
+
+declare module 'uniforms' {
+    interface FilterDOMProps {
+        locationCodes: never;
+    }
+}
+
+filterDOMProps.register('locationCodes');
+
+function LocationCode({ locationCodes, ...props }: LocationCodeFieldProps) {
+    const t = useTranslations('pydanticForms');
+    const [codes, setCodes] = useState<string[]>(locationCodes ?? []);
+    const axiosApiClient = useAxiosApiClient();
+
+    useEffect(() => {
+        axiosApiClient
+            .axiosFetch<string[]>('surf/crm/location_codes', {}, {}, false)
+            .then((result) => {
+                if (result) {
+                    setCodes(result);
+                }
+            })
+            .catch((error) => {
+                if (error) {
+                    console.error(error);
+                }
+                setCodes([]);
+            });
+    }, [axiosApiClient]);
+
+    return (
+        <SelectField
+            {...props}
+            allowedValues={codes}
+            placeholder={t('widgets.locationCode.placeholder')}
+        />
+    );
+}
+
+export const LocationCodeField = connectField(LocationCode, { kind: 'leaf' });

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

@@ -0,0 +1,68 @@
+/*
+ * 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 { EuiFormRow, EuiText, EuiTextArea } from '@elastic/eui';
+
+import { FieldProps } from '../../../types/forms';
+
+export type LongTextFieldProps = FieldProps<
+    string,
+    object,
+    HTMLTextAreaElement
+>;
+
+function LongText({
+    disabled,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    placeholder,
+    readOnly,
+    value,
+    error,
+    errorMessage,
+    ...props
+}: LongTextFieldProps) {
+    return (
+        <section {...filterDOMProps(props)}>
+            <EuiFormRow
+                label={label}
+                labelAppend={<EuiText size="m">{description}</EuiText>}
+                error={errorMessage}
+                isInvalid={error}
+                id={id}
+                fullWidth
+            >
+                <EuiTextArea
+                    disabled={disabled}
+                    name={name}
+                    isInvalid={error}
+                    onChange={(event) => onChange(event.target.value)}
+                    placeholder={placeholder}
+                    readOnly={readOnly}
+                    value={value ?? ''}
+                    fullWidth
+                />
+            </EuiFormRow>
+        </section>
+    );
+}
+
+export const LongTextField = connectField(LongText, { kind: 'leaf' });

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

@@ -0,0 +1,107 @@
+/*
+ * 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, joinName } from 'uniforms';
+import { AutoField } from 'uniforms-unstyled';
+
+import {
+    EuiDescribedFormGroup,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiText,
+} from '@elastic/eui';
+
+import { FieldProps } from './types';
+
+export type NestFieldProps = FieldProps<
+    null,
+    { fields?: unknown[]; itemProps?: object }
+>;
+
+declare module 'uniforms' {
+    interface FilterDOMProps {
+        properties: never;
+        wrap: never;
+        ref: never;
+    }
+}
+filterDOMProps.register('properties', 'wrap');
+
+function Nest({
+    children,
+    fields,
+    itemProps,
+    label,
+    description,
+    name,
+    className = '',
+    ...props
+}: NestFieldProps) {
+    const nameArray = joinName(null, name);
+    const lastNamePart = nameArray[nameArray.length - 1];
+    const isInList = !isNaN(parseInt(lastNamePart));
+    const itemIndex = isInList ? parseInt(lastNamePart) : 0;
+
+    if (isInList) {
+        return (
+            <EuiFlexGroup
+                {...filterDOMProps(props)}
+                className={`${className} nest-field`}
+            >
+                {label && (
+                    <>
+                        <label className="euiFormLabel euiFormRow__label">
+                            {label}
+                        </label>
+                        <EuiText size="m">{description}</EuiText>
+                    </>
+                )}
+
+                {children ||
+                    fields?.map((field) => (
+                        <EuiFlexItem key={field}>
+                            <AutoField
+                                name={field}
+                                {...itemProps}
+                                label={itemIndex === 0 ? undefined : false}
+                            />
+                        </EuiFlexItem>
+                    ))}
+            </EuiFlexGroup>
+        );
+    } else {
+        return (
+            <EuiDescribedFormGroup
+                {...filterDOMProps(props)}
+                title={<span>{label}</span>}
+                description={description}
+                className={`${className} nest-field`}
+            >
+                {children ||
+                    fields?.map((field) => (
+                        <AutoField
+                            key={field}
+                            name={field}
+                            {...itemProps}
+                            label={itemIndex === 0 ? undefined : false}
+                        />
+                    ))}
+            </EuiDescribedFormGroup>
+        );
+    }
+}
+
+export const NestField = connectField(Nest);