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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.2.6",
+    "version": "0.3.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",
@@ -9,17 +9,19 @@
         "lint": "eslint \"src/**/*.ts*\"",
         "dev": "yarn build -- --watch",
         "storybook": "storybook dev -p 6006",
-        "build-storybook": "storybook build",
-        "reset": "rm -rf node_modules"
+        "build-storybook": "storybook build"
     },
     "dependencies": {
         "@graphql-typed-document-node/core": "3.2.0",
-        "axios": "^0.24.0",
+        "axios": "^1.6.2",
         "invariant": "^2.2.4",
         "moment": "2.29.4",
         "moment-timezone": "^0.5.43",
-        "object-hash": "^2.1.1",
+        "object-hash": "^3.0.0",
         "react-select": "^5.8.0",
+        "react-diff-view": "^3.2.0",
+        "unidiff": "^1.0.4",
+        "prism-themes": "^1.9.0",
         "scroll-into-view": "^1.16.2",
         "uniforms": "^3.8.1",
         "uniforms-bridge-json-schema": "^3.8.1",
@@ -35,8 +37,8 @@
         "next-auth": "^4.23.1",
         "next-intl": "2.19.0",
         "next-query-params": "4.2.2",
-        "react": "^18.2.0",
-        "react-query": "3.39.3"
+        "react-query": "3.39.3",
+        "react": "^18.2.0"
     },
     "devDependencies": {
         "@orchestrator-ui/eslint-config-custom": "*",
@@ -44,20 +46,20 @@
         "@storybook/addon-essentials": "^7.2.1",
         "@storybook/addon-interactions": "^7.2.1",
         "@storybook/addon-links": "^7.2.1",
-        "@storybook/addon-onboarding": "^1.0.8",
+        "@storybook/addon-onboarding": "^1.0.10",
         "@storybook/blocks": "^7.2.1",
         "@storybook/nextjs": "^7.2.1",
         "@storybook/react": "^7.2.1",
         "@storybook/testing-library": "^0.2.0",
-        "@testing-library/jest-dom": "^5.16.1",
+        "@testing-library/jest-dom": "^6.1.5",
         "@testing-library/react": "^14.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^14.4.3",
         "@types/invariant": "^2.2.33",
         "@types/jest": "^29.5.8",
-        "@types/object-hash": "^2.1.0",
+        "@types/object-hash": "^3.0.6",
         "@types/scroll-into-view": "^1.16.3",
-        "esbuild": "^0.14.10",
+        "esbuild": "^0.19.9",
         "esbuild-jest": "^0.5.0",
         "jest": "^29.7.0",
         "jest-watch-typeahead": "^2.2.2",
@@ -65,7 +67,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "storybook": "^7.2.1",
-        "tsup": "^7.2.0",
+        "tsup": "^8.0.1",
         "uniforms-bridge-simple-schema-2": "^3.8.1"
     },
     "type": "module",

package/src/api/index.ts

@@ -15,8 +15,10 @@
 import { AxiosInstance } from 'axios';
 
 import {
+    ImsPort,
     IpBlock,
     IpPrefix,
+    NodeSubscription,
 } from '../components/WfoForms/formFields/surf/types';
 import { ProductDefinition } from '../types';
 import { getAxiosInstance } from './axios';
