@griddo/ax 10.1.96 → 10.2.0

package/src/modules/Users/UserCreate/SiteItem/RolesModal/RoleItem/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { CheckField, Tag } from "@ax/components";
+import { ICheck, IRole } from "@ax/types";
+
+import * as S from "./style";
+
+const RoleItem = (props: IRoleItemProps): JSX.Element => {
+  const { role, onChange, onClick, isChecked = false, isSelected = false, isReadOnly = false } = props;
+
+  const handleClick = () => {
+    onClick && onClick(role);
+    onChange && onChange({ value: role.id, isChecked: !isChecked });
+  };
+
+  return (
+    <S.RoleItem
+      role="rowgroup"
+      selected={isChecked}
+      isSelected={isSelected}
+      isReadOnly={isReadOnly}
+      data-testid="roles-modal-item"
+    >
+      {!isReadOnly && (
+        <S.CheckCell role="cell">
+          <CheckField name={role.name} value={role.id} checked={isChecked} onChange={onChange} />
+        </S.CheckCell>
+      )}
+      <S.TitleCell onClick={handleClick} data-testid="roles-modal-item-title">
+        <S.Name>
+          <Tag text={role.name} color={role.hex} />
+        </S.Name>
+        <S.Description>{role.description}</S.Description>
+      </S.TitleCell>
+    </S.RoleItem>
+  );
+};
+
+export interface IRoleItemProps {
+  role: IRole;
+  isChecked?: boolean;
+  isSelected?: boolean;
+  onChange?(value: ICheck): void;
+  onClick?(role: IRole): void;
+  isReadOnly?: boolean;
+}
+
+export default RoleItem;

