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

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

@@ -0,0 +1,253 @@
+/*
+ * 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 { useAxiosApiClient } from '../useAxiosApiClient';
+import { ContactPersonAutocomplete } from './ContactPersonAutocomplete';
+import { ContactPerson, FieldProps } from './types';
+
+export function stop(e: React.SyntheticEvent) {
+    if (e !== undefined && e !== null) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}
+
+export type ContactPersonNameFieldProps = FieldProps<
+    string,
+    { organisationId?: string; organisationKey?: string }
+>;
+
+declare module 'uniforms' {
+    interface FilterDOMProps {
+        organisationId: never;
+        organisationKey: never;
+    }
+}
+filterDOMProps.register('organisationId', 'organisationKey');
+
+function ContactPersonName({
+    disabled,
+    id,
+    inputRef = React.createRef() as Ref<HTMLInputElement>,
+    label,
+    description,
+    name,
+    onChange,
+    placeholder,
+    readOnly,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    organisationId,
+    organisationKey,
+    ...props
+}: ContactPersonNameFieldProps) {
+    const axiosApiClient = useAxiosApiClient();
+    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 organisationFieldName =
+        organisationKey ||
+        contactsField.field.organisationKey ||
+        'organisation';
+
+    // Get initial value for org field if it exists (we cant really test)
+    let organisationInitialValue;
+    try {
+        organisationInitialValue = schema.getInitialValue(
+            organisationFieldName,
+            {},
+        );
+    } catch {
+        organisationInitialValue = '';
+    }
+
+    const organisationIdValue =
+        organisationId ||
+        contactsField.field.organisationId ||
+        get(model, organisationFieldName, organisationInitialValue);
+
+    const [displayAutocomplete, setDisplayAutocomplete] = useState(false);
+    const [contactPersons, setContactPersons] = useState<ContactPerson[]>([]);
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+
+    const suggestions = value
+        ? contactPersons
+              .filter(
+                  (item) =>
+                      item.name.toLowerCase().indexOf(value.toLowerCase()) > -1,
+              )
+              .filter(
+                  (item) =>
+                      !chosenPersons.some(
+                          (person) => person.email === item.email,
+                      ),
+              )
+        : [];
+
+    useEffect(() => {
+        if (organisationIdValue) {
+            axiosApiClient
+                .axiosFetch<ContactPerson[]>(
+                    `/surf/crm/contacts/${organisationIdValue}`,
+                    {},
+                    {},
+                    false,
+                )
+                .then((result) => {
+                    if (result) {
+                        setContactPersons(result);
+                    }
+                })
+                .catch(() => {
+                    setContactPersons([]);
+                });
+        }
+    }, [organisationIdValue, axiosApiClient]);
+
+    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={{ marginBottom: 0 }}
+            >
+                <>
+                    <EuiFieldText
+                        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/DateField.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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

@@ -0,0 +1,29 @@
+/*
+ * 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 '../../../types/forms';
+
+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

@@ -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 from 'react';
+
+import { connectField, filterDOMProps } from 'uniforms';
+
+import { FieldProps } from '../../../types/forms';
+
+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

@@ -0,0 +1,34 @@
+/*
+ * 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/ImsNodeIdField.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 { useAxiosApiClient } from '../useAxiosApiClient';
+import { SelectField, SelectFieldProps } from './SelectField';
+import { ImsNode } from './surf/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 axiosApiClient = useAxiosApiClient();
+    const t = useTranslations('pydanticForms');
+    const [loading, setIsLoading] = useState(true);
+    const [nodes, setNodes] = useState<ImsNode[]>([]);
+
+    useEffect(() => {
+        if (locationCode && status) {
+            const imsNodeEndPoint = `/surf/ims/nodes/${locationCode}/${status}?unsubscribed_only=${unsubscribedOnly}`;
+            axiosApiClient
+                .axiosFetch<ImsNode[]>(imsNodeEndPoint)
+                .then((result) => {
+                    if (result) {
+                        setNodes(result);
+                    }
+                })
+                .catch((error) => {
+                    console.error(error);
+                })
+                .finally(() => setIsLoading(false));
+        }
+    }, [locationCode, status, axiosApiClient, unsubscribedOnly]);
+
+    const placeholder =
+        loading && 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 (
+        <SelectField
+            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' });

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

@@ -0,0 +1,128 @@
+/*
+ * 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, { useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+import { connectField, filterDOMProps } from 'uniforms';
+
+import { EuiCallOut, EuiFormRow, EuiText } from '@elastic/eui';
+
+import IpPrefixTableField from './IpPrefixTableField';
+import SplitPrefix from './SplitPrefix';
+import { IpBlock } from './surf/types';
+import { FieldProps } from './types';
+
+export type IPvAnyNetworkFieldProps = FieldProps<
+    string,
+    { prefixMin?: number }
+>;
+
+function IpNetwork({
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    readOnly,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    prefixMin,
+    ...props
+}: IPvAnyNetworkFieldProps) {
+    const t = useTranslations('pydanticForms');
+    const [selectedPrefix, setSelectedPrefix] = useState<IpBlock | undefined>(
+        undefined,
+    );
+    const [manualOverride, setManualOverride] = useState(false);
+
+    const usePrefix = selectedPrefix?.prefix ?? value;
+    const [subnet, netmask] = usePrefix?.split('/') ?? ['', ''];
+    const usedPrefixMin =
+        prefixMin ??
+        parseInt(netmask, 10) + (selectedPrefix?.state === 0 ? 0 : 1);
+
+    return (
+        <section {...filterDOMProps(props)}>
+            <EuiFormRow
+                label={label}
+                labelAppend={<EuiText size="m">{description}</EuiText>}
+                error={showInlineError ? errorMessage : false}
+                isInvalid={error}
+                id={id}
+                fullWidth
+            >
+                <section className="ipblock-selector">
+                    <div id={id}>
+                        {!prefixMin && (
+                            <IpPrefixTableField
+                                id={id}
+                                name={name}
+                                onChange={(prefix: IpBlock) => {
+                                    if (!readOnly) {
+                                        if (
+                                            prefix.state === 0 ||
+                                            prefix.state === 1
+                                        ) {
+                                            setSelectedPrefix(prefix);
+                                        }
+                                        setManualOverride(false);
+                                        onChange(prefix.prefix);
+                                    }
+                                }}
+                                onManualOverride={(prefixString: string) => {
+                                    if (!readOnly) {
+                                        setManualOverride(true);
+                                        onChange(prefixString);
+                                    }
+                                }}
+                                selected_prefix_id={selectedPrefix?.id}
+                            />
+                        )}
+                        {usePrefix && !manualOverride && (
+                            <SplitPrefix
+                                id={id}
+                                name={name}
+                                subnet={subnet}
+                                prefixlen={parseInt(netmask, 10)}
+                                prefixMin={usedPrefixMin}
+                                onChange={(prefix: string) => {
+                                    if (!readOnly) {
+                                        onChange(prefix);
+                                    }
+                                }}
+                                selectedSubnet={usePrefix}
+                            />
+                        )}
+                        {usePrefix && manualOverride && (
+                            <EuiCallOut
+                                title={t(
+                                    'widgets.ipvAnyNetworkField.manuallySelectedPrefix',
+                                )}
+                                color="primary"
+                                iconType="check"
+                            >
+                                <p>{value}</p>
+                            </EuiCallOut>
+                        )}
+                    </div>
+                </section>
+            </EuiFormRow>
+        </section>
+    );
+}
+
+export const IpNetworkField = connectField(IpNetwork, { kind: 'leaf' });