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

package/src/components/WfoForms/formFields/deprecated/SubscriptionField.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 from 'react';
-import ReactSelect from 'react-select';
-
-import get from 'lodash/get';
-import { useTranslations } from 'next-intl';
-import {
-    connectField,
-    filterDOMProps,
-    joinName,
-    useField,
-    useForm,
-} from 'uniforms';
-
-import {
-    EuiButtonIcon,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiFormRow,
-    EuiText,
-} from '@elastic/eui';
-
-import { useWithOrchestratorTheme } from '@/hooks';
-import { useGetSurfSubscriptionDropdownOptions } from '@/hooks/deprecated/useGetSurfSubcriptionDropdownOptions';
-import type { Option } from '@/types';
-
-import { getSelectFieldStyles } from '../SelectField/styles';
-import { FieldProps } from '../types';
-import { subscriptionFieldStyling } from './SubscriptionFieldStyling';
-
-declare module 'uniforms' {
-    interface FilterDOMProps {
-        excludedSubscriptionIds: never;
-        customerId: never;
-        customerKey: never;
-        visiblePortMode: never;
-        bandwidth: never;
-        bandwidthKey: never;
-        tags: never;
-        statuses: never;
-    }
-}
-filterDOMProps.register(
-    'excludedSubscriptionIds',
-    'customerId',
-    'customerKey',
-    'visiblePortMode',
-    'bandwidth',
-    'bandwidthKey',
-    'tags',
-    'statuses',
-);
-
-export type SubscriptionFieldProps = FieldProps<
-    string,
-    {
-        productIds?: string[];
-        excludedSubscriptionIds?: string[];
-        customerId?: string;
-        customerKey?: string;
-        visiblePortMode?: string;
-        bandwidth?: number;
-        bandwidthKey?: string;
-        tags?: string[]; // There is an assumption that using tags means you want port subscriptions
-        statuses?: string[];
-    }
->;
-
-function toPortModes(visiblePortMode: string): string[] {
-    if (visiblePortMode === 'all') {
-        return [];
-    }
-
-    if (visiblePortMode === 'normal') {
-        return ['tagged', 'untagged'];
-    }
-
-    return [visiblePortMode];
-}
-
-function SubscriptionFieldDefinition({
-    disabled,
-    id,
-    label,
-    description,
-    name,
-    onChange,
-    readOnly,
-    value,
-    error,
-    showInlineError,
-    errorMessage,
-    className = '',
-    productIds = [],
-    excludedSubscriptionIds = [],
-    customerId,
-    customerKey,
-    visiblePortMode = 'all',
-    bandwidth,
-    bandwidthKey,
-    tags,
-    statuses,
-    ...props
-}: SubscriptionFieldProps) {
-    const t = useTranslations('pydanticForms');
-    // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
-    const { reactSelectInnerComponentStyles } =
-        useWithOrchestratorTheme(getSelectFieldStyles);
-
-    const nameArray = joinName(null, name);
-    let parentName = joinName(nameArray.slice(0, -1));
-
-    // We cant call useField conditionally so we call it for ourself if there is no parent
-    if (parentName === '') {
-        parentName = name;
-    }
-
-    const parent = useField(parentName, {}, { absoluteName: true })[0];
-
-    const { model, schema } = useForm();
-
-    const bandWithFromField = bandwidthKey
-        ? get(model, bandwidthKey!) || schema.getInitialValue(bandwidthKey, {})
-        : undefined;
-
-    const usedBandwidth = bandwidth || bandWithFromField;
-
-    // Get value from org field if customerKey is set.
-    const usedCustomerId = customerKey
-        ? get(model, customerKey, 'nonExistingOrgToFilterEverything')
-        : customerId;
-
-    const getFilteredOptions = (optionsInput: Option[]): Option[] => {
-        // Remnant of the old logic in which much more filtering happened clientside, which is now done
-        // server-side by setting the required URL parameters.
-
-        // The 'uniqueItems' filter below should exclude options already chosen in other SubscriptionFields in the same parent Array.
-        // Although this partly relies on uniforms magic which will be reworked/replaced with pydantic-forms.
-        if (
-            parentName !== name &&
-            parent.fieldType === Array &&
-            // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
-            // TODO: Figure out why this is so
-            parent.uniqueItems
-        ) {
-            const allValues: string[] = get(model, parentName, []);
-            const chosenValues = allValues.filter(
-                (_item, index) =>
-                    index.toString() !== nameArray[nameArray.length - 1],
-            );
-
-            return optionsInput.filter((option) =>
-                chosenValues.includes(option.value),
-            );
-        } else {
-            return optionsInput;
-        }
-    };
-
-    const excludeSubscriptionIds = excludedSubscriptionIds;
-    const portModes = toPortModes(visiblePortMode);
-    const {
-        refetch,
-        options: unfilteredOptions,
-        isFetching,
-    } = useGetSurfSubscriptionDropdownOptions(
-        tags,
-        statuses,
-        productIds,
-        excludeSubscriptionIds,
-        usedCustomerId,
-        portModes,
-        usedBandwidth,
-    );
-
-    const options = getFilteredOptions(unfilteredOptions);
-
-    const selectedValue = options.find(
-        (option: Option) => option.value === value,
-    );
-
-    const isDisabled = disabled || readOnly || isFetching;
-
-    return (
-        <EuiFlexItem css={subscriptionFieldStyling} grow={1}>
-            <section
-                {...filterDOMProps(props)}
-                className={`${className} subscription-field${
-                    disabled ? '-disabled' : ''
-                }`}
-            >
-                <EuiFormRow
-                    label={label}
-                    labelAppend={<EuiText size="m">{description}</EuiText>}
-                    error={showInlineError ? errorMessage : false}
-                    isInvalid={error}
-                    id={id}
-                    fullWidth
-                >
-                    <div>
-                        {!disabled && (
-                            <EuiFlexGroup
-                                alignItems={'center'}
-                                gutterSize={'none'}
-                                responsive={false}
-                            >
-                                <EuiButtonIcon
-                                    className="reload-subscriptions-icon-button"
-                                    id={`refresh-icon-${id}`}
-                                    iconType="refresh"
-                                    iconSize="l"
-                                    disabled={isDisabled}
-                                    onClick={() => {
-                                        if (isDisabled) {
-                                            refetch();
-                                        }
-                                    }}
-                                />
-                            </EuiFlexGroup>
-                        )}
-                        <ReactSelect<Option, false>
-                            id={id}
-                            inputId={`${id}.search`}
-                            name={name}
-                            onChange={(option) => {
-                                onChange(option?.value);
-                            }}
-                            options={options}
-                            value={selectedValue}
-                            isSearchable={true}
-                            isClearable={false}
-                            placeholder={
-                                isFetching
-                                    ? t('widgets.subscription.loading')
-                                    : t('widgets.subscription.placeholder')
-                            }
-                            isDisabled={isDisabled}
-                            styles={reactSelectInnerComponentStyles}
-                            className="subscription-field-select"
-                        />
-                    </div>
-                </EuiFormRow>
-            </section>
-        </EuiFlexItem>
-    );
-}
-
-export const SubscriptionField = connectField(SubscriptionFieldDefinition, {
-    kind: 'leaf',
-});

