@contentful/field-editor-validation-errors 1.1.11 → 1.3.0

package/dist/cjs/ValidationErrors.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ValidationErrors", {
+    enumerable: true,
+    get: function() {
+        return ValidationErrors;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _styles = _interop_require_wildcard(require("./styles"));
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function UniquenessError(props) {
+    const [state, setState] = _react.useState({
+        loading: true,
+        entries: []
+    });
+    const contentTypesById = _react.useMemo(()=>props.space.getCachedContentTypes().reduce((prev, ct)=>({
+                ...prev,
+                [ct.sys.id]: ct
+            }), {}), [
+        props.space
+    ]);
+    const getTitle = _react.useCallback((entry)=>_fieldeditorshared.entityHelpers.getEntryTitle({
+            entry,
+            defaultTitle: 'Untitled',
+            localeCode: props.localeCode,
+            defaultLocaleCode: props.defaultLocaleCode,
+            contentType: contentTypesById[entry.sys.contentType.sys.id]
+        }), [
+        props.localeCode,
+        props.defaultLocaleCode,
+        contentTypesById
+    ]);
+    let conflicting = [];
+    if ('conflicting' in props.error) {
+        conflicting = props.error.conflicting;
+    }
+    _react.useEffect(()=>{
+        const entryIds = state.entries.map((entry)=>entry.id);
+        const conflictIds = conflicting.map((entry)=>entry.sys.id);
+        if (conflictIds.every((id)=>entryIds.includes(id))) {
+            return;
+        }
+        setState((state)=>({
+                ...state,
+                loading: true
+            }));
+        const query = {
+            'sys.id[in]': conflictIds.join(',')
+        };
+        props.space.getEntries(query).then(({ items  })=>{
+            const entries = items.map((entry)=>({
+                    id: entry.sys.id,
+                    title: getTitle(entry),
+                    href: props.getEntryURL(entry)
+                }));
+            setState({
+                loading: false,
+                entries
+            });
+        });
+    }, [
+        getTitle,
+        state.entries,
+        conflicting,
+        props.space.getEntries,
+        props.getEntryURL
+    ]);
+    return _react.createElement(_f36components.List, {
+        className: _styles.errorList,
+        testId: "validation-errors-uniqueness"
+    }, _react.createElement(_f36components.ListItem, {
+        className: _styles.entryLink
+    }, state.loading ? _react.createElement("div", null, "Loading title for conflicting entry…") : state.entries.map((entry)=>_react.createElement(_f36components.TextLink, {
+            key: entry.id,
+            href: entry.href,
+            icon: _react.createElement(_f36icons.ExternalLinkIcon, null),
+            alignIcon: "end",
+            variant: "negative",
+            target: "_blank",
+            rel: "noopener noreferrer"
+        }, entry.title))));
+}
+function ValidationErrors(props) {
+    const [errors, setErrors] = _react.useState([]);
+    _react.useEffect(()=>{
+        const onErrors = (errors)=>{
+            setErrors(errors || []);
+        };
+        return props.field.onSchemaErrorsChanged(onErrors);
+    }, [
+        props.field
+    ]);
+    if (errors.length === 0) {
+        return null;
+    }
+    return _react.createElement(_f36components.List, {
+        className: _styles.errorList,
+        testId: "validation-errors"
+    }, errors.map((error, index)=>{
+        return _react.createElement("li", {
+            key: index,
+            role: "status",
+            "aria-roledescription": "field-locale-schema",
+            "data-error-code": `entry.schema.${error.name}`,
+            className: _styles.errorItem
+        }, _react.createElement(_f36icons.InfoCircleIcon, {
+            variant: "negative"
+        }), _react.createElement("div", {
+            className: _styles.errorMessage
+        }, error.message, error.name === 'unique' && _react.createElement(UniquenessError, {
+            error: error,
+            space: props.space,
+            localeCode: props.field.locale,
+            defaultLocaleCode: props.locales.default,
+            getEntryURL: props.getEntryURL
+        })));
+    }));
+}

package/dist/cjs/ValidationErrors.test.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+require("@testing-library/jest-dom/extend-expect");
+const _fieldeditortestutils = _interop_require_wildcard(require("@contentful/field-editor-test-utils"));
+const _react1 = require("@testing-library/react");
+const _ValidationErrors = require("./ValidationErrors");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+const displayField = 'my-title';
+const contentTypeId = 'my-content-type';
+const getCachedContentTypes = ()=>[
+        {
+            displayField,
+            fields: [
+                {
+                    id: displayField
+                }
+            ],
+            sys: {
+                id: 'my-content-type'
+            }
+        }
+    ];
+const createEntry = (id)=>({
+        fields: {
+            [displayField]: {
+                'en-US': 'entry-title-for-' + id
+            }
+        },
+        sys: {
+            id,
+            contentType: {
+                sys: {
+                    id: contentTypeId
+                }
+            }
+        }
+    });
+describe('ValidationErrors', ()=>{
+    afterEach(_react1.cleanup);
+    it('renders without crashing', ()=>{
+        const [field] = _fieldeditortestutils.createFakeFieldAPI();
+        const { container  } = (0, _react1.render)(_react.createElement(_ValidationErrors.ValidationErrors, {
+            field: field,
+            space: _fieldeditortestutils.createFakeSpaceAPI(),
+            locales: _fieldeditortestutils.createFakeLocalesAPI(),
+            getEntryURL: (entry)=>`url.${entry.sys.id}`
+        }));
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('should render the list of error messages', async ()=>{
+        const errors = [
+            {
+                name: 'test-error',
+                message: 'The input is invalid',
+                path: []
+            }
+        ];
+        const [field, emitter] = _fieldeditortestutils.createFakeFieldAPI();
+        const { findByText  } = (0, _react1.render)(_react.createElement(_ValidationErrors.ValidationErrors, {
+            field: field,
+            space: _fieldeditortestutils.createFakeSpaceAPI(),
+            locales: _fieldeditortestutils.createFakeLocalesAPI(),
+            getEntryURL: (entry)=>`url.${entry.sys.id}`
+        }));
+        (0, _react1.act)(()=>{
+            emitter.emit('onSchemaErrorsChanged', errors);
+        });
+        await Promise.all(errors.map((e)=>{
+            if (e.message) {
+                return findByText(e.message);
+            } else {
+                return Promise.reject();
+            }
+        }));
+    });
+    it('should fetch & render links to duplicated entries', async ()=>{
+        const ids = [
+            'id-0',
+            'id-1',
+            'id-2'
+        ];
+        const errors = [
+            {
+                name: 'unique',
+                message: 'entry is duplicated',
+                conflicting: ids.map((id)=>({
+                        sys: {
+                            id,
+                            type: 'Link',
+                            linkType: 'Entry'
+                        }
+                    })),
+                path: []
+            }
+        ];
+        const [field, emitter] = _fieldeditortestutils.createFakeFieldAPI();
+        const space = _fieldeditortestutils.createFakeSpaceAPI((api)=>({
+                ...api,
+                getCachedContentTypes,
+                getEntries: jest.fn().mockResolvedValue({
+                    items: ids.map(createEntry)
+                })
+            }));
+        const { findByText , findAllByTestId  } = (0, _react1.render)(_react.createElement(_ValidationErrors.ValidationErrors, {
+            field: field,
+            space: space,
+            locales: _fieldeditortestutils.createFakeLocalesAPI(),
+            getEntryURL: (entry)=>`url.${entry.sys.id}`
+        }));
+        (0, _react1.act)(()=>{
+            emitter.emit('onSchemaErrorsChanged', errors);
+        });
+        await findByText(/Loading title for conflicting entry/);
+        const links = await findAllByTestId('cf-ui-text-link');
+        links.forEach((link, index)=>{
+            expect(link).toHaveAttribute('href', 'url.id-' + index);
+            expect(link).toHaveTextContent('entry-title-for-id-' + index);
+        });
+    });
+});

package/dist/cjs/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ValidationErrors", {
+    enumerable: true,
+    get: function() {
+        return _ValidationErrors.ValidationErrors;
+    }
+});
+const _ValidationErrors = require("./ValidationErrors");

package/dist/cjs/styles.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    errorList: function() {
+        return errorList;
+    },
+    errorMessage: function() {
+        return errorMessage;
+    },
+    errorItem: function() {
+        return errorItem;
+    },
+    entryLink: function() {
+        return entryLink;
+    }
+});
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const errorList = (0, _emotion.css)({
+    padding: 0,
+    wordWrap: 'break-word',
+    marginTop: _f36tokens.default.spacingS,
+    color: _f36tokens.default.red500,
+    listStyleType: 'none'
+});
+const errorMessage = (0, _emotion.css)({
+    display: 'inline-flex',
+    flexDirection: 'column',
+    marginLeft: _f36tokens.default.spacingXs
+});
+const errorItem = (0, _emotion.css)({
+    display: 'flex',
+    alignItems: 'center'
+});
+const entryLink = (0, _emotion.css)({
+    fontWeight: Number(_f36tokens.default.fontWeightDemiBold)
+});

