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

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

@@ -40,6 +40,8 @@ const reducer_1 = __importStar(require("./reducer"));
 const actions_1 = require("./actions");
 const parsers_1 = require("../View/utils/parsers");
 const utils_1 = require("../../utils");
+const NoAccessPage_1 = __importDefault(require("../NoAccessPage"));
+const permissions_1 = __importDefault(require("../../permissions"));
 const i18nAwareItems = ({ items, config }) => config.i18nEnabled ? items.filter(({ localeCode }) => localeCode === config.defaultLocale) : items;
 const DataManagerProvider = ({ children }) => {
     const [reducerState, dispatch] = (0, react_1.useReducer)(reducer_1.default, reducer_1.initialState, init_1.default);
@@ -50,6 +52,11 @@ const DataManagerProvider = ({ children }) => {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const formatMessageRef = (0, react_1.useRef)();
     formatMessageRef.current = formatMessage;
+    const viewPermissions = (0, react_1.useMemo)(() => ({
+        access: permissions_1.default.access || permissions_1.default.update,
+        update: permissions_1.default.update,
+    }), []);
+    const { isLoading: isLoadingForPermissions, allowedActions: { canAccess, canUpdate, }, } = (0, helper_plugin_1.useRBAC)(viewPermissions);
     const getLayoutSettingRef = (0, react_1.useRef)();
     getLayoutSettingRef.current = (settingName) => (0, lodash_1.get)({}, ["settings", settingName], "");
     const isInDevelopmentMode = autoReload;
@@ -267,12 +274,18 @@ const DataManagerProvider = ({ children }) => {
                 type: actions_1.SUBMIT_NAVIGATION_ERROR,
                 error: err.response.payload.data
             });
-            console.error({ err: err.response });
-            if (err.response.payload.data && err.response.payload.data.errorTitles) {
+            if (err.response.payload.error &&
+                err.response.payload.error.details &&
+                err.response.payload.error.details.errorTitles) {
                 return toggleNotification({
                     type: 'warning',
                     message: {
-                        id: formatMessage((0, translations_1.getTrad)('notification.navigation.error'), { ...err.response.payload.data, errorTitles: err.response.payload.data.errorTitles.join(' and ') })
+                        id: formatMessage((0, translations_1.getTrad)('notification.navigation.error'), {
+                            ...err.response.payload.error.details,
+                            errorTitles: err.response.payload.error.details.errorTitles
+                                .map(title => `"${title}"`)
+                                .join(", ")
+                        })
                     },
                 });
             }
@@ -287,8 +300,19 @@ const DataManagerProvider = ({ children }) => {
         method: "DELETE",
         signal,
     });
-    const slugify = (query) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/slug?q=${query}`, { method: "GET", signal });
+    const slugify = (query) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/slug?q=${query}`, { method: "GET", signal }).then((res) => {
+        if (!res?.slug) {
+            toggleNotification({
+                type: 'warning',
+                message: formatMessage((0, translations_1.getTrad)('notification.error.item.slug'), { query, result: res?.slug || "" })
+            });
+        }
+        return res;
+    });
     const hardReset = () => getDataRef.current();
