strapi-plugin-navigation 2.2.1 → 2.3.0-beta.0

package/README.md

@@ -149,6 +149,9 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
 > *Note v2.0.3 and newer only*
 > Changing this file will not automatically change plugin configuration. To synchronize plugin's config with plugins.js file, it is necessary to restore configuration through the settings page 
 
+> *Note for newer than v2.2.0*
+> `slugify` as been removed. **THIS A BREAKING CHANGE**
+
 ```js
     module.exports = ({ env }) => ({
         // ...
@@ -162,11 +165,6 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
                 },
                 allowedLevels: 2,
                 gql: {...},
-                slugify: {
-                  customReplacements: [
-                    ["🤔", "thinking"],
-                  ],
-                }
             }
         }
     });
@@ -179,6 +177,7 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
 - `contentTypesNameFields` - Definition of content type title fields like `'api::<collection name>.<content type name>': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`. **TIP** - Proper content type uid you can find in the URL of Content Manager where you're managing relevant entities like: `admin/content-manager/collectionType/< THE UID HERE >?page=1&pageSize=10&sort=Title:ASC&plugins[i18n][locale]=en`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 - `i18nEnabled` - should you want to manage multi-locale content via navigation set this value `Enabled`. More **[ here ](#i18n-internationalization)**
+- `cascadeMenuAttached` - If you don't want "Menu attached" to cascade on child items set this value `Disabled`.
 - `slugify` - allows to extend configuration of our "slugging" solution of choice. To learn more visit the [documentation](https://github.com/sindresorhus/slugify#api). It can be left unset since it's optional. **This option can only be handled by configuration in config file**.
 
 ### Properties
@@ -631,6 +630,33 @@ module.exports = {
 
 If you already got it, make sure that `navigation` plugin is inserted before `graphql`. That should do the job.
 
+### Slug generation
+
+#### Customisation
+
+Slug generation is available as a controller and service. If you have custom requirements outside of what this plugin provides you can add your own logic with [plugins extensions](https://docs.strapi.io/developer-docs/latest/development/plugins-extension.html).
+
+For example:
+
+```ts
+// path: ./src/index.js
+
+module.exports = {
+  // ...
+  bootstrap({ strapi }) {
+    const navigationCommonService = strapi.plugin("navigation").service("common");
+    const originalGetSlug = navigationCommonService.getSlug;
+    const preprocess = (q) => {
+      return q + "suffix";
+    };
+
+    navigationCommonService.getSlug = (query) => {
+      return originalGetSlug(preprocess(query));
+    };
+  },
+};
+```
+
 ## 🤝 Contributing
 
 <div>

package/admin/src/pages/DataManagerProvider/index.js

@@ -287,6 +287,7 @@ const DataManagerProvider = ({ children }) => {
         method: "DELETE",
         signal,
     });
+    const slugify = (query) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/slug?q=${query}`, { method: "GET", signal });
     const hardReset = () => getDataRef.current();
     return (react_1.default.createElement(DataManagerContext_1.default.Provider, { value: {
             items: passedActiveItems,
@@ -316,6 +317,7 @@ const DataManagerProvider = ({ children }) => {
             readNavigationItemFromLocale,
             handleNavigationsDeletion,
             hardReset,
+            slugify,
         } }, isLoading ? react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null) : children));
 };
 DataManagerProvider.propTypes = {

package/admin/src/pages/DataManagerProvider/reducer.d.ts

@@ -14,6 +14,7 @@ export namespace initialState {
     const isLoadingForSubmit: boolean;
     const error: undefined;
     const i18nEnabled: boolean;
+    const cascadeMenuAttached: boolean;
     const availableLocale: never[];
 }
 //# sourceMappingURL=reducer.d.ts.map

package/admin/src/pages/DataManagerProvider/reducer.js

@@ -20,6 +20,7 @@ const initialState = {
     isLoadingForSubmit: false,
     error: undefined,
     i18nEnabled: false,
+    cascadeMenuAttached: true,
     availableLocale: [],
 };
 exports.initialState = initialState;

package/admin/src/pages/SettingsPage/components/CustomFieldForm/index.js

@@ -64,6 +64,7 @@ const CustomFieldForm = ({ isEditForm, customField, onSubmit, onClose, usedCusto
                 required: customField.required || formDefinition.defaultValues.required,
                 options: customField.options || formDefinition.defaultValues.options,
                 multi: customField.multi || formDefinition.defaultValues.multi,
+                enabled: customField.enabled,
             };
         }
         else {
@@ -74,6 +75,7 @@ const CustomFieldForm = ({ isEditForm, customField, onSubmit, onClose, usedCusto
                 required: customField.required || formDefinition.defaultValues.required,
                 options: [],
                 multi: false,
+                enabled: customField.enabled,
             };
         }
     }, [customField]);

package/admin/src/pages/SettingsPage/index.js

