@griddo/ax 11.14.2 → 11.14.3-rc.0

package/src/modules/Content/PageItem/index.tsx

@@ -1,24 +1,18 @@
-import React, { useRef, useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
-import {
-	CategoryCell,
-	CheckField,
-	ErrorToast,
-	FieldsBehavior,
-	Flag,
-	FloatingMenu,
-	Icon,
-	LanguageMenu,
-	Modal,
-	Tag,
-	Tooltip,
-} from "@ax/components";
+import { CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tag, Tooltip, TruncatedTooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { type ISetCurrentPageIDAction, pageStatus } from "@ax/containers/PageEditor/interfaces";
-import { getHumanLastModifiedDate, getScheduleFormatDate, getTemplateDisplayName, slugify } from "@ax/helpers";
-import { useAdaptiveText, useModal, usePermission } from "@ax/hooks";
+import {
+	buildCategoryColumns,
+	getHumanLastModifiedDate,
+	getScheduleFormatDate,
+	getTemplateDisplayName,
+	slugify,
+} from "@ax/helpers";
+import { useModals, usePermissions } from "@ax/hooks";
 import type {
 	ICheck,
 	IColumn,
@@ -33,9 +27,8 @@ import type {
 } from "@ax/types";
 
 import { config } from "components";
-import { useTheme } from "styled-components";
 
-import { CopyModal, DeleteModal } from "../atoms";
+import { CopyModal, DeleteModal, DuplicatePageModal, RemovePageModal, UnpublishPageModal } from "../atoms";
 
 import * as S from "./style";
 
@@ -91,6 +84,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		liveStatus,
 		publicationScheduled,
 		haveDraftPage,
+		title,
 	} = page;
 
 	const displayName = getTemplateDisplayName(templateId);
@@ -99,25 +93,17 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	const [site, setSite] = useState(null);
 	const [modalState, setModalState] = useState(initValue);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
-	const { isOpen, toggleModal } = useModal();
-	const { isOpen: isRemoveOpen, toggleModal: toggleRemoveModal } = useModal();
-	const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isCopyOpen, toggleModal: toggleCopyModal } = useModal();
-
-	const nameCellRef = useRef<HTMLDivElement>(null);
-	const theme: any = useTheme();
-	const nameCellPadding = Number(theme.spacing.s.slice(0, -2));
-	const title = useAdaptiveText(nameCellRef, page.title, nameCellPadding);
-	const path = useAdaptiveText(nameCellRef, fullPath.page, nameCellPadding);
-
-	const isAllowedToDuplicatePages = usePermission("content.duplicatePages");
-	const isAllowedToPublishPages = usePermission("content.publishUnpublishPages");
-	const isAllowedToCreatePages = usePermission("content.createPages");
-	const isAllowedToCopyPage = usePermission("content.copyPageInOtherSite");
-	const isAllowedToDeletePage = usePermission("content.deletePages");
-	const isAllowedToDeletePublishedPage = usePermission("content.deletePublishedPages");
-	const isAllowedToEditContentPage = usePermission("content.editContentPages");
+	const { toggleModal, isOpen } = useModals(["duplicate", "remove", "unpublish", "delete", "copy"]);
+
+	const isAllowedTo = usePermissions({
+		duplicatePages: "content.duplicatePages",
+		publishUnpublishPages: "content.publishUnpublishPages",
+		createPages: "content.createPages",
+		copyPageInOtherSite: "content.copyPageInOtherSite",
+		deletePages: "content.deletePages",
+		deletePublishedPages: "content.deletePublishedPages",
+		editContentPages: "content.editContentPages",
+	});
 
 	const currentTemplateDataPacks = schemas.templates[templateId].dataPacks;
 
@@ -127,7 +113,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
 	const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
 	const isPublished = liveStatus?.status === pageStatus.PUBLISHED || liveStatus?.status === pageStatus.UPLOAD_PENDING;
-	const isAllowedToDelete = (isPublished && isAllowedToDeletePublishedPage) || (!isPublished && isAllowedToDeletePage);
+	const isAllowedToDelete =
+		(isPublished && isAllowedTo.deletePublishedPages) || (!isPublished && isAllowedTo.deletePages);
 	const isScheduledPub = !!publicationScheduled && (liveStatus?.status === pageStatus.SCHEDULED || haveDraftPage);
 
 	const publishedTooltip: Record<string, string> = {
@@ -214,7 +201,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 	const handleDeleteItem = async () => {
 		const allPageVersions = pageLanguages.map((lang: IPageLanguage) => lang.pageId);
 		deleteAllVersions ? deleteBulk(allPageVersions) : deletePage();
-		toggleDeleteModal();
+		toggleModal("delete");
 	};
 
 	const handleRemoveItemFromSite = async () => {
@@ -223,7 +210,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 				setRemovedPage(page.originalGlobalPage);
 				toggleToast();
 			}
-			toggleRemoveModal();
+			toggleModal("remove");
 		});
 	};
 
