@griddo/ax 10.1.96 → 10.2.0

package/src/modules/Settings/index.tsx

@@ -1,39 +1,45 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
+import { INavItem } from "@ax/types";
+import { usePermission } from "@ax/hooks";
 
 import Globals from "./Globals";
 import Languages from "./Languages";
 import Social from "./Social";
 
-const navItems = [
+const navItems: INavItem[] = [
   {
     title: "Globals",
     path: "/sites/settings/globals",
-    component: Globals
+    component: Globals,
+    permission: "general.manageSiteSettings",
   },
   {
     title: "Languages",
     path: "/sites/settings/languages",
-    component: Languages
+    component: Languages,
+    permission: "general.accessToLanguages",
   },
   {
     title: "Social",
     path: "/sites/settings/social",
-    component: Social
+    component: Social,
+    permission: "general.manageSocialMedia",
   },
 ];
 
 const Settings = (): JSX.Element => {
   return (
     <Switch>
-      {navItems.map((item, index) => (
-          <Route exact path={item.path} key={index}>
-            {React.createElement(item.component, {navItems, currentNavItem: item}, null)}
-          </Route>
-        )
-      )}
+      {navItems.map((item, index) => {
+        const isAllowed = usePermission(item.permission);
+        return (
+        <Route exact path={item.path} key={index}>
+          {isAllowed && React.createElement(item.component, { navItems, currentNavItem: item }, null)}
+        </Route>
+      )})}
     </Switch>
-  )
+  );
 };
 
 export default Settings;

