@griddo/ax 10.1.96 → 10.2.0

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

@@ -1,12 +1,22 @@
 import React, { memo } from "react";
 import { connect } from "react-redux";
 
-import { IRootState, IStructuredDataContent, ICheck, IDataPack, ILanguage, IDataLanguage, IColumn } from "@ax/types";
+import {
+  IRootState,
+  IStructuredDataContent,
+  ICheck,
+  IDataPack,
+  ILanguage,
+  IDataLanguage,
+  IColumn,
+  ISite,
+} from "@ax/types";
 import { getActivatedDataPacksIds, getHumanLastModifiedDate } from "@ax/helpers";
 import { setIsSavedData } from "@ax/forms";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { appActions } from "@ax/containers/App";
 import { CheckField, FloatingMenu, Icon, Flag, LanguageMenu, Tooltip, CategoryCell } from "@ax/components";
+import { usePermission } from "@ax/hooks";
 
 import * as S from "./style";
 
@@ -34,8 +44,22 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
     columns,
     categoryColors,
     addCategoryColors,
+    currentSiteInfo,
   } = props;
 
+  const isAllowedToDuplicatePages =
+    (!currentSiteInfo && usePermission("global.globalData.duplicateGlobalData")) ||
+    (currentSiteInfo && usePermission("content.duplicatePages"));
+  const isAllowedToPublishPages =
+    (!currentSiteInfo && usePermission("global.globalData.publishUnpublishAllGlobalData")) ||
+    (currentSiteInfo && usePermission("content.publishUnpublishPages"));
+  const isAllowedToCreatePages =
+    (!currentSiteInfo && usePermission("global.globalData.createAllGlobalData")) ||
+    (currentSiteInfo && usePermission("content.createPages"));
+  const isAllowedToDeletePage =
+    (!currentSiteInfo && usePermission("global.globalData.deleteAllGlobalData")) ||
+    (currentSiteInfo && usePermission("content.deletePages"));
+
   const { locale } = lang;
   const { dataLanguages } = structuredData;
 
@@ -103,7 +127,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
   const isDisabled =
     currentStructuredData && currentStructuredData.local && !activatedDataPacksIds.includes(currentStructuredData.id);
 
