strapi-plugin-navigation 2.3.2 → 2.5.0

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

@@ -67,9 +67,10 @@ const BOX_DEFAULT_PROPS = {
     shadow: "filterShadow",
     padding: 6,
 };
+const noopFallback = () => { };
 const SettingsPage = () => {
-    const { lockApp, unlockApp } = (0, helper_plugin_1.useOverlayBlocker)();
-    const { lockAppWithAutoreload, unlockAppWithAutoreload } = (0, helper_plugin_1.useAutoReloadOverlayBlocker)();
+    const { lockApp = noopFallback, unlockApp = noopFallback } = (0, helper_plugin_1.useOverlayBlocker)();
+    const { lockAppWithAutoreload = noopFallback, unlockAppWithAutoreload = noopFallback } = (0, helper_plugin_1.useAutoReloadOverlayBlocker)();
     const [restartStatus, setRestartStatus] = (0, react_1.useState)(RESTART_NOT_REQUIRED);
     const [pruneObsoleteI18nNavigations, setPruneObsoleteI18nNavigations] = (0, react_1.useState)(false);
     const [isCustomFieldModalOpen, setIsCustomFieldModalOpen] = (0, react_1.useState)(false);
@@ -95,6 +96,7 @@ const SettingsPage = () => {
         pathDefaultFields: (0, lodash_1.get)(navigationConfigData, "pathDefaultFields", {}),
         populate: (0, lodash_1.get)(navigationConfigData, "contentTypesPopulate", {}),
         selectedContentTypes: configContentTypes.map(item => item.uid),
+        isCacheEnabled: (0, lodash_1.get)(navigationConfigData, "isCacheEnabled", false),
     }), [configContentTypes, navigationConfigData, utils_1.navigationItemAdditionalFields]);
     const { disableI18nModal, setDisableI18nModalOpened, setI18nModalOnCancel, } = (0, DisableI18nModal_1.useDisableI18nModal)(({ pruneNavigations }) => {
         setPruneObsoleteI18nNavigations(pruneNavigations);
@@ -104,7 +106,7 @@ const SettingsPage = () => {
             ?.filter((field) => field !== utils_1.navigationItemAdditionalFields.AUDIENCE);
         setCustomFields(additionalFields || []);
     }, [navigationConfigData]);
-    const preparePayload = (0, react_1.useCallback)(({ form: { allowedLevels, audienceFieldChecked, cascadeMenuAttachedChecked, i18nEnabled, nameFields, pathDefaultFields, populate, selectedContentTypes, }, pruneObsoleteI18nNavigations }) => ({
+    const preparePayload = (0, react_1.useCallback)(({ form: { allowedLevels, audienceFieldChecked, cascadeMenuAttachedChecked, i18nEnabled, nameFields, pathDefaultFields, populate, selectedContentTypes, isCacheEnabled, }, pruneObsoleteI18nNavigations }) => ({
         additionalFields: audienceFieldChecked ? ['audience', ...customFields] : [...customFields],
         allowedLevels,
         cascadeMenuAttached: cascadeMenuAttachedChecked,
@@ -116,7 +118,8 @@ const SettingsPage = () => {
         pruneObsoleteI18nNavigations,
         gql: {
             navigationItemRelated: selectedContentTypes.map((uid) => (0, functions_1.resolveGlobalLikeId)(uid)),
-        }
+        },
+        isCacheEnabled,
     }), [customFields]);
     const onSave = async (form) => {
         lockApp();
@@ -124,10 +127,14 @@ const SettingsPage = () => {
         await submitMutation({ body: payload });
         const isContentTypesChanged = !(0, lodash_1.isEqual)(payload.contentTypes, navigationConfigData.contentTypes);
         const isI18nChanged = !(0, lodash_1.isEqual)(payload.i18nEnabled, navigationConfigData.i18nEnabled);
+        const isCacheChanged = !(0, lodash_1.isEqual)(payload.isCacheEnabled, navigationConfigData.isCacheEnabled);
         const restartReasons = [];
         if (isI18nChanged) {
             restartReasons.push('I18N');
         }
+        if (isCacheChanged) {
+            restartReasons.push('CACHE');
+        }
         if (isContentTypesChanged && navigationConfigData.isGQLPluginEnabled) {
             restartReasons.push('GRAPH_QL');
         }
@@ -185,6 +192,7 @@ const SettingsPage = () => {
         return ct;
     }), ct => ct.info.displayName) : [];
     const isI18NPluginEnabled = navigationConfigData?.isI18NPluginEnabled;
+    const isCachePluginEnabled = navigationConfigData?.isCachePluginEnabled;
     const defaultLocale = navigationConfigData?.defaultLocale;
     const handleSubmitCustomField = (field) => {
         const filteredFields = customFields.filter(f => f.name !== field.name);
@@ -251,17 +259,17 @@ 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: 4, s: 6, xs: 12 },
+                                    react_1.default.createElement(Grid_1.GridItem, { col: 6, 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(Grid_1.GridItem, { col: 6, 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(Grid_1.GridItem, { col: 6, 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 },
+                                    isI18NPluginEnabled && (react_1.default.createElement(Grid_1.GridItem, { col: 6, s: 12, xs: 12 },
                                         react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "i18nEnabled", label: (0, utils_2.getMessage)('pages.settings.form.i18n.label'), hint: defaultLocale
                                                 ? (0, utils_2.getMessage)('pages.settings.form.i18n.hint')
                                                 : (0, utils_2.getMessage)('pages.settings.form.i18n.hint.missingDefaultLocale'), checked: values.i18nEnabled, onChange: ({ target: { checked } }) => {
@@ -275,7 +283,12 @@ const SettingsPage = () => {
                                                         setFieldValue('i18nEnabled', true);
                                                     });
                                                 }
-                                            }, onLabel: "Enabled", offLabel: "Disabled", disabled: restartStatus.required || !defaultLocale })))))),
+                                            }, onLabel: "Enabled", offLabel: "Disabled", disabled: restartStatus.required || !defaultLocale })))),
+                                isCachePluginEnabled && (react_1.default.createElement(Grid_1.Grid, { gap: 4 },
+                                    react_1.default.createElement(Grid_1.GridItem, { col: 12, s: 12, xs: 12 },
+                                        react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "cacheEnabled", label: (0, utils_2.getMessage)('pages.settings.form.cache.label'), hint: (0, utils_2.getMessage)('pages.settings.form.cache.hint'), checked: values.isCacheEnabled, onChange: ({ target: { checked } }) => {
+                                                setFieldValue('isCacheEnabled', checked, false);
+                                            }, onLabel: "Enabled", offLabel: "Disabled", disabled: restartStatus.required })))))),
                         react_1.default.createElement(Box_1.Box, { ...BOX_DEFAULT_PROPS },
                             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.customFields.title')),

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

@@ -9,6 +9,7 @@ export type RawPayload = {
     pathDefaultFields: Record<string, string[]>;
     populate: Record<string, string[]>;
     selectedContentTypes: string[];
+    isCacheEnabled: boolean;
 };
 export type StrapiContentTypeSchema = StrapiContentTypeFullSchema & {
     available: boolean;
@@ -23,7 +24,7 @@ export type PreparePayload = (payload: {
 export type OnSave = Effect<RawPayload>;
 export type OnPopupClose = Effect<boolean>;
 export type HandleSetContentTypeExpanded = Effect<string | undefined>;
-export type RestartReasons = 'I18N' | 'GRAPH_QL' | 'I18N_NAVIGATIONS_PRUNE';
+export type RestartReasons = 'I18N' | 'GRAPH_QL' | 'I18N_NAVIGATIONS_PRUNE' | 'CACHE';
 export type RestartStatus = {
     required: true;
     reasons?: RestartReasons[];

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

@@ -4,11 +4,12 @@ exports.defaultValues = exports.schemaFactory = void 0;
 const yup_1 = require("yup");
 const helper_plugin_1 = require("@strapi/helper-plugin");
 const translations_1 = require("../../../translations");
+const common_1 = require("../common");
 const schemaFactory = (usedCustomFieldNames) => {
     return (0, yup_1.object)({
         name: (0, yup_1.string)().matches(/^\S+$/, "Invalid name string. Name cannot contain spaces").required(helper_plugin_1.translatedErrors.required).notOneOf(usedCustomFieldNames, helper_plugin_1.translatedErrors.unique),
         label: (0, yup_1.string)().required(helper_plugin_1.translatedErrors.required),
-        type: (0, yup_1.mixed)().required(helper_plugin_1.translatedErrors.required).oneOf(['string', 'boolean', 'select'], (0, translations_1.getTradId)("notification.error.customField.type")),
+        type: (0, yup_1.mixed)().required(helper_plugin_1.translatedErrors.required).oneOf(common_1.customFieldsTypes, (0, translations_1.getTradId)("notification.error.customField.type")),
         required: (0, yup_1.bool)().required(helper_plugin_1.translatedErrors.required),
         multi: (0, yup_1.mixed)().when('type', {
             is: (val) => val === 'select',

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

@@ -1,5 +1,5 @@
 export default NavigationHeader;
-declare function NavigationHeader({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, config, permissions, }: {
+declare function NavigationHeader({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, handleCachePurge, config, permissions, }: {
     activeNavigation: any;
     availableNavigations: any;
     structureHasErrors: any;
@@ -7,6 +7,7 @@ declare function NavigationHeader({ activeNavigation, availableNavigations, stru
     handleChangeSelection: any;
     handleLocalizationSelection: any;
     handleSave: any;
+    handleCachePurge: any;
     config: any;
     permissions?: {} | undefined;
 }): JSX.Element;

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

@@ -50,7 +50,7 @@ const pickDefaultLocaleNavigation = ({ activeNavigation, config }) => config.i18
             : activeNavigation?.localizations.find(({ localeCode }) => localeCode === config.defaultLocale)
         : null
     : activeNavigation;
-const NavigationHeader = ({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, config, permissions = {}, }) => {
+const NavigationHeader = ({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, handleCachePurge, config, permissions = {}, }) => {
     const { formatMessage } = (0, react_intl_1.useIntl)();
     const allLocaleVersions = (0, react_1.useMemo)(() => activeNavigation?.localizations.length && config.i18nEnabled
         ? (0, lodash_1.uniqBy)([activeNavigation, ...(activeNavigation.localizations ?? [])].sort((a, b) => a.localeCode.localeCompare(b.localeCode)), 'id')
@@ -66,7 +66,7 @@ const NavigationHeader = ({ activeNavigation, availableNavigations, structureHas
             })
             : null), primaryAction: react_1.default.createElement(Stack_1.Stack, { horizontal: true, size: 2 },
             react_1.default.createElement(Box_1.Box, { marginRight: "8px" },
-                react_1.default.createElement(Grid_1.Grid, { gap: 4 },
+                react_1.default.createElement(Grid_1.Grid, { gap: 4, style: config.isCacheEnabled ? { display: "flex" } : undefined },
                     !hasLocalizations ? (react_1.default.createElement(Grid_1.GridItem, { col: 2 })) : null,
                     canUpdate && (react_1.default.createElement(Grid_1.GridItem, { col: 3 },
                         react_1.default.createElement(Button_1.Button, { onClick: openNavigationManagerModal, startIcon: null, type: "button", variant: "secondary", fullWidth: true, size: "S" }, formatMessage((0, translations_1.getTrad)('header.action.manage'))))),
@@ -77,7 +77,9 @@ const NavigationHeader = ({ activeNavigation, availableNavigations, structureHas
                             react_1.default.createElement(Select_1.Select, { type: "select", placeholder: formatMessage((0, translations_1.getTrad)('pages.main.header.localization.select.placeholder')), name: "navigationLocalizationSelect", onChange: handleLocalizationSelection, value: activeNavigation?.id, size: "S" }, allLocaleVersions.map(({ id, localeCode }) => react_1.default.createElement(Select_1.Option, { key: id, value: id }, localeCode))))
                         : null,
                     canUpdate && (react_1.default.createElement(Grid_1.GridItem, { col: 3 },
-                        react_1.default.createElement(Button_1.Button, { onClick: handleSave, startIcon: submitIcon, disabled: structureHasErrors || !structureHasChanged, type: "submit", fullWidth: true, size: "S" }, formatMessage((0, translations_1.getTrad)('submit.cta.save'))))))),
+                        react_1.default.createElement(Button_1.Button, { onClick: handleSave, startIcon: submitIcon, disabled: structureHasErrors || !structureHasChanged, type: "submit", fullWidth: true, size: "S" }, formatMessage((0, translations_1.getTrad)('submit.cta.save'))))),
+                    config.isCacheEnabled && (react_1.default.createElement(Grid_1.GridItem, { col: 3 },
+                        react_1.default.createElement(Button_1.Button, { onClick: handleCachePurge, variant: "danger", type: "submit", fullWidth: true, size: "S" }, formatMessage((0, translations_1.getTrad)('submit.cta.cache.purge'))))))),
             canUpdate && navigationManagerModal), title: formatMessage({
             id: (0, translations_1.getTrad)('header.title'),
             defaultMessage: 'UI Navigation',

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

@@ -47,9 +47,9 @@ const utils_2 = require("../../../../utils");
 const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading, inputsPrefix, data, contentTypes = [], contentTypeEntities = [], usedContentTypeEntities = [], availableAudience = [], additionalFields = [], contentTypesNameFields = {}, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus = appendLabelPublicationStatusFallback, locale, readNavigationItemFromLocale, slugify, permissions = {}, }) => {
     const [isLoading, setIsLoading] = (0, react_1.useState)(isPreloading);
     const [hasBeenInitialized, setInitializedState] = (0, react_1.useState)(false);
+    const [autoSync, setAutoSync] = (0, react_1.useState)(true);
     const [hasChanged, setChangedState] = (0, react_1.useState)(false);
     const [contentTypeSearchQuery, setContentTypeSearchQuery] = (0, react_1.useState)(undefined);
-    const [contentTypeSearchInputValue, setContentTypeSearchInputValue] = (0, react_1.useState)(undefined);
     const { canUpdate } = permissions;
     const formik = (0, formik_1.useFormik)({
         initialValues: formDefinition.defaultValues,
@@ -61,14 +61,17 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
     const relatedTypeSelectValue = formik.values.relatedType;
     const relatedSelectValue = formik.values.related;
     const isI18nBootstrapAvailable = !!(config.i18nEnabled && availableLocale && availableLocale.length);
-    const availableLocaleOptions = (0, react_1.useMemo)(() => availableLocale.map((locale) => ({
+    const availableLocaleOptions = (0, react_1.useMemo)(() => availableLocale.map((locale, index) => ({
+        key: `${locale}-${index}`,
         value: locale,
         label: locale,
         metadatas: {
             intlLabel: {
                 id: `i18n.locale.${locale}`,
                 defaultMessage: locale,
-            }
+            },
+            hidden: false,
+            disabled: false,
         },
     })), [availableLocale]);
     const relatedFieldName = `${inputsPrefix}related`;
@@ -107,7 +110,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
                 values: { value }
             };
         }
-        return null;
+        return undefined;
     };
     const getDefaultTitle = (0, react_1.useCallback)((related, relatedType, isSingleSelected) => {
         let selectedEntity;
@@ -155,6 +158,28 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             updated: true,
             [name]: value,
         }));
+        if (name === "related" && relatedTypeSelectValue && autoSync) {
+            const { contentTypesNameFields, pathDefaultFields } = config;
+            const selectedRelated = contentTypeEntities.find(({ id, __collectionUid }) => `${id}` === `${value}` && __collectionUid === relatedTypeSelectValue);
+            const newPath = pathDefaultFields[relatedTypeSelectValue]?.reduce((acc, field) => {
+                return acc ? acc : selectedRelated?.[field];
+            }, null);
+            const newTitle = (contentTypesNameFields[relatedTypeSelectValue] ?? []).concat(contentTypesNameFields.default || []).reduce((acc, field) => {
+                return acc ? acc : selectedRelated?.[field];
+            }, null);
+            const batch = [];
+            if (newPath) {
+                batch.push({ name: "path", value: newPath });
+            }
+            if (newTitle) {
+                batch.push({ name: "title", value: newTitle });
+            }
+            batch.forEach((next, i) => {
+                setTimeout(() => {
+                    onChange(next);
+                }, i * 100);
+            });
+        }
         if (name === "type") {
             formik.setErrors({});
         }
@@ -181,9 +206,12 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
     const onAudienceChange = (0, react_1.useCallback)((value) => {
         onChange({ name: "audience", value });
     }, [onChange]);
-    const onAdditionalFieldChange = (name, newValue) => {
+    const onAdditionalFieldChange = (name, newValue, fieldType) => {
         const fieldsValue = formik.values.additionalFields;
-        const value = { ...fieldsValue, [name]: newValue };
+        const value = {
+            ...fieldsValue,
+            [name]: fieldType === "media" && newValue ? JSON.stringify(newValue) : newValue
+        };
         onChange({
             name: "additionalFields",
             value,
@@ -212,7 +240,9 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
                 intlLabel: {
                     id: (0, translations_1.getTradId)(`popup.item.form.type.${value}.label`),
                     defaultMessage: (0, translations_1.getTradId)(`popup.item.form.type.${value}.label`),
-                }
+                },
+                hidden: false,
+                disabled: false,
             }
         };
     });
@@ -228,29 +258,25 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             __collectionUid: (0, lodash_1.get)(relatedTypeSelectValue, 'value', relatedTypeSelectValue),
         }, contentTypesNameFields, { contentTypes }), item);
         return ({
-            key: (0, lodash_1.get)(item, 'id'),
+            key: (0, lodash_1.get)(item, 'id').toString(),
             metadatas: {
                 intlLabel: {
                     id: label || `${item.__collectionUid} ${item.id}`,
                     defaultMessage: label || `${item.__collectionUid} ${item.id}`,
-                }
+                },
+                hidden: false,
+                disabled: false,
             },
-            value: item.id,
+            value: item.id.toString(),
             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)) || isLoading;
-    const debouncedSearch = (0, react_1.useCallback)((0, lodash_1.debounce)(nextValue => setContentTypeSearchQuery(nextValue), 500), []);
-    const debounceContentTypeSearchQuery = (value) => {
-        setContentTypeSearchInputValue(value);
-        debouncedSearch(value);
-    };
     const onChangeRelatedType = ({ target: { name, value } }) => {
         const relatedTypeBeingReverted = data.relatedType && (data.relatedType.value === (0, lodash_1.get)(value, 'value', value));
         setContentTypeSearchQuery(undefined);
-        setContentTypeSearchInputValue(undefined);
         formik.setValues(prevState => ({
             ...prevState,
             updated: true,
@@ -277,7 +303,9 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             intlLabel: {
                 id: (0, lodash_1.get)(item, 'label', (0, lodash_1.get)(item, 'name')),
                 defaultMessage: (0, lodash_1.get)(item, 'label', (0, lodash_1.get)(item, 'name')),
-            }
+            },
+            disabled: false,
+            hidden: false,
         },
         value: (0, lodash_1.get)(item, 'uid'),
         label: (0, lodash_1.get)(item, 'label', (0, lodash_1.get)(item, 'name')),
@@ -386,7 +414,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             react_1.default.createElement(ModalLayout_1.ModalBody, null,
                 react_1.default.createElement(Grid_1.Grid, { gap: 5 },
                     react_1.default.createElement(Grid_1.GridItem, { key: "title", col: 12 },
-                        react_1.default.createElement(helper_plugin_1.GenericInput, { autoFocused: true, intlLabel: (0, translations_1.getTrad)('popup.item.form.title.label', 'Title'), name: "title", placeholder: (0, translations_1.getTrad)("e.g. Blog", 'e.g. Blog'), description: (0, translations_1.getTrad)('popup.item.form.title.placeholder', 'e.g. Blog'), type: "text", disabled: !canUpdate, error: formik.errors.title, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.title })),
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.title.label', 'Title'), name: "title", placeholder: (0, translations_1.getTrad)("e.g. Blog", 'e.g. Blog'), description: (0, translations_1.getTrad)('popup.item.form.title.placeholder', 'e.g. Blog'), type: "text", disabled: !canUpdate, error: formik.errors.title, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.title })),
                     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", disabled: !canUpdate, 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 },
@@ -394,12 +422,14 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
                     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", disabled: !canUpdate, 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,
+                        react_1.default.createElement(Grid_1.GridItem, { key: "menuAttached", col: 12 },
+                            react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.autoSync.label', 'Read fields from related'), name: "autoSync", type: "bool", onChange: ({ target: { value } }) => setAutoSync(value), value: autoSync })),
                         react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
                             react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: (0, translations_1.getTrad)('popup.item.form.relatedType.label', 'Related Type'), placeholder: (0, translations_1.getTrad)('popup.item.form.relatedType.placeholder', 'Related Type'), name: "relatedType", error: formik.errors.relatedType, onChange: onChangeRelatedType, options: relatedTypeSelectOptions, value: formik.values.relatedType, disabled: isLoading || (0, lodash_1.isEmpty)(relatedTypeSelectOptions) || !canUpdate, description: !isLoading && (0, lodash_1.isEmpty)(relatedTypeSelectOptions)
                                     ? (0, translations_1.getTrad)('popup.item.form.relatedType.empty', 'There are no more content types')
                                     : undefined })),
                         formik.values.relatedType && !isSingleSelected && (react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
-                            react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), placeholder: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), name: "related", error: formik.errors.related, onChange: ({ target: { name, value } }) => onChange({ name, value }), onInputChange: debounceContentTypeSearchQuery, inputValue: contentTypeSearchInputValue, options: relatedSelectOptions, value: formik.values.related, disabled: isLoading || thereAreNoMoreContentTypes || !canUpdate, description: !isLoading && thereAreNoMoreContentTypes
+                            react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), placeholder: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), name: "related", error: formik.errors.related, onChange: ({ target: { name, value } }) => onChange({ name, value }), options: relatedSelectOptions, value: formik.values.related, disabled: isLoading || thereAreNoMoreContentTypes || !canUpdate, description: !isLoading && thereAreNoMoreContentTypes
                                     ? {
                                         id: (0, translations_1.getTradId)('popup.item.form.related.empty'),
                                         defaultMessage: 'There are no more entities',

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

@@ -40,6 +40,7 @@ export type NavigationItemFormData = {
     };
     relatedRef?: ToBeFixed;
     structureId: ToBeFixed;
+    additionalFields?: ToBeFixed;
 };
 export type NavigationItemFormProps = {
     additionalFields: NavigationItemAdditionalField[];
@@ -63,7 +64,7 @@ export type NavigationItemFormProps = {
     slugify: (q: string) => Promise<{
         slug: string;
     }>;
-    permissions: PluginPermissions;
+    permissions: Partial<PluginPermissions>;
 };
 export type ContentTypeSearchQuery = ToBeFixed;
 export type RawFormPayload = {

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

@@ -89,6 +89,8 @@ const schemaFactory = (isSingleSelected, additionalFields) => {
                     value = yup.array().of(yup.string());
                 else if (current.type === 'select' && !current.multi)
                     value = yup.string();
+                else if (current.type === 'media')
+                    value = yup.mixed();
                 else
                     throw new Error(`Type "${current.type}" is unsupported by custom fields`);
                 if (current.required)

package/admin/src/pages/View/components/NavigationManager/AllNavigations/icons.d.ts

@@ -1,3 +1,4 @@
 export declare const edit: JSX.Element;
 export declare const deleteIcon: JSX.Element;
+export declare const brushIcon: JSX.Element;
 //# sourceMappingURL=icons.d.ts.map

package/admin/src/pages/View/components/NavigationManager/AllNavigations/icons.js

@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteIcon = exports.edit = void 0;
+exports.brushIcon = exports.deleteIcon = exports.edit = void 0;
 const react_1 = __importDefault(require("react"));
 const icons_1 = require("@strapi/icons");
 exports.edit = react_1.default.createElement(icons_1.Pencil, null);
 exports.deleteIcon = react_1.default.createElement(icons_1.Trash, null);
+exports.brushIcon = react_1.default.createElement(icons_1.Brush, null);
 //# sourceMappingURL=icons.js.map

package/admin/src/pages/View/components/NavigationManager/AllNavigations/index.js

@@ -43,7 +43,7 @@ const Footer_1 = require("../Footer");
 const NewNavigation_1 = require("../NewNavigation");
 const icons = __importStar(require("./icons"));
 const AllNavigations = ({ navigations, selected, setState }) => {
-    const { config: { i18nEnabled }, } = (0, useDataManager_1.default)();
+    const { config: { i18nEnabled, isCacheEnabled }, } = (0, useDataManager_1.default)();
     const hasAnySelected = !!selected.length;
     const toggleSelected = (0, react_1.useCallback)(() => setState({
         navigations,
@@ -73,7 +73,14 @@ const AllNavigations = ({ navigations, selected, setState }) => {
             navigations,
         });
     };
+    const purgeCache = (navigations) => () => {
+        setState({
+            view: "CACHE_PURGE",
+            navigations,
+        });
+    };
     const deleteSelected = (0, react_1.useCallback)(_delete(selected), [_delete]);
+    const purgeSelected = (0, react_1.useCallback)(purgeCache(selected), [purgeCache]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Grid_1.Grid, null,
             react_1.default.createElement(Grid_1.GridItem, { col: 12, paddingBottom: 3 }, hasAnySelected ? (react_1.default.createElement(Flex_1.Flex, { direction: "row", gap: 1 },
@@ -83,7 +90,8 @@ const AllNavigations = ({ navigations, selected, setState }) => {
                         count: selected.length,
                     },
                 })),
-                react_1.default.createElement(Button_1.Button, { onClick: deleteSelected, variant: "tertiary" }, (0, utils_1.getMessage)("popup.navigation.manage.button.delete")))) : null)),
+                react_1.default.createElement(Button_1.Button, { onClick: deleteSelected, variant: "tertiary" }, (0, utils_1.getMessage)("popup.navigation.manage.button.delete")),
+                isCacheEnabled ? (react_1.default.createElement(Button_1.Button, { onClick: purgeSelected, variant: "tertiary" }, (0, utils_1.getMessage)("popup.navigation.manage.button.purge"))) : null)) : null)),
         react_1.default.createElement(Table_1.Table, { rowCount: navigations.length, colCount: i18nEnabled ? 6 : 5 },
             react_1.default.createElement(Table_1.Thead, null,
                 react_1.default.createElement(Table_1.Tr, null,
@@ -97,7 +105,9 @@ const AllNavigations = ({ navigations, selected, setState }) => {
                         react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.locale")))) : null,
                     react_1.default.createElement(Table_1.Th, null,
                         react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.visibility"))),
-                    react_1.default.createElement(Table_1.Th, null))),
+                    react_1.default.createElement(Table_1.Th, null, isCacheEnabled ? (react_1.default.createElement(Flex_1.Flex, { direction: "row" },
+                        react_1.default.createElement(Box_1.Box, { paddingLeft: 1 },
+                            react_1.default.createElement(IconButton_1.IconButton, { onClick: purgeCache([]), label: (0, utils_1.getMessage)("popup.navigation.manage.button.purge"), noBorder: true, icon: icons.brushIcon })))) : null))),
             react_1.default.createElement(Table_1.Tbody, null, navigations.map((navigation) => (react_1.default.createElement(Table_1.Tr, { key: navigation.id },
                 react_1.default.createElement(Table_1.Td, null,
                     react_1.default.createElement(BaseCheckbox_1.BaseCheckbox, { onValueChange: handleSelect(navigation, currentlySelectedSet.has(navigation.id)), value: currentlySelectedSet.has(navigation.id) })),
@@ -117,7 +127,9 @@ const AllNavigations = ({ navigations, selected, setState }) => {
                         react_1.default.createElement(Box_1.Box, { paddingLeft: 1 },
                             react_1.default.createElement(IconButton_1.IconButton, { onClick: edit(navigation), label: (0, utils_1.getMessage)("popup.navigation.manage.button.edit"), noBorder: true, icon: icons.edit })),
                         react_1.default.createElement(Box_1.Box, { paddingLeft: 1 },
-                            react_1.default.createElement(IconButton_1.IconButton, { onClick: _delete([navigation]), label: (0, utils_1.getMessage)("popup.navigation.manage.button.delete"), noBorder: true, icon: icons.deleteIcon })))))))))));
+                            react_1.default.createElement(IconButton_1.IconButton, { onClick: _delete([navigation]), label: (0, utils_1.getMessage)("popup.navigation.manage.button.delete"), noBorder: true, icon: icons.deleteIcon })),
+                        isCacheEnabled ? (react_1.default.createElement(Box_1.Box, { paddingLeft: 1 },
+                            react_1.default.createElement(IconButton_1.IconButton, { onClick: purgeCache([navigation]), label: (0, utils_1.getMessage)("popup.navigation.manage.button.purge"), noBorder: true, icon: icons.brushIcon }))) : null)))))))));
 };
 exports.AllNavigations = AllNavigations;
 const AllNavigationsFooter = ({ onClose, state, setState, navigations, }) => (react_1.default.createElement(Footer_1.FooterBase, { start: {

package/admin/src/pages/View/components/NavigationManager/PurgeCacheConfirm/index.d.ts

@@ -0,0 +1,8 @@
+import { Footer } from "../Footer";
+import { CommonProps, PurgeCacheState } from "../types";
+interface Props extends PurgeCacheState, CommonProps {
+}
+export declare const PurgeCacheConfirm: ({ navigations }: Props) => JSX.Element;
+export declare const PurgeCacheConfirmFooter: Footer;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/PurgeCacheConfirm/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PurgeCacheConfirmFooter = exports.PurgeCacheConfirm = void 0;
+const Flex_1 = require("@strapi/design-system/Flex");
+const Grid_1 = require("@strapi/design-system/Grid");
+const Typography_1 = require("@strapi/design-system/Typography");
+const fp_1 = require("lodash/fp");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../../../utils");
+const Footer_1 = require("../Footer");
+const PurgeCacheConfirm = ({ navigations }) => (react_1.default.createElement(Grid_1.Grid, null,
+    react_1.default.createElement(Grid_1.GridItem, { col: 12, paddingBottom: 1 },
+        react_1.default.createElement(Flex_1.Flex, null,
+            react_1.default.createElement(Typography_1.Typography, { variant: "beta" }, (0, utils_1.getMessage)("popup.navigation.manage.purge.header")))),
+    react_1.default.createElement(Grid_1.GridItem, { col: 12, paddingBottom: 1 },
+        react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "semiBold" }, renderItems(navigations)))));
+exports.PurgeCacheConfirm = PurgeCacheConfirm;
+const PurgeCacheConfirmFooter = ({ state, onSubmit, onReset }) => (react_1.default.createElement(Footer_1.FooterBase, { start: {
+        children: (0, utils_1.getMessage)("popup.item.form.button.cancel"),
+        disabled: state.isLoading,
+        onClick: onReset,
+        variant: "tertiary",
+    }, end: {
+        children: (0, utils_1.getMessage)("popup.navigation.manage.footer.button.purge"),
+        disabled: state.isLoading,
+        onClick: onSubmit,
+        variant: "danger",
+    } }));
+exports.PurgeCacheConfirmFooter = PurgeCacheConfirmFooter;
+const renderItems = (navigations) => navigations.map((0, fp_1.prop)("name")).join(", ");
+//# sourceMappingURL=index.js.map

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

@@ -41,10 +41,11 @@ const DeletionConfirm_1 = require("./DeletionConfirm");
 const ErrorDetails_1 = require("./ErrorDetails");
 const NavigationUpdate_1 = require("./NavigationUpdate");
 const NewNavigation_1 = require("./NewNavigation");
+const PurgeCacheConfirm_1 = require("./PurgeCacheConfirm");
 const NavigationManager = ({ initialState, isOpened, onClose, }) => {
     const { formatMessage } = (0, react_intl_1.useIntl)();
     const [state, setState] = (0, react_1.useState)(initialState);
-    const { items = [], handleNavigationsDeletion, handleSubmitNavigation, hardReset, } = (0, useDataManager_1.default)();
+    const { items = [], handleNavigationsDeletion, handleNavigationsPurge, handleSubmitNavigation, hardReset, } = (0, useDataManager_1.default)();
     const navigations = (0, react_1.useMemo)(() => (0, lodash_1.sortBy)(items, "id"), [items]);
     const onReset = (0, react_1.useCallback)(() => setState({ view: "INITIAL" }), [setState]);
     const onSubmit = (0, react_1.useCallback)(async () => {
@@ -58,7 +59,12 @@ const NavigationManager = ({ initialState, isOpened, onClose, }) => {
                     await handleSubmitNavigation(formatMessage, state.current);
                     await hardReset();
                 }
-                : () => { };
+                : state.view === "CACHE_PURGE"
+                    ? async () => {
+                        await handleNavigationsPurge(state.navigations.map((0, fp_1.prop)("id")), true, true);
+                        await hardReset();
+                    }
+                    : () => { };
         try {
             setState({
                 ...state,
@@ -110,6 +116,7 @@ const renderHeader = (state) => {
         case "LIST":
         case "CREATE":
         case "ERROR":
+        case "CACHE_PURGE":
         case "DELETE": {
             return (react_1.default.createElement(Flex_1.Flex, { direction: "row" },
                 state.isLoading ? react_1.default.createElement(Loader_1.Loader, { small: true }) : null,
@@ -149,6 +156,9 @@ const renderContent = (state, setState) => {
         case "DELETE": {
             return react_1.default.createElement(DeletionConfirm_1.DeletionConfirm, { ...state, ...commonProps });
         }
+        case "CACHE_PURGE": {
+            return react_1.default.createElement(PurgeCacheConfirm_1.PurgeCacheConfirm, { ...state, ...commonProps });
+        }
         case "INITIAL": {
             return react_1.default.createElement(Loader_1.Loader, { small: true });
         }
@@ -173,6 +183,9 @@ const renderFooter = (props) => {
         case "DELETE": {
             return react_1.default.createElement(DeletionConfirm_1.DeleteConfirmFooter, { ...props });
         }
+        case "CACHE_PURGE": {
+            return react_1.default.createElement(PurgeCacheConfirm_1.PurgeCacheConfirmFooter, { ...props });
+        }
         case "ERROR": {
             return react_1.default.createElement(ErrorDetails_1.ErrorDetailsFooter, { ...props });
         }

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

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { Navigation as FullNavigationEntity } from "../../../../../../types";
 export type Navigation = Pick<FullNavigationEntity, "id" | "items" | "name" | "localeCode" | "localizations" | "visible">;
-export type State = InitialState | ListState | EditState | CreateState | DeleteState | ErrorState;
+export type State = InitialState | ListState | EditState | CreateState | DeleteState | PurgeCacheState | ErrorState;
 export type SetState = Dispatch<SetStateAction<State>>;
 interface CommonState {
     isLoading?: boolean;
@@ -32,6 +32,10 @@ export interface DeleteState extends CommonState {
     view: "DELETE";
     navigations: Array<Navigation>;
 }
+export interface PurgeCacheState extends CommonState {
+    view: "CACHE_PURGE";
+    navigations: Array<Navigation>;
+}
 export interface ErrorState extends CommonState {
     view: "ERROR";
     errors: Array<Error>;