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

package/src/components/WfoForms/formFields/CustomerField.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 _ from 'lodash';
-import { useTranslations } from 'next-intl';
-import { connectField, useField } from 'uniforms';
-
-import { useGetCustomersQuery } from '@/rtk/endpoints';
-
-import {
-    SelectFieldProps,
-    UnconnectedSelectField,
-} from './SelectField/SelectField';
-
-export type CustomerFieldProps = Omit<
-    SelectFieldProps,
-    'placeholder' | 'transform' | 'allowedValues'
->;
-
-function Customer({ ...props }: CustomerFieldProps) {
-    const t = useTranslations('pydanticForms');
-    const [, context] = useField(props.name, {}, { absoluteName: true });
-
-    const { data: customers, isLoading } = useGetCustomersQuery();
-
-    const uuidCustomerNameMap = new Map<string, string>();
-
-    if (!isLoading && customers) {
-        customers?.map((customer) => {
-            uuidCustomerNameMap.set(
-                customer.customerId,
-                `${customer.shortcode} - ${customer.fullname}`,
-            );
-        });
-    }
-
-    const genericFieldName = props.name.split('.').shift();
-    const valueFromContext =
-        genericFieldName && context.model[genericFieldName];
-
-    // RVL:19-89-24 This is the only way I found to make sure the value is set to undefined when the value
-    // is removed from the form (i.e. when the user clicks the "-" button in the form) for the last list item.
-    const value =
-        Array.isArray(valueFromContext) && _.isEmpty(valueFromContext)
-            ? ''
-            : props.value;
-
-    return (
-        <UnconnectedSelectField
-            {...props}
-            allowedValues={Array.from(uuidCustomerNameMap.keys())}
-            transform={(uuid: string) => uuidCustomerNameMap.get(uuid) || uuid}
-            disabled={isLoading || props.disabled}
-            value={value}
-            placeholder={
-                !isLoading
-                    ? t('widgets.customer.placeholder')
-                    : t('widgets.customer.loading')
-            }
-        />
-    );
-}
-
-export const CustomerField = connectField(Customer, { kind: 'leaf' });

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

@@ -1,72 +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 { FieldProps } from './types';
-
-const DateConstructor = (typeof global === 'object' ? global : window).Date;
-const dateFormat = (value?: Date) => {
-    return value?.toISOString().slice(0, -8);
-};
-
-export type DateFieldProps = FieldProps<Date, { max?: Date; min?: Date }>;
-
-function Date({
-    disabled,
-    id,
-    inputRef,
-    label,
-    max,
-    min,
-    name,
-    onChange,
-    readOnly,
-    placeholder,
-    value,
-    ...props
-}: DateFieldProps) {
-    return (
-        <div {...filterDOMProps(props)}>
-            {label && <label htmlFor={id}>{label}</label>}
-
-            <input
-                disabled={disabled}
-                id={id}
-                max={dateFormat(max)}
-                min={dateFormat(min)}
-                name={name}
-                onChange={(event) => {
-                    const date = new DateConstructor(
-                        event.target.valueAsNumber,
-                    );
-                    if (date.getFullYear() < 10000) {
-                        onChange(date);
-                    } else if (isNaN(event.target.valueAsNumber)) {
-                        onChange(undefined);
-                    }
-                }}
-                placeholder={placeholder}
-                readOnly={readOnly}
-                ref={inputRef}
-                type="datetime-local"
-                value={dateFormat(value) ?? ''}
-            />
-        </div>
-    );
-}
-
-export const DateField = connectField(Date, { kind: 'leaf' });

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

@@ -1,29 +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 } from 'uniforms';
-
-import { EuiHorizontalRule } from '@elastic/eui';
-
-import { FieldProps } from '@/components';
-
-export type DividerFieldProps = FieldProps<null, object, null, HTMLDivElement>;
-
-function Divider({ id }: DividerFieldProps) {
-    return <EuiHorizontalRule style={{ marginTop: '-30px' }} id={id} />;
-}
-
-export const DividerField = connectField(Divider, { kind: 'leaf' });

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

@@ -1,40 +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 { FieldProps } from '@/components';
-
-export type ErrorFieldProps = FieldProps<null>;
-
-// onChange not used on purpose
-function Error({
-    children,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onChange,
-    error,
-    errorMessage,
-    ...props
-}: ErrorFieldProps) {
-    return !error ? null : (
-        <div {...filterDOMProps(props)}>{children || errorMessage}</div>
-    );
-}
-
-export const ErrorField = connectField(Error, {
-    initialValue: false,
-    kind: 'leaf',
-});

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

@@ -1,34 +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, { HTMLProps } from 'react';
-
-import { filterDOMProps, useForm } from 'uniforms';
-
-export type ErrorsFieldProps = HTMLProps<HTMLDivElement>;
-
-export const ErrorsField = (props: ErrorsFieldProps) => {
-    const { error, schema } = useForm();
-    return !error && !props.children ? null : (
-        <div {...filterDOMProps(props)}>
-            {props.children}
-
-            <ul>
-                {schema.getErrorMessages(error).map((message, index) => (
-                    <li key={index}>{message}</li>
-                ))}
-            </ul>
-        </div>
-    );
-};

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

@@ -1,43 +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 { FieldProps } from '@/components';
-import { useOrchestratorTheme } from '@/hooks';
-
-export type LabelFieldProps = FieldProps<null, object, null, HTMLDivElement>;
-
-// onChange not used on purpose
-function Label({ id, value, label, ...props }: LabelFieldProps) {
-    const { theme } = useOrchestratorTheme();
-
-    return (
-        <section {...filterDOMProps(props)}>
-            <label
-                css={{ color: theme.colors.text }}
-                id={id}
-                className={`euiFormLabel euiFormRow__label${
-                    value ? '__large' : ''
-                }`}
-            >
-                {value ? value : label}
-            </label>
-        </section>
-    );
-}
-
-export const LabelField = connectField(Label, { kind: 'leaf' });

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

@@ -1,95 +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 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.backendTranslations');
-
-    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 parentValueCount = parent.value?.length ?? 0;
-    const limitNotReached =
-        !disabled && (!parent.maxCount || parent.maxCount > parentValueCount);
-    const count = 1 + Math.max((initialCount ?? 0) - parentValueCount, 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

@@ -1,95 +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 { 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.backendTranslations');
-
-    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 parentValueCount = parent.value?.length ?? 0;
-
-    // Make a row deletable only if its:
-    const isDeletable: boolean =
-        !disabled &&
-        !readOnly &&
-        (!parent.minCount || parentValueCount > parent.minCount);
-
-    function onAction(event: React.KeyboardEvent | React.MouseEvent) {
-        if (isDeletable && (!('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={
-                    isDeletable ? theme.colors.danger : theme.colors.disabled
-                }
-            />
-            <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

@@ -1,117 +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, { 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 { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useWithOrchestratorTheme } from '@/hooks';
-
-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 { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
-
-    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
-                    css={formRowStyle}
-                    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

@@ -1,40 +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, { 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 });