@griddo/ax 10.1.96 → 10.2.1

package/src/modules/Users/UserForm/style.tsx

@@ -19,13 +19,22 @@ const SubTitle = styled.div`
 `;
 
 const ModalContent = styled.div`
-  padding: ${p => p.theme.spacing.m};
+  padding: ${(p) => p.theme.spacing.m};
 `;
 
 const SettingsWrapper = styled.div`
   position: relative;
   border-top: 1px solid ${(p) => p.theme.color.uiLine};
   padding-top: ${(p) => p.theme.spacing.m};
+  padding-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const HeadingWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  & button {
+    margin-left: auto;
+  }
 `;
 
 const Heading = styled.div`
@@ -35,7 +44,7 @@ const Heading = styled.div`
 `;
 
 const SettingContent = styled.div`
-  padding-bottom: ${(p) => p.theme.spacing.m};
+  padding-bottom: ${(p) => p.theme.spacing.s};
 `;
 
 const SettingText = styled.div`
@@ -50,8 +59,55 @@ const SearchFieldWrapper = styled.div`
   max-width: calc(${(p) => p.theme.spacing.l} * 7);
 `;
 
-const SelectAllSitesFieldWrapper = styled.div`
-  padding-bottom: ${(p) => p.theme.spacing.s};
+const SelectAllSitesFieldWrapper = styled.div``;
+
+const GlobalPermissionsFieldWrapper = styled.div`
+  padding-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const SiteList = styled.div`
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  & > div {
+    margin-bottom: 0;
+    border-radius: 0;
+    border-bottom: none;
+
+    &:first-child {
+      border-radius: ${(p) => `${p.theme.radii.s} ${p.theme.radii.s} 0 0`};
+    }
+    &:last-child {
+      border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+      border-radius: ${(p) => `0 0 ${p.theme.radii.s} ${p.theme.radii.s}`};
+    }
+  }
+`;
+
+const RoleList = styled.div`
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  padding-top: ${(p) => p.theme.spacing.xs};
+
+  & button {
+    margin-top: ${(p) => p.theme.spacing.s};
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const MemberWrapper = styled.div``;
+
+const OptionsWrapper = styled.div`
+  padding-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const Label = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  display: block;
+  margin-bottom: ${(p) => p.theme.spacing?.xs};
+`;
+
+const HelpText = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color?.textMediumEmphasis};
 `;
 
 export {
@@ -64,5 +120,13 @@ export {
   SettingContent,
   Heading,
   SearchFieldWrapper,
-  SelectAllSitesFieldWrapper
-};
+  SelectAllSitesFieldWrapper,
+  SiteList,
+  GlobalPermissionsFieldWrapper,
+  RoleList,
+  HeadingWrapper,
+  Label,
+  HelpText,
+  OptionsWrapper,
+  MemberWrapper,
+};

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

@@ -1,12 +1,11 @@
 import React from "react";
 
-import { CheckField, TableCounter, SiteFilter } from "@ax/components";
-
-import Name from "../../HeaderMenus/Name";
+import { CheckField, TableCounter, SiteFilter, NameFilter, RoleFilter } from "@ax/components";
+import { IRole } from "@ax/types";
 
 import * as S from "./style";
 
