@griddo/ax 1.73.29 → 1.74.1

package/src/containers/Sites/reducer.tsx

@@ -1,5 +1,7 @@
 import {
   SET_SITES,
+  SET_RECENT_SITES,
+  SET_SITES_TOTAL_ITEMS,
   SET_SITES_BY_LANG,
   SET_CURRENT_SITE_INFO,
   SET_CURRENT_SITE_PAGES,
@@ -20,6 +22,8 @@ export interface ISitesState {
   currentSiteName: string | null;
   currentSitePages: IPage[];
   sites: ISite[];
+  recentSites: ISite[];
+  sitesTotalItems: number;
   sitesByLang: ISite[];
   currentSiteInfo: any;
   currentFilter: string | null;
@@ -34,10 +38,12 @@ export const initialState = {
   currentSiteName: null,
   currentSitePages: [],
   sites: [],
+  recentSites: [],
   sitesByLang: [],
   currentSiteInfo: null,
   currentFilter: "unique-pages",
   totalItems: 0,
+  sitesTotalItems: 0,
   currentSiteLanguages: [],
   savedSiteInfo: null,
   currentSiteErrorPages: [],
@@ -48,6 +54,8 @@ export function reducer(state = initialState, action: SitesActionsCreators): ISi
   switch (action.type) {
     case SET_FILTER:
     case SET_SITES:
+    case SET_RECENT_SITES:
+    case SET_SITES_TOTAL_ITEMS:
     case SET_SITES_BY_LANG:
     case SET_CURRENT_SITE_INFO:
     case SET_CURRENT_SITE_PAGES:

package/src/helpers/schemas.tsx

@@ -6,7 +6,33 @@ import { pageSchemas } from "@ax/schemas";
 const allSchemas = { ...schemas.all, ...pageSchemas };
 
 const getSchema = (name: string) => allSchemas[name];
-const getDefaultSchema = (name: string) => (allSchemas[name] ? allSchemas[name].default : {});
+
+const getDefaultSchema = (name: string) => {
+  const defaultSchema = allSchemas[name] ? allSchemas[name].default : {};
+
+  for (const key of Object.keys(defaultSchema)) {
+    if (
+      defaultSchema[key] &&
+      typeof defaultSchema[key] === "object" &&
+      Object.prototype.hasOwnProperty.call(defaultSchema[key], "schema")
+    ) {
+      defaultSchema[key] = getDefaultSchema(defaultSchema[key].schema);
+    }
+    if (defaultSchema[key] instanceof Array) {
+      for (const i in defaultSchema[key]) {
+        if (
+          defaultSchema[key][i] &&
+          typeof defaultSchema[key][i] === "object" &&
+          Object.prototype.hasOwnProperty.call(defaultSchema[key][i], "schema")
+        ) {
+          defaultSchema[key][i] = getDefaultSchema(defaultSchema[key][i].schema);
+        }
+      }
+    }
+  }
+
+  return defaultSchema;
+};
 
 const getSchemaThumbnails = (name: string, theme?: string) => {
   if (!allSchemas[name]?.thumbnails) return null;

package/src/hooks/iframe.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect } from "react";
+
+const useOnMessageReceivedFromIframe = (actions?: {
+  setSelectedContentAction: any;
+  deleteModuleAction(editorID: number): void;
+  duplicateModuleAction(editorID: number): Promise<number>;
+}): void => {
+  const onMessageReceivedFromIframe = useCallback(
+    async (ev: MessageEvent<{ type: string; message: string }>) => {
+      if (typeof ev.data !== "object") return;
+      if (!ev.data.type) return;
+      if (!ev.data.message) return;
+      if (ev.data.type === "module-click") {
+        actions?.setSelectedContentAction(ev.data.message);
+      }
+      if (ev.data.type === "module-delete") {
+        actions?.setSelectedContentAction(0);
+        actions?.deleteModuleAction(parseInt(ev.data.message));
+      }
+      if (ev.data.type === "module-duplicate") {
+        const duplicatedEditorID = await actions?.duplicateModuleAction(parseInt(ev.data.message));
+        actions?.setSelectedContentAction(duplicatedEditorID);
+      }
+    },
+    [actions]
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", onMessageReceivedFromIframe);
+    return () => window.removeEventListener("message", onMessageReceivedFromIframe);
+  }, [onMessageReceivedFromIframe]);
+};
+
+const useOnMessageReceivedFromOutside = (setEditorContent: any, setSelectedContent: any): void => {
+  const onMessageReceivedFromOutside = useCallback(
+    (ev: MessageEvent<{ type: string; message: Record<string, unknown> }>) => {
+      if (typeof ev.data !== "object") return;
+      if (!ev.data.type) return;
+      if (!ev.data.message) return;
+      if (ev.data.type === "content-update") {
+        setEditorContent(ev.data.message);
+      }
+      if (ev.data.type === "selected-content") {
+        setSelectedContent(ev.data.message);
+      }
+    },
+    [setEditorContent, setSelectedContent]
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", onMessageReceivedFromOutside);
+    return () => window.removeEventListener("message", onMessageReceivedFromOutside);
+  }, [onMessageReceivedFromOutside]);
+};
+
+export { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside };

package/src/hooks/index.tsx

@@ -3,6 +3,7 @@ import { useDebounce, useEqualStructured, useIsDirty, usePrevious } from "./form
 import { useHandleClickOutside, useModal, useToast } from "./modals";
 import { useURLSearchParam } from "./location";
 import { useCategoryColors } from "./content";
+import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 
 export {
   useModal,
@@ -15,4 +16,6 @@ export {
   useBulkSelection,
   useURLSearchParam,
   useCategoryColors,
+  useOnMessageReceivedFromIframe,
+  useOnMessageReceivedFromOutside,
 };

package/src/modules/Content/index.tsx

@@ -17,6 +17,7 @@ import {
   ISite,
   IUser,
   IErrorItem,
+  IGetSitesParams,
 } from "@ax/types";
 import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState, Notification } from "@ax/components";
 import { getFilteredStructuredData, isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
@@ -255,8 +256,8 @@ const Content = (props: IProps): JSX.Element => {
     setColumnsState(initialColumns);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
-
-  const fetchSitesByLang = async () => await getSitesByLang(lang.id);
+  const params = { language: lang.id, recentSitesNumber: 7 };
+  const fetchSitesByLang = async () => await getSitesByLang(params);
 
   useEffect(() => {
     if (!locationState || locationState.isFromEditor !== true) {
@@ -819,7 +820,7 @@ interface IDispatchProps {
   restorePage(id: number | number[]): Promise<boolean>;
   getDataPack: (id: string) => Promise<void>;
   resetCurrentSiteErrorPages: () => Promise<void>;
-  getSitesByLang(language: number): Promise<void>;
+  getSitesByLang(params: IGetSitesParams): Promise<void>;
   setContentFilters(contentFilters: Record<string, string> | null): void;
   deleteAndRemoveFromSiteBulk(pageIds: number[], globalPageIds: number[]): Promise<boolean>;
 }

package/src/modules/FramePreview/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React from "react";
 import { connect } from "react-redux";
 
 import { getDefaultTheme } from "@ax/helpers";
@@ -6,7 +6,7 @@ import { Loading, BrowserContent } from "@ax/components";
 import { ILanguage, IRootState, ISocialState } from "@ax/types";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { findByEditorID } from "@ax/forms";
-import { useURLSearchParam } from "@ax/hooks";
+import { useOnMessageReceivedFromOutside, useURLSearchParam } from "@ax/hooks";
 
 import * as S from "./style";
 
@@ -21,40 +21,14 @@ const FramePreview = (props: IProps) => {
     globalLangs,
     setSelectedContent,
     setEditorContent,
+    deleteModule,
+    duplicateModule,
   } = props;
 
   const isPreview = useURLSearchParam("preview");
   const isDisabled = useURLSearchParam("disabled");
 
-  const onMessageReceivedFromOutside = useCallback(
-    (ev: MessageEvent<{ type: string; message: Record<string, unknown> }>) => {
-      if (typeof ev.data !== "object") return;
-      if (!ev.data.type) return;
-      if (ev.data.type !== "content-update") return;
-      if (!ev.data.message) return;
-      setEditorContent(ev.data.message);
-    },
-    []
-  );
-
-  useEffect(() => {
-    window.addEventListener("message", onMessageReceivedFromOutside);
-    return () => window.removeEventListener("message", onMessageReceivedFromOutside);
-  }, [onMessageReceivedFromOutside]);
-
-  const onMessageReceivedFromPanel = useCallback((ev: MessageEvent<{ type: string; message: string }>) => {
-    if (typeof ev.data !== "object") return;
-    if (!ev.data.type) return;
-    if (ev.data.type !== "selected-content") return;
-    if (!ev.data.message) return;
-    setSelectedContent(parseInt(ev.data.message));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener("message", onMessageReceivedFromPanel);
-    return () => window.removeEventListener("message", onMessageReceivedFromPanel);
-  }, [onMessageReceivedFromPanel]);
+  useOnMessageReceivedFromOutside(setEditorContent, setSelectedContent);
 
   const {
     editorContent: { canonicalSite, language, pageLanguages },
@@ -77,14 +51,7 @@ const FramePreview = (props: IProps) => {
     const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
 
     if (isPreview === "false" && (isDisabled === "false" || isNavigationModule)) {
-      window.parent.postMessage(
-        {
-          type: "module-click",
-          message: editorID,
-        },
-        "*"
-      );
-
+      window.parent.postMessage({ type: "module-click", message: editorID }, "*");
       setSelectedContent && setSelectedContent(editorID);
     }
   };
@@ -94,6 +61,20 @@ const FramePreview = (props: IProps) => {
   const langs = currentSiteInfo ? siteLangs : globalLangs;
   const siteID = currentSiteInfo ? currentSiteInfo.id : canonicalSite;
 
+  const deleteModuleSelected = (editorID: number) => {
+    window.parent.postMessage({ type: "module-delete", message: editorID }, "*");
+    setSelectedContent && setSelectedContent(0);
+    deleteModule(editorID);
+  };
+  const duplicateModuleSelected = (editorID: number) => {
+    window.parent.postMessage({ type: "module-duplicate", message: editorID }, "*");
+    duplicateModule(editorID);
+  };
+  const moduleActions = {
+    deleteModuleAction: deleteModuleSelected,
+    duplicateModuleAction: duplicateModuleSelected,
+  };
+
   if (isLoading) return <Loading />;
 
   return (
@@ -111,6 +92,7 @@ const FramePreview = (props: IProps) => {
         footer={currentSiteInfo && footer}
         languageID={language}
         pageLanguages={pageLanguages}
+        moduleActions={moduleActions}
         renderer={isPreview === "true" ? "preview" : "editor"}
       />
     </S.Wrapper>
@@ -127,6 +109,8 @@ interface IProps {
   isLoading: boolean;
   setSelectedContent(editorID: number): void;
   setEditorContent(editorContent: Record<string, unknown>): void;
+  deleteModule(editorID: number): void;
+  duplicateModule(editorID: number): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -142,6 +126,8 @@ const mapStateToProps = (state: IRootState) => ({
 const mapDispatchToProps = {
   setSelectedContent: pageEditorActions.setSelectedContent,
   setEditorContent: pageEditorActions.setEditorContent,
+  deleteModule: pageEditorActions.deleteModule,
+  duplicateModule: pageEditorActions.duplicateModule,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(FramePreview);

package/src/modules/GlobalEditor/Editor/index.tsx

@@ -86,8 +86,8 @@ interface IEditorStateProps {
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
   setSelectedTab(tab: string): void;
-  deleteModule(editorID: number, key: string): void;
-  duplicateModule(editorID: number, key: string): void;
+  deleteModule(editorID: number, key?: string): void;
+  duplicateModule(editorID: number, key?: string): Promise<number>;
   addComponent: (componentType: any, key: string) => void;
   addModule: (moduleType: string, selectedID: number, key: string) => void;
   moveElement(moduleID: number, selectedContent: any, newIndex: number, key: string): void;

package/src/modules/GlobalEditor/PageBrowser/index.tsx

@@ -18,18 +18,25 @@ const PageBrowser = (props: IProps) => {
     isReadOnly,
     isPreview,
     browserRef,
+    deleteModule,
+    duplicateModule,
   } = props;
 
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
   const pathWithoutSlash = path ? (path.endsWith("/") ? path.slice(0, -1) : path) : "";
   const url = `${pathWithoutSlash}${slugWithSlash}`;
 
+  const actions = {
+    deleteModuleAction: deleteModule,
+    duplicateModuleAction: duplicateModule,
+    setSelectedContentAction: setSelectedContent,
+  };
+
   return (
     <Browser
       isPage={true}
       content={props.content.editorContent}
       socials={socials}
-      setSelectedContent={setSelectedContent}
       url={url}
       theme={theme}
       cloudinaryName={cloudinaryName}
@@ -39,11 +46,12 @@ const PageBrowser = (props: IProps) => {
       isPreview={isPreview}
       showIframe={true}
       browserRef={browserRef}
+      actions={actions}
     />
   );
 };
 
-interface IEditorStateProps {
+interface IPageBrowserStateProps {
   // TODO: Define content Type
   content: any;
   socials: ISocialState;
@@ -60,11 +68,13 @@ interface IPageBrowserDispatchProps {
   isReadOnly: boolean;
   isPreview?: boolean;
   browserRef?: any;
+  deleteModule(editorID: number): void;
+  duplicateModule(editorID: number): Promise<number>;
 }
 
-type IProps = IEditorStateProps & IPageBrowserDispatchProps;
+type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;
 
-const mapStateToProps = (state: IRootState): IEditorStateProps => ({
+const mapStateToProps = (state: IRootState): IPageBrowserStateProps => ({
   content: { ...state.pageEditor.editorContent },
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
@@ -76,6 +86,8 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
 
 const mapDispatchToProps = {
   setSelectedContent: pageEditorActions.setSelectedContent,
+  deleteModule: pageEditorActions.deleteModule,
+  duplicateModule: pageEditorActions.duplicateModule,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(PageBrowser);

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/DefaultsBrowser/index.tsx

@@ -10,10 +10,10 @@ const DefaultsBrowser = (props: IProps) => {
     socials,
     cloudinaryName,
     content,
-    setSelectedContent,
     currentSiteInfo: { theme, id: siteID },
     siteLangs,
     browserRef,
+    actions,
   } = props;
 
   const updatedContent = { ...content };
@@ -24,17 +24,22 @@ const DefaultsBrowser = (props: IProps) => {
       isPage={false}
       socials={socials}
       content={updatedContent}
-      setSelectedContent={setSelectedContent}
       url={content.slug}
       theme={theme}
       cloudinaryName={cloudinaryName}
       siteLangs={siteLangs}
       siteID={siteID}
+      actions={actions}
     />
   );
 };
 
-interface IEditorStateProps {
+interface IDefaultsBrowserProps {
+  actions: any;
+  browserRef?: any;
+}
+
+interface IDefaultsBrowserStateProps {
   // TODO: Define content Type
   content: any;
   currentSiteInfo: any;
@@ -43,14 +48,13 @@ interface IEditorStateProps {
   siteLangs: ILanguage[];
 }
 
-interface IPageBrowserDispatchProps {
+interface IDefaultsBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
-  browserRef?: any;
 }
 
-type IProps = IEditorStateProps & IPageBrowserDispatchProps;
+type IProps = IDefaultsBrowserProps & IDefaultsBrowserStateProps & IDefaultsBrowserDispatchProps;
 
-const mapStateToProps = (state: IRootState): IEditorStateProps => ({
+const mapStateToProps = (state: IRootState): IDefaultsBrowserStateProps => ({
   content: { ...state.navigation.editorContent },
   currentSiteInfo: state.sites.currentSiteInfo,
   socials: state.social,

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/index.tsx

@@ -33,11 +33,12 @@ const Editor = (props: IProps) => {
     replaceModuleAction: replaceModule,
     duplicateModuleAction: duplicateModule,
     replaceElementsInCollectionAction: replaceElementsInCollection,
+    setSelectedContentAction: setSelectedContent,
   };
 
   return (
     <ResizePanel
-      leftPanel={<DefaultsBrowser browserRef={browserRef} />}
+      leftPanel={<DefaultsBrowser browserRef={browserRef} actions={actions} />}
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -72,8 +73,8 @@ interface IEditorStateProps {
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
   setSelectedTab(tab: string): void;
-  deleteModule(editorID: number, key: string): void;
-  duplicateModule(editorID: number, key: string): void;
+  deleteModule(editorID: number, key?: string): void;
+  duplicateModule(editorID: number, key?: string): Promise<number>;
   addComponent: (componentType: any, key: string) => void;
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/index.tsx

@@ -82,6 +82,7 @@ const Form = (props: IProps): JSX.Element => {
           <FieldsBehavior
             title="Image"
             name="image"
+            fullWidth={true}
             fieldType="ImageField"
             value={itemImage || null}
             onChange={setImageValue}

package/src/modules/PageEditor/Editor/index.tsx

@@ -114,8 +114,8 @@ interface IEditorStateProps {
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
   setSelectedTab(tab: string): void;
-  deleteModule(editorID: number, key: string): void;
-  duplicateModule(editorID: number, key: string): void;
+  deleteModule(editorID: number, key?: string): void;
+  duplicateModule(editorID: number, key?: string): Promise<number>;
   addComponent: (componentType: any, key: string) => void;
   addModule: (moduleType: string, selectedID: number, key: string) => void;
   moveElement(moduleID: number, selectedContent: any, newIndex: number, key: string): void;

package/src/modules/PageEditor/PageBrowser/index.tsx

@@ -21,6 +21,8 @@ const PageBrowser = (props: IProps) => {
     isReadOnly,
     isPreview,
     browserRef,
+    deleteModule,
+    duplicateModule,
   } = props;
 
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
@@ -28,6 +30,12 @@ const PageBrowser = (props: IProps) => {
   const url = `${pathWithoutSlash}${slugWithSlash}`;
   const disabled = isTemplateActivated === false || isReadOnly;
 
+  const actions = {
+    deleteModuleAction: deleteModule,
+    duplicateModuleAction: duplicateModule,
+    setSelectedContentAction: setSelectedContent,
+  };
+
   return (
     <Browser
       isPage={true}
@@ -35,7 +43,6 @@ const PageBrowser = (props: IProps) => {
       header={header}
       footer={footer}
       socials={socials}
-      setSelectedContent={setSelectedContent}
       url={url}
       theme={theme}
       cloudinaryName={cloudinaryName}
@@ -45,11 +52,12 @@ const PageBrowser = (props: IProps) => {
       isPreview={isPreview}
       showIframe={true}
       browserRef={browserRef}
+      actions={actions}
     />
   );
 };
 
-interface IEditorStateProps {
+interface IPageBrowserStateProps {
   // TODO: Define content Type
   content: any;
   currentSiteInfo: any;
@@ -66,11 +74,13 @@ interface IPageBrowserDispatchProps {
   isReadOnly: boolean;
   isPreview?: boolean;
   browserRef?: any;
+  deleteModule(editorID: number): void;
+  duplicateModule(editorID: number): Promise<number>;
 }
 
-type IProps = IEditorStateProps & IPageBrowserDispatchProps;
+type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;
 
-const mapStateToProps = (state: IRootState): IEditorStateProps => ({
+const mapStateToProps = (state: IRootState): IPageBrowserStateProps => ({
   content: { ...state.pageEditor.editorContent },
   currentSiteInfo: state.sites.currentSiteInfo,
   socials: state.social,
@@ -82,6 +92,8 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
 
 const mapDispatchToProps = {
   setSelectedContent: pageEditorActions.setSelectedContent,
+  deleteModule: pageEditorActions.deleteModule,
+  duplicateModule: pageEditorActions.duplicateModule,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(PageBrowser);

package/src/modules/PageEditor/index.tsx

@@ -141,13 +141,14 @@ const PageEditor = (props: IProps) => {
         status: pageStatus.UPLOAD_PENDING,
       };
 
-      pageID
-        ? updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-        : savePage(false, publishPage).then((isSaved: boolean) => {
-            if (isSaved) {
-              resetDirty();
-            }
-          });
+      const handleSavePage = async () => {
+        const isSaved = await savePage(false, publishPage);
+        if (isSaved) {
+          resetDirty();
+        }
+      };
+
+      pageID ? updatePageStatus([pageID], pageStatus.UPLOAD_PENDING) : await handleSavePage();
     } else {
       setNotification({ text: errorNotificationText, type: "error" });
     }

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/Field/index.tsx

@@ -19,8 +19,9 @@ const Field = (props: IField): JSX.Element => {
     theme,
   } = props;
   const { isOpen, toggleModal } = useModal();
-  const options = defaults.filter((component: any) =>
-    component.type === type && content[component.type]?.id !== component.id && !component.setAsDefault
+  const options = defaults.filter(
+    (component: any) =>
+      component.type === type && content[component.type]?.id !== component.id && !component.setAsDefault
   );
   const optionsType = `${type}s`;
 
@@ -43,9 +44,9 @@ const Field = (props: IField): JSX.Element => {
           ...(!!dataPackConfigFormData.templates && dataPackConfigFormData.templates[template]),
           ...(type === "header" && { defaultHeader: option.id }),
           ...(type === "footer" && { defaultFooter: option.id }),
-        }
+        },
       },
-    }
+    };
     updateDataPackFormValue(configFormData);
     updateEditorContent(pageEditorID, type, option.id);
     toggleModal();
@@ -53,18 +54,18 @@ const Field = (props: IField): JSX.Element => {
 
   const isDefaultNavigation = () => {
     const defaultType = type === "header" ? "defaultHeader" : "defaultFooter";
-    const templateNavigation = dataPackConfigFormData.templates && dataPackConfigFormData.templates[template]
+    const templateNavigation = dataPackConfigFormData.templates && dataPackConfigFormData.templates[template];
     const templateDefaultNavigation = templateNavigation && templateNavigation[defaultType];
     if (!templateDefaultNavigation) return true;
     const siteDefaultNavigation = defaults.find((navigation: any) => navigation.id === templateDefaultNavigation);
     return !!siteDefaultNavigation?.isDefault;
-  }
+  };
 
   const setDefault = {
     title: `Put the default ${type}`,
     action: () => handleReplace({ id: null }),
     checked: isDefaultNavigation(),
-  }
+  };
 
   const hasOptions: boolean | undefined = options?.length > 0 || !isDefaultNavigation();
 
@@ -90,18 +91,18 @@ const Field = (props: IField): JSX.Element => {
         />
       )}
     </>
-  )
-}
+  );
+};
 
 interface IField {
   type: string;
   template: string;
   defaults: any;
-  content: any,
+  content: any;
   dataPackConfigFormData: any;
   theme: string;
   updateEditorContent: (selectedEditorID: number, key: string, value: any) => void;
   updateDataPackFormValue: (value: any) => void;
 }
 
-export { Field }
+export { Field };

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { connect } from "react-redux";
 
 import { IRootState } from "@ax/types";
@@ -12,15 +12,7 @@ import Editor from "./Editor";
 import * as S from "./style";
 
 const TemplateEditor = (props: IProps) => {
-  const {
-    isLoading,
-    isSaving,
-    editorContent,
-    setHistoryPush,
-    template,
-    updateDataPack,
-    dataPackSelected,
-  } = props;
+  const { isLoading, isSaving, editorContent, setHistoryPush, template, updateDataPack, dataPackSelected } = props;
 
   const { isDirty, setIsDirty } = useIsDirty(editorContent);
 
@@ -46,13 +38,7 @@ const TemplateEditor = (props: IProps) => {
   ) : (
     <>
       <RouteLeavingGuard when={isDirty} action={goBack} text={leavingGuardText} />
-      <MainWrapper
-        title={template}
-        backLink={true}
-        rightButton={rightButtonProps}
-          fixedAppBar={true}
-        fullWidth={true}
-      >
+      <MainWrapper title={template} backLink={true} rightButton={rightButtonProps} fixedAppBar={true} fullWidth={true}>
         <ErrorToast size="l" />
         <S.Content>
           <Editor />