@griddo/ax 10.1.7 → 10.1.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.1.7",
+  "version": "10.1.8",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "523e3e54b9d7d1813e0c8fdc3793ba433198fcbb"
+  "gitHead": "beece9baa3c2f75bc75623566056e4b162a94178"
 }

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/PageConnectedField.test.tsx

@@ -177,73 +177,6 @@ describe("PageConnectedField component rendering", () => {
     expect(templateText).toBeInTheDocument();
   });
 
-  it("should call updateEditorContent and overWriteHeaderConfig if isOverride", () => {
-    const initialStore = {
-      pageEditor: {
-        selectedEditorID: 1,
-        selectedContent: {
-          type: "header",
-          isHome: true,
-          title: {
-            component: "Page",
-            templateType: "default",
-          },
-          template: {
-            type: "template",
-            templateType: "BasicTemplate",
-            heroSection: {
-              component: "Section",
-              name: "Hero Section",
-              modules: [],
-              sectionPosition: 1,
-              editorID: 2,
-              parentEditorID: 1,
-              key: "heroSection",
-            },
-            editorID: 1,
-            parentEditorID: 0,
-          },
-        },
-        editorContent: {
-          isHome: true,
-          setAsHome: true,
-          editorContent: {
-            headerConfig: {},
-          },
-        },
-        errors: [{}],
-      },
-      sites: {
-        currentSitePages: [
-          {
-            editorID: 1,
-          },
-        ],
-      },
-      app: {
-        lang: { locale: "es-ES", id: 0 },
-      },
-      dataPacks: {
-        templates: [{ id: "default" }, { id: "BasicTemplate" }],
-        activated: [],
-      },
-    };
-
-    const store = mockStore(initialStore);
-
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <PageConnectedField {...defaultProps} />
-      </ThemeProvider>,
-      { store }
-    );
-
-    expect(store.getActions()).toContainEqual({
-      payload: { editorContent: initialStore.pageEditor.editorContent },
-      type: "pageEditor/SET_EDITOR_CONTENT",
-    });
-  });
-
   it("should call getPageBreadCrumb", () => {
     defaultProps.field.key = "parent";
     const initialStore = {
@@ -256,61 +189,6 @@ describe("PageConnectedField component rendering", () => {
         },
         editorContent: {
           isHome: false,
-          setAsHome: false,
-          editorContent: {
-            headerConfig: {},
-          },
-        },
-        errors: [{}],
-      },
-      sites: {
-        currentSitePages: [
-          {
-            editorID: 1,
-          },
-        ],
-      },
-      app: {
-        lang: { locale: "es-ES", id: 0 },
-      },
-      dataPacks: {
-        templates: [{ id: "default" }, { id: "BasicTemplate" }],
-        activated: [],
-      },
-    };
-
-    const store = mockStore(initialStore);
-    const component = (
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <PageConnectedField {...defaultProps} />
-      </ThemeProvider>
-    );
-
-    render(component, { store });
-
-    // It's loading Field -> FieldContainer with a TextField
-    const inputComponent = screen.getByTestId<HTMLInputElement>("input-component");
-    expect(inputComponent).toBeTruthy();
-    fireEvent.change(inputComponent, { target: { value: "value" } });
-    expect(store.getActions()).toContainEqual({
-      payload: { editorContent: initialStore.pageEditor.editorContent },
-      type: "pageEditor/SET_EDITOR_CONTENT",
-    });
-  });
-
-  it("should call updateEditorContent if key is setAsHome", () => {
-    defaultProps.field.key = "setAsHome";
-    const initialStore = {
-      pageEditor: {
-        selectedEditorID: 1,
-        selectedContent: {
-          type: "TextField",
-          isHome: false,
-          component: "Image",
-        },
-        editorContent: {
-          isHome: false,
-          setAsHome: false,
           editorContent: {
             headerConfig: {},
           },
@@ -364,7 +242,6 @@ describe("PageConnectedField component rendering", () => {
         },
         editorContent: {
           isHome: false,
-          setAsHome: false,
           editorContent: {
             headerConfig: {},
           },
@@ -418,7 +295,6 @@ describe("PageConnectedField component rendering", () => {
         },
         editorContent: {
           isHome: false,
-          setAsHome: false,
           editorContent: {
             headerConfig: {},
           },
@@ -474,7 +350,6 @@ describe("PageConnectedField component rendering", () => {
         },
         editorContent: {
           isHome: false,
-          setAsHome: false,
           editorContent: {
             headerConfig: {},
           },

package/src/__tests__/components/ConfigPanel/NavigationForm/Field/Field.test.tsx

@@ -29,7 +29,7 @@ const initialStore = {
     editorContent: {
       editorID: 0,
       parentEditorID: null,
-      setAsHome: false,
+      isHome: false,
       headerConfig: "{}",
       footerConfig: "{}",
     },

package/src/__tests__/components/ConfigPanel/NavigationForm/NavigationForm.test.tsx

@@ -30,7 +30,7 @@ const initialStore = {
       module: 0,
       editorID: 0,
       parentEditorID: null,
-      setAsHome: false,
+      isHome: false,
       headerConfig: "{}",
       footerConfig: "{}",
     },

package/src/__tests__/components/ConfigPanel/PreviewForm/PreviewForm.test.tsx

@@ -30,7 +30,7 @@ const initialStore = {
       module: 0,
       editorID: 0,
       parentEditorID: null,
-      setAsHome: false,
+      isHome: false,
       headerConfig: "{}",
       footerConfig: "{}",
     },

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -45,7 +45,7 @@ const PageConnectedField = (props: any) => {
   const overrideableFields = ["header", "footer"];
   const isOverride = selectedContent.type && overrideableFields.includes(selectedContent.type);
   const isPageHome = componentType === "page" && selectedContent.isHome;
-  const allowModifySlug = !selectedContent.id && !selectedContent.setAsHome;
+  const allowModifySlug = !selectedContent.id && !selectedContent.isHome;
   const isNewPage = componentType === "page" && !selectedContent.id;
   const error = errors.find((err: any) => err.editorID === selectedEditorID && err.key === objKey);
 
@@ -70,7 +70,7 @@ const PageConnectedField = (props: any) => {
   const hasDefaultIndex = isTemplateActivated && templateConfig && templateConfig.indexDefault !== undefined;
 
   const isFieldReadOnly =
-    (["parent", "slug"].includes(objKey) && (selectedContent.setAsHome || isPageHome)) || parentIsReadOnly;
+    (["parent", "slug"].includes(objKey) &&  isPageHome) || parentIsReadOnly;
 
   const isDisabled =
     (!isGlobal &&
@@ -85,10 +85,6 @@ const PageConnectedField = (props: any) => {
   };
 
   useEffect(() => {
-    if (isPageHome) {
-      updateValue("setAsHome", true);
-    }
-
     isNewPage && setDefaultValues(defaultParent, hasDefaultIndex);
     // eslint-disable-next-line
   }, [isPageHome]);
@@ -98,13 +94,9 @@ const PageConnectedField = (props: any) => {
       getPageBreadcrumb(value);
     }
 
-    if (key === "setAsHome") {
+    if (key === "isHome") {
       updateEditorContent(selectedEditorID, "parent", null);
       updateEditorContent(selectedEditorID, "slug", value ? "/" : slugify(selectedContent.title));
-      updateEditorContent(selectedEditorID, "isHome", value);
-    } else {
-      const editorID = templateID ? templateID : selectedEditorID;
-      updateEditorContent(editorID, key, value);
     }
 
     if (slugTo) {
@@ -112,6 +104,9 @@ const PageConnectedField = (props: any) => {
       updateEditorContent(selectedEditorID, slugTo, slugify(slugValue));
     }
 
+    const editorID = templateID ? templateID : selectedEditorID;
+    updateEditorContent(editorID, key, value);
+
     const isPageTitle = ["Page", "GlobalPage"].includes(selectedContent.component) && key === "title";
     if (isPageTitle) {
       setCurrentPageName(value);

package/src/forms/editor.tsx

@@ -109,7 +109,6 @@ const setIsSavedData = (isSaved: boolean) => localStorage.setItem("isSaved", `${
 const getIsSavedData = () => localStorage.getItem("isSaved");
 
 const cleanPageValues = (updatedValues: any, originalValues: any) => {
-  delete updatedValues["setAsHome"];
   delete updatedValues["modified"];
   delete updatedValues["entity"];
   delete updatedValues["structuredDataContent"];
@@ -123,7 +122,6 @@ const cleanPageValues = (updatedValues: any, originalValues: any) => {
   delete updatedValues["availableSites"];
   delete updatedValues["fullUrl"];
 
-  delete originalValues["setAsHome"];
   delete originalValues["modified"];
   delete originalValues["entity"];
   delete originalValues["structuredDataContent"];

package/src/helpers/index.tsx

@@ -62,7 +62,6 @@ import {
 import {
   getStructuredDataFromPage,
   getCurrentPageStructuredData,
-  getFilteredStructuredData,
   getStructuredDataTitle,
   isStructuredDataFromPage,
   isGlobalStructuredData,
@@ -138,7 +137,6 @@ export {
   filterByCategory,
   getStructuredDataFromPage,
   getCurrentPageStructuredData,
-  getFilteredStructuredData,
   getThumbnailProps,
   slugify,
   getFieldByPath,

package/src/helpers/structuredData.tsx

@@ -1,5 +1,3 @@
-import { getActivatedDataPacksIds, sortBy } from "@ax/helpers";
-import { IDataPack } from "@ax/types";
 import { schemas } from "components";
 
 const getStructuredDataFromPage = (site: any) => site.filter((data: any) => data.fromPage);
@@ -9,21 +7,6 @@ const getCurrentPageStructuredData = (template: string, structuredDataFromPage:
     (data: any) => !!data.schema.templates.find((relatedTemplate: string) => relatedTemplate === template)
   );
 
-const getFilteredStructuredData = (activatedDataPacks: IDataPack[], structuredData: any) => {
-  const filteredStructuredData: any[] = [];
-  const clonedData = [...structuredData];
-  const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
-  clonedData.forEach(
-    (data: any) =>
-      data.dataPacks &&
-      data.dataPacks.forEach((id: string) => activatedDataPacksIds.includes(id) && filteredStructuredData.push(data))
-  );
-
-  const orderedStructuredData = filteredStructuredData.sort(sortBy("title", false));
-
-  return orderedStructuredData;
-};
-
 const getStructuredDataTitle = (name: string): string => schemas.structuredData[name]?.title;
 
 const isStructuredDataFromPage = (name: string): boolean => schemas.structuredData[name]?.fromPage;
@@ -44,7 +27,6 @@ const getGlobalPageTypes = (): Record<string, string>[] => {
 export {
   getStructuredDataFromPage,
   getCurrentPageStructuredData,
-  getFilteredStructuredData,
   getStructuredDataTitle,
   isGlobalStructuredData,
   isStructuredDataFromPage,

package/src/modules/Categories/CategoriesList/index.tsx

@@ -5,7 +5,6 @@ import { structuredDataActions } from "@ax/containers/StructuredData";
 import { appActions } from "@ax/containers/App";
 import { IRootState, IStructuredData, IStructuredDataContent, IGetStructuredDataParams, IDataPack } from "@ax/types";
 import { useBulkSelection, useModal, useToast } from "@ax/hooks";
-import { getFilteredStructuredData } from "@ax/helpers";
 import { MainWrapper, TableList, ErrorToast, Toast, EmptyState } from "@ax/components";
 
 import CategoryItem from "./CategoryItem";
@@ -43,8 +42,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
   const tableRef = useRef<HTMLDivElement>(null);
 
   const scope = currentSiteID ? "site" : "global";
-  const currentCategories =
-    scope === "site" ? getFilteredStructuredData(activatedDataPacks, categories[scope]) : categories[scope];
+  const currentCategories = categories[scope];
 
   const catIds = currentDataContent && currentDataContent.map((cat: any) => cat.id);
 

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

@@ -26,11 +26,13 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
   } = props;
 
   const filterOptions = (value: string, objKey: string) => values.filter((item: any) => item[objKey] === value);
+
   const filterOptionsByDataPack = (value: string) => {
     return values.filter((item: any) => {
-      return item.dataPacks ? item.dataPacks.includes(value.toUpperCase()) : item.type === value;
+      return  item.editable !== false && (item.dataPacks ? item.dataPacks.includes(value.toUpperCase()) : item.type === value);
     });
   };
+
   const currentOption = filterOptions(selectedValue, "value");
   const currentType = currentOption[0] ? currentOption[0].type : "static";
 

package/src/modules/Content/atoms.tsx

@@ -69,7 +69,7 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 };
 
 const MainActionButton = (props: IActionButton): JSX.Element => (
-  <Button type="button" onClick={props.onClick}>
+  <Button type="button" onClick={props.onClick} disabled={props.disabled}>
     {props.title}
   </Button>
 );
@@ -124,6 +124,7 @@ interface IDeleteModal extends IModal {
 interface IActionButton {
   onClick: () => void;
   title: string;
+  disabled?: boolean;
 }
 
 interface ICopyModal extends IModal {

package/src/modules/Content/index.tsx

@@ -20,7 +20,7 @@ import {
   IGetSitesParams,
 } from "@ax/types";
 import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState, Notification } from "@ax/components";
-import { getFilteredStructuredData, isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
+import { isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
 
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
@@ -149,11 +149,11 @@ const Content = (props: IProps): JSX.Element => {
       : [];
 
   const defaultColumns: Record<string, IColumn> = {
-    type: { title: "Types", show: true },
+    ...(!isStructuredData && { type: { title: "Types", show: true } }),
     live: { title: "Live", show: true },
     status: { title: "Status", show: true },
     translation: { title: "Trans.", show: true },
-    seo: { title: "SEO", show: true },
+    ...(!isStructuredData && { seo: { title: "SEO", show: true } }),
   };
 
   const extraColumns = categoryColumns.reduce((acc: Record<string, IColumn>, cur: any) => {
@@ -656,11 +656,9 @@ const Content = (props: IProps): JSX.Element => {
 
   const title = currentSiteInfo ? `${currentSiteInfo.name} - Content` : `Content`;
 
-  const filteredStructuredData = getFilteredStructuredData(activatedDataPacks, structuredData);
-
   const options = {
-    filters: getOptionFilters(filteredStructuredData, activatedDataPacks),
-    values: getOptionValues(filteredStructuredData),
+    filters: getOptionFilters(structuredData, activatedDataPacks),
+    values: getOptionValues(structuredData),
   };
 
   const selectedOption = isStructuredData ? filter : template;
@@ -731,13 +729,22 @@ const Content = (props: IProps): JSX.Element => {
       ? "These pages contains some errors, so you can not publish them yet. Please, review the errors on the pages."
       : "This page contains some errors, so you can not publish it yet. Please, review the errors on the page.";
 
+  const rightButtonProps = {
+    label: "New",
+    action: addNewAction,
+    disabled: !isDataEditable,
+  };
+
+  const notEditableText =
+    "Sorry, this content cannot be edited because it comes from an external source or belongs to a preconfigured system.";
+
   return (
     <MainWrapper
       title={title}
       language={lang}
       languageActions={languageActions}
       availableLanguages={siteLanguages}
-      rightButton={{ label: "New", action: addNewAction }}
+      rightButton={rightButtonProps}
       searchAction={setSearchQuery}
       errors={errors}
     >
@@ -745,6 +752,11 @@ const Content = (props: IProps): JSX.Element => {
         <ContentFilters current={filter} dynamicValues={structuredData} resetFilter={resetFilter} />
         <S.TableWrapper>
           <ErrorToast />
+          {!isDataEditable && (
+            <S.NotificationWrapper>
+              <Notification type="info" text={notEditableText} closeButton={false} />
+            </S.NotificationWrapper>
+          )}
           {templateInstanceError.error && (
             <Notification
               type="error"

package/src/modules/Content/style.tsx

@@ -42,4 +42,8 @@ const SelectWrapper = styled.div`
   }
 `;
 
-export { ContentListWrapper, TableWrapper, PaginationWrapper, EmptyWrapper, ModalContent, SelectWrapper };
+const NotificationWrapper = styled.div`
+  width: 100%;
+`;
+
+export { ContentListWrapper, TableWrapper, PaginationWrapper, EmptyWrapper, ModalContent, SelectWrapper, NotificationWrapper };

package/src/modules/Content/utils.tsx

@@ -1,7 +1,7 @@
 import { schemas } from "components";
 import { filterDuplicatedValues, getActivatedDataPacksIds } from "@ax/helpers";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
-import { IPage } from "@ax/types";
+import { IPage, IStructuredDataContent } from "@ax/types";
 
 const getTemplatesFilters = (activatedDataPacks: any) => {
   const filters: any[] = [];
@@ -37,7 +37,7 @@ const mapStructuredOptions = (options: any[]) => {
   const pureOptions = options.filter((option: any) => !option.fromPage);
 
   return pureOptions.map((option: any) => {
-    const { id, title, dataPacks } = option;
+    const { id, title, dataPacks, editable } = option;
     return {
       name: id,
       value: id,
@@ -45,6 +45,7 @@ const mapStructuredOptions = (options: any[]) => {
       type: id,
       isData: true,
       dataPacks,
+      editable
     };
   });
 };
@@ -73,12 +74,14 @@ const getOptionValues = (options: any) => {
   return [...templatesOptionsValues, ...mapStructuredOptions(options)];
 };
 
-const getOptionFilters = (options: any, activatedDataPacks: any) => {
+const getOptionFilters = (options: IStructuredDataContent[], activatedDataPacks: any) => {
   const pureOptions = options.filter((option: any) => !option.fromPage);
   const templateFilters = getTemplatesFilters(activatedDataPacks);
+  const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
+
 
   const mappedOptions = pureOptions.flatMap((option: any) =>
-    option.dataPacks.map((dataPack: string) => {
+    option.dataPacks.filter((dataPack: string) => activatedDataPacksIds.includes(dataPack)).map((dataPack: string) => {
       const currentDataPack = activatedDataPacks.find((activatedDataPack: any) => dataPack === activatedDataPack.id);
       return {
         label: currentDataPack.title,

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

@@ -43,7 +43,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
   const activeColumns = currentStructuredDataColumns
     ? Object.keys(currentStructuredDataColumns).filter((col: string) => currentStructuredDataColumns[col].show)
-    : [];
+    : Object.keys(columns).filter((col: string) => columns[col].show);
 
   const publishedTooltip: Record<string, string> = {
     active: "Live",

package/src/schemas/pages/Page.tsx

@@ -31,7 +31,7 @@ export default {
       fields: [
         {
           type: "UniqueCheck",
-          key: "setAsHome",
+          key: "isHome",
           options: [
             {
               title: "Set as home",
@@ -254,7 +254,7 @@ export default {
   ],
   default: {
     component: "Page",
-    setAsHome: false,
+    isHome: false,
     slug: "new-page",
     title: "New Page",
     headerConfig: "{}",