-const TableHeader = (props: IProps) => {
+const TableHeader = (props: IProps): JSX.Element => {
   const {
     totalItems,
     selectAllItems,
@@ -15,9 +14,27 @@ const TableHeader = (props: IProps) => {
     filterItems,
     sortedListStatus,
     filterValues,
-    showSiteFilter = true,
+    isSiteView,
+    roles,
   } = props;
 
+  const roleFilters = [
+    {
+      name: "all",
+      value: "all",
+      title: "All",
+    },
+  ];
+
+  roles.forEach((item: IRole) => {
+    const newFilter = {
+      name: item.id.toString(),
+      value: item.id.toString(),
+      title: item.name,
+    };
+    item.active && roleFilters.push(newFilter);
+  });
+
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
@@ -32,32 +49,44 @@ const TableHeader = (props: IProps) => {
         />
       </S.CheckHeader>
       <S.NameWrapper>
-        <Name sortItems={sortItems} sortedState={sortedListStatus} />
+        <NameFilter sortItems={sortItems} sortedState={sortedListStatus} pointer="name" />
       </S.NameWrapper>
-      {showSiteFilter ? (
-        <S.NameWrapper>
-          <SiteFilter
-            filterItems={filterItems}
-            value={filterValues}
-            pointer="filterSites"
-            center={false}
-            label="Sites"
-            selectAllOption="noFilter"
-            filters={[
-              {
-                name: "noFilter",
-                value: "noFilter",
-                title: "All",
-              },
-              {
-                name: "all",
-                value: "all",
-                title: "Access to all sites",
-              },
-            ]}
-          />
-        </S.NameWrapper>
-      ) : null}
+      <S.RolesWrapper isSite={isSiteView}>
+        <RoleFilter
+          filterItems={filterItems}
+          filters={roleFilters}
+          value={filterValues}
+          pointer="filterRoles"
+          center={false}
+        />
+      </S.RolesWrapper>
+      {!isSiteView && (
+        <>
+          <S.SiteWrapper>
+            <SiteFilter
+              filterItems={filterItems}
+              value={filterValues}
+              pointer="filterSites"
+              center={false}
+              label="Sites"
+              selectAllOption="noFilter"
+              filters={[
+                {
+                  name: "noFilter",
+                  value: "noFilter",
+                  title: "All",
+                },
+                {
+                  name: "all",
+                  value: "all",
+                  title: "Access to all sites",
+                },
+              ]}
+            />
+          </S.SiteWrapper>
+          <S.StatusHeader />
+        </>
+      )}
       <S.ActionsHeader>
         <TableCounter totalItems={totalItems} />
       </S.ActionsHeader>
@@ -68,12 +97,13 @@ const TableHeader = (props: IProps) => {
 interface IProps {
   totalItems: number;
   isScrolling: boolean;
-  showSiteFilter: boolean;
+  isSiteView: boolean;
   selectAllItems: () => void;
   filterItems: (filterPointer: string, filtersSelected: string) => void;
   sortItems: any;
   sortedListStatus: any;
   filterValues: any;
+  roles: IRole[];
 }
 
 export default TableHeader;

package/src/modules/Users/UserList/BulkHeader/TableHeader/style.tsx

@@ -9,7 +9,7 @@ const TableHeader = styled.div<{ isScrolling?: boolean }>`
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
 `;
 
-const CheckHeader = styled(Header as any)`
+const CheckHeader = styled(Header)`
   padding-left: ${(p) => p.theme.spacing.m};
   width: 32px;
 `;
@@ -19,9 +19,23 @@ const NameWrapper = styled.div`
   position: relative;
 `;
 
-const ActionsHeader = styled(Header as any)`
-  width: 92px;
+const ActionsHeader = styled(Header)`
+  width: 64px;
   padding-right: 0;
 `;
 
-export { TableHeader, CheckHeader, NameWrapper, ActionsHeader };
+const SiteWrapper = styled.div`
+  width: 210px;
+  position: relative;
+`;
+
+const RolesWrapper = styled.div<{ isSite: boolean }>`
+  width: ${(p) => (p.isSite ? "450px" : "275px")};
+  position: relative;
+`;
+
+const StatusHeader = styled(Header)`
+  width: 98px;
+`;
+
+export { TableHeader, CheckHeader, NameWrapper, ActionsHeader, RolesWrapper, SiteWrapper, StatusHeader };

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
+import { IRole } from "@ax/types";
+import { usePermission } from "@ax/hooks";
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -16,15 +18,18 @@ const BulkHeader = (props: IProps): JSX.Element => {
     sortedListStatus,
     filterValues,
     isSiteView = false,
+    roles,
   } = props;
 
-  const bulkActions = [
+  const isAllowedToRemoveUsers = usePermission("usersRoles.removeUsers");
+
+  const bulkActions = isAllowedToRemoveUsers ? [
     {
       icon: "delete",
       text: isSiteView ? "Remove from this site" : "delete",
       action: bulkDelete,
     },
-  ];
+  ] : [];
 
   return showBulk ? (
     <BulkSelectionOptions
@@ -42,7 +47,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
       isScrolling={isScrolling}
       sortItems={sortItems}
       sortedListStatus={sortedListStatus}
-      showSiteFilter={!isSiteView}
+      isSiteView={isSiteView}
+      roles={roles}
     />
   );
 };
@@ -60,6 +66,7 @@ interface IProps {
   sortedListStatus: any;
   filterValues: any;
   filterItems: (filterPointer: string, filtersSelected: string) => void;
+  roles: IRole[];
 }
 
 export default BulkHeader;

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

@@ -1,45 +1,48 @@
-import React from "react";
+import React, { useRef } from "react";
 import { connect } from "react-redux";
 
-import { ICheck, IUser, ISite } from "@ax/types";
-import { useModal, useToast } from "@ax/hooks";
+import { ICheck, IUser, ISite, IRole, ISiteRoles } from "@ax/types";
+import { useAdaptiveText, useModal, usePermission, useToast } from "@ax/hooks";
 import { getDaysAgo } from "@ax/helpers";
 import { usersActions } from "@ax/containers/Users";
 import { CheckField, Avatar, Modal, Tag, Tooltip, Toast, ElementsTooltip } from "@ax/components";
 
 import * as S from "./style";
 
-const UserItem = (props: IProps): JSX.Element => {
+const UserItem = (props: IUserItemProps): JSX.Element => {
   const {
     user,
     sites,
     siteId,
     isSelected,
     onChange,
-    handleClick,
+    onClick,
     deleteUser,
     updateUser,
     resendInvitation,
     isSiteView = false,
+    roles,
+    toggleDeleteToast,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
   const { isVisible, toggleToast, setIsVisible } = useToast();
 
+  const userCellRef = useRef<HTMLDivElement>(null);
+  const email = useAdaptiveText(userCellRef, user.email);
+
+  const isAllowedToRemoveUsers = usePermission("usersRoles.removeUsers");
+
   const handleOnChange = (value: ICheck) => onChange(value);
-  const sitesIds = sites.map((site: ISite) => site.id);
 
-  const deleteOption = {
-    label: isSiteView ? "remove from site" : "delete",
-    icon: "delete",
-    action: () => toggleModal(),
-  };
+  const sitesIds = sites.map((site: ISite) => site.id);
 
-  const handleDeleteUser = () => {
-    if (user.id) {
-      deleteUser(user.id);
+  const handleDeleteUser = async () => {
+    const deleted = user.id ? await deleteUser(user.id) : false;
+    if (deleted) {
+      toggleModal();
+      toggleDeleteToast();
     }
-    toggleModal();
   };
 
   const handleResendInvitation = () => {
@@ -52,6 +55,20 @@ const UserItem = (props: IProps): JSX.Element => {
     }
   };
 
+  const handleClick = () => user.id && onClick(user.id);
+
+  const actionIsDisabled = isSiteView && user.isSuperAdmin;
+
+  const deleteOption = isAllowedToRemoveUsers
+    ? {
+        label: isSiteView ? "remove from site" : "delete",
+        icon: "delete",
+        action: () => toggleModal(),
+        disabled: actionIsDisabled,
+        helpText: actionIsDisabled ? "This is a superadmin user. You cannot remove it." : "",
+      }
+    : undefined;
+
   const resendOption = {
     label: "Resend invitation",
     icon: "sendEmail",
@@ -60,20 +77,37 @@ const UserItem = (props: IProps): JSX.Element => {
 
   const menuOptions = user.status === "invited" ? [resendOption, deleteOption] : [deleteOption];
 
-  const getUpdatedSites = (currentUserSiteIds: any) =>
-    currentUserSiteIds[0] === "all"
-      ? sitesIds.filter((id: number) => id !== siteId)
-      : currentUserSiteIds.filter((id: number) => id !== siteId);
+  const getUpdatedSites = () => {
+    const hasAll = user.roles.find((siteRole: ISiteRoles) => siteRole.siteId === "all");
+    if (hasAll) {
+      const oldRoleSites = user.roles.filter((siteRole: ISiteRoles) => siteRole.siteId !== "all");
+      const roleSites = sitesIds
+        .filter((site: number) => site !== siteId)
+        .map((siteId: number) => {
+          return { siteId, roles: hasAll.roles };
+        });
+      return [...oldRoleSites, ...roleSites];
+    } else {
+      return user.roles.filter((siteRole: ISiteRoles) => siteRole.siteId !== siteId);
+    }
+  };
 
-  const removeUserFromSite = () => {
-    const updatedSites = getUpdatedSites(user.sites);
-    const updatedUser = { ...user, sites: updatedSites };
-    user.id && updateUser(user.id, updatedUser, false, true).then(() => toggleModal());
+  const removeUserFromSite = async () => {
+    if (!user.id) return;
+    const updatedSites = getUpdatedSites();
+    const updatedUser = { ...user, roles: updatedSites };
+    const updated = await updateUser(user.id, updatedUser, false, true);
+    if (updated) {
+      toggleModal();
+      toggleDeleteToast();
+    }
   };
+
   const mainDeleteAction = {
     title: isSiteView ? "Remove user" : "Delete user",
     onClick: isSiteView ? removeUserFromSite : handleDeleteUser,
   };
+
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleModal };
 
   const tagColor = user.status === "invited" ? "#FFBB37" : "#AFC628";
@@ -95,31 +129,78 @@ const UserItem = (props: IProps): JSX.Element => {
     }
   };
 
-  const getElementsNames = () => user?.sites.map((id: string | number) => getSiteNameById(id));
+  const getElementsNames = () =>
+    user.isSuperAdmin
+      ? ["ALL SITES"]
+      : user?.roles
+          .filter((siteRoles: ISiteRoles) => siteRoles.siteId === "all" || Number.isInteger(siteRoles.siteId))
+          .map((siteRoles: ISiteRoles) => getSiteNameById(siteRoles.siteId));
+
+  let rolesIds: number[] = [];
+
+  if (isSiteView) {
+    const roleSite = user.roles.find(
+      (siteRoles: { siteId: number | string; roles: number[] }) =>
+        siteRoles.siteId === siteId || siteRoles.siteId === "all"
+    );
+    rolesIds = roleSite ? roleSite.roles : [];
+  } else {
+    user.roles.forEach((siteRoles: { siteId: number | string; roles: number[] }) => {
+      rolesIds = [...rolesIds, ...siteRoles.roles];
+    });
+  }
+
+  const rolesString = user.isSuperAdmin
+    ? ["Super - admin"]
+    : roles && roles.filter((role: IRole) => rolesIds && rolesIds.includes(role.id)).map((role: IRole) => role.name);
+
+  const colors = user.isSuperAdmin
+    ? { "Super - admin": "#E7CBFE" }
+    : rolesString &&
+      rolesString.reduce((prev, current) => {
+        const color: IRole | undefined = roles.find((role: IRole) => role.name === current);
+        return { ...prev, [current]: color?.hex };
+      }, {});
 
   return (
     <>
-      <S.UserRow role="rowgroup" selected={isSelected}>
+      <S.UserRow role="rowgroup" selected={isSelected} data-testid="user-item">
         <S.CheckCell role="cell">
-          <CheckField name="check" value={user.id ?? ""} checked={isSelected} onChange={handleOnChange} />
+          <CheckField
+            name={user.name}
+            value={user.id ?? ""}
+            checked={isSelected}
+            onChange={handleOnChange}
+            disabled={actionIsDisabled}
+          />
         </S.CheckCell>
-        <S.UserCell role="cell" onClick={handleClick}>
+        <S.UserCell role="cell" onClick={handleClick} data-testid="user-cell" clickable={!actionIsDisabled}>
           <S.AvatarWrapper>
             <Avatar image={user.image?.thumb} name={user.name} />
           </S.AvatarWrapper>
-          <S.UserInfo>
+          <S.UserInfo ref={userCellRef}>
             <S.UserName>{user.name}</S.UserName>
-            <S.UserEmail>{user.email}</S.UserEmail>
+            <S.UserEmail width={email.width}>{email.text}</S.UserEmail>
             <S.UserUsername>@{user.username}</S.UserUsername>
           </S.UserInfo>
         </S.UserCell>
+        <S.RolesCell role="cell" onClick={handleClick} isSite={isSiteView} clickable={!actionIsDisabled}>
+          <ElementsTooltip
+            elements={rolesString}
+            maxChar={30}
+            rounded={true}
+            defaultElements={isSiteView ? 4 : 2}
+            elementsPerRow={2}
+            colors={colors}
+          />
+        </S.RolesCell>
         {isSiteView ? null : (
-          <S.UserCell role="cell" onClick={handleClick}>
-            {user?.sites?.length > 0 && <ElementsTooltip elements={getElementsNames()} elementsPerRow={3} defaultElements={3} />}
-          </S.UserCell>
+          <S.SitesCell role="cell" onClick={handleClick} clickable={!actionIsDisabled} data-testid="sites-cell">
+            <ElementsTooltip elements={getElementsNames()} elementsPerRow={3} defaultElements={2} maxChar={15} />
+          </S.SitesCell>
         )}
         {isSiteView ? null : (
-          <S.StatusCell>
+          <S.StatusCell data-testid="status-cell">
             <Tooltip content={tooltipText} hideOnClick>
               <Tag type="status" text={user.status ?? ""} color={tagColor} />
             </Tooltip>
@@ -137,7 +218,7 @@ const UserItem = (props: IProps): JSX.Element => {
         mainAction={mainDeleteAction}
       >
         {isOpen ? (
-          <S.ModalContent>
+          <S.ModalContent data-testid="modal-delete-content">
             {isSiteView ? (
               <p>
                 Are you sure you want to remove <strong>{user.email}</strong> from this site? If you remove it, this
@@ -160,14 +241,16 @@ const UserItem = (props: IProps): JSX.Element => {
   );
 };
 
-interface IUserItemProps {
+interface IProps {
   user: IUser;
   siteId?: number;
   sites: ISite[];
   isSelected: boolean;
   isSiteView?: boolean;
+  roles: IRole[];
   onChange: (value: ICheck) => void;
-  handleClick: (id: number) => void;
+  onClick: (id: number) => void;
+  toggleDeleteToast: () => void;
 }
 
 const mapDispatchToProps = {
@@ -177,11 +260,11 @@ const mapDispatchToProps = {
 };
 
 interface IDispatchProps {
-  updateUser(id: number, data: any, isProfile: boolean, isList?: boolean): any;
+  updateUser(id: number, data: any, isProfile: boolean, isList?: boolean): Promise<boolean>;
   deleteUser(id: number): Promise<boolean>;
   resendInvitation(id: number): Promise<boolean>;
 }
 
-type IProps = IUserItemProps & IDispatchProps;
+export type IUserItemProps = IProps & IDispatchProps;
 
 export default connect(null, mapDispatchToProps)(UserItem);

package/src/modules/Users/UserList/UserItem/style.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Cell, Row } from "@ax/components/TableList/TableItem/style";
 import { ActionMenu } from "@ax/components";
 
-const CheckCell = styled(Cell as any)`
+const CheckCell = styled(Cell)`
   padding-right: 0;
   padding-left: ${(p) => p.theme.spacing.m};
   label {
@@ -12,28 +12,37 @@ const CheckCell = styled(Cell as any)`
   }
 `;
 
-const UserCell = styled(Cell as any)`
-  width: 35%;
+const UserCell = styled(Cell)<{ clickable: boolean }>`
   flex-grow: 1;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
+  flex-wrap: nowrap;
 `;
 
 const AvatarWrapper = styled.div`
   margin-right: ${(p) => p.theme.spacing.s};
 `;
 
-const UserInfo = styled.div``;
+const UserInfo = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+`;
 
 const UserName = styled.div`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.colors.textHighEmphasis};
 `;
 
-const UserEmail = styled.div`
+const UserEmail = styled.div<{ width: number }>`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.colors.textMediumEmphasis};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: ${(p) => `${p.width}px`};
 `;
 
 const UserUsername = styled.div`
@@ -41,12 +50,22 @@ const UserUsername = styled.div`
   color: ${(p) => p.theme.colors.textMediumEmphasis};
 `;
 
-const StatusCell = styled(Cell as any)`
-  width: 98px;
+const StatusCell = styled(Cell)`
+  flex: 0 0 98px;
+`;
+
+const ActionsCell = styled(Cell)`
+  flex: 0 0 64px;
 `;
 
-const ActionsCell = styled(Cell as any)`
-  width: 60px;
+const RolesCell = styled(Cell)<{ isSite: boolean; clickable: boolean }>`
+  flex: ${(p) => (p.isSite ? "0 0 450px" : "0 0 275px")};
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
+`;
+
+const SitesCell = styled(Cell)<{ clickable: boolean }>`
+  flex: 0 0 210px;
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
 `;
 
 const ActionsWrapper = styled.div`
@@ -62,16 +81,13 @@ const StyledActionMenu = styled(ActionMenu)`
   margin-left: auto;
 `;
 
-const UserRow = styled(Row as any)<{ disabled: boolean }>`
-  cursor: ${(p) => (p.disabled ? "default" : "pointer")};
+const UserRow = styled(Row)`
+  cursor: pointer;
   &:hover {
     ${StyledActionMenu} {
       opacity: 1;
     }
   }
-  ${UserCell} {
-    pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
-  }
 `;
 
 const ModalContent = styled.div`
@@ -95,4 +111,6 @@ export {
   UserRow,
   ModalContent,
   StatusCell,
+  RolesCell,
+  SitesCell,
 };