@@ -83,6 +83,7 @@ const SettingsPage = () => {
     const formikInitialValues = (0, react_1.useMemo)(() => ({
         allowedLevels: (0, lodash_1.get)(navigationConfigData, "allowedLevels", 2),
         audienceFieldChecked: (0, lodash_1.get)(navigationConfigData, "additionalFields", []).includes(utils_1.navigationItemAdditionalFields.AUDIENCE),
+        cascadeMenuAttachedChecked: (0, lodash_1.get)(navigationConfigData, "cascadeMenuAttached", true),
         i18nEnabled: (0, lodash_1.get)(navigationConfigData, "i18nEnabled", false),
         nameFields: (0, lodash_1.get)(navigationConfigData, "contentTypesNameFields", {}),
         pathDefaultFields: (0, lodash_1.get)(navigationConfigData, "pathDefaultFields", {}),
@@ -97,9 +98,10 @@ const SettingsPage = () => {
             ?.filter((field) => field !== utils_1.navigationItemAdditionalFields.AUDIENCE);
         setCustomFields(additionalFields || []);
     }, [navigationConfigData]);
-    const preparePayload = (0, react_1.useCallback)(({ form: { allowedLevels, audienceFieldChecked, i18nEnabled, nameFields, pathDefaultFields, populate, selectedContentTypes, }, pruneObsoleteI18nNavigations }) => ({
+    const preparePayload = (0, react_1.useCallback)(({ form: { allowedLevels, audienceFieldChecked, cascadeMenuAttachedChecked, i18nEnabled, nameFields, pathDefaultFields, populate, selectedContentTypes, }, pruneObsoleteI18nNavigations }) => ({
         additionalFields: audienceFieldChecked ? ['audience', ...customFields] : [...customFields],
         allowedLevels,
+        cascadeMenuAttached: cascadeMenuAttachedChecked,
         contentTypes: selectedContentTypes,
         contentTypesNameFields: nameFields,
         contentTypesPopulate: populate,
@@ -158,7 +160,7 @@ const SettingsPage = () => {
             react_1.default.createElement(helper_plugin_1.SettingsPageTitle, { name: (0, utils_2.getMessage)('Settings.email.plugin.title', 'Configuration') }),
             react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null, "Fetching plugin config...")));
     }
-    const allContentTypes = !isLoading ? Object.values(allContentTypesData).filter(({ uid }) => (0, functions_1.isContentTypeEligible)(uid, {
+    const allContentTypes = !isLoading ? (0, lodash_1.sortBy)(Object.values(allContentTypesData).filter(({ uid }) => (0, functions_1.isContentTypeEligible)(uid, {
         allowedContentTypes: navigationConfigData?.allowedContentTypes,
         restrictedContentTypes: navigationConfigData?.restrictedContentTypes,
     })).map(ct => {
@@ -172,7 +174,7 @@ const SettingsPage = () => {
             };
         }
         return ct;
-    }) : [];
+    }), ct => ct.info.displayName) : [];
     const isI18NPluginEnabled = navigationConfigData?.isI18NPluginEnabled;
     const defaultLocale = navigationConfigData?.defaultLocale;
     const handleSubmitCustomField = (field) => {
@@ -221,9 +223,10 @@ const SettingsPage = () => {
                                             const contentType = allContentTypes.find(item => item.uid == uid);
                                             if (!contentType)
                                                 return;
-                                            const { attributes, info: { displayName }, available, isSingle } = contentType;
-                                            const stringAttributes = Object.keys(attributes).filter(_ => STRING_ATTRIBUTE_TYPES.includes(attributes[_].type));
-                                            const relationAttributes = Object.keys(attributes).filter(_ => RELATION_ATTRIBUTE_TYPES.includes(attributes[_].type));
+                                            const { info: { displayName }, available, isSingle } = contentType;
+                                            const attributeKeys = Object.keys(contentType.attributes).sort();
+                                            const stringAttributes = attributeKeys.filter(key => STRING_ATTRIBUTE_TYPES.includes(contentType.attributes[key].type));
+                                            const relationAttributes = attributeKeys.filter(key => RELATION_ATTRIBUTE_TYPES.includes(contentType.attributes[key].type));
                                             const key = `collectionSettings-${uid}`;
                                             return (react_1.default.createElement(Accordion_1.Accordion, { expanded: contentTypeExpanded === key, toggle: () => handleSetContentTypeExpanded(key), key: key, id: key, size: "S" },
                                                 react_1.default.createElement(Accordion_1.AccordionToggle, { title: displayName, togglePosition: "left", startIcon: (isSingle && !available) ? (react_1.default.createElement(icons_1.ExclamationMarkCircle, { "aria-hidden": true })) : null }),
@@ -239,8 +242,14 @@ const SettingsPage = () => {
                             react_1.default.createElement(Stack_1.Stack, { size: 4 },
                                 react_1.default.createElement(Typography_1.Typography, { variant: "delta", as: "h2" }, (0, utils_2.getMessage)('pages.settings.additional.title')),
                                 react_1.default.createElement(Grid_1.Grid, { gap: 4 },
-                                    react_1.default.createElement(Grid_1.GridItem, { col: 3, s: 6, xs: 12 },
-                                        react_1.default.createElement(NumberInput_1.NumberInput, { name: "allowedLevels", label: (0, utils_2.getMessage)('pages.settings.form.allowedLevels.label'), placeholder: (0, utils_2.getMessage)('pages.settings.form.allowedLevels.placeholder'), hint: (0, utils_2.getMessage)('pages.settings.form.allowedLevels.hint'), onValueChange: (value) => setFieldValue('allowedLevels', value, false), value: values.allowedLevels, disabled: restartStatus.required })),
+                                    react_1.default.createElement(Grid_1.GridItem, { col: 4, s: 6, xs: 12 },
+                                        react_1.default.createElement(Box_1.Box, { style: { maxWidth: 257 } },
+                                            react_1.default.createElement(NumberInput_1.NumberInput, { name: "allowedLevels", label: (0, utils_2.getMessage)('pages.settings.form.allowedLevels.label'), placeholder: (0, utils_2.getMessage)('pages.settings.form.allowedLevels.placeholder'), hint: (0, utils_2.getMessage)('pages.settings.form.allowedLevels.hint'), onValueChange: (value) => setFieldValue('allowedLevels', value, false), value: values.allowedLevels, disabled: restartStatus.required }))),
+                                    react_1.default.createElement(Grid_1.GridItem, { col: 4, s: 12, xs: 12 },
+                                        react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "cascadeMenuAttachedChecked", label: (0, utils_2.getMessage)('pages.settings.form.cascadeMenuAttached.label'), hint: (0, utils_2.getMessage)('pages.settings.form.cascadeMenuAttached.hint'), checked: values.cascadeMenuAttachedChecked, onChange: ({ target: { checked } }) => {
+                                                setFieldValue('cascadeMenuAttachedChecked', checked, true);
+                                            }, onLabel: "Enabled", offLabel: "Disabled", disabled: restartStatus.required }))),
+                                react_1.default.createElement(Grid_1.Grid, { gap: 4 },
                                     react_1.default.createElement(Grid_1.GridItem, { col: 4, s: 12, xs: 12 },
                                         react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "audienceFieldChecked", label: (0, utils_2.getMessage)('pages.settings.form.audience.label'), hint: (0, utils_2.getMessage)('pages.settings.form.audience.hint'), checked: values.audienceFieldChecked, onChange: () => setFieldValue('audienceFieldChecked', !values.audienceFieldChecked, false), onLabel: "Enabled", offLabel: "Disabled", disabled: restartStatus.required })),
                                     isI18NPluginEnabled && (react_1.default.createElement(Grid_1.GridItem, { col: 4, s: 12, xs: 12 },

package/admin/src/pages/SettingsPage/types.d.ts

@@ -3,6 +3,7 @@ import { Effect, NavigationPluginConfig } from "../../../../types";
 export declare type RawPayload = {
     allowedLevels: number;
     audienceFieldChecked: boolean;
+    cascadeMenuAttachedChecked: boolean;
     i18nEnabled: boolean;
     nameFields: Record<string, string[]>;
     pathDefaultFields: Record<string, string[]>;
@@ -18,7 +19,7 @@ export declare type StrapiContentTypeSchema = StrapiContentTypeFullSchema & {
 export declare type PreparePayload = (payload: {
     form: RawPayload;
     pruneObsoleteI18nNavigations: boolean;
-}) => Omit<NavigationPluginConfig, "slugify">;
+}) => NavigationPluginConfig;
 export declare type OnSave = Effect<RawPayload>;
 export declare type OnPopupClose = Effect<boolean>;
 export declare type HandleSetContentTypeExpanded = Effect<string | undefined>;

package/admin/src/pages/SettingsPage/utils/form.d.ts

@@ -6,6 +6,7 @@ export declare const schemaFactory: (usedCustomFieldNames: string[]) => import("
     required: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, Record<string, any>>;
     multi: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
     options: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
+    enabled: import("yup").BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
 }, Record<string, any>, import("yup/lib/object").TypeOfShape<{
     name: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
     label: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
@@ -13,6 +14,7 @@ export declare const schemaFactory: (usedCustomFieldNames: string[]) => import("
     required: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, Record<string, any>>;
     multi: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
     options: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
+    enabled: import("yup").BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
 }>>;
 export declare const defaultValues: NavigationItemCustomField;
 //# sourceMappingURL=form.d.ts.map

package/admin/src/pages/SettingsPage/utils/form.js

@@ -19,7 +19,8 @@ const schemaFactory = (usedCustomFieldNames) => {
             is: (val) => val === 'select',
             then: (0, yup_1.array)().of((0, yup_1.string)()),
             otherwise: (0, yup_1.mixed)().notRequired(),
-        })
+        }),
+        enabled: (0, yup_1.bool)().notRequired(),
     });
 };
 exports.schemaFactory = schemaFactory;
@@ -30,5 +31,6 @@ exports.defaultValues = {
     required: false,
     multi: false,
     options: [],
+    enabled: true,
 };
 //# sourceMappingURL=form.js.map

package/admin/src/pages/View/components/NavigationItemForm/index.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const lodash_1 = require("lodash");
-const slugify_1 = __importDefault(require("@sindresorhus/slugify"));
+const fp_1 = require("lodash/fp");
 const formik_1 = require("formik");
 const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
 const Select_1 = require("@strapi/design-system/Select");
@@ -44,8 +44,7 @@ const translations_1 = require("../../../../translations");
 const types_1 = require("../../../../../../types");
 const AdditionalFieldInput_1 = __importDefault(require("../../../../components/AdditionalFieldInput"));
 const utils_2 = require("../../../../utils");
-const appendLabelPublicationStatusFallback = () => '';
-const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading, inputsPrefix, data, contentTypes = [], contentTypeEntities = [], usedContentTypeEntities = [], availableAudience = [], additionalFields = [], contentTypesNameFields = {}, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus = appendLabelPublicationStatusFallback, locale, readNavigationItemFromLocale, }) => {
+const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading, inputsPrefix, data, contentTypes = [], contentTypeEntities = [], usedContentTypeEntities = [], availableAudience = [], additionalFields = [], contentTypesNameFields = {}, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus = appendLabelPublicationStatusFallback, locale, readNavigationItemFromLocale, slugify, }) => {
     const [isLoading, setIsLoading] = (0, react_1.useState)(isPreloading);
     const [hasBeenInitialized, setInitializedState] = (0, react_1.useState)(false);
     const [hasChanged, setChangedState] = (0, react_1.useState)(false);
@@ -53,8 +52,8 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
     const [contentTypeSearchInputValue, setContentTypeSearchInputValue] = (0, react_1.useState)(undefined);
     const formik = (0, formik_1.useFormik)({
         initialValues: formDefinition.defaultValues,
-        onSubmit: (payload) => onSubmit(sanitizePayload(payload, data)),
-        validate: (values) => (0, form_1.checkFormValidity)(sanitizePayload(values, {}), formDefinition.schemaFactory(isSingleSelected, additionalFields)),
+        onSubmit: loadingAware(async (payload) => onSubmit(await sanitizePayload(slugify, payload, data)), setIsLoading),
+        validate: loadingAware(async (values) => (0, form_1.checkFormValidity)(await sanitizePayload(slugify, values, {}), formDefinition.schemaFactory(isSingleSelected, additionalFields)), setIsLoading),
         validateOnChange: false,
     });
     const initialRelatedTypeSelected = (0, lodash_1.get)(data, 'relatedType.value');
@@ -97,7 +96,10 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
     })), [availableAudience]);
     const generatePreviewPath = () => {
         if (!isExternal) {
-            const value = `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${formik.values.path !== '/' ? formik.values.path || '' : ''}`;
+            const itemPath = (0, lodash_1.isEmpty)(formik.values.path) || formik.values.path === '/'
+                ? getDefaultPath()
+                : formik.values.path || "";
+            const value = `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${itemPath}`;
             return {
                 id: (0, translations_1.getTradId)('popup.item.form.type.external.description'),
                 defaultMessage: '',
@@ -117,7 +119,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             }, contentTypesNameFields, { contentTypes });
         }
     }, [contentTypeEntities, contentTypesNameFields, contentTypes]);
