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

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

@@ -110,15 +110,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 +139,18 @@ 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(_f36components.ValidationMessage, {
+        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

@@ -51,15 +51,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 +80,18 @@ 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(ValidationMessage, {
+        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.5+5ade548d",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "51e565419e82705b2e2db20e136f50c497f1e8e0"
+  "gitHead": "5ade548d2b5bb4c897943a157e570fbe6dffeadb"
 }