package/src/components/WfoForms/formFields/deprecated/SubscriptionFieldStyling.ts

@@ -1,33 +0,0 @@
-import { css } from '@emotion/react';
-
-export const subscriptionFieldStyling = css`
-    .subscription-field {
-        > div {
-            display: flex;
-
-            .subscription-field-select {
-                width: 100%;
-                margin-left: 5px;
-            }
-        }
-
-        .euiFormRow > .euiFormRow__fieldWrapper > div {
-            display: flex;
-        }
-    }
-
-    // Setup sensible margins for port selectors
-    .subscription-field-disabled {
-        > div {
-            display: flex;
-            .subscription-field-select {
-                margin-left: 0px;
-                margin-top: 5px;
-            }
-        }
-    }
-
-    .reload-subscriptions-icon-button {
-        margin-left: -7px;
-    }
-`;

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

@@ -1,110 +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 moment, { Moment } from 'moment-timezone';
-import { connectField, filterDOMProps } from 'uniforms';
-
-import { EuiDatePicker, EuiFormRow, EuiText } from '@elastic/eui';
-
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useWithOrchestratorTheme } from '@/hooks';
-
-import { FieldProps } from '../types';
-
-export function utcTimestampToLocalMoment(utc_timestamp: number) {
-    // Convert UTC timestamp to localized Moment object
-    return moment
-        .unix(utc_timestamp)
-        .tz(moment.tz.guess() ?? 'Europe/Amsterdam');
-}
-
-export function localMomentToUtcTimestamp(local_moment: Moment) {
-    // Convert localized Moment object to UTC timestamp
-    return local_moment.unix();
-}
-
-export type TimestampFieldProps = FieldProps<
-    number,
-    {
-        max?: number;
-        min?: number;
-        showTimeSelect: boolean;
-        locale?: string;
-        dateFormat?: string;
-        timeFormat?: string;
-    }
->;
-
-function Timestamp({
-    disabled,
-    id,
-    label,
-    description,
-    max,
-    min,
-    showTimeSelect,
-    locale,
-    dateFormat,
-    timeFormat,
-    onChange,
-    value,
-    error,
-    showInlineError,
-    errorMessage,
-    ...props
-}: TimestampFieldProps) {
-    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
-
-    return (
-        <div {...filterDOMProps(props)}>
-            <EuiFormRow
-                css={formRowStyle}
-                label={label}
-                labelAppend={<EuiText size="m">{description}</EuiText>}
-                error={showInlineError ? errorMessage : false}
-                isInvalid={error}
-                id={id}
-                fullWidth
-            >
-                <EuiDatePicker
-                    disabled={disabled}
-                    timeIntervals={15}
-                    selected={value ? utcTimestampToLocalMoment(value) : null}
-                    value={
-                        value
-                            ? utcTimestampToLocalMoment(value).toLocaleString()
-                            : undefined
-                    }
-                    onChange={(event) => {
-                        onChange(
-                            event
-                                ? localMomentToUtcTimestamp(event)
-                                : undefined,
-                        );
-                    }}
-                    showTimeSelect={showTimeSelect}
-                    dateFormat={dateFormat ? dateFormat : undefined}
-                    timeFormat={timeFormat ? timeFormat : undefined}
-                    locale={locale ? locale : 'en-en'}
-                    maxDate={max ? moment.unix(max) : undefined}
-                    minDate={min ? moment.unix(min) : undefined}
-                />
-            </EuiFormRow>
-        </div>
-    );
-}
-
-export const TimestampField = connectField(Timestamp, { kind: 'leaf' });

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

