@griddo/ax 1.75.91 → 1.75.93

package/src/modules/Sites/SitesList/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { ICheck, IGetSitesParams, IRootState, ISettingsForm, ISite, IUser } from "@ax/types";
+import { ICheck, IGetSitesParams, IRootState, ISettingsForm, ISite, ISiteListConfig, IUser } from "@ax/types";
 import { useBulkSelection, useModal } from "@ax/hooks";
 import { MainWrapper, Modal, ErrorToast, Icon, IconAction, TableList, EmptyState } from "@ax/components";
 
@@ -31,6 +31,8 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     getSites,
     publishSitesBulk,
     unpublishSitesBulk,
+    config,
+    setListConfig,
   } = props;
 
   const isMount = useIsMount();
@@ -47,11 +49,15 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 
   const [page, setPage] = useState(firstPage);
   const [form, setForm] = useState(initialState);
-  const [isRecentSitesListDisplayed, setIsRecentSitesListDisplayed] = useState<boolean>(true);
-  const [displayMode, setDisplayMode] = useState<"list" | "grid">("grid");
+  const currentConfig = localStorage.getItem("sitesConfig")
+    ? JSON.parse(localStorage.getItem("sitesConfig") || "{}")
+    : config;
+  const [isRecentSitesListDisplayed, setIsRecentSitesListDisplayed] = useState<boolean>(
+    currentConfig.displayRecentSites
+  );
+  const [displayMode, setDisplayMode] = useState<string | "list" | "grid">(currentConfig.mode);
   const [searchQuery, setSearchQuery] = useState<string | null>("");
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("&order=lastAccess-desc");
-
+  const [currentFilterQuery, setCurrentFilterQuery] = useState(currentConfig.filter);
   const tableRef = useRef<HTMLDivElement>(null);
 
   const pagination = {
@@ -69,8 +75,8 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     action: openModal,
   };
 
