@wise/dynamic-flow-client 3.11.3 → 3.11.4-experiment-node20-aa45bc2

package/build/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.js

@@ -0,0 +1,89 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InlineAlert } from '@transferwise/components';
+import { formatDate } from '@transferwise/formatting';
+import { useIntl } from 'react-intl';
+import validationArrayMessages from '../../../common/messages/validation.array.messages';
+import controlFeedbackMessages from '../../../common/messages/validation.messages';
+function ControlFeedback(props) {
+    var _a;
+    var defaultValidationMessages = useDefaultValidationMessages(props.schema);
+    var validationMessages = __assign(__assign(__assign({}, defaultValidationMessages), props.validationMessages), props.schema.validationMessages);
+    var isErrorVisible = (props.submitted || !props.changed) && Boolean(props.errors);
+    var isValidationVisible = !isErrorVisible &&
+        (props.submitted || (props.changed && props.blurred)) &&
+        Boolean((_a = props.validations) === null || _a === void 0 ? void 0 : _a.length);
+    var isDescriptionVisible = props.schema.type !== 'boolean' &&
+        props.schema.description &&
+        !isErrorVisible &&
+        !isValidationVisible;
+    var hasInfoMessage = Boolean(props.infoMessage);
+    return (_jsxs("div", { id: props.id, children: [isErrorVisible ? _jsx(InlineAlert, { type: "error", children: props.errors }) : null, isValidationVisible ? (_jsx(InlineAlert, { type: "error", children: props.validations.map(function (validation) { return (_jsx("div", { children: validationMessages[validation] }, validation)); }) })) : null, (isDescriptionVisible || hasInfoMessage) && (_jsxs(InlineAlert, { type: "info", children: [isDescriptionVisible && _jsx("div", { children: props.schema.description }), hasInfoMessage && _jsx("div", { children: props.infoMessage })] }))] }));
+}
+ControlFeedback.defaultProps = {
+    errors: '',
+    validations: [],
+    validationMessages: {},
+    validationAsyncSuccessMessage: null,
+};
+// TODO: avoid typre assertions in this function
+function useDefaultValidationMessages(schema) {
+    var _a = useIntl(), formatMessage = _a.formatMessage, locale = _a.locale;
+    var formattedMessages = {
+        type: formatMessage(controlFeedbackMessages.type),
+        minimum: formatMessage(controlFeedbackMessages.minimum, {
+            minimum: schema.minimum,
+        }),
+        maximum: formatMessage(controlFeedbackMessages.maximum, {
+            maximum: schema.maximum,
+        }),
+        minLength: formatMessage(controlFeedbackMessages.minLength, {
+            minLength: schema.minLength,
+        }),
+        maxLength: formatMessage(controlFeedbackMessages.maxLength, {
+            maxLength: schema.maxLength,
+        }),
+        minItems: formatMessage(validationArrayMessages.minItemsError, {
+            minItems: schema.minItems,
+        }),
+        maxItems: formatMessage(validationArrayMessages.maxItemsError, {
+            maxItems: schema.maxItems,
+        }),
+        pattern: formatMessage(controlFeedbackMessages.pattern),
+        required: formatMessage(controlFeedbackMessages.required),
+    };
+    if (schema.format === 'date') {
+        var dateOverrides = {
+            pattern: formatMessage(controlFeedbackMessages.patternDate),
+            minimum: schema.minimum
+                ? formatMessage(controlFeedbackMessages.minimumDate, {
+                    minimum: formatDate(new Date(schema.minimum), locale, {
+                        timeZone: 'UTC',
+                        dateStyle: 'long',
+                    }),
+                })
+                : undefined,
+            maximum: schema.maximum
+                ? formatMessage(controlFeedbackMessages.maximumDate, {
+                    maximum: formatDate(new Date(schema.maximum), locale, {
+                        timeZone: 'UTC',
+                        dateStyle: 'long',
+                    }),
+                })
+                : undefined,
+        };
+        return __assign(__assign({}, formattedMessages), dateOverrides);
+    }
+    return formattedMessages;
+}
+export default ControlFeedback;

package/build/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.spec.js

