@griddo/ax 11.14.2 → 11.14.3-rc.0

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

@@ -1,11 +1,15 @@
-import React, { useRef } from "react";
 import { connect } from "react-redux";
 
-import { CategoryCell, CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tooltip } from "@ax/components";
+import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tooltip, TruncatedTooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
-import { getActivatedDataPacksIds, getHumanLastModifiedDate, getScheduleFormatDate } from "@ax/helpers";
-import { useAdaptiveText, usePermission } from "@ax/hooks";
+import {
+	buildCategoryColumns,
+	getActivatedDataPacksIds,
+	getHumanLastModifiedDate,
+	getScheduleFormatDate,
+} from "@ax/helpers";
+import { usePermissions } from "@ax/hooks";
 import type {
 	ICheck,
 	IColumn,
@@ -19,8 +23,6 @@ import type {
 	IStructuredDataContent,
 } from "@ax/types";
 
-import { useTheme } from "styled-components";
-
 import { getPermission } from "./utils";
 
 import * as S from "./style";
@@ -57,15 +59,12 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 	const isPrivateData = currentStructuredData?.private || false;
 	const isGlobal = !currentSiteInfo;
 
-	const isAllowedToDuplicatePages = usePermission(getPermission("duplicate", isGlobal, isPrivateData));
-	const isAllowedToPublishPages = usePermission(getPermission("publish", isGlobal, isPrivateData));
-	const isAllowedToCreatePages = usePermission(getPermission("create", isGlobal, isPrivateData));
-	const isAllowedToDeletePage = usePermission(getPermission("delete", isGlobal, isPrivateData));
-
-	const nameCellRef = useRef<HTMLDivElement>(null);
-	const theme: any = useTheme();
-	const nameCellPadding = Number(theme.spacing.s.slice(0, -2));
-	const title = useAdaptiveText(nameCellRef, structuredData.content.title, nameCellPadding);
+	const isAllowedTo = usePermissions({
+		duplicatePages: getPermission("duplicate", isGlobal, isPrivateData),
+		publishPages: getPermission("publish", isGlobal, isPrivateData),
+		createPages: getPermission("create", isGlobal, isPrivateData),
+		deletePages: getPermission("delete", isGlobal, isPrivateData),
+	});
 
 	const { locale } = lang;
 	const { dataLanguages, publicationScheduled } = structuredData;
@@ -130,7 +129,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 	const isDisabled =
 		currentStructuredData?.dataPacks[0] && !activatedDataPacksIds.includes(currentStructuredData.dataPacks[0]);
 
-	const availableLanguages = isDisabled || !isAllowedToCreatePages ? currentLanguages : languages;
+	const availableLanguages = isDisabled || !isAllowedTo.createPages ? currentLanguages : languages;
 
 	const handleLanguage = (language: ILanguage) => {
 		const {
@@ -145,7 +144,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 			id,
 		};
 
-		const isNew = currentLanguages.find((l) => l.id === language.id) ? false : true;
+		const isNew = !currentLanguages.find((l) => l.id === language.id);
 
 		if (isNew) {
 			updateForm({
@@ -189,7 +188,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
 	const menuOptions = [];
 
-	if (!isDisabled && isEditable && isAllowedToDuplicatePages) {
+	if (!isDisabled && isEditable && isAllowedTo.duplicatePages) {
 		menuOptions.push({
 			label: "duplicate",
 			icon: "duplicate",
@@ -197,7 +196,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		});
 	}
 
-	if (isEditable && isAllowedToDeletePage) {
+	if (isEditable && isAllowedTo.deletePages) {
 		menuOptions.push({
 			label: "delete",
 			icon: "delete",
@@ -205,7 +204,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		});
 	}
 
-	if (isAllowedToPublishPages) {
+	if (isAllowedTo.publishPages) {
 		menuOptions.push({
 			label: structuredData.draft ? "Publish" : "Unpublish",
 			icon: structuredData.draft ? "upload-pending" : "offline",
@@ -213,36 +212,14 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		});
 	}
 
-	const CategoryColumns = categoryColumns.map((col) => {
-		if (!activeColumns.includes(col.key)) {
-			return <React.Fragment key={col.key} />;
-		}
-
-		const type: any = structuredData?.content?.[col.key];
-
-		if (typeof type !== "object") {
-			return (
-				<S.ColumnCell key={col.key} onClick={_handleClick}>
-					{type}
-				</S.ColumnCell>
-			);
-		}
-
-		const categories: string[] = !type
-			? []
-			: Array.isArray(type)
-				? type.map((cat: any) => cat.label || cat.title)
-				: [type.label || type.title];
-
-		return (
-			<CategoryCell
-				key={col.key}
-				categories={categories}
-				categoryColors={categoryColors}
-				addCategoryColors={addCategoryColors}
-			/>
-		);
-	});
+	const CategoryColumns = buildCategoryColumns(
+		categoryColumns,
+		activeColumns,
+		structuredData?.content,
+		categoryColors,
+		addCategoryColors,
+		_handleClick,
+	);
 
 	return (
 		<S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable}>
@@ -254,10 +231,10 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 					onChange={handleOnChange}
 				/>
 			</S.CheckCell>
-			<S.NameCell role="cell" onClick={_handleClick} ref={nameCellRef}>
-				<Tooltip content={structuredData.content.title} left={0} top={1} expanded>
-					<S.Title width={title.width}>{title.text}</S.Title>
-				</Tooltip>
+			<S.NameCell role="cell" onClick={_handleClick}>
+				<TruncatedTooltip content={structuredData.content.title} expanded top={1}>
+					<S.Title>{structuredData.content.title}</S.Title>
+				</TruncatedTooltip>
 			</S.NameCell>
 			{activeColumns.includes("live") && (
 				<S.LiveCell role="cell" onClick={_handleClick}>

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

@@ -1,7 +1,7 @@
-import styled from "styled-components";
-
-import { Cell, Row } from "@ax/components/TableList/TableItem/style";
 import { ActionMenu } from "@ax/components";
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+
+import styled from "styled-components";
 
 const CheckCell = styled(Cell)`
   padding-right: 0;
@@ -14,15 +14,20 @@ const CheckCell = styled(Cell)`
 
 const NameCell = styled(Cell)`
   flex-grow: 1;
+  min-width: 0;
+  position: relative;
+  > * {
+    min-width: 0;
+  }
 `;
 
-const Title = styled.div<{ width: number }>`
+const Title = styled.div`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.color.textHighEmphasis};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  width: ${(p) => `${p.width}px`};
+  width: 100%;
 `;
 
 const ActionsCell = styled(Cell)`
@@ -30,7 +35,7 @@ const ActionsCell = styled(Cell)`
   padding-left: 0;
 `;
 
-export const ActionsWrapper = styled.div`
+const ActionsWrapper = styled.div`
   opacity: 0;
   transition: opacity 0.1s;
   text-align: right;
@@ -93,7 +98,7 @@ const FlagsWrapper = styled.div`
 `;
 
 const ColumnCell = styled(Cell)`
-  flex: 0 0 150px;
+  flex: 0 0 215px;
   position: relative;
   align-items: center;
 `;
@@ -102,6 +107,7 @@ export {
 	CheckCell,
 	NameCell,
 	ActionsCell,
+	ActionsWrapper,
 	StyledActionMenu,
 	TransCell,
 	LiveCell,

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

@@ -16,27 +16,27 @@ const CheckHeader = styled(Header)`
   width: 32px;
 `;
 
-const NameWrapper = styled.div`
+const NameWrapper = styled(Header)`
   width: 400px;
   position: relative;
 `;
 
-const PermissionsWrapper = styled.div`
+const PermissionsWrapper = styled(Header)`
   flex-grow: 1;
   display: flex;
   justify-content: center;
   position: relative;
 `;
 
-const ActionsHeader = styled(Header as any)<{ isSiteView: boolean }>`
+const ActionsHeader = styled(Header)<{ isSiteView: boolean }>`
   display: flex;
-  width: ${(p) => (p.isSiteView ? "210px" : "auto")};
+  width: 104px;
   justify-content: end;
   padding-right: 0;
 `;
 
-const UsersWrapper = styled.div`
-  width: 20%;
+const UsersWrapper = styled(Header)`
+  width: 300px;
   display: flex;
   justify-content: center;
   position: relative;

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

@@ -1,9 +1,8 @@
-import React, { useState } from "react";
-
+import { 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 { Avatar, CheckField, Tag, ToggleField, Tooltip } from "@ax/components";
+import type { ICheck, IRole, IRootState, IUser } from "@ax/types";
 
 import * as S from "./style";
 

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

@@ -35,47 +35,44 @@ const Description = styled.div`
 
 const AvatarCell = styled(Cell)`
   position: relative;
-  align-items: center;
   justify-content: center;
-  width: 10%;
+  width: 300px;
+  flex-flow: row wrap;
 `;
 
 const UsersLength = styled.span`
   ${(p) => p.theme.textStyle.uiS};
-  position: absolute;
-  left: 110px;
+  margin-left: ${(p) => p.theme.spacing.xxs};
 `;
 
 const AvatarsWrapper = styled.div`
   display: flex;
   align-items: center;
-  position: relative;
 
   div {
-    position: absolute;
+    position: relative;
     &:nth-child(1) {
-      position: absolute;
       z-index: 5;
     }
     &:nth-child(2) {
-      position: absolute;
       z-index: 4;
-      left: 20px;
+      margin-left: -5px;
+      flex-shrink: 0;
     }
     &:nth-child(3) {
-      position: absolute;
       z-index: 3;
-      left: 40px;
+      margin-left: -5px;
+      flex-shrink: 0;
     }
     &:nth-child(4) {
-      position: absolute;
       z-index: 2;
-      left: 60px;
+      margin-left: -5px;
+      flex-shrink: 0;
     }
     &:nth-child(5) {
-      position: absolute;
       z-index: 1;
-      left: 80px;
+      margin-left: -5px;
+      flex-shrink: 0;
     }
   }
 `;

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

@@ -192,8 +192,7 @@ const Roles = (props: IRolesProps): JSX.Element => {
 								<EmptyState message="No roles found" />
 							</S.EmptyWrapper>
 						) : (
-							pageRoles &&
-							pageRoles.map((role: IRole) => {
+							pageRoles?.map((role: IRole) => {
 								const isItemSelected = isSelected(role.id);
 								const handleActivateRole = async (value: boolean) => handleActivateRoles([role.id], value);
 

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

@@ -1,7 +1,7 @@
-import { CheckField, Button, ElementsTooltip } from "@ax/components";
+import { Button, CheckField, ElementsTooltip, TruncatedTooltip } from "@ax/components";
 import { useModal } from "@ax/hooks";
-
 import type { IRole } from "@ax/types";
+
 import RolesModal from "./RolesModal";
 
 import * as S from "./style";
@@ -52,7 +52,11 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
 				) : null}
 				{featured ? (
 					<S.WrapperCell role="cell" data-testid="wrapper-cell-featured">
-						<S.Name onClick={handleClick}>{name}</S.Name>
+						<S.Name onClick={handleClick}>
+							<TruncatedTooltip content={name} expanded top={-5}>
+								<S.Title>{name}</S.Title>
+							</TruncatedTooltip>
+						</S.Name>
 						<S.Description onClick={handleClick}>{description}</S.Description>
 						<S.Actions hasTags={rolesString ? rolesString.length > 0 : false}>
 							<ElementsTooltip
@@ -73,7 +77,9 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
 				) : (
 					<>
 						<S.NameCell role="cell" disabled={disabled} onClick={handleClick} data-testid="name-cell">
-							{name}
+							<TruncatedTooltip content={name} expanded top={-5}>
+								<S.NameTitle disabled={disabled}>{name}</S.NameTitle>
+							</TruncatedTooltip>
 						</S.NameCell>
 						<S.RolesCell role="cell" onClick={handleClick}>
 							<ElementsTooltip

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

@@ -15,6 +15,22 @@ const NameCell = styled(Cell)<{ disabled?: boolean }>`
   color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis)};
   flex-grow: 1;
   padding: ${(p) => `12px ${p.theme.spacing.s}`};
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const NameTitle = styled.div<{ disabled?: boolean }>`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const RolesCell = styled(Cell)`
@@ -54,6 +70,22 @@ const Name = styled.div`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.color.textHighEmphasis};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Title = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const Description = styled.div`
@@ -70,4 +102,4 @@ const Actions = styled.div<{ hasTags: boolean }>`
   }
 `;
 
-export { CheckCell, NameCell, RolesCell, ActionCell, SiteItem, WrapperCell, Name, Description, Actions };
+export { CheckCell, NameCell, NameTitle, RolesCell, ActionCell, SiteItem, WrapperCell, Name, Title, Description, Actions };

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

@@ -166,8 +166,8 @@ const UserForm = (props: IProps) => {
 	);
 
 	const getSiteName = (id: number | string) => {
-		const currentSite = sites.find((site) => site.id === id) || { name: "" };
-		return currentSite.name;
+		const currentSite = sites.find((site) => site.id === id);
+		return currentSite?.name;
 	};
 
 	const sitesID = form.roles.map((roleSite: ISiteRoles) => roleSite.siteId);
@@ -400,13 +400,15 @@ const UserForm = (props: IProps) => {
 										{!rolesAll &&
 											form.roles.map((siteRole: ISiteRoles, index: number) => {
 												if (siteRole.siteId !== "all" && siteRole.siteId !== "global") {
+													const siteName = getSiteName(siteRole.siteId);
+													if (!siteName) return <></>;
 													return (
 														<SiteItem
 															readOnly={readOnlySites}
 															disabled={!!rolesAll}
 															sites={sitesID}
-															key={`${index}${getSiteName(siteRole.siteId)}`}
-															item={{ name: getSiteName(siteRole.siteId), id: siteRole.siteId, onChange: selectSite }}
+															key={`${index}${siteName}`}
+															item={{ name: siteName, id: siteRole.siteId, onChange: selectSite }}
 															selected={siteRole.roles}
 															roles={roles}
 															addRoles={handleAddRoles}

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

@@ -1,7 +1,5 @@
-import React from "react";
-
-import { CheckField, TableCounter, SiteFilter, NameFilter, RoleFilter, Tooltip } from "@ax/components";
-import { IQueryValue, IRole } from "@ax/types";
+import { CheckField, NameFilter, RoleFilter, SiteFilter, TableCounter, Tooltip } from "@ax/components";
+import type { IQueryValue, IRole } from "@ax/types";
 
 import * as S from "./style";
 

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

@@ -26,7 +26,7 @@ const ActionsHeader = styled(Header)`
   padding-right: 0;
 `;
 
-const SiteWrapper = styled.div`
+const SiteWrapper = styled(Header)`
   width: 210px;
   position: relative;
   padding-left: ${(p) => p.theme.spacing.s};

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

@@ -1,10 +1,9 @@
-import { useRef } from "react";
 import { connect } from "react-redux";
 
-import { Avatar, CheckField, ElementsTooltip, Modal, Tag, Toast, Tooltip } from "@ax/components";
+import { Avatar, CheckField, ElementsTooltip, Modal, Tag, Toast, Tooltip, TruncatedTooltip } from "@ax/components";
 import { usersActions } from "@ax/containers/Users";
 import { getDaysAgo } from "@ax/helpers";
-import { useAdaptiveText, useModal, usePermission, useToast } from "@ax/hooks";
+import { useModal, usePermission, useToast } from "@ax/hooks";
 import type { ICheck, IRole, ISite, ISiteRoles, IUser } from "@ax/types";
 
 import * as S from "./style";
@@ -30,9 +29,6 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 	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);
@@ -163,10 +159,22 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 					<S.AvatarWrapper>
 						<Avatar image={user.image?.thumb} name={user.name} />
 					</S.AvatarWrapper>
-					<S.UserInfo ref={userCellRef}>
-						<S.UserName>{user.name}</S.UserName>
-						<S.UserEmail width={email.width}>{email.text}</S.UserEmail>
-						<S.UserUsername>@{user.username}</S.UserUsername>
+					<S.UserInfo>
+						<S.UserName>
+							<TruncatedTooltip content={user.name} expanded top={-5}>
+								<S.Name>{user.name}</S.Name>
+							</TruncatedTooltip>
+						</S.UserName>
+						<S.UserEmail>
+							<TruncatedTooltip content={user.email} expanded top={-5}>
+								<S.Email>{user.email}</S.Email>
+							</TruncatedTooltip>
+						</S.UserEmail>
+						<S.UserUsername>
+							<TruncatedTooltip content={`@${user.username}`} expanded top={-5}>
+								<S.Username>@{user.username}</S.Username>
+							</TruncatedTooltip>
+						</S.UserUsername>
 					</S.UserInfo>
 				</S.UserCell>
 				<S.RolesCell role="cell" onClick={handleClick} isSite={isSiteView} clickable={!actionIsDisabled}>

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

@@ -19,35 +19,88 @@ const UserCell = styled(Cell)<{ clickable: boolean }>`
   justify-content: flex-start;
   pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   flex-wrap: nowrap;
+  min-width: 0;
+  > * {
+    min-width: 0;
+  }
 `;
 
 const AvatarWrapper = styled.div`
   margin-right: ${(p) => p.theme.spacing.s};
+  flex-shrink: 0;
 `;
 
 const UserInfo = styled.div`
   display: flex;
   flex-flow: column nowrap;
-  width: 100%;
+  flex-grow: 1;
+  min-width: 0;
 `;
 
 const UserName = styled.div`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.colors.textHighEmphasis};
+  width: 100%;
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Name = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
+`;
+
+const UserEmail = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  width: 100%;
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
 `;
 
-const UserEmail = styled.div<{ width: number }>`
+const Email = styled.div`
+  width: 100%;
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.colors.textMediumEmphasis};
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-  width: ${(p) => `${p.width}px`};
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const UserUsername = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.colors.textMediumEmphasis};
+  width: 100%;
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Username = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const StatusCell = styled(Cell)`
@@ -103,8 +156,11 @@ export {
 	AvatarWrapper,
 	UserInfo,
 	UserName,
+	Name,
 	UserEmail,
+	Email,
 	UserUsername,
+	Username,
 	ActionsCell,
 	ActionsWrapper,
 	StyledActionMenu,