-    const sanitizePayload = (payload, data) => {
+    const sanitizePayload = async (slugify, payload, data) => {
         const { related, relatedType, menuAttached, type, ...purePayload } = payload;
         const relatedId = related;
         const singleRelatedItem = isSingleSelected ? (0, lodash_1.first)(contentTypeEntities) : undefined;
@@ -125,6 +127,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
         const title = !!payload.title?.trim()
             ? payload.title
             : getDefaultTitle(related, relatedType, isSingleSelected);
+        const uiRouterKey = await generateUiRouterKey(slugify, title, relatedId, relatedCollectionType);
         return {
             ...data,
             ...purePayload,
@@ -137,7 +140,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             relatedType: type === utils_1.navigationItemType.INTERNAL ? relatedCollectionType : undefined,
             isSingle: isSingleSelected,
             singleRelatedItem,
-            uiRouterKey: generateUiRouterKey(title, relatedId, relatedCollectionType),
+            uiRouterKey,
         };
     };
     const onChange = ({ name, value }) => {
@@ -159,11 +162,13 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
         (0, types_1.assertString)(relatedTypeSelectValue);
         const pathDefaultFields = (0, lodash_1.get)(config, ["pathDefaultFields", relatedTypeSelectValue], []);
         if ((0, lodash_1.isEmpty)(formik.values.path) && !(0, lodash_1.isEmpty)(pathDefaultFields)) {
-            const selectedEntity = contentTypeEntities.find(i => i.id === relatedSelectValue);
+            const selectedEntity = isSingleSelected
+                ? (0, lodash_1.first)(contentTypeEntities)
+                : contentTypeEntities.find(i => i.id === relatedSelectValue);
             const pathDefaultValues = pathDefaultFields
                 .map((field) => (0, lodash_1.get)(selectedEntity, field, ""))
                 .filter(value => !(0, lodash_1.isNil)(value) && String(value).match(/^\S+$/));
-            return String((0, lodash_1.first)(pathDefaultValues));
+            return String((0, lodash_1.first)(pathDefaultValues) || "");
         }
         return "";
     }, [relatedTypeSelectValue, formik, config]);