+    if (!canAccess && !isLoadingForPermissions) {
+        return (react_1.default.createElement(NoAccessPage_1.default, null));
+    }
     return (react_1.default.createElement(DataManagerContext_1.default.Provider, { value: {
             items: passedActiveItems,
             activeItem,
@@ -318,7 +342,10 @@ const DataManagerProvider = ({ children }) => {
             handleNavigationsDeletion,
             hardReset,
             slugify,
-        } }, isLoading ? react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null) : children));
+            permissions: {
+                canAccess, canUpdate
+            },
+        } }, isLoading || isLoadingForPermissions ? react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null) : children));
 };
 DataManagerProvider.propTypes = {
     children: prop_types_1.default.node.isRequired,

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

@@ -1,20 +1,20 @@
 export default reducer;
-declare function reducer(state: any, action: any): any;
+declare function reducer(state: any, action: any): (base?: ((draftState: any) => any) | undefined, ...args: unknown[]) => ((draftState: any) => any) | Promise<(draftState: any) => any>;
 export namespace initialState {
-    const items: never[];
-    const activeItem: undefined;
-    const changedActiveItem: undefined;
-    const navigationPopupOpened: boolean;
-    const navigationItemPopupOpened: boolean;
-    const config: {};
-    const isLoading: boolean;
-    const isLoadingForDataToBeSet: boolean;
-    const isLoadingForDetailsDataToBeSet: boolean;
-    const isLoadingForAdditionalDataToBeSet: boolean;
-    const isLoadingForSubmit: boolean;
-    const error: undefined;
-    const i18nEnabled: boolean;
-    const cascadeMenuAttached: boolean;
-    const availableLocale: never[];
+    let items: never[];
+    let activeItem: undefined;
+    let changedActiveItem: undefined;
+    let navigationPopupOpened: boolean;
+    let navigationItemPopupOpened: boolean;
+    let config: {};
+    let isLoading: boolean;
+    let isLoadingForDataToBeSet: boolean;
+    let isLoadingForDetailsDataToBeSet: boolean;
+    let isLoadingForAdditionalDataToBeSet: boolean;
+    let isLoadingForSubmit: boolean;
+    let error: undefined;
+    let i18nEnabled: boolean;
+    let cascadeMenuAttached: boolean;
+    let availableLocale: never[];
 }
 //# sourceMappingURL=reducer.d.ts.map

package/admin/src/pages/NoAccessPage/index.d.ts

@@ -0,0 +1,3 @@
+declare const NoAcccessPage: () => JSX.Element;
+export default NoAcccessPage;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const Main_1 = require("@strapi/design-system/Main");
+const Layout_1 = require("@strapi/design-system/Layout");
+const EmptyStateLayout_1 = require("@strapi/design-system/EmptyStateLayout");
+const icons_1 = require("@strapi/icons");
+const react_intl_1 = require("react-intl");
+const NoAcccessPage = () => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    (0, helper_plugin_1.useFocusWhenNavigate)();
+    return (react_1.default.createElement(Main_1.Main, { labelledBy: "title" },
+        react_1.default.createElement(Layout_1.HeaderLayout, { id: "title", title: formatMessage({
+                id: 'page.auth.noAccess',
+                defaultMessage: 'No access',
+            }) }),
+        react_1.default.createElement(Layout_1.ContentLayout, null,
+            react_1.default.createElement(EmptyStateLayout_1.EmptyStateLayout, { action: react_1.default.createElement(helper_plugin_1.LinkButton, { variant: "secondary", endIcon: react_1.default.createElement(icons_1.ArrowRight, null), to: "/" }, formatMessage({
+                    id: 'components.notAccessPage.back',
+                    defaultMessage: 'Back to homepage',
+                })), content: formatMessage({
+                    id: 'page.auth.not.allowed',
+                    defaultMessage: "Oops! It seems like You do not have access to this page...",
+                }), hasRadius: true, icon: react_1.default.createElement(icons_1.EmptyPictures, { width: "10rem" }), shadow: "tableShadow" }))));
+};
+exports.default = NoAcccessPage;
+//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const SettingsPage: () => JSX.Element;
 export default SettingsPage;
 //# sourceMappingURL=index.d.ts.map

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

@@ -55,6 +55,8 @@ const styles_1 = require("../../components/Alert/styles");
 const DisableI18nModal_1 = require("./components/DisableI18nModal");
 const CustomFieldModal_1 = __importDefault(require("./components/CustomFieldModal"));
 const CustomFieldTable_1 = __importDefault(require("./components/CustomFieldTable"));
+const permissions_2 = __importDefault(require("../../permissions"));
+const NoAccessPage_1 = __importDefault(require("../NoAccessPage"));
 const RESTART_NOT_REQUIRED = { required: false };
 const RESTART_REQUIRED = { required: true, reasons: [] };
 const RELATION_ATTRIBUTE_TYPES = ['relation', 'media', 'component'];
