@griddo/ax 11.14.2 → 11.14.3-rc.0

package/src/modules/Forms/FormList/FormItem/index.tsx

@@ -1,13 +1,33 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
-import { CategoryCell, CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tooltip } from "@ax/components";
-import { FormContent, FormLanguage, FormState, ICheck, ILanguage, INotification, IRootState, ISite } from "@ax/types";
-import { formsActions } from "@ax/containers/Forms";
+import {
+	CategoryCell,
+	CheckField,
+	Flag,
+	FloatingMenu,
+	Icon,
+	LanguageMenu,
+	Tooltip,
+	TruncatedTooltip,
+} from "@ax/components";
 import { appActions } from "@ax/containers/App";
-import { useModal, usePermission } from "@ax/hooks";
-import { findObjectValue, getHumanLastModifiedDate } from "@ax/helpers";
+import { formsActions } from "@ax/containers/Forms";
 import { findFieldsErrors } from "@ax/forms";
+import { findObjectValue, getHumanLastModifiedDate } from "@ax/helpers";
+import { useModals, usePermissions } from "@ax/hooks";
+import type {
+	FormContent,
+	FormLanguage,
+	FormState,
+	ICheck,
+	ILanguage,
+	INotification,
+	IRootState,
+	ISite,
+} from "@ax/types";
+
 import { CopyModal, DeleteModal, DuplicateModal, UnPublishModal } from "../../atoms";
 import FormUseModal from "../../FormUseModal";
 
@@ -52,23 +72,17 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const [duplicateTitle, setDuplicateTitle] = useState("");
 	const [site, setSite] = useState<number | null>(null);
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
-	const { isOpen: isDuplicateOpen, toggleModal: toggleDuplicateModal } = useModal();
-	const { isOpen: isCopyOpen, toggleModal: toggleCopyModal } = useModal();
-	const { isOpen: isUseOpen, toggleModal: toggleUseModal } = useModal();
-
-	const createFormPermission = isSiteView ? "forms.createForms" : "global.forms.createForms";
-	const editFormPermission = isSiteView ? "forms.editForms" : "global.forms.editForms";
-	const deleteFormPermission = isSiteView ? "forms.deleteForms" : "global.forms.deleteForms";
-	const publishFormPermission = isSiteView ? "forms.publishUnpublishForms" : "global.forms.publishUnpublishForms";
-	const isAllowedToCreateForm = usePermission(createFormPermission);
-	const isAllowedToEditForm = usePermission(editFormPermission);
-	const isAllowedToDeleteForm = usePermission(deleteFormPermission);
-	const isAllowedToPublishForm = usePermission(publishFormPermission);
+	const { isOpen, toggleModal } = useModals(["delete", "unpublish", "duplicate", "copy", "use"]);
+
+	const isAllowedTo = usePermissions({
+		createForms: isSiteView ? "forms.createForms" : "global.forms.createForms",
+		editForms: isSiteView ? "forms.editForms" : "global.forms.editForms",
+		deleteForms: isSiteView ? "forms.deleteForms" : "global.forms.deleteForms",
+		publishUnpublishForms: isSiteView ? "forms.publishUnpublishForms" : "global.forms.publishUnpublishForms",
+	});
 
 	const handleClick = () => {
-		if (isAllowedToEditForm) {
+		if (isAllowedTo.editForms) {
 			onClick(form.id);
 		}
 	};
@@ -83,7 +97,7 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 				text: "This form is currently used on multiple pages. Please remove it from those pages before deleting.",
 				type: "error",
 				btnText: "Show pages",
-				onClick: toggleUseModal,
+				onClick: () => toggleModal("use"),
 			});
 		} else {
 			const formIds = deleteAllVersions ? dataLanguages.map((lang: FormLanguage) => lang.id) : id;
@@ -92,7 +106,7 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 				toggleToast("1 form deleted");
 			}
 		}
-		toggleDeleteModal();
+		toggleModal("delete");
 	};
 
 	const getSelectedFormLanguage = (language: ILanguage) =>
@@ -105,33 +119,20 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 		const selectedFormLanguage = getSelectedFormLanguage(language);
 
 		if (selectedFormLanguage) {
-			if (isAllowedToEditForm) {
-				onClick(selectedFormLanguage.id);
-			}
+			isAllowedTo.editForms && onClick(selectedFormLanguage.id);
 		} else {
 			createNewTranslation(true);
 			onClick(form.id);
 		}
 	};
 