@@ -178,17 +183,16 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             value,
         });
     };
-    const generateUiRouterKey = (title, related, relatedType) => {
-        const { slugify: customSlugifyConfig } = config;
+    const generateUiRouterKey = async (slugify, title, related, relatedType) => {
         if (title) {
-            return (0, lodash_1.isString)(title) && !(0, lodash_1.isEmpty)(title) ? (0, slugify_1.default)(title, customSlugifyConfig).toLowerCase() : undefined;
+            return (0, lodash_1.isString)(title) && !(0, lodash_1.isEmpty)(title) ? await slugify(title).then((0, fp_1.prop)("slug")) : undefined;
         }
         else if (related) {
             const relationTitle = (0, parsers_1.extractRelatedItemLabel)({
                 ...contentTypeEntities.find(_ => _.id === related),
                 __collectionUid: relatedType
             }, contentTypesNameFields, { contentTypes });
-            return (0, lodash_1.isString)(relationTitle) && !(0, lodash_1.isEmpty)(relationTitle) ? (0, slugify_1.default)(relationTitle, customSlugifyConfig).toLowerCase() : undefined;
+            return (0, lodash_1.isString)(relationTitle) && !(0, lodash_1.isEmpty)(relationTitle) ? await slugify(relationTitle).then((0, fp_1.prop)("slug")) : undefined;
         }
         return undefined;
     };
@@ -206,7 +210,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             }
         };
     });
