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

package/src/components/WfoForms/formFields/deprecated/ContactPersonAutocomplete.tsx

@@ -1,99 +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, useRef } from 'react';
-
-import scrollIntoView from 'scroll-into-view';
-
-import { EuiFlexItem } from '@elastic/eui';
-
-import { useWithOrchestratorTheme } from '@/hooks';
-
-import { ContactPerson } from '../types';
-import { isEmpty } from '../utils';
-import { getContactPersonStyles } from './ContactPersonAutocompleteStyles';
-
-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(
-        getContactPersonStyles,
-    );
-
-    // 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/deprecated/ContactPersonAutocompleteStyles.ts

@@ -1,41 +0,0 @@
-import { css } from '@emotion/react';
-
-import { WfoTheme } from '@/hooks';
-
-export const getContactPersonStyles = ({ theme }: WfoTheme) => {
-    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,
-    };
-};

package/src/components/WfoForms/formFields/deprecated/ContactPersonNameField.tsx

@@ -1,263 +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, { Ref, useEffect, useState } from 'react';
-
-import { isFunction } from 'lodash';
-import get from 'lodash/get';
-import { useTranslations } from 'next-intl';
-import {
-    connectField,
-    filterDOMProps,
-    joinName,
-    useField,
-    useForm,
-} from 'uniforms';
-
-import { EuiFieldText, EuiFormRow, EuiText } from '@elastic/eui';
-
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useWithOrchestratorTheme } from '@/hooks';
-import { useContactPersonsQuery } from '@/rtk/endpoints/formFields';
-import { getFormFieldsBaseStyle } from '@/theme';
-
-import { ContactPerson, FieldProps } from '../types';
-import { ContactPersonAutocomplete } from './ContactPersonAutocomplete';
-
-export function stop(e: React.SyntheticEvent) {
-    if (e !== undefined && e !== null) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-}
-
-export type ContactPersonNameFieldProps = FieldProps<
-    string,
-    {
-        customerId?: string;
-        customerKey?: string;
-    }
->;
-
-declare module 'uniforms' {
-    interface FilterDOMProps {
-        customerId: never;
-        customerKey: never;
-        organisationKey: never;
-        organisationId: never;
-    }
-}
-filterDOMProps.register(
-    'customerId',
-    'customerKey',
-    'organisationKey',
-    'organisationId',
-);
-
-function ContactPersonName({
-    disabled,
-    id,
-    inputRef = React.createRef() as Ref<HTMLInputElement>,
-    label,
-    description,
-    name,
-    onChange,
-    placeholder,
-    readOnly,
-    value,
-    error,
-    showInlineError,
-    errorMessage,
-    customerId,
-    customerKey,
-    ...props
-}: ContactPersonNameFieldProps) {
-    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
-    const { formFieldBaseStyle } = useWithOrchestratorTheme(
-        getFormFieldsBaseStyle,
-    );
-
-    const t = useTranslations('pydanticForms');
-    const { model, onChange: formOnChange, schema } = useForm();
-
-    const contactsPersonFieldNameArray = joinName(null, name).slice(0, -1);
-    const emailFieldName = joinName(contactsPersonFieldNameArray, 'email');
-    const contactsFieldName = joinName(
-        contactsPersonFieldNameArray.slice(0, -1),
-    );
-
-    const chosenPersons: ContactPerson[] = get(model, contactsFieldName, []);
-    // We cant call useField conditionally so if we don't have a parent we call it for ourself
-    const useFieldName = contactsPersonFieldNameArray.length
-        ? contactsFieldName
-        : name;
-    const contactsField = useField(useFieldName, {}, { absoluteName: true })[0];
-
-    const customerIdFieldName =
-        customerKey || contactsField.field.customerKey || 'customer_id';
-
-    // Get initial value for org field if it exists (we cant really test)
-    let customerInitialValue;
-    try {
-        customerInitialValue = schema.getInitialValue(customerIdFieldName, {});
-    } catch {
-        customerInitialValue = '';
-    }
-
-    const customerIdValue =
-        customerId ||
-        contactsField.field.customerId ||
-        get(model, customerIdFieldName, customerInitialValue);
-
-    const [displayAutocomplete, setDisplayAutocomplete] = useState(false);
-    const [contactPersons, setContactPersons] = useState<ContactPerson[]>([]);
-    const [selectedIndex, setSelectedIndex] = useState(-1);
-
-    const { data, error: fetchError } = useContactPersonsQuery(
-        { customerIdValue },
-        { skip: !customerIdValue },
-    );
-
-    const suggestions = value
-        ? contactPersons
-              .filter(
-                  (item) =>
-                      item.name.toLowerCase().indexOf(value.toLowerCase()) > -1,
-              )
-              .filter(
-                  (item) =>
-                      !chosenPersons.some(
-                          (person) => person.email === item.email,
-                      ),
-              )
-        : [];
-
-    useEffect(() => {
-        if (customerIdValue) {
-            if (data) {
-                setContactPersons(data);
-            }
-            if (fetchError) {
-                setContactPersons([]);
-            }
-        }
-    }, [customerIdValue, data, fetchError]);
-
-    useEffect(() => {
-        // Set focus to the last name component to be created
-        if (!isFunction(inputRef)) {
-            inputRef!.current?.focus();
-        }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    function onChangeInternal(e: React.FormEvent<HTMLInputElement>) {
-        stop(e);
-        const target = e.target as HTMLInputElement;
-        const value = target.value;
-
-        onChange(value);
-        setDisplayAutocomplete(true);
-    }
-
-    function itemSelected(item: ContactPerson) {
-        onChange(item.name || '');
-        formOnChange(emailFieldName, item.email || '');
-        setDisplayAutocomplete(false);
-        setSelectedIndex(-1);
-    }
-
-    function onAutocompleteKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-        if (!suggestions) {
-            return;
-        }
-        if (e.keyCode === 40 && selectedIndex < suggestions.length - 1) {
-            //keyDown
-            stop(e);
-            setSelectedIndex(selectedIndex + 1);
-        }
-        if (e.keyCode === 38 && selectedIndex >= 0) {
-            //keyUp
-            stop(e);
-            setSelectedIndex(selectedIndex - 1);
-        }
-        if (e.keyCode === 13) {
-            //enter
-            if (selectedIndex >= 0) {
-                stop(e);
-                itemSelected(suggestions[selectedIndex]);
-            }
-        }
-        if (e.keyCode === 27) {
-            //escape
-            stop(e);
-            setDisplayAutocomplete(false);
-            setSelectedIndex(-1);
-        }
-    }
-
-    function onBlurAutoComplete(e: React.FocusEvent<HTMLElement>) {
-        stop(e);
-        setTimeout(() => setDisplayAutocomplete(false), 350);
-    }
-
-    return (
-        <section {...filterDOMProps(props)}>
-            <EuiFormRow
-                label={label}
-                labelAppend={<EuiText size="m">{description}</EuiText>}
-                error={showInlineError ? errorMessage : false}
-                isInvalid={error}
-                id={id}
-                fullWidth
-                css={formRowStyle}
-            >
-                <>
-                    <EuiFieldText
-                        css={formFieldBaseStyle}
-                        disabled={disabled}
-                        fullWidth
-                        name={name}
-                        isInvalid={error}
-                        onChange={onChangeInternal}
-                        placeholder={
-                            placeholder ||
-                            t('widgets.contactPersonName.placeholder')
-                        }
-                        readOnly={readOnly}
-                        type="text"
-                        value={value ?? ''}
-                        onKeyDown={onAutocompleteKeyDown}
-                        onBlur={onBlurAutoComplete}
-                        autoComplete="off"
-                    />{' '}
-                    <div className="autocomplete-container">
-                        {!!(displayAutocomplete && suggestions.length) && (
-                            <ContactPersonAutocomplete
-                                query={value ?? ''}
-                                itemSelected={itemSelected}
-                                selectedItem={selectedIndex}
-                                suggestions={suggestions}
-                                personIndex={0}
-                            />
-                        )}
-                    </div>
-                </>
-            </EuiFormRow>
-        </section>
-    );
-}
-
-export const ContactPersonNameField = connectField(ContactPersonName, {
-    kind: 'leaf',
-});

package/src/components/WfoForms/formFields/deprecated/FileUploadField.tsx

@@ -1,151 +0,0 @@
-/*
- * Copyright 2024 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, { useState } from 'react';
-
-import { useTranslations } from 'next-intl';
-import { connectField, filterDOMProps } from 'uniforms';
-
-import { EuiFilePicker, EuiFormRow, EuiText } from '@elastic/eui';
-
-import { FieldProps } from '@/components';
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
-import { useUploadFileMutation } from '@/rtk/endpoints/fileUpload';
-
-export type FileUploadProps = FieldProps<string>;
-
-function FileUpload({
-    id,
-    label,
-    description,
-    onChange,
-    error,
-    showInlineError,
-    errorMessage,
-    ...props
-}: FileUploadProps) {
-    const t = useTranslations('pydanticForms.widgets.fileUpload');
-    const { theme } = useOrchestratorTheme();
-    const [uploadFile, { isLoading, reset }] = useUploadFileMutation();
-    const [hasInValidFiletypes, setHasInValidFiletypes] = useState(false);
-    const [hasError, setHasError] = useState(false);
-    const [hasFileToBig, setHasFileToBig] = useState(false);
-
-    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
-
-    const {
-        allowed_file_types: allowedMimeTypes,
-        url,
-        filesize_limit: fileSizeLimit,
-    } = props.field;
-
-    const cimUrl = url.replace('/cim', '');
-
-    const resetErrors = () => {
-        setHasInValidFiletypes(false);
-        setHasError(false);
-        setHasFileToBig(false);
-    };
-
-    const getErrorText = (): string => {
-        if (hasInValidFiletypes) {
-            return t('invalidFiletype');
-        }
-        if (hasError) {
-            return t('errorUploading');
-        }
-        if (hasFileToBig) {
-            return t('fileToBig', { fileSizeLimit });
-        }
-        return '';
-    };
-
-    const handleUploadedFiles = (files: FileList | null) => {
-        const file = files?.item(0) || null;
-
-        if (!file) return;
-
-        const { type, size } = file;
-
-        if (allowedMimeTypes && !allowedMimeTypes.includes(type)) {
-            resetErrors();
-            setHasInValidFiletypes(true);
-            return;
-        } else if (size > fileSizeLimit) {
-            resetErrors();
-            setHasFileToBig(true);
-            return;
-        } else {
-            uploadFile({ url: cimUrl, file })
-                .then((response) => {
-                    if (response.error) {
-                        resetErrors();
-                        setHasError(true);
-                        return;
-                    } else {
-                        onChange(response.data.file_id);
-                        resetErrors();
-                    }
-                })
-                .catch((error) => {
-                    resetErrors();
-                    setHasError(true);
-                    console.error(error);
-                    return;
-                });
-            reset();
-        }
-    };
-
-    return (
-        <section {...filterDOMProps(props)}>
-            <EuiFormRow
-                css={formRowStyle}
-                label={label}
-                labelAppend={<EuiText size="m">{description}</EuiText>}
-                error={showInlineError ? errorMessage : false}
-                isInvalid={error}
-                id={id}
-                fullWidth
-            >
-                <>
-                    <EuiFilePicker
-                        onChange={handleUploadedFiles}
-                        isInvalid={
-                            hasError || hasInValidFiletypes || hasFileToBig
-                        }
-                        display="large"
-                        isLoading={isLoading}
-                        initialPromptText={t('initialPromptText')}
-                        multiple={false}
-                        accept={allowedMimeTypes}
-                    />
-                    <div
-                        css={{
-                            color: theme.colors.danger,
-                            marginTop: theme.size.base,
-                            marginLeft: theme.size.xs,
-                            fontWeight: theme.font.weight.semiBold,
-                        }}
-                    >
-                        {getErrorText()}
-                    </div>
-                </>
-            </EuiFormRow>
-        </section>
-    );
-}
-
-export const FileUploadField = connectField(FileUpload, { kind: 'leaf' });

package/src/components/WfoForms/formFields/deprecated/ImsNodeIdField.tsx

@@ -1,109 +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 { get } from 'lodash';
-import { useTranslations } from 'next-intl';
-import { connectField, filterDOMProps } from 'uniforms';
-
-import { useImsNodesQuery } from '@/rtk/endpoints/formFields';
-
-import { SelectFieldProps, UnconnectedSelectField } from '../SelectField';
-import { ImsNode } from './types';
-
-export type ImsNodeIdFieldProps = {
-    onChange: (value?: number | undefined) => void;
-    value?: number;
-    locationCode: string;
-    status?: string;
-    unsubscribedOnly?: boolean;
-} & Omit<
-    SelectFieldProps,
-    | 'placeholder'
-    | 'transform'
-    | 'allowedValues'
-    | 'onChange'
-    | 'value'
-    | 'name'
->;
-
-declare module 'uniforms' {
-    interface FilterDOMProps {
-        locationCode: never;
-        status: never;
-        unsubscribedOnly: never;
-    }
-}
-filterDOMProps.register('locationCode', 'status', 'unsubscribedOnly');
-
-function ImsNodeId({
-    value,
-    onChange,
-    locationCode,
-    status = 'PL',
-    unsubscribedOnly = true,
-    ...props
-}: ImsNodeIdFieldProps) {
-    const t = useTranslations('pydanticForms');
-    const [nodes, setNodes] = useState<ImsNode[]>([]);
-    const { data, isLoading, error } = useImsNodesQuery(
-        {
-            locationCode,
-            status,
-            unsubscribedOnly,
-        },
-        { skip: !(locationCode && status) },
-    );
-
-    useEffect(() => {
-        if (data) {
-            setNodes(data);
-        }
-        if (error) {
-            console.error(error);
-        }
-    }, [locationCode, status, unsubscribedOnly, data, error]);
-
-    const placeholder =
-        isLoading && locationCode
-            ? t('widgets.node_select.nodes_loading')
-            : nodes.length
-            ? t('widgets.node_select.select_node')
-            : t('forms.widgets.node_select.no_nodes_placeholder');
-
-    const imsNodeIdLabelLookup =
-        nodes?.reduce<{ [index: string]: string }>(function (mapping, node) {
-            mapping[node.id.toString()] = node.name;
-            return mapping;
-        }, {}) ?? {};
-
-    return (
-        <UnconnectedSelectField
-            name=""
-            {...props}
-            allowedValues={Object.keys(imsNodeIdLabelLookup)}
-            value={value?.toString()}
-            transform={(id: string) => get(imsNodeIdLabelLookup, id, id)}
-            onChange={
-                ((str: string) => onChange(parseInt(str, 10))) as unknown as (
-                    v: string | string[] | undefined,
-                ) => void
-            }
-            placeholder={placeholder}
-        />
-    );
-}
-
-export const ImsNodeIdField = connectField(ImsNodeId, { kind: 'leaf' });