@@ -0,0 +1,182 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InlineAlert, Provider } from '@transferwise/components';
+import { mount } from 'enzyme';
+import { getI18n } from '../../test-utils';
+import ControlFeedback from '.';
+describe('Given a component for rendering feedback next to controls', function () {
+    var component;
+    var props;
+    var states;
+    var schema = {
+        type: 'string',
+        help: {
+            markdown: 'some markdown',
+        },
+        validationMessages: {
+            minLength: 'Custom minLength message',
+            maxLength: 'Unshown validation message',
+        },
+    };
+    var changed;
+    var focused;
+    var blurred;
+    var submitted;
+    var errors;
+    var validations = ['minLength'];
+    var validationMessages = {
+        minLength: 'Default minLength message',
+    };
+    beforeEach(function () {
+        changed = false;
+        focused = false;
+        blurred = false;
+        submitted = false;
+        errors = '';
+        props = { schema: schema, validations: validations, validationMessages: validationMessages };
+        states = { changed: changed, focused: focused, blurred: blurred, submitted: submitted, errors: errors };
+        component = mount(_jsx(ControlFeedback, __assign({}, states, props)), {
+            wrappingComponent: Provider,
+            wrappingComponentProps: { i18n: getI18n() },
+        });
+    });
+    describe('when initialised without error', function () {
+        it('should not show any alerts', function () {
+            expect(component.find(InlineAlert)).toHaveLength(0);
+        });
+    });
+    describe('when initialised with an error', function () {
+        beforeEach(function () {
+            component.setProps({ errors: 'There was an external error' });
+        });
+        it('should show an alert', function () {
+            var alert = component.find(InlineAlert);
+            expect(alert).toHaveLength(1);
+            expect(alert.prop('type')).toBe('error');
+            expect(alert.contains('There was an external error')).toBe(true);
+        });
+    });
+    describe('when initialised with an error and description', function () {
+        beforeEach(function () {
+            component.setProps({
+                schema: __assign(__assign({}, schema), { description: 'some description' }),
+                errors: 'There was an external error',
+            });
+        });
+        it('should show the error and not the description', function () {
+            var alert = component.find(InlineAlert);
+            expect(alert).toHaveLength(1);
+            expect(alert.prop('type')).toBe('error');
+            expect(alert.contains('There was an external error')).toBe(true);
+            expect(component.find(InlineAlert).contains('some description')).toBe(false);
+        });
+    });
+    describe('when given an error but then changed', function () {
+        beforeEach(function () {
+            component.setProps({
+                errors: 'There was an external error',
+                changed: true,
+            });
+        });
+        it('should not show the original error', function () {
+            expect(component.find(InlineAlert)).toHaveLength(0);
+        });
+    });
+    describe('when given an external error and validation errors', function () {
+        beforeEach(function () {
+            component.setProps({
+                submitted: true,
+                errors: 'There was an external error',
+                validations: ['minLength'],
+            });
+        });
+        it('should only show the external error', function () {
+            var alert = component.find(InlineAlert);
+            expect(alert.text()).toBe('There was an external error');
+        });
+    });
+    describe('when a description is provided', function () {
+        beforeEach(function () {
+            component.setProps({ schema: __assign(__assign({}, schema), { description: 'some description' }) });
+        });
+        it('should show an alert for description', function () {
+            var alert = component.find(InlineAlert);
+            expect(alert).toHaveLength(1);
+            expect(alert.prop('type')).toBe('info');
+        });
+        it('should show the supplied message', function () {
+            expect(component.find(InlineAlert).contains('some description')).toBe(true);
+        });
+    });
+    describe('when blurred and changed', function () {
+        beforeEach(function () {
+            component.setProps({ blurred: true, changed: true });
+        });
+        it('should show a validation alert', function () {
+            var alert = component.find(InlineAlert);
+            expect(alert).toHaveLength(1);
+            expect(alert.prop('type')).toBe('error');
+        });
+        it('should show validation messages for validation keys', function () {
+            expect(component.find(InlineAlert).contains(schema.validationMessages.minLength)).toBe(true);
+        });
+        it('should not show validation messages for missing validation keys', function () {
+            expect(component.find(InlineAlert).contains(schema.validationMessages.maxLength)).toBe(false);
+        });
+    });
+    describe('when focused, blurred and changed', function () {
+        beforeEach(function () {
+            component.setProps({ focused: true, blurred: true, changed: true });
+        });
+        it('should show a validation alert', function () {
+            var alert = component.find(InlineAlert);
+            expect(alert).toHaveLength(1);
+            expect(alert.prop('type')).toBe('error');
+        });
+        it('should show validation messages for validation keys', function () {
+            expect(component.find(InlineAlert).contains(schema.validationMessages.minLength)).toBe(true);
+        });
+        it('should not show help messages', function () {
+            expect(component.find(InlineAlert).contains(schema.description)).toBe(false);
+        });
+    });
+    describe('when submitted', function () {
+        beforeEach(function () {
+            component.setProps({ submitted: true });
+        });
+        it('should show a validation alert', function () {
+            var alert = component.find(InlineAlert);
+            expect(alert).toHaveLength(1);
+            expect(alert.prop('type')).toBe('error');
+        });
+        it('should show validation messages for validation keys', function () {
+            expect(component.find(InlineAlert).contains(schema.validationMessages.minLength)).toBe(true);
+        });
+        it('should not show validation messages for missing validation keys', function () {
+            expect(component.find(InlineAlert).contains(schema.validationMessages.maxLength)).toBe(false);
+        });
+    });
+    describe('when infoMessage is supplied', function () {
+        beforeEach(function () {
+            component.setProps({ infoMessage: 'some message' });
+        });
+        it('should render the validation async success message as an info InLineAlert', function () {
+            var alert = component.find(InlineAlert);
+            expect(alert).toHaveLength(1);
+            expect(alert.prop('type')).toBe('info');
+        });
+        it('should render the validation async success message', function () {
+            expect(component.find(InlineAlert).contains('some message')).toBe(true);
+        });
+    });
+});

