@griddo/ax 11.7.10 → 11.7.12-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.7.10",
+  "version": "11.7.12-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -223,5 +223,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4ce667004353325a0a481f74cab77e75ee55cd7b"
+  "gitHead": "c7e40c899abb683a6c53cbe36f1bd19135c9670e"
 }

package/src/__tests__/components/Fields/DateField/DateField.test.tsx

@@ -63,7 +63,6 @@ describe("DateField component rendering", () => {
     defaultProps.value = "01/01/2022 - 10/01/2022";
     defaultProps.mandatory = false;
     const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;
-    const handleValidationMock = defaultProps.handleValidation as jest.MockedFunction<(value: string) => void>;
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -72,7 +71,6 @@ describe("DateField component rendering", () => {
     );
 
     expect(screen.getByTestId("dateWrapper")).toBeTruthy();
-    expect(onChangeMock).toBeCalledWith("2022/01/01 - 2022/01/10");
-    expect(handleValidationMock).toBeCalled();
+    expect(screen.getByDisplayValue("01/01/2022 - 10/01/2022")).toBeTruthy();
   });
 });

package/src/__tests__/components/FloatingMenu/FloatingMenu.test.tsx

@@ -30,7 +30,7 @@ describe("FloatingMenu component rendering", () => {
     );
 
     const defaultProps: IFloatingProps = {
-      children: "<div>hola</div>",
+      children: <div>hola</div>,
       Button: buttonContent,
       isInAppBar: true,
       position: "left",
@@ -58,7 +58,7 @@ describe("FloatingMenu component rendering", () => {
     );
 
     const defaultProps: IFloatingProps = {
-      children: "<div>hola</div>",
+      children: <div>hola</div>,
       Button: buttonContent,
       isInAppBar: true,
       isCheckGroup: true,
@@ -138,7 +138,7 @@ describe("FloatingMenu component rendering", () => {
     );
 
     const defaultProps: IFloatingProps = {
-      children: "<div>hola</div>",
+      children: <div>hola</div>,
       Button: buttonContent,
       isInAppBar: true,
       isCheckGroup: true,
@@ -228,7 +228,7 @@ describe("FloatingMenu component rendering", () => {
     const buttonContent = () => <input type="checkbox" data-testid="menu-children" />;
 
     const defaultProps: IFloatingProps = {
-      children: "<div>hola</div>",
+      children: <div>hola</div>,
       Button: buttonContent,
       isInAppBar: true,
       isCheckGroup: true,
@@ -343,7 +343,7 @@ describe("FloatingMenu component rendering", () => {
     const buttonContent = () => <span data-testid="menu-children">texto</span>;
 
     const defaultProps: IFloatingProps = {
-      children: "<div>hola</div>",
+      children: <div>hola</div>,
       Button: buttonContent,
       isInAppBar: true,
       isCheckGroup: false,
@@ -458,7 +458,7 @@ describe("FloatingMenu component rendering", () => {
     const buttonContent = () => <span data-testid="menu-children">texto</span>;
 
     const defaultProps: IFloatingProps = {
-      children: "<div>hola</div>",
+      children: <div>hola</div>,
       Button: buttonContent,
       isInAppBar: true,
       isCheckGroup: false,
@@ -574,7 +574,7 @@ describe("FloatingMenu component rendering", () => {
     const buttonContent = () => <span data-testid="menu-children">texto</span>;
 
     const defaultProps: IFloatingProps = {
-      children: "<div>hola</div>",
+      children: <div>hola</div>,
       Button: buttonContent,
       isInAppBar: true,
       isCheckGroup: false,
@@ -644,7 +644,7 @@ describe("FloatingMenu component rendering", () => {
     const buttonContent = () => <span data-testid="menu-children">texto</span>;
 
     const defaultProps: IFloatingProps = {
-      children: "<div>hola</div>",
+      children: <div>hola</div>,
       Button: buttonContent,
       isInAppBar: true,
       isCheckGroup: false,

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[]]>;
 
@@ -264,4 +258,45 @@ describe("LiveFilter events", () => {
     expect(filterItemsMock).toHaveBeenCalledTimes(1);
     expect(filterItemsMock).toBeCalledWith("liveStatus", [{ label: "Offline", value: "offline" }]);
   });
+
+  it("should render live filter with filter options", async () => {
+    defaultProps.value = [{ value: "all", label: "All" }];
+    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: IQueryValue[]]>;
+    defaultProps.filterOptions = ["offline", "active", "scheduled"];
+    defaultProps.filterItems = filterItems;
+    const data = {
+      data: [
+        { id: 1, title: "Offline", status: "offline" },
+        { id: 2, title: "Publication pending", status: "upload-pending" },
+        { id: 3, title: "Live", status: "active" },
+        { id: 4, title: "Offline pending", status: "offline-pending" },
+        { id: 5, title: "Live & modified", status: "modified" },
+        { id: 6, title: "Publication scheduled", status: "scheduled" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <LiveFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const liveFilterButton = screen.getByTestId("floating-menu-button");
+    expect(liveFilterButton).toBeTruthy();
+    fireEvent.click(liveFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkGroupFieldGroup = screen.getByTestId("check-group-field-group");
+    expect(checkGroupFieldGroup).toBeTruthy();
+    const checkFieldLabels = screen.getAllByTestId("check-field-label");
+    expect(checkFieldLabels).toHaveLength(4);
+  });
 });

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

@@ -61,12 +61,6 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorID]);
 
-  useEffect(() => {
-    const { start, end } = initialDate;
-    handleOnChange([start, end]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   registerLocale("en", en);
 
   const handleOnChange = (dates: any) => {

package/src/components/Fields/IntegrationsField/SideModal/index.tsx

@@ -12,7 +12,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
   const { integrations, isOpen, toggleModal, handleClick } = props;
 
   const node = useRef<HTMLDivElement>(null);
-  const handleClickOutside = (e: React.MouseEvent) => {
+  const handleClickOutside = (e: MouseEvent) => {
     if (node.current?.contains(e.target as Node)) {
       return;
     }

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

@@ -1,8 +1,9 @@
-import React, { useState, memo } from "react";
+import React, { useState, memo, useRef } from "react";
 
 import { ILanguage, ISite } from "@ax/types";
 import AsyncCheckGroup from "@ax/components/Fields/AsyncCheckGroup";
 import CheckGroup from "@ax/components/Fields/CheckGroup";
+import { useHandleClickOutside } from "@ax/hooks";
 
 import * as S from "./style";
 
@@ -26,13 +27,24 @@ const MultiCheckSelect = (props: IMultiCheckSelectProps) => {
   } = props;
 
   const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
 
   const handleClick = () => setIsOpen(!isOpen);
 
+  const handleClickOutside = (e: MouseEvent) => {
+    if (wrapperRef.current?.contains(e.target as HTMLElement)) {
+      return;
+    }
+
+    setIsOpen(false);
+  };
+
+  useHandleClickOutside(isOpen, handleClickOutside);
+
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
   return (
-    <S.Wrapper className={className} data-testid="multi-check-select-wrapper">
+    <S.Wrapper ref={wrapperRef} className={className} data-testid="multi-check-select-wrapper">
       <S.Field isOpen={isOpen} onClick={handleClick} disabled={disabled} data-testid="field">
         {placeholder} <Asterisk />
       </S.Field>

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

@@ -72,7 +72,6 @@ const ReferenceField = (props: IReferenceFieldProps) => {
           }
         : {
             mode,
-            sources,
             fixed,
             fullRelations,
           };

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

@@ -76,6 +76,8 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
       border-radius: 0 0 4px 4px;
     }
     .fr-wrapper {
+      max-height: 50vh;
+      overflow: auto;
       border-left: 1px solid
         ${(p) =>
           p.error === true
@@ -91,6 +93,7 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
               ? p.theme.color.interactiveDisabled
               : p.theme.color.uiLine};
     }
+
     .fr-disabled {
       color: ${(p) => p.theme.color.interactiveDisabled};
     }
@@ -122,6 +125,9 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
       }
     }
   }
+  .fr-fullscreen .fr-wrapper {
+    max-height: none !important;
+  }
   .fr-inline {
     .fr-wrapper {
       background: ${(p) => p.theme.color.uiBackground02};

package/src/components/FloatingMenu/index.tsx

@@ -15,27 +15,28 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
     reactiveToHover,
     offset,
   } = props;
-  const wrapper = useRef<any>(null);
-  const button = useRef<any>(null);
-  const menuOptions = useRef<any>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const buttonRef = useRef<HTMLDivElement | null>(null);
+  const menuOptionsRef = useRef<HTMLDivElement | null>(null);
   const [isOpen, setOpen] = useState(false);
 
   useEffect(() => {
-    if (isOpen && menuOptions?.current) {
-      const bounding = menuOptions.current.children[0].getBoundingClientRect();
-      const boundingChild = menuOptions.current.children[0] && menuOptions.current.children[0].getBoundingClientRect();
+    if (isOpen && menuOptionsRef?.current) {
+      const bounding = menuOptionsRef.current.children[0].getBoundingClientRect();
+      const boundingChild =
+        menuOptionsRef.current.children[0] && menuOptionsRef.current.children[0].getBoundingClientRect();
       if (bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)) {
-        menuOptions.current.scrollIntoView({ block: "end", behavior: "smooth" });
+        menuOptionsRef.current.scrollIntoView({ block: "end", behavior: "smooth" });
       }
       if (boundingChild && boundingChild.right > window.innerWidth) {
-        menuOptions.current.style.right = "130px";
+        menuOptionsRef.current.style.right = "130px";
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
-  const handleClickOutside = (e: any) => {
-    if (wrapper.current.contains(e.target)) {
+  const handleClickOutside = (e: MouseEvent) => {
+    if (wrapperRef.current?.contains(e.target as HTMLElement)) {
       return;
     }
 
@@ -50,8 +51,8 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
-    const buttonWasClicked = button.current.contains(e.target);
-    const optionWasSelected = isOpen && menuOptions.current.contains(e.target);
+    const buttonWasClicked = buttonRef.current?.contains(e.target as HTMLElement);
+    const optionWasSelected = isOpen && menuOptionsRef.current?.contains(e.target as HTMLElement);
 
     if (buttonWasClicked) {
       setOpen(!isOpen);
@@ -71,20 +72,20 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 
   return (
     <S.Wrapper
-      ref={wrapper}
+      ref={wrapperRef}
       onClick={handleClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       data-testid="floating-menu"
     >
-      <S.ButtonWrapper ref={button} data-testid="floating-menu-button">
+      <S.ButtonWrapper ref={buttonRef} data-testid="floating-menu-button">
         <Button />
       </S.ButtonWrapper>
 
       {isOpen && (
         <S.MenuWrapper
           isInAppBar={isInAppBar}
-          ref={menuOptions}
+          ref={menuOptionsRef}
           position={position}
           offset={offset}
           data-testid="floating-menu-wrapper"
@@ -98,7 +99,7 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
 
 export interface IFloatingProps {
   children: JSX.Element | (JSX.Element | boolean | JSX.Element[])[] | boolean;
-  Button: any;
+  Button: (props?: any) => React.JSX.Element;
   isInAppBar?: boolean;
   position?: string;
   closeOnSelect?: boolean;

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

@@ -34,7 +34,7 @@ const ActionMenu = (props: any) => {
     <S.ActionMenu>
       <S.ActionMenuTitle> More actions </S.ActionMenuTitle>
       <ActionMenuBtn menu={menu} />
-      {menu && menu.options.map((item: any, i: number) => item && ActionMenuItem(item))}
+      {menu && menu.options.map((item: any) => item && ActionMenuItem(item))}
     </S.ActionMenu>
   );
 };
@@ -51,7 +51,7 @@ const ActionSimpleMenu = (props: any) => {
     menu &&
     menu.options.length > 0 && (
       <S.ActionMenu data-testid="action-simple-menu">
-        {menu.options.map((item: any, i: number) => ActionMenuItem(item, true))}
+        {menu.options.map((item: any) => ActionMenuItem(item, true))}
       </S.ActionMenu>
     )
   );

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

@@ -87,7 +87,7 @@ const AppBar = (props: IProps): JSX.Element => {
   };
 
   const LanguageBtn = () =>
-    language && (
+    language ? (
       <>
         <S.FlagWrapper data-testid="language-menu-btn">
           <Flag name={language.locale} size="24" />
@@ -95,6 +95,8 @@ const AppBar = (props: IProps): JSX.Element => {
         <S.LanguageTextWrapper data-testid="language-locale-label">{language.locale}</S.LanguageTextWrapper>
         <DownArrowButton />
       </>
+    ) : (
+      <></>
     );
 
   const ErrorCenterBtn = () => (
@@ -106,10 +108,12 @@ const AppBar = (props: IProps): JSX.Element => {
   );
 
   const StatusBtn = () =>
-    pageStatus && (
+    pageStatus ? (
       <S.StatusBtn data-testid="status-button">
         <Icon name={pageStatus} size="24" />
       </S.StatusBtn>
+    ) : (
+      <></>
     );
 
   const statusMenu = {

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, filterOptions } = 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 ((filterOptions && filterOptions.includes(newFilter.value)) || !filterOptions) {
               filters.push(newFilter);
             }
           });
@@ -112,8 +111,8 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
 export interface ILiveFilterProps {
   filterItems(pointer: string, filter: IQueryValue[]): void;
   value: IQueryValue[];
-  hasBasicStatus?: boolean;
   isSite?: boolean;
+  filterOptions?: string[];
 }
 
 export default LiveFilter;

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

@@ -531,7 +531,7 @@ const getUpdatedComponents = (editorContent: any, element: any, key: string) =>
   const mapValues = (item: any) => {
     if (item.editorID !== undefined && item.editorID === editorID) {
       if (isCollectionItem) {
-        item[key] = updateCollection(type, item[key]);
+        item[key] = updateCollection(type, item[key] || []);
       } else {
         addElement(type);
       }
@@ -553,7 +553,9 @@ const getUpdatedComponents = (editorContent: any, element: any, key: string) =>
 function addModule(
   type: string,
   key: string,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   selectedID: number,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isComponentModule?: boolean
 ): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
@@ -760,6 +762,10 @@ function replaceElementsInCollection(
     const updatedContent = replaceElements(selectedContent[key], newValue);
 
     updateEditorContent(selectedContent.editorID, key, updatedContent)(dispatch, getState);
+
+    const { editorContent } = getStateValues(getState);
+    if (!editorContent) return;
+    generateContent(editorContent)(dispatch, getState);
   };
 }
 
@@ -778,7 +784,6 @@ function generateContent(editorContent: INavigation): (dispatch: Dispatch, getSt
     dispatch(updateBreadcrumb(selectedEditorID || 0));
     dispatch(setSelectedDefaultContent(selectedContent));
     dispatch(setSelectedDefaultParentContent(selectedParent));
-    dispatch(setTab("content"));
     dispatch(setCurrentNavigationLanguages(editorContent.navigationLanguages));
     dispatch(setIsLoading(false));
   };

package/src/containers/StructuredData/actions.tsx

@@ -634,6 +634,7 @@ function resetCurrentData(): (dispatch: Dispatch) => Promise<void> {
       dispatch(setCurrentDataID(null));
       dispatch(setCurrentDataContent([]));
       dispatch(setSchema({}));
+      dispatch(setFilter("all-pages"));
       //dispatch(setCurrentSearch(""));
     } catch (e) {
       console.log("Error", e);

package/src/hooks/modals.tsx

@@ -18,7 +18,7 @@ const useModal = (initialState?: boolean, bodyBlock = true) => {
   };
 };
 
-const useHandleClickOutside = (isOpen: boolean, handleClickOutside: any) => {
+const useHandleClickOutside = (isOpen: boolean, handleClickOutside: (e: MouseEvent) => void) => {
   useEffect(() => {
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);

package/src/modules/App/Routing/NavMenu/index.tsx

@@ -5,7 +5,7 @@ import { version } from "./../../../../../package.json";
 
 import { IRouter, multisite, site } from "@ax/routes";
 
-import { ILanguage, IRootState, ISite } from "@ax/types";
+import { ILanguage, IRootState, ISite, IStructuredData } from "@ax/types";
 import { IGlobalSettings } from "@ax/containers/App/reducer";
 import { appActions } from "@ax/containers/App";
 import { Icon, Tag } from "@ax/components";
@@ -17,7 +17,17 @@ import { NavProvider } from "./context";
 import * as S from "./style";
 
 const NavMenu = (props: IProps) => {
-  const { location, setHistoryPush, logout, currentSiteInfo, siteLanguages, lang, categories, globalSettings } = props;
+  const {
+    location,
+    setHistoryPush,
+    logout,
+    currentSiteInfo,
+    siteLanguages,
+    lang,
+    categories,
+    globalSettings,
+    structuredData,
+  } = props;
 
   const { useForms } = globalSettings;
 
@@ -129,9 +139,16 @@ const NavMenu = (props: IProps) => {
   const isSitePublished = isSite && currentSiteInfo && currentSiteInfo.isPublished;
 
   if (isSite) {
-    const isSiteCategoriesAvailable = categories.site.length;
+    const isSiteCategoriesAvailable = !!categories.site.length;
     const siteCategoriesRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/sites/categories");
     config.routes[siteCategoriesRouteIdx].showInNav = isSiteCategoriesAvailable;
+  } else {
+    const isGlobalCategoriesAvailable = !!categories.global.length;
+    const isGlobalDataAvailable = !!structuredData.global.length;
+    const globalCategoriesRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/categories");
+    const globalDataRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/data");
+    config.routes[globalCategoriesRouteIdx].showInNav = isGlobalCategoriesAvailable;
+    config.routes[globalDataRouteIdx].showInNav = isGlobalDataAvailable;
   }
 
   return (
@@ -197,18 +214,25 @@ const NavMenu = (props: IProps) => {
 };
 
 interface IDispatchProps {
-  logout(): any;
+  logout(): void;
   setHistoryPush(path: string): void;
 }
 
 interface IConfig {
   routes: IRouter[];
   type: string;
-  logo: any;
+  logo: JSX.Element;
 }
 
 interface INavMenuProps {
-  categories: any;
+  categories: {
+    global: IStructuredData[];
+    site: IStructuredData[];
+  };
+  structuredData: {
+    global: IStructuredData[];
+    site: IStructuredData[];
+  };
   currentSiteInfo: ISite | null;
   siteLanguages: ILanguage[];
   lang: { locale: string; id: number };
@@ -217,6 +241,7 @@ interface INavMenuProps {
 
 const mapStateToProps = (state: IRootState) => ({
   categories: state.structuredData.categories,
+  structuredData: state.structuredData.structuredData,
   currentSiteInfo: state.sites.currentSiteInfo,
   siteLanguages: state.sites.currentSiteLanguages,
   lang: state.app.lang,

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

@@ -84,7 +84,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}
+                filterOptions={["offline", "active", "scheduled"]}
+              />
             </S.HeaderWrapper>
           )}
           {CategoryColumns}

package/src/modules/Forms/FormEditor/Editor/SideModal/SideModalOption/index.tsx

@@ -18,7 +18,7 @@ const SideModalOption = (props: IProps) => {
 
   return (
     <S.Item onClick={setOption} data-testid="side-modal-option">
-      <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />
+      {thumbnailProps && <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />}
       {label}
     </S.Item>
   );

package/src/modules/Forms/FormEditor/Editor/SideModal/SideModalOption/style.tsx

@@ -1,14 +1,17 @@
 import styled from "styled-components";
 
 const Item = styled.li`
+  ${(p) => p.theme.textStyle.uiS};
   cursor: pointer;
   padding: ${(p) => p.theme.spacing.xs};
-  padding-bottom: ${(p) => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  padding-top: ${(p) => p.theme.spacing.xs};
   margin-bottom: ${(p) => p.theme.spacing.xs};
   box-shadow: ${(p) => p.theme.shadow.shadowS};
   border-radius: ${(p) => p.theme.radii.s};
-  ${(p) => p.theme.textStyle.uiS};
   background-color: ${(p) => p.theme.color.interactiveBackground};
+  min-height: ${(p) => p.theme.spacing.l};
+  align-content: center;
   &:hover {
     background: ${(p) => p.theme.color.overlayHoverPrimary};
   }
@@ -19,7 +22,7 @@ const Item = styled.li`
 
 const Thumbnail = styled.img`
   cursor: pointer;
-  padding-bottom: ${(p) => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
 const TagWrapper = styled.div`

package/src/modules/GlobalEditor/index.tsx

@@ -80,7 +80,7 @@ const GlobalEditor = (props: IProps) => {
   const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
   const [errorPagesChecked, setErrorPagesChecked] = useState(false);
-  const [scheduleDate, setScheduleDate] = useState({ date: "", time: "12:00 am" });
+  const [scheduleDate, setScheduleDate] = useState({ date: dateToString(new Date(), "yyy/MM/dd"), time: "12:00 am" });
   const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
   const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
   const browserRef = useRef<HTMLDivElement>(null);
@@ -169,9 +169,10 @@ const GlobalEditor = (props: IProps) => {
         status: pageStatus.UPLOAD_PENDING,
       };
 
-      const isSaved = pageID
-        ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-        : await savePage(false, publishPage);
+      const isSaved =
+        pageID && !isNewTranslation
+          ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
+          : await savePage(false, publishPage);
 
       if (isSaved) {
         resetDirty();

package/src/modules/PageEditor/index.tsx

@@ -79,7 +79,7 @@ const PageEditor = (props: IProps) => {
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [selectedTab, setSelectedTab] = useState(defaultTab);
   const [notification, setNotification] = useState<INotification | null>(null);
-  const [scheduleDate, setScheduleDate] = useState({ date: "", time: "12:00 am" });
+  const [scheduleDate, setScheduleDate] = useState({ date: dateToString(new Date(), "yyy/MM/dd"), time: "12:00 am" });
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
@@ -175,9 +175,10 @@ const PageEditor = (props: IProps) => {
         status: pageStatus.UPLOAD_PENDING,
       };
 
-      const isSaved = pageID
-        ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-        : await savePage(false, publishPage);
+      const isSaved =
+        pageID && !isNewTranslation
+          ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
+          : await savePage(false, publishPage);
 
       if (isSaved) {
         resetDirty();
@@ -259,6 +260,7 @@ const PageEditor = (props: IProps) => {
   };
 
   const handleSchedulePublication = async () => {
+    console.log(scheduleDate, "scheduleDate");
     const date = new Date(`${scheduleDate.date} ${scheduleDate.time}`);
     const dateString = dateToString(date, "dd/MM/yyyy HH:mm:ss");
     const saved = await schedulePublication(dateString, isDraft);

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} filterOptions={["offline", "active"]} />
       </S.LiveHeader>
       <S.LastAccessCell>
         <LastAccessFilter sortItems={sortItems} sortedState={sortedListStatus} />

package/src/modules/Sites/SitesList/hooks.tsx

@@ -33,7 +33,10 @@ const useFilterQuery = (defaultValues?: { order: IQueryValue[]; liveStatus: IQue
 
     let filterQuery = "";
     const currentQuery = (pointer: string, values: IQueryValue[]) => {
-      return values.length && values[0].value !== "all" ? `&${pointer}=${values[0].value}` : "";
+      if (!values.length || !values[0].value || values[0].value === "all") {
+        return "";
+      }
+      return `&${pointer}=${values[0].value}`;
     };
 
     const isNotInitialValue = (pointer: keyof Record<string, IQueryValue[]>) => {

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

@@ -54,7 +54,7 @@ const Form = (props: IProps) => {
 
   const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId);
   const [notification, setNotification] = useState<INotification | null>(null);
-  const [scheduleDate, setScheduleDate] = useState({ date: "", time: "12:00 am" });
+  const [scheduleDate, setScheduleDate] = useState({ date: dateToString(new Date(), "yyy/MM/dd"), time: "12:00 am" });
   const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
   const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
   const { isDirty, resetDirty, setIsDirty } = useIsDirty(form);

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

@@ -115,7 +115,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}
+                filterOptions={["offline", "active", "scheduled"]}
+              />
             </S.HeaderWrapper>
           )}
           {CategoryColumns}