@griddo/ax 10.6.5 → 10.6.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.6.5",
+  "version": "10.6.7",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -233,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4a065853330bcae74912ddb0f0785af16b0e261a"
+  "gitHead": "7518a5fa486026aeeceee57d87fac1841e9e35a6"
 }

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/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/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/modules/Content/BulkHeader/index.tsx

@@ -27,6 +27,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
     isGlobalPages,
     siteID,
     maxColumns,
+    exportAction,
   } = props;
 
   const isAllowedToDeletePage = usePermission("content.deletePages");
@@ -62,6 +63,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
       actions={bulkActions}
       selectItems={selectItems}
       totalItems={totalItems}
+      exportAction={exportAction}
     />
   ) : (
     <TableHeader
@@ -106,6 +108,7 @@ interface IProps {
   maxColumns: { value: number; text: string };
   isGlobalPages: boolean;
   siteID: number;
+  exportAction?(formats: (number | string)[]): void;
 }
 
 export default BulkHeader;

package/src/modules/Content/index.tsx

@@ -22,6 +22,7 @@ import {
   IQueryValue,
   IStructuredData,
   ISchemaField,
+  IExportDataParams,
 } from "@ax/types";
 import {
   MainWrapper,
@@ -134,6 +135,7 @@ const Content = (props: IProps): JSX.Element => {
     error,
     currentSearch,
     updateCurrentSearch,
+    exportDataContent,
   } = props;
 
   if (!currentSiteInfo) {
@@ -166,6 +168,7 @@ const Content = (props: IProps): JSX.Element => {
   const isStructuredData = filter !== "unique-pages" && !checkFromPage;
   const isGlobalPages = filter !== "unique-pages" && checkFromPage;
   const isDataEditable = !isStructuredData || (currentStructuredData && currentStructuredData.editable);
+  const isDataExportable = currentStructuredData?.exportable || false;
 
   const pagesIds = currentSitePages && currentSitePages.map((page: any) => page.id);
   const dataIds = currentDataContent && currentDataContent.map((data: any) => data.id);
@@ -545,6 +548,15 @@ const Content = (props: IProps): JSX.Element => {
     setFiltersSelection(filterPointer, filtersSelected);
   };
 
+  const exportContent = isDataExportable
+    ? async (formats: (number | string)[]) => {
+        if (currentStructuredData && formats.length) {
+          const ids = selectedItems.all.length ? selectedItems.all : undefined;
+          await exportDataContent(currentStructuredData?.id, { format: formats as string[], ids });
+        }
+      }
+    : undefined;
+
   const Header = (
     <BulkHeader
       showBulk={areItemsSelected(contentIds)}
@@ -568,6 +580,7 @@ const Content = (props: IProps): JSX.Element => {
       isGlobalPages={isGlobalPages}
       siteID={currentSiteInfo.id}
       maxColumns={maxColumns}
+      exportAction={exportContent}
     />
   );
 
@@ -845,6 +858,7 @@ const Content = (props: IProps): JSX.Element => {
       searchAction={updateCurrentSearch}
       errors={errors}
       searchValue={currentSearch}
+      exportAction={exportContent}
     >
       <S.ContentListWrapper>
         <ContentFilters
@@ -1008,6 +1022,7 @@ interface IDispatchProps {
   getDefaults(): Promise<void>;
   getAvailableSiteDataPacks(queryParams: string | null, loading?: boolean): Promise<void>;
   updateCurrentSearch(query: string): Promise<void>;
+  exportDataContent(structuredDataID: string, data: IExportDataParams): Promise<void>;
 }
 
 const mapDispatchToProps = {
@@ -1048,6 +1063,7 @@ const mapDispatchToProps = {
   getDefaults: navigationActions.getDefaults,
   getAvailableSiteDataPacks: dataPacksActions.getAvailableSiteDataPacks,
   updateCurrentSearch: sitesActions.updateCurrentSearch,
+  exportDataContent: structuredDataActions.exportDataContent,
 };
 
 interface IPagesProps {

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

@@ -32,6 +32,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
     columns,
     setColumns,
     maxColumns,
+    exportAction,
   } = props;
 
   const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");
@@ -67,6 +68,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
       actions={bulkActions}
       selectItems={selectItems}
       totalItems={totalItems}
+      exportAction={exportAction}
     />
   ) : (
     <TableHeader
@@ -109,6 +111,7 @@ interface IProps {
   columns: IColumn[];
   setColumns: (columns: IColumn[]) => void;
   maxColumns: { value: number; text: string };
+  exportAction?(formats: (number | string)[]): void;
 }
 
 export default BulkHeader;

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

@@ -5,20 +5,20 @@ import { NavLink } from "react-router-dom";
 import { IStructuredData } from "@ax/types";
 import { MenuGroup, MenuItem, SubNav } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
-import { structuredDataActions } from "@ax/containers/StructuredData";
 
 import { getFilters } from "./utils";
 
 import * as S from "./style";
 
 const ContentFilters = (props: IProps): JSX.Element => {
-  const { setFilter, current, dynamicValues, onClick, addNew, isAllowedToCreate } = props;
+  const { current, dynamicValues, onClick, addNew, isAllowedToCreate } = props;
 
   const filters = getFilters(dynamicValues);
 
   const handleClick = (value: string) => {
-    onClick(value);
-    setFilter(value);
+    if (value !== current) {
+      onClick(value);
+    }
   };
 
   return (
@@ -55,7 +55,6 @@ const ContentFilters = (props: IProps): JSX.Element => {
 
 interface IProps {
   current: string | undefined;
-  setFilter(filter: string | null): void;
   addTemplate(template: string): void;
   dynamicValues: IStructuredData[];
   onClick(dataID: string): void;
@@ -65,7 +64,6 @@ interface IProps {
 
 const mapDispatchToProps = {
   addTemplate: pageEditorActions.addTemplate,
-  setFilter: structuredDataActions.setFilter,
 };
 
 export default connect(null, mapDispatchToProps)(ContentFilters);

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

@@ -21,16 +21,15 @@ const useFilterQuery = (
   currentStructuredData: IStructuredData | null,
   values: Record<string, IStructuredDataQueryValues> | null
 ): IUseFilterQuery => {
-
   const structuredDataType = currentStructuredData ? currentStructuredData.id : "all";
   const initialQueryValues: IStructuredDataQueryValues = {
-    types: [{value: "all", label: "All"}],
-    translated: [{value: "all", label: "All"}],
-    liveStatus: [{value: "all", label: "All"}],
+    types: [{ value: "all", label: "All" }],
+    translated: [{ value: "all", label: "All" }],
+    liveStatus: [{ value: "all", label: "All" }],
     order: [],
-    filterSites: [{value: "all", label: "All"}],
-    categories: [{value: "all", label: "All"}],
-    related: [{value: "all", label: "All"}],
+    filterSites: [{ value: "all", label: "All" }],
+    categories: [{ value: "all", label: "All" }],
+    related: [{ value: "all", label: "All" }],
   };
 
   const getFilterQuery = (filterValues: IStructuredDataQueryValues): string => {
@@ -38,9 +37,10 @@ const useFilterQuery = (
     let filterQuery = "";
 
     const currentQuery = (pointer: string, values: IQueryValue[]): string => {
-      const stringValues = Array.isArray(values) && values.length
-        ? values.map((value) => (value.value !== "all" ? value.value : "")).join(",")
-        : "";
+      const stringValues =
+        Array.isArray(values) && values.length
+          ? values.map((value) => (value.value !== "all" ? value.value : "")).join(",")
+          : "";
 
       return !stringValues.length
         ? filterQuery
@@ -86,7 +86,7 @@ const useFilterQuery = (
       types: pointer === "types" ? filter : types,
       translated: pointer === "translated" ? filter : translated,
       liveStatus: pointer === "liveStatus" ? filter : liveStatus,
-      order: pointer === "order" ? [{value: `${filter[0].value}-${orderMethod}`, label: filter[0].label}] : order,
+      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
       filterSites: pointer === "filterSites" ? filter : filterSites,
       categories: pointer === "categories" ? filter : categories,
       related: pointer === "related" ? filter : related,

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

@@ -19,6 +19,7 @@ import {
   IStructuredDataQueryValues,
   IQueryValue,
   ISchemaField,
+  IExportDataParams,
 } from "@ax/types";
 import {
   ISetCurrentPageIDAction,
@@ -107,6 +108,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     currentSearch,
     updateCurrentSearch,
     resetCurrentData,
+    exportDataContent,
   } = props;
 
   const itemsPerPage = 50;
@@ -153,6 +155,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const isDataTranslatable = currentStructuredData && currentStructuredData.translate;
   const isAllPages = filter === "all-pages";
   const isStructuredDataFromPage = !!currentStructuredData?.fromPage || isAllPages;
+  const isDataExportable = currentStructuredData?.exportable || false;
   const dataIds = isStructuredDataFromPage
     ? currentSitePages.map((page: IPage) => page.id)
     : currentDataContent.map((data: IStructuredDataContent) => data.id);
@@ -165,8 +168,9 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       ? currentStructuredData.schema.fields.filter((field: ISchemaField) => field.showList)
       : [];
 
+  const type = currentStructuredData ? currentStructuredData.id : "all";
   const columns = getColumns(categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns.value);
-  const [columnsState, setColumnsState] = useState<Record<string, IColumn[]>>({ all: columns });
+  const [columnsState, setColumnsState] = useState<Record<string, IColumn[]>>({ all: [], [type]: columns });
 
   const {
     resetBulkSelection,
@@ -236,28 +240,21 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   }, []);
 
   useEffect(() => {
-    const columns = getColumns(categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns.value);
-
-    const isGlobalData = structuredData.global.some((data) => data.id === currentStructuredData?.id);
-    const type = currentStructuredData && isGlobalData ? currentStructuredData.id : "all";
+    const type = currentStructuredData ? currentStructuredData.id : "all";
     setStructuredDataType(type);
 
-    if (filter === "all-pages" || !isStructuredDataFromPage) {
-      setColumnsState({ all: columns });
-    }
-
-    if (filter !== "all-pages" && currentStructuredData) {
+    if (!columnsState[type] || type === "all") {
+      const columns = getColumns(categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns.value);
       setColumnsState((state) => ({
         ...state,
-        [currentStructuredData.id]: columns,
+        [type]: columns,
       }));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentStructuredData]);
+  }, [filter]);
 
   useEffect(() => {
-    const isGlobalData = structuredData.global.some((data) => data.id === currentStructuredData?.id);
-    const type = currentStructuredData && isGlobalData ? currentStructuredData.id : "all";
+    const type = currentStructuredData ? currentStructuredData.id : "all";
     const updatedColumns = updateColumns(columnsState[type], maxColumns.value);
     setColumnsState((state) => ({
       ...state,
@@ -332,12 +329,13 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   };
 
   const handleMenuClick = async (dataID: string) => {
-    if (filter === "all-pages" || !isStructuredDataFromPage) {
+    if (dataID === "all-pages" || !isStructuredDataFromPage) {
       filterItems("filterSites", [{ value: "all", label: "All" }]);
     }
-    setPage(firstPage);
+    setFilter(dataID);
     setSelectedStructuredData(dataID, scope);
     unselectAllItems();
+    setPage(firstPage);
   };
 
   const createNewData = () => {
@@ -455,6 +453,15 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     setFiltersSelection(filterPointer, filtersSelected);
   };
 
+  const exportContent = isDataExportable
+    ? async (formats: (number | string)[]) => {
+        if (currentStructuredData && formats.length) {
+          const ids = selectedItems.all.length ? selectedItems.all : undefined;
+          await exportDataContent(currentStructuredData?.id, { format: formats as string[], ids });
+        }
+      }
+    : undefined;
+
   const currentDataColumnsState = currentStructuredData ? columnsState[structuredDataType] || [] : columnsState["all"];
 
   const TableHeader = (
@@ -479,6 +486,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       columns={currentDataColumnsState}
       setColumns={changeColumnsState}
       maxColumns={maxColumns}
+      exportAction={exportContent}
     />
   );
 
@@ -610,6 +618,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       languageActions={languageProps.languageActions}
       searchAction={updateCurrentSearch}
       searchValue={currentSearch}
+      exportAction={exportContent}
     >
       <S.StructuredDataWrapper ref={wrapperRef}>
         <ContentFilters
@@ -737,6 +746,7 @@ const mapDispatchToProps = {
   checkUserSession: appActions.checkUserSession,
   updateCurrentSearch: structuredDataActions.updateCurrentSearch,
   resetCurrentData: structuredDataActions.resetCurrentData,
+  exportDataContent: structuredDataActions.exportDataContent,
 };
 
 interface IDispatchProps {
@@ -765,6 +775,7 @@ interface IDispatchProps {
   checkUserSession(): Promise<void>;
   updateCurrentSearch(query: string): Promise<void>;
   resetCurrentData(): Promise<void>;
+  exportDataContent(structuredDataID: string, data: IExportDataParams): Promise<void>;
 }
 
 interface ICategoriesProps {

package/src/types/index.tsx

@@ -451,6 +451,7 @@ export interface IStructuredData {
   structuredData?: string;
   editable: boolean;
   dataPacks: string[];
+  exportable?: boolean;
 }
 
 export interface IDataLanguage {
@@ -1084,6 +1085,11 @@ export interface ITemplateOption {
   isData?: boolean;
 }
 
+export interface IExportDataParams {
+  ids?: number[];
+  format: string[];
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"