package/build/legacy/jsonSchemaForm/controlFeedback/index.js

@@ -0,0 +1 @@
+export { default } from './ControlFeedback';

package/build/legacy/jsonSchemaForm/genericSchema/GenericSchema.js

@@ -0,0 +1,85 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { getSchemaType, isBasicError, isNullableBasicModel, isNullableObjectModel, isNullableArrayModel, isNullableStringModel, isObjectModel, isAllOfSchema, isOneOfSchema, isObjectSchema, isArraySchema, isPersistAsyncSchema, isValidationAsyncSchema, isBasicSchema, isOneOfObjectSchema, } from '../../common/utils';
+import AllOfSchema from '../allOfSchema';
+import ArraySchema from '../arrayTypeSchema';
+import BasicTypeSchema from '../basicTypeSchema';
+import ObjectSchema from '../objectSchema';
+import OneOfSchema from '../oneOfSchema';
+import PersistAsyncSchema from '../persistAsyncSchema';
+import PromotedOneOfSchema from '../promotedOneOfSchema';
+import ReadOnlySchema from '../readOnlySchema';
+import ValidationAsyncSchema from '../validationAsyncSchema';
+import { useLogger } from '../../common/contexts';
+function GenericSchemaForm(props) {
+    var schema = props.schema, _a = props.model, model = _a === void 0 ? null : _a, _b = props.errors, errors = _b === void 0 ? null : _b, _c = props.hideTitle, hideTitle = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d;
+    var schemaProps = __assign(__assign({}, props), { model: model, errors: errors, hideTitle: hideTitle, disabled: disabled });
+    var type = getSchemaType(schema);
+    var log = useLogger();
+    useEffect(function () {
+        if (!isValidGenericSchema(schema, model, errors)) {
+            log.error('Invalid schema or model', "Schema of type ".concat(type || 'undefined', " requested, but schema did not pass validation."));
+        }
+    }, [JSON.stringify(schema), JSON.stringify(model), JSON.stringify(errors), type, log]);
+    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
+    switch (type) {
+        case 'readOnly':
+            return _jsx(ReadOnlySchema, __assign({}, schemaProps));
+        case 'persistAsync':
+            return _jsx(PersistAsyncSchema, __assign({}, schemaProps));
+        case 'validationAsync':
+            return _jsx(ValidationAsyncSchema, __assign({}, schemaProps));
+        case 'basic': {
+            var basicTypeProps = __assign({ infoMessage: null }, schemaProps);
+            return _jsx(BasicTypeSchema, __assign({}, basicTypeProps));
+        }
+        case 'object':
+            return _createElement(ObjectSchema, __assign({}, schemaProps, { key: JSON.stringify(schema) }));
+        case 'array':
+            return _jsx(ArraySchema, __assign({}, schemaProps));
+        case 'promotedOneOf':
+            return _jsx(PromotedOneOfSchema, __assign({}, schemaProps));
+        case 'oneOf':
+            return _jsx(OneOfSchema, __assign({}, schemaProps));
+        case 'allOf':
+            return _jsx(AllOfSchema, __assign({}, schemaProps));
+    }
+    return _jsx(_Fragment, {});
+}
+export default GenericSchemaForm;
+// TODO: MC-3224 - We want to implement proper schema validation
+var isValidGenericSchema = function (schema, model, errors) {
+    var type = getSchemaType(schema);
+    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
+    switch (type) {
+        case 'persistAsync':
+            return isPersistAsyncSchema(schema) && isNullableStringModel(model) && isBasicError(errors);
+        case 'validationAsync':
+            return isValidationAsyncSchema(schema) && isNullableBasicModel(model) && isBasicError(errors);
+        case 'basic':
+            return isBasicSchema(schema) && isNullableBasicModel(model) && isBasicError(errors);
+        case 'object':
+            return isObjectSchema(schema) && isNullableObjectModel(model);
+        case 'array':
+            return isArraySchema(schema) && isNullableArrayModel(model) && isBasicError(errors);
+        case 'promotedOneOf':
+            return isOneOfObjectSchema(schema) && isNullableObjectModel(model);
+        case 'oneOf':
+            return isOneOfSchema(schema);
+        case 'allOf':
+            return isAllOfSchema(schema) && isObjectModel(model);
+    }
+    return false;
+};

