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

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

@@ -1,177 +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 } from 'react';
-import ReactSelect from 'react-select';
-
-import { get } from 'lodash';
-import { useTranslations } from 'next-intl';
-import { joinName, useField, useForm } from 'uniforms';
-
-import { EuiFormRow, EuiText } from '@elastic/eui';
-
-import { useWithOrchestratorTheme } from '@/hooks';
-import type { Option } from '@/types';
-
-import { ListField, ListFieldProps } from '../ListField';
-import { ListItemField } from '../ListItemField';
-import { ListSelectField } from '../ListSelectField';
-import { FieldProps } from '../types';
-import { getSelectFieldStyles } from './styles';
-
-export type SelectFieldProps = FieldProps<
-    string | string[],
-    { allowedValues?: string[]; transform?(value: string): string }
->;
-
-/*
-
-*/
-export function UnconnectedSelectField({
-    allowedValues = [],
-    disabled,
-    fieldType,
-    id,
-    label,
-    description,
-    name,
-    onChange,
-    placeholder,
-    readOnly,
-    transform,
-    value,
-    error,
-    showInlineError,
-    errorMessage,
-    ...props
-}: SelectFieldProps) {
-    const t = useTranslations('pydanticForms');
-
-    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),
-            );
-        }
-    }
-    const options = allowedValues.map((value: string) => ({
-        label: transform ? transform(value) : value,
-        text: transform ? transform(value) : value,
-        value: value,
-    }));
-
-    const selectedValue = options.find(
-        (option: Option) => option.value === value,
-    );
-
-    // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
-    const { reactSelectInnerComponentStyles, formRowStyle } =
-        useWithOrchestratorTheme(getSelectFieldStyles);
-
-    useEffect(() => {
-        if (selectedValue && selectedValue.value !== 'undefined') {
-            onChange(selectedValue.value);
-        }
-        // Adding the missing dependencies to the dependency array leads to an infinite loop
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    if (fieldType === Array) {
-        // Avoid circular import with our own ListSelectField (instead of recursively trying to use SelectField)
-        return (
-            <ListField name={name}>
-                <ListItemField name="$">
-                    <ListSelectField
-                        {...{
-                            allowedValues,
-                            disabled,
-                            fieldType,
-                            id,
-                            label,
-                            description,
-                            name,
-                            onChange,
-                            placeholder,
-                            readOnly,
-                            transform,
-                            value,
-                            error,
-                            showInlineError,
-                            errorMessage,
-                        }}
-                        fieldType={fieldType}
-                        name=""
-                        transform={transform}
-                        allowedValues={allowedValues}
-                        {...props}
-                    />
-                </ListItemField>
-            </ListField>
-        );
-    } else {
-        return (
-            <section>
-                <EuiFormRow
-                    css={formRowStyle}
-                    label={label}
-                    labelAppend={<EuiText size="m">{description}</EuiText>}
-                    error={showInlineError ? errorMessage : false}
-                    isInvalid={error}
-                    id={id}
-                    fullWidth
-                >
-                    <ReactSelect<Option, false>
-                        id={id}
-                        inputId={`${id}.search`}
-                        name={name}
-                        onChange={(option) => {
-                            if (!readOnly) {
-                                // @ts-expect-error - null needs to be passed in some cases to remove something (eg. a fw endpoint in an l2vpn)
-                                onChange(option?.value ?? null);
-                            }
-                        }}
-                        styles={reactSelectInnerComponentStyles}
-                        options={options}
-                        value={selectedValue}
-                        isSearchable={true}
-                        isClearable={true}
-                        placeholder={
-                            placeholder || t('widgets.select.placeholder')
-                        }
-                        isDisabled={disabled || readOnly}
-                    />
-                </EuiFormRow>
-            </section>
-        );
-    }
-}

package/src/components/WfoForms/formFields/SelectField/index.ts

@@ -1 +0,0 @@
-export * from './SelectField';

package/src/components/WfoForms/formFields/SelectField/styles.ts

@@ -1,52 +0,0 @@
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { WfoTheme } from '@/hooks';
-
-export const getSelectFieldStyles = (wfoTheme: WfoTheme) => {
-    const { theme } = wfoTheme;
-    const { formRowStyle } = getCommonFormFieldStyles(wfoTheme);
-
-    const reactSelectInnerComponentStyles = {
-        option: (
-            baseStyles: object,
-            state: { isSelected: boolean; isDisabled: boolean },
-        ) => ({
-            ...baseStyles,
-            borderBottom: theme.border.thin,
-            borderColor: theme.colors.lightShade,
-            backgroundColor: theme.colors.lightestShade,
-            color: state.isSelected
-                ? theme.colors.primaryText
-                : theme.colors.text,
-        }),
-        control: (baseStyles: object, state: { isFocused: boolean }) => {
-            return {
-                ...baseStyles,
-                backgroundColor: state.isFocused
-                    ? theme.colors.emptyShade
-                    : theme.colors.lightestShade,
-                color: theme.colors.text,
-                border: `1px solid ${theme.colors.lightShade}`,
-            };
-        },
-        input: (baseStyles: object) => ({
-            ...baseStyles,
-            color: theme.colors.text,
-        }),
-        singleValue: (baseStyles: object, state: { isDisabled: boolean }) => {
-            const opacity = state.isDisabled ? 0.3 : 1;
-            const transition = 'opacity 300ms';
-            return {
-                ...baseStyles,
-                opacity,
-                transition,
-                color: theme.colors.text,
-            };
-        },
-        menu: (baseStyles: object) => ({
-            ...baseStyles,
-            backgroundColor: theme.colors.lightestShade,
-        }),
-    };
-
-    return { reactSelectInnerComponentStyles, formRowStyle };
-};

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

@@ -1,50 +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 { filterDOMProps, useForm } from 'uniforms';
-
-import { FieldProps } from '@/components';
-
-export type SubmitFieldProps = FieldProps<
-    null,
-    object,
-    HTMLInputElement,
-    HTMLInputElement
->;
-
-// onChange not used on purpose
-export const SubmitField = ({
-    disabled,
-    inputRef,
-    readOnly,
-    value,
-    ...props
-}: SubmitFieldProps) => {
-    const { error, state } = useForm();
-
-    return (
-        <input
-            disabled={
-                disabled === undefined ? !!(error || state.disabled) : disabled
-            }
-            readOnly={readOnly}
-            ref={inputRef}
-            type="submit"
-            {...(value ? { value } : {})}
-            {...filterDOMProps(props)}
-        />
-    );
-};

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

@@ -1,74 +0,0 @@
-/*
- * Copyright 2019-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 from 'react';
-
-import { connectField, filterDOMProps } from 'uniforms';
-
-import { EuiFormRow, EuiText } from '@elastic/eui';
-
-import { WfoLoading, WfoSubscriptionDetailSection } from '@/components';
-import { useGetSubscriptionDetailQuery } from '@/rtk';
-
-import { FieldProps } from './types';
-
-export type SubscriptionSummaryFieldProps = FieldProps<string>;
-
-interface SubscriptionSummaryDisplayProps {
-    subscriptionId: string;
-}
-
-export const SubscriptionSummaryDisplay = ({
-    subscriptionId,
-}: SubscriptionSummaryDisplayProps) => {
-    const { data } = useGetSubscriptionDetailQuery({
-        subscriptionId,
-    });
-    const subscriptionDetail = data?.subscription;
-
-    if (!subscriptionDetail) {
-        return <WfoLoading />;
-    }
-
-    return (
-        <WfoSubscriptionDetailSection subscriptionDetail={subscriptionDetail} />
-    );
-};
-
-const SubscriptionSummary = ({
-    id,
-    value,
-    description,
-    ...props
-}: SubscriptionSummaryFieldProps) => {
-    if (!value) {
-        return null;
-    }
-
-    return (
-        <section {...filterDOMProps(props)}>
-            <EuiFormRow
-                id={id}
-                labelAppend={<EuiText size="m">{description}</EuiText>}
-                fullWidth
-            >
-                <SubscriptionSummaryDisplay subscriptionId={value} />
-            </EuiFormRow>
-        </section>
-    );
-};
-
-export const SubscriptionSummaryField = connectField(SubscriptionSummary, {
-    kind: 'leaf',
-});

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

@@ -1,104 +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 { FieldProps, connectField, filterDOMProps } from 'uniforms';
-
-import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
-
-import { summaryFieldStyles } from '@/components/WfoForms/formFields/SummaryFieldStyling';
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useWithOrchestratorTheme } from '@/hooks';
-
-export type SummaryFieldProps = FieldProps<
-    null,
-    {
-        description?: string;
-        data?: { headers: string[]; labels: string[]; columns: string[][] };
-    }
->;
-
-// onChange not used on purpose
-function Summary({
-    id,
-    label,
-    description,
-    data,
-    ...props
-}: SummaryFieldProps) {
-    const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
-    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
-
-    if (!data) {
-        return null;
-    }
-
-    const { headers, labels, columns } = data;
-
-    const extraColumnsData = columns.filter((_, index) => index !== 0);
-    const rows = columns[0].map((row, index) => (
-        <tr key={index}>
-            {labels && <td className={`label`}>{labels[index]}</td>}
-            <td className={`value`}>
-                {typeof row === 'string' && row.includes('<!doctype html>') ? (
-                    <div
-                        className="emailMessage"
-                        dangerouslySetInnerHTML={{ __html: row }}
-                    ></div>
-                ) : (
-                    row
-                )}
-            </td>
-            {extraColumnsData &&
-                extraColumnsData.map((_, idx) => (
-                    <td className={`value`} key={idx}>
-                        {extraColumnsData[idx][index]}
-                    </td>
-                ))}
-        </tr>
-    ));
-
-    const tableHeader =
-        !headers || headers.length === 0 ? null : (
-            <tr>
-                {labels && <th />}
-                {headers.map((header, idx) => (
-                    <th key={idx}>{header}</th>
-                ))}
-            </tr>
-        );
-
-    return (
-        <EuiFlexItem css={[summaryFieldStyle, formRowStyle]}>
-            <section {...filterDOMProps(props)}>
-                <EuiFormRow
-                    label={label}
-                    labelAppend={<EuiText size="m">{description}</EuiText>}
-                    id={id}
-                    fullWidth
-                >
-                    <section className="table-summary">
-                        <table id={`${id}-table`}>
-                            <thead>{tableHeader}</thead>
-                            <tbody>{rows}</tbody>
-                        </table>
-                    </section>
-                </EuiFormRow>
-            </section>
-        </EuiFlexItem>
-    );
-}
-
-export const SummaryField = connectField(Summary, { kind: 'leaf' });

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

@@ -1,44 +0,0 @@
-import { css } from '@emotion/react';
-
-import { WfoTheme } from '@/hooks';
-
-export const summaryFieldStyles = ({ theme }: WfoTheme) => {
-    const summaryFieldStyle = css({
-        'div.emailMessage': {
-            td: {
-                color: theme.colors.textParagraph,
-            },
-            p: {
-                color: theme.colors.textParagraph,
-            },
-            html: {
-                marginLeft: '-10px',
-            },
-        },
-        'section.table-summary': {
-            marginTop: '20px',
-            width: '100%',
-            td: {
-                padding: '10px',
-                verticalAlign: 'top',
-            },
-            'td:not(:first-child):not(:last-child)': {
-                borderRight: `1px solid ${theme.colors.borderBasePlain}`,
-            },
-            '.label': {
-                fontWeight: 'bold',
-                color: theme.colors.backgroundBaseSubdued,
-                backgroundColor: theme.colors.primary,
-                borderRight: `2px solid ${theme.colors.borderBasePlain}`,
-                borderBottom: `1px solid ${theme.colors.borderBasePlain}`,
-            },
-            '.value': {
-                backgroundColor: theme.colors.backgroundBasePrimary,
-                borderBottom: `1px solid ${theme.colors.borderBasePlain}`,
-            },
-        },
-    });
-    return {
-        summaryFieldStyle: summaryFieldStyle,
-    };
-};

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

@@ -1,81 +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 { EuiFieldText, EuiFormRow, EuiText } from '@elastic/eui';
-
-import { FieldProps } from '@/components';
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useWithOrchestratorTheme } from '@/hooks';
-import { getFormFieldsBaseStyle } from '@/theme';
-
-export type TextFieldProps = FieldProps<string>;
-
-function Text({
-    autoComplete,
-    disabled,
-    id,
-    label,
-    description,
-    name,
-    onChange,
-    placeholder,
-    readOnly,
-    type,
-    value,
-    error,
-    showInlineError,
-    errorMessage,
-    ...props
-}: TextFieldProps) {
-    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
-    const { formFieldBaseStyle } = useWithOrchestratorTheme(
-        getFormFieldsBaseStyle,
-    );
-
-    return (
-        <section {...filterDOMProps(props)}>
-            <EuiFormRow
-                css={formRowStyle}
-                label={label}
-                labelAppend={<EuiText size="m">{description}</EuiText>}
-                error={showInlineError ? errorMessage : false}
-                isInvalid={error}
-                id={id}
-                fullWidth
-            >
-                <EuiFieldText
-                    css={formFieldBaseStyle}
-                    autoComplete={autoComplete}
-                    disabled={disabled}
-                    name={name}
-                    isInvalid={error}
-                    onChange={(event) => onChange(event.target.value)}
-                    placeholder={placeholder}
-                    readOnly={readOnly}
-                    type={type}
-                    value={value ?? ''}
-                    fullWidth
-                />
-            </EuiFormRow>
-        </section>
-    );
-}
-
-Text.defaultProps = { type: 'text' };
-
-export const TextField = connectField(Text, { kind: 'leaf' });

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

@@ -1,32 +0,0 @@
-import { css } from '@emotion/react';
-
-import { WfoTheme } from '@/hooks';
-
-export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
-    const formRowStyle = css({
-        marginBottom: theme.base * 2,
-
-        '.euiText': {
-            color: theme.colors.text,
-        },
-        '.euiFormLabel': {
-            color: theme.colors.text,
-            cursor: 'text',
-            '&.euiFormLabel-isFocused': {
-                color: theme.colors.primaryText,
-            },
-        },
-        '.euiFormRow__labelWrapper': {
-            display: 'flex',
-            flexDirection: 'column',
-        },
-    });
-
-    const errorStyle = css({
-        color: theme.colors.dangerText,
-    });
-    return {
-        errorStyle,
-        formRowStyle,
-    };
-};