-  const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+  const { setSortedListStatus } = useSortedListStatus();
+  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery(currentConfig.filterValues);
 
   useEffect(() => {
     if (token) {
@@ -84,6 +90,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
         filterQuery: currentFilterQuery,
         searchQuery: query,
       };
+
       if (isMount) {
         getSites({ ...params, token });
       } else {
@@ -103,6 +110,8 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   useEffect(() => {
     if (tableRef.current) {
       tableRef.current.scrollTo(0, 0);
+      const updatedConfig = { ...currentConfig, filterValues };
+      setListConfig(updatedConfig);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [page, searchQuery, filterValues]);
@@ -124,10 +133,20 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
   const userHasSite = (siteID: number) => currentUser.sites.includes("all") || currentUser.sites.includes(siteID);
-  const toggleRecentSites = () => setIsRecentSitesListDisplayed(!isRecentSitesListDisplayed);
+
+  const toggleRecentSites = () => {
+    const updatedConfig = { ...config, displayRecentSites: !isRecentSitesListDisplayed };
+    setListConfig(updatedConfig);
+    setIsRecentSitesListDisplayed(!isRecentSitesListDisplayed);
+  };
+
+  const changeDisplayMode = (mode: "grid" | "list") => {
+    const updatedConfig = { ...config, mode };
+    setListConfig(updatedConfig);
+    setDisplayMode(mode);
+  };
 
   const sortItems = (orderPointer: string, isAscending: boolean) => {
-    setIsRecentSitesListDisplayed(false);
     setPage(firstPage);
     const orderMethod = isAscending ? "asc" : "desc";
     const sortedState = getSortedListStatus(orderPointer, isAscending);
@@ -135,15 +154,18 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     const pointer = orderPointer === "title" ? "name" : orderPointer;
     const filtersSelection = setFiltersSelection("order", pointer, orderMethod);
     const filterQuery = setFilterQuery(filtersSelection);
-
+    const updatedConfig = { ...currentConfig, filter: filterQuery, sortedListStatus: sortedState };
+    setListConfig(updatedConfig);
     setCurrentFilterQuery(filterQuery);
   };
 
   const filterItems = async (filterPointer: string, filtersSelected: string) => {
-    setIsRecentSitesListDisplayed(false);
     setPage(firstPage);
     const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
     const filterQuery = setFilterQuery(filtersSelection);
+    const updatedConfig = { ...currentConfig, filter: filterQuery };
+    setListConfig(updatedConfig);
+
     setCurrentFilterQuery(filterQuery);
   };
 
@@ -189,11 +211,11 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
         {displayMode === "grid" ? (
           <S.FilterSelect data-testid="all-sites-grid-filter">
             <S.FilterSelectLabel data-testid="all-sites-grid-filter-label">Sort by:</S.FilterSelectLabel>{" "}
-            <GridHeaderFilter sortItems={sortItems} sortedState={sortedListStatus} />{" "}
+            <GridHeaderFilter sortItems={sortItems} sortedState={currentConfig.sortedListStatus} />{" "}
           </S.FilterSelect>
         ) : null}
-        <IconAction icon="Grid2" onClick={() => setDisplayMode("grid")} active={displayMode === "grid"} />
-        <IconAction icon="BulletList" onClick={() => setDisplayMode("list")} active={displayMode === "list"} />
+        <IconAction icon="Grid2" onClick={() => changeDisplayMode("grid")} active={displayMode === "grid"} />
+        <IconAction icon="BulletList" onClick={() => changeDisplayMode("list")} active={displayMode === "list"} />
       </S.HeaderIconsWrapper>
     </S.SectionHeader>
   );
@@ -254,9 +276,9 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
       totalItems={totalItems}
       selectItems={selectItems}
       sortItems={sortItems}
-      sortedListStatus={sortedListStatus}
+      sortedListStatus={currentConfig.sortedListStatus}
       filterItems={filterItems}
-      filterValues={filterValues}
+      filterValues={currentConfig.filterValues}
     />
   );
 
@@ -300,9 +322,11 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   return (
     <MainWrapper title="Sites" rightButton={rightButtonProps} searchAction={setSearchQuery}>
       <ErrorToast />
-      {currentRecentSites?.length > 0 ? <RecentSitesList /> : null}
-      <AllSitesHeader />
-      <AllSitesList />
+      <S.SitesListWrapper>
+        {currentRecentSites?.length > 0 ? <RecentSitesList /> : null}
+        <AllSitesHeader />
+        <AllSitesList />
+      </S.SitesListWrapper>
       <Modal
         isOpen={isOpen}
         hide={toggleModal}
@@ -323,6 +347,7 @@ interface ISitesProps {
   currentUser: IUser;
   totalItems: number;
   token: string;
+  config: ISiteListConfig;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -331,6 +356,7 @@ const mapStateToProps = (state: IRootState) => ({
   token: state.app.token,
   sites: state.sites.sites,
   recentSites: state.sites.recentSites,
+  config: state.sites.config,
 });
 
 interface IDispatchProps {
@@ -339,6 +365,7 @@ interface IDispatchProps {
   getSites(params: IGetSitesParams): void;
   publishSitesBulk(ids: number[]): void;
   unpublishSitesBulk(ids: number[]): void;
+  setListConfig(config: ISiteListConfig): void;
 }
 
 const mapDispatchToProps = {
@@ -347,6 +374,7 @@ const mapDispatchToProps = {
   getSites: sitesActions.getSites,
   publishSitesBulk: sitesActions.publishSitesBulk,
   unpublishSitesBulk: sitesActions.unpublishSitesBulk,
+  setListConfig: sitesActions.setListConfig,
 };
 
 export type ISitesListProps = ISitesProps & IDispatchProps;

package/src/modules/Sites/SitesList/style.tsx

@@ -98,7 +98,7 @@ const RecentSitesItemsWrapper = styled.div<{ isHidden: boolean }>`
     }
   }
 
-  @media (min-width: 1700px) {
+  @media (min-width: 1750px) {
     div:nth-child(6),
     div:nth-child(7) {
       display: block;
@@ -106,10 +106,15 @@ const RecentSitesItemsWrapper = styled.div<{ isHidden: boolean }>`
   }
 `;
 
+const SitesListWrapper = styled.div`
+  max-width: calc(100vw - calc(24px * 3));
+`;
+
 const GridList = styled.div<{ isEmpty: boolean; fullWidth: boolean }>`
   padding-top: ${(p) => p.theme.spacing.s};
   padding-bottom: ${(p) => p.theme.spacing.m};
   margin: 0 ${(p) => p.theme.spacing.m};
+  max-width: calc(100vw - calc(24px * 3));
 
   ${({ isEmpty, theme, fullWidth }) =>
     isEmpty
@@ -156,6 +161,7 @@ export {
   FilterSelectLabel,
   RecentSites,
   RecentSitesItemsWrapper,
+  SitesListWrapper,
   GridList,
   EmptyStateWrapper,
   ImageWrapper,

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

@@ -1,5 +1,6 @@
-import React, { memo, useState } from "react";
+import React, { memo, useRef, useState } from "react";
 import { connect } from "react-redux";
+import { useTheme } from "styled-components";
 
 import { ICheck, IAvailableSites, ISavePageParams, ILanguage, IPageLanguage, IPage, IColumn } from "@ax/types";
 import { getHumanLastModifiedDate, getStructuredDataTitle } from "@ax/helpers";
@@ -16,7 +17,7 @@ import {
   CategoryCell,
 } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
-import { useModal } from "@ax/hooks";
+import { useAdaptiveText, useModal } from "@ax/hooks";
 import { DeleteModal, DuplicateModal, UnpublishModal } from "./atoms";
 import { getCurrentLanguages } from "./utils";
 
@@ -62,9 +63,13 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
   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 { locale } = lang;
   const {
-    title,
     pageLanguages,
     metaDescription,
     metaTitle,
@@ -351,8 +356,8 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
         <S.CheckCell role="cell">
           <CheckField name="check" value={globalPage.id} checked={isSelected} onChange={handleOnChange} />
         </S.CheckCell>
-        <S.NameCell role="cell" onClick={_handleClick}>
-          {title}
+        <S.NameCell role="cell" onClick={_handleClick} ref={nameCellRef}>
+          <S.Title width={title.width}>{title.text}</S.Title>
         </S.NameCell>
         {isAllPages && activeColumns.includes("type") && (
           <S.TypeCell role="cell">{structuredData && getStructuredDataTitle(structuredData)}</S.TypeCell>
@@ -399,7 +404,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
         toggleModal={toggleDeleteModal}
         mainModalAction={mainDeleteModalAction}
         secondaryModalAction={secondaryDeleteModalAction}
-        {...{ title, isTranslated, deleteAllVersions, setDeleteAllVersions }}
+        {...{ title: globalPage.title, isTranslated, deleteAllVersions, setDeleteAllVersions }}
       />
       <UnpublishModal
         isOpen={isUnpublishOpen}

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

@@ -13,9 +13,17 @@ const CheckCell = styled(Cell)`
 `;
 
 const NameCell = styled(Cell)`
+  flex-grow: 1;
+`;
+
+const Title = styled.div<{ width: number }>`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.color.textHighEmphasis};
-  flex-grow: 1;
+  display: inline;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: ${(p) => `${p.width}px`};
 `;
 
 const TypeCell = styled(Cell)`
@@ -165,4 +173,5 @@ export {
   StyledClose,
   FloatingSeo,
   ModalContent,
+  Title,
 };

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

@@ -39,7 +39,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
   const { locale } = lang;
   const { dataLanguages } = structuredData;
 
-  const currentStructuredDataColumns: any = columns[currentStructuredData.id] || columns["all"];
+  const currentStructuredDataColumns: any = columns[currentStructuredData?.id] || columns["all"];
 
   const activeColumns = currentStructuredDataColumns
     ? Object.keys(currentStructuredDataColumns).filter((col: string) => currentStructuredDataColumns[col].show)

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

@@ -124,6 +124,10 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const [arePagesTranslated, setArePagesTranslated] = useState(false);
   const { state: locationState } = useLocation<{ isFromEditor: boolean }>();
   const { categoryColors, addCategoryColors } = useCategoryColors();
+  const [notification, setNotification] = useState<{
+    text: string;
+    subErrors?: { id: number; error: string }[];
+  } | null>(null);
 
   const scope = currentSiteID ? "site" : "global";
 
@@ -357,7 +361,19 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   };
 
   const bulkPublishPage = async (isPublish: boolean) => {
-    const { notPublished, published } = selectedItems;
+    const { notPublished, published, drafts } = selectedItems;
+
+    if (drafts && drafts.length > 0) {
+      const multiplePages = drafts.length > 1;
+      const getPage = (id: number) => currentSitePages.find((page) => page.id === id);
+      const getPageWarning = (pageId: number) =>
+        `The '${getPage(pageId)?.title}' page has a draft version. To publish it, you must do it from the editor.`;
+      const text = multiplePages
+        ? `There are ${drafts.length} pages that cannot be published.`
+        : getPageWarning(drafts[0]);
+      const subErrors = multiplePages && drafts.map((draft) => ({ id: draft, error: getPageWarning(draft) }));
+      setNotification({ text, ...(subErrors && { subErrors }) });
+    }
 
     const status = isPublish ? pageStatus.UPLOAD_PENDING : pageStatus.OFFLINE_PENDING;
 
@@ -582,6 +598,14 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           )}
           <ErrorToast />
           {!!currentSiteErrorPages.length && <Notification type="error" text={errorPagesText} />}
+          {notification && (
+            <Notification
+              type="warning"
+              text={notification.text}
+              subErrors={notification.subErrors}
+              resetError={() => setNotification(null)}
+            />
+          )}
           <TableList
             tableHeader={TableHeader}
             pagination={pagination}

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

@@ -82,18 +82,19 @@ const getCurrentFilter = (structuredData: any, filter: any) =>
 const filterByStatus = (bulkSelection: number[], currentSitePages: IPage[]): Record<string, number[]> => {
   const notPublishedItems: number[] = [];
   const publishedItems: number[] = [];
+  const draftItems: number[] = [];
 
   currentSitePages.forEach((page: IPage) => {
-    const { id, liveStatus } = page;
+    const { id, liveStatus, haveDraftPage } = page;
     if (bulkSelection.includes(id)) {
       switch (liveStatus.status) {
         case pageStatus.OFFLINE_PENDING:
         case pageStatus.OFFLINE:
         case pageStatus.UPLOAD_PENDING:
-          notPublishedItems.push(id);
+          haveDraftPage ? draftItems.push(id) : notPublishedItems.push(id);
           break;
         case pageStatus.PUBLISHED:
-          publishedItems.push(id);
+          haveDraftPage ? draftItems.push(id) : publishedItems.push(id);
           break;
       }
     }
@@ -103,6 +104,7 @@ const filterByStatus = (bulkSelection: number[], currentSitePages: IPage[]): Rec
     all: bulkSelection,
     notPublished: notPublishedItems,
     published: publishedItems,
+    drafts: draftItems,
   };
 
   return filteredItems;

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

@@ -9,7 +9,7 @@ import SiteItem from "./SiteItem";
 import * as S from "./style";
 
 const UserCreate = (props: IProps) => {
-  const { setHistoryPush, createUser, sites, site, users, updateUser } = props;
+  const { setHistoryPush, createUser, sites, site, users, updateUser, isSaving } = props;
   const isSiteView = !!site;
   const initState: any = { name: "", email: "", sites: isSiteView ? [site.id] : ["all"] };
   const getSortedSitesByName = (sites: any) =>
@@ -57,6 +57,7 @@ const UserCreate = (props: IProps) => {
   const rightButtonProps = {
     label: "Add User",
     action: handleCreate,
+    disabled: isSaving,
   };
 
   const name = state.name.trim() === "" ? "Name" : state.name;
@@ -170,12 +171,14 @@ interface IProfileProps {
   users: IUser[];
   sites: ISite[];
   site: ISite;
+  isSaving: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   users: state.users.users,
   sites: state.sites.sites,
   site: state.sites.currentSiteInfo,
+  isSaving: state.app.isSaving,
 });
 
 const mapDispatchToProps = {

package/src/types/index.tsx

@@ -76,8 +76,8 @@ export interface IAPIPage {
   fullUrl: string;
   fullPath: IFullPath;
   templateConfig: any;
-  header: number | null;
-  footer: number | null;
+  header: number | null | Record<string, unknown>;
+  footer: number | null | Record<string, unknown>;
   availableSites: ISite[];
   structuredData: string;
   origin: string;
@@ -134,6 +134,18 @@ export interface IRecentSite {
   siteId: number;
 }
 
+export interface ISiteListConfig {
+  displayRecentSites: boolean;
+  mode: string;
+  filter: string;
+  filterValues: { order: string; liveStatus: string };
+  sortedListStatus: {
+    isAscending: boolean;
+    sortedByDateCreated: boolean;
+    sortedByLastAccess: boolean;
+    sortedByTitle: boolean;
+  };
+}
 export interface ISchema {
   title: string;
   component: string;
@@ -776,6 +788,13 @@ export interface ILinkField {
   modal: any;
 }
 
+export interface ICreatePasswordParams {
+  id: string;
+  token: string;
+  password: string;
+  retypedPassword: string;
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"