@contentful/field-editor-slug 2.1.4 → 2.1.5-canary.6

package/dist/cjs/SlugEditor.js

@@ -56,7 +56,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 function isSupportedFieldTypes(val) {
     return val === 'Symbol';
 }
-function FieldConnectorCallback({ Component, value, disabled, setValue, errors, titleValue, isOptionalLocaleWithFallback, locale, createdAt, performUniqueCheck, id }) {
+function FieldConnectorCallback({ Component, value, disabled, setValue, errors, titleValue, isOptionalLocaleWithFallback, locale, createdAt, performUniqueCheck, isUniqueValidationEnabled, id }) {
     const safeSetValue = _react.useCallback(async (...args)=>{
         try {
             await setValue(...args);
@@ -70,6 +70,7 @@ function FieldConnectorCallback({ Component, value, disabled, setValue, errors,
         locale: locale,
         createdAt: createdAt,
         performUniqueCheck: performUniqueCheck,
+        isUniqueValidationEnabled: isUniqueValidationEnabled,
         hasError: errors.length > 0,
         value: value,
         isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
@@ -87,6 +88,7 @@ function SlugEditor(props) {
     }
     const trackingFieldId = parameters?.instance?.trackingFieldId ?? undefined;
     const entrySys = entry.getSys();
+    const isUniqueValidationEnabled = (field.validations || []).some((validation)=>'unique' in validation && validation.unique === true);
     const isLocaleOptional = locales.optional[field.locale];
     const localeFallbackCode = locales.fallbacks[field.locale];
     const isOptionalFieldLocale = Boolean(!field.required || isLocaleOptional);
@@ -135,6 +137,7 @@ function SlugEditor(props) {
                 createdAt: entrySys.createdAt,
                 locale: field.locale,
                 performUniqueCheck: performUniqueCheck,
+                isUniqueValidationEnabled: isUniqueValidationEnabled,
                 key: `slug-editor-${externalReset}`,
                 id: id
             });

package/dist/cjs/SlugEditor.test.js

@@ -60,6 +60,11 @@ function createMocks(initialValues = {}) {
     const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>({
             ...field,
             id: 'slug-id',
+            validations: [
+                {
+                    unique: true
+                }
+            ],
             onValueChanged: jest.fn().mockImplementation(field.onValueChanged),
             setValue: jest.fn().mockImplementation(field.setValue)
         }), initialValues.field || '');
@@ -269,6 +274,36 @@ describe('SlugEditor', ()=>{
                 expect(queryByText('This slug has already been published in another entry')).not.toBeInTheDocument();
             });
         });
+        it('shows warning instead of error when unique validation is disabled on content model', async ()=>{
+            const { field, sdk } = createMocks({
+                titleField: 'Slug value',
+                field: 'slug-value'
+            });
+            field.validations = [];
+            sdk.entry.getSys.mockReturnValue({
+                id: 'entry-id',
+                publishedVersion: undefined,
+                contentType: {
+                    sys: {
+                        id: 'content-type-id'
+                    }
+                }
+            });
+            sdk.cma.entry.getMany.mockResolvedValue({
+                total: 2
+            });
+            const { queryByText, getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_SlugEditor.SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await (0, _react1.waitFor)(()=>{
+                expect(sdk.cma.entry.getMany).toHaveBeenCalledTimes(1);
+                expect(queryByText('Warning: This slug has already been published in another entry. Enable "Unique" validation in the content model to enforce this as an error.')).toBeInTheDocument();
+                expect(queryByText('This slug has already been published in another entry')).not.toBeInTheDocument();
+                expect(getByTestId('cf-ui-text-input')).not.toHaveAttribute('aria-invalid');
+            });
+        });
     });
     describe('should react to title changes', ()=>{
         it('when field is disabled', async ()=>{

package/dist/cjs/SlugEditorField.js

@@ -19,6 +19,7 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
+const _f36note = require("@contentful/f36-note");
 const _core = require("@lingui/core");
 const _usedebounce = require("use-debounce");
 const _makeSlug = require("./services/makeSlug");
@@ -110,15 +111,17 @@ function useUniqueChecker(props) {
     return status;
 }
 function SlugEditorFieldStatic(props) {
-    const { hasError, isDisabled, value, setValue, onChange, onBlur, id } = props;
+    const { hasError, isDisabled, value, setValue, onChange, onBlur, isUniqueValidationEnabled, id } = props;
     const status = useUniqueChecker(props);
+    const hasDuplicate = status === 'duplicate';
+    const shouldShowDuplicateAsError = hasDuplicate && isUniqueValidationEnabled;
     return /*#__PURE__*/ _react.createElement("div", {
         className: _styles.inputContainer
     }, /*#__PURE__*/ _react.createElement(_f36icons.LinkSimpleIcon, {
         className: _styles.icon
     }), /*#__PURE__*/ _react.createElement(_f36components.TextInput, {
         className: _styles.input,
-        isInvalid: hasError || status === 'duplicate',
+        isInvalid: hasError || shouldShowDuplicateAsError,
         isDisabled: isDisabled,
         value: value || '',
         id: id,
@@ -137,12 +140,19 @@ function SlugEditorFieldStatic(props) {
         className: _styles.spinnerContainer
     }, /*#__PURE__*/ _react.createElement(_f36components.Spinner, {
         testId: "slug-editor-spinner"
-    })), status === 'duplicate' && /*#__PURE__*/ _react.createElement(_f36components.ValidationMessage, {
+    })), hasDuplicate && isUniqueValidationEnabled && /*#__PURE__*/ _react.createElement(_f36components.ValidationMessage, {
         testId: "slug-editor-duplicate-error",
         className: _styles.uniqueValidationError
     }, _core.i18n._({
         id: "FieldEditors.Slug.SlugEditorField.DuplicateSlugError",
         message: "This slug has already been published in another entry"
+    })), hasDuplicate && !isUniqueValidationEnabled && /*#__PURE__*/ _react.createElement(_f36note.Note, {
+        variant: "warning",
+        testId: "slug-editor-duplicate-warning",
+        className: _styles.uniqueValidationError
+    }, _core.i18n._({
+        id: "FieldEditors.Slug.SlugEditorField.DuplicateSlugWarning",
+        message: 'Warning: This slug has already been published in another entry. Enable "Unique" validation in the content model to enforce this as an error.'
     })));
 }
 function SlugEditorField(props) {

package/dist/esm/SlugEditor.js

@@ -5,7 +5,7 @@ import { TrackingFieldConnector } from './TrackingFieldConnector';
 function isSupportedFieldTypes(val) {
     return val === 'Symbol';
 }
-function FieldConnectorCallback({ Component, value, disabled, setValue, errors, titleValue, isOptionalLocaleWithFallback, locale, createdAt, performUniqueCheck, id }) {
+function FieldConnectorCallback({ Component, value, disabled, setValue, errors, titleValue, isOptionalLocaleWithFallback, locale, createdAt, performUniqueCheck, isUniqueValidationEnabled, id }) {
     const safeSetValue = React.useCallback(async (...args)=>{
         try {
             await setValue(...args);
@@ -19,6 +19,7 @@ function FieldConnectorCallback({ Component, value, disabled, setValue, errors,
         locale: locale,
         createdAt: createdAt,
         performUniqueCheck: performUniqueCheck,
+        isUniqueValidationEnabled: isUniqueValidationEnabled,
         hasError: errors.length > 0,
         value: value,
         isOptionalLocaleWithFallback: isOptionalLocaleWithFallback,
@@ -36,6 +37,7 @@ export function SlugEditor(props) {
     }
     const trackingFieldId = parameters?.instance?.trackingFieldId ?? undefined;
     const entrySys = entry.getSys();
+    const isUniqueValidationEnabled = (field.validations || []).some((validation)=>'unique' in validation && validation.unique === true);
     const isLocaleOptional = locales.optional[field.locale];
     const localeFallbackCode = locales.fallbacks[field.locale];
     const isOptionalFieldLocale = Boolean(!field.required || isLocaleOptional);
@@ -84,6 +86,7 @@ export function SlugEditor(props) {
                 createdAt: entrySys.createdAt,
                 locale: field.locale,
                 performUniqueCheck: performUniqueCheck,
+                isUniqueValidationEnabled: isUniqueValidationEnabled,
                 key: `slug-editor-${externalReset}`,
                 id: id
             });

package/dist/esm/SlugEditor.test.js

@@ -15,6 +15,11 @@ function createMocks(initialValues = {}) {
     const [field] = createFakeFieldAPI((field)=>({
             ...field,
             id: 'slug-id',
+            validations: [
+                {
+                    unique: true
+                }
+            ],
             onValueChanged: jest.fn().mockImplementation(field.onValueChanged),
             setValue: jest.fn().mockImplementation(field.setValue)
         }), initialValues.field || '');
@@ -224,6 +229,36 @@ describe('SlugEditor', ()=>{
                 expect(queryByText('This slug has already been published in another entry')).not.toBeInTheDocument();
             });
         });
+        it('shows warning instead of error when unique validation is disabled on content model', async ()=>{
+            const { field, sdk } = createMocks({
+                titleField: 'Slug value',
+                field: 'slug-value'
+            });
+            field.validations = [];
+            sdk.entry.getSys.mockReturnValue({
+                id: 'entry-id',
+                publishedVersion: undefined,
+                contentType: {
+                    sys: {
+                        id: 'content-type-id'
+                    }
+                }
+            });
+            sdk.cma.entry.getMany.mockResolvedValue({
+                total: 2
+            });
+            const { queryByText, getByTestId } = render(/*#__PURE__*/ React.createElement(SlugEditor, {
+                field: field,
+                baseSdk: sdk,
+                isInitiallyDisabled: false
+            }));
+            await waitFor(()=>{
+                expect(sdk.cma.entry.getMany).toHaveBeenCalledTimes(1);
+                expect(queryByText('Warning: This slug has already been published in another entry. Enable "Unique" validation in the content model to enforce this as an error.')).toBeInTheDocument();
+                expect(queryByText('This slug has already been published in another entry')).not.toBeInTheDocument();
+                expect(getByTestId('cf-ui-text-input')).not.toHaveAttribute('aria-invalid');
+            });
+        });
     });
     describe('should react to title changes', ()=>{
         it('when field is disabled', async ()=>{

package/dist/esm/SlugEditorField.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Spinner, TextInput, ValidationMessage } from '@contentful/f36-components';
 import { LinkSimpleIcon } from '@contentful/f36-icons';
+import { Note } from '@contentful/f36-note';
 import { i18n as $_i18n } from "@lingui/core";
 import { useDebounce } from 'use-debounce';
 import { makeSlug } from './services/makeSlug';
@@ -51,15 +52,17 @@ function useUniqueChecker(props) {
     return status;
 }
 export function SlugEditorFieldStatic(props) {
-    const { hasError, isDisabled, value, setValue, onChange, onBlur, id } = props;
+    const { hasError, isDisabled, value, setValue, onChange, onBlur, isUniqueValidationEnabled, id } = props;
     const status = useUniqueChecker(props);
+    const hasDuplicate = status === 'duplicate';
+    const shouldShowDuplicateAsError = hasDuplicate && isUniqueValidationEnabled;
     return /*#__PURE__*/ React.createElement("div", {
         className: styles.inputContainer
     }, /*#__PURE__*/ React.createElement(LinkSimpleIcon, {
         className: styles.icon
     }), /*#__PURE__*/ React.createElement(TextInput, {
         className: styles.input,
-        isInvalid: hasError || status === 'duplicate',
+        isInvalid: hasError || shouldShowDuplicateAsError,
         isDisabled: isDisabled,
         value: value || '',
         id: id,
@@ -78,12 +81,19 @@ export function SlugEditorFieldStatic(props) {
         className: styles.spinnerContainer
     }, /*#__PURE__*/ React.createElement(Spinner, {
         testId: "slug-editor-spinner"
-    })), status === 'duplicate' && /*#__PURE__*/ React.createElement(ValidationMessage, {
+    })), hasDuplicate && isUniqueValidationEnabled && /*#__PURE__*/ React.createElement(ValidationMessage, {
         testId: "slug-editor-duplicate-error",
         className: styles.uniqueValidationError
     }, $_i18n._({
         id: "FieldEditors.Slug.SlugEditorField.DuplicateSlugError",
         message: "This slug has already been published in another entry"
+    })), hasDuplicate && !isUniqueValidationEnabled && /*#__PURE__*/ React.createElement(Note, {
+        variant: "warning",
+        testId: "slug-editor-duplicate-warning",
+        className: styles.uniqueValidationError
+    }, $_i18n._({
+        id: "FieldEditors.Slug.SlugEditorField.DuplicateSlugWarning",
+        message: 'Warning: This slug has already been published in another entry. Enable "Unique" validation in the content model to enforce this as an error.'
     })));
 }
 export function SlugEditorField(props) {

package/dist/types/SlugEditorField.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 interface SlugEditorFieldProps {
     hasError: boolean;
+    isUniqueValidationEnabled: boolean;
     isOptionalLocaleWithFallback: boolean;
     isDisabled: boolean;
     value: string | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-slug",
-  "version": "2.1.4",
+  "version": "2.1.5-canary.6+2bae425d",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -38,6 +38,7 @@
   "dependencies": {
     "@contentful/f36-components": "^5.4.1",
     "@contentful/f36-icons": "^5.4.1",
+    "@contentful/f36-note": "^5.4.1",
     "@contentful/f36-tokens": "^5.1.0",
     "@contentful/field-editor-shared": "^2.18.1",
     "@types/speakingurl": "^13.0.2",
@@ -58,5 +59,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "51e565419e82705b2e2db20e136f50c497f1e8e0"
+  "gitHead": "2bae425d639a833aea33f11ef8bd4082644a1250"
 }