@@ -47,9 +49,6 @@ export class BaseApiClient {
             .then((res) => res.data)
             .catch((err) => {
                 if (showErrorDialog) {
-                    console.debug(
-                        `Show error dialog for GET ${path} returning ${err?.response?.status}`,
-                    );
                     setTimeout(() => {
                         throw err;
                     }, 250);
@@ -125,6 +124,17 @@ export class ApiClient extends ApiClientInterface {
             true,
         );
     };
+
+    resumeProcess = (processId: string, userInput: object[]) => {
+        return this.postPutJson(
+            `processes/${processId}/resume`,
+            userInput,
+            'put',
+            false,
+            false,
+        );
+    };
+
     products = (): Promise<ProductDefinition[]> => {
         return this.fetchJson<ProductDefinition[]>(PRODUCTS_ENDPOINT);
     };
@@ -163,6 +173,48 @@ export class ApiClient extends ApiClientInterface {
                 prefixlen,
         );
     };
+    getFreePortsByNodeSubscriptionIdAndSpeed = (
+        nodeSubscriptionId: string,
+        interfaceSpeed: number,
+        mode: string,
+    ): Promise<ImsPort[]> => {
+        return this.fetchJson(
+            `surf/ims/free_ports/${nodeSubscriptionId}/${interfaceSpeed}/${mode}`,
+        );
+    };
+
+    // legacy : for imsPort selector
+    subscriptions = (
+        tagList: string[] = [],
+        statusList: string[] = [],
+        productList: string[] = [],
+    ): Promise<NodeSubscription[]> => {
+        const filters = [];
+
+        if (tagList.length)
+            filters.push(`tags,${encodeURIComponent(tagList.join('-'))}`);
+        if (statusList.length)
+            filters.push(
+                `statuses,${encodeURIComponent(statusList.join('-'))}`,
+            );
+        if (productList.length)
+            filters.push(
+                `products,${encodeURIComponent(productList.join('-'))}`,
+            );
+
+        const params = new URLSearchParams();
+        if (filters.length) params.set('filter', filters.join(','));
+
+        return this.fetchJson(
+            `subscriptions/${filters.length ? '?' : ''}${params.toString()}`,
+        );
+    };
+
+    nodeSubscriptions = (
+        statusList: string[] = [],
+    ): Promise<NodeSubscription[]> => {
+        return this.subscriptions(['Node'], statusList);
+    };
 }
 
 export function getApiClient(apiEndPoint: string) {

package/src/components/WfoDiff/WfoDiff.tsx

@@ -0,0 +1,119 @@
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { Diff, Hunk, parseDiff, tokenize } from 'react-diff-view';
+import 'react-diff-view/style/index.css';
+import { DiffType } from 'react-diff-view/types/Diff';
+import { HunkData } from 'react-diff-view/types/utils/parse';
+
+import { useTranslations } from 'next-intl';
+// CSS for syntax highlight
+import 'prism-themes/themes/prism-ghcolors.min.css';
+import * as refractor from 'refractor';
+import { diffLines, formatLines } from 'unidiff';
+
+import {
+    EuiButtonIcon,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiSpacer,
+    EuiText,
+} from '@elastic/eui';
+
+const EMPTY_HUNKS: never[] = [];
+
+const SMALL_CONTEXT = 3;
+const FULL_CONTEXT = 1000000;
+
+interface DiffState {
+    type: DiffType;
+    hunks: HunkData[];
+}
+
+interface WfoDiffProps {
+    oldText: string;
+    newText: string;
+    syntax?: 'javascript' | 'python';
+}
+
+const WfoDiff: FC<WfoDiffProps> = ({ oldText, newText, syntax }) => {
+    const t = useTranslations('processes.delta');
+    const [showSplit, setShowSplit] = useState(true);
+    const [showFull, setShowFull] = useState(false);
+
+    const [{ type, hunks }, setDiff] = useState<DiffState>({
+        type: 'modify',
+        hunks: [],
+    });
+    const updateDiffText = useCallback(() => {
+        const diffText = formatLines(diffLines(oldText, newText), {
+            context: showFull ? FULL_CONTEXT : SMALL_CONTEXT,
+        });
+        const [diff] = parseDiff(diffText, { nearbySequences: 'zip' });
+        setDiff(diff);
+    }, [oldText, newText, setDiff, showFull]);
+
+    const tokens = useMemo(() => {
+        if (!hunks) {
+            return undefined;
+        }
+
+        const options = {
+            refractor,
+            highlight: !!syntax,
+            language: syntax ?? '',
+        };
+
+        try {
+            return tokenize(hunks, options);
+        } catch (ex) {
+            return undefined;
+        }
+    }, [hunks, syntax]);
+
+    useEffect(() => {
+        updateDiffText();
+    }, [updateDiffText, showFull]);
+
+    return (
+        <div>
+            <EuiFlexGroup gutterSize={'xs'}>
+                <EuiFlexItem grow={false}>
+                    <EuiText>
+                        <h3>{t('title')}</h3>
+                    </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                        size={'s'}
+                        iconType={
+                            showSplit
+                                ? 'continuityAboveBelow'
+                                : 'continuityWithin'
+                        }
+                        onClick={() => setShowSplit(!showSplit)}
+                    />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                        size={'s'}
+                        iconType={showFull ? 'fullScreenExit' : 'fullScreen'}
+                        onClick={() => setShowFull(!showFull)}
+                    />
+                </EuiFlexItem>
+            </EuiFlexGroup>
+
+            <EuiSpacer />
+            <Diff
+                viewType={showSplit ? 'split' : 'unified'}
+                diffType={type}
+                hunks={hunks || EMPTY_HUNKS}
+                tokens={tokens}
+            >
+                {(hunks) =>
+                    hunks.map((hunk) => <Hunk key={hunk.content} hunk={hunk} />)
+                }
+            </Diff>
+        </div>
+    );
+};
+
+export default WfoDiff;

package/src/components/WfoDiff/index.ts

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

package/src/components/WfoDiff/unidiff.d.ts

@@ -0,0 +1 @@
+declare module 'unidiff';

package/src/components/WfoForms/AutoFieldLoader.tsx

@@ -8,6 +8,7 @@ import {
     DateField,
     DividerField,
     ImsNodeIdField,
+    ImsPortIdField,
     IpNetworkField,
     LabelField,
     ListField,
@@ -22,6 +23,7 @@ import {
     SelectField,
     SubscriptionField,
     SubscriptionSummaryField,
+    SummaryField,
     TextField,
     TimestampField,
     VlanField,
@@ -43,7 +45,7 @@ export function autoFieldFunction(
         case Number:
             switch (format) {
                 case 'imsPortId': // Surf specific
-                    return NumField;
+                    return ImsPortIdField;
                 case 'imsNodeId': // Surf specific
                     return ImsNodeIdField;
                 case 'timestamp':
@@ -68,6 +70,8 @@ export function autoFieldFunction(
                     return LabelField;
                 case 'divider':
                     return DividerField;
+                case 'summary':
+                    return SummaryField;
                 case 'subscription':
                     return SubscriptionSummaryField;
                 case 'organisationId':

package/src/components/WfoForms/CreateForm.tsx

@@ -34,7 +34,6 @@ export function CreateForm(props: IProps) {
     const submit = useCallback(
         (userInputs: object[]) => {
             return apiClient.cimStartForm(formKey, userInputs).then((form) => {
-                console.log('Submit {formkey} =', formKey);
                 handleSubmit(form);
             });
         },
@@ -64,6 +63,7 @@ export function CreateForm(props: IProps) {
                     validSubmit={submit}
                     cancel={() => alert('cancelled')}
                     hasNext={hasNext ?? false}
+                    isTask={false}
                 />
             )}
         </div>

package/src/components/WfoForms/UserInputForm.tsx

@@ -34,11 +34,11 @@ import {
     EuiHorizontalRule,
 } from '@elastic/eui';
 
-import ConfirmationDialogContext from '../../contexts/ConfirmationDialogProvider';
-import { ConfirmDialogActions } from '../../contexts/ConfirmationDialogProvider';
-import { useOrchestratorTheme } from '../../hooks';
-import { WfoPlayFill } from '../../icons';
-import { ValidationError } from '../../types/forms';
+import { ConfirmDialogActions, ConfirmationDialogContext } from '@/contexts';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoPlayFill } from '@/icons';
+import { ValidationError } from '@/types/forms';
+
 import { autoFieldFunction } from './AutoFieldLoader';
 import AutoFields from './AutoFields';
 import { userInputFormStyling } from './UserInputFormStyling';
@@ -52,11 +52,13 @@ interface IProps {
     router: NextRouter;
     stepUserInput: JSONSchema6;
     validSubmit: (userInput: { [index: string]: unknown }) => Promise<unknown>;
-    cancel: ConfirmDialogActions['closeConfirmDialog'];
+    cancel?: ConfirmDialogActions['closeConfirmDialog'];
     previous: ConfirmDialogActions['closeConfirmDialog'];
     hasNext?: boolean;
     hasPrev?: boolean;
     userInput: object;
+    isTask?: boolean;
+    isResuming?: boolean;
 }
 
 interface Buttons {
@@ -116,6 +118,18 @@ function resolveRef(reference: string, schema: Record<string, any>) {
 }
 
 class CustomTitleJSONSchemaBridge extends JSONSchemaBridge {
+    t: any;
+
+    constructor(schema: JSONSchema6, validator: any, t: any) {
+        super(schema, validator);
+        this.t = t;
+    }
+
+    translationKeyExists(key: string): boolean {
+        const translation = this.t(key);
+        return translation !== key ? true : false;
+    }
+
     // This a copy of the super class function to provide a fix for https://github.com/vazco/uniforms/issues/863
     getField(name: string) {
         return joinName(null, name).reduce(
@@ -246,12 +260,11 @@ class CustomTitleJSONSchemaBridge extends JSONSchemaBridge {
     getProps(name: string) {
         const props = super.getProps(name);
 
-        // not translated labels for now
-        // const translation_key = name.replace(/\.\d+(.\d+)*/, "_fields");
-        // const translation_intl_key = `forms.fields.${translation_key}`;
-        // const translation = intl.formatMessage({ id: translation_intl_key, defaultMessage: translation_intl_key });
-        // let label = translation !== translation_intl_key ? translation : props.label;
-        let label = props.label;
+        const translationKey = name.replace(/\.\d+(.\d+)*/, '_fields'); // This is evaluates to name or name_fields
+        const nextIntlKey = `pydanticForms.backendTranslations.${translationKey}`;
+        let label = this.translationKeyExists(nextIntlKey)
+            ? this.t(nextIntlKey)
+            : props.label;
 
         // Mark required inputs. Might be delegated to the form components itself in the future.
         if (
@@ -264,9 +277,11 @@ class CustomTitleJSONSchemaBridge extends JSONSchemaBridge {
         }
 
         props.label = label;
-        // not translated labels for now
-        // props.description = intl.formatMessage({ id: `forms.fields.${translation_key}_info`, defaultMessage: " " }); // Default must contain a space as not to be Falsy
-        props.description = '';
+
+        const descriptionTranslationKey = `pydanticForms.backendTranslations.${translationKey}_info`;
+        props.description = this.translationKeyExists(descriptionTranslationKey)
+            ? this.t(descriptionTranslationKey)
+            : ' ';
 
         props.id = `input-${name}`;
 
@@ -369,11 +384,13 @@ function UserInputForm({
     router,
     stepUserInput,
     validSubmit,
-    cancel,
+    cancel = () => {},
     previous = () => {},
     hasNext = false,
     hasPrev = false,
     userInput,
+    isTask = false,
+    isResuming = false,
 }: IProps) {
     const t = useTranslations('pydanticForms.userInputForm');
     const { theme } = useOrchestratorTheme();
@@ -382,13 +399,17 @@ function UserInputForm({
     const [nrOfValidationErrors, setNrOfValidationErrors] = useState<number>(0);
     const [rootErrors, setRootErrors] = useState<string[]>([]);
 
-    const openDialog = () => {
-        showConfirmDialog({
-            question: '',
-            confirmAction: () => {},
-            cancelAction: cancel,
-            leavePage: true,
-        });
+    const openLeavePageDialog = (
+        leaveAction: ConfirmDialogActions['closeConfirmDialog'],
+        leaveQuestion?: string,
+    ) => {
+        return () =>
+            showConfirmDialog({
+                question: leaveQuestion || '',
+                confirmAction: () => {},
+                cancelAction: leaveAction,
+                leavePage: true,
+            });
     };
 
     const submit = async (userInput: any = {}) => {
@@ -448,11 +469,6 @@ function UserInputForm({
         question: string | undefined,
         confirm: ConfirmDialogActions['closeConfirmDialog'],
     ) => {
-        console.log(e, question, confirm);
-        alert('TODO: Implement on buttonClick cancel with confirm modal');
-        // https://github.com/workfloworchestrator/orchestrator-ui/issues/325
-
-        /*
         if (!question) {
             return confirm(e);
         }
@@ -463,7 +479,6 @@ function UserInputForm({
             cancelAction: () => {},
             leavePage: false,
         });
-        */
     };
 
     const renderButtons = (buttons: Buttons) => {
@@ -473,15 +488,23 @@ function UserInputForm({
                 fill
                 color={buttons.previous.color ?? 'primary'}
                 onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                    onButtonClick(e, buttons.previous.dialog, previous);
+                    onButtonClick(
+                        e,
+                        buttons.previous.dialog,
+                        openLeavePageDialog(previous, t('previousQuestion')),
+                    );
                 }}
             >
                 {buttons.previous.text ?? t('previous')}
             </EuiButton>
-        ) : (
+        ) : !isResuming ? (
             <div
                 onClick={(e) => {
-                    onButtonClick(e, buttons.previous.dialog, openDialog);
+                    onButtonClick(
+                        e,
+                        buttons.previous.dialog,
+                        openLeavePageDialog(cancel),
+                    );
                 }}
                 css={{
                     cursor: 'pointer',
@@ -492,10 +515,19 @@ function UserInputForm({
                     alignItems: 'center',
                 }}
             >
-                {buttons.previous.text ?? t('cancelProcess')}
+                {buttons.previous.text ?? t('cancel')}
             </div>
+        ) : (
+            <div></div>
         );
 
+        const nextButtonTranslationKey: string = (() => {
+            if (isResuming) {
+                return isTask ? 'resumeTask' : 'resumeWorkflow';
+            }
+            return isTask ? 'startTask' : 'startWorkflow';
+        })();
+
         const nextButton = hasNext ? (
             <EuiButton
                 id="button-next-form-submit"
@@ -518,7 +550,7 @@ function UserInputForm({
                 iconType={() => <WfoPlayFill color="#FFF" />}
                 iconSide="right"
             >
-                {buttons.next.text ?? t('runProcess')}
+                {buttons.next.text ?? t(nextButtonTranslationKey)}
             </EuiButton>
         );
 
@@ -534,9 +566,12 @@ function UserInputForm({
         );
     };
 
-    //const prefilledForm = fillPreselection(stepUserInput, location.search);
     const prefilledForm = fillPreselection(stepUserInput, router);
-    const bridge = new CustomTitleJSONSchemaBridge(prefilledForm, () => {});
+    const bridge = new CustomTitleJSONSchemaBridge(
+        prefilledForm,
+        () => {},
+        useTranslations(),
+    );
     const AutoFieldProvider = AutoField.componentDetectorContext.Provider;
 
     // Get the Button config from the form default values, or default to empty config
@@ -570,13 +605,10 @@ function UserInputForm({
                             {nrOfValidationErrors > 0 && (
                                 <section className="form-errors">
                                     <em className="error backend-validation-metadata">
-                                        {t(
-                                            'input_fields_have_validation_errors',
-                                            {
-                                                nrOfValidationErrors:
-                                                    nrOfValidationErrors,
-                                            },
-                                        )}
+                                        {t('inputFieldsHaveValidationErrors', {
+                                            nrOfValidationErrors:
+                                                nrOfValidationErrors,
+                                        })}
                                     </em>
                                 </section>
                             )}

package/src/components/WfoForms/UserInputFormWizard.tsx

@@ -17,8 +17,9 @@ import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import hash from 'object-hash';
 
-import { ConfirmDialogActions } from '../../contexts/ConfirmationDialogProvider';
-import { FormNotCompleteResponse, InputForm } from '../../types/forms';
+import { ConfirmDialogActions } from '@/contexts';
+import { FormNotCompleteResponse, InputForm } from '@/types/forms';
+
 import UserInputForm from './UserInputForm';
 import { useAxiosApiClient } from './useAxiosApiClient';
 
@@ -30,8 +31,10 @@ interface Form {
 interface UserInputFormWizardProps {
     stepUserInput: InputForm;
     validSubmit: (processInput: object[]) => Promise<unknown>;
-    cancel: () => void;
+    cancel?: () => void;
+    isTask: boolean;
     hasNext?: boolean;
+    isResuming?: boolean;
 }
 
 function stop(e: React.SyntheticEvent) {
@@ -41,11 +44,13 @@ function stop(e: React.SyntheticEvent) {
     }
 }
 
-function UserInputFormWizard({
+export function UserInputFormWizard({
     hasNext = false,
     stepUserInput,
     validSubmit,
     cancel,
+    isTask,
+    isResuming = false,
 }: UserInputFormWizardProps) {
     const router = useRouter();
     const apiClient = useAxiosApiClient();
@@ -113,6 +118,8 @@ function UserInputFormWizard({
             hasPrev={forms.length > 1}
             cancel={cancel}
             userInput={currentUserInput}
+            isTask={isTask}
+            isResuming={isResuming}
         />
     );
 }

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

@@ -71,11 +71,13 @@ function Accept({
     data,
     ...props
 }: AcceptFieldProps) {
-    const t = useTranslations('pydanticForms.widgets');
+    const t = useTranslations();
     const { acceptFieldStyle } = useWithOrchestratorTheme(getStyles);
 
     const legacy = !data;
-    const i18nBaseKey = data ? `forms.fields.${name}_accept` : 'forms.fields';
+    const i18nBaseKey = data
+        ? `pydanticForms.backendTranslations.${name}_accept`
+        : 'pydanticForms.backendTranslations';
 
     data = data ?? [
         [name, 'label', {}],
@@ -111,8 +113,8 @@ function Accept({
                 state.skip
                     ? 'SKIPPED'
                     : state.allChecked
-                    ? 'ACCEPTED'
-                    : 'INCOMPLETE',
+                      ? 'ACCEPTED'
+                      : 'INCOMPLETE',
             );
 
             return { ...state };
@@ -128,6 +130,7 @@ function Accept({
             >
                 {data.map((entry, index) => {
                     const label = t(`${i18nBaseKey}.${entry[0]}`, entry[2]);
+
                     switch (entry[1]) {
                         case 'label':
                             return (
@@ -170,7 +173,7 @@ function Accept({
                                     key={index}
                                     className="euiFormLabel euiFormRow__label warning"
                                 >
-                                    {label}
+                                    {label}: <br />
                                 </label>
                             );
                         case 'skip':

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

@@ -57,7 +57,7 @@ function Bool({
                         disabled={disabled}
                         id={id}
                         name={name}
-                        label={name}
+                        label={label}
                         onChange={() =>
                             !disabled && !readOnly && onChange(!value)
                         }