package/build/legacy/jsonSchemaForm/genericSchema/GenericSchema.rtl.spec.js

@@ -0,0 +1,55 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as loggingModule from '../../common/contexts/logContext/LogContext';
+import { mockUseLogger, renderWithProviders } from '../../test-utils';
+import GenericSchemaForm from './GenericSchema';
+var mockLogger = mockUseLogger();
+jest.spyOn(loggingModule, 'useLogger').mockImplementation(function () { return mockLogger; });
+beforeEach(function () {
+    Object.values(mockLogger).forEach(function (logger) { return logger.mockClear(); });
+});
+describe('GenericSchema', function () {
+    var getProps = function () { return ({
+        schema: { type: 'string' },
+        model: null,
+        errors: null,
+        submitted: false,
+        onChange: jest.fn(),
+        onPersistAsync: jest.fn(),
+    }); };
+    describe('when an invalid schema-model combination is supplied', function () {
+        var getSchema = function () { return ({
+            $id: 'id',
+            type: 'string',
+            title: 'String Schema A',
+        }); };
+        var getModel = function () { return ({ name: 'Bob' }); };
+        it('logs an error', function () {
+            var consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
+            renderWithProviders(_jsx(GenericSchemaForm, __assign({}, getProps(), { schema: getSchema(), model: getModel() })));
+            expect(mockLogger.error).toHaveBeenCalledWith('Invalid schema or model', expect.anything());
+            expect(mockLogger.error).toHaveBeenCalledTimes(1);
+            consoleWarnSpy.mockRestore();
+        });
+        describe('when the component is re-rendered with an identical schema', function () {
+            it('only logs an error one time', function () {
+                var consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
+                var rerender = renderWithProviders(_jsx(GenericSchemaForm, __assign({}, getProps(), { schema: getSchema(), model: getModel() }))).rerender;
+                expect(mockLogger.error).toHaveBeenCalledTimes(1);
+                rerender(_jsx(GenericSchemaForm, __assign({}, getProps(), { schema: getSchema(), model: getModel() })));
+                expect(mockLogger.error).toHaveBeenCalledTimes(1);
+                consoleWarnSpy.mockRestore();
+            });
+        });
+    });
+});