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

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

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

@@ -0,0 +1,351 @@
+/*
+ * 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 { useOrchestratorTheme } from '../../../hooks';
+import { useGetSubscriptionDropdownOptions } from '../../../hooks/surf/useGetSubscriptionDropdownOptions';
+import { SubscriptionDropdownOption } from '../../../types';
+import { subscriptionFieldStyling } from './SubscriptionFieldStyling';
+import { getReactSelectInnerComponentStyles } from './reactSelectStyles';
+import { PortMode, ProductTag } from './surf/types';
+import { FieldProps, Option } from './types';
+import { getPortMode } from './utils';
+
+declare module 'uniforms' {
+    interface FilterDOMProps {
+        excludedSubscriptionIds: never;
+        organisationId: never;
+        organisationKey: never;
+        visiblePortMode: never;
+        bandwidth: never;
+        bandwidthKey: never;
+        tags: never;
+        statuses: never;
+    }
+}
+filterDOMProps.register(
+    'productIds',
+    'excludedSubscriptionIds',
+    'organisationId',
+    'organisationKey',
+    'visiblePortMode',
+    'bandwidth',
+    'bandwidthKey',
+    'tags',
+    'statuses',
+);
+
+export type SubscriptionFieldProps = FieldProps<
+    string,
+    {
+        productIds?: string[];
+        excludedSubscriptionIds?: string[];
+        organisationId?: string;
+        organisationKey?: string;
+        visiblePortMode?: string;
+        bandwidth?: number;
+        bandwidthKey?: string;
+        tags?: string[]; // There is an assumption that using tags means you want port subscriptions
+        statuses?: string[];
+    }
+>;
+
+function SubscriptionFieldDefinition({
+    disabled,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    readOnly,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    className = '',
+    productIds = [],
+    excludedSubscriptionIds = [],
+    organisationId,
+    organisationKey,
+    visiblePortMode = 'all',
+    bandwidth,
+    bandwidthKey,
+    tags,
+    statuses,
+    ...props
+}: SubscriptionFieldProps) {
+    const t = useTranslations('pydanticForms');
+    const { theme } = useOrchestratorTheme();
+    // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
+    const reactSelectInnerComponentStyles =
+        getReactSelectInnerComponentStyles(theme);
+
+    const { refetch, subscriptions, isFetching } =
+        useGetSubscriptionDropdownOptions(tags, statuses);
+
+    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 organisationKey is set.
+    const usedOrganisationId = organisationKey
+        ? get(model, organisationKey, 'nonExistingOrgToFilterEverything')
+        : organisationId;
+
+    const makeLabel = (subscription: SubscriptionDropdownOption) => {
+        const description =
+            subscription.description ||
+            t('widgets.subscription.missingDescription');
+        const subscriptionSubstring = subscription.subscriptionId.substring(
+            0,
+            8,
+        );
+
+        if (['Node'].includes(subscription.product.tag)) {
+            const description =
+                subscription.description ||
+                t('widgets.subscription.missingDescription');
+            return `${subscription.subscriptionId.substring(
+                0,
+                8,
+            )} ${description.trim()}`;
+        } else if (
+            [
+                ProductTag.SP,
+                ProductTag.SPNL,
+                ProductTag.AGGSP,
+                ProductTag.AGGSPNL,
+                ProductTag.MSC,
+                ProductTag.MSCNL,
+                ProductTag.IRBSP,
+            ].includes(subscription.product.tag as ProductTag)
+        ) {
+            const portMode = getPortMode(subscription.productBlockInstances);
+            return `${subscriptionSubstring} ${portMode?.toUpperCase()} ${description.trim()} ${subscription
+                .customer?.fullname}`;
+        } else {
+            return description.trim();
+        }
+    };
+
+    // Filter by product, needed because getSubscriptions might return more than we want
+    const getSubscriptionOptions = (): Option[] => {
+        const filteredSubscriptions = subscriptions?.filter((subscription) => {
+            // NOTE: useBandWith, productIds and tags need to be checked in this order as per the V1 logic
+
+            // If a bandwidth filter is supplied it needs to be applied to the subscription product
+            if (usedBandwidth) {
+                const portSpeedInput = subscription.fixedInputs.find(
+                    (fixedInput) => fixedInput.field === 'port_speed',
+                );
+                if (
+                    portSpeedInput &&
+                    parseInt(portSpeedInput.value.toString(), 10) <
+                        parseInt(usedBandwidth.toString(), 10)
+                ) {
+                    return false;
+                }
+            }
+
+            // If specific productIds are provided the subscriptions needs to have one of those
+            if (
+                !usedBandwidth &&
+                productIds &&
+                productIds.length > 0 &&
+                !productIds.includes(subscription.product.productId)
+            ) {
+                return false;
+            }
+
+            if (
+                !usedBandwidth &&
+                !productIds &&
+                tags &&
+                tags?.length > 0 &&
+                !tags.includes(subscription.product.tag)
+            ) {
+                return false;
+            }
+
+            // If specific subscriptionIds are excluded the subscription can't be one ot those
+            if (
+                excludedSubscriptionIds &&
+                excludedSubscriptionIds.length > 0 &&
+                excludedSubscriptionIds.includes(subscription.subscriptionId)
+            ) {
+                return false;
+            }
+
+            // If a Port mode filter is applied we need to filter on that
+            if (visiblePortMode !== 'all') {
+                const portMode = getPortMode(
+                    subscription.productBlockInstances,
+                );
+                // For normal mode filter out all subscriptions that don't have tagged or untagged ports
+                if (
+                    visiblePortMode === 'normal' &&
+                    ![PortMode.TAGGED, PortMode.UNTAGGED, undefined].includes(
+                        portMode,
+                    )
+                ) {
+                    return false;
+                } else if (portMode !== visiblePortMode) {
+                    return false;
+                }
+            }
+
+            // If a customer/organisation filter is applied we need to filter on that
+            if (
+                usedOrganisationId &&
+                subscription.customer?.identifier !== usedOrganisationId
+            ) {
+                return false;
+            }
+
+            if (parentName !== name) {
+                if (
+                    parent.fieldType === Array &&
+                    // @ts-ignore
+                    parent.uniqueItems
+                ) {
+                    const allValues: string[] = get(model, parentName, []);
+                    const chosenValues = allValues.filter(
+                        (_item, index) =>
+                            index.toString() !==
+                            nameArray[nameArray.length - 1],
+                    );
+                    if (!chosenValues.includes(subscription.subscriptionId)) {
+                        return false;
+                    }
+                }
+            }
+
+            return true;
+        });
+
+        return filteredSubscriptions
+            ? filteredSubscriptions.map((subscription) => ({
+                  label: makeLabel(subscription),
+                  value: subscription.subscriptionId,
+              }))
+            : [];
+    };
+
+    const options = getSubscriptionOptions();
+    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}`}
+                                    aria-label={`reload-${label}`}
+                                    iconType="refresh"
+                                    iconSize="l"
+                                    disabled={isDisabled}
+                                    onClick={() => {
+                                        !isDisabled ? refetch() : null;
+                                    }}
+                                />
+                            </EuiFlexGroup>
+                        )}
+                        <ReactSelect<Option, false>
+                            id={id}
+                            inputId={`${id}.search`}
+                            name={name}
+                            onChange={(option) => {
+                                onChange(option?.value);
+                            }}
+                            options={options}
+                            value={isDisabled ? null : 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/SubscriptionFieldStyling.ts

@@ -0,0 +1,33 @@
+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/SubscriptionSummaryField.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 { EuiFormRow, EuiText } from '@elastic/eui';
+
+import { GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY } from '../../../graphqlQueries';
+import { useQueryWithGraphql } from '../../../hooks';
+import { WfoLoading } from '../../WfoLoading';
+import { WfoSubscriptionGeneral } from '../../WfoSubscription';
+import { FieldProps } from './types';
+
+export type SubscriptionSummaryFieldProps = FieldProps<string>;
+
+interface SubscriptionSummaryDisplayProps {
+    subscriptionId: string;
+}
+
+const SubscriptionSummaryDisplay = ({
+    subscriptionId,
+}: SubscriptionSummaryDisplayProps) => {
+    const { data } = useQueryWithGraphql(
+        GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY,
+        { subscriptionId },
+        `subscription-${subscriptionId}`,
+    );
+    const subscriptionDetail = data?.subscriptions.page[0];
+
+    return (
+        (subscriptionDetail && (
+            <WfoSubscriptionGeneral subscriptionDetail={subscriptionDetail} />
+        )) || <WfoLoading />
+    );
+};
+
+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/TextField.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 '../../../types/forms';
+
+export type TextFieldProps = FieldProps<string>;
+
+function Text({
+    autoComplete,
+    disabled,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    placeholder,
+    readOnly,
+    type,
+    value,
+    error,
+    showInlineError,
+    errorMessage,
+    ...props
+}: TextFieldProps) {
+    return (
+        <section {...filterDOMProps(props)}>
+            <EuiFormRow
+                label={label}
+                labelAppend={<EuiText size="m">{description}</EuiText>}
+                error={showInlineError ? errorMessage : false}
+                isInvalid={error}
+                id={id}
+                fullWidth
+            >
+                <EuiFieldText
+                    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/TimestampField.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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 { 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) {
+    return (
+        <div {...filterDOMProps(props)}>
+            <EuiFormRow
+                label={label}
+                labelAppend={<EuiText size="m">{description}</EuiText>}
+                error={showInlineError ? errorMessage : false}
+                isInvalid={error}
+                id={id}
+                fullWidth
+            >
+                <EuiDatePicker
+                    disabled={disabled}
+                    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' });