strapi-plugin-navigation 2.4.0 → 2.5.0

package/README.md

@@ -52,6 +52,7 @@ Strapi Navigation Plugin provides a website navigation / menu builder feature fo
    - [GraphQL API](#graphql-api)
 10. [🔌 Extensions](#-extensions)
 11. [🌿 Model lifecycle hooks](#model-life-cycle-hooks)
+11. [🧹 REST Cache](#rest-cache)
 12. [🧩 Examples](#-examples)
 13. [💬 FAQ](#-faq)
 14. [🤝 Contributing](#-contributing)
@@ -123,7 +124,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.20.x (recently tested)
+- Strapi v4.23.x (recently tested)
 - Strapi v4.x
 
 > This plugin is designed for **Strapi v4** and is not working with v3.x. To get version for **Strapi v3** install version [v1.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/strapi-v3).
@@ -774,6 +775,16 @@ Example:
   });
 ```
 
+## 🧹 REST Cache
+
+If your strapi server uses [REST Cache plugin](https://strapi-community.github.io/strapi-plugin-rest-cache/) this plugin can take integrate with it. All you need to do is to enable it in configuration of Navigation plugin. After integration is enabled all client calls will be wrapped with caching middleware.
+
+In admin panel new controls will be available. Cache clearing is done manually or after cache will timeout(`rest-cache` plugin's settings are used).
+
+Navigation edit screen will have "Clear cache" button.
+
+Navigation management modal items will also have icon button for clearing the cache.
+
 ## 🧩 Examples
 
 Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-navigation) repository.

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

@@ -13,6 +13,8 @@ export const GET_CONFIG_SUCCEEDED: "GET_CONFIG_SUCCEEDED";
 export const SUBMIT_NAVIGATION: "SUBMIT_NAVIGATION";
 export const SUBMIT_NAVIGATION_SUCCEEDED: "SUBMIT_NAVIGATION_SUCCEEDED";
 export const SUBMIT_NAVIGATION_ERROR: "SUBMIT_NAVIGATION_ERROR";
+export const CACHE_CLEAR: "CACHE_CLEAR";
+export const CACHE_CLEAR_SUCCEEDED: "CACHE_CLEAR_SUCCEEDED";
 export const RELOAD_PLUGIN: "RELOAD_PLUGIN";
 export const I18N_COPY_NAVIGATION: "I18N_COPY_NAVIGATION";
 export const I18N_COPY_NAVIGATION_SUCCESS: "I18N_COPY_NAVIGATION_SUCCESS";

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.I18N_COPY_NAVIGATION_SUCCESS = exports.I18N_COPY_NAVIGATION = exports.RELOAD_PLUGIN = exports.SUBMIT_NAVIGATION_ERROR = exports.SUBMIT_NAVIGATION_SUCCEEDED = exports.SUBMIT_NAVIGATION = exports.GET_CONFIG_SUCCEEDED = exports.GET_CONFIG = exports.GET_CONTENT_TYPE_ITEMS_SUCCEEDED = exports.GET_CONTENT_TYPE_ITEMS = exports.CHANGE_NAVIGATION_ITEM_POPUP_VISIBILITY = exports.CHANGE_NAVIGATION_POPUP_VISIBILITY = exports.RESET_NAVIGATION_DATA = exports.CHANGE_NAVIGATION_DATA = exports.GET_NAVIGATION_DATA_SUCCEEDED = exports.GET_NAVIGATION_DATA = exports.GET_LIST_DATA_SUCCEEDED = exports.GET_LIST_DATA = void 0;
+exports.I18N_COPY_NAVIGATION_SUCCESS = exports.I18N_COPY_NAVIGATION = exports.RELOAD_PLUGIN = exports.CACHE_CLEAR_SUCCEEDED = exports.CACHE_CLEAR = exports.SUBMIT_NAVIGATION_ERROR = exports.SUBMIT_NAVIGATION_SUCCEEDED = exports.SUBMIT_NAVIGATION = exports.GET_CONFIG_SUCCEEDED = exports.GET_CONFIG = exports.GET_CONTENT_TYPE_ITEMS_SUCCEEDED = exports.GET_CONTENT_TYPE_ITEMS = exports.CHANGE_NAVIGATION_ITEM_POPUP_VISIBILITY = exports.CHANGE_NAVIGATION_POPUP_VISIBILITY = exports.RESET_NAVIGATION_DATA = exports.CHANGE_NAVIGATION_DATA = exports.GET_NAVIGATION_DATA_SUCCEEDED = exports.GET_NAVIGATION_DATA = exports.GET_LIST_DATA_SUCCEEDED = exports.GET_LIST_DATA = void 0;
 exports.GET_LIST_DATA = "GET_LIST_DATA";
 exports.GET_LIST_DATA_SUCCEEDED = "GET_LIST_DATA_SUCCEEDED";
 exports.GET_NAVIGATION_DATA = "GET_NAVIGATION_DATA";
@@ -16,6 +16,8 @@ exports.GET_CONFIG_SUCCEEDED = "GET_CONFIG_SUCCEEDED";
 exports.SUBMIT_NAVIGATION = "SUBMIT_NAVIGATION";
 exports.SUBMIT_NAVIGATION_SUCCEEDED = "SUBMIT_NAVIGATION_SUCCEEDED";
 exports.SUBMIT_NAVIGATION_ERROR = "SUBMIT_NAVIGATION_ERROR";
+exports.CACHE_CLEAR = "CACHE_CLEAR";
+exports.CACHE_CLEAR_SUCCEEDED = "CACHE_CLEAR_SUCCEEDED";
 exports.RELOAD_PLUGIN = "RELOAD_PLUGIN";
 exports.I18N_COPY_NAVIGATION = "I18N_COPY_NAVIGATION";
 exports.I18N_COPY_NAVIGATION_SUCCESS = "I18N_COPY_NAVIGATION_SUCCESS";

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

@@ -296,6 +296,33 @@ const DataManagerProvider = ({ children }) => {
         }
     };
     const handleNavigationsDeletion = (ids) => Promise.all(ids.map(handleNavigationDeletion));
+    const handleNavigationsPurge = async (ids, withLangVersions = false, skipDispatch = false) => {
+        if (!skipDispatch) {
+            dispatch({ type: actions_1.CACHE_CLEAR });
+        }
+        try {
+            if (ids.length) {
+                await Promise.all(ids.map((id) => handleNavigationPurgeReq(id, withLangVersions)));
+            }
+            else {
+                await handleNavigationsPurgeReq();
+            }
+        }
+        catch (error) {
+            console.error("Unable to clear navigation cache");
+        }
+        if (!skipDispatch) {
+            dispatch({ type: actions_1.CACHE_CLEAR_SUCCEEDED });
+        }
+    };
+    const handleNavigationPurgeReq = (id, withLangVersions) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/cache/purge/${id}?clearLocalisations=${!!withLangVersions}`, {
+        method: "DELETE",
+        signal,
+    });
+    const handleNavigationsPurgeReq = () => (0, helper_plugin_1.request)(`/${pluginId_1.default}/cache/purge`, {
+        method: "DELETE",
+        signal,
+    });
     const handleNavigationDeletion = (id) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/${id}`, {
         method: "DELETE",
         signal,
@@ -340,6 +367,7 @@ const DataManagerProvider = ({ children }) => {
             availableLocale,
             readNavigationItemFromLocale,
             handleNavigationsDeletion,
+            handleNavigationsPurge,
             hardReset,
             slugify,
             permissions: {

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

@@ -116,6 +116,14 @@ const reducer = (state, action) => (0, immer_1.default)(state, draftState => {
             draftState.isLoading = false;
             break;
         }
+        case actions_1.CACHE_CLEAR: {
+            draftState.isLoading = true;
+            break;
+        }
+        case actions_1.CACHE_CLEAR_SUCCEEDED: {
+            draftState.isLoading = false;
+            break;
+        }
         default:
             return draftState;
     }

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

@@ -96,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);
@@ -105,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,
@@ -117,7 +118,8 @@ const SettingsPage = () => {
         pruneObsoleteI18nNavigations,
         gql: {
             navigationItemRelated: selectedContentTypes.map((uid) => (0, functions_1.resolveGlobalLikeId)(uid)),
-        }
+        },
+        isCacheEnabled,
     }), [customFields]);
     const onSave = async (form) => {
         lockApp();
@@ -125,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');
         }
@@ -186,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);
@@ -252,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 } }) => {
@@ -276,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/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/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>;

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

@@ -54,7 +54,7 @@ const parsers_1 = require("./utils/parsers");
 const NoAccessPage_1 = __importDefault(require("../NoAccessPage"));
 const View = () => {
     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, permissions, } = (0, useDataManager_1.default)();
+    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, permissions, handleNavigationsPurge, } = (0, useDataManager_1.default)();
     const { canAccess, canUpdate } = permissions;
     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) => {
@@ -83,6 +83,9 @@ const View = () => {
     const handleSave = () => isLoadingForSubmit || structureHasErrors
         ? null
         : handleSubmitNavigation(formatMessage, (0, parsers_1.transformToRESTPayload)(changedActiveNavigation, config));
+    const handleCachePurge = () => {
+        handleNavigationsPurge([navigationSelectValue]);
+    };
     const changeNavigationItemPopupState = (visible, editedItem = {}) => {
         setActiveNavigationItemState(editedItem);
         handleChangeNavigationItemPopupVisibility(visible);
@@ -233,7 +236,7 @@ const View = () => {
         });
     }
     return (react_1.default.createElement(Main_1.Main, { labelledBy: "title", "aria-busy": isLoadingForSubmit },
-        react_1.default.createElement(NavigationHeader_1.default, { structureHasErrors: structureHasErrors, structureHasChanged: structureChanged, availableNavigations: availableNavigations, activeNavigation: activeNavigation, handleChangeSelection: handleChangeNavigationSelection, handleSave: handleSave, handleLocalizationSelection: handleLocalizationSelection, config: config, permissions: {
+        react_1.default.createElement(NavigationHeader_1.default, { structureHasErrors: structureHasErrors, structureHasChanged: structureChanged, availableNavigations: availableNavigations, activeNavigation: activeNavigation, handleChangeSelection: handleChangeNavigationSelection, handleSave: handleSave, handleCachePurge: handleCachePurge, handleLocalizationSelection: handleLocalizationSelection, config: config, permissions: {
                 canAccess, canUpdate
             } }),
         react_1.default.createElement(Layout_1.ContentLayout, null,

package/admin/src/translations/en.json

@@ -9,6 +9,7 @@
     "header.action.expandAll": "Expand All",
     "submit.cta.cancel": "Cancel",
     "submit.cta.save": "Save",
+    "submit.cta.cache.purge": "Clear cache",
     "empty": "Your navigation is empty",
     "empty.cta": "Create first item",
     "popup.item.header.view": "View navigation item",
@@ -66,10 +67,14 @@
     "popup.navigation.manage.button.goBack": "Go back",
     "popup.navigation.manage.button.cancel": "Cancel",
     "popup.navigation.manage.button.delete": "Delete",
+    "popup.navigation.manage.button.purge": "Clear read cache",
+    "popup.navigation.manage.footer.button.purge": "Clear",
+    "popup.navigation.manage.purge.header": "This action will clear API read cache. This will result in brief slowdown of reads for navigations below.",
     "popup.navigation.manage.button.save": "Save",
     "popup.navigation.manage.button.edit": "Edit",
     "popup.navigation.manage.button.create": "Create",
     "popup.navigation.manage.delete.header": "Following navigations will be removed:",
+    "popup.navigation.manage.header.CACHE_PURGE": "Read cache clear",
     "popup.navigation.manage.header.LIST": "All navigations",
     "popup.navigation.manage.header.CREATE": "New navigation",
     "popup.navigation.manage.header.DELETE": "Deleting",
@@ -134,6 +139,8 @@
     "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.cache.label": "REST cache",
+    "pages.settings.form.cache.hint": "Enable caching of client read requests",
     "pages.settings.form.i18n.label": "i18n",
     "pages.settings.form.i18n.hint": "Enable internationalisation",
     "pages.settings.form.i18n.hint.missingDefaultLocale": "Default locale missing!",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",
@@ -16,19 +16,19 @@
   "types": "./types/index.d.ts",
   "dependencies": {
     "@sindresorhus/slugify": "1.1.0",
-    "@strapi/utils": "^4.20.0",
+    "@strapi/utils": "^4.23.1",
     "lodash": "^4.17.21",
     "pluralize": "^8.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "react-intl": "6.4.1",
     "react-router": "^5.3.4",
-    "react-router-dom": "^5.3.4",
+    "react-router-dom": "^5.2.0",
     "uuid": "^8.3.0"
   },
   "devDependencies": {},
   "peerDependencies": {
-    "@strapi/data-transfer": "4.15.5",
+    "@strapi/data-transfer": "4.23.1",
     "@strapi/strapi": "4.x",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",

package/server/bootstrap/index.js

@@ -6,6 +6,7 @@ const permissions_1 = __importDefault(require("../../permissions"));
 const graphql_1 = require("../graphql");
 const navigation_1 = require("../navigation");
 const config_1 = require("../config");
+const cache_1 = require("../cache");
 const assertUserPermissionsAvailability = ({ strapi }) => {
     if (!strapi.plugin("users-permissions")) {
         throw new Error("In order to make the navigation plugin work the users-permissions plugin is required");
@@ -14,6 +15,7 @@ const assertUserPermissionsAvailability = ({ strapi }) => {
 const setupGraphQL = graphql_1.graphQLSetupStrategy;
 const setupNavigation = navigation_1.navigationSetupStrategy;
 const setupConfig = config_1.configSetupStrategy;
+const setupCache = cache_1.setupCacheStrategy;
 const setupPermissions = async ({ strapi }) => {
     const actions = [
         {
@@ -43,5 +45,6 @@ module.exports = async ({ strapi }) => {
     await setupConfig({ strapi });
     await setupGraphQL({ strapi });
     await setupNavigation({ strapi });
+    await setupCache({ strapi });
 };
 //# sourceMappingURL=index.js.map

package/server/cache/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./setupStrategy";
+//# sourceMappingURL=index.d.ts.map

package/server/cache/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./setupStrategy"), exports);
+//# sourceMappingURL=index.js.map

package/server/cache/serviceEnhancers.d.ts

@@ -0,0 +1,3 @@
+import { AddCacheConfigFieldsInput, CacheConfigFields } from "./types";
+export declare const addCacheConfigFields: <T>({ previousConfig, strapi, }: AddCacheConfigFieldsInput<T>) => Promise<T & CacheConfigFields>;
+//# sourceMappingURL=serviceEnhancers.d.ts.map