@@ -282,36 +269,28 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		if (isDuplicable) {
 			const isDuplicated = await duplicatePage(page.id, modalState);
 			if (isDuplicated) {
-				toggleModal();
+				toggleModal("duplicate");
 				setRoute("pages/editor");
 			}
 		} else {
-			toggleModal();
+			toggleModal("duplicate");
 			setModalState({ title: "", slug: "" });
 			setTemplateInstanceError({ error: true, templateName: displayName });
 		}
 	};
 
 	const handleCloseDuplicate = () => {
-		toggleModal();
+		toggleModal("duplicate");
 		setModalState({ title: "", slug: "" });
 	};
 
-	const mainModalAction = {
-		title: "Duplicate",
-		onClick: handleDuplicatePage,
-		disabled: !modalState.title.trim() || !modalState.slug.trim() || isSaving,
-	};
-
-	const secondaryModalAction = { title: "Cancel", onClick: handleCloseDuplicate };
-
 	const currentLanguages = getCurrentPageLanguages();
 
 	const isTemplateActivated = activatedTemplates.some((temp: any) => temp.id === templateId);
 
 	let availableLanguages = siteLanguages;
 
-	if (!isTemplateActivated || isGlobal || !isAllowedToCreatePages) {
+	if (!isTemplateActivated || isGlobal || !isAllowedTo.createPages) {
 		const pageLanguagesIDs = pageLanguages.map((language: IPageLanguage) => language.languageId);
 		availableLanguages = siteLanguages?.filter((language) => pageLanguagesIDs.includes(language.id));
 	}
@@ -356,25 +335,25 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		menuOptions.push({
 			label: isGlobal ? "Remove" : "delete",
 			icon: "delete",
-			action: isGlobal ? toggleRemoveModal : toggleDeleteModal,
+			action: () => toggleModal(isGlobal ? "remove" : "delete"),
 			disabled: deleteDisabled,
 			helpText: deleteHelpText,
 		});
 	}
 
