@griddo/ax 10.6.4 → 10.6.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.6.4",
+  "version": "10.6.6",
   "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": "9ffcd2b0b5b1f5983045cf9d3c77769cec0a2a8d"
 }

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/api/structuredData.tsx

@@ -1,6 +1,6 @@
 import { template } from "./config";
 import { IServiceConfig, sendRequest, sendInitialRequest } from "./utils";
-import { ICategoryGroupParams, IGetStructuredDataParams, IOrderCategoryParams } from "@ax/types";
+import { ICategoryGroupParams, IExportDataParams, IGetStructuredDataParams, IOrderCategoryParams } from "@ax/types";
 import { AxiosResponse } from "axios";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
@@ -114,6 +114,12 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/categories/order/",
     method: "PUT",
   },
+  EXPORT_DATA_CONTENT: {
+    ...template,
+    endpoint: ["/structured_data_content/", "/site/", "/export"],
+    method: "POST",
+    responseType: "blob",
+  },
 };
 
 const getData = (token: string | null, siteID?: number | null): Promise<AxiosResponse> => {
@@ -328,6 +334,19 @@ const orderCategory = (data: IOrderCategoryParams): Promise<AxiosResponse> => {
   return sendRequest(SERVICES.ORDER_CATEGORY, { ...data });
 };
 
+const exportDataContent = (
+  structuredDataID: string,
+  siteID: number | "global",
+  data: IExportDataParams
+): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.EXPORT_DATA_CONTENT;
+  const [prefix, infix, suffix] = endpoint;
+
+  SERVICES.EXPORT_DATA_CONTENT.dynamicUrl = `${host}${prefix}${structuredDataID}${infix}${siteID}${suffix}`;
+
+  return sendRequest(SERVICES.EXPORT_DATA_CONTENT, { ...data });
+};
+
 export default {
   getData,
   getDataContent,
@@ -351,4 +370,5 @@ export default {
   deleteGroupBulk,
   orderCategory,
   getGroup,
+  exportDataContent,
 };

package/src/components/BulkSelectionOptions/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 
-import { Button, CheckField, TableCounter } from "@ax/components";
+import { Button, CheckField, ExportButton, TableCounter } from "@ax/components";
 import { IBulkAction } from "@ax/types";
 
 import * as S from "./style";
 
 const BulkSelectionOptions = (props: IBulkSelectionProps): JSX.Element => {
-  const { isScrolling, checkState, actions, selectItems, totalItems, className } = props;
+  const { isScrolling, checkState, actions, selectItems, totalItems, className, exportAction } = props;
 
   const filteredActions = actions.filter((action: IBulkAction | undefined | null) => !!action);
 
@@ -34,6 +34,7 @@ const BulkSelectionOptions = (props: IBulkSelectionProps): JSX.Element => {
                 </Button>
               )
           )}
+          {exportAction && <ExportButton onClick={exportAction} />}
         </S.BulkActions>
         <S.Counter>
           <TableCounter totalItems={totalItems} />
@@ -50,6 +51,7 @@ interface IBulkSelectionProps {
   totalItems: number;
   isScrolling?: boolean;
   className?: string;
+  exportAction?: (formats: (string | number)[]) => void;
 }
 
 export default BulkSelectionOptions;

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/ExportButton/index.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { CheckGroup, Button, FloatingMenu } from "@ax/components";
+
+import * as S from "./style";
+
+const ExportButton = (props: IExportButtonProps): JSX.Element => {
+  const { onClick } = props;
+
+  const [state, setState] = useState<(string | number)[]>([]);
+
+  const handleChange = (value: string | (string | number)[]) => Array.isArray(value) && setState(value);
+
+  const handleClick = () => onClick(state);
+
+  const options = [
+    { name: "csv", value: "csv", title: ".csv" },
+    { name: "xml", value: "xml", title: ".xml" },
+    { name: "json", value: "json", title: ".json" },
+  ];
+
+  const LinkButton = () => (
+    <S.ButtonWrapper>
+      <Button className="button" type="button" buttonStyle="text" icon="download">
+        Export Data
+      </Button>
+    </S.ButtonWrapper>
+  );
+
+  return (
+    <S.Wrapper>
+      <FloatingMenu Button={LinkButton} position="left" closeOnSelect={false} offset={-25}>
+        <S.MenuWrapper>
+          <S.HelpText>Select the format(s) in which you want to export.</S.HelpText>
+          <S.ChecksWrapper>
+            <CheckGroup options={options} value={state} onChange={handleChange} multipleSelection={true} />
+          </S.ChecksWrapper>
+          <S.ExportWrapper>
+            <Button className="button" type="button" buttonStyle="line" onClick={handleClick}>
+              Export Data
+            </Button>
+          </S.ExportWrapper>
+        </S.MenuWrapper>
+      </FloatingMenu>
+    </S.Wrapper>
+  );
+};
+
+export interface IExportButtonProps {
+  onClick: (formats: (string | number)[]) => void;
+}
+
+export default ExportButton;