package/dist/esm/ValidationErrors.js

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { List, ListItem, TextLink } from '@contentful/f36-components';
+import { ExternalLinkIcon, InfoCircleIcon } from '@contentful/f36-icons';
+import { entityHelpers } from '@contentful/field-editor-shared';
+import * as styles from './styles';
+function UniquenessError(props) {
+    const [state, setState] = React.useState({
+        loading: true,
+        entries: []
+    });
+    const contentTypesById = React.useMemo(()=>props.space.getCachedContentTypes().reduce((prev, ct)=>({
+                ...prev,
+                [ct.sys.id]: ct
+            }), {}), [
+        props.space
+    ]);
+    const getTitle = React.useCallback((entry)=>entityHelpers.getEntryTitle({
+            entry,
+            defaultTitle: 'Untitled',
+            localeCode: props.localeCode,
+            defaultLocaleCode: props.defaultLocaleCode,
+            contentType: contentTypesById[entry.sys.contentType.sys.id]
+        }), [
+        props.localeCode,
+        props.defaultLocaleCode,
+        contentTypesById
+    ]);
+    let conflicting = [];
+    if ('conflicting' in props.error) {
+        conflicting = props.error.conflicting;
+    }
+    React.useEffect(()=>{
+        const entryIds = state.entries.map((entry)=>entry.id);
+        const conflictIds = conflicting.map((entry)=>entry.sys.id);
+        if (conflictIds.every((id)=>entryIds.includes(id))) {
+            return;
+        }
+        setState((state)=>({
+                ...state,
+                loading: true
+            }));
+        const query = {
+            'sys.id[in]': conflictIds.join(',')
+        };
+        props.space.getEntries(query).then(({ items  })=>{
+            const entries = items.map((entry)=>({
+                    id: entry.sys.id,
+                    title: getTitle(entry),
+                    href: props.getEntryURL(entry)
+                }));
+            setState({
+                loading: false,
+                entries
+            });
+        });
+    }, [
+        getTitle,
+        state.entries,
+        conflicting,
+        props.space.getEntries,
+        props.getEntryURL
+    ]);
+    return React.createElement(List, {
+        className: styles.errorList,
+        testId: "validation-errors-uniqueness"
+    }, React.createElement(ListItem, {
+        className: styles.entryLink
+    }, state.loading ? React.createElement("div", null, "Loading title for conflicting entry…") : state.entries.map((entry)=>React.createElement(TextLink, {
+            key: entry.id,
+            href: entry.href,
+            icon: React.createElement(ExternalLinkIcon, null),
+            alignIcon: "end",
+            variant: "negative",
+            target: "_blank",
+            rel: "noopener noreferrer"
+        }, entry.title))));
+}
+export function ValidationErrors(props) {
+    const [errors, setErrors] = React.useState([]);
+    React.useEffect(()=>{
+        const onErrors = (errors)=>{
+            setErrors(errors || []);
+        };
+        return props.field.onSchemaErrorsChanged(onErrors);
+    }, [
+        props.field
+    ]);
+    if (errors.length === 0) {
+        return null;
+    }
+    return React.createElement(List, {
+        className: styles.errorList,
+        testId: "validation-errors"
+    }, errors.map((error, index)=>{
+        return React.createElement("li", {
+            key: index,
+            role: "status",
+            "aria-roledescription": "field-locale-schema",
+            "data-error-code": `entry.schema.${error.name}`,
+            className: styles.errorItem
+        }, React.createElement(InfoCircleIcon, {
+            variant: "negative"
+        }), React.createElement("div", {
+            className: styles.errorMessage
+        }, error.message, error.name === 'unique' && React.createElement(UniquenessError, {
+            error: error,
+            space: props.space,
+            localeCode: props.field.locale,
+            defaultLocaleCode: props.locales.default,
+            getEntryURL: props.getEntryURL
+        })));
+    }));
+}

