@orchestrator-ui/orchestrator-ui-components 5.0.0 → 5.2.0

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -2,17 +2,18 @@ import React from 'react';
 
 import { AbstractIntlMessages, useMessages, useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
-import {
-    PydanticForm,
-    PydanticFormFieldFormat,
-    PydanticFormFieldType,
-} from 'pydantic-forms';
 import type {
     ComponentMatcher,
     PydanticComponentMatcher,
     PydanticFormApiProvider,
     PydanticFormLabelProvider,
 } from 'pydantic-forms';
+import {
+    PydanticForm,
+    PydanticFormFieldFormat,
+    PydanticFormFieldType,
+    zodValidationPresets,
+} from 'pydantic-forms';
 
 import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 
@@ -21,10 +22,12 @@ import { StartWorkflowPayload } from '@/pages/processes/WfoStartProcessPage';
 import { HttpStatus } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
 import { useAppSelector } from '@/rtk/hooks';
+import { FormValidationError } from '@/types';
 
 import { Footer } from './Footer';
+import { Header } from './Header';
 import { Row } from './Row';
-import { TextArea } from './fields/TextArea';
+import { Checkbox, Divider, Label, Summary, Text, TextArea } from './fields';
 
 interface WfoPydanticFormProps {
     processName: string;
@@ -54,6 +57,11 @@ export const WfoPydanticForm = ({
         typeof translationMessages?.pydanticForms !== 'string'
             ? translationMessages.pydanticForms.backendTranslations
             : {};
+    const widgetsTranslations =
+        translationMessages?.pydanticForms &&
+        typeof translationMessages?.pydanticForms !== 'string'
+            ? translationMessages.pydanticForms.widgets
+            : {};
 
     const onSuccess = (_fieldValues: object, req: object) => {
         const request = req as { response: StartProcessResponse };
@@ -88,6 +96,18 @@ export const WfoPydanticForm = ({
                                         object | string
                                     >;
                                     resolve(data);
+                                } else if (
+                                    typeof error === 'object' &&
+                                    error !== null
+                                ) {
+                                    const validationError =
+                                        error as FormValidationError;
+                                    if (validationError?.status === 400) {
+                                        resolve({
+                                            ...validationError.data,
+                                            status: validationError.status.toString(),
+                                        });
+                                    }
                                 }
                             } else if (result.data) {
                                 resolve(result.data);
@@ -112,11 +132,13 @@ export const WfoPydanticForm = ({
         return pydanticFormProvider;
     };
 
+    const orchestratorTranslations = formTranslations as unknown;
+
     const pydanticLabelProvider: PydanticFormLabelProvider = async () => {
         return new Promise((resolve) => {
             resolve({
                 labels: {
-                    ...(formTranslations as object),
+                    ...(orchestratorTranslations as object),
                 },
                 data: {},
             });
@@ -138,22 +160,88 @@ export const WfoPydanticForm = ({
                     );
                 },
             },
-            ...currentMatchers,
+            {
+                id: 'summary',
+                ElementMatch: {
+                    Element: Summary,
+                    isControlledElement: false,
+                },
+                matcher(field) {
+                    return (
+                        field.type === PydanticFormFieldType.STRING &&
+                        (field.format as string) === 'summary'
+                    );
+                },
+            },
+            {
+                id: 'label',
+                ElementMatch: {
+                    Element: Label,
+                    isControlledElement: false,
+                },
+                matcher(field) {
+                    return (
+                        field.type === PydanticFormFieldType.STRING &&
+                        field.format === PydanticFormFieldFormat.LABEL
+                    );
+                },
+            },
+            {
+                id: 'divider',
+                ElementMatch: {
+                    Element: Divider,
+                    isControlledElement: false,
+                },
+                matcher(field) {
+                    return (
+                        field.type === PydanticFormFieldType.STRING &&
+                        field.format === PydanticFormFieldFormat.DIVIDER
+                    );
+                },
+            },
+            {
+                id: 'checkbox',
+                ElementMatch: {
+                    Element: Checkbox,
+                    isControlledElement: true,
+                },
+                matcher(field) {
+                    return field.type === PydanticFormFieldType.BOOLEAN;
+                },
+            },
+            ...currentMatchers.filter((matcher) => matcher.id !== 'text'),
+            {
+                id: 'text',
+                ElementMatch: {
+                    Element: Text,
+                    isControlledElement: true,
+                },
+                matcher(field) {
+                    return field.type === PydanticFormFieldType.STRING;
+                },
+                validator: zodValidationPresets.string,
+            },
         ];
 
         return componentMatcher ? componentMatcher(wfoMatchers) : wfoMatchers;
     };
 
+    const handleCancel = () => {
+        const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
+        router.replace(pfBasePath);
+    };
+
     return (
         <PydanticForm
-            title={''}
             id={processName}
             onSuccess={onSuccess}
+            onCancel={handleCancel}
             loadingComponent={<WfoLoading />}
             config={{
                 apiProvider: getPydanticFormProvider(),
                 allowUntouchedSubmit: true,
                 footerRenderer: Footer,
+                headerRenderer: Header,
                 skipSuccessNotice: true,
                 componentMatcher: wfoComponentMatcher,
                 labelProvider: pydanticLabelProvider,
@@ -161,6 +249,10 @@ export const WfoPydanticForm = ({
                 customTranslations: {
                     cancel: t('cancel'),
                     startWorkflow: t('startWorkflow'),
+                    widgets: {
+                        ...(widgetsTranslations as object),
+                    },
+                    ...translationMessages,
                 },
             }}
         />

package/src/components/WfoPydanticForm/fields/Checkbox.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import type { PydanticFormControlledElement } from 'pydantic-forms';
+
+import { EuiCheckbox } from '@elastic/eui';
+
+export const Checkbox: PydanticFormControlledElement = ({
+    pydanticFormField,
+    onChange,
+    value,
+    disabled,
+}) => {
+    return (
+        <EuiCheckbox
+            checked={value || false}
+            disabled={disabled}
+            id={pydanticFormField.id}
+            label={pydanticFormField.title || <div>&nbsp;</div>}
+            onChange={() => !disabled && onChange(!value)}
+        />
+    );
+};

package/src/components/WfoPydanticForm/fields/Divider.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import type { PydanticFormElement } from 'pydantic-forms';
+
+import { EuiHorizontalRule } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+export const Divider: PydanticFormElement = ({ pydanticFormField }) => {
+    const { theme } = useOrchestratorTheme();
+    return (
+        <EuiHorizontalRule
+            style={{ marginTop: theme.base }}
+            id={pydanticFormField.id}
+        />
+    );
+};

package/src/components/WfoPydanticForm/fields/Label.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { PydanticFormElement } from 'pydantic-forms';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+export const Label: PydanticFormElement = ({ pydanticFormField }) => {
+    const { theme } = useOrchestratorTheme();
+
+    return (
+        <div>
+            <label
+                css={{
+                    color: theme.colors.text,
+                    display: 'block',
+                }}
+                id={pydanticFormField.id}
+            >
+                {pydanticFormField.title}
+            </label>
+        </div>
+    );
+};

package/src/components/WfoPydanticForm/fields/Summary.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import type { PydanticFormElement } from 'pydantic-forms';
+
+import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
+import { tint } from '@elastic/eui';
+import { css } from '@emotion/react';
+import type { WfoTheme } from '@orchestrator-ui/orchestrator-ui-components';
+
+import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export const getStyles = ({ theme }: WfoTheme) => {
+    const toShadeColor = (color: string) => tint(color, 0.9);
+
+    const summaryFieldStyle = css({
+        'div.emailMessage': {
+            td: {
+                color: theme.colors.text,
+            },
+            p: {
+                color: theme.colors.text,
+            },
+            html: {
+                marginLeft: '-10px',
+            },
+        },
+        'section.table-summary': {
+            marginTop: '20px',
+            width: '100%',
+            td: {
+                padding: '10px',
+                verticalAlign: 'top',
+            },
+            'td:not(:first-child):not(:last-child)': {
+                borderRight: `1px solid ${theme.colors.lightestShade}`,
+            },
+            '.label': {
+                fontWeight: 'bold',
+                color: theme.colors.lightestShade,
+                backgroundColor: theme.colors.primary,
+                borderRight: `2px solid ${theme.colors.lightestShade}`,
+                borderBottom: `1px solid ${theme.colors.lightestShade}`,
+            },
+            '.value': {
+                backgroundColor: toShadeColor(theme.colors.primary),
+                borderBottom: `1px solid ${theme.colors.lightestShade}`,
+            },
+        },
+    });
+    return {
+        summaryFieldStyle: summaryFieldStyle,
+    };
+};
+
+export const Summary: PydanticFormElement = ({ pydanticFormField }) => {
+    const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
+    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
+
+    const { id, title, description } = pydanticFormField;
+    const uniforms = pydanticFormField.schema.uniforms;
+    const summaryData = uniforms?.data as unknown as {
+        headers: string[][];
+        labels: string[];
+        columns: string[][];
+    };
+
+    const headers = summaryData?.headers as string[][];
+    const labels = summaryData?.labels as string[];
+    const columns = summaryData?.columns || [];
+
+    const extraColumnsData = columns.filter((_, index) => index !== 0);
+
+    const rows = columns[0].map((row, index) => (
+        <tr key={index}>
+            {labels && <td className={`label`}>{labels[index]}</td>}
+            <td className={`value`}>
+                {typeof row === 'string' && row.includes('<!doctype html>') ? (
+                    <div
+                        className="emailMessage"
+                        dangerouslySetInnerHTML={{ __html: row }}
+                    ></div>
+                ) : (
+                    row
+                )}
+            </td>
+            {extraColumnsData &&
+                extraColumnsData.map((_, idx) => (
+                    <td className={`value`} key={idx}>
+                        {extraColumnsData[idx][index]}
+                    </td>
+                ))}
+        </tr>
+    ));
+
+    const tableHeader =
+        !headers || headers.length === 0 ? null : (
+            <tr>
+                {labels && <th />}
+                {headers.map((header, idx) => (
+                    <th key={idx}>{header}</th>
+                ))}
+            </tr>
+        );
+
+    return (
+        <EuiFlexItem css={[summaryFieldStyle, formRowStyle]}>
+            <section>
+                <EuiFormRow
+                    label={description}
+                    labelAppend={<EuiText size="m">{title}</EuiText>}
+                    id={id}
+                    fullWidth
+                >
+                    <section className="table-summary">
+                        <table id={`${id}-table`}>
+                            <thead>{tableHeader}</thead>
+                            <tbody>{rows}</tbody>
+                        </table>
+                    </section>
+                </EuiFormRow>
+            </section>
+        </EuiFlexItem>
+    );
+};

package/src/components/WfoPydanticForm/fields/Text.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { PydanticFormControlledElement } from 'pydantic-forms';
+
+import { EuiFieldText } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { getFormFieldsBaseStyle } from '@/theme';
+
+export const Text: PydanticFormControlledElement = ({
+    onChange,
+    value,
+    disabled,
+}) => {
+    const { formFieldBaseStyle } = useWithOrchestratorTheme(
+        getFormFieldsBaseStyle,
+    );
+
+    return (
+        <EuiFieldText
+            css={formFieldBaseStyle}
+            disabled={disabled}
+            onChange={(event) => onChange(event.target.value)}
+            value={value ?? ''}
+            fullWidth
+        />
+    );
+};

package/src/components/WfoPydanticForm/fields/index.ts

@@ -1 +1,6 @@
 export * from './TextArea';
+export * from './Text';
+export * from './Label';
+export * from './Divider';
+export * from './Checkbox';
+export * from './Summary';

package/src/configuration/constants.ts

@@ -25,6 +25,8 @@ export const IPAM_FREE_SUBNETS_ENDPOINT = `${IPAM_ENDPOINT}/free_subnets`;
 
 //subscriptions
 export const SUBSCRIPTION_ACTIONS_ENDPOINT = 'subscriptions/workflows';
+export const SUBSCRIPTION_DROPDOWN_OPTIONS_ENDPOINT =
+    'surf/subscriptions/dropdown-options';
 export const CUSTOMER_DESCRIPTION_ENDPOINT =
     '/subscription_customer_descriptions';
 

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.0.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.2.0';

package/src/hooks/deprecated/useGetSurfSubcriptionDropdownOptions.ts

@@ -0,0 +1,37 @@
+import { useGetSurfSubscriptionDropdownOptionsQuery } from '@/rtk/endpoints/deprecated/surfSubscriptionDropdownOptions';
+import { SurfSubscriptionDropdownOptionsFilterParams } from '@/types';
+
+export const useGetSurfSubscriptionDropdownOptions = (
+    tags: string[] = [],
+    statuses: string[] = ['active'],
+    productIds: string[] = [],
+    excludeSubscriptionIds: string[] = [],
+    customerId?: string,
+    portModes: string[] = [],
+    bandwidth?: number,
+) => {
+    const filter_params: SurfSubscriptionDropdownOptionsFilterParams = {
+        product_tags: tags,
+        statuses,
+        product_ids: productIds,
+        exclude_subscription_ids: excludeSubscriptionIds,
+        port_modes: portModes,
+        bandwidth,
+    };
+
+    if (customerId) {
+        filter_params.customer_ids = [customerId];
+    }
+
+    const { data, isFetching, refetch, isError } =
+        useGetSurfSubscriptionDropdownOptionsQuery({ params: filter_params });
+
+    const options = (() => {
+        if (!isFetching && !isError && data) {
+            return data;
+        }
+        return [];
+    })();
+
+    return { isFetching, refetch, options };
+};

package/src/icons/WfoExclamationTriangle.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoExclamationTriangle: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        color={color}
+    >
+        <title>icon/exclamation-circle</title>
+        <g id="Symbols" strokeWidth="1.5" fill="currentColor">
+            <g id="icon/exclamation-triangle" fill="currentColor">
+                <path
+                    fillRule="evenodd"
+                    d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+                    clipRule="evenodd"
+                />
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/index.ts

@@ -39,3 +39,4 @@ export * from './WfoActualWork';
 export * from './WfoMalfunction';
 export * from './WfoPlannedWork';
 export * from './WfoCubeFill';
+export * from './WfoExclamationTriangle';

package/src/pages/metadata/WfoTasksPage.tsx

@@ -128,33 +128,18 @@ export const WfoTasksPage = () => {
             columnType: ColumnType.DATA,
             label: t('description'),
             width: '700px',
-            renderData: (value, row) =>
-                value ? (
-                    <WfoMetadataDescriptionField
-                        onSave={(updatedNote) =>
-                            updateWorkflow({
-                                id: row.workflowId,
-                                description: updatedNote,
-                            })
-                        }
-                        description={value}
-                    />
-                ) : null,
+            renderData: (value, row) => (
+                <WfoMetadataDescriptionField
+                    onSave={(updatedNote) =>
+                        updateWorkflow({
+                            id: row.workflowId,
+                            description: updatedNote,
+                        })
+                    }
+                    description={value}
+                />
+            ),
         },
-
-        // description: {
-        //     columnType: ColumnType.DATA,
-        //     label: t('description'),
-        //     width: '450px',
-        //     renderData: (value, row) =>
-        //         value ? (
-        //             <WfoWorkflowDescriptionField
-        //                 workflow_id={row.workflowId}
-        //                 description={value}
-        //             />
-        //         ) : null,
-        // },
-
         target: {
             columnType: ColumnType.DATA,
             label: t('target'),

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -131,18 +131,17 @@ export const WfoWorkflowsPage = () => {
             columnType: ColumnType.DATA,
             label: t('description'),
             width: '700px',
-            renderData: (value, row) =>
-                value ? (
-                    <WfoMetadataDescriptionField
-                        onSave={(updatedNote) =>
-                            updateWorkflow({
-                                id: row.workflowId,
-                                description: updatedNote,
-                            })
-                        }
-                        description={value}
-                    />
-                ) : null,
+            renderData: (value, row) => (
+                <WfoMetadataDescriptionField
+                    onSave={(updatedNote) =>
+                        updateWorkflow({
+                            id: row.workflowId,
+                            description: updatedNote,
+                        })
+                    }
+                    description={value}
+                />
+            ),
         },
         target: {
             columnType: ColumnType.DATA,

package/src/rtk/api.ts

@@ -61,6 +61,7 @@ export type UseQuery<T, U> = (
 type ExtraOptions = {
     baseQueryType?: BaseQueryTypes;
     apiName?: string;
+    paramsSerializer?: (params: Record<string, unknown>) => string;
 };
 
 export type WfoGraphqlError = {
@@ -131,7 +132,7 @@ export const catchErrorResponse = async (
 export const orchestratorApi = createApi({
     reducerPath: 'orchestratorApi',
     baseQuery: (args, api, extraOptions: ExtraOptions) => {
-        const { baseQueryType, apiName } = extraOptions || {};
+        const { baseQueryType, apiName, paramsSerializer } = extraOptions || {};
 
         const state = api.getState() as RootState;
         const { orchestratorApiBaseUrl, graphqlEndpointCore, authActive } =
@@ -148,6 +149,7 @@ export const orchestratorApi = createApi({
                         ? customApi.apiBaseUrl
                         : orchestratorApiBaseUrl,
                     prepareHeaders,
+                    paramsSerializer,
                     responseHandler: (response) =>
                         catchErrorResponse(response, authActive),
                 });

package/src/rtk/endpoints/deprecated/index.ts

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

package/src/rtk/endpoints/deprecated/surfSubscriptionDropdownOptions.ts

@@ -0,0 +1,53 @@
+import { Option } from '@/components/WfoForms/formFields/types';
+import { SUBSCRIPTION_DROPDOWN_OPTIONS_ENDPOINT } from '@/configuration';
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
+import { SurfSubscriptionDropdownOptionsFilterParams } from '@/types';
+
+// Custom endpoint used by the deprecated SubscriptionField formfield.
+// Has to be present in the library for now.
+// In the future, pydantic-forms will make it possible to add/override custom endpoints in the app implementation.
+
+/**
+ * Serialize URL parameters object to a string.
+ *
+ * @param params Object with url parameters, values can be scalar or array, i.e. {a: [1, 2], b: [3], c: 4}
+ * @returns the url parameter string, i.e. ?a=1&a=2&b=3&c=4
+ */
+export function toUrlParams(params: Record<string, unknown>): string {
+    const urlParams = new URLSearchParams();
+
+    Object.entries(params).forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+            value.forEach((v) => {
+                urlParams.append(key, String(v));
+            });
+        } else if (value !== undefined) {
+            urlParams.append(key, String(value));
+        }
+    });
+
+    return urlParams.toString();
+}
+
+const surfSubscriptionDropdownOptionsApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        getSurfSubscriptionDropdownOptions: build.query<
+            Option<string>[],
+            { params: SurfSubscriptionDropdownOptionsFilterParams }
+        >({
+            query: ({ params }) => ({
+                url: SUBSCRIPTION_DROPDOWN_OPTIONS_ENDPOINT,
+                params: params,
+            }),
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+                paramsSerializer: toUrlParams,
+            },
+        }),
+    }),
+});
+
+export const {
+    useGetSurfSubscriptionDropdownOptionsQuery,
+    useLazyGetSurfSubscriptionDropdownOptionsQuery,
+} = surfSubscriptionDropdownOptionsApi;

package/src/rtk/endpoints/index.ts

@@ -16,5 +16,6 @@ export * from './subscriptionDetail';
 export * from './subscriptionInUseByRelationsList';
 export * from './subscriptionList';
 export * from './subscriptionListSummary';
-export * from './subscriptionsDropdownOptions';
 export * from './forms';
+export * from './deprecated';
+export * from './formFields';