package/src/components/ExportButton/style.tsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+const ButtonWrapper = styled.div`
+  button {
+    margin-left: 0 !important;
+    margin-right: ${(p) => p.theme.spacing.s} !important;
+  }
+`;
+
+const MenuWrapper = styled.div`
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.s}`};
+`;
+
+const HelpText = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+`;
+
+const ChecksWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+const ExportWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+  button {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100%;
+  }
+`;
+
+export { Wrapper, ChecksWrapper, MenuWrapper, HelpText, ButtonWrapper, ExportWrapper };

package/src/components/MainWrapper/AppBar/index.tsx

@@ -16,6 +16,7 @@ import {
   ErrorCenter,
   SearchField,
   Modal,
+  ExportButton,
 } from "@ax/components";
 
 import { ActionMenu, ActionSimpleMenu, DownArrowButton } from "./atoms";
@@ -50,6 +51,7 @@ const AppBar = (props: IProps): JSX.Element => {
     hasAnimation,
     searchValue,
     isDirty,
+    exportAction,
   } = props;
 
   const publishedTooltip: any = {
@@ -280,6 +282,7 @@ const AppBar = (props: IProps): JSX.Element => {
             <S.Separator />
           </>
         )}
+        {exportAction && <ExportButton onClick={exportAction} />}
         {rightLineButton && (
           <Button
             className="button"
@@ -344,6 +347,7 @@ export interface IAppBarProps {
   hasAnimation?: boolean;
   searchValue?: string;
   isDirty?: boolean;
+  exportAction?(formats: (number | string)[]): void;
 }
 
 type IProps = IAppBarProps & RouteComponentProps;

package/src/components/MainWrapper/index.tsx

@@ -56,6 +56,7 @@ export interface IWrapperProps {
   hasAnimation?: boolean;
   searchValue?: string;
   isDirty?: boolean;
+  exportAction?(formats: (number | string)[]): void;
 }
 
 export default MainWrapper;

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/components/index.tsx

@@ -70,6 +70,7 @@ import EmptyState from "./EmptyState";
 import ErrorCenter from "./ErrorCenter";
 import ErrorPage from "./ErrorPage";
 import ErrorToast from "./ErrorToast";
+import ExportButton from "./ExportButton";
 import FieldContainer from "./FieldContainer";
 import FieldsBehavior from "./FieldsBehavior";
 import FileGallery from "./FileGallery";
@@ -182,6 +183,7 @@ export {
   ErrorCenter,
   ErrorPage,
   ErrorToast,
+  ExportButton,
   FieldContainer,
   FieldsBehavior,
   FileGallery,

package/src/containers/StructuredData/actions.tsx

@@ -54,11 +54,12 @@ import {
   ICategoryGroupParams,
   IRootState,
   IOrderCategoryParams,
+  IExportDataParams,
 } from "@ax/types";
 import { structuredData } from "@ax/api";
 import { setTotalItems } from "@ax/containers/Sites/actions";
 import { appActions } from "@ax/containers/App";
-import { deepClone, handleRequest, isEmptyArray } from "@ax/helpers";
+import { dateToString, deepClone, handleRequest, isEmptyArray } from "@ax/helpers";
 import { findMandatoryStructuredDataErrors } from "@ax/forms";
 
 const { setIsLoading, setIsSaving } = appActions;
@@ -761,6 +762,46 @@ function updateCurrentSearch(query: string): (dispatch: Dispatch) => Promise<voi
   };
 }
 
+function exportDataContent(
+  structuredDataID: string,
+  data: IExportDataParams
+): (dispatch: Dispatch, getState: any) => Promise<void> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        sites: { currentSiteInfo },
+      }: IRootState = getState();
+
+      const siteID = currentSiteInfo ? currentSiteInfo.id : "global";
+      const date = new Date();
+      const dateString = dateToString(date, "yyyy-MM-dd");
+      const fileName =
+        data.format.length === 1
+          ? `${structuredDataID}-${dateString}.${data.format[0]}`
+          : `${structuredDataID}-${dateString}.zip`;
+
+      const responseActions = {
+        handleSuccess: (response: any) => {
+          const url = window.URL.createObjectURL(new Blob([response]));
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = fileName;
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => structuredData.exportDataContent(structuredDataID, siteID, data);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
 export {
   setIsActive,
   setCategories,
@@ -799,4 +840,5 @@ export {
   deleteCategoryGroup,
   orderCategory,
   updateCurrentSearch,
+  exportDataContent,
 };

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,
 };