@@ -77,6 +79,10 @@ const SettingsPage = () => {
     const [contentTypeExpanded, setContentTypeExpanded] = (0, react_1.useState)(undefined);
     const { data: navigationConfigData, isLoading: isConfigLoading, error: configErr, submitMutation, restoreMutation, restartMutation } = (0, useNavigationConfig_1.default)();
     const { data: allContentTypesData, isLoading: isContentTypesLoading, error: contentTypesErr } = (0, useAllContentTypes_1.default)();
+    const viewPermissions = (0, react_1.useMemo)(() => ({
+        settings: permissions_2.default.settings
+    }), []);
+    const { isLoading: isLoadingForPermissions, allowedActions: { canSettings: canManageSettings, }, } = (0, helper_plugin_1.useRBAC)(viewPermissions);
     const isLoading = isConfigLoading || isContentTypesLoading;
     const isError = configErr || contentTypesErr;
     const configContentTypes = navigationConfigData?.contentTypes || [];
@@ -155,6 +161,9 @@ const SettingsPage = () => {
     };
     const handleRestartDiscard = () => setRestartStatus(RESTART_NOT_REQUIRED);
     const handleSetContentTypeExpanded = key => setContentTypeExpanded(key === contentTypeExpanded ? undefined : key);
+    if (!(isLoadingForPermissions || canManageSettings)) {
+        return (react_1.default.createElement(NoAccessPage_1.default, null));
+    }
     if (isLoading || isError) {
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(helper_plugin_1.SettingsPageTitle, { name: (0, utils_2.getMessage)('Settings.email.plugin.title', 'Configuration') }),

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

@@ -1,6 +1,6 @@
 import { StrapiContentTypeFullSchema } from "strapi-typed";
 import { Effect, NavigationPluginConfig } from "../../../../types";
-export declare type RawPayload = {
+export type RawPayload = {
     allowedLevels: number;
     audienceFieldChecked: boolean;
     cascadeMenuAttachedChecked: boolean;
@@ -10,21 +10,21 @@ export declare type RawPayload = {
     populate: Record<string, string[]>;
     selectedContentTypes: string[];
 };
-export declare type StrapiContentTypeSchema = StrapiContentTypeFullSchema & {
+export type StrapiContentTypeSchema = StrapiContentTypeFullSchema & {
     available: boolean;
     isSingle: boolean;
     plugin: string;
     label: string;
 };
-export declare type PreparePayload = (payload: {
+export type PreparePayload = (payload: {
     form: RawPayload;
     pruneObsoleteI18nNavigations: boolean;
 }) => NavigationPluginConfig;
-export declare type OnSave = Effect<RawPayload>;
-export declare type OnPopupClose = Effect<boolean>;
-export declare type HandleSetContentTypeExpanded = Effect<string | undefined>;
-export declare type RestartReasons = 'I18N' | 'GRAPH_QL' | 'I18N_NAVIGATIONS_PRUNE';
-export declare type RestartStatus = {
+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 RestartStatus = {
     required: true;
     reasons?: RestartReasons[];
 } | {

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

@@ -1,5 +1,3 @@
 export function resolveGlobalLikeId(uid?: string): any;
-export function resolveGlobalLikeId(uid?: string): any;
-export function isContentTypeEligible(uid?: string, config?: {}): boolean;
 export function isContentTypeEligible(uid?: string, config?: {}): boolean;
 //# sourceMappingURL=functions.d.ts.map

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, }: {
+declare function NavigationHeader({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, config, permissions, }: {
     activeNavigation: any;
     availableNavigations: any;
     structureHasErrors: any;
@@ -8,5 +8,6 @@ declare function NavigationHeader({ activeNavigation, availableNavigations, stru
     handleLocalizationSelection: any;
     handleSave: any;
     config: any;
+    permissions?: {} | undefined;
 }): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -32,7 +32,11 @@ const Layout_1 = require("@strapi/design-system/Layout");
 const Stack_1 = require("@strapi/design-system/Stack");
 const Button_1 = require("@strapi/design-system/Button");
 const Check_1 = __importDefault(require("@strapi/icons/Check"));
+const More_1 = __importDefault(require("@strapi/icons/More"));
+const Information_1 = __importDefault(require("@strapi/icons/Information"));
+const Tag_1 = require("@strapi/design-system/Tag");
 const translations_1 = require("../../../../translations");
+const styles_1 = require("./styles");
 const Select_1 = require("@strapi/design-system/Select");
 const Box_1 = require("@strapi/design-system/Box");
 const Grid_1 = require("@strapi/design-system/Grid");
@@ -46,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, }) => {
+const NavigationHeader = ({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, 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')
@@ -54,21 +58,27 @@ const NavigationHeader = ({ activeNavigation, availableNavigations, structureHas
     const hasLocalizations = config.i18nEnabled && allLocaleVersions.length;
     const passedActiveNavigation = pickDefaultLocaleNavigation({ activeNavigation, config });
     const { closeNavigationManagerModal, openNavigationManagerModal, navigationManagerModal } = (0, useNavigationManager_1.useNavigationManager)();
-    return (react_1.default.createElement(Layout_1.HeaderLayout, { primaryAction: react_1.default.createElement(Stack_1.Stack, { horizontal: true, size: 2 },
-            react_1.default.createElement(Box_1.Box, { width: "27vw", marginRight: "8px" },
+    const { canUpdate } = permissions;
+    return (react_1.default.createElement(Layout_1.HeaderLayout, { secondaryAction: react_1.default.createElement(Tag_1.Tag, { icon: react_1.default.createElement(Information_1.default, { "aria-hidden": true }) }, activeNavigation
+            ? formatMessage((0, translations_1.getTrad)('header.meta'), {
+                id: activeNavigation?.id,
+                key: activeNavigation?.slug
+            })
+            : 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 },
                     !hasLocalizations ? (react_1.default.createElement(Grid_1.GridItem, { col: 2 })) : null,
-                    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')))),
-                    react_1.default.createElement(Grid_1.GridItem, { col: 4 },
+                    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'))))),
+                    react_1.default.createElement(Grid_1.GridItem, { col: canUpdate ? 4 : 10 },
                         react_1.default.createElement(Select_1.Select, { type: "select", placeholder: "Change navigation", name: "navigationSelect", onChange: handleChangeSelection, value: passedActiveNavigation?.id, size: "S", style: null }, availableNavigations.map(({ id, name }) => react_1.default.createElement(Select_1.Option, { key: id, value: id }, name)))),
                     hasLocalizations
                         ? react_1.default.createElement(Grid_1.GridItem, { col: 2 },
                             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,
-                    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')))))),
-            navigationManagerModal), title: formatMessage({
+                    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'))))))),
+            canUpdate && navigationManagerModal), title: formatMessage({
             id: (0, translations_1.getTrad)('header.title'),
             defaultMessage: 'UI Navigation',
         }), subtitle: formatMessage({

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

@@ -44,12 +44,13 @@ const translations_1 = require("../../../../translations");
 const types_1 = require("../../../../../../types");
 const AdditionalFieldInput_1 = __importDefault(require("../../../../components/AdditionalFieldInput"));
 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, }) => {
+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 [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,
         onSubmit: loadingAware(async (payload) => onSubmit(await sanitizePayload(slugify, payload, data)), setIsLoading),
@@ -77,7 +78,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             type: (0, lodash_1.get)(data, "type", formDefinition.defaultValues.type),
             related: (0, lodash_1.get)(data, "related.value", formDefinition.defaultValues.related),
             relatedType: (0, lodash_1.get)(data, "relatedType.value", formDefinition.defaultValues.relatedType),
-            audience: (0, lodash_1.get)(data, "audience", formDefinition.defaultValues.audience).map((item) => (0, lodash_1.isObject)(item) ? item.id : item),
+            audience: (0, lodash_1.get)(data, "audience", formDefinition.defaultValues.audience).map((item) => (0, lodash_1.isObject)(item) ? item.id.toString() : item.toString()),
             additionalFields: (0, utils_1.getDefaultCustomFields)({
                 additionalFields,
                 customFieldsValues: (0, lodash_1.get)(data, "additionalFields", []),
@@ -109,15 +110,20 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
         return null;
     };
     const getDefaultTitle = (0, react_1.useCallback)((related, relatedType, isSingleSelected) => {
+        let selectedEntity;
         if (isSingleSelected) {
-            return contentTypes.find(_ => _.uid === relatedType)?.label;
+            selectedEntity = contentTypeEntities.find(_ => (_.uid === relatedType) || (_.__collectionUid === relatedType));
+            if (!selectedEntity) {
+                return contentTypes.find(_ => _.uid === relatedType)?.label;
+            }
         }
         else {
-            return (0, parsers_1.extractRelatedItemLabel)({
+            selectedEntity = {
                 ...contentTypeEntities.find(_ => _.id === related),
                 __collectionUid: relatedType
-            }, contentTypesNameFields, { contentTypes });
+            };
         }
+        return (0, parsers_1.extractRelatedItemLabel)(selectedEntity, contentTypesNameFields, { contentTypes });
     }, [contentTypeEntities, contentTypesNameFields, contentTypes]);
     const sanitizePayload = async (slugify, payload, data) => {
         const { related, relatedType, menuAttached, type, ...purePayload } = payload;
@@ -164,7 +170,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
         if ((0, lodash_1.isEmpty)(formik.values.path) && !(0, lodash_1.isEmpty)(pathDefaultFields)) {
             const selectedEntity = isSingleSelected
                 ? (0, lodash_1.first)(contentTypeEntities)
-                : contentTypeEntities.find(i => i.id === relatedSelectValue);
+                : contentTypeEntities.find(i => String(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+$/));
@@ -189,7 +195,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
         }
         else if (related) {
             const relationTitle = (0, parsers_1.extractRelatedItemLabel)({
-                ...contentTypeEntities.find(_ => _.id === related),
+                ...contentTypeEntities.find(_ => String(_.id) === String(related)),
                 __collectionUid: relatedType
             }, contentTypesNameFields, { contentTypes });
             return (0, lodash_1.isString)(relationTitle) && !(0, lodash_1.isEmpty)(relationTitle) ? await slugify(relationTitle).then((0, fp_1.prop)("slug")) : undefined;
@@ -380,20 +386,20 @@ 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", error: formik.errors.title, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.title })),
+                        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(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(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 },
-                        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(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: !canUpdate || (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() })),
+                        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, { 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), description: !isLoading && (0, lodash_1.isEmpty)(relatedTypeSelectOptions)
+                            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, 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 }), onInputChange: debounceContentTypeSearchQuery, inputValue: contentTypeSearchInputValue, 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',
@@ -405,19 +411,19 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
                             return (react_1.default.createElement(Grid_1.GridItem, { key: "audience", col: 6, lg: 12 },
                                 react_1.default.createElement(Select_1.Select, { id: "audience", placeholder: (0, utils_2.getMessage)('popup.item.form.audience.placeholder'), label: (0, utils_2.getMessage)('popup.item.form.audience.label'), onChange: onAudienceChange, value: formik.values.audience, hint: !isLoading && (0, lodash_1.isEmpty)(audienceOptions)
                                         ? (0, utils_2.getMessage)('popup.item.form.audience.empty', 'There are no more audiences')
-                                        : undefined, multi: true, withTags: true, disabled: (0, lodash_1.isEmpty)(audienceOptions) }, audienceOptions.map(({ value, label }) => react_1.default.createElement(Select_1.Option, { key: value, value: value }, label)))));
+                                        : undefined, multi: true, withTags: true, disabled: (0, lodash_1.isEmpty)(audienceOptions) || !canUpdate }, audienceOptions.map(({ value, label }) => react_1.default.createElement(Select_1.Option, { key: value, value: value }, label)))));
                         }
                         else {
                             return (react_1.default.createElement(Grid_1.GridItem, { key: additionalField.name, col: 6, lg: 12 },
-                                react_1.default.createElement(AdditionalFieldInput_1.default, { field: additionalField, isLoading: isLoading, onChange: onAdditionalFieldChange, value: (0, lodash_1.get)(formik.values, `additionalFields.${additionalField.name}`, null), error: (0, lodash_1.get)(formik.errors, `additionalFields.${additionalField.name}`, null) })));
+                                react_1.default.createElement(AdditionalFieldInput_1.default, { field: additionalField, isLoading: isLoading, onChange: onAdditionalFieldChange, value: (0, lodash_1.get)(formik.values, `additionalFields.${additionalField.name}`, null), disabled: !canUpdate, error: (0, lodash_1.get)(formik.errors, `additionalFields.${additionalField.name}`, null) })));
                         }
                     })),
                 isI18nBootstrapAvailable ? (react_1.default.createElement(Grid_1.Grid, { gap: 5, paddingTop: 5 },
                     react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
-                        react_1.default.createElement(helper_plugin_1.GenericInput, { ...itemCopyProps, type: "select", name: itemLocaleCopyField, error: (0, lodash_1.get)(formik.errors, itemLocaleCopyField), onChange: onChangeLocaleCopy, options: availableLocaleOptions, value: itemLocaleCopyValue, disabled: isLoading })),
-                    react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12, paddingTop: 6 },
-                        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 })));
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { ...itemCopyProps, type: "select", name: itemLocaleCopyField, error: (0, lodash_1.get)(formik.errors, itemLocaleCopyField), onChange: onChangeLocaleCopy, options: availableLocaleOptions, value: itemLocaleCopyValue, disabled: isLoading || !canUpdate })),
+                    canUpdate && (react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12, paddingTop: 6 },
+                        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, canUpdate: canUpdate })));
 };
 const appendLabelPublicationStatusFallback = () => "";
 const loadingAware = (action, isLoading) => async (input) => {

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

@@ -1,16 +1,16 @@
-import { Audience, Effect, ContentTypeEntity, NavigationItemAdditionalField, NavigationItemAdditionalFieldValues, NavigationItemType, NavigationPluginConfig, PluginConfigNameFields, ToBeFixed, VoidEffect } from '../../../../../../types';
+import { Audience, Effect, ContentTypeEntity, NavigationItemAdditionalField, NavigationItemAdditionalFieldValues, NavigationItemType, NavigationPluginConfig, PluginConfigNameFields, PluginPermissions, ToBeFixed, VoidEffect } from '../../../../../../types';
 import { Id } from 'strapi-typed';
 import { StrapiContentTypeSchema } from '../../../SettingsPage/types';
-export declare type FormEventTarget<TValue = unknown> = {
+export type FormEventTarget<TValue = unknown> = {
     name: string;
     value: TValue;
 };
-declare type GetContentTypeEntitiesPayload = {
+type GetContentTypeEntitiesPayload = {
     modelUID: string;
     query: ContentTypeSearchQuery;
     locale: ToBeFixed;
 };
-export declare type NavigationItemFormData = {
+export type NavigationItemFormData = {
     isMenuAllowedLevel: boolean;
     levelPath: string;
     parentAttachedToMenu: boolean;
@@ -41,7 +41,7 @@ export declare type NavigationItemFormData = {
     relatedRef?: ToBeFixed;
     structureId: ToBeFixed;
 };
-export declare type NavigationItemFormProps = {
+export type NavigationItemFormProps = {
     additionalFields: NavigationItemAdditionalField[];
     appendLabelPublicationStatus: (label: string, entity: ContentTypeEntity) => string;
     availableAudience: string[];
@@ -63,9 +63,10 @@ export declare type NavigationItemFormProps = {
     slugify: (q: string) => Promise<{
         slug: string;
     }>;
+    permissions: PluginPermissions;
 };
-export declare type ContentTypeSearchQuery = ToBeFixed;
-export declare type RawFormPayload = {
+export type ContentTypeSearchQuery = ToBeFixed;
+export type RawFormPayload = {
     type: NavigationItemType;
     related?: string;
     relatedType?: string;
@@ -77,7 +78,7 @@ export declare type RawFormPayload = {
     additionalFields: NavigationItemAdditionalFieldValues;
     updated: boolean;
 };
-export declare type SanitizedFormPayload = {
+export type SanitizedFormPayload = {
     title: string;
     type: NavigationItemType;
     menuAttached: boolean;
@@ -89,7 +90,7 @@ export declare type SanitizedFormPayload = {
     singleRelatedItem: ContentTypeEntity | undefined;
     uiRouterKey: string | undefined;
 };
-export declare type Slugify = (q: string) => Promise<{
+export type Slugify = (q: string) => Promise<{
     slug: string;
 }>;
 export {};

package/admin/src/pages/View/components/NavigationItemForm/utils/form.d.ts

@@ -2,21 +2,21 @@ import * as yup from "yup";
 import { NavigationItemAdditionalField } from "../../../../../../../types";
 import { RawFormPayload } from "../types";
 export declare const schemaFactory: (isSingleSelected: boolean, additionalFields: NavigationItemAdditionalField[]) => import("yup/lib/object").OptionalObjectSchema<{
-    title: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    title: yup.default<string | undefined, Record<string, any>, string | undefined>;
     uiRouterKey: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
     type: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-    path: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-    externalPath: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    path: yup.default<string | undefined, Record<string, any>, string | undefined>;
+    externalPath: yup.default<string | undefined, Record<string, any>, string | undefined>;
     menuAttached: yup.BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
     relatedType: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
     related: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
     additionalFields: import("yup/lib/object").OptionalObjectSchema<{}, Record<string, any>, import("yup/lib/object").TypeOfShape<{}>>;
 }, Record<string, any>, import("yup/lib/object").TypeOfShape<{
-    title: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    title: yup.default<string | undefined, Record<string, any>, string | undefined>;
     uiRouterKey: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
     type: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-    path: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-    externalPath: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    path: yup.default<string | undefined, Record<string, any>, string | undefined>;
+    externalPath: yup.default<string | undefined, Record<string, any>, string | undefined>;
     menuAttached: yup.BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
     relatedType: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
     related: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;

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

@@ -1,23 +1,25 @@
-export function NavigationItemPopupFooter({ handleCancel, handleSubmit, submitDisabled, formViewId }: {
+export function NavigationItemPopupFooter({ handleCancel, handleSubmit, submitDisabled, formViewId, canUpdate }: {
     handleCancel: any;
     handleSubmit: any;
     submitDisabled: any;
     formViewId: any;
-}): JSX.Element;
+    canUpdate: any;
+}): JSX.Element | null;
 export namespace NavigationItemPopupFooter {
     namespace defaultProps {
-        const onValidate: undefined;
-        const submitDisabled: boolean;
-        const formViewId: undefined;
+        let onValidate: undefined;
+        let submitDisabled: boolean;
+        let formViewId: undefined;
     }
     namespace propTypes {
-        export const handleCancel: PropTypes.Validator<(...args: any[]) => any>;
-        export const handleSubmit: PropTypes.Requireable<(...args: any[]) => any>;
-        const submitDisabled_1: PropTypes.Requireable<boolean>;
+        export let handleCancel: PropTypes.Validator<(...args: any[]) => any>;
+        export let handleSubmit: PropTypes.Requireable<(...args: any[]) => any>;
+        let submitDisabled_1: PropTypes.Requireable<boolean>;
         export { submitDisabled_1 as submitDisabled };
-        const formViewId_1: PropTypes.Requireable<object>;
+        let formViewId_1: PropTypes.Requireable<object>;
         export { formViewId_1 as formViewId };
+        export let canUpdate: PropTypes.Requireable<boolean>;
     }
 }
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 //# sourceMappingURL=NavigationItemPopupFooter.d.ts.map

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

@@ -9,7 +9,10 @@ const prop_types_1 = __importDefault(require("prop-types"));
 const Button_1 = require("@strapi/design-system/Button");
 const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
 const utils_1 = require("../../../../utils");
-const NavigationItemPopupFooter = ({ handleCancel, handleSubmit, submitDisabled, formViewId }) => {
+const NavigationItemPopupFooter = ({ handleCancel, handleSubmit, submitDisabled, formViewId, canUpdate }) => {
+    if (!canUpdate) {
+        return null;
+    }
     return (react_1.default.createElement(ModalLayout_1.ModalFooter, { startActions: react_1.default.createElement(Button_1.Button, { onClick: handleCancel, variant: "tertiary" }, (0, utils_1.getMessage)('popup.item.form.button.cancel')), endActions: react_1.default.createElement(Button_1.Button, { onClick: handleSubmit, disabled: submitDisabled }, (0, utils_1.getMessage)(`popup.item.form.button.save`)) }));
 };
 exports.NavigationItemPopupFooter = NavigationItemPopupFooter;
@@ -23,5 +26,6 @@ exports.NavigationItemPopupFooter.propTypes = {
     handleSubmit: prop_types_1.default.func,
     submitDisabled: prop_types_1.default.bool,
     formViewId: prop_types_1.default.object,
+    canUpdate: prop_types_1.default.bool,
 };
 //# sourceMappingURL=NavigationItemPopupFooter.js.map

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

@@ -1,4 +1,5 @@
-export function NavigationItemPopupHeader({ isNewItem }: {
+export function NavigationItemPopupHeader({ isNewItem, canUpdate }: {
     isNewItem: any;
+    canUpdate: any;
 }): JSX.Element;
 //# sourceMappingURL=NavigationItemPopupHeader.d.ts.map

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

@@ -8,9 +8,13 @@ const react_1 = __importDefault(require("react"));
 const Typography_1 = require("@strapi/design-system/Typography");
 const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
 const utils_1 = require("../../../../utils");
-const NavigationItemPopupHeader = ({ isNewItem }) => {
+const NavigationItemPopupHeader = ({ isNewItem, canUpdate }) => {
+    let modalType = 'view';
+    if (canUpdate) {
+        modalType = isNewItem ? 'new' : 'edit';
+    }
     return (react_1.default.createElement(ModalLayout_1.ModalHeader, null,
-        react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", as: "h2", id: "asset-dialog-title" }, (0, utils_1.getMessage)(`popup.item.header.${isNewItem ? 'new' : 'edit'}`))));
+        react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", as: "h2", id: "asset-dialog-title" }, (0, utils_1.getMessage)(`popup.item.header.${modalType}`))));
 };
 exports.NavigationItemPopupHeader = NavigationItemPopupHeader;
 //# sourceMappingURL=NavigationItemPopupHeader.js.map