@griddo/ax 10.6.4 → 10.6.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.6.4",
+  "version": "10.6.5",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -112,6 +112,7 @@
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "pkg-dir": "^5.0.0",
+    "pnp-webpack-plugin": "^1.7.0",
     "polished": "3.4.1",
     "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "4.1.0",
@@ -232,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c611871f53ec5d5bc4b97e6d215b9988fd2d6f5b"
+  "gitHead": "4a065853330bcae74912ddb0f0785af16b0e261a"
 }

package/src/__tests__/components/TableFilters/CustomizeFilters/CustomizeFilters.test.tsx

@@ -15,14 +15,15 @@ const defaultProps = mock<ICustomizeFiltersProps>();
 
 describe("CustomizeFilters component rendering", () => {
   it("should render customize filter", () => {
-    defaultProps.columns = {
-      live: { title: "Live", show: true },
-      profile: { title: "Profile", show: true },
-      site: { title: "Site", show: true },
-      status: { title: "Status", show: true },
-      translation: { title: "Trans.", show: true },
-    };
+    defaultProps.columns = [
+      { id: "live", title: "Live", show: true },
+      { id: "profile", title: "Profile", show: true },
+      { id: "site", title: "Site", show: true },
+      { id: "status", title: "Status", show: true },
+      { id: "translation", title: "Trans.", show: true },
+    ];
     defaultProps.value = ["site", "profile", "live", "status", "translation"];
+    defaultProps.limit = { value: 5, text: "five" };
     defaultProps.setColumns = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
 
     render(
@@ -38,14 +39,15 @@ describe("CustomizeFilters component rendering", () => {
 
 describe("CustomizeFilters events", () => {
   it("should render check group on click floating menu button", () => {
-    defaultProps.columns = {
-      live: { title: "Live", show: true },
-      profile: { title: "Profile", show: true },
-      site: { title: "Site", show: true },
-      status: { title: "Status", show: true },
-      translation: { title: "Trans.", show: true },
-    };
+    defaultProps.columns = [
+      { id: "live", title: "Live", show: true },
+      { id: "profile", title: "Profile", show: true },
+      { id: "site", title: "Site", show: true },
+      { id: "status", title: "Status", show: true },
+      { id: "translation", title: "Trans.", show: true },
+    ];
     defaultProps.value = ["site", "profile", "live", "status", "translation"];
+    defaultProps.limit = { value: 5, text: "five" };
     defaultProps.setColumns = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
 
     render(
@@ -66,14 +68,15 @@ describe("CustomizeFilters events", () => {
   });
 
   it("should check option on click", () => {
-    defaultProps.columns = {
-      live: { title: "Live", show: true },
-      profile: { title: "Profile", show: true },
-      site: { title: "Site", show: true },
-      status: { title: "Status", show: true },
-      translation: { title: "Trans.", show: true },
-    };
+    defaultProps.columns = [
+      { id: "live", title: "Live", show: true },
+      { id: "profile", title: "Profile", show: true },
+      { id: "site", title: "Site", show: true },
+      { id: "status", title: "Status", show: true },
+      { id: "translation", title: "Trans.", show: true },
+    ];
     defaultProps.value = ["site", "profile", "live", "status", "translation"];
+    defaultProps.limit = { value: 5, text: "five" };
     defaultProps.setColumns = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
 
     render(
@@ -96,14 +99,15 @@ describe("CustomizeFilters events", () => {
   });
 
   it("should call setColumns action on change", async () => {
-    defaultProps.columns = {
-      live: { title: "Live", show: true },
-      profile: { title: "Profile", show: true },
-      site: { title: "Site", show: true },
-      status: { title: "Status", show: true },
-      translation: { title: "Trans.", show: true },
-    };
+    defaultProps.columns = [
+      { id: "live", title: "Live", show: true },
+      { id: "profile", title: "Profile", show: true },
+      { id: "site", title: "Site", show: true },
+      { id: "status", title: "Status", show: true },
+      { id: "translation", title: "Trans.", show: true },
+    ];
     defaultProps.value = ["site", "profile", "live", "status", "translation"];
+    defaultProps.limit = { value: 5, text: "five" };
     const onChangeMock = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
     defaultProps.setColumns = onChangeMock;
 
@@ -120,12 +124,12 @@ describe("CustomizeFilters events", () => {
     const checkFieldInputs = screen.queryAllByTestId("check-field-input");
     fireEvent.click(checkFieldInputs[0]);
     expect(onChangeMock).toHaveBeenCalledTimes(1);
-    expect(onChangeMock).toBeCalledWith({
-      live: { title: "Live", show: false },
-      profile: { title: "Profile", show: true },
-      site: { title: "Site", show: true },
-      status: { title: "Status", show: true },
-      translation: { title: "Trans.", show: true },
-    });
+    expect(onChangeMock).toBeCalledWith([
+      { id: "live", title: "Live", show: false },
+      { id: "profile", title: "Profile", show: true },
+      { id: "site", title: "Site", show: true },
+      { id: "status", title: "Status", show: true },
+      { id: "translation", title: "Trans.", show: true },
+    ]);
   });
 });

package/src/components/CategoryCell/style.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { Cell } from "@ax/components/TableList/TableItem/style";
 
 const CategoryCell = styled((props) => <Cell {...props} />)`
-  flex: 0 0 150px;
+  flex: 0 0 215px;
   align-items: center;
   position: relative;
 `;

package/src/components/TableFilters/CategoryFilter/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
-import { areEquals, isReqOk } from "@ax/helpers";
+import { areEquals, isReqOk, trimText } from "@ax/helpers";
 import { checkgroups } from "@ax/api";
 import { IFilterValue, IQueryValue } from "@ax/types";
 
@@ -74,7 +74,7 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
 
   const Header = () => (
     <S.HeaderWrapper isActive={isActive}>
-      {structuredData.title}
+      {trimText(structuredData.title, 23)}
       <S.IconsWrapper>
         {isActive ? <Icon name="Filter" size="16" /> : <Icon name="DownArrow" size="16" />}
       </S.IconsWrapper>

package/src/components/TableFilters/CategoryFilter/style.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
 const HeaderWrapper = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
-  width: 150px;
+  width: 215px;
   justify-content: center;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};

package/src/components/TableFilters/CustomizeFilters/index.tsx

@@ -5,19 +5,21 @@ import { IColumn } from "@ax/types";
 import * as S from "./style";
 
 const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
-  const { columns, setColumns, value } = props;
-  const options = Object.keys(columns).map((col: string) => {
-    const disabled = value.length >= 5 && !value.includes(col);
-    return { name: col, title: columns[col].title, value: col, disabled };
+  const { columns, setColumns, value, limit } = props;
+
+  const options = columns.map((col) => {
+    const disabled = value.length >= limit.value && !value.includes(col.id);
+    return { name: col.id, title: col.title, value: col.id, disabled };
   });
 
   const toggleColumn = (selection: any) => {
-    const updatedColumns = { ...columns };
-    Object.keys(columns).forEach((val: string, index: number) => {
-      if (selection.includes(val)) {
-        updatedColumns[val].show = true;
+    const updatedColumns: IColumn[] = [...columns];
+    columns.forEach((val) => {
+      const columIndex = updatedColumns.findIndex((col) => col.id === val.id);
+      if (selection.includes(val.id)) {
+        updatedColumns[columIndex].show = true;
       } else {
-        updatedColumns[val].show = false;
+        updatedColumns[columIndex].show = false;
       }
     });
     setColumns(updatedColumns);
@@ -33,7 +35,7 @@ const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
     <S.Wrapper data-testid="customize-filters-wrapper">
       <FloatingMenu Button={Button} position="right" closeOnSelect={false}>
         <ListTitle>Customize filters</ListTitle>
-        <S.Note>You can select up to five options</S.Note>
+        <S.Note>You can select up to {limit.text} options</S.Note>
         <S.ChecksWrapper>
           <CheckGroup options={options} value={value} onChange={toggleColumn} />
         </S.ChecksWrapper>
@@ -43,9 +45,10 @@ const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
 };
 
 export interface ICustomizeFiltersProps {
-  setColumns(newValue: any): void;
-  columns: Record<string, IColumn>;
+  setColumns(newValue: IColumn[]): void;
+  columns: IColumn[];
   value: string[];
+  limit: { value: number; text: string };
 }
 
 export default CustomizeFilters;

package/src/helpers/arrays.tsx

@@ -10,4 +10,13 @@ const moveArrayElement = (element: any, arr: any[], newIndex: number): Array<any
   return arrCopy;
 };
 
-export { isEmptyArray, moveArrayElement };
+const arrayInsert = (arr: any[], index: number, newItem: any) => [
+  // part of the array before the specified index
+  ...arr.slice(0, index),
+  // inserted item
+  ...newItem,
+  // part of the array after the specified index
+  ...arr.slice(index),
+];
+
+export { isEmptyArray, moveArrayElement, arrayInsert };

package/src/helpers/customColumns.tsx

@@ -0,0 +1,45 @@
+import { IColumn } from "@ax/types";
+
+const getMaxColumns = (width: number, isSimple: boolean): { value: number; text: string } => {
+  let maxColumns = 5;
+  if (width >= 1680) {
+    maxColumns = 6;
+  }
+  if (width > 1920) {
+    maxColumns = 7;
+  }
+
+  if (isSimple) {
+    maxColumns = maxColumns - 1;
+  }
+
+  switch (maxColumns) {
+    case 4:
+      return { value: 4, text: "four" };
+    case 6:
+      return { value: 6, text: "six" };
+    case 7:
+      return { value: 7, text: "seven" };
+    default:
+      return { value: 5, text: "five" };
+  }
+};
+
+const updateColumns = (columnsState: IColumn[], maxColumns: number): IColumn[] => {
+  if (!columnsState) return [];
+  const activeColumns = columnsState.filter((col) => col.show).length;
+  let availableColumns = maxColumns - activeColumns;
+
+  return columnsState.map((col) => {
+    if (!col.show && availableColumns > 0) {
+      col.show = true;
+      availableColumns = availableColumns - 1;
+    }
+    if (col.show && !col.default && availableColumns < 0) {
+      col.show = false;
+    }
+    return col;
+  });
+};
+
+export { getMaxColumns, updateColumns };

package/src/helpers/index.tsx

@@ -94,7 +94,7 @@ import {
 
 import { imageResizeCropAndCompress, compressImage } from "./imageResize";
 
-import { isEmptyArray, moveArrayElement } from "./arrays";
+import { isEmptyArray, moveArrayElement, arrayInsert } from "./arrays";
 
 import { getActivatedDataPacksIds, isModuleDisabled, getDeactivatedModules } from "./dataPacks";
 
@@ -113,6 +113,8 @@ import { parseTheme } from "./parseTheme";
 
 import { getFileIcon } from "./files";
 
+import { getMaxColumns, updateColumns } from "./customColumns";
+
 export {
   isComponentEmpty,
   setAsContainedComponent,
@@ -204,4 +206,7 @@ export {
   stripHtml,
   encodeData,
   getFileIcon,
+  arrayInsert,
+  getMaxColumns,
+  updateColumns,
 };

package/src/modules/Content/BulkHeader/TableHeader/index.tsx

@@ -6,12 +6,11 @@ import {
   CustomizeFilters,
   CategoryFilter,
   NameFilter,
-  TypeFilter,
   StatusFilter,
   LiveFilter,
   TranslationsFilter,
 } from "@ax/components";
-import { IColumn, IQueryValue } from "@ax/types";
+import { IColumn, IQueryValue, ISchemaField } from "@ax/types";
 
 import * as S from "./style";
 
@@ -31,14 +30,15 @@ const TableHeader = (props: IProps): JSX.Element => {
     isGlobalPages,
     filterValues,
     siteID,
+    maxColumns,
   } = props;
 
-  const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
+  const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
 
   const CategoryColumns =
     isGlobalPages &&
     categoryColumns.map(
-      (col: any) =>
+      (col) =>
         activeColumns.includes(col.key) && (
           <S.HeaderWrapper key={col.key}>
             <CategoryFilter
@@ -51,24 +51,6 @@ const TableHeader = (props: IProps): JSX.Element => {
         )
     );
 
-  const typeFilters = [
-    {
-      name: "all",
-      value: "all",
-      title: "All content",
-    },
-    {
-      name: "unique",
-      value: "unique",
-      title: "Basic templates",
-    },
-    {
-      name: "structuredData",
-      value: "structuredData",
-      title: "Content types",
-    },
-  ];
-
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
@@ -109,13 +91,14 @@ const TableHeader = (props: IProps): JSX.Element => {
           <S.NameWrapper>
             <NameFilter sortItems={sortItems} sortedState={sortedListStatus} />
           </S.NameWrapper>
-          {CategoryColumns}
+
           {activeColumns.includes("type") && <S.TypeHeader>Type</S.TypeHeader>}
           {activeColumns.includes("live") && (
             <S.HeaderWrapper>
               <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} />
             </S.HeaderWrapper>
           )}
+          {CategoryColumns}
           {activeColumns.includes("status") && (
             <S.HeaderWrapper>
               <StatusFilter sortItems={sortItems} sortedState={sortedListStatus} />
@@ -132,7 +115,7 @@ const TableHeader = (props: IProps): JSX.Element => {
       )}
       <S.ActionsHeader>
         <TableCounter totalItems={totalItems} />
-        <CustomizeFilters columns={columns} setColumns={setColumns} value={activeColumns} />
+        <CustomizeFilters columns={columns} setColumns={setColumns} value={activeColumns} limit={maxColumns} />
       </S.ActionsHeader>
     </S.TableHeader>
   );
@@ -147,9 +130,10 @@ interface IProps {
   sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
   filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   sortedListStatus: { isAscending: boolean; sortedByDate: boolean; sortedByTitle: boolean; sortedByURL: boolean };
-  categoryColumns: any[];
-  columns: Record<string, IColumn>;
-  setColumns: (columns: Record<string, IColumn>) => void;
+  categoryColumns: ISchemaField[];
+  columns: IColumn[];
+  setColumns: (columns: IColumn[]) => void;
+  maxColumns: { value: number; text: string };
   isGlobalPages: boolean;
   filterValues: any;
   siteID: number;

package/src/modules/Content/BulkHeader/TableHeader/style.tsx

@@ -52,13 +52,15 @@ const TypeHeader = styled(Header)`
 `;
 
 const GlobalMark = styled(Header)`
-  width: 24px;
   flex: 0 0 24px;
+  padding-right: 0;
+  padding-left: 0;
 `;
 
 const ActionsHeader = styled(Header)`
-  width: 100px;
+  flex: 0 0 85px;
   padding-right: 0;
+  padding-left: 0;
   justify-content: flex-end;
   align-items: center;
 `;

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

@@ -26,6 +26,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
     setColumns,
     isGlobalPages,
     siteID,
+    maxColumns,
   } = props;
 
   const isAllowedToDeletePage = usePermission("content.deletePages");
@@ -37,18 +38,20 @@ const BulkHeader = (props: IProps): JSX.Element => {
     action: bulkDelete,
   };
 
-  const actions = isAllowedToPublishPages ? [
-    {
-      icon: "upload-pending",
-      text: "publish",
-      action: bulkPublish,
-    },
-    {
-      icon: "offline",
-      text: "unpublish",
-      action: bulkUnpublish,
-    },
-  ] : [];
+  const actions = isAllowedToPublishPages
+    ? [
+        {
+          icon: "upload-pending",
+          text: "publish",
+          action: bulkPublish,
+        },
+        {
+          icon: "offline",
+          text: "unpublish",
+          action: bulkUnpublish,
+        },
+      ]
+    : [];
 
   const bulkActions = isEditable && isAllowedToDeletePage ? [deleteAction, ...actions] : actions;
 
@@ -76,6 +79,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
       setColumns={setColumns}
       isGlobalPages={isGlobalPages}
       siteID={siteID}
+      maxColumns={maxColumns}
     />
   );
 };
@@ -97,8 +101,9 @@ interface IProps {
   isEditable?: boolean | null;
   filterValues: any;
   categoryColumns: any[];
-  columns: Record<string, IColumn>;
-  setColumns: (columns: Record<string, IColumn>) => void;
+  columns: IColumn[];
+  setColumns: (columns: IColumn[]) => void;
+  maxColumns: { value: number; text: string };
   isGlobalPages: boolean;
   siteID: number;
 }

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

@@ -101,7 +101,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const isCopyable = !currentTemplateDataPacks;
   const isGlobal = origin === "GLOBAL";
   const isTranslated = pageLanguages.length > 1;
-  const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
+  const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
   const 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);
@@ -516,7 +516,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
             {!isHome && <S.Slug width={path.width}>{path.text}</S.Slug>}
           </Tooltip>
         </S.NameCell>
-        {CategoryColumns}
+
         {activeColumns.includes("type") && (
           <S.TypeCell role="cell" onClick={goToPage}>
             {displayName}
@@ -529,6 +529,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
             </Tooltip>
           </S.LiveCell>
         )}
+        {CategoryColumns}
         {activeColumns.includes("status") && (
           <S.StatusCell role="cell" onClick={goToPage}>
             {checkWorkflowStatus()}
@@ -682,7 +683,7 @@ interface IPageItemProps {
   toggleToast(): void;
   setRemovedPage(pageID: number): void;
   categoryColumns: any[];
-  columns: Record<string, IColumn>;
+  columns: IColumn[];
   categoryColors: any;
   addCategoryColors(cats: string[]): void;
   dataPacks: IDataPack[];

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

@@ -75,8 +75,10 @@ const SeoCell = styled(Cell)`
 `;
 
 const GlobalCell = styled(Cell)`
-  width: 24px;
   flex: 0 0 24px;
+  flex-shrink: 0;
+  padding-left: 0;
+  padding-right: 0;
 `;
 
 const Mark = styled.div`
@@ -109,14 +111,15 @@ const Wrapper = styled.div`
 `;
 
 const ActionsCell = styled(Cell)`
-  flex: 0 0 100px;
-  text-align: center;
+  flex: 0 0 85px;
+  padding-left: 0;
 `;
 
 const StyledActionMenu = styled(ActionMenu)`
   opacity: 0;
   width: 32px;
   display: flex;
+  margin-left: auto;
 `;
 
 const PageRow = styled(Row)<{ global?: boolean }>`