@griddo/ax 10.1.96 → 10.2.0

package/src/modules/Users/UserList/hooks.tsx

@@ -2,17 +2,17 @@ import { useState } from "react";
 import { IUsersQueryValues } from "@ax/types";
 
 const useSortedListStatus = () => {
-  const sortedInitialState: {isAscending: boolean; sortedByName: boolean; sortedByDateCreated: boolean;} = {
+  const sortedInitialState: { isAscending: boolean; sortedByName: boolean; sortedByDateCreated: boolean } = {
     isAscending: false,
     sortedByName: false,
-    sortedByDateCreated: true
+    sortedByDateCreated: true,
   };
 
-  const [ sortedListStatus, setSortedListStatus ] = useState(sortedInitialState);
+  const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
 
   return {
     sortedListStatus,
-    setSortedListStatus
+    setSortedListStatus,
   };
 };
 
@@ -20,34 +20,39 @@ const useFilterQuery = (): IUseFilterQuery => {
   const initialQueryValues = {
     order: "",
     filterSites: "noFilter",
+    filterRoles: "all",
   };
 
   const [query, setQuery] = useState(initialQueryValues);
 
   const setFilterQuery = (filterValues: IUsersQueryValues) => {
-    const { order, filterSites } = filterValues;
+    const { order, filterSites, filterRoles } = filterValues;
+
+    const filterRolesValue = filterRoles === "all" ? "" : filterRoles;
     let filterQuery = "";
 
     const currentQuery = (pointer: string, values: string) => {
       return filterQuery ? filterQuery.concat(`&${pointer}=${values}`) : `?${pointer}=${values}`;
     };
 
-    const isNotInitialValue = (pointer: keyof IUsersQueryValues ) => {
+    const isNotInitialValue = (pointer: keyof IUsersQueryValues) => {
       return filterValues[pointer] && initialQueryValues[pointer] !== filterValues[pointer];
     };
 
     if (isNotInitialValue("order")) filterQuery = currentQuery("order", order);
     if (isNotInitialValue("filterSites")) filterQuery = currentQuery("filterSites", filterSites);
+    if (isNotInitialValue("filterRoles")) filterQuery = currentQuery("filterRoles", filterRolesValue);
 
     return filterQuery;
   };
 
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
-    const {  order, filterSites } = query;
+    const { order, filterSites, filterRoles } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       order: pointer === "order" ? `${filter}-${orderMethod}` : order,
       filterSites: pointer === "filterSites" ? filter : filterSites,
+      filterRoles: pointer === "filterRoles" ? filter : filterRoles,
     };
 
     setQuery(filterValues);
@@ -72,4 +77,4 @@ interface IUseFilterQuery {
   filterValues: IUsersQueryValues;
 }
 
-export { useSortedListStatus, useFilterQuery };
+export { useSortedListStatus, useFilterQuery };

package/src/modules/Users/UserList/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { IRootState, IUser, ISite } from "@ax/types";
-import { useBulkSelection, useModal } from "@ax/hooks";
+import { IRootState, IUser, ISite, IGetRoles, IRole, IGetSitesParams } from "@ax/types";
+import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
 import { sitesActions } from "@ax/containers/Sites";
 
-import { MainWrapper, TableList, ErrorToast, EmptyState, Modal, Nav } from "@ax/components";
+import { MainWrapper, TableList, ErrorToast, EmptyState, Modal, Nav, Toast } from "@ax/components";
 
 import BulkHeader from "./BulkHeader";
 import UserItem from "./UserItem";
@@ -16,7 +16,7 @@ import { getSortedListStatus } from "./utils";
 
 import * as S from "./style";
 
-const UserList = (props: IProps): JSX.Element => {
+const UserList = (props: IUserListProps): JSX.Element => {
   const {
     currentSiteInfo,
     users,
@@ -29,6 +29,9 @@ const UserList = (props: IProps): JSX.Element => {
     sites,
     deleteUser,
     removeUsersBulk,
+    getRoles,
+    roles,
+    getSites,
   } = props;
 
   const itemsPerPage = 50;
@@ -38,24 +41,21 @@ const UserList = (props: IProps): JSX.Element => {
   const [isScrolling, setIsScrolling] = useState(false);
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [currentFilterQuery, setCurrentFilterQuery] = useState("");
+  const [usersDeleted, setUSersDeleted] = useState(1);
 
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
   const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+  const { isVisible, toggleToast, setIsVisible } = useToast();
 
   const tableRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const isSiteView = !!currentSiteInfo;
 
   const { isOpen, toggleModal } = useModal();
-  const filteredUsers = isSiteView
-    ? users.filter((user: IUser) => {
-        const { id } = currentSiteInfo;
-        const { sites } = user;
-        return sites.includes(parseInt(id)) || sites.includes("all");
-      })
-    : users;
 
-  const usersIds = filteredUsers.map((user: any) => user.id);
+  const allowedToCreateUsers = usePermission("usersRoles.createUsers");
+
+  const usersIds = users.map((user: IUser) => user.id);
 
   const {
     resetBulkSelection,
@@ -70,8 +70,10 @@ const UserList = (props: IProps): JSX.Element => {
   useEffect(() => {
     const handleGetUsers = async () => {
       const query = searchQuery ? (currentFilterQuery ? `&query=${searchQuery}` : `?query=${searchQuery}`) : "";
-      await getUsers({ filterQuery: currentFilterQuery, query });
-    }
+      const currentFilterQuerySite =
+        isSiteView && currentFilterQuery ? `${currentFilterQuery}&site=${currentSiteInfo.id}` : currentFilterQuery;
+      await getUsers({ filterQuery: currentFilterQuerySite, query }, currentSiteInfo?.id);
+    };
     handleGetUsers();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentFilterQuery, searchQuery]);
@@ -83,6 +85,16 @@ const UserList = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [users]);
 
+  useEffect(() => {
+    const handleRolesSites = async () => {
+      const siteId = isSiteView ? currentSiteInfo.id : "global";
+      await getRoles({ siteId });
+      await getSites({ pagination: false, recentSitesNumber: 0 });
+    };
+    handleRolesSites();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleMenuClick = (path: string) => {
     setHistoryPush(path);
   };
@@ -95,11 +107,11 @@ const UserList = (props: IProps): JSX.Element => {
 
   const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
 
-  const totalItems = filteredUsers.length;
+  const totalItems = users.length;
 
   const firstPageUser = (page - 1) * itemsPerPage;
-  const pageUsers = filteredUsers.slice(firstPageUser, firstPageUser + itemsPerPage);
-  const isEmpty = filteredUsers && filteredUsers.length === 0;
+  const pageUsers = users.slice(firstPageUser, firstPageUser + itemsPerPage);
+  const isEmpty = !users || users.length === 0;
   const BASE_URL = isSiteView ? "/sites/users" : "/users";
   const pagination = {
     setPage,
@@ -115,13 +127,17 @@ const UserList = (props: IProps): JSX.Element => {
     } else {
       deleteUser(selectedItems.all);
     }
+    setUSersDeleted(selectedItems.all.length);
     toggleModal();
+    toggleToast();
   };
 
-  const rightButtonProps = {
-    label: "New",
-    action: () => setHistoryPush(`${BASE_URL}/new`),
-  };
+  const rightButtonProps = allowedToCreateUsers
+    ? {
+        label: "New",
+        action: () => setHistoryPush(`${BASE_URL}/new`),
+      }
+    : undefined;
 
   const sortItems = async (orderPointer: string, isAscending: boolean) => {
     setPage(firstPage);
@@ -159,15 +175,28 @@ const UserList = (props: IProps): JSX.Element => {
       sortItems={sortItems}
       filterItems={filterItems}
       sortedListStatus={sortedListStatus}
+      roles={roles}
     />
   );
 
+  const suffix = usersDeleted > 1 ? "s" : "";
+
+  const toastProps = {
+    setIsVisible,
+    message: isSiteView ? `${usersDeleted} User${suffix} removed from site` : `${usersDeleted} User${suffix} deleted`,
+  };
+
+  const handleToggleToast = () => {
+    setUSersDeleted(1);
+    toggleToast();
+  };
+
   const mainDeleteAction = { title: isSiteView ? "Remove from this site" : "Delete Users", onClick: bulkDelete };
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
 
   return (
     <MainWrapper title="Users & Roles" rightButton={rightButtonProps} searchAction={setSearchQuery}>
-      <S.UsersWrapper ref={wrapperRef}>
+      <S.UsersWrapper ref={wrapperRef} data-testid="users-wrapper">
         <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
         <S.TableListWrapper>
           <ErrorToast />
@@ -179,7 +208,7 @@ const UserList = (props: IProps): JSX.Element => {
             tableRef={tableRef}
           >
             {isEmpty ? (
-              <S.EmptyWrapper>
+              <S.EmptyWrapper data-testid="empty-wrapper">
                 <EmptyState message="No users found" />
               </S.EmptyWrapper>
             ) : (
@@ -195,7 +224,9 @@ const UserList = (props: IProps): JSX.Element => {
                     sites={sites}
                     isSelected={isItemSelected}
                     onChange={addToBulkSelection}
-                    handleClick={handleClick(user.id)}
+                    onClick={handleClick(user.id)}
+                    roles={roles}
+                    toggleDeleteToast={handleToggleToast}
                   />
                 );
               })
@@ -211,7 +242,7 @@ const UserList = (props: IProps): JSX.Element => {
         mainAction={mainDeleteAction}
       >
         {isOpen ? (
-          <S.ModalContent>
+          <S.ModalContent data-testid="user-delete-bulk-modal">
             <p>
               {isSiteView
                 ? "Are you sure you want to remove these users from this site? If you remove them, these users will no longer have access to this site but they will still be able to log in. This action cannot be undone."
@@ -224,6 +255,7 @@ const UserList = (props: IProps): JSX.Element => {
           </S.ModalContent>
         ) : null}
       </Modal>
+      {isVisible && <Toast {...toastProps} />}
     </MainWrapper>
   );
 };
@@ -232,6 +264,7 @@ const mapStateToProps = (state: IRootState) => ({
   users: state.users.users,
   currentSiteInfo: state.sites.currentSiteInfo,
   sites: state.sites.sites,
+  roles: state.users.roles,
 });
 
 const mapDispatchToProps = {
@@ -241,25 +274,30 @@ const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   deleteUser: usersActions.deleteUser,
   removeUsersBulk: sitesActions.removeUsersBulk,
+  getRoles: usersActions.getRoles,
+  getSites: sitesActions.getSites,
 };
 
 interface IDispatchProps {
-  getUsers(params?: any): Promise<void>;
+  getUsers(params: any, siteID?: number | null): Promise<void>;
   getUser(id: number): Promise<void>;
   resetUserData(): void;
   setHistoryPush(route: string): void;
   deleteUser(id: number[]): Promise<boolean>;
   removeUsersBulk(siteId: number, users: number[]): void;
+  getRoles(params: IGetRoles): Promise<void>;
+  getSites(params: IGetSitesParams): Promise<void>;
 }
 
-interface IUserListProps {
+interface IProps {
   navItems: any[];
   currentNavItem: any;
   users: IUser[];
-  currentSiteInfo: any;
+  currentSiteInfo: ISite | null;
   sites: ISite[];
+  roles: IRole[];
 }
 
-type IProps = IUserListProps & IDispatchProps;
+export type IUserListProps = IProps & IDispatchProps;
 
 export default connect(mapStateToProps, mapDispatchToProps)(UserList);

package/src/modules/Users/UserList/utils.tsx

@@ -2,7 +2,7 @@ const getSortedListStatus = (orderPointer: string, isAscending: boolean) => {
   const sortedListStatus = {
     isAscending,
     sortedByName: orderPointer === "name",
-    sortedByDateCreated: orderPointer === "dateCreated"
+    sortedByDateCreated: orderPointer === "dateCreated",
   };
 
   return sortedListStatus;

package/src/modules/Users/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 
+import Roles from "./Roles";
 import List from "./UserList";
 
 const navItems = [
@@ -8,21 +9,37 @@ const navItems = [
     title: "Users",
     path: "/users",
     component: List,
+    global: true,
+  },
+  {
+    title: "Roles",
+    path: "/roles",
+    component: Roles,
+    global: true,
   },
   {
     title: "Users",
     path: "/sites/users",
     component: List,
   },
+  {
+    title: "Roles",
+    path: "/sites/roles",
+    component: Roles,
+  },
 ];
 
 const Users = (props: any): JSX.Element => {
   const { pathname } = props.location;
-  const currentNavItems = navItems.filter((item) => item.path === pathname);
+
+  const isSiteView = pathname.includes("sites");
+  const currentNavItems = navItems.filter((item) =>
+    isSiteView ? item.path.includes("sites") : !item.path.includes("sites")
+  );
 
   return (
     <Switch>
-      {currentNavItems.map((item, index) => (
+      {navItems.map((item, index) => (
         <Route exact path={item.path} key={index}>
           {React.createElement(item.component, { navItems: currentNavItems, currentNavItem: item }, null)}
         </Route>
@@ -31,4 +48,4 @@ const Users = (props: any): JSX.Element => {
   );
 };
 
-export default Users;
+export default Users;

package/src/routes/index.tsx

@@ -4,33 +4,25 @@ import multisite from "./multisite";
 import site from "./site";
 import publicRoutes from "./publicRoutes";
 
-const privateRoutes = [
-  ...multisite,
-  ...site
-];
+const privateRoutes = [...multisite, ...site];
 
-const routes = [
-  ...privateRoutes,
-  ...publicRoutes
-];
+const routes = [...privateRoutes, ...publicRoutes];
 export interface IRouter {
   path: string;
   component: any;
   name: string;
-  routesGroups?: Array<{ name: string; routes: Array<{ path: string; component: any; name: string }>; showInNav?: boolean }>;
+  routesGroups?: Array<{
+    name: string;
+    routes: Array<{ path: string; component: any; name: string; permission?: string }>;
+    showInNav?: boolean;
+  }>;
   showInNav?: boolean;
   icon?: string;
   hideNav?: boolean;
   onClick?: () => void;
   url?: string;
   target?: string;
+  permission?: string | string[];
 }
 
-export {
-  privateRoutes,
-  publicRoutes,
-  routes,
-  history,
-  multisite,
-  site
-};
+export { privateRoutes, publicRoutes, routes, history, multisite, site };

package/src/routes/multisite.tsx

@@ -12,21 +12,82 @@ import AnalyticsSettings from "../modules/Analytics";
 import FramePreview from "../modules/FramePreview";
 
 export default [
-  { path: "/sites", component: Sites, name: "Sites", showInNav: true, icon: "Project" },
-  { path: "/data", component: StructuredDataList, name: "Global Data", showInNav: true, icon: "Data" },
-  { path: "/data/:id/editor", component: StructuredData, showInNav: false, name: "New StructuredData" },
-  { path: "/categories", component: CategoriesList, name: "Categories", showInNav: true, icon: "Category" },
-  { path: "/users", component: Users, name: "Users", showInNav: true, icon: "Users" },
+  {
+    path: "/sites",
+    component: Sites,
+    name: "Sites",
+    showInNav: true,
+    icon: "Project",
+    permission: "",
+  },
+  {
+    path: "/data",
+    component: StructuredDataList,
+    name: "Global Data",
+    showInNav: true,
+    icon: "Data",
+    permission: "global.globalData.accessToGlobalData",
+  },
+  {
+    path: "/data/:id/editor",
+    component: StructuredData,
+    showInNav: false,
+    name: "New StructuredData",
+    permission: "global.globalData.readGlobalData",
+  },
+  {
+    path: "/categories",
+    component: CategoriesList,
+    name: "Categories",
+    showInNav: true,
+    icon: "Category",
+    permission: "global.globalData.accessToTaxonomies",
+  },
+  {
+    path: "/users",
+    component: Users,
+    name: "Users",
+    showInNav: true,
+    icon: "Users",
+    permission: "global.usersRoles.accessToUsersRoles",
+  },
   { path: "/profile", component: Profile, name: "Profile", showInNav: false, icon: "User" },
-  { path: "/users/new", component: UserCreate, name: "New User", showInNav: false },
-  { path: "/users/edit", component: UserEdit, name: "New User", showInNav: false },
-  { path: `/data/pages/editor`, component: Editor, name: "Page Editor", showInNav: false, hideNav: true },
+  {
+    path: "/roles",
+    component: Users,
+    name: "Roles",
+    showInNav: false,
+    permission: "global.usersRoles.accessToUsersRoles",
+  },
+  {
+    path: "/users/new",
+    component: UserCreate,
+    name: "New User",
+    showInNav: false,
+    permission: "global.usersRoles.createUsers",
+  },
+  {
+    path: "/users/edit",
+    component: UserEdit,
+    name: "New User",
+    showInNav: false,
+    permission: "global.usersRoles.editUsers",
+  },
+  {
+    path: `/data/pages/editor`,
+    component: Editor,
+    name: "Page Editor",
+    showInNav: false,
+    hideNav: true,
+    permission: "global.globalData.readGlobalData",
+  },
   {
     path: `/data/pages/editor/new`,
     component: Editor,
     name: "New Page Editor",
     showInNav: false,
     hideNav: true,
+    permission: "global.globalData.createAllGlobalData",
   },
   {
     path: `/settings`,
@@ -34,6 +95,7 @@ export default [
     name: "Settings",
     showInNav: true,
     icon: "Settings",
+    permission: "global.seoAnalytics.editSeoAnalyticsInGlobalPages",
     routesGroups: [
       {
         name: "Settings",
@@ -42,11 +104,13 @@ export default [
             path: `/settings/robots`,
             component: GlobalSettings,
             name: "SEO tools",
+            permission: "global.seoAnalytics.editSeoAnalyticsInGlobalPages",
           },
           {
             path: `/settings/analytics`,
             component: AnalyticsSettings,
             name: "Analytics tools",
+            permission: "global.seoAnalytics.editSeoAnalyticsInGlobalPages",
           },
         ],
       },
@@ -57,6 +121,7 @@ export default [
     component: GlobalSettings,
     name: "Settings",
     showInNav: false,
+    permission: "global.seoAnalytics.editSeoAnalyticsInGlobalPages",
   },
   {
     path: `/editor/page-preview`,