@@ -1,300 +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/get';
-import { useTranslations } from 'next-intl';
-import { connectField, filterDOMProps, joinName, useForm } from 'uniforms';
-
-import { EuiFieldText, EuiFormRow, EuiText } from '@elastic/eui';
-
-import { useIsTaggedPort } from '@/hooks/deprecated/useIsTaggedPort';
-import { useVlansByServicePortQuery } from '@/rtk/endpoints/formFields';
-
-import { FieldProps } from '../types';
-import { ServicePort } from './types';
-
-function inValidVlan(vlan: string) {
-    const value = vlan || '0';
-
-    const stripped = value.toString().replace(/ /g, '');
-    return (
-        !/^\d{1,4}(?:-\d{1,4})?(?:,\d{1,4}(?:-\d{1,4})?)*$/.test(stripped) ||
-        stripped.split(',').some(inValidRange)
-    );
-}
-
-function inValidRange(range: string) {
-    if (range.indexOf('-') > -1) {
-        const ranges = range.split('-');
-        return (
-            ranges.some(inValidRange) ||
-            parseInt(ranges[0], 10) >= parseInt(ranges[1], 10)
-        );
-    }
-    return parseInt(range, 10) < 2 || parseInt(range, 10) > 4094;
-}
-
-function getAllNumbersForVlanRange(vlanRange?: string) {
-    if (!vlanRange) {
-        return [];
-    }
-
-    if (vlanRange !== '0' && inValidVlan(vlanRange)) {
-        //semantically invalid so we don't validate against the already used ports
-        return [];
-    }
-
-    return numbersFromGroupedArray(
-        vlanRange
-            .replace(/ /g, '')
-            .split(',')
-            .map((sl) => sl.split('-').map(Number)),
-    );
-}
-
-function numbersFromGroupedArray(list: number[][]) {
-    return list.reduce((acc, boundaries) => {
-        const max = boundaries[boundaries.length - 1];
-        const min = boundaries[0];
-        return acc.concat(
-            Array.from(new Array(max - min + 1), (x, i) => min + i),
-        );
-    }, []);
-}
-
-function groupedArrayFromNumbers(numbers: number[]) {
-    numbers = [...numbers].sort((a, b) => a - b);
-
-    // Group by properly incrementing numbers
-    const groupedNumbers = numbers.reduce((r: number[][], n) => {
-        let lastSubArray: number[] = r[r.length - 1];
-
-        // Skip duplicates
-        if (lastSubArray && lastSubArray[lastSubArray.length - 1] === n) {
-            return r;
-        }
-
-        // If this is the first one or number is more than 1 difference make a new sub array
-        if (!lastSubArray || lastSubArray[lastSubArray.length - 1] !== n - 1) {
-            lastSubArray = [];
-            r.push(lastSubArray);
-        }
-
-        lastSubArray.push(n);
-
-        return r;
-    }, []);
-
-    return groupedNumbers.map((l) =>
-        l[0] !== l[l.length - 1] ? [l[0], l[l.length - 1]] : [l[0]],
-    );
-}
-
-function vlanRangeFromNumbers(list: number[]) {
-    return groupedArrayFromNumbers(list)
-        .map((sl) => sl.join('-'))
-        .join(',');
-}
-
-export type VlanFieldProps = FieldProps<
-    string,
-    { subscriptionFieldName?: string; nsiVlansOnly?: boolean }
->;
-
-export type VlanRange = [number, number];
-
-function Vlan({
-    disabled,
-    id,
-    label,
-    description,
-    name,
-    onChange,
-    readOnly,
-    value,
-    error,
-    showInlineError,
-    errorMessage,
-    subscriptionFieldName = 'subscription_id',
-    nsiVlansOnly = false,
-    ...props
-}: VlanFieldProps) {
-    const t = useTranslations('pydanticForms');
-
-    const { model, schema } = useForm();
-    const initialValue = schema.getInitialValue(name, {});
-    const nameArray = joinName(null, name);
-    const selfName = nameArray.slice(-1);
-    const subscriptionIdFieldName = joinName(
-        nameArray.slice(0, -1),
-        subscriptionFieldName,
-    );
-    const completeListFieldName = joinName(nameArray.slice(0, -2));
-    const subscriptionId = get(model, subscriptionIdFieldName);
-    const [isFetched, portIsTagged] = useIsTaggedPort(subscriptionId);
-
-    const completeList: ServicePort[] = get(model, completeListFieldName) || [];
-    const extraUsedVlans = completeList
-        .filter(
-            (_item, index) => index.toString() !== nameArray.slice(-2, -1)[0],
-        )
-        .filter((item) => get(item, subscriptionFieldName) === subscriptionId)
-        .map((item) => get(item, selfName))
-        .join(',');
-
-    useEffect(() => {
-        if (subscriptionId && isFetched && !portIsTagged && value !== '0') {
-            onChange('0');
-        } else if (
-            !disabled &&
-            ((!subscriptionId && value !== '') ||
-                (subscriptionId && portIsTagged && value === '0'))
-        ) {
-            onChange('');
-        }
-        // Adding the missing dependencies to the dependency array leads to an infinite loop
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [onChange, subscriptionId, isFetched, portIsTagged]);
-
-    const [usedVlansInIms, setUsedVlansInIms] = useState<VlanRange[]>([]);
-    const [missingInIms, setMissingInIms] = useState(false);
-    const {
-        data,
-        isFetching: isLoading,
-        error: fetchError,
-    } = useVlansByServicePortQuery(
-        { subscriptionId, nsiVlansOnly },
-        {
-            skip: !subscriptionId,
-        },
-    );
-
-    useEffect(() => {
-        if (data) {
-            setUsedVlansInIms(data);
-            setMissingInIms(false);
-        }
-        if (fetchError) {
-            console.error(fetchError);
-            setMissingInIms(true);
-            setUsedVlansInIms([]);
-        }
-    }, [data, fetchError]);
-
-    // Filter currently used vlans because they are probably from the current subscription
-    const currentVlans = getAllNumbersForVlanRange(initialValue);
-    const usedVlans = numbersFromGroupedArray(usedVlansInIms).filter(
-        (n) => !currentVlans.includes(n),
-    );
-    const allUsedVlans = usedVlans
-        .concat(getAllNumbersForVlanRange(extraUsedVlans))
-        .sort();
-    const validFormat = !value || value === '0' || !inValidVlan(value);
-    // Don't validate if disabled (untagged shows as disable but needs validation)
-    const vlansInUse =
-        validFormat && !disabled
-            ? getAllNumbersForVlanRange(value).filter((num) =>
-                  allUsedVlans.includes(num),
-              )
-            : [];
-
-    const placeholder = isLoading
-        ? t('widgets.vlan.loadingIms')
-        : subscriptionId
-        ? t('widgets.vlan.placeholder')
-        : t('widgets.vlan.placeholderNoServicePort');
-
-    const errorMessageExtra = missingInIms
-        ? t('widgets.vlan.missingInIms')
-        : !validFormat
-        ? t('widgets.vlan.invalidVlan')
-        : vlansInUse.length
-        ? vlansInUse.length >= 1 && vlansInUse[0] === 0
-            ? t('widgets.vlan.untaggedPortInUse')
-            : t('widgets.vlan.vlansInUseError', {
-                  vlans: vlanRangeFromNumbers(vlansInUse),
-              })
-        : undefined;
-
-    let message = '';
-    if (!isLoading && subscriptionId) {
-        if (portIsTagged && nsiVlansOnly) {
-            const initialUsedVlans = schema
-                .getInitialValue('service_ports', {})
-                .map((sp: { vlan: string }) => sp.vlan);
-            const currentUsedVlans = initialUsedVlans.filter(
-                (vlan: string) => vlan !== value && vlan !== extraUsedVlans,
-            );
-
-            const allAvailableVlans = [
-                ...usedVlans.filter(
-                    (number) =>
-                        !getAllNumbersForVlanRange(extraUsedVlans).includes(
-                            number,
-                        ),
-                ),
-                ...currentUsedVlans,
-            ].sort();
-
-            message = !allAvailableVlans.length
-                ? t('widgets.vlan.nsiNoPortsAvailable')
-                : t('widgets.vlan.nsiVlansAvailable', {
-                      vlans: vlanRangeFromNumbers(allAvailableVlans),
-                  });
-        } else if (portIsTagged) {
-            message = !allUsedVlans.length
-                ? t('widgets.vlan.allPortsAvailable')
-                : t('widgets.vlan.vlansInUse', {
-                      vlans: vlanRangeFromNumbers(allUsedVlans),
-                  });
-        } else {
-            message = t('widgets.vlan.taggedOnly');
-        }
-    }
-
-    return (
-        <section {...filterDOMProps(props)}>
-            <EuiFormRow
-                label={label}
-                labelAppend={<EuiText size="m">{description}</EuiText>}
-                error={
-                    (error || errorMessageExtra) && showInlineError
-                        ? errorMessage || errorMessageExtra
-                        : false
-                }
-                isInvalid={error}
-                helpText={message}
-                id={id}
-                fullWidth
-            >
-                <EuiFieldText
-                    isLoading={isLoading}
-                    fullWidth
-                    disabled={!subscriptionId || disabled || !portIsTagged}
-                    name={name}
-                    isInvalid={error}
-                    onChange={(event) => onChange(event.target.value)}
-                    placeholder={placeholder}
-                    readOnly={readOnly}
-                    type="text"
-                    value={value ?? ''}
-                />
-            </EuiFormRow>
-        </section>
-    );
-}
-
-export const VlanField = connectField(Vlan, { kind: 'leaf' });