@griddo/ax 10.7.7 → 10.7.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.7.7",
+  "version": "10.7.9",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -229,5 +229,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c14eebd4f92f3bb6730b17a304b3f01091a21703"
+  "gitHead": "406e9f612d8587a5b08436e7e822bcc8782e0094"
 }

package/src/__tests__/components/TableFilters/LiveFilter/LiveFilter.test.tsx

@@ -17,7 +17,6 @@ const defaultProps = mock<ILiveFilterProps>();
 
 describe("LiveFilter component rendering", () => {
   it("should render live filter", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -53,7 +52,6 @@ describe("LiveFilter component rendering", () => {
   });
 
   it("should render the component with no options", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -91,7 +89,6 @@ describe("LiveFilter component rendering", () => {
 
 describe("LiveFilter events", () => {
   it("should render check group on click", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -132,7 +129,6 @@ describe("LiveFilter events", () => {
   });
 
   it("should check option on click", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -176,7 +172,6 @@ describe("LiveFilter events", () => {
   });
 
   it("should uncheck selected option on click and select 'All' option", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 
@@ -225,7 +220,6 @@ describe("LiveFilter events", () => {
   });
 
   it("should call filterItems action on change", async () => {
-    defaultProps.hasBasicStatus = false;
     defaultProps.value = [{ value: "all", label: "All" }];
     const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
 

package/src/components/BrowserContent/index.tsx

@@ -82,7 +82,7 @@ interface IProps {
     parentComponent: string | undefined | null,
     e: React.SyntheticEvent
   ): void;
-  selectHoverEditorID?(editorID: number): void;
+  selectHoverEditorID?(editorID: number, parentEditorID: number): void;
   moduleActions?: {
     deleteModuleAction(editorID: number): void;
     duplicateModuleAction(editorID: number): void;

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

@@ -158,6 +158,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
         preferenceLanguage: state.preferenceLanguage,
         lang: state.lang,
         site: state.site,
+        fields: state.fields,
       };
 
       onChange(newValue);
@@ -353,7 +354,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
                     <S.ConfigWrapper>
                       <S.SubConfigContent hasMargin={true}>
                         <S.OptionDescription isOpen={configState.isCustomLangOpen}>
-                          By default, content is shown in the page's language. Activate this option to{" "}
+                          By default, content is shown in the page&apos;s language. Activate this option to{" "}
                           <strong>specifically set a different language</strong> for the content shown in this
                           distributor.
                         </S.OptionDescription>

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

@@ -96,6 +96,7 @@ export interface IReferenceState {
   preferenceLanguage: boolean;
   lang?: number;
   site?: number;
+  fields?: string[];
 }
 
 export interface IRefField {
@@ -109,6 +110,7 @@ export interface IRefField {
   preferenceLanguage?: boolean;
   lang?: number;
   site?: number;
+  fields?: string[];
 }
 
 export interface IFilter {

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

@@ -14,7 +14,7 @@ const ItemList = (props: IProps) => {
   const { items, currentSite, handleListDelete, handleListMove, site } = props;
 
   const { state, setState, setReorderElements } = useReference();
-  const { fixed, selectedItems, sourceTitles, fullRelations } = state;
+  const { fixed, selectedItems, sourceTitles, fullRelations, fields } = state;
 
   const getParams = useCallback(() => {
     const params = {
@@ -22,6 +22,7 @@ const ItemList = (props: IProps) => {
       fixed: items,
       fullRelations,
       site,
+      fields,
     };
 
     return params;

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

@@ -94,8 +94,8 @@ const ManualPanel = (props: IProps) => {
     setState((state: IReferenceState) => ({ ...state, showSelected: !state.showSelected }));
 
   const handleAdd = () => {
-    const { mode, fixed, fullRelations, site, lang } = state;
-    const newValue = { mode, fixed, fullRelations, site, lang };
+    const { mode, fixed, fullRelations, site, lang, fields } = state;
+    const newValue = { mode, fixed, fullRelations, site, lang, fields };
     onChange(newValue);
     handleValidation && handleValidation(state.fixed, validators);
   };

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

@@ -45,7 +45,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   const isAuto = mode === "auto";
   const hasMaxItems = !!(value && value.fixed && maxItems && !isAuto && value.fixed.length >= maxItems);
   const sourcesIDs = sources.map((source: ISource) => source.structuredData);
-  const { fixed, order, quantity, allLanguages, preferenceLanguage, fullRelations = false } = state;
+  const { fixed, order, quantity, allLanguages, preferenceLanguage, fullRelations = false, fields } = state;
 
   const handleMode = (mode: string) => {
     const manualSources: string[] = state.selectedItems.reduce(
@@ -69,12 +69,14 @@ const ReferenceField = (props: IReferenceFieldProps) => {
             fullRelations,
             allLanguages,
             preferenceLanguage,
+            fields,
           }
         : {
             mode,
             sources,
             fixed,
             fullRelations,
+            fields,
           };
     onChange(newValue);
     setModeAndSource(mode, mappedSources);
@@ -134,6 +136,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
       mode,
       fixed,
       fullRelations,
+      fields,
     };
     onChange(newValue);
     resetValidation && resetValidation();
@@ -144,6 +147,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
       mode,
       fixed,
       fullRelations,
+      fields,
     };
     onChange(newValue);
   };

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import FroalaEditor from "react-froala-wysiwyg";
+import FroalaEditorComponent from "react-froala-wysiwyg";
 import { decodeEntities } from "@ax/helpers";
 import { IImage, ISite, IRootState } from "@ax/types";
 import { galleryActions } from "@ax/containers/Gallery";
@@ -40,6 +40,7 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
     },
     events: {
       initialized() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
         if (disabled) {
           setTimeout(() => {
@@ -48,12 +49,18 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
         }
       },
       "image.beforeUpload": async function (images: FileList) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
-        const { url } = await uploadImage(images[0], imageSite);
-        editor.image.insert(url, true, null, editor.image.get(), null);
+        const response = await uploadImage(images[0], imageSite);
+        if (response) {
+          editor.image.insert(response.url, null, null, editor.image.get());
+        } else {
+          editor.image.remove(editor.image.get());
+        }
         return false;
       },
       blur: function () {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
         const html = editor.html.get();
         const stripedHtml = decodeEntities(html);
@@ -66,7 +73,7 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 
   return (
     <S.EditorWrapper error={error} disabled={disabled} data-testid="wysiwyg-wrapper">
-      <FroalaEditor tag="textarea" model={value} config={config} onModelChange={handleChange} />
+      <FroalaEditorComponent tag="textarea" model={value} config={config} onModelChange={handleChange} />
     </S.EditorWrapper>
   );
 };

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

@@ -82,6 +82,8 @@ const AppBar = (props: IProps): JSX.Element => {
       setLangSelected(item);
       toggleModal();
       return;
+    } else {
+      isOpen && toggleModal();
     }
     if (!languageActions || !languageActions.setLanguage) return;
 

package/src/components/TableFilters/LiveFilter/index.tsx

@@ -8,7 +8,7 @@ import { IFilterValue, IPageLiveStatus, IQueryValue } from "@ax/types";
 import * as S from "./style";
 
 const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
-  const { filterItems, value, hasBasicStatus } = props;
+  const { filterItems, value, statusOptions } = props;
 
   const filters: IFilterValue[] = [
     {
@@ -24,7 +24,6 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
   const parsedValue = Array.isArray(value) && value.length ? value.map((value) => value.value) : initialState;
   const [selectedValue, setSelectedValue] = useState(parsedValue);
   const [options, setOptions] = useState(filters);
-  const basicStatus = ["offline", "active", "scheduled"];
 
   useEffect(() => {
     const parsedValue = Array.isArray(value) && value.length ? value.map((value) => value.value) : initialState;
@@ -55,7 +54,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
               title: item.title,
               icon: item.status,
             };
-            if ((hasBasicStatus && basicStatus.includes(newFilter.value)) || !hasBasicStatus) {
+            if ((Array.isArray(statusOptions) && statusOptions.includes(newFilter.value)) || !statusOptions) {
               filters.push(newFilter);
             }
           });
@@ -112,7 +111,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
 export interface ILiveFilterProps {
   filterItems(pointer: string, filter: IQueryValue[]): void;
   value: IQueryValue[];
-  hasBasicStatus?: boolean;
+  statusOptions?: string[];
   isSite?: boolean;
 }
 

package/src/containers/Navigation/Menu/actions.tsx

@@ -13,6 +13,7 @@ import {
   SET_MENU_FORM_DATA,
   SET_ORIGINAL_MENU,
   SET_TOTAL_ITEMS,
+  SET_CURRENT_MENU,
 } from "./constants";
 import {
   ISetSavedMenus,
@@ -22,6 +23,7 @@ import {
   ISetMenuForm,
   ISetSavedMenu,
   ISetTotalItems,
+  ISetCurrentMenu,
 } from "./interfaces";
 import { menuInitialState } from "./reducer";
 
@@ -70,8 +72,12 @@ function setTotalItems(totalItems: number): ISetTotalItems {
   return { type: SET_TOTAL_ITEMS, payload: { totalItems } };
 }
 
+function setCurrentMenu(currentMenu: string): ISetCurrentMenu {
+  return { type: SET_CURRENT_MENU, payload: { currentMenu } };
+}
+
 const getStateValues = (getState: any) => {
-  const { savedMenus, savedMenu, editorMenu, id, type } = getState().menu;
+  const { savedMenus, savedMenu, editorMenu, id, currentMenu } = getState().menu;
   const { currentSiteInfo } = getState().sites;
   const { isSaving, isLoading, lang } = getState().app;
 
@@ -80,7 +86,7 @@ const getStateValues = (getState: any) => {
     savedMenu,
     editorMenu,
     id,
-    type,
+    currentMenu,
     currentSiteInfo,
     isLoading,
     isSaving,
@@ -102,13 +108,13 @@ function setEditorMenuContent(menus: IMenu[], menuType: string, dispatch: Dispat
 function getMenus(): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
     try {
-      const { currentSiteInfo, type } = getStateValues(getState);
+      const { currentSiteInfo, currentMenu } = getStateValues(getState);
       const id = currentSiteInfo && currentSiteInfo.id;
 
       const responseActions = {
         handleSuccess: (menus: IMenu[]) => {
           dispatch(setSavedMenus(menus));
-          setEditorMenuContent(menus, type, dispatch);
+          setEditorMenuContent(menus, currentMenu, dispatch);
           updateTotalItems(dispatch, getState);
         },
         handleError: () => console.log("Error en getMenus"),
@@ -228,7 +234,7 @@ function deleteMenuItem(
 function updateMenu(): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
     try {
-      const { savedMenu, editorMenu, type, id, currentSiteInfo } = getStateValues(getState);
+      const { savedMenu, editorMenu, currentMenu, id, currentSiteInfo } = getStateValues(getState);
       const editorMenuClean = removeMenuEditorIds(editorMenu.elements);
       savedMenu.elements = editorMenuClean;
 
@@ -238,7 +244,7 @@ function updateMenu(): (dispatch: Dispatch, getState: any) => Promise<void> {
           const updatedMenusResponse = await menus.getMenus(currentSiteId);
           const updatedMenus = updatedMenusResponse.data;
           dispatch(setSavedMenus(updatedMenus));
-          setEditorMenuContent(updatedMenus, type, dispatch);
+          setEditorMenuContent(updatedMenus, currentMenu, dispatch);
         },
         handleError: () => console.log("Error en updateMenu"),
       };
@@ -328,4 +334,5 @@ export {
   resetMenuValues,
   reorderMenu,
   updateFormValue,
+  setCurrentMenu,
 };

package/src/containers/Navigation/Menu/constants.tsx

@@ -7,3 +7,4 @@ export const SET_ID: string = `${NAME}/SET_ID`;
 export const SET_ITEM: string = `${NAME}/SET_ITEM`;
 export const SET_MENU_FORM_DATA: string = `${NAME}/SET_MENU_FORM_DATA`;
 export const SET_TOTAL_ITEMS: string = `${NAME}/SET_TOTAL_ITEMS`;
+export const SET_CURRENT_MENU: string = `${NAME}/SET_CURRENT_MENU`;

package/src/containers/Navigation/Menu/interfaces.tsx

@@ -6,6 +6,7 @@ import {
   SET_ID,
   SET_ITEM,
   SET_MENU_FORM_DATA,
+  SET_CURRENT_MENU,
 } from "./constants";
 
 export interface ISetSavedMenus {
@@ -43,4 +44,9 @@ export interface ISetTotalItems {
   payload: { totalItems: number };
 }
 
+export interface ISetCurrentMenu {
+  type: typeof SET_CURRENT_MENU;
+  payload: { currentMenu: string };
+}
+
 export type MenuActionsCreators = ISetSavedMenus & ISetEditorMenu & ISetItem & ISetTotalItems;

package/src/containers/Navigation/Menu/reducer.tsx

@@ -6,6 +6,7 @@ import {
   SET_ITEM,
   SET_MENU_FORM_DATA,
   SET_TOTAL_ITEMS,
+  SET_CURRENT_MENU,
 } from "./constants";
 
 import { MenuActionsCreators } from "./interfaces";
@@ -19,6 +20,7 @@ export interface IMenuState {
   item: IMenuItem | null;
   form: IMenuForm;
   totalItems: number;
+  currentMenu: string;
 }
 
 const initialState = {
@@ -37,6 +39,7 @@ const initialState = {
     footerStyle: "",
   },
   totalItems: 0,
+  currentMenu: "",
 };
 
 function reducer(state = initialState, action: MenuActionsCreators): IMenuState {
@@ -48,6 +51,7 @@ function reducer(state = initialState, action: MenuActionsCreators): IMenuState
     case SET_ITEM:
     case SET_MENU_FORM_DATA:
     case SET_TOTAL_ITEMS:
+    case SET_CURRENT_MENU:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/forms/editor.tsx

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

package/src/helpers/schemas.tsx

@@ -1,6 +1,6 @@
 import { schemas, moduleCategories } from "components";
 import { sortBy } from "@ax/helpers";
-import { ModuleCategoryInfo } from "@ax/types";
+import { ISchema, ModuleCategoryInfo } from "@ax/types";
 import { pageSchemas } from "@ax/schemas";
 
 const allSchemas = { ...schemas.all, ...pageSchemas };
@@ -54,9 +54,9 @@ const getTemplateThumbnails = (name: string, theme?: string) => {
 
 const getDataPackSchema = (name: string) => schemas.dataPacks[name];
 
-const getDisplayName = (component: string) => {
-  const schema = getSchema(component);
-  return schema?.displayName;
+const getDisplayName = (component: string): string => {
+  const schema: ISchema = getSchema(component);
+  return schema?.displayName || "";
 };
 
 const getSchemaType = (component: string) => {

package/src/modules/Content/BulkHeader/TableHeader/index.tsx

@@ -76,7 +76,11 @@ const TableHeader = (props: IProps): JSX.Element => {
           </S.NameWrapper>
           {activeColumns.includes("live") && (
             <S.HeaderWrapper>
-              <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} hasBasicStatus={true} />
+              <LiveFilter
+                filterItems={filterItems}
+                value={filterValues.liveStatus}
+                statusOptions={["offline", "active", "scheduled"]}
+              />
             </S.HeaderWrapper>
           )}
           {CategoryColumns}

package/src/modules/FramePreview/index.tsx

@@ -52,8 +52,12 @@ const FramePreview = (props: IProps) => {
     }
   };
 
-  const selectHoverEditorID = (editorID: number) =>
-    window.parent.postMessage({ type: "module-scroll", message: editorID }, "*");
+  const selectHoverEditorID = (editorID: number, parentEditorID: number) => {
+    const { parent } = findByEditorID(content, parentEditorID);
+    if (parent.parentEditorID === 0) {
+      window.parent.postMessage({ type: "module-scroll", message: editorID }, "*");
+    }
+  };
 
   const globalTheme = getDefaultTheme();
   const theme = currentSiteInfo ? currentSiteInfo.theme : globalTheme;

package/src/modules/Navigation/Menus/List/Nav/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import { NavLink } from "react-router-dom";
 
@@ -12,19 +12,27 @@ import * as S from "./style";
 const Nav = (props: INav): JSX.Element => {
   const { getCurrentMenu, currentType, setCurrentType, isDirty, currentMenus } = props;
   const { isOpen, toggleModal } = useModal();
+  const [oldType, setOldType] = useState(currentType);
 
   const discardChanges = () => {
+    setOldType(currentType);
     getCurrentMenu(currentType);
     toggleModal();
   };
 
+  const handleClose = () => {
+    setCurrentType(oldType);
+    toggleModal();
+  };
+
   return (
     <>
-      <GuardModal isOpen={isOpen} discardChanges={discardChanges} toggleModal={toggleModal} />
+      <GuardModal isOpen={isOpen} discardChanges={discardChanges} toggleModal={handleClose} />
       <SubNav>
         {currentMenus &&
           currentMenus.map((category: any, index: number) => {
             const _handleClick = () => {
+              isDirty ? setOldType(currentType) : setOldType(category.name);
               setCurrentType(category.name);
               isDirty ? toggleModal() : getCurrentMenu(category.name);
             };

package/src/modules/Navigation/Menus/List/index.tsx

@@ -1,11 +1,10 @@
-import React, { useEffect, useCallback, memo, useState } from "react";
+import React, { useEffect, useCallback, memo } from "react";
 import { connect } from "react-redux";
 
 import { IGetSitePagesParams, IRootState, IMenuItem } from "@ax/types";
 
 import { sitesActions } from "@ax/containers/Sites";
 import { menuActions } from "@ax/containers/Navigation";
-import { useShouldBeSaved } from "./helpers";
 import { setIsSavedData } from "@ax/forms";
 
 import Nav from "./Nav";
@@ -13,16 +12,12 @@ import Table from "./Table";
 import * as S from "./style";
 
 const List = (props: IMenuList): JSX.Element => {
-  const { getMenus, lang, getSitePages, currentSiteID, editorMenu, savedMenu, savedMenus } = props;
+  const { getMenus, lang, getSitePages, currentSiteID, savedMenus, currentMenu, setCurrentMenu, isDirty } = props;
 
   if (!currentSiteID) {
     throw new Error(`ERROR: User reached Menu List with null site info`);
   }
 
-  const initialState = savedMenus && savedMenus.length ? savedMenus[0].name : "";
-  const [currentType, setCurrentType] = useState(initialState);
-
-  const { isDirty } = useShouldBeSaved(editorMenu, savedMenu, currentType);
   const memoizedGetMenus = useCallback(() => getMenus(), [getMenus]);
   const memoizedGetSitePages = useCallback(
     (params: IGetSitePagesParams) => {
@@ -31,6 +26,11 @@ const List = (props: IMenuList): JSX.Element => {
     [getSitePages]
   );
 
+  useEffect(() => {
+    const initialState = savedMenus && savedMenus.length ? savedMenus[0].name : "";
+    setCurrentMenu(initialState);
+  }, []);
+
   useEffect(() => {
     const params = {
       siteID: currentSiteID,
@@ -45,7 +45,7 @@ const List = (props: IMenuList): JSX.Element => {
 
   return (
     <S.ListWrapper>
-      <Nav isDirty={isDirty} currentType={currentType} setCurrentType={setCurrentType} />
+      <Nav isDirty={isDirty} currentType={currentMenu} setCurrentType={setCurrentMenu} />
       <S.TableWrapper>
         <Table isDirty={isDirty} />
       </S.TableWrapper>
@@ -56,27 +56,28 @@ const List = (props: IMenuList): JSX.Element => {
 const mapStateToProps = (state: IRootState) => ({
   currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   lang: state.app.lang,
-  editorMenu: state.menu.editorMenu.elements,
-  savedMenu: state.menu.savedMenu.elements,
   savedMenus: state.menu.savedMenus,
+  currentMenu: state.menu.currentMenu,
 });
 
 const mapDispatchToProps = {
   getMenus: menuActions.getMenus,
   getSitePages: sitesActions.getSitePages,
+  setCurrentMenu: menuActions.setCurrentMenu,
 };
 
 interface IStateProps {
   currentSiteID: number | null;
   lang: { locale: string; id: number | null };
-  editorMenu: IMenuItem[] | undefined;
-  savedMenu: IMenuItem[] | undefined;
   savedMenus: IMenuItem[] | null;
+  currentMenu: string;
+  isDirty: boolean;
 }
 
 interface IDispatchProps {
   getMenus(): void;
-  getSitePages(params: IGetSitePagesParams): any;
+  getSitePages(params: IGetSitePagesParams): Promise<void>;
+  setCurrentMenu(currentMenu: string): void;
 }
 
 type IMenuList = IStateProps & IDispatchProps;

package/src/modules/Navigation/Menus/index.tsx

@@ -3,16 +3,18 @@ import { connect } from "react-redux";
 
 import { menuActions } from "@ax/containers/Navigation";
 import { appActions } from "@ax/containers/App";
-import { IRootState } from "@ax/types";
+import { ILanguage, IMenuItem, IRootState } from "@ax/types";
 import { setIsSavedData } from "@ax/forms";
 import { MainWrapper } from "@ax/components";
 import { usePermission } from "@ax/hooks";
 
+import { useShouldBeSaved } from "./helpers";
 import List from "./List";
 
 const MenuView = (props: IMenus) => {
-  const { updateMenu, setLanguage, isSaving, lang, siteLanguages } = props;
+  const { updateMenu, setLanguage, isSaving, lang, siteLanguages, editorMenu, savedMenu, currentMenu } = props;
 
+  const { isDirty } = useShouldBeSaved(editorMenu, savedMenu, currentMenu);
   const isAllowedToMangageMenus = usePermission("navigation.manageSiteMenu");
 
   const saveMenu = () => {
@@ -22,8 +24,8 @@ const MenuView = (props: IMenus) => {
 
   const rightButtonProps = isAllowedToMangageMenus
     ? {
-        label: isSaving ? "Saving" : "Save",
-        disabled: isSaving,
+        label: isSaving ? "Saving" : isDirty ? "Save" : "Saved",
+        disabled: isSaving || !isDirty,
         action: saveMenu,
       }
     : undefined;
@@ -39,8 +41,9 @@ const MenuView = (props: IMenus) => {
       language={lang}
       availableLanguages={siteLanguages}
       languageActions={languageActions}
+      isDirty={isDirty}
     >
-      <List />
+      <List isDirty={isDirty} />
     </MainWrapper>
   );
 };
@@ -49,6 +52,9 @@ const mapStateToProps = (state: IRootState) => ({
   isSaving: state.app.isSaving,
   lang: state.app.lang,
   siteLanguages: state.sites.currentSiteLanguages,
+  editorMenu: state.menu.editorMenu.elements,
+  savedMenu: state.menu.savedMenu.elements,
+  currentMenu: state.menu.currentMenu,
 });
 
 const mapDispatchToProps = {
@@ -59,7 +65,10 @@ const mapDispatchToProps = {
 interface IStateProps {
   isSaving: boolean;
   lang: { locale: string; id: number | null };
-  siteLanguages: any[];
+  siteLanguages: ILanguage[];
+  editorMenu: IMenuItem[] | undefined;
+  savedMenu: IMenuItem[] | undefined;
+  currentMenu: string;
 }
 
 interface IDispatchProps {

package/src/modules/Sites/SitesList/ListView/BulkHeader/TableHeader/index.tsx

@@ -49,7 +49,7 @@ const TableHeader = (props: IProps): JSX.Element => {
       </S.NameWrapper>
       <S.DomainHeader>Domain</S.DomainHeader>
       <S.LiveHeader>
-        <LiveFilter filterItems={filterItems} value={liveFilterValue} hasBasicStatus={true} />
+        <LiveFilter filterItems={filterItems} value={liveFilterValue} statusOptions={["offline", "active"]} />
       </S.LiveHeader>
       <S.LastAccessCell>
         <LastAccessFilter sortItems={sortItems} sortedState={sortedListStatus} />

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

@@ -107,7 +107,11 @@ const TableHeader = (props: IProps): JSX.Element => {
           </S.NameWrapper>
           {activeColumns.includes("live") && (
             <S.HeaderWrapper>
-              <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} hasBasicStatus={true} />
+              <LiveFilter
+                filterItems={filterItems}
+                value={filterValues.liveStatus}
+                statusOptions={["offline", "active", "scheduled"]}
+              />
             </S.HeaderWrapper>
           )}
           {CategoryColumns}

package/src/types/index.tsx

@@ -160,6 +160,7 @@ export interface ISchema {
   type?: string;
   configTabs: ISchemaTab[];
   schemaType: string;
+  displayName: string;
 }
 
 export interface ISchemaTab {