@griddo/ax 1.63.5 → 1.64.2

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

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { IUsersQueryValues } from "@ax/types";
 
 const useSortedListStatus = () => {
   const sortedInitialState: {isAscending: boolean; sortedByName: boolean; sortedByDateCreated: boolean;} = {
@@ -15,4 +16,60 @@ const useSortedListStatus = () => {
   };
 };
 
-export { useSortedListStatus };
+const useFilterQuery = (): IUseFilterQuery => {
+  const initialQueryValues = {
+    order: "",
+    filterSites: "noFilter",
+  };
+
+  const [query, setQuery] = useState(initialQueryValues);
+
+  const setFilterQuery = (filterValues: IUsersQueryValues) => {
+    const { order, filterSites } = filterValues;
+    let filterQuery = "";
+
+    const currentQuery = (pointer: string, values: string) => {
+      return filterQuery ? filterQuery.concat(`&${pointer}=${values}`) : `?${pointer}=${values}`;
+    };
+
+    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);
+
+    return filterQuery;
+  };
+
+  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+    const {  order, filterSites } = query;
+    const orderMethod = isAscendent ? "asc" : "desc";
+    const filterValues = {
+      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      filterSites: pointer === "filterSites" ? filter : filterSites,
+    };
+
+    setQuery(filterValues);
+
+    return filterValues;
+  };
+
+  const resetFilterQuery = () => setQuery(initialQueryValues);
+
+  return {
+    setFiltersSelection,
+    setFilterQuery,
+    resetFilterQuery,
+    filterValues: query,
+  };
+};
+
+interface IUseFilterQuery {
+  setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): IUsersQueryValues;
+  setFilterQuery(filterValues: IUsersQueryValues): string;
+  resetFilterQuery(): void;
+  filterValues: IUsersQueryValues;
+}
+
+export { useSortedListStatus, useFilterQuery };

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

@@ -1,21 +1,35 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { IRootState, IUser } from "@ax/types";
+import { IRootState, IUser, ISite } from "@ax/types";
 import { useBulkSelection, useModal } 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 BulkHeader from "./BulkHeader";
 import UserItem from "./UserItem";