-	if (isCopyable && isAllowedToCopyPage) {
+	if (isCopyable && isAllowedTo.copyPageInOtherSite) {
 		menuOptions.unshift({
 			label: "Copy page in another site",
 			icon: "copy",
-			action: toggleCopyModal,
+			action: () => toggleModal("copy"),
 		});
 	}
 
-	if (!isGlobal && isAllowedToDuplicatePages) {
+	if (!isGlobal && isAllowedTo.duplicatePages) {
 		menuOptions.unshift({
 			label: "duplicate",
 			icon: "duplicate",
-			action: toggleModal,
+			action: () => toggleModal("duplicate"),
 		});
 	}
 
@@ -395,7 +374,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 				return {
 					label: "unpublish",
 					icon: "offline",
-					action: page.haveDraftPage ? toggleUnpublishModal : unpublishPage,
+					action: page.haveDraftPage ? () => toggleModal("unpublish") : unpublishPage,
 					disabled,
 					helpText,
 				};
@@ -403,7 +382,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 				return {
 					label: "unpublish",
 					icon: "offline",
-					action: page.haveDraftPage ? toggleUnpublishModal : cancelPublishPage,
+					action: page.haveDraftPage ? () => toggleModal("unpublish") : cancelPublishPage,
 					disabled,
 					helpText,
 				};
@@ -422,7 +401,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
 	const publishAction = getPublishItem(page.liveStatus?.status, canBeUnpublished);
 
-	menuOptions = publishAction && isAllowedToPublishPages ? [publishAction, ...menuOptions] : menuOptions;
+	menuOptions = publishAction && isAllowedTo.publishUnpublishPages ? [publishAction, ...menuOptions] : menuOptions;
 
 	const editOptions = [
 		{
@@ -433,7 +412,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		},
 	];
 
-	if (isAllowedToEditContentPage) {
+	if (isAllowedTo.editContentPages) {
 		editOptions.unshift({
 			label: "Edit draft",
 			icon: "modified",
@@ -452,13 +431,6 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 		</Tooltip>
 	);
 
-	const mainRemoveModalAction = {
-		title: "Remove",
-		onClick: handleRemoveItemFromSite,
-	};
-
-	const secondaryRemoveModalAction = { title: "Cancel", onClick: toggleRemoveModal };
-
 	const copyToOtherSite = () => {
 		if (site) {
 			const siteID = parseInt(site);
@@ -467,59 +439,21 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 				if (successEvent === true) {
 					toggleCopiedToast();
 				}
-				toggleCopyModal();
+				toggleModal("copy");
 			});
 		}
 	};
 
-	const secondaryCopyModalAction = {
-		title: "Cancel",
-		onClick: toggleCopyModal,
-	};
-
-	const mainCopyModalAction = { title: "Copy page", onClick: copyToOtherSite, disabled: !site };
-
 	const getLiveStatus = () => (isScheduledPub ? "scheduled" : haveDraftPage ? "modified" : liveStatus?.status);
 
-	const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
-
-	const mainDeleteModalAction = {
-		title: "Delete page",
-		onClick: handleDeleteItem,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const CategoryColumns = categoryColumns.map((col) => {
-		if (!activeColumns.includes(col.key)) {
-			return <React.Fragment key={col.key} />;
-		}
-
-		const type: any = structuredDataContent?.[col.key];
-
-		if (typeof type !== "object") {
-			return (
-				<S.ColumnCell key={col.key} onClick={goToPage}>
-					{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,
+		structuredDataContent,
+		categoryColors,
+		addCategoryColors,
+		goToPage,
+	);
 
 	return (
 		<>
@@ -527,30 +461,22 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 				<S.CheckCell role="cell">
 					<CheckField name="check" value={page.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
 				</S.CheckCell>
-				<S.NameCell role="cell" onClick={goToPage} ref={nameCellRef}>
+				<S.NameCell role="cell" onClick={goToPage}>
 					{isHome && (
 						<S.Home>
 							<Icon name="home" />
 							Home
 						</S.Home>
 					)}
-					<Tooltip
-						content={[
-							<React.Fragment key="page-title">
-								<strong>{page.title}</strong>
-								<br />
-							</React.Fragment>,
-							<React.Fragment key="page-slug">{fullPath.page}</React.Fragment>,
-						]}
-						left={0}
-						top={1}
-						expanded
-					>
-						<S.Title width={title.width}>{title.text}</S.Title>
-						{!isHome && <S.Slug width={path.width}>{path.text}</S.Slug>}
-					</Tooltip>
+					<TruncatedTooltip content={title} expanded top={-5}>
+						<S.Title>{title}</S.Title>
+					</TruncatedTooltip>
+					{!isHome && (
+						<TruncatedTooltip content={fullPath.page} expanded top={5}>
+							<S.Slug>{fullPath.page}</S.Slug>
+						</TruncatedTooltip>
+					)}
 				</S.NameCell>
-
 				{activeColumns.includes("type") && (
 					<S.TypeCell role="cell" onClick={goToPage}>
 						{displayName}
@@ -588,86 +514,36 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 				</S.ActionsCell>
 			</S.PageRow>
 			<CopyModal
-				isOpen={isCopyOpen}
+				isOpen={isOpen("copy")}
 				toggleModal={() => {
 					setSite(null);
-					toggleCopyModal();
+					toggleModal("copy");
 				}}
-				mainModalAction={mainCopyModalAction}
-				secondaryModalAction={secondaryCopyModalAction}
+				onCopy={copyToOtherSite}
 				sites={sites}
 				site={site}
 				setSite={setSite}
 			/>
-			<Modal
-				isOpen={isOpen}
-				hide={handleCloseDuplicate}
-				title="Duplicate page"
-				secondaryAction={secondaryModalAction}
-				mainAction={mainModalAction}
-				size="M"
-			>
-				<ErrorToast />
-				{isOpen ? (
-					<S.ModalContent>
-						<FieldsBehavior
-							fieldType="TextField"
-							name="title"
-							title="Title"
-							mandatory={true}
-							value={modalState.title}
-							onChange={handleNameChange}
-						/>
-						<FieldsBehavior
-							fieldType="TextField"
-							name="slug"
-							title="Slug"
-							mandatory={true}
-							value={modalState.slug}
-							onChange={handleSlugChange}
-						/>
-					</S.ModalContent>
-				) : null}
-			</Modal>
-			<Modal
-				isOpen={isRemoveOpen}
-				hide={toggleRemoveModal}
-				title="Remove page from this site?"
-				secondaryAction={secondaryRemoveModalAction}
-				mainAction={mainRemoveModalAction}
-				size="S"
-			>
-				{isRemoveOpen ? (
-					<S.ModalContent>
-						<p>
-							Are you sure you want to remove <strong>‘{page.title}’</strong> from this site?
-							<br />
-							This action <strong>cannot be undone</strong>.
-						</p>
-					</S.ModalContent>
-				) : null}
-			</Modal>
-			<Modal
-				isOpen={isUnpublishOpen}
-				hide={toggleUnpublishModal}
-				size="S"
-				title="Unpublish Modified Page"
-				mainAction={mainUnpublishAction}
-			>
-				{isUnpublishOpen && (
-					<S.ModalContent>
-						<p>
-							There are some saved changes that are not published on this page. To Unpublish this page,{" "}
-							<strong>you must publish these changes or discard them.</strong>
-						</p>
-					</S.ModalContent>
-				)}
-			</Modal>
+			<DuplicatePageModal
+				isOpen={isOpen("duplicate")}
+				toggleModal={handleCloseDuplicate}
+				modalState={modalState}
+				onNameChange={handleNameChange}
+				onSlugChange={handleSlugChange}
+				onDuplicate={handleDuplicatePage}
+				isSaving={isSaving}
+			/>
+			<RemovePageModal
+				isOpen={isOpen("remove")}
+				toggleModal={() => toggleModal("remove")}
+				pageTitle={page.title}
+				onRemove={handleRemoveItemFromSite}
+			/>
+			<UnpublishPageModal isOpen={isOpen("unpublish")} toggleModal={() => toggleModal("unpublish")} />
 			<DeleteModal
-				isOpen={isDeleteOpen}
-				toggleModal={toggleDeleteModal}
-				mainModalAction={mainDeleteModalAction}
-				secondaryModalAction={secondaryDeleteModalAction}
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				onDelete={handleDeleteItem}
 				{...{ isTranslated, deleteAllVersions, setDeleteAllVersions, title: page.title }}
 			/>
 		</>

package/src/modules/Content/PageItem/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;
@@ -16,6 +16,12 @@ const CheckCell = styled(Cell)`
 
 const NameCell = styled(Cell)`
   flex-grow: 1;
+  min-width: 0;
+  position: relative;
+  flex-flow: column;
+  > * {
+    min-width: 0;
+  }
   svg {
     height: ${(p) => p.theme.spacing.s};
     path {
@@ -24,20 +30,20 @@ const NameCell = styled(Cell)`
   }
 `;
 
-const Title = styled.div<{ width: number }>`
+const Title = styled.div`
+  width: 100%;
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.color.textHighEmphasis};
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-  width: ${(p) => `${p.width}px`};
+  white-space: nowrap;
 `;
 
-const Slug = styled.div<{ width: number }>`
+const Slug = styled.div`
+  width: 100%;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-  width: ${(p) => `${p.width}px`};
+  white-space: nowrap;
 `;
 
 const TypeCell = styled(Cell)`
@@ -124,6 +130,8 @@ const StyledActionMenu = styled(ActionMenu)`
 
 const PageRow = styled(Row)<{ global?: boolean }>`
   position: relative;
+  width: 100%;
+  box-sizing: border-box;
   &:hover {
     ${TypeCell}, ${SeoCell} {
       color: ${(p) => p.theme.color.textHighEmphasis};
@@ -195,7 +203,7 @@ const ModalContent = styled.div`
 `;
 
 const ColumnCell = styled(Cell)`
-  flex: 0 0 150px;
+  flex: 0 0 215px;
   position: relative;
   align-items: center;
 `;