package/src/modules/Users/UserCreate/SiteItem/RolesModal/RoleItem/style.tsx

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+
+const CheckCell = styled(Cell)`
+  padding-left: ${(p) => p.theme.spacing.m};
+  width: 32px;
+  justify-content: flex-start;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const TitleCell = styled(Cell)`
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  width: 100%;
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`;
+
+const RoleItem = styled(Row)<{ isSelected: boolean; isReadOnly: boolean }>`
+  border: ${(p) => (p.isSelected ? `2px solid ${p.theme.color.interactive01}` : `1px solid ${p.theme.color.uiLine}`)};
+  :before {
+    background-color: transparent;
+  }
+  :hover {
+    cursor: ${(p) => (p.isReadOnly ? "default" : "pointer")};
+    &:before {
+      background-color: ${(p) => (p.isReadOnly ? "transparent" : p.theme.color.overlayHoverPrimary)};
+    }
+  }
+`;
+
+export { CheckCell, TitleCell, RoleItem, Name, Description };

package/src/modules/Users/UserCreate/SiteItem/RolesModal/index.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from "react";
+
+import { Button, Modal, NoteField, Icon } from "@ax/components";
+import { ICheck, IRole } from "@ax/types";
+import { useModal } from "@ax/hooks";
+
+import RoleItem from "./RoleItem";
+
+import * as S from "./style";
+
+const RolesModal = (props: IRolesModalProps): JSX.Element => {
+  const { roles, isOpen, toggleModal, addRoles, selectedRoles, allSites, isGlobal } = props;
+
+  const [rolesChecked, setRolesChecked] = useState<number[]>(selectedRoles ? selectedRoles : []);
+  const [selected, setSelected] = useState<IRole | undefined>(roles ? roles[0] : undefined);
+
+  const { isOpen: isAlertOpen, toggleModal: toggleAlertModal } = useModal(false);
+
+  useEffect(() => {
+    setRolesChecked(selectedRoles ? selectedRoles : []);
+  }, [selectedRoles]);
+
+  const handleChange = (value: ICheck) => {
+    if (value.isChecked) {
+      setRolesChecked((state) => [...state, value.value]);
+    } else {
+      const updatedRoles = rolesChecked.filter((id: number) => id !== value.value);
+      setRolesChecked(updatedRoles);
+    }
+  };
+
+  const handleClick = (role: IRole) => setSelected(role);
+
+  const checkRoles = () => (allSites ? toggleAlertModal() : handleAddRoles());
+
+  const handleAddRoles = () => {
+    addRoles(rolesChecked);
+    isAlertOpen && toggleAlertModal();
+    toggleModal();
+  };
+
+  const mainModalAction = {
+    title: "Update User Roles",
+    onClick: handleAddRoles,
+  };
+
+  const secondaryModalAction = { title: "Cancel", onClick: toggleAlertModal };
+
+  const rolePermissions = isGlobal ? selected?.permissions.globalPermissions : selected?.permissions.sitePermissions
+
+  return (
+    <>
+      <Modal isOpen={isOpen} hide={toggleModal} title="Add User Roles" size="XL" overflow="hidden">
+        {isOpen && (
+          <S.ModalContent data-testid="modal-roles-content">
+            <S.RoleList>
+              <S.Selected>{rolesChecked.length} Roles Selected</S.Selected>
+              {roles &&
+                roles
+                  .filter((role: IRole) => role.active)
+                  .map((role: IRole) => {
+                    const isChecked = rolesChecked.includes(role.id);
+                    return (
+                      <RoleItem
+                        key={role.id}
+                        role={role}
+                        isChecked={isChecked}
+                        isSelected={role.id === selected?.id}
+                        onChange={handleChange}
+                        onClick={handleClick}
+                      />
+                    );
+                  })}
+            </S.RoleList>
+            <S.SidePanel>
+              <S.RoleInfo>
+                {selected && (
+                  <div data-testid="permissions-wrapper">
+                    <NoteField value={{ title: selected.name, text: selected.description }} />
+                    <S.PermissionsList>
+                      <S.PermissionsListTitle>
+                        Permissions ({selected.permissions.totalPermissions})
+                      </S.PermissionsListTitle>
+                      <S.PermissionsWrapper>
+                        {rolePermissions && rolePermissions.map((permission: { name: string; key: string }) => (
+                          <S.Permission key={permission.key}>
+                            <S.IconWrapper data-testid="success-icon">
+                              <Icon name="done" size="16" />
+                            </S.IconWrapper>
+                            {permission.name}
+                          </S.Permission>
+                        ))}
+                      </S.PermissionsWrapper>
+                    </S.PermissionsList>
+                  </div>
+                )}
+              </S.RoleInfo>
+              <S.ButtonWrapper>
+                <Button type="button" buttonStyle="line" onClick={checkRoles}>
+                  Add User Role
+                </Button>
+              </S.ButtonWrapper>
+            </S.SidePanel>
+          </S.ModalContent>
+        )}
+      </Modal>
+      <Modal
+        isOpen={isAlertOpen}
+        hide={toggleAlertModal}
+        title="Update Roles"
+        size="S"
+        mainAction={mainModalAction}
+        secondaryAction={secondaryModalAction}
+      >
+        {isAlertOpen && (
+          <S.ModalContentPadding>
+            <p>
+              This user can access all existing and future sites as a viewer. By changing the role on this site,{" "}
+              <strong>‘All site permissions’ will be removed from the user,</strong> but they will{" "}
+              <strong>still have access to all sites</strong> they have access currently. This user must be given{" "}
+              <strong>access manually</strong> when creating a new site.
+            </p>
+          </S.ModalContentPadding>
+        )}
+      </Modal>
+    </>
+  );
+};
+
+export interface IRolesModalProps {
+  roles?: IRole[];
+  isOpen: boolean;
+  selectedRoles?: number[];
+  toggleModal(): void;
+  addRoles(roles: number[]): void;
+  isGlobal: boolean;
+  allSites?: boolean;
+}
+
+export default RolesModal;

package/src/modules/Users/UserCreate/SiteItem/RolesModal/style.tsx

@@ -0,0 +1,94 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+  display: flex;
+  max-height: calc(640px - 58px);
+  width: 100%;
+  overflow: hidden;
+`;
+
+const RoleList = styled.div`
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m}`};
+  overflow: auto;
+  width: 100%;
+`;
+
+const SidePanel = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
+  border-left: 1px solid ${(p) => p.theme.color.uiLine};
+  flex-shrink: 0;
+`;
+
+const PermissionsList = styled.div``;
+
+const PermissionsWrapper = styled.div`
+  height: 340px;
+  margin-right: -${(p) => p.theme.spacing.m};
+  overflow: auto;
+`;
+
+const PermissionsListTitle = styled.div`
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  ${(p) => p.theme.textStyle.uiS};
+  margin-top: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Permission = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const RoleInfo = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: calc(640px - 58px);
+`;
+
+const IconWrapper = styled.span`
+  padding-right: ${(p) => p.theme.spacing.s};
+  height: 16px;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  bottom: 0;
+  position: absolute;
+  height: 72px;
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+  justify-content: flex-end;
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
+`;
+
+const Selected = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const ModalContentPadding = styled.div`
+  display: flex;
+  height: 100%;
+  wdith: 100%;
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+export {
+  ModalContent,
+  RoleList,
+  SidePanel,
+  PermissionsList,
+  PermissionsListTitle,
+  PermissionsWrapper,
+  Permission,
+  IconWrapper,
+  ButtonWrapper,
+  RoleInfo,
+  Selected,
+  ModalContentPadding,
+};

package/src/modules/Users/UserCreate/SiteItem/index.tsx

@@ -1,44 +1,125 @@
 import React from "react";
 
-import { CheckField } from "@ax/components";
+import { CheckField, Button, ElementsTooltip } from "@ax/components";
+import { useModal } from "@ax/hooks";
+
+import { IRole } from "@ax/types";
+import RolesModal from "./RolesModal";
 
 import * as S from "./style";
 
-const SiteItem = (props: IProps) => {
-  const { item, sites, disabled = false, readOnly = false } = props;
+const SiteItem = (props: ISiteItemProps): JSX.Element => {
+  const { item, sites, roles, disabled = false, readOnly = false, addRoles, selected, featured, description } = props;
   const { name, id, onChange } = item;
   const isSelected = sites.includes(id);
 
-  const onClick = (e: React.MouseEvent) => {
+  const { isOpen, toggleModal } = useModal();
+
+  const handleClick = (e: React.MouseEvent) => {
     if (readOnly) return;
     e.preventDefault();
     e.stopPropagation();
-    onChange();
+    onChange(id);
   };
 
+  const handleChange = () => onChange(id);
+
+  const handleAddRoles = (roles: number[]) => addRoles && addRoles({ siteId: id, roles });
+
+  const rolesString =
+    roles && roles.filter((role: IRole) => selected && selected.includes(role.id)).map((role: IRole) => role.name);
+  const colors =
+    rolesString &&
+    rolesString.reduce((prev, current) => {
+      const color: IRole | undefined = roles.find((role: IRole) => role.name === current);
+      return { ...prev, [current]: color?.hex };
+    }, {});
+
+  const textButton = selected && selected.length ? "Edit Roles" : "Add Roles";
+  const iconButton = selected && selected.length ? "edit" : undefined;
+
   return (
-    <S.SiteItem
-      disabled={disabled}
-      role="rowgroup"
-      readOnly={readOnly}
-      selected={!readOnly && isSelected}
-      onClick={onClick}
-    >
-      {!readOnly ? (
-        <S.CheckCell role="cell">
-          <CheckField disabled={disabled} name="check" value={id} checked={isSelected} onChange={onChange} />
-        </S.CheckCell>
-      ) : null}
-      <S.NameCell disabled={disabled}>{name}</S.NameCell>
-    </S.SiteItem>
+    <>
+      <S.SiteItem
+        disabled={disabled}
+        role="rowgroup"
+        readOnly={readOnly}
+        selected={!readOnly && isSelected}
+        data-testid="user-site-item"
+        isChecked={featured && isSelected}
+      >
+        {!readOnly ? (
+          <S.CheckCell role="cell" featured={featured} onClick={handleClick} data-testid="check-cell">
+            <CheckField disabled={disabled} name={name} value={id} checked={isSelected} onChange={handleChange} />
+          </S.CheckCell>
+        ) : null}
+        {featured ? (
+          <S.WrapperCell role="cell" data-testid="wrapper-cell-featured">
+            <S.Name onClick={handleClick}>{name}</S.Name>
+            <S.Description onClick={handleClick}>{description}</S.Description>
+            <S.Actions hasTags={rolesString ? rolesString.length > 0 : false}>
+              <ElementsTooltip
+                elements={rolesString}
+                maxChar={30}
+                rounded={true}
+                defaultElements={2}
+                elementsPerRow={2}
+                colors={colors}
+              />
+              {!readOnly && (
+                <Button type="button" buttonStyle="text" onClick={toggleModal} icon={iconButton}>
+                  {textButton}
+                </Button>
+              )}
+            </S.Actions>
+          </S.WrapperCell>
+        ) : (
+          <>
+            <S.NameCell role="cell" disabled={disabled} onClick={handleClick} data-testid="name-cell">
+              {name}
+            </S.NameCell>
+            <S.RolesCell role="cell" onClick={handleClick}>
+              <ElementsTooltip
+                elements={rolesString}
+                maxChar={30}
+                rounded={true}
+                defaultElements={2}
+                elementsPerRow={2}
+                colors={colors}
+              />
+            </S.RolesCell>
+            {!readOnly && (
+              <S.ActionCell role="cell" data-testid="action-cell">
+                <Button type="button" buttonStyle="text" onClick={toggleModal} icon={iconButton}>
+                  {textButton}
+                </Button>
+              </S.ActionCell>
+            )}
+          </>
+        )}
+      </S.SiteItem>
+      <RolesModal
+        isOpen={isOpen}
+        toggleModal={toggleModal}
+        roles={roles}
+        addRoles={handleAddRoles}
+        selectedRoles={selected}
+        isGlobal={id==="global"}
+      />
+    </>
   );
 };
 
-interface IProps {
-  item: { name: string; id: number | string; onChange: () => void };
+export interface ISiteItemProps {
+  item: { name: string; id: number | string; onChange: (id: number | string) => void };
   sites: (string | number)[];
+  roles?: IRole[];
+  addRoles?(newRoles: any): void;
+  selected?: number[];
   disabled?: boolean;
   readOnly?: boolean;
+  featured?: boolean;
+  description?: string;
 }
 
-export default SiteItem;
+export default SiteItem;

package/src/modules/Users/UserCreate/SiteItem/style.tsx

@@ -1,30 +1,73 @@
 import styled from "styled-components";
 import { Cell, Row } from "@ax/components/TableList/TableItem/style";
 
-const CheckCell = styled(Cell)`
-  padding-left: ${(p) => p.theme.spacing.m};
+const CheckCell = styled(Cell)<{ featured?: boolean }>`
+  padding: ${(p) => (p.featured ? p.theme.spacing.s : `12px ${p.theme.spacing.s}`)};
   width: 32px;
+  justify-content: ${(p) => (p.featured ? "flex-start" : "center")};
   label {
     margin-bottom: ${(p) => p.theme.spacing.s};
   }
 `;
 
 const NameCell = styled(Cell)<{ disabled?: boolean }>`
-  width: 40%;
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis)};
+  flex-grow: 1;
+  padding: ${(p) => `12px ${p.theme.spacing.s}`};
 `;
 