-import { useSortedListStatus } from "./hooks";
+import { useFilterQuery, useSortedListStatus } from "./hooks";
 import { getSortedListStatus } from "./utils";
 
 import * as S from "./style";
 
 const UserList = (props: IProps): JSX.Element => {
-  const { users, getUsers, navItems, currentNavItem, setHistoryPush, getUser, resetUserData, deleteUser } = props;
+  const {
+    currentSiteInfo,
+    users,
+    getUsers,
+    navItems,
+    currentNavItem,
+    setHistoryPush,
+    getUser,
+    resetUserData,
+    sites,
+    deleteUser,
+    removeUsersBulk,
+  } = props;
 
   const itemsPerPage = 50;
   const firstPage = 1;
@@ -23,13 +37,25 @@ const UserList = (props: IProps): JSX.Element => {
   const [page, setPage] = useState(1);
   const [isScrolling, setIsScrolling] = useState(false);
   const [searchQuery, setSearchQuery] = useState<string>("");
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
+
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
+  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+
   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 = users && users.map((user: any) => user.id);
+  const usersIds = filteredUsers.map((user: any) => user.id);
 
   const {
     resetBulkSelection,
@@ -41,23 +67,11 @@ const UserList = (props: IProps): JSX.Element => {
     selectedItems,
   } = useBulkSelection(usersIds);
 
-  const { sortedByName, sortedByDateCreated, isAscending } = sortedListStatus;
-  const order = `${sortedByName ? "name" : ""}${sortedByDateCreated ? "dateCreated" : ""}-${
-    isAscending ? "asc" : "desc"
-  }`;
-
-  const getParams = useCallback(() => {
-    const params = {
-      query: searchQuery,
-      order,
-    };
-    return params;
-  }, [searchQuery, order]);
-
   useEffect(() => {
-    getUsers(getParams());
+    const query = searchQuery ? (currentFilterQuery ? `&query=${searchQuery}` : `?query=${searchQuery}`) : "";
+    getUsers({ filterQuery: currentFilterQuery, query });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getParams]);
+  }, [currentFilterQuery, searchQuery]);
 
   useEffect(() => {
     if (wrapperRef.current) {
@@ -70,11 +84,6 @@ const UserList = (props: IProps): JSX.Element => {
     setHistoryPush(path);
   };
 
-  const bulkDelete = () => {
-    deleteUser(selectedItems.all);
-    toggleModal();
-  };
-
   const unselectAllItems = () => resetBulkSelection();
 
   const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
@@ -83,12 +92,12 @@ const UserList = (props: IProps): JSX.Element => {
 
   const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
 
-  const totalItems = users.length;
+  const totalItems = filteredUsers.length;
 
   const firstPageUser = (page - 1) * itemsPerPage;
-  const pageUsers = users.slice(firstPageUser, firstPageUser + itemsPerPage);
-  const isEmpty = users && users.length === 0;
-
+  const pageUsers = filteredUsers.slice(firstPageUser, firstPageUser + itemsPerPage);
+  const isEmpty = filteredUsers && filteredUsers.length === 0;
+  const BASE_URL = isSiteView ? "/sites/users" : "/users";
   const pagination = {
     setPage,
     itemsPerPage,
@@ -96,25 +105,47 @@ const UserList = (props: IProps): JSX.Element => {
     currPage: page,
   };
 
+  const bulkDelete = () => {
+    if (isSiteView) {
+      const siteId = currentSiteInfo.id;
+      removeUsersBulk(siteId, selectedItems.all);
+    } else {
+      deleteUser(selectedItems.all);
+    }
+    toggleModal();
+  };
+
   const rightButtonProps = {
     label: "New",
-    action: () => setHistoryPush("/users/new"),
+    action: () => setHistoryPush(`${BASE_URL}/new`),
   };
 
   const sortItems = async (orderPointer: string, isAscending: boolean) => {
     setPage(firstPage);
     const sortedState = getSortedListStatus(orderPointer, isAscending);
     setSortedListStatus(sortedState);
+    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+    setPage(firstPage);
+    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
   };
 
   const handleClick = (id: number) => async () => {
     resetUserData();
     await getUser(id);
-    setHistoryPush(`/users/edit`);
+    setHistoryPush(`${BASE_URL}/edit`);
   };
 
   const TableHeader = (
     <BulkHeader
+      isSiteView={isSiteView}
+      filterValues={filterValues}
       showBulk={areItemsSelected(usersIds)}
       bulkDelete={toggleModal}
       selectAllItems={handleSelectAll}
@@ -123,11 +154,12 @@ const UserList = (props: IProps): JSX.Element => {
       checkState={checkState}
       isScrolling={isScrolling}
       sortItems={sortItems}
+      filterItems={filterItems}
       sortedListStatus={sortedListStatus}
     />
   );
 
-  const mainDeleteAction = { title: "Delete Users", onClick: bulkDelete };
+  const mainDeleteAction = { title: isSiteView ? "Remove from this site" : "Delete Users", onClick: bulkDelete };
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
 
   return (
@@ -153,8 +185,11 @@ const UserList = (props: IProps): JSX.Element => {
                 const isItemSelected = isSelected(user.id);
                 return (
                   <UserItem
+                    siteId={currentSiteInfo?.id}
+                    isSiteView={isSiteView}
                     key={user.id}
                     user={user}
+                    sites={sites}
                     isSelected={isItemSelected}
                     onChange={addToBulkSelection}
                     handleClick={handleClick(user.id)}
@@ -168,13 +203,18 @@ const UserList = (props: IProps): JSX.Element => {
       <Modal
         isOpen={isOpen}
         hide={toggleModal}
-        title="Delete Users?"
+        title={isSiteView ? "Remove users from this site?" : "Delete Users?"}
         secondaryAction={secondaryDeleteAction}
         mainAction={mainDeleteAction}
       >
         {isOpen ? (
           <S.ModalContent>
-            <p>Are you sure you want to delete these users? If you delete them, they no longer be able to log in.</p>
+            <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."
+                : "Are you sure you want to delete these users? If you delete them, they no longer be able to log in."}
+            </p>
+
             <p>
               This action <strong>cannot be undone</strong>.
             </p>
@@ -187,6 +227,8 @@ const UserList = (props: IProps): JSX.Element => {
 
 const mapStateToProps = (state: IRootState) => ({
   users: state.users.users,
+  currentSiteInfo: state.sites.currentSiteInfo,
+  sites: state.sites.sites,
 });
 
 const mapDispatchToProps = {
@@ -195,6 +237,7 @@ const mapDispatchToProps = {
   resetUserData: usersActions.resetUserData,
   setHistoryPush: appActions.setHistoryPush,
   deleteUser: usersActions.deleteUser,
+  removeUsersBulk: sitesActions.removeUsersBulk,
 };
 
 interface IDispatchProps {
@@ -203,12 +246,15 @@ interface IDispatchProps {
   resetUserData(): void;
   setHistoryPush(route: string): void;
   deleteUser(id: number[]): Promise<boolean>;
+  removeUsersBulk(siteId: number, users: number[]): void;
 }
 
 interface IUserListProps {
   navItems: any[];
   currentNavItem: any;
   users: IUser[];
+  currentSiteInfo: any;
+  sites: ISite[];
 }
 
 type IProps = IUserListProps & IDispatchProps;

package/src/modules/Users/index.tsx

@@ -7,21 +7,28 @@ const navItems = [
   {
     title: "Users",
     path: "/users",
-    component: List
-  }
+    component: List,
+  },
+  {
+    title: "Users",
+    path: "/sites/users",
+    component: List,
+  },
 ];
 
-const Users = (): JSX.Element => {
+const Users = (props: any): JSX.Element => {
+  const { pathname } = props.location;
+  const currentNavItems = navItems.filter((item) => item.path === pathname);
+
   return (
     <Switch>
-      {navItems.map((item, index) => (
-          <Route exact path={item.path} key={index}>
-            {React.createElement(item.component, {navItems, currentNavItem: item}, null)}
-          </Route>
-        )
-      )}
+      {currentNavItems.map((item, index) => (
+        <Route exact path={item.path} key={index}>
+          {React.createElement(item.component, { navItems: currentNavItems, currentNavItem: item }, null)}
+        </Route>
+      ))}
     </Switch>
-  )
+  );
 };
 
-export default Users;
+export default Users;

package/src/routes/site.tsx

@@ -9,6 +9,10 @@ import CategoriesList from "./../modules/Categories/CategoriesList";
 import StructuredData from "./../modules/StructuredData";
 import SeoAnalyticsSettings from "./../modules/Settings/SeoAnalyticsSettings";
 import TemplateEditor from "../modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor";
+import Users from "./../modules/Users";
+import UserCreate from "./../modules/Users/UserCreate";
+import UserEdit from "./../modules/Users/UserEdit";
+import Profile from "./../modules/Users/Profile";
 
 const BASE_PATH = "/sites";
 
@@ -36,6 +40,7 @@ export default [
     icon: "",
     name: "New StructuredData",
   },
+  { path: `${BASE_PATH}/profile`, component: Profile, name: "Profile", showInNav: false, icon: "User" },
   {
     path: `${BASE_PATH}/navigations`,
     component: null,
@@ -52,6 +57,9 @@ export default [
       },
     ],
   },
+  { path: `${BASE_PATH}/users`, component: Users, name: "Users", showInNav: true, icon: "Users" },
+  { path: `${BASE_PATH}/users/new`, component: UserCreate, name: "New User", showInNav: false },
+  { path: `${BASE_PATH}/users/edit`, component: UserEdit, name: "New User", showInNav: false },
   {
     path: `${BASE_PATH}/navigations/editor`,
     component: DefaultsEditor,

package/src/types/index.tsx

@@ -535,6 +535,7 @@ export interface IUser {
   enabled?: boolean;
   timezone?: string;
   status?: string;
+  sites?: any;
 }
 
 export interface ISelectOption {
@@ -605,6 +606,12 @@ export interface IStructuredDataQueryValues {
   order: string;
   filterSites: string;
   categories: string;
+  related: string;
+}
+
+export interface IUsersQueryValues {
+  order: string;
+  filterSites: string;
 }
 
 export interface IDataPackConfigImportCategory {

package/tsconfig.json

@@ -21,12 +21,14 @@
     "noEmit": true,
     "jsx": "react",
     "types": [
+      "jest",
       "react",
       "reflect-metadata",
       "node",
       "webpack-env",
       "react/next",
       "react-dom/next",
+      "@testing-library/jest-dom",
     ],
   },
   "include": [

package/scripts/test.js

@@ -1,45 +0,0 @@
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = "test";
-process.env.NODE_ENV = "test";
-process.env.PUBLIC_URL = "";
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on("unhandledRejection", (err) => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require("../config/env");
-
-const jest = require("jest");
-const execSync = require("child_process").execSync;
-let argv = process.argv.slice(2);
-
-function isInGitRepository() {
-  try {
-    execSync("git rev-parse --is-inside-work-tree", { stdio: "ignore" });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function isInMercurialRepository() {
-  try {
-    execSync("hg --cwd . root", { stdio: "ignore" });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-// Watch unless on CI or explicitly running all tests
-if (!process.env.CI && argv.indexOf("--watchAll") === -1 && argv.indexOf("--watchAll=false") === -1) {
-  // https://github.com/facebook/create-react-app/issues/5210
-  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
-  argv.push(hasSourceControl ? "--watch" : "--watchAll");
-}
-
-jest.run(argv);