-	const getCurrentLanguages = () => {
-		const available: ILanguage[] = [];
-
-		dataLanguages.forEach(
-			(dataLang) =>
-				languages &&
-				languages.forEach((language: ILanguage) => {
-					if (language.id === dataLang.language) {
-						available.push(language);
-					}
-				}),
-		);
-
-		return available;
+	const getCurrentLanguages = (): ILanguage[] => {
+		const dataLanguageIds = new Set(dataLanguages.map((lang) => lang.language));
+		return languages?.filter((lang) => dataLanguageIds.has(lang.id)) || [];
 	};
 
 	const currentLanguages = getCurrentLanguages();
-	const availableLanguages = isAllowedToCreateForm ? languages : currentLanguages;
+	const availableLanguages = isAllowedTo.createForms ? languages : currentLanguages;
 
 	const languageMenu = () => (
 		<LanguageMenu
@@ -155,8 +156,8 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 		const duplicated = await duplicateForm(form.id, duplicateTitle);
 		if (duplicated) {
 			goToEditor();
+			toggleModal("duplicate");
 		}
-		isDuplicateOpen && toggleDuplicateModal();
 	};
 
 	const handleCopyForm = async () => {
@@ -169,7 +170,7 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 
 	const handleCloseCopyModal = () => {
 		setSite(null);
-		isCopyOpen && toggleCopyModal();
+		toggleModal("copy");
 	};
 
 	const unpublishForm = async () => {
@@ -178,15 +179,15 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 				text: "This form is currently used on multiple pages. Please remove it from those pages before unpublishing.",
 				type: "error",
 				btnText: "Show pages",
-				onClick: toggleUseModal,
+				onClick: () => toggleModal("use"),
 			});
 		} else {
 			const isUpdated = await updateFormState(id, "inactive");
 			if (isUpdated) {
 				toggleToast("1 form unpublished");
+				toggleModal("unpublish");
 			}
 		}
-		isUnpublishOpen && toggleUnpublishModal();
 	};
 
 	const publishForm = async () => {
@@ -202,18 +203,21 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 		}
 	};
 
-	const publishButton =
-		state && state === "active"
-			? {
-					label: "unpublish",
-					icon: "offline",
-					action: toggleUnpublishModal,
-				}
-			: {
-					label: "publish",
-					icon: "upload-pending",
-					action: publishForm,
-				};
+	const isActive = state === "active";
+	const statusIcon = isActive ? "active" : "offline";
+	const statusTooltip = isActive ? "Live" : "Offline";
+
+	const publishButton = isActive
+		? {
+				label: "unpublish",
+				icon: "offline",
+				action: () => toggleModal("unpublish"),
+			}
+		: {
+				label: "publish",
+				icon: "upload-pending",
+				action: publishForm,
+			};
 
 	const menuOptions = [];
 
@@ -221,85 +225,56 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 		menuOptions.push({
 			label: "Show pages where it is used",
 			icon: "view",
-			action: () => toggleUseModal(),
+			action: () => toggleModal("use"),
 		});
 	}
 