-    const relatedSelectOptions = contentTypeEntities
+    const relatedSelectOptions = (0, lodash_1.sortBy)(contentTypeEntities
         .filter((item) => {
         const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
             .filter(uctItem => relatedTypeSelectValue === uctItem.__collectionUid);
@@ -228,10 +232,10 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             value: item.id,
             label: label,
         });
-    });
+    }), item => item.metadatas.intlLabel.id);
     const isExternal = formik.values.type === utils_1.navigationItemType.EXTERNAL;
     const pathSourceName = isExternal ? 'externalPath' : 'path';
-    const submitDisabled = (formik.values.type === utils_1.navigationItemType.INTERNAL && !isSingleSelected && (0, lodash_1.isNil)(formik.values.related));
+    const submitDisabled = (formik.values.type === utils_1.navigationItemType.INTERNAL && !isSingleSelected && (0, lodash_1.isNil)(formik.values.related)) || isLoading;
     const debouncedSearch = (0, react_1.useCallback)((0, lodash_1.debounce)(nextValue => setContentTypeSearchQuery(nextValue), 500), []);
     const debounceContentTypeSearchQuery = (value) => {
         setContentTypeSearchInputValue(value);
@@ -251,7 +255,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             setChangedState(true);
         }
     };
-    const relatedTypeSelectOptions = (0, react_1.useMemo)(() => contentTypes
+    const relatedTypeSelectOptions = (0, react_1.useMemo)(() => (0, lodash_1.sortBy)(contentTypes
         .filter((contentType) => {
         if (contentType.isSingle) {
             if (relatedTypeSelectValue && [relatedTypeSelectValue, initialRelatedTypeSelected].includes(contentType.uid)) {
@@ -271,7 +275,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
         },
         value: (0, lodash_1.get)(item, 'uid'),
         label: (0, lodash_1.get)(item, 'label', (0, lodash_1.get)(item, 'name')),
-    })), [contentTypes, usedContentTypesData, relatedTypeSelectValue]);
+    })), item => item.metadatas.intlLabel.id), [contentTypes, usedContentTypesData, relatedTypeSelectValue]);
     const thereAreNoMoreContentTypes = (0, lodash_1.isEmpty)(relatedSelectOptions) && !contentTypeSearchQuery;
     (0, react_1.useEffect)(() => {
         const value = (0, lodash_1.get)(relatedSelectOptions, '0');
@@ -380,7 +384,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
                     react_1.default.createElement(Grid_1.GridItem, { key: "type", col: 4, lg: 12 },
                         react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.type.label', 'Internal link'), name: "type", options: navigationItemTypeOptions, type: "select", error: formik.errors.type, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.type })),
                     react_1.default.createElement(Grid_1.GridItem, { key: "menuAttached", col: 4, lg: 12 },
-                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.menuAttached.label', 'MenuAttached'), name: "menuAttached", type: "bool", error: formik.errors.menuAttached, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.menuAttached, disabled: !(data.isMenuAllowedLevel && data.parentAttachedToMenu) })),
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.menuAttached.label', 'MenuAttached'), name: "menuAttached", type: "bool", error: formik.errors.menuAttached, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.menuAttached, disabled: config.cascadeMenuAttached ? !(data.isMenuAllowedLevel && data.parentAttachedToMenu) : false })),
                     react_1.default.createElement(Grid_1.GridItem, { key: "path", col: 12 },
                         react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)(`popup.item.form.${pathSourceName}.label`, 'Path'), name: pathSourceName, placeholder: (0, translations_1.getTrad)(`popup.item.form.${pathSourceName}.placeholder`, 'e.g. Blog'), type: "text", error: formik.errors[pathSourceName], onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values[pathSourceName], description: generatePreviewPath() })),
                     formik.values.type === utils_1.navigationItemType.INTERNAL && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -415,5 +419,17 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
                         react_1.default.createElement(Button_1.Button, { variant: "tertiary", onClick: onCopyFromLocale, disabled: isLoading || !itemLocaleCopyValue }, (0, utils_2.getMessage)('popup.item.form.i18n.locale.button'))))) : null)),
         react_1.default.createElement(NavigationItemPopupFooter_1.NavigationItemPopupFooter, { handleSubmit: formik.handleSubmit, handleCancel: onCancel, submitDisabled: submitDisabled })));
 };
