@griddo/ax 11.1.0 → 11.1.1

package/config/env.js

@@ -55,10 +55,11 @@ process.env.NODE_PATH = (process.env.NODE_PATH || "")
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in webpack configuration.
 const REACT_APP = /^REACT_APP_/i;
+const GRIDDO = /^GRIDDO_/i;
 
 function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
-    .filter((key) => REACT_APP.test(key))
+    .filter((key) => REACT_APP.test(key) || GRIDDO.test(key))
     .reduce(
       (env, key) => {
         env[key] = process.env[key];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.1.0",
+  "version": "11.1.1",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f37f62fb8e7ba767b64cf984a94d7d045bbb7ff"
+  "gitHead": "54be62448614043e86f35762e4972facb2dc902d"
 }

package/src/api/config.tsx

@@ -1,4 +1,4 @@
-const BASE_PATH = process.env.REACT_APP_API_ENDPOINT;
+const BASE_PATH = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
 
 const headers = {
   "Content-type": "application/json; charset=UTF-8",

package/src/components/BrowserContent/index.tsx

@@ -23,8 +23,8 @@ const BrowserContent = (props: IProps) => {
     selectHoverEditorID,
   } = props;
 
-  const API_URL = process.env.REACT_APP_API_ENDPOINT;
-  const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+  const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
+  const PUBLIC_API_URL = process.env.GRIDDO_PUBLIC_API_URL || process.env.REACT_APP_PUBLIC_API_ENDPOINT;
   const INSTANCE = process.env.REACT_APP_INSTANCE || process.env.GRIDDO_REACT_APP_INSTANCE;
 
   const useInstanceExternalAssets = useCallback(() => {

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import { structuredData, selects } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
-import { IGetStructuredDataParams, IDataSource, ISite, IStructuredData } from "@ax/types";
+import { IGetStructuredDataParams, IDataSource, ISite, IStructuredData, ICheck } from "@ax/types";
 import { Button, FieldsBehavior, IconAction, Select, SearchField, Tag, Tooltip } from "@ax/components";
 import { useCategoryColors } from "@ax/hooks";
 
@@ -55,7 +55,7 @@ const AutoItem = (props: IProps): JSX.Element => {
   ];
 
   const getIsGlobal = (id: string): boolean => {
-    const data = structuredDataSite && structuredDataSite.find((elem: any) => elem.id === id);
+    const data = structuredDataSite && structuredDataSite.find((elem) => elem.id === id);
     return data && data.local ? false : true;
   };
 
@@ -98,9 +98,9 @@ const AutoItem = (props: IProps): JSX.Element => {
     return false;
   };
 
-  const getFiltersCategories = (filters: any[], categories: ICategory[]) => {
+  const getFiltersCategories = (filters: IFilter[], categories: ICategory[]) => {
     let filterCategories: ICategory[] = [];
-    filters.forEach((filter: any) => {
+    filters.forEach((filter) => {
       const filterCategory = categories.find((cat: ICategory) => cat.label === filter.category);
       filterCategories =
         filterCategory && !filterCategories.includes(filterCategory)
@@ -124,7 +124,7 @@ const AutoItem = (props: IProps): JSX.Element => {
     return result;
   };
 
-  const handleCheckChange = (checkValue: any) => {
+  const handleCheckChange = (checkValue: ICheck) => {
     if (checkValue.isChecked) {
       const newFilter = find(state.options, checkValue.value);
       if (newFilter) {

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataSource, ILanguage, IRootState, ISite, IStructuredData } from "@ax/types";
+import { IDataSource, ILanguage, IRootState, ISchemaField, ISite, IStructuredData } from "@ax/types";
 import {
   Button,
   FloatingMenu,
@@ -14,7 +14,7 @@ import {
   UniqueCheck,
 } from "@ax/components";
 
-import { IReferenceState, ISource, useReference } from "../Context";
+import { IReferenceState, IRefField, ISource, useReference } from "../Context";
 import AutoItem from "./AutoItem";
 
 import * as S from "./style";
@@ -32,11 +32,13 @@ const AutoPanel = (props: IProps): JSX.Element => {
     isDataOpen: true,
     isAllLangOpen: true,
     isCustomLangOpen: true,
+    isGlobalOpen: true,
   };
   const [configState, setConfigState] = useState<IConfigState>(initConfig);
   const initToggle = {
-    isSiteActive: state.site ? true : false,
+    isSiteActive: state.site && state.site !== "global" ? true : false,
     isLangActive: state.lang ? true : false,
+    isGlobalActive: state.site && state.site === "global" ? true : false,
     errorSite: false,
     errorLang: false,
     errorMsg: "",
@@ -49,8 +51,10 @@ const AutoPanel = (props: IProps): JSX.Element => {
 
   const currentLang = globalLangs.find((language) => lang.id === language.id)?.language;
 
-  const structuredDataValues: any[] = [];
-  for (const [, dataType] of Object.entries(structuredData) as any[]) {
+  const hasGlobalContent = structuredData.global.length > 0;
+
+  const structuredDataValues: IStructuredData[] = [];
+  for (const [, dataType] of Object.entries(structuredData) as [string, IStructuredData[]][]) {
     structuredDataValues.push(...dataType);
   }
 
@@ -69,15 +73,19 @@ const AutoPanel = (props: IProps): JSX.Element => {
 
   const sourcesFields = state.sources.map((source: ISource) => {
     const foundData = structuredDataValues.find((value) => value.id === source.structuredData);
-    const indexableFields = foundData.schema.fields.filter((field: any) => field.indexable);
+    const indexableFields: ISchemaField[] =
+      foundData?.schema.fields.filter((field: ISchemaField) => field.indexable) || [];
     return indexableFields;
   });
 
   const indexableFields =
     !!sourcesFields.length &&
-    sourcesFields[0].filter((field: any) => sourcesFields.every((f: any) => f.some((_f: any) => _f.key === field.key)));
+    sourcesFields[0].filter((field: ISchemaField) =>
+      sourcesFields.every((f: ISchemaField) => f.some((_f: ISchemaField) => _f.key === field.key))
+    );
+
   if (indexableFields) {
-    indexableFields.forEach((field: any) => {
+    indexableFields.forEach((field: ISchemaField) => {
       const newField = {
         title: field.title,
         value: field.key,
@@ -181,8 +189,8 @@ const AutoPanel = (props: IProps): JSX.Element => {
     );
   };
 
-  const sourceMenu = (menu: any) => (
-    <S.SourceMenu>{menu.map((option: IDataSource) => sourceMenuOption(option))}</S.SourceMenu>
+  const sourceMenu = (menu: IDataSource[]) => (
+    <S.SourceMenu>{menu.map((option) => sourceMenuOption(option))}</S.SourceMenu>
   );
 
   const addSourceButton = () => (
@@ -231,13 +239,14 @@ const AutoPanel = (props: IProps): JSX.Element => {
     }
   };
 
-  const handleAllLanguagesChange = (value: any) => {
+  const handleAllLanguagesChange = (value: boolean) => {
     const preferenceLanguage = value ? state.preferenceLanguage : false;
     setState((state: IReferenceState) => ({ ...state, allLanguages: value, preferenceLanguage }));
   };
 
-  const handlePreferenceLanguageChange = (value: any) =>
+  const handlePreferenceLanguageChange = (value: boolean) => {
     setState((state: IReferenceState) => ({ ...state, preferenceLanguage: value }));
+  };
 
   const toggleConfig = (value: keyof IConfigState) => setConfigState({ ...configState, [value]: !configState[value] });
 
@@ -264,10 +273,13 @@ const AutoPanel = (props: IProps): JSX.Element => {
   };
 
   const handleSiteToggleChange = (value: boolean) => {
-    setToggleState({ ...toggleState, isSiteActive: value });
-    if (!value) {
-      setState((state: IReferenceState) => ({ ...state, site: undefined }));
-    }
+    setToggleState({ ...toggleState, isSiteActive: value, isGlobalActive: value ? false : toggleState.isGlobalActive });
+    setState((state: IReferenceState) => ({ ...state, site: value ? null : undefined }));
+  };
+
+  const handleGlobalToggleChange = (value: boolean) => {
+    setToggleState({ ...toggleState, isGlobalActive: value, isSiteActive: value ? false : toggleState.isSiteActive });
+    setState((state: IReferenceState) => ({ ...state, site: value ? "global" : null }));
   };
 
   return (
@@ -392,10 +404,10 @@ const AutoPanel = (props: IProps): JSX.Element => {
                 </S.OptionLabel>
 
                 <S.ConfigWrapper>
-                  <S.SubConfigContent hasMargin={toggleState.isLangActive}>
+                  <S.SubConfigContent hasMargin={true}>
                     <S.OptionDescription isOpen={configState.isDataOpen}>
                       Data is retrieved from the site you are on.{" "}
-                      <strong>If you prefer to display content from another site,</strong>
+                      <strong>If you prefer to display content from another site, </strong>
                       enable this option to select the specific site.
                     </S.OptionDescription>
                     {toggleState.isSiteActive && (
@@ -411,6 +423,35 @@ const AutoPanel = (props: IProps): JSX.Element => {
                     )}
                   </S.SubConfigContent>
                 </S.ConfigWrapper>
+
+                {hasGlobalContent && (
+                  <>
+                    <S.OptionLabel
+                      onClick={() => toggleConfig("isGlobalOpen")}
+                      isOpen={configState.isGlobalOpen}
+                      data-testid="advanced-config-label"
+                    >
+                      <S.LabelContent>
+                        <S.SubOptionText>Data from Global Content</S.SubOptionText>
+                        <ToggleField
+                          name="global-toggle"
+                          value={toggleState.isGlobalActive}
+                          onChange={handleGlobalToggleChange}
+                          size="s"
+                        />
+                      </S.LabelContent>
+                    </S.OptionLabel>
+
+                    <S.ConfigWrapper>
+                      <S.SubConfigContent hasMargin={toggleState.isSiteActive}>
+                        <S.OptionDescription isOpen={configState.isGlobalOpen}>
+                          Data is retrieved from the site you are on.{" "}
+                          <strong>If you prefer to display Global content,</strong> enable this option.
+                        </S.OptionDescription>
+                      </S.SubConfigContent>
+                    </S.ConfigWrapper>
+                  </>
+                )}
               </S.ConfigContent>
             </S.ConfigWrapper>
 
@@ -467,7 +508,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 interface IProps {
   structuredData: { global: IStructuredData[]; site: IStructuredData[] };
   categories: { global: IStructuredData[]; site: IStructuredData[] };
-  onChange: (value: any) => void;
+  onChange: (value: IRefField) => void;
   site: ISite | null;
   validators?: Record<string, unknown>;
   globalLangs: ILanguage[];
@@ -480,11 +521,13 @@ interface IConfigState {
   isDataOpen: boolean;
   isAllLangOpen: boolean;
   isCustomLangOpen: boolean;
+  isGlobalOpen: boolean;
 }
 
 interface IToggleState {
   isSiteActive: boolean;
   isLangActive: boolean;
+  isGlobalActive: boolean;
   errorSite: boolean;
   errorLang: boolean;
   errorMsg: string;

package/src/components/Fields/ReferenceField/Context/index.tsx

@@ -95,7 +95,8 @@ export interface IReferenceState {
   allLanguages: boolean;
   preferenceLanguage: boolean;
   lang?: number;
-  site?: number;
+  site?: number | "global";
+  fields?: string[];
 }
 
 export interface IRefField {
@@ -108,7 +109,8 @@ export interface IRefField {
   allLanguages?: boolean;
   preferenceLanguage?: boolean;
   lang?: number;
-  site?: number;
+  site?: number | "global";
+  fields?: string[];
 }
 
 export interface IFilter {

package/src/components/Fields/ReferenceField/ItemList/index.tsx

@@ -50,8 +50,8 @@ const ItemList = (props: IProps) => {
     const langItem = item.dataLanguages?.length
       ? item.dataLanguages.find((lang) => fixed.includes(lang.id))
       : fixed.includes(item.id)
-      ? item
-      : null;
+        ? item
+        : null;
 
     if (langItem) {
       const newSelIds: number[] = fixed.filter((id: number) => id !== langItem.id);
@@ -120,7 +120,7 @@ interface IProps {
   currentSite: number | null;
   handleListDelete(value: number[]): void;
   handleListMove(value: number[]): void;
-  site?: number;
+  site?: number | "global";
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/Fields/ReferenceField/index.tsx

@@ -124,7 +124,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     { label: "Automatic", value: "auto" },
   ];
 
-  const handleOnChange = (newValue: any) => {
+  const handleOnChange = (newValue: IRefField) => {
     onChange(newValue);
     toggleModal();
   };
@@ -150,7 +150,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 
   const icon = isAuto ? "edit" : "add";
 
-  const defaultOrders: any = {
+  const defaultOrders: Record<string, string> = {
     alpha: "Alphabetical order",
     recent: "Most recent",
   };
@@ -175,7 +175,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
               <S.TypeContainer key={singleSource.structuredData}>
                 <S.Title>{srcTitle?.title}</S.Title>
                 <div>
-                  {singleSource.filters?.map((f: any) => (
+                  {singleSource.filters?.map((f) => (
                     <Tag key={f.label} text={f.category ? `${f.category}: ${f.label}` : f.label} color={f.color} />
                   ))}
                 </div>
@@ -265,7 +265,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 export interface IReferenceFieldProps {
   sources: ISource[];
   value?: IRefField;
-  onChange: (value: any) => void;
+  onChange: (value: IRefField) => void;
   disabled?: boolean;
   site: ISite | null;
   selectionType?: string[];

package/src/components/Fields/Wysiwyg/config.tsx

@@ -1,5 +1,6 @@
 import { getRichTextConfig, parseClassNames } from "./helpers";
 
+const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
 const richTextConfig = getRichTextConfig();
 const paragraphStyles = richTextConfig?.paragraphStyles ? parseClassNames(richTextConfig.paragraphStyles) : undefined;
 const tableStyles = richTextConfig?.tableStyles ? parseClassNames(richTextConfig.tableStyles) : undefined;
@@ -41,14 +42,7 @@ const buttonsFull = {
 };
 
 const buttons = [
-  [
-    "bold",
-    "italic",
-    "formatUL",
-    "insertLink",
-    "paragraphFormat",
-    paragraphStyles ? "paragraphStyle" : undefined,
-  ],
+  ["bold", "italic", "formatUL", "insertLink", "paragraphFormat", paragraphStyles ? "paragraphStyle" : undefined],
 ];
 
 const wysiwygConfig = {
@@ -83,7 +77,7 @@ const wysiwygConfig = {
   videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
   imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
   imageMaxSize: 20 * 1024 * 1024,
-  imageManagerLoadURL: `${process.env.REACT_APP_API_ENDPOINT}/images/wysiwyg`,
+  imageManagerLoadURL: `${API_URL}/images/wysiwyg`,
   requestWithCORS: false,
   paragraphStyles,
   tableStyles,

package/src/containers/StructuredData/utils.tsx

@@ -36,8 +36,8 @@ const evaluateDataComputedFields = async (structuredData: any, fields: ISchemaFi
   const updatedData = deepClone(structuredData);
   const data = {
     operation: "save",
-    apiUrl: process.env.REACT_APP_API_ENDPOINT,
-    publicApiUrl: process.env.REACT_APP_PUBLIC_API_ENDPOINT,
+    apiUrl: process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT,
+    publicApiUrl: process.env.GRIDDO_PUBLIC_API_URL || process.env.REACT_APP_PUBLIC_API_ENDPOINT,
   };
 
   for (const field of fields) {

package/src/forms/editor.tsx

@@ -206,8 +206,8 @@ const evaluateComputedFields = async (page: IPage, operation: "save" | "refresh"
   const pageSchemaContent = getTemplate(page.template.templateType).content;
   const data = {
     operation,
-    apiUrl: process.env.REACT_APP_API_ENDPOINT,
-    publicApiUrl: process.env.REACT_APP_PUBLIC_API_ENDPOINT,
+    apiUrl: process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT,
+    publicApiUrl: process.env.GRIDDO_PUBLIC_API_URL || process.env.REACT_APP_PUBLIC_API_ENDPOINT,
   };
   for (const field of pageSchemaContent) {
     if (Object.prototype.hasOwnProperty.call(field, "computed")) {

package/src/helpers/schemas.tsx

@@ -11,7 +11,7 @@ const moduleCategories = config.schemas.config.moduleCategories;
 const allSchemas = {
   ...schemas.modules,
   ...schemas.components,
-  ...formSchemas.fields,
+  ...formSchemas?.fields,
   ...pageSchemas,
 };
 
@@ -54,13 +54,13 @@ const getTemplate = (name: string) => schemas.templates[name];
 
 const getDefaultTemplate = (name: string) => schemas.templates[name].default;
 
-const getFormTemplates = (): Record<string, ISchema> => formSchemas.templates;
+const getFormTemplates = (): Record<string, ISchema> => formSchemas?.templates || {};
 
-const getFormTemplate = (name: string) => formSchemas.templates[name];
+const getFormTemplate = (name: string) => formSchemas?.templates[name];
 
-const getDefaultFormTemplate = (name: string) => formSchemas.templates[name].default;
+const getDefaultFormTemplate = (name: string) => formSchemas?.templates[name].default;
 
-const getSchemaFormCategories = (): { label: string; value: string }[] => formSchemas.categories;
+const getSchemaFormCategories = (): { label: string; value: string }[] => formSchemas?.categories || [];
 
 const getTemplateThumbnails = (name: string, theme?: string) => {
   if (!schemas.templates[name]?.thumbnails) return null;
@@ -71,7 +71,7 @@ const getTemplateThumbnails = (name: string, theme?: string) => {
 };
 
 const getFormTemplateThumbnails = (name: string): Record<string, string> | null =>
-  formSchemas.templates[name]?.thumbnails ? formSchemas.templates[name].thumbnails : null;
+  formSchemas?.templates[name]?.thumbnails ? formSchemas?.templates[name].thumbnails : null;
 
 const getDataPackSchema = (name: string) => contentTypesSchemas.dataPacks[name];
 

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

@@ -111,7 +111,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const isGlobal = origin === "GLOBAL";
   const isTranslated = pageLanguages.length > 1;
   const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
-  const API_URL = process.env.REACT_APP_API_ENDPOINT;
+  const API_URL = process.env.GRIDDO_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);
   const isScheduledPub = !!publicationScheduled && (liveStatus.status === pageStatus.SCHEDULED || haveDraftPage);

package/src/modules/StructuredData/Form/ConnectedField/index.tsx

@@ -24,8 +24,8 @@ const ConnectedField = (props: IProps) => {
     const evaluateDataComputedFields = async () => {
       const data = {
         operation: "refresh",
-        apiUrl: process.env.REACT_APP_API_ENDPOINT,
-        publicApiUrl: process.env.REACT_APP_PUBLIC_API_ENDPOINT,
+        apiUrl: process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT,
+        publicApiUrl: process.env.GRIDDO_PUBLIC_API_URL || process.env.REACT_APP_PUBLIC_API_ENDPOINT,
       };
       const computedFunction = eval(`(${field.computed})`);
       const value = await computedFunction(form.content, data);
@@ -45,7 +45,10 @@ const ConnectedField = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [form?.content]);
 
-  const handleChange = (newValue: any) => updateFormValue({ [fieldKey]: newValue });
+  const handleChange = (newValue: any) => {
+    setValue(newValue);
+    updateFormValue({ [fieldKey]: newValue });
+  };
 
   let innerFields: JSX.Element[] = [];
 

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

@@ -86,7 +86,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const nameCellPadding = Number(theme.spacing.s.slice(0, -2));
   const title = useAdaptiveText(nameCellRef, globalPage.title, nameCellPadding);
   const path = useAdaptiveText(nameCellRef, fullPath.page, nameCellPadding);
-  const API_URL = process.env.REACT_APP_API_ENDPOINT;
+  const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
 
   const isAllowedToDuplicatePages = usePermission("global.globalData.duplicateGlobalData");
   const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");