-const SiteItem = styled(Row)<{ disabled?: boolean; readOnly?: boolean }>`
-  pointer-events: ${(p) => (p.disabled || p.readOnly ? "none" : "auto")};
+const RolesCell = styled(Cell)`
+  padding: ${(p) => `12px ${p.theme.spacing.s}`};
+`;
+
+const ActionCell = styled(Cell)`
+  flex: 0 0 150px;
+  padding: ${(p) => `12px ${p.theme.spacing.s}`};
+`;
+
+const SiteItem = styled(Row)<{ disabled?: boolean; readOnly?: boolean; isChecked?: boolean }>`
+  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
+  border: ${(p) => (p.isChecked ? `2px solid ${p.theme.color.interactive01}` : `1px solid ${p.theme.color.uiLine}`)};
+  :before {
+    background-color: transparent;
+  }
   &:hover {
+    cursor: ${(p) => (p.readOnly ? "default" : "pointer")};
     background-color: ${(p) =>
       p.readOnly
         ? p.theme.color.uiBackground02
         : p.selected
         ? p.theme.color.overlayPressedPrimary
         : p.theme.color.overlayHoverPrimary};
+    &:before {
+      background-color: ${(p) => (p.readOnly ? "transparent" : p.theme.color.overlayHoverPrimary)};
+    }
+  }
+`;
+
+const WrapperCell = styled(Cell)`
+  width: 100%;
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const Actions = styled.div<{ hasTags: boolean }>`
+  display: flex;
+  align-items: center;
+  & > div {
+    margin-right: ${(p) => (p.hasTags ? p.theme.spacing.s : "0")};
   }
 `;
 
-export { CheckCell, NameCell, SiteItem };
+export { CheckCell, NameCell, RolesCell, ActionCell, SiteItem, WrapperCell, Name, Description, Actions };