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

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

@@ -0,0 +1,75 @@
+/*
+ * 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 { EuiFieldNumber, EuiFormRow, EuiText } from '@elastic/eui';
+
+import { FieldProps } from '../../../types/forms';
+
+export type NumFieldProps = FieldProps<
+    number,
+    { max?: number; min?: number; precision?: number; step?: number }
+    // Todo: not sure what this did
+    // NumericInput
+>;
+
+function Num({
+    disabled,
+    id,
+    label,
+    description,
+    max,
+    min,
+    name,
+    onChange,
+    placeholder,
+    readOnly,
+    step,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    ...props
+}: NumFieldProps) {
+    return (
+        <div {...filterDOMProps(props)}>
+            <EuiFormRow
+                label={label}
+                labelAppend={<EuiText size="m">{description}</EuiText>}
+                error={showInlineError ? errorMessage : false}
+                isInvalid={error}
+                id={id}
+                fullWidth
+            >
+                <EuiFieldNumber
+                    name={name}
+                    isInvalid={error}
+                    placeholder={placeholder}
+                    readOnly={readOnly}
+                    onChange={(event) => onChange(parseInt(event.target.value))}
+                    min={min}
+                    max={max}
+                    step={step ?? 1}
+                    value={value ?? ''}
+                    disabled={disabled}
+                />
+            </EuiFormRow>
+        </div>
+    );
+}
+
+export const NumField = connectField(Num, { kind: 'leaf' });

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

@@ -0,0 +1,74 @@
+/*
+ * 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, useField } from 'uniforms';
+import { AutoField } from 'uniforms-unstyled';
+
+import { EuiDescribedFormGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+
+import { BoolField } from './BoolField';
+import { FieldProps } from './types';
+
+export type OptGroupFieldProps = FieldProps<
+    null,
+    { fields?: unknown[]; itemProps?: object }
+>;
+
+filterDOMProps.register('properties');
+
+function OptGroup({
+    fields,
+    itemProps,
+    name,
+    readOnly,
+    className = '',
+    ...props
+}: OptGroupFieldProps) {
+    const t = useTranslations('pydanticForms.fields');
+    const enabled = useField('enabled', {})[0].value;
+
+    return (
+        <EuiDescribedFormGroup
+            {...filterDOMProps(props)}
+            title={<span>{t(`${name}.title`)}</span>}
+            description={t(`${name}.description`)}
+            className={`${className} optgroup-field`}
+        >
+            <>
+                <EuiFlexItem>
+                    <EuiFormRow
+                        error={false}
+                        isInvalid={false}
+                        id={name} // Not sure if this is always unique...
+                    >
+                        <BoolField name="enabled" readOnly={readOnly} />
+                    </EuiFormRow>
+                </EuiFlexItem>
+                {enabled &&
+                    fields
+                        ?.filter((field) => field !== 'enabled')
+                        .map((field) => (
+                            <EuiFlexItem key={field}>
+                                <AutoField name={field} {...itemProps} />
+                            </EuiFlexItem>
+                        ))}
+            </>
+        </EuiDescribedFormGroup>
+    );
+}
+
+export const OptGroupField = connectField(OptGroup);

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

@@ -0,0 +1,57 @@
+/*
+ * 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 } from 'uniforms';
+
+import { GET_CUSTOMER_GRAPHQL_QUERY } from '../../../graphqlQueries';
+import { useQueryWithGraphql } from '../../../hooks';
+import { SelectField, SelectFieldProps } from './SelectField';
+
+export type OrganisationFieldProps = Omit<
+    SelectFieldProps,
+    'placeholder' | 'transform' | 'allowedValues'
+>;
+
+function Organisation({ ...props }: OrganisationFieldProps) {
+    const t = useTranslations('pydanticForms');
+
+    const { data, isFetched } = useQueryWithGraphql(
+        GET_CUSTOMER_GRAPHQL_QUERY,
+        {},
+        'customers',
+    );
+
+    const uuidCustomerNameMap = new Map<string, string>();
+
+    if (isFetched) {
+        const customers = data?.customers.page;
+        customers?.map((customer) => {
+            uuidCustomerNameMap.set(customer.identifier, customer.fullname);
+        });
+    }
+
+    return (
+        <SelectField
+            {...props}
+            allowedValues={Array.from(uuidCustomerNameMap.keys())}
+            transform={(uuid: string) => uuidCustomerNameMap.get(uuid) || uuid}
+            placeholder={t('widgets.organisation.placeholder')}
+        />
+    );
+}
+
+export const OrganisationField = connectField(Organisation, { kind: 'leaf' });

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

@@ -0,0 +1,78 @@
+/*
+ * 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 { useQuery } from 'react-query';
+
+import get from 'lodash/get';
+import { useTranslations } from 'next-intl';
+import { connectField, filterDOMProps } from 'uniforms';
+
+import { ProductDefinition } from '../../../types';
+import { useAxiosApiClient } from '../useAxiosApiClient';
+import { SelectField, SelectFieldProps } from './SelectField';
+
+export type ProductFieldProps = { productIds?: string[] } & Omit<
+    SelectFieldProps,
+    'placeholder' | 'transform' | 'allowedValues'
+>;
+declare module 'uniforms' {
+    interface FilterDOMProps {
+        productIds: never;
+    }
+}
+filterDOMProps.register('productIds');
+
+function Product({ name, productIds, ...props }: ProductFieldProps) {
+    const apiClient = useAxiosApiClient();
+    const t = useTranslations('pydanticForms');
+    const { isLoading, error, data } = useQuery(
+        ['products'],
+        apiClient.products,
+    );
+
+    const productById = (
+        id: string,
+        products: ProductDefinition[],
+    ): ProductDefinition => {
+        return products.find((prod) => prod.productId === id)!;
+    };
+
+    if (isLoading || error) return null;
+
+    const products = productIds
+        ? data?.map((id) => productById(id.productId, data))
+        : data;
+
+    const productLabelLookup =
+        products?.reduce<{ [index: string]: string }>(function (
+            mapping,
+            product,
+        ) {
+            mapping[product.productId] = product.name;
+            return mapping;
+        }, {}) ?? {};
+
+    return (
+        <SelectField
+            name={name}
+            {...props}
+            allowedValues={Object.keys(productLabelLookup)}
+            transform={(uuid: string) => get(productLabelLookup, uuid, uuid)}
+            placeholder={t('widgets.product.placeholder')}
+        />
+    );
+}
+
+export const ProductField = connectField(Product);

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

@@ -0,0 +1,87 @@
+/*
+ * 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 { omit } from 'lodash';
+import { connectField, filterDOMProps } from 'uniforms';
+
+import { EuiFormRow, EuiRadio, EuiText } from '@elastic/eui';
+
+import { FieldProps } from '../../../types/forms';
+
+const base64 =
+    typeof btoa !== 'undefined'
+        ? btoa
+        : (x: string) => Buffer.from(x).toString('base64');
+const escape = (x: string) => base64(encodeURIComponent(x)).replace(/=+$/, '');
+
+export type RadioFieldProps = FieldProps<
+    string,
+    {
+        allowedValues?: string[];
+        checkboxes?: boolean;
+        transform?(value: string): string;
+    }
+>;
+
+function Radio({
+    allowedValues,
+    disabled,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    readOnly,
+    transform,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    ...props
+}: RadioFieldProps) {
+    return (
+        <div {...omit(filterDOMProps(props), ['checkboxes'])}>
+            <EuiFormRow
+                label={label}
+                labelAppend={<EuiText size="m">{description}</EuiText>}
+                error={showInlineError ? errorMessage : false}
+                isInvalid={error}
+                id={id}
+                fullWidth
+            >
+                <>
+                    {allowedValues?.map((item) => (
+                        <EuiRadio
+                            key={item}
+                            id={`${id}-${escape(item)}`}
+                            label={transform ? transform(item) : item}
+                            disabled={disabled}
+                            name={name}
+                            checked={item === value}
+                            onChange={() => {
+                                if (!readOnly) {
+                                    onChange(item);
+                                }
+                            }}
+                        />
+                    ))}
+                </>
+            </EuiFormRow>
+        </div>
+    );
+}
+
+export const RadioField = connectField(Radio, { kind: 'leaf' });

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

@@ -0,0 +1,152 @@
+/*
+ * 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 ReactSelect from 'react-select';
+
+import { get } from 'lodash';
+import { useTranslations } from 'next-intl';
+import {
+    connectField,
+    filterDOMProps,
+    joinName,
+    useField,
+    useForm,
+} from 'uniforms';
+
+import { EuiFormRow, EuiText } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../../hooks';
+import { ListField, ListFieldProps } from './ListField';
+import { ListItemField } from './ListItemField';
+import { ListSelectField } from './ListSelectField';
+import { getReactSelectInnerComponentStyles } from './reactSelectStyles';
+import { FieldProps, Option } from './types';
+
+export type SelectFieldProps = FieldProps<
+    string | string[],
+    { allowedValues?: string[]; transform?(value: string): string }
+>;
+
+function Select({
+    allowedValues = [],
+    disabled,
+    fieldType,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    placeholder,
+    readOnly,
+    transform,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    ...props
+}: SelectFieldProps) {
+    const t = useTranslations('pydanticForms');
+    const { theme } = useOrchestratorTheme();
+
+    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 =
+        getReactSelectInnerComponentStyles(theme);
+
+    if (fieldType === Array) {
+        // Avoid circular import with our own ListSelectField (instead of recursively trying to use SelectField)
+        return (
+            <ListField name={name}>
+                <ListItemField name="$">
+                    <ListSelectField
+                        name=""
+                        transform={transform}
+                        allowedValues={allowedValues}
+                    />
+                </ListItemField>
+            </ListField>
+        );
+    } else {
+        return (
+            <section {...filterDOMProps(props)}>
+                <EuiFormRow
+                    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) {
+                                onChange(option?.value);
+                            }
+                        }}
+                        styles={reactSelectInnerComponentStyles}
+                        options={options}
+                        value={selectedValue}
+                        isSearchable={true}
+                        isClearable={true}
+                        placeholder={
+                            placeholder || t('widgets.select.placeholder')
+                        }
+                        isDisabled={disabled || readOnly}
+                    />
+                </EuiFormRow>
+            </section>
+        );
+    }
+}
+
+export const SelectField = connectField(Select);

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

@@ -0,0 +1,163 @@
+/*
+ * 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 ReactSelect, { SingleValue } from 'react-select';
+
+import { range } from 'lodash';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { ApiClientContext } from '../../../contexts';
+import { splitPrefixStyling } from './SplitPrefixStyling';
+import { Option } from './types';
+
+interface IProps {
+    id: string;
+    name: string;
+    subnet: string;
+    prefixlen: number;
+    prefixMin: number;
+    onChange: (value: string) => void;
+    selectedSubnet?: string;
+}
+
+interface IState {
+    subnets: [];
+    desiredPrefixlen: number;
+}
+
+export default class SplitPrefix extends React.PureComponent<IProps> {
+    static contextType = ApiClientContext;
+    context!: React.ContextType<typeof ApiClientContext>;
+    state: IState = {
+        subnets: [],
+        desiredPrefixlen: 0,
+    };
+
+    fetchFreePrefixes(
+        subnet: string,
+        prefixlen: number,
+        desiredPrefixlen: number,
+    ) {
+        this.context.apiClient
+            .free_subnets(subnet, prefixlen, desiredPrefixlen)
+            .then((result: string[]) => {
+                const subnets = result.filter(
+                    (x) => parseInt(x.split('/')[1], 10) === desiredPrefixlen,
+                );
+                this.setState({
+                    subnets: subnets,
+                    desiredPrefixlen: desiredPrefixlen,
+                    loading: false,
+                });
+            });
+    }
+
+    componentDidUpdate(prevProps: IProps) {
+        if (
+            this.props.subnet !== prevProps.subnet ||
+            this.props.prefixlen !== prevProps.prefixlen
+        ) {
+            this.fetchFreePrefixes(
+                this.props.subnet,
+                this.props.prefixlen,
+                this.props.prefixMin,
+            );
+        }
+    }
+
+    componentDidMount() {
+        const { subnet, prefixlen, prefixMin } = { ...this.props };
+
+        this.fetchFreePrefixes(subnet, prefixlen, prefixMin);
+    }
+
+    changePrefixLength = (e: SingleValue<Option<number>>) => {
+        const { subnet, prefixlen } = { ...this.props };
+
+        const desiredPrefixlen = e?.value;
+        if (desiredPrefixlen) {
+            this.fetchFreePrefixes(subnet, prefixlen, desiredPrefixlen);
+        }
+    };
+
+    selectSubnet = (e: SingleValue<Option>) => {
+        this.props.onChange(e?.value ?? '');
+    };
+
+    render() {
+        const { id, name, subnet, prefixlen, prefixMin, selectedSubnet } =
+            this.props;
+        const version = subnet.indexOf(':') === -1 ? 4 : 6;
+        const max_for_version = version === 4 ? 32 : 64;
+        const { desiredPrefixlen } = this.state;
+        const prefixlengths = range(max_for_version - prefixMin + 1).map(
+            (x) => prefixMin + x,
+        );
+        const length_options: Option<number>[] = prefixlengths.map((pl) => ({
+            value: pl,
+            label: pl.toString(),
+        }));
+        const length_value = length_options.find(
+            (option) => option.value === desiredPrefixlen,
+        );
+
+        const prefix_options = this.state.subnets.map((sn) => ({
+            label: sn,
+            value: sn,
+        }));
+        const prefix_value = prefix_options.find(
+            (option) => option.value === selectedSubnet,
+        );
+        // Todo 482: re-implement when this component is refactored to function based
+        // const customStyles = getReactSelectTheme(this.context.theme);
+
+        return (
+            <EuiFlexItem css={splitPrefixStyling}>
+                <section>
+                    <h3>
+                        Selected prefix: {subnet}/{prefixlen}
+                    </h3>
+                    <div>Desired netmask of the new subnet:</div>
+                    <ReactSelect
+                        id={`${id}.desired-netmask`}
+                        // Todo 482: re-implement when this component is refactored to function based
+                        // styles={customStyles}
+                        inputId={`${id}.desired-netmask.search`}
+                        name={`${name}.desired-netmask`}
+                        onChange={this.changePrefixLength}
+                        options={length_options}
+                        value={length_value}
+                    />
+                    {this.state.subnets && (
+                        <div>
+                            <div>Desired prefix:</div>
+                            <ReactSelect
+                                id={`${id}.desired-prefix`}
+                                // Todo 482: re-implement when this component is refactored to function based
+                                // styles={customStyles}
+                                inputId={`${id}.desired-prefix.search`}
+                                name={`${name}.desired-prefix`}
+                                options={prefix_options}
+                                onChange={this.selectSubnet}
+                                value={prefix_value}
+                            />
+                        </div>
+                    )}
+                </section>
+            </EuiFlexItem>
+        );
+    }
+}

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

@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+
+export const splitPrefixStyling = css`
+    section.split-prefix {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        width: 100%;
+        height: 80;
+    }
+`;