-	if (isAllowedToCreateForm) {
+	if (isAllowedTo.createForms) {
 		menuOptions.push({
 			label: "duplicate",
 			icon: "duplicate",
-			action: () => toggleDuplicateModal(),
+			action: () => toggleModal("duplicate"),
 		});
 	}
 
-	if (isAllowedToCreateForm && isSiteView) {
+	if (isAllowedTo.createForms && isSiteView) {
 		menuOptions.push({
 			label: "Copy form in another site",
 			icon: "copy",
-			action: toggleCopyModal,
+			action: () => toggleModal("copy"),
 		});
 	}
 
-	if (isAllowedToPublishForm) {
+	if (isAllowedTo.publishUnpublishForms) {
 		menuOptions.push(publishButton);
 	}
 
-	if (isAllowedToDeleteForm) {
+	if (isAllowedTo.deleteForms) {
 		menuOptions.push({
 			label: "delete",
 			icon: "delete",
-			action: () => toggleDeleteModal(),
+			action: () => toggleModal("delete"),
 		});
 	}
 
-	const mainDeleteModalAction = {
-		title: "Delete form",
-		onClick: removeItem,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainUnpublishModalAction = {
-		title: "Unpublish form",
-		onClick: unpublishForm,
-	};
-
-	const secondaryUnpublishModalAction = { title: "Cancel", onClick: toggleUnpublishModal };
-
-	const mainDuplicateModalAction = {
-		title: "Duplicate form",
-		onClick: handleDuplicateForm,
-		disabled: !duplicateTitle.length,
-	};
-
-	const secondaryDuplicateModalAction = { title: "Cancel", onClick: toggleDuplicateModal };
-
-	const mainCopyModalAction = {
-		title: "Copy form",
-		onClick: handleCopyForm,
-		disabled: !site,
-	};
-
-	const secondaryCopyModalAction = { title: "Cancel", onClick: handleCloseCopyModal };
-
-	const checkStatus = () => (state === "active" ? "active" : "offline");
-	const getTooltip = () => (state === "active" ? "Live" : "Offline");
-
 	return (
 		<>
-			<S.FormRow role="rowgroup" selected={isSelected} onClick={handleClick} clickable={isAllowedToEditForm}>
+			<S.FormRow role="rowgroup" selected={isSelected} onClick={handleClick} clickable={isAllowedTo.editForms}>
 				<S.CheckCell role="cell" onClick={handleCheckClick}>
 					<CheckField name={`form-${id}`} value={id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
 				</S.CheckCell>
-				<S.NameCell role="cell">{title}</S.NameCell>
+				<S.NameCell role="cell">
+					<TruncatedTooltip content={title} expanded top={-5}>
+						<S.Title>{title}</S.Title>
+					</TruncatedTooltip>
+				</S.NameCell>
 				{featuredCategory && (
 					<CategoryCell categories={categories} categoryColors={categoryColors} addCategoryColors={addCategoryColors} />
 				)}
 				<S.UpdateCell role="cell">{getHumanLastModifiedDate(modified)}</S.UpdateCell>
 				<S.StateCell role="cell">
-					<Tooltip content={getTooltip()}>
-						<Icon name={checkStatus()} />
+					<Tooltip content={statusTooltip}>
+						<Icon name={statusIcon} />
 					</Tooltip>
 				</S.StateCell>
 				<S.LangCell role="cell">
@@ -310,41 +285,37 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 				</S.ActionsCell>
 			</S.FormRow>
 			<DeleteModal
-				isOpen={isDeleteOpen}
-				toggleModal={toggleDeleteModal}
-				mainModalAction={mainDeleteModalAction}
-				secondaryModalAction={secondaryDeleteModalAction}
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				onDelete={removeItem}
 				{...{ title, isTranslated, deleteAllVersions, setDeleteAllVersions }}
 			/>
 			<UnPublishModal
-				isOpen={isUnpublishOpen}
-				toggleModal={toggleUnpublishModal}
-				mainModalAction={mainUnpublishModalAction}
-				secondaryModalAction={secondaryUnpublishModalAction}
+				isOpen={isOpen("unpublish")}
+				toggleModal={() => toggleModal("unpublish")}
+				onUnpublish={unpublishForm}
 				title={title}
 			/>
 			<DuplicateModal
-				isOpen={isDuplicateOpen}
-				toggleModal={toggleDuplicateModal}
-				mainModalAction={mainDuplicateModalAction}
-				secondaryModalAction={secondaryDuplicateModalAction}
+				isOpen={isOpen("duplicate")}
+				toggleModal={() => toggleModal("duplicate")}
+				onDuplicate={handleDuplicateForm}
 				title={duplicateTitle}
 				handleChange={setDuplicateTitle}
 			/>
 			<CopyModal
-				isOpen={isCopyOpen}
+				isOpen={isOpen("copy")}
 				toggleModal={handleCloseCopyModal}
-				mainModalAction={mainCopyModalAction}
-				secondaryModalAction={secondaryCopyModalAction}
+				onCopy={handleCopyForm}
 				site={site}
 				setSite={setSite}
 				lang={language}
 				currentSite={currentSiteInfo?.id || null}
 			/>
-			{isUseOpen && (
+			{isOpen("use") && (
 				<FormUseModal
-					isOpen={isUseOpen}
-					toggleModal={toggleUseModal}
+					isOpen={isOpen("use")}
+					toggleModal={() => toggleModal("use")}
 					isSiteView={!!currentSiteInfo?.id}
 					formInUse={formInUse}
 				/>

package/src/modules/Forms/FormList/FormItem/style.tsx

@@ -16,6 +16,23 @@ const NameCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiS};
   color: ${(p) => p.theme.color.textHighEmphasis};
   flex-grow: 1;
+  min-width: 0;
+  position: relative;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Title = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const TypeCell = styled(Cell)`
@@ -58,6 +75,7 @@ const StyledActionMenu = styled(ActionMenu)`
 
 const FormRow = styled(Row)<{ clickable: boolean }>`
   cursor: ${(p) => (p.clickable ? "pointer" : "default")};
+  overflow: hidden;
   &:hover {
     ${StyledActionMenu} {
       opacity: 1;
@@ -77,6 +95,7 @@ const FlagsWrapper = styled.div`
 export {
 	CheckCell,
 	NameCell,
+	Title,
 	TypeCell,
 	UpdateCell,
 	StateCell,

package/src/modules/Forms/FormList/index.tsx

@@ -15,7 +15,7 @@ import { appActions } from "@ax/containers/App";
 import { formsActions } from "@ax/containers/Forms";
 import { ITEMS_PER_PAGE } from "@ax/containers/Forms/constants";
 import { getFormTemplates, getSchemaFormCategories } from "@ax/helpers";
-import { useBulkSelection, useCategoryColors, useModal, usePermission, useToast } from "@ax/hooks";
+import { useBulkSelection, useCategoryColors, useModals, usePermissions, useToast } from "@ax/hooks";
 import type {
 	FormContent,
 	FormState,
@@ -77,11 +77,9 @@ const FormList = (props: IUserListProps): JSX.Element => {
 	const [arePagesTranslated, setArePagesTranslated] = useState(false);
 	const [searchQuery, setSearchQuery] = useState<string>("");
 	const [notification, setNotification] = useState<INotification | null>(errorTemplates);
-	const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 	const { categoryColors, addCategoryColors } = useCategoryColors();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["new", "delete", "unpublish"]);
 	const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
 	const { setFiltersSelection, resetFilterQuery, filterValues, query: currentFilterQuery } = useFilterQuery();
 
@@ -91,12 +89,11 @@ const FormList = (props: IUserListProps): JSX.Element => {
 	const isSearching = searchQuery.length > 0;
 	const isFiltering = currentFilterQuery.length > 0;
 
-	const createFormPermission = isSiteView ? "forms.createForms" : "global.forms.createForms";
-	const deleteFormPermission = isSiteView ? "forms.deleteForms" : "global.forms.deleteForms";
-	const publishFormPermission = isSiteView ? "forms.publishUnpublishForms" : "global.forms.publishUnpublishForms";
-	const isAllowedToCreateForm = usePermission(createFormPermission);
-	const isAllowedToDeleteForm = usePermission(deleteFormPermission);
-	const isAllowedToPublishForm = usePermission(publishFormPermission);
+	const isAllowedTo = usePermissions({
+		createForms: isSiteView ? "forms.createForms" : "global.forms.createForms",
+		deleteForms: isSiteView ? "forms.deleteForms" : "global.forms.deleteForms",
+		publishUnpublishForms: isSiteView ? "forms.publishUnpublishForms" : "global.forms.publishUnpublishForms",
+	});
 
 	const {
 		resetBulkSelection,
@@ -167,7 +164,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 		goToEditor();
 	};
 
-	const addNewAction = () => (Object.keys(formTemplates).length > 1 ? toggleNewModal() : createNewForm());
+	const addNewAction = () => (Object.keys(formTemplates).length > 1 ? toggleModal("new") : createNewForm());
 
 	const handleLanguage = (language: ILanguage) => {
 		const { locale, id } = language;
@@ -201,7 +198,6 @@ const FormList = (props: IUserListProps): JSX.Element => {
 				toggleToast(`${selectedItems.all.length} form${selectedItems.all.length > 1 ? "s" : ""} unpublished`);
 			}
 		}
-		isUnpublishOpen && toggleUnpublishModal();
 		setIsBulkLoading(false);
 	};
 
@@ -218,9 +214,9 @@ const FormList = (props: IUserListProps): JSX.Element => {
 			const isDeleted = await deleteForm(idsToBeDeleted);
 			if (isDeleted) {
 				toggleToast(`${selectedItems.all.length} form${selectedItems.all.length > 1 ? "s" : ""} deleted`);
+				toggleModal("delete");
 			}
 		}
-		isDeleteOpen && toggleDeleteModal();
 		setIsBulkLoading(false);
 	};
 
@@ -229,7 +225,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 			.filter((form) => selectedItems.all.includes(form.id))
 			.some((form) => form.dataLanguages.length > 1);
 		setArePagesTranslated(hasTranslations);
-		toggleDeleteModal();
+		toggleModal("delete");
 	};
 
 	const handleSearch = (query: string) => {
@@ -237,7 +233,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 		setPage(1);
 	};
 
-	const bulkActions = isAllowedToPublishForm
+	const bulkActions = isAllowedTo.publishUnpublishForms
 		? [
 				{
 					icon: "upload-pending",
@@ -247,12 +243,12 @@ const FormList = (props: IUserListProps): JSX.Element => {
 				{
 					icon: "offline",
 					text: "unpublish",
-					action: toggleUnpublishModal,
+					action: () => toggleModal("unpublish"),
 				},
 			]
 		: [];
 
-	if (isAllowedToDeleteForm) {
+	if (isAllowedTo.deleteForms) {
 		bulkActions.push({
 			icon: "delete",
 			text: "delete",
@@ -282,7 +278,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 	);
 
 	const handleCloseModal = () => {
-		isNewOpen && toggleNewModal();
+		isOpen("new") && toggleModal("new");
 		setSelectedTemplate(null);
 	};
 
@@ -294,22 +290,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 
 	const secondaryNewModalAction = { title: "Cancel", onClick: handleCloseModal };
 
-	const mainUnpublishModalAction = {
-		title: `Unpublish form${selectedItems.all.length > 1 ? "s" : ""}`,
-		onClick: unpublishForm,
-	};
-
-	const secondaryUnpublishModalAction = { title: "Cancel", onClick: toggleUnpublishModal };
-
-	const mainDeleteModalAction = {
-		title: isBulkLoading ? "Deleting" : "Delete",
-		onClick: handleDeleteForm,
-		disabled: isBulkLoading,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const rightButtonProps = isAllowedToCreateForm
+	const rightButtonProps = isAllowedTo.createForms
 		? {
 				label: "New",
 				action: addNewAction,
@@ -318,8 +299,8 @@ const FormList = (props: IUserListProps): JSX.Element => {
 		: undefined;
 
 	const emptyProps = {
-		message: isAllowedToCreateForm ? "To start using forms in your site, create as many forms as you need" : "",
-		button: isAllowedToCreateForm ? "New form" : undefined,
+		message: isAllowedTo.createForms ? "To start using forms in your site, create as many forms as you need" : "",
+		button: isAllowedTo.createForms ? "New form" : undefined,
 		action: addNewAction,
 	};
 
@@ -415,9 +396,9 @@ const FormList = (props: IUserListProps): JSX.Element => {
 					}
 				</S.TableListWrapper>
 			</S.FormListWrapper>
-			{isNewOpen && (
+			{isOpen("new") && (
 				<TemplateModal
-					isOpen={isNewOpen}
+					isOpen={isOpen("new")}
 					toggleModal={handleCloseModal}
 					templates={formTemplates}
 					mainModalAction={mainNewModalAction}
@@ -426,21 +407,19 @@ const FormList = (props: IUserListProps): JSX.Element => {
 					selectedTemplate={selectedTemplate}
 				/>
 			)}
-			{isUnpublishOpen && (
+			{isOpen("unpublish") && (
 				<UnPublishModal
-					isOpen={isUnpublishOpen}
-					toggleModal={toggleUnpublishModal}
-					mainModalAction={mainUnpublishModalAction}
-					secondaryModalAction={secondaryUnpublishModalAction}
+					isOpen={isOpen("unpublish")}
+					toggleModal={() => toggleModal("unpublish")}
+					onUnpublish={unpublishForm}
 					title={selectedItems.all.length > 1 ? "these forms" : "this form"}
 				/>
 			)}
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
+					onDelete={handleDeleteForm}
 					title={selectedItems.all.length > 1 ? "these forms" : "this form"}
 					{...{ isTranslated: arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
 				/>