@griddo/ax 10.3.20 → 10.3.22

package/config/webpackSchemas.config.js

@@ -25,6 +25,7 @@ const createConfig = ({ input, output }) => ({
           loader: "babel-loader",
           options: {
             presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript"],
+            plugins: ["@babel/plugin-proposal-optional-chaining"],
           },
         },
       },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.3.20",
+  "version": "10.3.22",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@atlaskit/tree": "^8.2.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-react": "^7.14.5",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.0",
     "@styled-system/prop-types": "5.1.2",
@@ -230,5 +231,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9b0573620562f3fcf6c8b3013a5e7702168b2e2d"
+  "gitHead": "1016e656a2fb09acc98c3576dcbc3f092bd85ee1"
 }

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

@@ -44,14 +44,10 @@ const buttons = [
   [
     "bold",
     "italic",
-    "paragraphFormat",
     "formatUL",
-    "quote",
-    "alignLeft",
-    "alignCenter",
     "insertLink",
-    "|",
-    "fullscreen",
+    "paragraphFormat",
+    paragraphStyles ? "paragraphStyle" : undefined,
   ],
 ];
 
@@ -85,7 +81,6 @@ const wysiwygConfig = {
   imageResize: false,
   linkEditButtons: ["linkOpen", "linkEdit", "linkRemove"],
   videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
-  imageUpload: true,
   imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
   imageMaxSize: 20 * 1024 * 1024,
   imageManagerLoadURL: `${process.env.REACT_APP_API_ENDPOINT}/images/wysiwyg`,

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

@@ -34,6 +34,7 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
   const dynamicConfig = {
     placeholderText: placeholder,
     toolbarButtons: full ? buttonsFull : buttons,
+    imageUpload: full ? true : false,
     requestHeaders: {
       Authorization: `bearer ${token}`,
     },

package/src/components/Gallery/index.tsx

@@ -26,13 +26,13 @@ const Gallery = (props: IProps): JSX.Element => {
 
   const tabs: string[] = [];
   if (site && isAllowedToAccessGlobalImages) {
-    tabs.unshift(...["Local", "Global"]);
+    tabs.unshift(...["Site", "Global"]);
   }
-  const [selectedTab, setSelectedTab] = useState(site ? "Local" : "Global");
+  const [selectedTab, setSelectedTab] = useState(site ? "Site" : "Global");
   const [selectedImage, setSelectedImage] = useState<IImage | null>(null);
-  const isLocalTab = selectedTab === "Local";
+  const isSiteTab = selectedTab === "Site";
   const isGlobalTab = selectedTab === "Global";
-  const galleryScope = isLocalTab && site ? site.id : "global";
+  const galleryScope = isSiteTab && site ? site.id : "global";
 
   const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
 
@@ -217,7 +217,7 @@ const Gallery = (props: IProps): JSX.Element => {
         imageSelected={selectedImage}
         validFormats={validFormats}
         setImage={setImage}
-        isGlobalTab={!isLocalTab}
+        isGlobalTab={!isSiteTab}
         scope={galleryScope}
         selectedTab={selectedTab}
         refreshImages={refreshImages}

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

@@ -141,6 +141,7 @@ const Header = styled.section<{ inversed?: boolean }>`
   background: ${(p) => (p.inversed ? p.theme.color.uiMainMenuBackground : p.theme.color.uiBackground02)};
   display: flex;
   padding-right: ${(p) => p.theme.spacing.s};
+  margin-bottom: 1px;
   border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
 
   button:first-child {

package/src/containers/FileDrive/actions.tsx

@@ -59,7 +59,7 @@ function setDisplayMode(displayMode: "grid" | "list"): ISetDisplayMode {
   return { type: SET_DISPLAY_MODE, payload: { displayMode } };
 }
 
-function setSelectedTab(selectedTab: "local" | "global"): ISetSelectedTab {
+function setSelectedTab(selectedTab: "site" | "global"): ISetSelectedTab {
   return { type: SET_SELECTED_TAB, payload: { selectedTab } };
 }
 
@@ -328,7 +328,7 @@ function updateDisplayMode(displayMode: "grid" | "list"): (dispatch: Dispatch) =
   };
 }
 
-function updateTab(tab: "local" | "global"): (dispatch: Dispatch) => Promise<void> {
+function updateTab(tab: "site" | "global"): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     dispatch(setSelectedTab(tab));
   };

package/src/containers/FileDrive/interfaces.tsx

@@ -53,7 +53,7 @@ export interface ISetDisplayMode {
 
 export interface ISetSelectedTab {
   type: typeof SET_SELECTED_TAB;
-  payload: { selectedTab: "local" | "global"  };
+  payload: { selectedTab: "site" | "global"  };
 }
 
 export type FileDriveActionsCreators = ISetCurrentFolderContent;

package/src/containers/FileDrive/reducer.tsx

@@ -21,7 +21,7 @@ export interface IFileDriveState {
   isError: boolean;
   errorMsg: string;
   displayMode: "grid" | "list";
-  selectedTab: "local" | "global";
+  selectedTab: "site" | "global";
 }
 
 export const initialState: IFileDriveState = {
@@ -34,7 +34,7 @@ export const initialState: IFileDriveState = {
   isError: false,
   errorMsg: "",
   displayMode: "grid",
-  selectedTab: "local",
+  selectedTab: "site",
 };
 
 export function reducer(state = initialState, action: any): IFileDriveState {

package/src/containers/PageEditor/actions.tsx

@@ -402,11 +402,16 @@ function savePage(
           selectedEditorID,
           isNewTranslation,
           editorContent: { header, footer, templateConfig, template },
+          lastTimeout,
         },
         sites: { currentSiteInfo },
         app: { lang },
       } = getState();
 
+      if (lastTimeout) {
+        clearTimeout(lastTimeout);
+      }
+
       const rootEditorID = 0;
       const { values: page, id } = getPageData(getState, false);
       const values = evalueComputedFields(page);
@@ -1012,14 +1017,14 @@ function updateEditorContent(
     setSelectedContent(updatedSelectedContent);
     dispatch(setEditorContent(updatedEditorContent));
 
-    if(lastTimeout){
+    if (lastTimeout) {
       clearTimeout(lastTimeout);
     }
 
     const timeoutId = setTimeout(() => {
       updatedEditorContent = evalueComputedFields(updatedEditorContent);
       generatePageContent(updatedEditorContent, dispatch, getState);
-    }, 3000);
+    }, 1500);
 
     dispatch(setLastTimeout(timeoutId));
 

package/src/containers/StructuredData/actions.tsx

@@ -340,7 +340,9 @@ function createStructuredDataContent(
       } = getState();
 
       let dataContent = prepareStructuredDataContent(structuredDataContent);
-      dataContent = evalueDataComputedFields(structuredDataContent, schema.fields);
+      if (Array.isArray(schema.fields)) {
+        dataContent = evalueDataComputedFields(structuredDataContent, schema.fields);
+      }
 
       dataContent = {
         ...dataContent,
@@ -374,7 +376,9 @@ function updateStructuredDataContent(
       } = getState();
 
       let dataContent = prepareStructuredDataContent(structuredDataContent);
-      dataContent = evalueDataComputedFields(structuredDataContent, schema.fields);
+      if (Array.isArray(schema.fields)) {
+        dataContent = evalueDataComputedFields(structuredDataContent, schema.fields);
+      }
 
       const responseActions = {
         handleSuccess: (response: any) => dispatch(setForm(response)),

package/src/containers/StructuredData/utils.tsx

@@ -32,9 +32,9 @@ const getTaxonomies = (data: IStructuredData[]) => data.filter((item: IStructure
 const getTypes = (data: IStructuredData[]) => data.filter((item: IStructuredData) => !item.taxonomy);
 const filterStructuredDataByID = (data: any, id: string) => data.find((item: any) => item.id === id);
 
-const evalueDataComputedFields = (structuredData: any, schema: any) => {
+const evalueDataComputedFields = (structuredData: any, fields: any[]) => {
   const updatedData = deepClone(structuredData);
-  schema.forEach((field: ISchemaField) => {
+  fields.forEach((field: ISchemaField) => {
     if (field.hasOwnProperty("computed")) {
       const computedFunction = eval(`(${field.computed})`);
       updatedData.content[field.key] = computedFunction(structuredData.content);

package/src/forms/editor.tsx

@@ -203,13 +203,13 @@ const evalueComputedFields = (page: any) => {
   const updatedPage = deepClone(page);
   const pageSchemaContent = getTemplate(page.template.templateType).content;
   pageSchemaContent.forEach((field: any) => {
-    if(field.hasOwnProperty("computed")){
+    if (field.hasOwnProperty("computed")) {
       updatedPage.template[field.key] = field.computed(page);
     }
-  })
+  });
 
   return updatedPage;
-}
+};
 
 export {
   parseData,

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

@@ -29,7 +29,9 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
 
   const filterOptionsByDataPack = (value: string) => {
     return values.filter((item: any) => {
-      return  item.editable !== false && (item.dataPacks ? item.dataPacks.includes(value.toUpperCase()) : item.type === value);
+      return (
+        item.editable !== false && (item.dataPacks ? item.dataPacks.includes(value.toUpperCase()) : item.type === value)
+      );
     });
   };
 
@@ -101,12 +103,19 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
       const currentGlobalStructuredData = structuredData.global.find((data: any) =>
         data.schema.templates?.includes(name)
       );
-
-      if (currentGlobalStructuredData) {
+      const currentLocalStructuredData = structuredData.site.find((data: any) => data.schema.templates?.includes(name));
+      if (currentGlobalStructuredData || currentLocalStructuredData) {
         filteredOptionsByDataPack = filteredOptionsByDataPack.map((option: any) => {
           if (option.mode !== "detail") return option;
-          const title = `Get ${currentGlobalStructuredData.title} from Global`;
-          return { ...option, title };
+          const optionType = option.type;
+          const currentStructuredDataId = currentGlobalStructuredData?.id || currentLocalStructuredData?.id;
+          if (currentStructuredDataId?.toLowerCase() === optionType.toLowerCase()) {
+            const title = currentGlobalStructuredData
+              ? `Get ${currentGlobalStructuredData.title} from Global`
+              : currentLocalStructuredData?.title;
+            return { ...option, title };
+          }
+          return option;
         });
         const globalOptionIdx = filteredOptionsByDataPack.findIndex((option: any) => option.mode === "detail");
         const globalOption = filteredOptionsByDataPack.splice(globalOptionIdx, 1);
@@ -114,6 +123,11 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
       }
     });
 
+    filteredOptionsByDataPack.sort((ele: any, comp: any) => {
+      // Use localeCompare to compare strings alphabetically
+      return ele.title.localeCompare(comp.title);
+    });
+
     setValues(filteredOptionsByDataPack);
     const firstOption = filteredOptionsByDataPack[0] && filteredOptionsByDataPack[0].value;
     selectOption(firstOption, filteredOptionsByDataPack);
@@ -128,7 +142,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
 
   return (
     <S.Table>
-      <S.Column>
+      <S.LeftColumn>
         {filters.map((item: any, i: number) => {
           const displayFilteredOptions = () => state.selectedType !== item.type && displayOptions(item);
           const isSelected = item.value === state.selectedType;
@@ -141,7 +155,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
             </MenuItem>
           );
         })}
-      </S.Column>
+      </S.LeftColumn>
       <S.Column>
         <RadioGroup options={state.columnValues} onChange={selectOption} value={state.selectedOption} name="" />
       </S.Column>

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

@@ -30,6 +30,30 @@ export const Column = styled.div`
   }
 `;
 
+export const LeftColumn = styled.div`
+  width: calc(${(p) => p.theme.spacing.m} * 8);
+  padding: 0 ${(p) => p.theme.spacing.m};
+  height: calc(100% - ${(p) => p.theme.spacing.m});
+  &:first-child {
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 2px;
+      height: 100%;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: ${(p) => p.theme.color.iconNonActive};
+    }
+    border-right: 1px solid ${(p) => p.theme.color.uiLine};
+    overflow: scroll;
+  }
+
+  &:last-child {
+    padding-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
 export const NavLink = styled.a`
   text-transform: capitalize;
   &.selected {
@@ -66,4 +90,4 @@ export const Actions = styled.div`
   button {
     margin-left: ${(p) => p.theme.spacing.s};
   }
-`;
+`;

package/src/modules/FileDrive/FileModal/DetailPanel/UsageContent/index.tsx

@@ -114,7 +114,7 @@ const UsageContent = (props: IProps) => {
 interface IProps {
   file: IFile;
   currentSiteID: number | null;
-  selectedTab: "local" | "global";
+  selectedTab: "site" | "global";
   setHistoryPush(page: string, isEditor: boolean): Promise<void>;
   setCurrentPageID(currentPageID: number | null): ISetCurrentPageIDAction;
   getSite(siteID: number): Promise<void>;

package/src/modules/FileDrive/index.tsx

@@ -35,7 +35,6 @@ import { useFilterQuery, useSortedListStatus } from "./hooks";
 import { getSortedListStatus } from "./utils";
 import Type from "./FileFilters/Type";
 import SortBy from "./FileFilters/SortBy";
-import Usage from "./FileFilters/Usage";
 import UploadItem from "./UploadItem";
 
 import * as S from "./style";
@@ -159,7 +158,7 @@ const FileDrive = (props: IProps) => {
   useLayoutEffect(() => {
     return () => {
       updateCurrentFolder(null);
-      updateTab("local");
+      updateTab("site");
     };
   }, []);
 
@@ -194,7 +193,7 @@ const FileDrive = (props: IProps) => {
     selectAllItems,
   } = useBulkSelection(filesIds);
 
-  const handleSelectedTab = (tab: "local" | "global") => {
+  const handleSelectedTab = (tab: "site" | "global") => {
     if (tab !== selectedTab) {
       setSearchQuery("");
       updateCurrentFolder(null);
@@ -567,7 +566,7 @@ const FileDrive = (props: IProps) => {
 
   const foldersIcon = isPanelOpen ? <Icon name="closePanel" size="24" /> : <Icon name="openPanel" size="24" />;
 
-  const tabs = ["local", "global"];
+  const tabs = ["site", "global"];
 
   const NewFolderButton = () =>
     allowedToAddFile ? (
@@ -764,7 +763,7 @@ interface IProps {
   currentSiteID: number | null;
   breadcrumb: IFolderTree[];
   displayMode: "grid" | "list";
-  selectedTab: "local" | "global";
+  selectedTab: "site" | "global";
   getFolderContent(params: IGetFolderParams): Promise<void>;
   getFoldersTree(siteID: number | "global"): Promise<void>;
   updateCurrentFolder(folderID: number | null): void;
@@ -773,7 +772,7 @@ interface IProps {
   deleteFile(fileID: number | number[], siteID: number | "global"): Promise<boolean>;
   moveFile(fileID: number | number[], folderID: number, siteID: number | "global"): Promise<boolean>;
   updateDisplayMode(displayMode: "grid" | "list"): Promise<void>;
-  updateTab(tab: "local" | "global"): Promise<void>;
+  updateTab(tab: "site" | "global"): Promise<void>;
   downloadFiles(fileID: number | number[], zip: boolean, fileName?: string): Promise<void>;
   uploadFile: (
     docFiles: File | File[],

package/src/modules/PageEditor/index.tsx

@@ -130,7 +130,7 @@ const PageEditor = (props: IProps) => {
     resetDirty();
     await getDefaults();
     await getPage(pageID);
-  }
+  };
 
   const setRoute = (path: string) => props.setHistoryPush(path, true);
 

package/src/schemas/pages/Page.tsx

@@ -18,6 +18,7 @@ export default {
           title: "Title",
           type: "TextField",
           key: "title",
+          autoComplete: "false",
         },
         {
           title: "Template",