-  const availableLanguages = isDisabled ? currentLanguages : languages;
+  const availableLanguages = isDisabled || !isAllowedToCreatePages ? currentLanguages : languages;
 
   const handleLanguage = (language: any) => () => {
     const {
@@ -156,26 +180,31 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
       "Not translatable"
     );
 
-  const deleteOption = {
-    label: "delete",
-    icon: "delete",
-    action: removeItem,
-  };
+  const menuOptions = [];
 
-  const duplicateOption = {
-    label: "duplicate",
-    icon: "duplicate",
-    action: duplicateItem,
-  };
+  if (!isDisabled && isEditable && isAllowedToDuplicatePages) {
+    menuOptions.push({
+      label: "duplicate",
+      icon: "duplicate",
+      action: duplicateItem,
+    });
+  }
 
-  const publishOption = {
-    label: structuredData.draft ? "Publish" : "Unpublish",
-    icon: structuredData.draft ? "upload-pending" : "offline",
-    action: structuredData.draft ? publishItem : unpublishItem,
-  };
+  if (isEditable && isAllowedToDeletePage) {
+    menuOptions.push({
+      label: "delete",
+      icon: "delete",
+      action: removeItem,
+    });
+  }
 
-  const menuOptionsNoDuplicate = isEditable ? [deleteOption, publishOption] : [publishOption];
-  const menuOptions = isDisabled || !isEditable ? menuOptionsNoDuplicate : [duplicateOption, ...menuOptionsNoDuplicate];
+  if (isAllowedToPublishPages) {
+    menuOptions.push({
+      label: structuredData.draft ? "Publish" : "Unpublish",
+      icon: structuredData.draft ? "upload-pending" : "offline",
+      action: structuredData.draft ? publishItem : unpublishItem,
+    });
+  }
 
   const CategoryColumns = categoryColumns.map((col: any) => {
     const type: any = structuredData && structuredData.content && structuredData.content[col.key];
@@ -250,10 +279,12 @@ interface IStructuredDataItemProps {
   categoryColors: any;
   addCategoryColors(cats: string[]): void;
   setCurrentDataID(id: number | null): void;
+  currentSiteInfo: ISite | null;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   currentStructuredData: state.structuredData.currentStructuredData,
+  currentSiteInfo: state.sites.currentSiteInfo,
 });
 
 const mapDispatchToProps = {

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

@@ -24,7 +24,7 @@ import {
   ISetCurrentPageNameAction,
   pageStatus,
 } from "@ax/containers/PageEditor/interfaces";
-import { useBulkSelection, useModal, useToast, useCategoryColors } from "@ax/hooks";
+import { useBulkSelection, useModal, useToast, useCategoryColors, usePermission } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { sitesActions } from "@ax/containers/Sites";
@@ -129,6 +129,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     subErrors?: { id: number; error: string }[];
   } | null>(null);
 
+  const allowedToCreatePages = usePermission("global.globalData.createAllGlobalData");
+
   const scope = currentSiteID ? "site" : "global";
 
   const isDataEditable = filter === "all-pages" || !currentStructuredData || currentStructuredData.editable;
@@ -287,8 +289,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       } else {
         emptyState.message = isAllPages
           ? "You don’t have pages with this content type yet."
-          : isDataEditable ? "To start using pages in your site, create as many pages as you need." : undefined;
-        emptyState.button = isAllPages ? "View all content" : isDataEditable ? "Create the first page" : undefined;
+          : allowedToCreatePages && isDataEditable ? "To start using pages in your site, create as many pages as you need." : undefined;
+        emptyState.button = isAllPages ? "View all content" : allowedToCreatePages && isDataEditable ? "Create the first page" : undefined;
         emptyState.action = isAllPages ? resetFilterValues : isDataEditable ? addNewAction : undefined;
       }
       const isEmpty = isStructuredDataFromPage ? !currentSitePages.length : !currentDataContent.length;
@@ -484,11 +486,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
   const addNewAction = isAllPages || isStructuredDataFromPage ? toggleNewModal : createNewData;
 
-  const rightButtonProps = {
+  const rightButtonProps = allowedToCreatePages ? {
     label: "New",
     action: addNewAction,
     disabled: !isDataEditable,
-  };
+  } : undefined;
 
   const options: { filters: IStructuredDataFilter[]; values: IStructuredDataValue[] } = {
     filters: getOptionFilters(structuredData),
@@ -587,6 +589,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           dynamicValues={structuredData.global}
           onClick={handleMenuClick}
           addNew={addNewAction}
+          isAllowedToCreate={allowedToCreatePages}
         />
         <S.TableListWrapper>
           {!isDataEditable && (
@@ -730,7 +733,7 @@ interface ICategoriesProps {
   totalItems: number;
   lang: { locale: string; id: number | null };
   globalLangs: ILanguage[];
-  currentSiteID: number;
+  currentSiteID: number | null;
   activatedDataPacks: IDataPack[];
   isLoading: boolean;
   template: string;

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

@@ -5,20 +5,28 @@ import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
 import { sitesActions } from "@ax/containers/Sites";
 import { Loading, MainWrapper } from "@ax/components";
-import { IRootState, IUser } from "@ax/types";
+import { IGetRoles, IRootState, ISite, IUser } from "@ax/types";
 import { useURLSearchParam } from "@ax/hooks";
 
 import UserForm from "../UserForm";
 
 const Profile = (props: IProps) => {
-  const { user, getUser, updateUser, isSaving, isLoading, getSites } = props;
+  const { user, getUser, updateUser, isSaving, isLoading, getSites, getRoles, currentSiteInfo } = props;
+
+  if (!user) {
+    throw new Error(`ERROR: User reached Profile with null user`);
+  }
 
   const isUserInit = useURLSearchParam("init");
 
   const [form, setForm] = useState<IUser>({ ...user });
 
+  const isSiteView = !!currentSiteInfo;
+
   useEffect(() => {
     isUserInit ? getSites() : getUser("me");
+    const siteId = isSiteView ? currentSiteInfo.id : "global";
+    getRoles({ siteId });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -43,7 +51,7 @@ const Profile = (props: IProps) => {
 
   return (
     <MainWrapper title="My Profile" rightButton={rightButtonProps}>
-      <UserForm form={form} setForm={setForm} user={user} readOnlySites={true} />
+      <UserForm form={form} setForm={setForm} user={user} readOnlySites={true} site={currentSiteInfo} isSiteView={isSiteView} />
     </MainWrapper>
   );
 };
@@ -53,6 +61,7 @@ const mapStateToProps = (state: IRootState) => ({
   isSaving: state.app.isSaving,
   isLoading: state.app.isLoading,
   token: state.app.token,
+  currentSiteInfo: state.sites.currentSiteInfo,
 });
 
 interface IDispatchProps {
@@ -60,6 +69,7 @@ interface IDispatchProps {
   getUser(id: string): any;
   getSites(): Promise<void>;
   updateUser(id: number, data: any, isProfile: boolean, isList: boolean): any;
+  getRoles(params: IGetRoles): Promise<void>;
 }
 
 const mapDispatchToProps = {
@@ -67,13 +77,15 @@ const mapDispatchToProps = {
   getUser: usersActions.getUser,
   updateUser: usersActions.updateUser,
   getSites: sitesActions.getSites,
+  getRoles: usersActions.getRoles,
 };
 
 interface IProfileProps {
-  user: IUser;
+  user: IUser | null;
   isSaving: boolean;
   isLoading: boolean;
   token: string;
+  currentSiteInfo: ISite | null;
 }
 
 type IProps = IProfileProps & IDispatchProps;

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

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { CheckField, TableCounter, NameFilter, PermissionsFilter, UsersFilter } from "@ax/components";
+
+import * as S from "./style";
+
+const TableHeader = (props: IProps): JSX.Element => {
+  const { totalItems, selectAllItems, isScrolling, sortItems, sortedListStatus, isSiteView } = props;
+
+  return (
+    <S.TableHeader isScrolling={isScrolling} data-testid="roles-table-header">
+      <S.CheckHeader>
+        <CheckField
+          key="selectAll"
+          name="selectAll"
+          value="selectAll"
+          onChange={selectAllItems}
+          checked={false}
+          error={false}
+        />
+      </S.CheckHeader>
+      <S.NameWrapper>
+        <NameFilter sortItems={sortItems} sortedState={sortedListStatus} pointer="name" />
+      </S.NameWrapper>
+      {isSiteView && (
+        <S.UsersWrapper>
+          <UsersFilter sortItems={sortItems} sortedState={sortedListStatus} />
+        </S.UsersWrapper>
+      )}
+      <S.PermissionsWrapper>
+        <PermissionsFilter sortItems={sortItems} sortedState={sortedListStatus} />
+      </S.PermissionsWrapper>
+
+      <S.ActionsHeader isSiteView={isSiteView}>
+        <TableCounter totalItems={totalItems} />
+      </S.ActionsHeader>
+    </S.TableHeader>
+  );
+};
+
+interface IProps {
+  totalItems: number;
+  isScrolling: boolean;
+  selectAllItems: () => void;
+  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortItems: any;
+  sortedListStatus: any;
+  filterValues: any;
+  isSiteView: boolean;
+}
+
+export default TableHeader;

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

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const TableHeader = styled.div<{ isScrolling?: boolean }>`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: ${(p) => p.theme.spacing.m};
+  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+`;
+
+const CheckHeader = styled(Header)`
+  padding-left: ${(p) => p.theme.spacing.m};
+  width: 32px;
+`;
+
+const NameWrapper = styled.div`
+  width: 400px;
+  position: relative;
+`;
+
+const PermissionsWrapper = styled.div`
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  position: relative;
+`;
+
+const ActionsHeader = styled(Header as any)<{ isSiteView: boolean }>`
+  display: flex;
+  width: ${(p) => (p.isSiteView ? "210px" : 'auto')};
+  justify-content: end;
+  padding-right: 0;
+`;
+
+const UsersWrapper = styled.div`
+  width: 20%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+`;
+
+export { TableHeader, CheckHeader, NameWrapper, PermissionsWrapper, ActionsHeader, UsersWrapper };

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { BulkSelectionOptions } from "@ax/components";
+import TableHeader from "./TableHeader";
+import { IRole } from "@ax/types";
+
+const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
+  const {
+    showBulk,
+    checkState,
+    activateRoles,
+    selectItems,
+    selectAllItems,
+    totalItems,
+    isScrolling,
+    sortItems,
+    filterItems,
+    sortedListStatus,
+    filterValues,
+    isSiteView,
+    roles,
+    selectedRoles,
+  } = props;
+
+  const deactivatedSelectedRoles = roles.filter((role: IRole) => selectedRoles.includes(role.id) && !role.active);
+
+  const bulkAction = deactivatedSelectedRoles.length
+    ? {
+        text: "Activate",
+        action: () => activateRoles(true),
+      }
+    : {
+        text: "Deactivate",
+        action: () => activateRoles(false),
+      };
+
+  return showBulk ? (
+    <BulkSelectionOptions
+      checkState={checkState}
+      actions={[bulkAction]}
+      selectItems={selectItems}
+      totalItems={totalItems}
+    />
+  ) : (
+    <TableHeader
+      filterValues={filterValues}
+      totalItems={totalItems}
+      selectAllItems={selectAllItems}
+      filterItems={filterItems}
+      isScrolling={isScrolling}
+      sortItems={sortItems}
+      sortedListStatus={sortedListStatus}
+      isSiteView={isSiteView}
+    />
+  );
+};
+
+export interface IBulkHeaderProps {
+  showBulk: boolean;
+  checkState: any;
+  activateRoles: (active: boolean) => void;
+  selectItems: () => void;
+  selectAllItems: () => void;
+  totalItems: number;
+  isScrolling: boolean;
+  sortItems: (orderPointer: string, isAscending: boolean) => void;
+  sortedListStatus: any;
+  filterValues: any;
+  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  isSiteView: boolean;
+  roles: IRole[];
+  selectedRoles: number[];
+}
+
+export default BulkHeader;

package/src/modules/Users/Roles/RoleItem/index.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+
+import { connect } from "react-redux";
+
+import { IRootState, ICheck, IRole, IUser } from "@ax/types";
+import { CheckField, ToggleField, Tag, Tooltip, Avatar } from "@ax/components";
+
+import * as S from "./style";
+
+const RoleItem = (props: IRoleItemProps): JSX.Element => {
+  const { role, users, isSelected, onChange, activateRole, siteId, onClick } = props;
+  const isSiteView = siteId !== "global";
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleStatus = (value: boolean) => activateRole(value);
+
+  const roleUsers =
+    isSiteView && role?.users?.length > 0 ? users.filter((user: IUser) => role.users.includes(user.id)) : [];
+
+  const avatarList =
+    isSiteView && roleUsers.length
+      ? roleUsers.map(
+          (user: IUser, i: number) => i < 5 && <Avatar image={user.image?.thumb} name={user.name} size="s" key={i} />
+        )
+      : [];
+
+  const tooltipAvatarList =
+    isSiteView && roleUsers.length
+      ? roleUsers.map((user: IUser) => (
+          <S.AvatarContainer addSpacing={true} key={user.id}>
+            <Avatar image={user.image?.thumb} name={user.name} size="s" key={user.id} />
+          </S.AvatarContainer>
+        ))
+      : [];
+
+  const UsersTooltip = () => <S.AvatarsTooltip data-testid="avatars-tooltip">{tooltipAvatarList}</S.AvatarsTooltip>;
+
+  return (
+    <S.RoleRow role="rowgroup" selected={isSelected} data-testid="role-item" key={`${role.name}${role.id}`}>
+      <S.CheckCell role="cell">
+        <CheckField
+          name="check"
+          value={role.id ?? ""}
+          checked={isSelected}
+          onChange={(value: ICheck) => onChange(value)}
+          disabled={!role.editable}
+        />
+      </S.CheckCell>
+      <S.RoleCell role="cell" onClick={onClick}>
+        <S.Name data-testid="role-item-name">
+          <Tag key={role.name} text={role.name} color={role.hex} />
+        </S.Name>
+        <S.Description>{role.description}</S.Description>
+      </S.RoleCell>
+      {isSiteView && (
+        <S.AvatarCell
+          data-testid="avatar-cell"
+          onMouseEnter={() => setIsOpen(true)}
+          onMouseLeave={() => setIsOpen(false)}
+          onClick={onClick}
+        >
+          {roleUsers.length > 5 && isOpen && <UsersTooltip />}
+          <S.AvatarsWrapper>
+            {avatarList}
+            {roleUsers?.length > 5 ? (
+              <S.UsersLength data-testid="users-length"> +{roleUsers.length - 5}</S.UsersLength>
+            ) : null}
+          </S.AvatarsWrapper>
+        </S.AvatarCell>
+      )}
+      <S.Permissions isSiteView={isSiteView} onClick={onClick} data-testid="role-item-permissions">
+        <Tooltip content="Number of permissions of this Role">{role?.permissions?.totalPermissions}</Tooltip>
+      </S.Permissions>
+      <S.Status>
+        <Tooltip content={!role.editable ? "It can't be disabled because it's a main role." : undefined}>
+          <ToggleField
+            name={role?.name}
+            size="s"
+            value={role?.active}
+            onChange={toggleStatus}
+            disabled={!role.editable}
+          />
+        </Tooltip>
+      </S.Status>
+      <S.ActionsCell role="cell"></S.ActionsCell>
+    </S.RoleRow>
+  );
+};
+
+interface IRoleItemProps {
+  role: IRole;
+  users: IUser[];
+  isSelected: boolean;
+  siteId: string | number;
+  onChange: (value: ICheck) => void;
+  onClick: () => void;
+  activateRole(value: boolean): void;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  users: state.users.users,
+});
+
+export default connect(mapStateToProps)(RoleItem);

package/src/modules/Users/Roles/RoleItem/style.tsx

@@ -0,0 +1,127 @@
+import styled from "styled-components";
+
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+
+const RoleRow = styled(Row as any)<{ disabled: boolean }>``;
+
+const CheckCell = styled(Cell)`
+  justify-content: flex-start;
+  padding-right: 0;
+  padding-left: ${(p) => p.theme.spacing.m};
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+  > div {
+    width: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const RoleCell = styled(Cell)`
+  width: 400px;
+  flex-direction: column;
+  justify-content: flex-start;
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  width: 400px;
+`;
+
+const AvatarCell = styled(Cell)`
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 10%;
+`;
+
+const UsersLength = styled.span`
+  ${(p) => p.theme.textStyle.uiS};
+  position: absolute;
+  left: 110px;
+`;
+
+const AvatarsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  div {
+    position: absolute;
+    &:nth-child(1) {
+      position: absolute;
+      z-index: 5;
+    }
+    &:nth-child(2) {
+      position: absolute;
+      z-index: 4;
+      left: 20px;
+    }
+    &:nth-child(3) {
+      position: absolute;
+      z-index: 3;
+      left: 40px;
+    }
+    &:nth-child(4) {
+      position: absolute;
+      z-index: 2;
+      left: 60px;
+    }
+    &:nth-child(5) {
+      position: absolute;
+      z-index: 1;
+      left: 80px;
+    }
+  }
+`;
+
+const Status = styled(Cell)`
+  display: flex;
+  justify-content: center;
+`;
+
+const Permissions = styled(Cell)<{ isSiteView: boolean }>`
+  text-align: center;
+  flex-grow: 1;
+`;
+
+const AvatarsTooltip = styled.div`
+  position: absolute;
+  display: flex;
+  flex-wrap: wrap;
+  width: 224px;
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => p.theme.spacing.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowL};
+  z-index: 6;
+  background: ${(p) => p.theme.color.uiBackground02};
+  top: 60%;
+  left: 50%;
+`;
+
+const AvatarContainer = styled.div<{ addSpacing: boolean }>`
+  padding: ${(p) => (p.addSpacing ? p.theme.spacing.xxs : 0)};
+`;
+
+const ActionsCell = styled(Cell)``;
+
+export {
+  CheckCell,
+  RoleCell,
+  Name,
+  Description,
+  RoleRow,
+  Status,
+  Permissions,
+  UsersLength,
+  AvatarCell,
+  AvatarsWrapper,
+  AvatarsTooltip,
+  AvatarContainer,
+  ActionsCell,
+};