@griddo/ax 10.1.96 → 10.2.0

package/src/modules/GlobalEditor/index.tsx

@@ -2,15 +2,16 @@ import React, { useEffect, useState, useRef } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
-import { IErrorItem, INotification, IRootState, ISavePageParams, IUserEditing } from "@ax/types";
+import { IErrorItem, INotification, IRootState, ISavePageParams, ISite, IUserEditing } from "@ax/types";
 import { MainWrapper, Loading, ErrorToast, Notification, Modal } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
+import { usersActions } from "@ax/containers/Users";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
-import { useIsDirty, useModal } from "@ax/hooks";
+import { useIsDirty, useModal, usePermission } from "@ax/hooks";
 import { getDefaultTheme } from "@ax/helpers";
 
 import Editor from "./Editor";
@@ -42,12 +43,20 @@ const GlobalEditor = (props: IProps) => {
     userEditing,
     isNewTranslation,
     currentSiteErrorPages,
+    getUserCurrentPermissions,
   } = props;
 
+  const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");
+  const isAllowedToCreatePages = usePermission("global.globalData.createAllGlobalData");
+  const isAllowedToDeletePage = usePermission("global.globalData.deleteAllGlobalData");
+  const isAllowedToEditContentPage = usePermission("global.globalData.editAllGlobalData");
+
+  const defaultTab = isAllowedToEditContentPage ? "edit" : "view";
+
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
   const [isReadOnly, setIsReadOnly] = useState(false);
-  const [selectedTab, setSelectedTab] = useState("edit");
+  const [selectedTab, setSelectedTab] = useState(defaultTab);
   const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
   const [errorPagesChecked, setErrorPagesChecked] = useState(false);
