@griddo/ax 11.14.2 → 11.14.3-rc.0

package/src/modules/Forms/atoms.tsx

@@ -1,21 +1,12 @@
 import type { Dispatch, SetStateAction } from "react";
 
+import { AsyncSelect, FieldsBehavior, Modal } from "@ax/components";
 import type { IModal } from "@ax/types";
-import { Modal, FieldsBehavior, AsyncSelect } from "@ax/components";
 
 import * as S from "./style";
 
 const DeleteModal = (props: IDeleteModal): JSX.Element => {
-	const {
-		isOpen,
-		toggleModal,
-		mainModalAction,
-		secondaryModalAction,
-		isTranslated,
-		deleteAllVersions,
-		setDeleteAllVersions,
-		title,
-	} = props;
+	const { isOpen, toggleModal, onDelete, isTranslated, deleteAllVersions, setDeleteAllVersions, title } = props;
 
 	const options = [
 		{
@@ -32,15 +23,18 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 
 	const formTitle = title ? <strong>{title}</strong> : "this form";
 
+	const mainAction = { title: "Delete form", onClick: onDelete };
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			title="Delete Form"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
 			size="S"
-			height={isTranslated ? 285 : 240}
+			height="auto"
 		>
 			{isTranslated ? (
 				<>
@@ -72,19 +66,22 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 };
 
 const UnPublishModal = (props: IUnpublishModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, title } = props;
+	const { isOpen, toggleModal, onUnpublish, title } = props;
 
 	const formTitle = title ? <strong>{title}</strong> : "this form";
 
+	const mainAction = { title: "Unpublish form", onClick: onUnpublish };
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			title="Unpublish Form"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
 			size="S"
-			height={240}
+			height="auto"
 		>
 			<S.ModalContent>
 				Are you sure you want to unpublish {formTitle}?
@@ -98,17 +95,20 @@ const UnPublishModal = (props: IUnpublishModal): JSX.Element => {
 };
 
 const DuplicateModal = (props: IDuplicateModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, title, handleChange } = props;
+	const { isOpen, toggleModal, onDuplicate, title, handleChange } = props;
+
+	const mainAction = { title: "Duplicate form", onClick: onDuplicate, disabled: !title.length };
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			title="Duplicate form"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
 			size="S"
-			height={284}
+			height="auto"
 		>
 			<S.ModalContent>
 				<p>Please enter a new name for the duplicated form.</p>
@@ -127,22 +127,25 @@ const DuplicateModal = (props: IDuplicateModal): JSX.Element => {
 };
 
 const CopyModal = (props: ICopyModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, setSite, site, lang, currentSite } = props;
+	const { isOpen, toggleModal, onCopy, setSite, site, lang, currentSite } = props;
 
 	const handleSelectChange = (value: string | number | null) => {
 		if (typeof value === "number") setSite(value);
 	};
 
+	const mainAction = { title: "Copy form", onClick: onCopy, disabled: !site };
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			size="S"
 			title="Copy form in another site"
-			mainAction={mainModalAction}
-			secondaryAction={secondaryModalAction}
+			mainAction={mainAction}
+			secondaryAction={secondaryAction}
 			overflow="visible"
-			height={278}
+			height="auto"
 		>
 			<S.ModalContent>
 				<p>
@@ -166,20 +169,21 @@ const CopyModal = (props: ICopyModal): JSX.Element => {
 	);
 };
 
-const UpdateModal = (props: IModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction } = props;
+const UpdateModal = (props: IUpdateModal): JSX.Element => {
+	const { isOpen, toggleModal, onUpdate } = props;
 
-	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+	const mainAction = { title: "Update changes", onClick: onUpdate };
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			title="Confirm Changes to Form"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
 			size="S"
-			height={240}
+			height="auto"
 		>
 			<S.ModalContent>
 				Saving changes <strong>will update this form on all pages where it’s in use.</strong>
@@ -192,6 +196,7 @@ const UpdateModal = (props: IModal): JSX.Element => {
 };
 
 interface IDeleteModal extends IModal {
+	onDelete(): void;
 	isTranslated: boolean;
 	deleteAllVersions: boolean;
 	setDeleteAllVersions: Dispatch<SetStateAction<boolean>>;
@@ -199,19 +204,26 @@ interface IDeleteModal extends IModal {
 }
 
 interface IUnpublishModal extends IModal {
+	onUnpublish(): void;
 	title?: string;
 }
 
 interface IDuplicateModal extends IModal {
+	onDuplicate(): void;
 	title: string;
 	handleChange(title: string): void;
 }
 
 interface ICopyModal extends IModal {
+	onCopy(): void;
 	setSite: Dispatch<SetStateAction<number | null>>;
 	site: number | null;
 	lang: number;
 	currentSite: number | null;
 }
 
+interface IUpdateModal extends IModal {
+	onUpdate(): void;
+}
+
 export { DeleteModal, UnPublishModal, DuplicateModal, CopyModal, UpdateModal };

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

@@ -1,19 +1,19 @@
 import React from "react";
 
 import {
+	CategoryFilter,
 	CheckField,
-	TableCounter,
 	CustomizeFilters,
-	CategoryFilter,
+	LiveFilter,
 	NameFilter,
-	StatusFilter,
 	SiteFilter,
-	LiveFilter,
-	TranslationsFilter,
+	StatusFilter,
+	TableCounter,
 	Tooltip,
+	TranslationsFilter,
 } from "@ax/components";
-import { IColumn, IQueryValue, ISchemaField } from "@ax/types";
 import { getGlobalPageTypes } from "@ax/helpers";
+import type { IColumn, IQueryValue, ISchemaField } from "@ax/types";
 
 import * as S from "./style";
 
@@ -86,9 +86,9 @@ const TableHeader = (props: IProps): JSX.Element => {
 					</S.NameWrapper>
 					{isAllPages && activeColumns.includes("type") && <S.TypeHeader>Type</S.TypeHeader>}
 					{activeColumns.includes("site") && (
-						<S.HeaderWrapper>
+						<S.SiteHeader>
 							<SiteFilter filterItems={filterItems} value={filterValues} pointer="filterSites" />
-						</S.HeaderWrapper>
+						</S.SiteHeader>
 					)}
 					{activeColumns.includes("live") && (
 						<S.HeaderWrapper>

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/style.tsx

@@ -22,7 +22,7 @@ const NameHeader = styled(Header)`
 
 const SiteHeader = styled(Header)`
   width: 175px;
-  justify-content: flex-start;
+  justify-content: center;
 `;
 
 const LiveHeader = styled(Header)`
@@ -67,7 +67,7 @@ const HeaderWrapper = styled.div`
 `;
 
 const ColumnHeader = styled(Header)`
-  flex: 0 0 150px;
+  flex: 0 0 215px;
   justify-content: center;
 `;
 

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

@@ -1,33 +1,39 @@
-import React, { useRef, useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
-import { useTheme } from "styled-components";
 
-import type {
-	ICheck,
-	IAvailableSites,
-	ISavePageParams,
-	ILanguage,
-	IPageLanguage,
-	IPage,
-	IColumn,
-	ISchemaField,
-	IRootState,
-} from "@ax/types";
-import { getHumanLastModifiedDate, getScheduleFormatDate, getStructuredDataTitle, trimText } from "@ax/helpers";
-import { appActions } from "@ax/containers/App";
-import { pageStatus, type ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import {
 	CheckField,
+	ElementsTooltip,
+	Flag,
 	FloatingMenu,
 	Icon,
-	Flag,
 	LanguageMenu,
 	Tooltip,
-	ElementsTooltip,
-	CategoryCell,
+	TruncatedTooltip,
 } from "@ax/components";
+import { appActions } from "@ax/containers/App";
 import { pageEditorActions } from "@ax/containers/PageEditor";
-import { useAdaptiveText, useModal, usePermission } from "@ax/hooks";
+import { type ISetCurrentPageIDAction, pageStatus } from "@ax/containers/PageEditor/interfaces";
+import {
+	buildCategoryColumns,
+	getHumanLastModifiedDate,
+	getScheduleFormatDate,
+	getStructuredDataTitle,
+	trimText,
+} from "@ax/helpers";
+import { useModals, usePermissions } from "@ax/hooks";
+import type {
+	IAvailableSites,
+	ICheck,
+	IColumn,
+	ILanguage,
+	IPage,
+	IPageLanguage,
+	IRootState,
+	ISavePageParams,
+	ISchemaField,
+} from "@ax/types";
+
 import { DeleteModal, DuplicateModal, UnpublishModal } from "./atoms";
 import { getCurrentLanguages } from "./utils";
 
@@ -87,23 +93,18 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 	const initValue = { title: "", slug: "" };
 	const [duplicateModalState, setDuplicateModalState] = useState(initValue);
-	const { isOpen: isDuplicateOpen, toggleModal: toggleDuplicateModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["duplicate", "delete", "unpublish"]);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 
-	const nameCellRef = useRef<HTMLDivElement>(null);
-	const theme: any = useTheme();
-	const nameCellPadding = Number(theme.spacing.s.slice(0, -2));
-	const title = useAdaptiveText(nameCellRef, globalPage.title, nameCellPadding);
-	const path = useAdaptiveText(nameCellRef, fullPath.page, nameCellPadding);
 	const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
 
-	const isAllowedToDuplicatePages = usePermission("global.globalData.duplicateGlobalData");
-	const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");
-	const isAllowedToCreatePages = usePermission("global.globalData.createAllGlobalData");
-	const isAllowedToDeletePage = usePermission("global.globalData.deleteAllGlobalData");
-	const isAllowedToEditContentPage = usePermission("global.globalData.editAllGlobalData");
+	const isAllowedTo = usePermissions({
+		duplicatePages: "global.globalData.duplicateGlobalData",
+		publishPages: "global.globalData.publishUnpublishAllGlobalData",
+		createPages: "global.globalData.createAllGlobalData",
+		deletePages: "global.globalData.deleteAllGlobalData",
+		editContentPages: "global.globalData.editAllGlobalData",
+	});
 
 	const publishedTooltip: Record<string, string> = {
 		active: "Live",
@@ -179,7 +180,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 			setDeletedItem(deletedItems);
 			toggleToast();
 		}
-		toggleDeleteModal();
+		toggleModal("delete");
 		getGlobalPages();
 	};
 
@@ -206,26 +207,26 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 	const handleDuplicatePage = async () => {
 		const isDuplicated = await duplicatePage(globalPage.id, duplicateModalState);
 		if (isDuplicated) {
-			toggleDuplicateModal();
+			toggleModal("duplicate");
 			setHistoryPush("data/pages/editor", true);
 		}
 	};
 
-	let menuOptions = [];
+	let menuOptions: IPageOption[] = [];
 
-	if (isAllowedToDuplicatePages) {
+	if (isAllowedTo.duplicatePages) {
 		menuOptions.push({
 			label: "duplicate",
 			icon: "duplicate",
-			action: toggleDuplicateModal,
+			action: () => toggleModal("duplicate"),
 		});
 	}
 
-	if (isAllowedToDeletePage) {
+	if (isAllowedTo.deletePages) {
 		menuOptions.push({
 			label: "delete",
 			icon: "delete",
-			action: toggleDeleteModal,
+			action: () => toggleModal("delete"),
 		});
 	}
 
@@ -242,20 +243,22 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 				return {
 					label: "unpublish",
 					icon: "offline",
-					action: globalPage.haveDraftPage ? toggleUnpublishModal : unpublishPage,
+					action: globalPage.haveDraftPage ? () => toggleModal("unpublish") : unpublishPage,
 				};
 			case pageStatus.UPLOAD_PENDING:
 				return {
 					label: "unpublish",
 					icon: "offline",
-					action: globalPage.haveDraftPage ? toggleUnpublishModal : cancelPublishPage,
+					action: globalPage.haveDraftPage ? () => toggleModal("unpublish") : cancelPublishPage,
 				};
 			default:
 				return null;
 		}
 	};
 
-	const viewPage = () => window.open(globalPage.fullUrl || `${API_URL}/page/go/${globalPage.id}`, "_blank");
+	const viewPage = () => {
+		window.open(globalPage.fullUrl || `${API_URL}/page/go/${globalPage.id}`, "_blank");
+	};
 
 	const viewOption = {
 		label: "View online",
@@ -272,7 +275,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 		},
 	];
 
-	if (isAllowedToEditContentPage) {
+	if (isAllowedTo.editContentPages) {
 		editOptions.unshift({
 			label: "Edit draft",
 			icon: "modified",
@@ -282,14 +285,15 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 	}
 
 	const publishAction = getPublishItem(globalPage.liveStatus?.status);
-	menuOptions = publishAction && isAllowedToPublishPages ? [publishAction, ...menuOptions] : menuOptions;
+	const publishItems = publishAction && isAllowedTo.publishPages ? [publishAction] : [];
+	menuOptions = [...publishItems, ...menuOptions];
 
 	menuOptions = globalPage.haveDraftPage ? [...editOptions, ...menuOptions] : menuOptions;
 
 	menuOptions = globalPage.liveStatus?.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;
 
 	const handleCloseDuplicate = () => {
-		toggleDuplicateModal();
+		toggleModal("duplicate");
 		setDuplicateModalState({ title: "", slug: "" });
 	};
 
@@ -307,7 +311,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 		title: "Delete page",
 		onClick: removeItem,
 	};
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+	const secondaryDeleteModalAction = { title: "Cancel", onClick: () => toggleModal("delete") };
 
 	const currentLanguages = getCurrentLanguages(languages, pageLanguages);
 
@@ -347,7 +351,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 	const languageMenu = () => (
 		<LanguageMenu
 			language={locale}
-			availableLanguages={isAllowedToCreatePages ? languages : currentLanguages}
+			availableLanguages={isAllowedTo.createPages ? languages : currentLanguages}
 			setLanguage={handleLanguage}
 			currentLanguages={currentLanguages}
 		/>
@@ -372,38 +376,16 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 	const getLiveStatus = () => (isScheduledPub ? "scheduled" : haveDraftPage ? "modified" : liveStatus.status);
 
-	const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
-
-	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={_handleClick}>
-					{type}
-				</S.ColumnCell>
-			);
-		}
+	const mainUnpublishAction = { title: "Ok", onClick: () => toggleModal("unpublish") };
 
-		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,
+		_handleClick,
+	);
 
 	const structuredDataTitle = structuredData ? getStructuredDataTitle(structuredData) : "";
 	const typeTitle =
@@ -421,22 +403,13 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 				<S.CheckCell role="cell">
 					<CheckField name="check" value={globalPage.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
 				</S.CheckCell>
-				<S.NameCell role="cell" onClick={_handleClick} ref={nameCellRef}>
-					<Tooltip
-						content={[
-							<React.Fragment key="page-title">
-								<strong>{globalPage.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>
-						<S.Slug width={path.width}>{path.text}</S.Slug>
-					</Tooltip>
+				<S.NameCell role="cell" onClick={_handleClick}>
+					<TruncatedTooltip content={globalPage.title} expanded top={-5}>
+						<S.Title>{globalPage.title}</S.Title>
+					</TruncatedTooltip>
+					<TruncatedTooltip content={fullPath.page} expanded top={5}>
+						<S.Slug>{fullPath.page}</S.Slug>
+					</TruncatedTooltip>
 				</S.NameCell>
 				{isAllPages && activeColumns.includes("type") && <S.TypeCell role="cell">{typeTitle}</S.TypeCell>}
 				{activeColumns.includes("site") && (
@@ -470,28 +443,37 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 				</S.ActionsCell>
 			</S.StructuredDataRow>
 			<DuplicateModal
-				isOpen={isDuplicateOpen}
-				toggleModal={toggleDuplicateModal}
+				isOpen={isOpen("duplicate")}
+				toggleModal={() => toggleModal("duplicate")}
 				mainModalAction={mainDuplicateModalAction}
 				secondaryModalAction={secondaryDuplicateModalAction}
 				{...{ duplicateModalState, setDuplicateModalState }}
 			/>
 			<DeleteModal
-				isOpen={isDeleteOpen}
-				toggleModal={toggleDeleteModal}
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
 				mainModalAction={mainDeleteModalAction}
 				secondaryModalAction={secondaryDeleteModalAction}
 				{...{ title: globalPage.title, isTranslated, deleteAllVersions, setDeleteAllVersions }}
 			/>
 			<UnpublishModal
-				isOpen={isUnpublishOpen}
-				toggleModal={toggleUnpublishModal}
+				isOpen={isOpen("unpublish")}
+				toggleModal={() => toggleModal("unpublish")}
 				mainModalAction={mainUnpublishAction}
 			/>
 		</>
 	);
 };
 
+interface IPageOption {
+	label: string;
+	icon: string;
+	action: () => void | Promise<void>;
+	disabled?: boolean;
+	helpText?: string | null;
+	color?: boolean;
+}
+
 interface IGlobalPageItemProps {
 	languages: ILanguage[];
 	lang: { locale: string; id: number | null };

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

@@ -14,22 +14,28 @@ const CheckCell = styled(Cell)`
 
 const NameCell = styled(Cell)`
   flex-grow: 1;
+  min-width: 0;
+  position: relative;
+  flex-flow: column;
+  > * {
+    min-width: 0;
+  }
 `;
 
-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`};
 `;
 
-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`};
 `;
 
 const TypeCell = styled(Cell)`
@@ -164,7 +170,7 @@ const ModalContent = styled.div`
 `;
 
 const ColumnCell = styled(Cell)`
-  flex: 0 0 150px;
+  flex: 0 0 215px;
   position: relative;
   align-items: center;
 `;