package/src/modules/Sites/SitesList/GridView/GridSiteItem/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { useModal } from "@ax/hooks";
+import { useModal, usePermission } from "@ax/hooks";
 import { isDevelopment } from "@ax/helpers";
 import { IGetSitesParams, ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
@@ -19,6 +19,10 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
   const [inputValue, setInputValue] = useState("");
   const { updated, isPublished } = site;
 
+  const allowedToDeleteSite = usePermission("general.deleteSite");
+  const allowedToPublishSite = usePermission("general.publishSite");
+  const allowedToUnpublishSite = usePermission("general.unpublishSite");
+
   const getPublishedState = (isPublished: boolean, updated: boolean) => {
     switch (isPublished) {
       case true:
@@ -44,22 +48,31 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
   };
 
   const getPublishOption = (isPublished: boolean) =>
-    isPublished ? { label: "Unpublish", icon: "offlinePending" } : { label: "Publish", icon: "uploadPending" };
-
-  const publishOption = getPublishOption(isPublished);
-
-  const menuOptions = [
-    {
-      label: "delete",
-      icon: "delete",
-      action: toggleDeleteModal,
-    },
-    {
-      label: publishOption.label,
-      icon: publishOption.icon,
-      action: togglePublishModal,
-    },
-  ];
+    isPublished && allowedToUnpublishSite
+      ? { label: "Unpublish", icon: "offlinePending" }
+      : !isPublished && allowedToPublishSite
+      ? { label: "Publish", icon: "uploadPending" }
+      : null;
+
+  const publishOptionProps = getPublishOption(isPublished);
+
+  const deleteOption = allowedToDeleteSite
+    ? {
+        label: "delete",
+        icon: "delete",
+        action: toggleDeleteModal,
+      }
+    : undefined;
+
+  const publishOption = publishOptionProps
+    ? {
+        label: publishOptionProps.label,
+        icon: publishOptionProps.icon,
+        action: togglePublishModal,
+      }
+    : undefined;
+
+  const menuOptions = [deleteOption, publishOption];
 
   const handleDeleteSite = async () => {
     const params = getParams();
@@ -171,7 +184,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 
 interface IGridSiteItemProps {
   site: ISite;
-  setSiteInfo(currentSiteInfo: any): Promise<void>;
+  setSiteInfo(currentSiteInfo: ISite): Promise<void>;
   setHistoryPush(page: string, isEditor: boolean): void;
   deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
   publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;

package/src/modules/Sites/SitesList/ListView/BulkHeader/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { BulkSelectionOptions } from "@ax/components";
+import { usePermission } from "@ax/hooks";
 
 import TableHeader from "./TableHeader";
 
@@ -21,18 +22,26 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
     filterValues,
   } = props;
 
-  const actions = [
-    {
-      icon: "upload-pending",
-      text: "publish",
-      action: bulkPublish,
-    },
-    {
-      icon: "offline",
-      text: "unpublish",
-      action: bulkUnpublish,
-    },
-  ];
+  const allowedToPublishSite = usePermission("general.publishSite");
+  const allowedToUnpublishSite = usePermission("general.unpublishSite");
+
+  const publishAction = allowedToPublishSite
+    ? {
+        icon: "upload-pending",
+        text: "publish",
+        action: bulkPublish,
+      }
+    : undefined;
+
+  const unpublishAction = allowedToUnpublishSite
+    ? {
+        icon: "offline",
+        text: "unpublish",
+        action: bulkUnpublish,
+      }
+    : undefined;
+
+  const actions = [publishAction, unpublishAction];
 
   return showBulk ? (
     <S.BulkWrapper data-testid="sites-list-bulk-wrapper">

package/src/modules/Sites/SitesList/ListView/ListSiteItem/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { useModal } from "@ax/hooks";
+import { useModal, usePermission } from "@ax/hooks";
 import { getFormattedDateWithTimezone } from "@ax/helpers";
 import { ICheck, IGetSitesParams, ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
@@ -21,6 +21,10 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
   const [inputValue, setInputValue] = useState("");
   const { updated, isPublished } = site;
 
+  const allowedToDeleteSite = usePermission("general.deleteSite");
+  const allowedToPublishSite = usePermission("general.publishSite");
+  const allowedToUnpublishSite = usePermission("general.unpublishSite");
+
   const getPublishedState = (isPublished: boolean, updated: boolean) => {
     switch (isPublished) {
       case true:
@@ -46,22 +50,31 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
   };
 
   const getPublishOption = (isPublished: boolean) =>
-    isPublished ? { label: "Unpublish", icon: "offlinePending" } : { label: "Publish", icon: "uploadPending" };
-
-  const publishOption = getPublishOption(isPublished);
-
-  const menuOptions = [
-    {
-      label: "delete",
-      icon: "delete",
-      action: toggleDeleteModal,
-    },
-    {
-      label: publishOption.label,
-      icon: publishOption.icon,
-      action: togglePublishModal,
-    },
-  ];
+    isPublished && allowedToUnpublishSite
+      ? { label: "Unpublish", icon: "offlinePending" }
+      : allowedToPublishSite
+      ? { label: "Publish", icon: "uploadPending" }
+      : null;
+
+  const publishOptionProps = getPublishOption(isPublished);
+
+  const deleteOption = allowedToDeleteSite
+    ? {
+        label: "delete",
+        icon: "delete",
+        action: toggleDeleteModal,
+      }
+    : undefined;
+
+  const publishOption = publishOptionProps
+    ? {
+        label: publishOptionProps.label,
+        icon: publishOptionProps.icon,
+        action: togglePublishModal,
+      }
+    : undefined;
+
+  const menuOptions = [deleteOption, publishOption];
 
   const handleDeleteSite = async () => {
     const params = getParams();
@@ -185,7 +198,7 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 interface IListSiteItemProps {
   site: ISite;
   isSelected: boolean;
-  setSiteInfo(currentSiteInfo: any): Promise<void>;
+  setSiteInfo(currentSiteInfo: ISite): Promise<void>;
   setHistoryPush(site: string, isEditor: boolean): void;
   deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
   publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;

package/src/modules/Sites/SitesList/RecentSiteItem/index.tsx

@@ -38,7 +38,7 @@ const RecentSiteItem = (props: IRecentSiteItemProps): JSX.Element => {
 
 interface IRecentSiteItemProps {
   site: ISite;
-  setSiteInfo(currentSiteInfo: any): Promise<void>;
+  setSiteInfo(currentSiteInfo: ISite): Promise<void>;
   setHistoryPush(page: string, isEditor: boolean): void;
 }
 

package/src/modules/Sites/SitesList/index.tsx

@@ -3,9 +3,9 @@ import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { ICheck, IGetSitesParams, IRootState, ISettingsForm, ISite, ISiteListConfig, IUser } from "@ax/types";
+import { ICheck, IGetSitesParams, IRootState, ISettingsForm, ISite, ISiteListConfig } from "@ax/types";
 import { IError } from "@ax/containers/App/reducer";
-import { useBulkSelection, useModal } from "@ax/hooks";
+import { useBulkSelection, useModal, usePermission } from "@ax/hooks";
 import { MainWrapper, Modal, ErrorToast, Icon, IconAction, TableList, EmptyState, Pagination } from "@ax/components";
 
 import { useFilterQuery, useSortedListStatus, useIsMount } from "./hooks";
@@ -28,7 +28,6 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     totalItems,
     saveSettings,
     setHistoryPush,
-    currentUser,
     getSites,
     publishSitesBulk,
     unpublishSitesBulk,
@@ -66,6 +65,8 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   const tableRef = useRef<HTMLDivElement>(null);
   const errorRef = useRef<HTMLDivElement>(null);
 
+  const allowedToCreateSite = usePermission("general.createSite");
+
   const pagination = {
     setPage,
     itemsPerPage,
@@ -76,10 +77,12 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   const { isOpen, toggleModal } = useModal();
 
   const openModal = () => toggleModal();
-  const rightButtonProps = {
-    label: "New",
-    action: openModal,
-  };
+  const rightButtonProps = allowedToCreateSite
+    ? {
+        label: "New",
+        action: openModal,
+      }
+    : undefined;
 
   const { setSortedListStatus } = useSortedListStatus();
   const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery(currentConfig.filterValues);
@@ -148,8 +151,6 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   const mainAction = { title: "Create site", onClick: saveSiteSettings, disabled: isSubmitDisabled };
   const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
-  const userHasSite = (siteID: number) => currentUser.sites.includes("all") || currentUser.sites.includes(siteID);
-
   const toggleRecentSites = () => {
     const updatedConfig = { ...config, displayRecentSites: !isRecentSitesListDisplayed };
     setListConfig(updatedConfig);
@@ -204,13 +205,12 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     </S.SectionHeader>
   );
 
-  const currentRecentSites = recentSites.filter((site: ISite) => userHasSite(site.id));
   const RecentSitesList = () => {
     return (
-      <S.RecentSites data-testid="recent-sites-list" fullWidth={currentRecentSites.length >= 5}>
+      <S.RecentSites data-testid="recent-sites-list" fullWidth={recentSites.length >= 5}>
         <RecentSitesHeader />
         <S.RecentSitesItemsWrapper data-testid="recent-sites-items-wrapper" isHidden={!isRecentSitesListDisplayed}>
-          {currentRecentSites.map((site: ISite, i: number) => (
+          {recentSites.map((site: ISite, i: number) => (
             <RecentSiteItem key={i} site={site} />
           ))}
         </S.RecentSitesItemsWrapper>
@@ -288,11 +288,9 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     />
   );
 
-  const currentSites = sites.filter((site: ISite) => userHasSite(site.id));
-
   const mappedSites =
-    currentSites.length > 0 ? (
-      currentSites.map((site: ISite) => {
+    sites.length > 0 ? (
+      sites.map((site: ISite) => {
         const isItemSelected = isSelected(site.id);
         return displayMode === "grid" ? (
           <GridSiteItem key={site.id} site={site} getParams={getParams} />
@@ -316,11 +314,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     const showPagination = totalItems > itemsPerPage;
     return (
       <>
-        <S.GridList
-          data-testid="sites-grid-list"
-          isEmpty={currentSites.length === 0}
-          fullWidth={currentSites.length >= 5}
-        >
+        <S.GridList data-testid="sites-grid-list" isEmpty={sites.length === 0} fullWidth={sites.length >= 5}>
           {mappedSites}
         </S.GridList>
         {showPagination && (
@@ -350,7 +344,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     <MainWrapper title="Sites" rightButton={rightButtonProps} searchAction={setSearchQuery} hasAnimation={hasAnimation}>
       <ErrorToast ref={errorRef} />
       <S.SitesListWrapper className={hasAnimation ? "animate" : ""}>
-        {currentRecentSites?.length > 0 ? <RecentSitesList /> : null}
+        {recentSites?.length > 0 ? <RecentSitesList /> : null}
         <AllSitesHeader />
         <AllSitesList />
       </S.SitesListWrapper>
@@ -371,7 +365,6 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 interface ISitesProps {
   sites: ISite[];
   recentSites: ISite[];
-  currentUser: IUser;
   totalItems: number;
   token: string;
   error: IError;
@@ -381,7 +374,6 @@ interface ISitesProps {
 }
 
 const mapStateToProps = (state: IRootState) => ({
-  currentUser: state.users.currentUser,
   totalItems: state.sites.sitesTotalItems,
   token: state.app.token,
   sites: state.sites.sites,

package/src/modules/Sites/index.tsx

@@ -3,7 +3,7 @@ import React, { useLayoutEffect } from "react";
 import { connect } from "react-redux";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
-import { IRootState } from "@ax/types";
+import { IGetRoles, IRootState, ISite } from "@ax/types";
 import { Loading } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
@@ -23,12 +23,14 @@ const Sites = (props: ISitesProps): JSX.Element => {
     getAllDataPacks,
     getUser,
     globalLangs,
+    getRoles,
     hasAnimation,
   } = props;
 
   useLayoutEffect(() => {
     const fetchInitialData = async () => {
       setCurrentSiteInfo(null);
+      await getRoles({ siteId: "global" }, token);
       await getUser("me", token);
       await getStructuredData(token);
       await getAllDataPacks();
@@ -67,11 +69,12 @@ interface IStateProps {
 }
 
 interface IDispatchProps {
-  setCurrentSiteInfo(currentSiteInfo: any): void;
-  getStructuredData(token: string, siteId?: number): Promise<void>;
+  setCurrentSiteInfo(currentSiteInfo: ISite | null): void;
+  getStructuredData(token: string, siteId?: number | null): Promise<void>;
   setLanguage(lang: { locale: string; id: number | null }): void;
   getAllDataPacks: () => Promise<void>;
   getUser: (id: string, token?: string) => Promise<void>;
+  getRoles: (params: IGetRoles, token?: string) => Promise<void>;
 }
 
 export type ISitesProps = IStateProps & IDispatchProps & RouteComponentProps;
@@ -82,6 +85,7 @@ const mapDispatchToProps = {
   setLanguage: appActions.setLanguage,
   getAllDataPacks: dataPacksActions.getAllDataPacks,
   getUser: usersActions.getUser,
+  getRoles: usersActions.getRoles,
 };
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Sites));

package/src/modules/StructuredData/Form/index.tsx

@@ -371,4 +371,4 @@ const mapDispatchToProps = {
   setFormValues: structuredDataActions.setFormValues,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Form);
+export default connect(mapStateToProps, mapDispatchToProps)(Form);

package/src/modules/StructuredData/StructuredDataList/BulkHeader/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import TableHeader from "./TableHeader";
-
 import { IColumn, IStructuredDataQueryValues, IStructuredDataSortedInitialState } from "@ax/types";
+import { usePermission } from "@ax/hooks";
+import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
   const {
@@ -27,13 +27,16 @@ const BulkHeader = (props: IProps): JSX.Element => {
     setColumns,
   } = props;
 
+  const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");
+  const isAllowedToDeletePage = usePermission("global.globalData.deleteAllGlobalData");
+
   const deleteAction = {
     icon: "delete",
     text: "delete",
     action: bulkDelete,
   };
 
-  const actions = [
+  const actions = isAllowedToPublishPages ? [
     {
       icon: "upload-pending",
       text: "publish",
@@ -44,9 +47,9 @@ const BulkHeader = (props: IProps): JSX.Element => {
       text: "unpublish",
       action: bulkUnpublish,
     },
-  ];
+  ] : [];
 
-  const bulkActions = isEditable ? [deleteAction, ...actions] : actions;
+  const bulkActions = isEditable && isAllowedToDeletePage ? [deleteAction, ...actions] : actions;
 
   return showBulk ? (
     <BulkSelectionOptions

package/src/modules/StructuredData/StructuredDataList/ContentFilters/index.tsx

@@ -14,7 +14,7 @@ import { getFilters } from "./utils";
 import * as S from "./style";
 
 const ContentFilters = (props: IProps): JSX.Element => {
-  const { setFilter, current, dynamicValues, onClick, addNew } = props;
+  const { setFilter, current, dynamicValues, onClick, addNew, isAllowedToCreate } = props;
   const clonedStructure = deepClone(filterStructure);
   const filters = getFilters(clonedStructure, dynamicValues);
 
@@ -43,11 +43,13 @@ const ContentFilters = (props: IProps): JSX.Element => {
                 };
 
                 return (
-                  <MenuItem key={filterKey} onClick={handleClick} extendedAction={isSelected && editable ? extendedAction : null}>
+                  <MenuItem
+                    key={filterKey}
+                    onClick={handleClick}
+                    extendedAction={isSelected && editable && isAllowedToCreate ? extendedAction : null}
+                  >
                     <NavLink to="#" className={selectedClass}>
-                      <S.Link active={isSelected}>
-                        {name}
-                      </S.Link>
+                      <S.Link active={isSelected}>{name}</S.Link>
                     </NavLink>
                   </MenuItem>
                 );
@@ -66,6 +68,7 @@ interface IProps {
   dynamicValues: IStructuredData[];
   onClick(dataID: string): void;
   addNew: () => void;
+  isAllowedToCreate: boolean;
 }
 
 const mapDispatchToProps = {

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -17,7 +17,7 @@ import {
   CategoryCell,
 } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
-import { useAdaptiveText, useModal } from "@ax/hooks";
+import { useAdaptiveText, useModal, usePermission } from "@ax/hooks";
 import { DeleteModal, DuplicateModal, UnpublishModal } from "./atoms";
 import { getCurrentLanguages } from "./utils";
 
@@ -82,6 +82,12 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const path = useAdaptiveText(nameCellRef, fullPath.page, nameCellPadding);
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
 
+  const isAllowedToDuplicatePages = usePermission("global.globalData.duplicateGlobalData");
+  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 publishedTooltip: Record<string, string> = {
     active: "Live",
     "upload-pending": "Publication pending",
@@ -185,18 +191,23 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     setHistoryPush("data/pages/editor", true);
   };
 
-  let menuOptions = [
-    {
+  let menuOptions = [];
+
+  if (isAllowedToDuplicatePages) {
+    menuOptions.push({
       label: "duplicate",
       icon: "duplicate",
       action: toggleDuplicateModal,
-    },
-    {
+    });
+  }
+
+  if (isAllowedToDeletePage) {
+    menuOptions.push({
       label: "delete",
       icon: "delete",
       action: toggleDeleteModal,
-    },
-  ];
+    });
+  }
 
   const getPublishItem = (status: string) => {
     switch (status) {
@@ -233,12 +244,6 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   };
 
   const editOptions = [
-    {
-      label: "Edit draft",
-      icon: "modified",
-      action: _handleClick,
-      color: true,
-    },
     {
       label: "View live",
       icon: "active",
@@ -247,8 +252,17 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     },
   ];
 
+  if (isAllowedToEditContentPage) {
+    editOptions.unshift({
+      label: "Edit draft",
+      icon: "modified",
+      action: _handleClick,
+      color: true,
+    });
+  }
+
   const publishAction = getPublishItem(globalPage.liveStatus.status);
-  menuOptions = publishAction ? [publishAction, ...menuOptions] : menuOptions;
+  menuOptions = publishAction && isAllowedToPublishPages ? [publishAction, ...menuOptions] : menuOptions;
 
   menuOptions = globalPage.haveDraftPage ? [...editOptions, ...menuOptions] : menuOptions;
 
@@ -309,7 +323,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const languageMenu = () => (
     <LanguageMenu
       language={locale}
-      availableLanguages={languages}
+      availableLanguages={isAllowedToCreatePages ? languages : currentLanguages}
       setLanguage={handleLanguage}
       currentLanguages={currentLanguages}
     />