package/dist/esm/ValidationErrors.test.js

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import * as utils from '@contentful/field-editor-test-utils';
+import { render, configure, cleanup, act } from '@testing-library/react';
+import { ValidationErrors } from './ValidationErrors';
+configure({
+    testIdAttribute: 'data-test-id'
+});
+const displayField = 'my-title';
+const contentTypeId = 'my-content-type';
+const getCachedContentTypes = ()=>[
+        {
+            displayField,
+            fields: [
+                {
+                    id: displayField
+                }
+            ],
+            sys: {
+                id: 'my-content-type'
+            }
+        }
+    ];
+const createEntry = (id)=>({
+        fields: {
+            [displayField]: {
+                'en-US': 'entry-title-for-' + id
+            }
+        },
+        sys: {
+            id,
+            contentType: {
+                sys: {
+                    id: contentTypeId
+                }
+            }
+        }
+    });
+describe('ValidationErrors', ()=>{
+    afterEach(cleanup);
+    it('renders without crashing', ()=>{
+        const [field] = utils.createFakeFieldAPI();
+        const { container  } = render(React.createElement(ValidationErrors, {
+            field: field,
+            space: utils.createFakeSpaceAPI(),
+            locales: utils.createFakeLocalesAPI(),
+            getEntryURL: (entry)=>`url.${entry.sys.id}`
+        }));
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('should render the list of error messages', async ()=>{
+        const errors = [
+            {
+                name: 'test-error',
+                message: 'The input is invalid',
+                path: []
+            }
+        ];
+        const [field, emitter] = utils.createFakeFieldAPI();
+        const { findByText  } = render(React.createElement(ValidationErrors, {
+            field: field,
+            space: utils.createFakeSpaceAPI(),
+            locales: utils.createFakeLocalesAPI(),
+            getEntryURL: (entry)=>`url.${entry.sys.id}`
+        }));
+        act(()=>{
+            emitter.emit('onSchemaErrorsChanged', errors);
+        });
+        await Promise.all(errors.map((e)=>{
+            if (e.message) {
+                return findByText(e.message);
+            } else {
+                return Promise.reject();
+            }
+        }));
+    });
+    it('should fetch & render links to duplicated entries', async ()=>{
+        const ids = [
+            'id-0',
+            'id-1',
+            'id-2'
+        ];
+        const errors = [
+            {
+                name: 'unique',
+                message: 'entry is duplicated',
+                conflicting: ids.map((id)=>({
+                        sys: {
+                            id,
+                            type: 'Link',
+                            linkType: 'Entry'
+                        }
+                    })),
+                path: []
+            }
+        ];
+        const [field, emitter] = utils.createFakeFieldAPI();
+        const space = utils.createFakeSpaceAPI((api)=>({
+                ...api,
+                getCachedContentTypes,
+                getEntries: jest.fn().mockResolvedValue({
+                    items: ids.map(createEntry)
+                })
+            }));
+        const { findByText , findAllByTestId  } = render(React.createElement(ValidationErrors, {
+            field: field,
+            space: space,
+            locales: utils.createFakeLocalesAPI(),
+            getEntryURL: (entry)=>`url.${entry.sys.id}`
+        }));
+        act(()=>{
+            emitter.emit('onSchemaErrorsChanged', errors);
+        });
+        await findByText(/Loading title for conflicting entry/);
+        const links = await findAllByTestId('cf-ui-text-link');
+        links.forEach((link, index)=>{
+            expect(link).toHaveAttribute('href', 'url.id-' + index);
+            expect(link).toHaveTextContent('entry-title-for-id-' + index);
+        });
+    });
+});

package/dist/esm/index.js

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

package/dist/esm/styles.js

@@ -0,0 +1,21 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+export const errorList = css({
+    padding: 0,
+    wordWrap: 'break-word',
+    marginTop: tokens.spacingS,
+    color: tokens.red500,
+    listStyleType: 'none'
+});
+export const errorMessage = css({
+    display: 'inline-flex',
+    flexDirection: 'column',
+    marginLeft: tokens.spacingXs
+});
+export const errorItem = css({
+    display: 'flex',
+    alignItems: 'center'
+});
+export const entryLink = css({
+    fontWeight: Number(tokens.fontWeightDemiBold)
+});

package/dist/{ValidationErrors.d.ts → types/ValidationErrors.d.ts}

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import type { SpaceAPI, Entry, FieldAPI, LocalesAPI } from '@contentful/field-editor-shared';
-export interface ValidationErrorsProps {
-    field: FieldAPI;
-    space: SpaceAPI;
-    locales: LocalesAPI;
-    getEntryURL: (entry: Entry) => string;
-}
-export declare function ValidationErrors(props: ValidationErrorsProps): JSX.Element | null;
+import * as React from 'react';
+import type { Entry, FieldAPI, LocalesAPI, SpaceAPI } from '@contentful/field-editor-shared';
+export interface ValidationErrorsProps {
+    field: FieldAPI;
+    space: SpaceAPI;
+    locales: LocalesAPI;
+    getEntryURL: (entry: Entry) => string;
+}
+export declare function ValidationErrors(props: ValidationErrorsProps): React.JSX.Element | null;

package/dist/types/ValidationErrors.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/{index.d.ts → types/index.d.ts}

@@ -1 +1 @@
-export { ValidationErrors } from './ValidationErrors';
+export { ValidationErrors } from './ValidationErrors';

package/dist/{styles.d.ts → types/styles.d.ts}

@@ -1,4 +1,4 @@
-export declare const errorList: string;
-export declare const errorMessage: string;
-export declare const errorItem: string;
-export declare const entryLink: string;
+export declare const errorList: string;
+export declare const errorMessage: string;
+export declare const errorItem: string;
+export declare const entryLink: string;