@@ -67,8 +76,8 @@ const GlobalEditor = (props: IProps) => {
   const theme = getDefaultTheme();
 
   useEffect(() => {
-    const { pageID, getPage, setTab, setCurrentSiteInfo, sendPagePing, setStructuredDataFilter } = props;
-    setCurrentSiteInfo(null);
+    const { pageID, getPage, setTab, sendPagePing, setStructuredDataFilter } = props;
+
     editorContent && editorContent.structuredData && setStructuredDataFilter(editorContent.structuredData);
     const defaultTab = "content";
     const handleGetPage = async () => await getPage(pageID, true);
@@ -248,7 +257,7 @@ const GlobalEditor = (props: IProps) => {
   };
 
   const handleNewTranlation = (isNewTranslation: boolean) => {
-    setSelectedTab("edit");
+    isAllowedToEditContentPage && setSelectedTab("edit");
     createNewTranslation && createNewTranslation(isNewTranslation);
   };
 
@@ -258,45 +267,44 @@ const GlobalEditor = (props: IProps) => {
     getContent: getPage,
   };
 
-  const unpublishOption =
-    props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty
-      ? {
-          label: "Unpublish",
-          icon: "offline",
-          action: isDraft ? toggleUnpublishModal : unpublishPage,
-        }
-      : undefined;
-
-  const discardOption =
-    isDraft || (isPublished && isDirty)
-      ? {
-          label: "Discard changes",
-          icon: "close",
-          action: isDraft ? handleDiscardDraft : handleDiscarChanges,
-        }
-      : undefined;
-
-  const deleteOption = !isDraft
-    ? {
-        label: "Delete",
-        icon: "delete",
-        action: removePage,
-      }
-    : undefined;
+  const menuOptions = [];
+
+  if (isAllowedToEditContentPage) {
+    menuOptions.push({
+      label: "Review",
+      icon: "question",
+      action: reviewPage,
+    });
+  }
+
+  if (isAllowedToEditContentPage && (isDraft || (isPublished && isDirty))) {
+    menuOptions.push({
+      label: "Discard changes",
+      icon: "close",
+      action: isDraft ? handleDiscardDraft : handleDiscarChanges,
+    });
+  }
+
+  if (props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty && isAllowedToPublishPages) {
+    menuOptions.push({
+      label: "Unpublish",
+      icon: "offline",
+      action: isDraft ? toggleUnpublishModal : unpublishPage,
+    });
+  }
+
+  if (!isDraft && isAllowedToDeletePage) {
+    menuOptions.push({
+      label: "Delete",
+      icon: "delete",
+      action: removePage,
+    });
+  }
 
   const downArrowMenu = {
     displayed: !isReadOnly,
-    button: getPublishButton(props.pageStatus),
-    options: [
-      {
-        label: "Review",
-        icon: "question",
-        action: reviewPage,
-      },
-      unpublishOption,
-      discardOption,
-      deleteOption,
-    ],
+    button: isAllowedToPublishPages ? getPublishButton(props.pageStatus) : undefined,
+    options: menuOptions,
   };
 
   const isEditable = editorContent && editorContent.editable;
@@ -338,11 +346,11 @@ const GlobalEditor = (props: IProps) => {
     }
   };
 
-  const rightButtonProps = {
+  const rightButtonProps = isAllowedToEditContentPage ? {
     label: isSaving ? "Saving" : getSaveLabel(),
     disabled: (!isDirty && pageID !== null && !isNewTranslation) || isSaving || isReadOnly,
     action: isPublished ? publishChanges : handleSavePage,
-  };
+  } : undefined;
 
   const goToLivePage = () => {
     const currentPageUrl = editorContent.fullUrl;
@@ -381,10 +389,11 @@ const GlobalEditor = (props: IProps) => {
         ]
       : pageStatusActions;
 
-  const handleClickNotification = () => {
+  const goBackToSite = () => {
     if (sitePageID) {
       setCurrentSiteInfo(savedSiteInfo);
       setCurrentPageID(sitePageID);
+      getUserCurrentPermissions();
       const path = "/sites/pages/editor";
       setHistoryPush(path, true);
     }
@@ -406,11 +415,15 @@ const GlobalEditor = (props: IProps) => {
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
+  const tabIcons = isAllowedToEditContentPage
+    ? [
+        { name: "edit", text: "Edit mode" },
+        { name: "view", text: "Preview mode" },
+      ]
+    : [{ name: "view", text: "Preview mode" }];
+
   const tabsPreview = {
-    icons: [
-      { name: "edit", text: "Edit mode" },
-      { name: "view", text: "Preview mode" },
-    ],
+    icons: tabIcons,
     selectedTab,
     action: (tab: string) => setSelectedTab(tab),
   };
@@ -430,7 +443,7 @@ const GlobalEditor = (props: IProps) => {
         pageStatus={props.pageStatus}
         language={lang}
         languageActions={languageActions}
-        availableLanguages={globalLangs}
+        availableLanguages={isAllowedToCreatePages ? globalLangs : pageLanguages}
         pageLanguages={pageLanguages}
         currentPageID={pageID}
         fullWidth={true}
@@ -454,7 +467,7 @@ const GlobalEditor = (props: IProps) => {
                   type="info"
                   text={globalNotificationText}
                   btnText="Go Back"
-                  onClick={handleClickNotification}
+                  onClick={goBackToSite}
                 />
               </S.NotificationWrapper>
             )}
@@ -538,7 +551,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   sitePageID: state.pageEditor.sitePageID,
   savedSiteInfo: state.sites.savedSiteInfo,
   userEditing: state.pageEditor.userEditing,
-  currentUserID: state.users.currentUser.id,
+  currentUserID: state.users.currentUser && state.users.currentUser.id,
   isNewTranslation: state.pageEditor.isNewTranslation,
   currentSiteErrorPages: state.sites.currentSiteErrorPages,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
@@ -580,6 +593,7 @@ const mapDispatchToProps = {
   sendPagePing: pageEditorActions.sendPagePing,
   setStructuredDataFilter: structuredDataActions.setFilter,
   discardDraft: pageEditorActions.discardDraft,
+  getUserCurrentPermissions: usersActions.getUserCurrentPermissions,
 };
 
 interface IPageEditorDispatchProps {
@@ -593,11 +607,12 @@ interface IPageEditorDispatchProps {
   createNewTranslation?(isNewTranslation: boolean): void;
   setTab(tab: string): void;
   setSelectedContent(editorID: number): void;
-  setCurrentSiteInfo(currentSiteInfo: any): void;
+  setCurrentSiteInfo(currentSiteInfo: ISite | null): void;
   setCurrentPageID(currentPageID: number): void;
   sendPagePing(pageID: number): Promise<boolean>;
   setStructuredDataFilter(filter: string | null): void;
   discardDraft(): Promise<void>;
+  getUserCurrentPermissions(): void;
 }
 
 type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps;

package/src/modules/GlobalSettings/index.tsx

@@ -9,11 +9,13 @@ const navItems = [
     title: "Robots.txt Editor",
     path: "/settings/robots",
     component: Robots,
+    permission: "global.seoAnalytics.editSeoAnalyticsInGlobalPages",
   },
   {
     title: "URL Redirect Manager",
     path: "/settings/redirects",
     component: Redirects,
+    permission: "global.seoAnalytics.editSeoAnalyticsInGlobalPages",
   },
 ];
 

package/src/modules/Navigation/Defaults/BulkHeader/index.tsx

@@ -3,15 +3,7 @@ import { BulkSelectionOptions } from "@ax/components";
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
-  const { showBulk, checkState, bulkDelete, selectItems, selectAllItems, totalItems, isScrolling } = props;
-
-  const bulkActions = [
-    {
-      icon: "delete",
-      text: "delete",
-      action: bulkDelete,
-    },
-  ];
+  const { showBulk, checkState, bulkActions, selectItems, selectAllItems, totalItems, isScrolling } = props;
 
   return showBulk ? (
     <BulkSelectionOptions
@@ -28,7 +20,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 interface IProps {
   showBulk: boolean;
   checkState: any;
-  bulkDelete: () => void;
+  bulkActions: { icon: string; text: string; action: () => void }[];
   selectItems: () => void;
   selectAllItems: () => void;
   totalItems: number;

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/DefaultsBrowser/index.tsx

@@ -3,18 +3,16 @@ import { connect } from "react-redux";
 import { navigationActions } from "@ax/containers/Navigation/Defaults";
 
 import { Browser } from "@ax/components";
-import { ILanguage, IRootState, ISocialState } from "@ax/types";
+import { ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
 
 const DefaultsBrowser = (props: IProps) => {
-  const {
-    socials,
-    cloudinaryName,
-    content,
-    currentSiteInfo: { theme, id: siteID },
-    siteLangs,
-    browserRef,
-    actions,
-  } = props;
+  const { socials, cloudinaryName, content, currentSiteInfo, siteLangs, browserRef, actions } = props;
+
+  if (!currentSiteInfo) {
+    throw new Error(`ERROR: User reached Page Editor with null site info`);
+  }
+
+  const { theme, id: siteID } = currentSiteInfo;
 
   const updatedContent = { ...content };
 
@@ -42,7 +40,7 @@ interface IDefaultsBrowserProps {
 interface IDefaultsBrowserStateProps {
   // TODO: Define content Type
   content: any;
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
   socials: ISocialState;
   cloudinaryName: string | null;
   siteLangs: ILanguage[];

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/index.tsx

@@ -30,6 +30,10 @@ const Editor = (props: IProps) => {
     browserRef,
   } = props;
 
+  if (!site) {
+    throw new Error(`ERROR: User reached Editor with null site info`);
+  }
+
   const actions = {
     deleteModuleAction: deleteModule,
     addComponentAction: addComponent,
@@ -75,7 +79,7 @@ interface IEditorStateProps {
   activatedModules: string[];
   selectedTab: string;
   isLoading: boolean;
-  site: ISite;
+  site: ISite | null;
 }
 
 interface IPageBrowserDispatchProps {

package/src/modules/Navigation/Defaults/DefaultsEditor/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { INotification, IRootState } from "@ax/types";
-import { useIsDirty, useModal } from "@ax/hooks";
+import { IRootState, ISite, INotification } from "@ax/types";
+import { useIsDirty, useModal, usePermission } from "@ax/hooks";
 import { RouteLeavingGuard } from "@ax/guards";
 
 import { appActions } from "@ax/containers/App";
@@ -43,6 +43,9 @@ const DefaultsEditor = (props: IProps) => {
   const isSetAsDefault = editorContent && editorContent.setAsDefault;
   const browserRef = useRef<HTMLDivElement>(null);
 
+  const isAllowedToCreateHeaders = usePermission("navigation.createSiteHeaders") && selectedDefault === "Headers";
+  const isAllowedToCreateFooters = usePermission("navigation.createSiteFooters") && selectedDefault === "Footers";
+
   useEffect(() => {
     getValues();
     if (isNew) {
@@ -57,7 +60,7 @@ const DefaultsEditor = (props: IProps) => {
   }, [lang]);
 
   useEffect(() => {
-    const navigationModuleComponent = currentSiteInfo.navigationModules?.[editorContent?.type];
+    const navigationModuleComponent = currentSiteInfo && currentSiteInfo.navigationModules?.[editorContent?.type];
     const currentNavigation = currentDefaultsContent?.find((item: any) => item.id === editorContent?.id);
     if (navigationModuleComponent && editorContent && currentNavigation) {
       const isNavigationModuleChanged = navigationModuleComponent !== currentNavigation.component;
@@ -123,6 +126,8 @@ const DefaultsEditor = (props: IProps) => {
   const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
   const goBack = (path: string) => setHistoryPush(path, true);
 
+  const availableLanguages = isAllowedToCreateHeaders || isAllowedToCreateFooters ? siteLanguages : navLanguages;
+
   return isLoading ? (
     <Loading />
   ) : (
@@ -135,7 +140,7 @@ const DefaultsEditor = (props: IProps) => {
         fixedAppBar={true}
         language={lang}
         languageActions={languageActions}
-        availableLanguages={siteLanguages}
+        availableLanguages={availableLanguages}
         pageLanguages={navLanguages}
         fullWidth={true}
       >
@@ -196,7 +201,7 @@ interface IStateProps {
   footer: number | null;
   navLanguages: any[];
   isNewTranslation: boolean;
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
 }
 
 const mapDispatchToProps = {

package/src/modules/Navigation/Defaults/Item/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { connect } from "react-redux";
 
 import { IHeader, IFooter, ICheck } from "@ax/types";
-import { useModal } from "@ax/hooks";
+import { useModal, usePermission } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
 import { CheckField, FieldsBehavior, Modal } from "@ax/components";
@@ -40,14 +40,19 @@ const DefaultItem = (props: IProps): JSX.Element => {
   const { locale } = lang;
   const { navigationLanguages, type } = defaultContent;
 
+  const isAllowedToEditHeaders = usePermission("navigation.editSiteHeaders") && type === "header";
+  const isAllowedToEditFooters = usePermission("navigation.editSiteFooters") && type === "footer";
+  const isAllowedToCreateHeaders = usePermission("navigation.createSiteHeaders") && type === "header";
+  const isAllowedToCreateFooters = usePermission("navigation.createSiteFooters") && type === "footer";
+  const isAllowedToDeleteHeaders = usePermission("navigation.deleteSiteHeaders") && type === "header";
+  const isAllowedToDeleteFooters = usePermission("navigation.deleteSiteFooters") && type === "footer";
+
   const goToEditor = () => {
     handleClick(defaultContent);
     setHistoryPush("/sites/navigations/editor", true);
   };
 
-  const handleOnChange = (value: ICheck) => {
-    onChange(value);
-  };
+  const handleOnChange = (value: ICheck) => onChange(value);
 
   const handleRenameItem = () => {
     const updatedItem = { ...defaultContent, title: inputValue };
@@ -66,27 +71,34 @@ const DefaultItem = (props: IProps): JSX.Element => {
     }
   };
 
-  let menuOptions = [
-    {
-      label: "Rename",
-      icon: "edit",
-      action: toggleRenameModal,
-    },
-    {
-      label: "Delete",
-      icon: "delete",
-      action: removeItem,
-    },
-  ];
-
-  if (!defaultContent.setAsDefault) {
-    const setAsDefaultOption = {
-      label: "Set as default",
-      icon: "modules",
-      action: toggleDefaultModal,
-    };
-    menuOptions = [setAsDefaultOption, ...menuOptions];
-  }
+  const renameOption =
+    isAllowedToEditFooters || isAllowedToEditHeaders
+      ? {
+          label: "Rename",
+          icon: "edit",
+          action: toggleRenameModal,
+        }
+      : undefined;
+
+  const deleteOption =
+    isAllowedToDeleteFooters || isAllowedToDeleteHeaders
+      ? {
+          label: "Delete",
+          icon: "delete",
+          action: removeItem,
+        }
+      : undefined;
+
+  const setAsDefaultOption =
+    !defaultContent.setAsDefault && (isAllowedToEditHeaders || isAllowedToEditFooters)
+      ? {
+          label: "Set as default",
+          icon: "modules",
+          action: toggleDefaultModal,
+        }
+      : undefined;
+
+  const menuOptions = [setAsDefaultOption, renameOption, deleteOption];
 
   const getCurrentLanguages = () => {
     const availables: any[] = [];
@@ -139,9 +151,11 @@ const DefaultItem = (props: IProps): JSX.Element => {
     setHistoryPush(path, true);
   };
 
+  const availableLanguages = isAllowedToCreateFooters || isAllowedToCreateHeaders ? languages : currentLanguages;
+
   return (
     <>
-      <S.DefaultRow role="rowgroup" selected={isSelected}>
+      <S.DefaultRow role="rowgroup" selected={isSelected} clickable={isAllowedToEditHeaders || isAllowedToEditFooters}>
         <S.CheckCell role="cell">
           <CheckField name="check" value={defaultContent.id} checked={isSelected} onChange={handleOnChange} />
         </S.CheckCell>
@@ -153,7 +167,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
             handleLanguage={handleLanguage}
             currentLanguages={currentLanguages}
             locale={locale}
-            languages={languages}
+            languages={availableLanguages}
           />
         </S.TransCell>
         <S.DefaultCell role="cell" onClick={goToEditor}>

package/src/modules/Navigation/Defaults/Item/style.tsx

@@ -39,7 +39,8 @@ const StyledActionMenu = styled(ActionMenu)`
   margin-left: auto;
 `;
 
-const DefaultRow = styled(Row)`
+const DefaultRow = styled(Row)<{ clickable: boolean }>`
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   &:hover {
     ${StyledActionMenu} {
       opacity: 1;

package/src/modules/Navigation/Defaults/index.tsx

@@ -3,8 +3,8 @@ import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
 import { menuActions } from "@ax/containers/Navigation";
-import { IRootState, IHeader, IFooter } from "@ax/types";
-import { useBulkSelection, useModal, useToast } from "@ax/hooks";
+import { IRootState, IHeader, IFooter, ISite } from "@ax/types";
+import { useBulkSelection, usePermission, useToast, useModal } from "@ax/hooks";
 import { capitalize, isMultipleNavigationModules } from "@ax/helpers";
 import { navigationActions } from "@ax/containers/Navigation";
 import { MainWrapper, TableList, ErrorToast, Toast, Notification } from "@ax/components";
@@ -12,7 +12,6 @@ import { MainWrapper, TableList, ErrorToast, Toast, Notification } from "@ax/com
 import DefaultItem from "./Item";
 import DefaultNav from "./Nav";
 import BulkHeader from "./BulkHeader";
-
 import { NavigationModulesWarning } from "./atoms";
 import ReplaceNavModal from "./ReplaceNavModal";
 
@@ -49,6 +48,11 @@ const DefaultsList = (props: IProps): JSX.Element => {
   const [isNavigationNotificationOpen, setIsNavigationNotificationOpen] = useState(false);
   const { isOpen: isReplaceOpened, toggleModal: toggleReplaceModal } = useModal();
 
+  const isAllowedToCreateHeaders = usePermission("navigation.createSiteHeaders") && selectedDefault === "Headers";
+  const isAllowedToCreateFooters = usePermission("navigation.createSiteFooters") && selectedDefault === "Footers";
+  const isAllowedToDeleteHeaders = usePermission("navigation.deleteSiteHeaders") && selectedDefault === "Headers";
+  const isAllowedToDeleteFooters = usePermission("navigation.deleteSiteFooters") && selectedDefault === "Footers";
+
   const navIds = currentDefaultsContent && currentDefaultsContent.map((nav: any) => nav.id);
 
   const {
@@ -104,9 +108,10 @@ const DefaultsList = (props: IProps): JSX.Element => {
 
   useEffect(() => {
     const isNavigationModulesChanged =
+      currentSiteInfo &&
       currentSiteInfo.navigationModules?.[currentType] &&
       currentDefaultsContent.some(
-        (navigation) => navigation.component !== currentSiteInfo.navigationModules[currentType]
+        (navigation) => navigation.component !== currentSiteInfo?.navigationModules[currentType]
       );
     setIsNavigationNotificationOpen(isNavigationModulesChanged);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -129,10 +134,13 @@ const DefaultsList = (props: IProps): JSX.Element => {
     setHistoryPush(path, true);
   };
 
-  const rightButtonProps = {
-    label: "New",
-    action: () => addNewDefault(),
-  };
+  const rightButtonProps =
+    isAllowedToCreateHeaders || isAllowedToCreateFooters
+      ? {
+          label: "New",
+          action: () => addNewDefault(),
+        }
+      : undefined;
 
   const languageActions = {
     setLanguage,
@@ -186,10 +194,21 @@ const DefaultsList = (props: IProps): JSX.Element => {
 
   const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
 
+  const bulkActions =
+    isAllowedToDeleteFooters || isAllowedToDeleteHeaders
+      ? [
+          {
+            icon: "delete",
+            text: "delete",
+            action: bulkDelete,
+          },
+        ]
+      : [];
+
   const TableHeader = (
     <BulkHeader
       showBulk={areItemsSelected(navIds)}
-      bulkDelete={bulkDelete}
+      bulkActions={bulkActions}
       selectAllItems={handleSelectAll}
       totalItems={totalItems}
       selectItems={selectItems}
@@ -292,7 +311,7 @@ interface IDefaultsProps {
   selectedDefault: string;
   currentDefaultsContent: (IHeader | IFooter)[];
   totalItems: number;
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
 }
 
 type IProps = IDefaultsProps & IDispatchProps;

package/src/modules/Navigation/Menus/List/Table/Header/index.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
-
 import { connect } from "react-redux";
+
 import { menuActions } from "@ax/containers/Navigation";
 import { IRootState } from "@ax/types";
-
 import { IconAction } from "@ax/components";
-import SidePanel from "../SidePanel";
-
+import { Restricted } from "@ax/guards";
 import { useModal } from "@ax/hooks";
 
+import SidePanel from "../SidePanel";
+
 import * as S from "./style";
 
 const Header = (props: IProps): JSX.Element => {
@@ -31,7 +31,9 @@ const Header = (props: IProps): JSX.Element => {
   return (
     <S.Header>
       <S.Title>{title}</S.Title>
-      <IconAction icon="add" size="m" onClick={openModal} />
+      <Restricted to="navigation.manageSiteMenu">
+        <IconAction icon="add" size="m" onClick={openModal} />
+      </Restricted>
       <SidePanel
         isOpen={isOpen}
         isOpenedSecond={isOpenedSecond}