+const appendLabelPublicationStatusFallback = () => "";
+const loadingAware = (action, isLoading) => async (input) => {
+    try {
+        isLoading(true);
+        return await action(input);
+    }
+    catch (_) {
+    }
+    finally {
+        isLoading(false);
+    }
+};
 exports.default = NavigationItemForm;
 //# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationItemForm/types.d.ts

@@ -60,6 +60,9 @@ export declare type NavigationItemFormProps = {
     availableLocale: string[];
     readNavigationItemFromLocale: ToBeFixed;
     inputsPrefix: string;
+    slugify: (q: string) => Promise<{
+        slug: string;
+    }>;
 };
 export declare type ContentTypeSearchQuery = ToBeFixed;
 export declare type RawFormPayload = {
@@ -86,5 +89,8 @@ export declare type SanitizedFormPayload = {
     singleRelatedItem: ContentTypeEntity | undefined;
     uiRouterKey: string | undefined;
 };
+export declare type Slugify = (q: string) => Promise<{
+    slug: string;
+}>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/admin/src/pages/View/components/NavigationItemForm/utils/form.js

@@ -67,13 +67,13 @@ const schemaFactory = (isSingleSelected, additionalFields) => {
         relatedType: yup.mixed()
             .when('type', {
             is: (val) => val === utils_1.navigationItemType.INTERNAL || (0, lodash_1.isNil)(val),
-            then: isSingleSelected ? yup.mixed().notRequired() : yup.mixed().required(helper_plugin_1.translatedErrors.required),
+            then: yup.string().required(helper_plugin_1.translatedErrors.required).min(1, helper_plugin_1.translatedErrors.required),
             otherwise: yup.mixed().notRequired(),
         }),
         related: yup.mixed()
             .when('type', {
             is: (val) => val === utils_1.navigationItemType.INTERNAL || (0, lodash_1.isNil)(val),
-            then: isSingleSelected ? yup.mixed().notRequired() : yup.mixed().required(helper_plugin_1.translatedErrors.required),
+            then: isSingleSelected ? yup.mixed().notRequired() : yup.string().required(helper_plugin_1.translatedErrors.required).min(1, helper_plugin_1.translatedErrors.required),
             otherwise: yup.mixed().notRequired(),
         }),
         additionalFields: yup.object({

package/admin/src/pages/View/components/NavigationItemPopup/index.d.ts

@@ -1,5 +1,5 @@
 export default NavigationItemPopUp;
-declare function NavigationItemPopUp({ availableLocale, isOpen, isLoading, data, config, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, readNavigationItemFromLocale, }: {
+declare function NavigationItemPopUp({ availableLocale, isOpen, isLoading, data, config, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, readNavigationItemFromLocale, slugify, }: {
     availableLocale: any;
     isOpen: any;
     isLoading: any;
@@ -12,6 +12,7 @@ declare function NavigationItemPopUp({ availableLocale, isOpen, isLoading, data,
     usedContentTypesData: any;
     locale: any;
     readNavigationItemFromLocale: any;
+    slugify: any;
 }): JSX.Element;
 declare namespace NavigationItemPopUp {
     namespace propTypes {
@@ -24,6 +25,7 @@ declare namespace NavigationItemPopUp {
         const getContentTypeItems: PropTypes.Validator<(...args: any[]) => any>;
         const locale: PropTypes.Requireable<string>;
         const readNavigationItemFromLocale: PropTypes.Validator<(...args: any[]) => any>;
+        const slugify: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

package/admin/src/pages/View/components/NavigationItemPopup/index.js

@@ -34,7 +34,7 @@ const NavigationItemForm_1 = __importDefault(require("../NavigationItemForm"));
 const parsers_1 = require("../../utils/parsers");
 const NavigationItemPopupHeader_1 = require("./NavigationItemPopupHeader");
 const utils_1 = require("../../../../utils");
-const NavigationItemPopUp = ({ availableLocale, isOpen, isLoading, data, config = {}, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, readNavigationItemFromLocale, }) => {
+const NavigationItemPopUp = ({ availableLocale, isOpen, isLoading, data, config = {}, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, readNavigationItemFromLocale, slugify, }) => {
     const handleOnSubmit = (payload) => {
         onSubmit(payload);
     };
@@ -71,7 +71,7 @@ const NavigationItemPopUp = ({ availableLocale, isOpen, isLoading, data, config
     const hasViewId = !!data.viewId;
     return (react_1.default.createElement(ModalLayout_1.ModalLayout, { labelledBy: "condition-modal-breadcrumbs", onClose: onClose, isOpen: isOpen },
         react_1.default.createElement(NavigationItemPopupHeader_1.NavigationItemPopupHeader, { isNewItem: !hasViewId }),
-        react_1.default.createElement(NavigationItemForm_1.default, { availableLocale: availableLocale, config: config, data: preparedData, isLoading: isLoading, additionalFields: additionalFields, contentTypesNameFields: contentTypesNameFields, availableAudience: availableAudience, contentTypes: contentTypes, contentTypeEntities: contentTypeItems, usedContentTypeEntities: usedContentTypeItems, getContentTypeEntities: getContentTypeItems, usedContentTypesData: usedContentTypesData, onSubmit: handleOnSubmit, onCancel: onClose, appendLabelPublicationStatus: appendLabelPublicationStatus, locale: locale, readNavigationItemFromLocale: readNavigationItemFromLocale })));
+        react_1.default.createElement(NavigationItemForm_1.default, { availableLocale: availableLocale, config: config, data: preparedData, isLoading: isLoading, additionalFields: additionalFields, contentTypesNameFields: contentTypesNameFields, availableAudience: availableAudience, contentTypes: contentTypes, contentTypeEntities: contentTypeItems, usedContentTypeEntities: usedContentTypeItems, getContentTypeEntities: getContentTypeItems, usedContentTypesData: usedContentTypesData, onSubmit: handleOnSubmit, onCancel: onClose, appendLabelPublicationStatus: appendLabelPublicationStatus, locale: locale, readNavigationItemFromLocale: readNavigationItemFromLocale, slugify: slugify })));
 };
 NavigationItemPopUp.propTypes = {
     data: prop_types_1.default.object.isRequired,
@@ -83,6 +83,7 @@ NavigationItemPopUp.propTypes = {
     getContentTypeItems: prop_types_1.default.func.isRequired,
     locale: prop_types_1.default.string,
     readNavigationItemFromLocale: prop_types_1.default.func.isRequired,
+    slugify: prop_types_1.default.func.isRequired,
 };
 exports.default = NavigationItemPopUp;
 //# sourceMappingURL=index.js.map

package/admin/src/pages/View/index.js

@@ -50,7 +50,8 @@ const useDataManager_1 = __importDefault(require("../../hooks/useDataManager"));
 const translations_1 = require("../../translations");
 const parsers_1 = require("./utils/parsers");
 const View = () => {
-    const { items: availableNavigations, activeItem: activeNavigation, changedActiveItem: changedActiveNavigation, config, navigationItemPopupOpened, isLoading, isLoadingForAdditionalDataToBeSet, isLoadingForSubmit, handleChangeNavigationItemPopupVisibility, handleChangeSelection, handleChangeNavigationData, handleResetNavigationData, handleSubmitNavigation, handleLocalizationSelection, handleI18nCopy, getContentTypeItems, error, availableLocale: allAvailableLocale, readNavigationItemFromLocale, } = (0, useDataManager_1.default)();
+    const toggleNotification = (0, helper_plugin_1.useNotification)();
+    const { items: availableNavigations, activeItem: activeNavigation, changedActiveItem: changedActiveNavigation, config, navigationItemPopupOpened, isLoading, isLoadingForAdditionalDataToBeSet, isLoadingForSubmit, handleChangeNavigationItemPopupVisibility, handleChangeSelection, handleChangeNavigationData, handleResetNavigationData, handleSubmitNavigation, handleLocalizationSelection, handleI18nCopy, getContentTypeItems, error, availableLocale: allAvailableLocale, readNavigationItemFromLocale, slugify, } = (0, useDataManager_1.default)();
     const availableLocale = (0, react_1.useMemo)(() => allAvailableLocale.filter(locale => locale !== changedActiveNavigation?.localeCode), [changedActiveNavigation, allAvailableLocale]);
     const { i18nCopyItemsModal, i18nCopySourceLocale, setI18nCopyModalOpened, setI18nCopySourceLocale } = (0, useI18nCopyNavigationItemsModal_1.useI18nCopyNavigationItemsModal)((0, react_1.useCallback)((sourceLocale) => {
         const source = activeNavigation?.localizations?.find(({ localeCode }) => localeCode === sourceLocale);
@@ -65,6 +66,10 @@ const View = () => {
     const [structureChanged, setStructureChanged] = (0, react_1.useState)(false);
     const isSearchEmpty = (0, lodash_1.isEmpty)(searchValue);
     const structureHasErrors = !(0, parsers_1.validateNavigationStructure)((changedActiveNavigation || {}).items);
+    (0, react_1.useEffect)(() => structureHasErrors && toggleNotification({
+        type: 'warning',
+        message: (0, translations_1.getTrad)('notification.error.item.relation'),
+    }), [structureHasErrors]);
     const navigationSelectValue = (0, lodash_1.get)(activeNavigation, "id", null);
     const handleSave = () => isLoadingForSubmit || structureHasErrors
         ? null
@@ -227,7 +232,7 @@ const View = () => {
                                 react_1.default.createElement(Button_1.Button, { variant: "tertiary", onClick: openI18nCopyModalOpened, disabled: !i18nCopySourceLocale, size: "S" }, formatMessage((0, translations_1.getTrad)('view.i18n.fill.cta.button'))))))) : null)),
                 !(0, lodash_1.isEmpty)(changedActiveNavigation.items || [])
                     && react_1.default.createElement(NavigationItemList_1.default, { items: isSearchEmpty ? changedActiveNavigation.items || [] : filteredList, onItemLevelAdd: addNewNavigationItem, onItemRemove: handleItemRemove, onItemEdit: handleItemEdit, onItemRestore: handleItemRestore, onItemReOrder: handleItemReOrder, onItemToggleCollapse: handleItemToggleCollapse, displayFlat: !isSearchEmpty, root: true, error: error, allowedLevels: config.allowedLevels, contentTypes: config.contentTypes, isParentAttachedToMenu: true, contentTypesNameFields: config.contentTypesNameFields })))),
-        navigationItemPopupOpened && react_1.default.createElement(NavigationItemPopup_1.default, { availableLocale: availableLocale, isLoading: isLoadingForAdditionalDataToBeSet, data: activeNavigationItem, config: config, usedContentTypesData: usedContentTypesData, usedContentTypeItems: usedContentTypeItems, getContentTypeItems: getContentTypeItems, onSubmit: handleSubmitNavigationItem, onClose: onPopUpClose, locale: activeNavigation.localeCode, readNavigationItemFromLocale: readNavigationItemFromLocale }),
+        navigationItemPopupOpened && react_1.default.createElement(NavigationItemPopup_1.default, { availableLocale: availableLocale, isLoading: isLoadingForAdditionalDataToBeSet, data: activeNavigationItem, config: config, usedContentTypesData: usedContentTypesData, usedContentTypeItems: usedContentTypeItems, getContentTypeItems: getContentTypeItems, onSubmit: handleSubmitNavigationItem, onClose: onPopUpClose, locale: activeNavigation.localeCode, readNavigationItemFromLocale: readNavigationItemFromLocale, slugify: slugify }),
         i18nCopyItemsModal));
 };
 exports.default = (0, react_1.memo)(View);

package/admin/src/pages/View/utils/parsers.js

@@ -14,7 +14,7 @@ const transformItemToRESTPayload = (item, parent = undefined, master = undefined
     const relatedContentType = relatedType ?
         (0, lodash_1.find)(contentTypes, ct => ct.uid === relatedType) :
         undefined;
-    const itemAttachedToMenu = menuAttached && parentAttachedToMenu;
+    const itemAttachedToMenu = config.cascadeMenuAttached ? menuAttached && parentAttachedToMenu : menuAttached;
     return {
         id,
         parent,

package/admin/src/translations/en.json

@@ -82,6 +82,7 @@
     "notification.navigation.item.relation.status.published": "published",
     "notification.error": "Error while processing request.",
     "notification.error.customField.type": "Unsupported type of custom field",
+    "notification.error.item.relation": "Relations provided in some items are incorrect",
     "pages.main.search.placeholder": "Type to start searching...",
     "pages.main.header.localization.select.placeholder": "Select locale",
     "pages.settings.general.title": "General settings",
@@ -122,6 +123,8 @@
     "pages.settings.notification.submit.error": "Config update has failed",
     "pages.settings.notification.restore.error": "Config restore has failed",
     "pages.settings.notification.restart.error": "Failed to restart your application. Try to do it manually.",
+    "pages.settings.form.cascadeMenuAttached.label": "Cascade menu attached",
+    "pages.settings.form.cascadeMenuAttached.hint": "Disable if you don't want \"Menu attached\" to cascade on child items",
     "pages.settings.form.contentTypes.label": "Enable navigation for",
     "pages.settings.form.i18n.label": "i18n",
     "pages.settings.form.i18n.hint": "Enable internationalisation",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.2.1",
+  "version": "2.3.0-beta.0",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",
@@ -15,7 +15,7 @@
   "scripts": {},
   "dependencies": {
     "@sindresorhus/slugify": "1.1.0",
-    "@strapi/utils": "^4.3.2",
+    "@strapi/utils": "^4.3.8",
     "lodash": "^4.17.11",
     "pluralize": "^8.0.0",
     "react": "^16.9.0",

package/server/config/index.js

@@ -28,7 +28,7 @@ const config = {
         i18nEnabled: false,
         pathDefaultFields: {},
         pruneObsoleteI18nNavigations: false,
-        slugify: {},
+        cascadeMenuAttached: true,
     },
 };
 exports.default = config;

package/server/config/setupStrategy.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configSetupStrategy = void 0;
-const lodash_1 = require("lodash");
 const types_1 = require("../../types");
 const utils_1 = require("../utils");
 const configSetupStrategy = async ({ strapi }) => {
@@ -23,9 +22,9 @@ const configSetupStrategy = async ({ strapi }) => {
         allowedLevels: getWithFallback("allowedLevels"),
         gql: getWithFallback("gql"),
         i18nEnabled: hasI18nPlugin && getWithFallback("i18nEnabled"),
-        slugify: (0, lodash_1.pick)(getWithFallback("slugify"), validSlugifyFields),
         pruneObsoleteI18nNavigations: false,
         pathDefaultFields: getWithFallback("pathDefaultFields"),
+        cascadeMenuAttached: getWithFallback("cascadeMenuAttached"),
     };
     (0, utils_1.validateAdditionalFields)(config.additionalFields);
     await pluginStore.set({
@@ -40,11 +39,4 @@ const getWithFallbackFactory = (config, fallback) => (key) => {
     (0, types_1.assertNotEmpty)(value, new Error(`[Navigation] Config "${key}" is undefined`));
     return value;
 };
-const validSlugifyFields = [
-    "separator",
-    "lowercase",
-    "decamelize",
-    "customReplacements",
-    "preserveLeadingUnderscore",
-];
 //# sourceMappingURL=setupStrategy.js.map