@griddo/ax 11.10.18 → 11.10.20

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.10.18",
+	"version": "11.10.20",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c46c1b9a165b95f927130025ae823bd96da7db4f"
+	"gitHead": "cc4cb47324099928259991fc63e6a516679c83db"
 }

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

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from "react";
-import { InputActionMeta } from "react-select";
+import { useEffect, useRef, useState } from "react";
+import { components } from "react-select";
+import type { GroupBase, InputActionMeta, OptionsOrGroups } from "react-select";
 
 import { isReqOk } from "@ax/helpers";
 import { selects, checkgroups } from "@ax/api";
-import { ILanguage, IPage, ISite } from "@ax/types";
+import type { ILanguage, IPage, ISite } from "@ax/types";
 
 import * as S from "./style";
 
@@ -38,9 +39,13 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 	};
 
 	const [state, setState] = useState(initialState);
+	const menuRef = useRef<HTMLDivElement | null>(null);
+
 
 	const isPage = entity === "pages";
 	const isCategories = entity === "categories";
+	const className = error ? `react-select-error ${type}` : type;
+	const isSearchable = type !== "inline";
 
 	const languagesIds = Array.isArray(contentLanguages)
 		? languages?.filter((lang) => contentLanguages.includes(lang.locale)).map((lang) => lang.id)
@@ -56,7 +61,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 				if (entity) {
 					let result = null;
 					if (site && !isCategories) {
-						const fullOptions = languagesIds && languagesIds.length ? { ...options, languagesIds } : options;
+						const fullOptions = languagesIds?.length ? { ...options, languagesIds } : options;
 						result =
 							isPage && selectedContent
 								? await selects.getSelectSiteItems(site.id, entity, fullOptions, selectedContent.id)
@@ -80,7 +85,6 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 					}
 				}
 			} catch (e) {
-				// biome-ignore lint/suspicious/noConsole: TODO: fix this
 				console.log(e);
 			}
 			return data;
@@ -97,7 +101,6 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 					: optionValues;
 				if (isMounted) setState((state) => ({ ...state, items: filteredOptions }));
 			})
-			// biome-ignore lint/suspicious/noConsole: TODO: fix this
 			.catch((apiError) => console.log(apiError));
 		return () => {
 			isMounted = false;
@@ -121,21 +124,45 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 		}
 	};
 
-	const loadOptions = (inputValue: string, callback: any) => {
+	const loadOptions = (inputValue: string, callback: (options: OptionsOrGroups<unknown, GroupBase<unknown>>) => void) => {
 		setTimeout(() => {
 			callback(filterOptions(inputValue));
 		}, 0);
 	};
 
-	const getObjectValue = (val: any, options: IOption[]) => {
+	const getObjectValue = (val: string | number | null | undefined, options: IOption[]) => {
 		const fixedVal = Array.isArray(val) ? val[0] : val;
 		const selectedValue = fixedVal && typeof fixedVal === "object" ? fixedVal.id : fixedVal;
 
-		return options && options.find((option: IOption) => option.value === selectedValue);
+		return options?.find((option: IOption) => option.value === selectedValue);
 	};
 
-	const className = error ? `react-select-error ${type}` : type;
-	const searchable = type === "inline" ? false : true;
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (!menuRef.current || isSearchable) return;
+
+    const char = e.key.toLowerCase();
+    if (!/^[a-z]$/i.test(char)) return;
+
+    const optionNodes = menuRef.current.querySelectorAll<HTMLDivElement>(
+      ".react-select__option"
+    );
+
+    const targetNode = Array.from(optionNodes).find((node) =>
+      node.innerText.trim().toLowerCase().startsWith(char)
+    );
+
+    if (targetNode) {
+      targetNode.scrollIntoView({
+        block: "nearest",
+      });
+    }
+  };
+
+	const Menu = (menuProps: any) => (
+    <div ref={menuRef}>
+      <components.Menu {...menuProps} />
+    </div>
+  );
 
 	return (
 		<div data-testid="asyncSelect">
@@ -153,9 +180,11 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 				className={className}
 				required={mandatory}
 				isClearable={false}
-				isSearchable={searchable}
+				isSearchable={isSearchable}
 				maxWidth={maxWidth}
 				inputValue={state.inputText}
+				components={{ Menu }}
+				onKeyDown={handleKeyDown}
 			/>
 		</div>
 	);

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

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
-import { InputActionMeta } from "react-select";
+import { useRef, useState } from "react";
+import type { InputActionMeta } from "react-select";
+import { components } from "react-select";
 
 import * as S from "./style";
 
@@ -19,11 +20,16 @@ const Select = (props: ISelectProps): JSX.Element => {
 		alignRight,
 		maxWidth,
 	} = props;
+
 	const className = error ? `react-select-error ${type}` : type;
 	const emptyOption = { value: "", label: placeholder || "Empty" };
+	const isSearchable = !(type === "inline" || type === "mini" );
+
 
 	const [hasEmptyOption, setHasEmptyOption] = useState(!mandatory);
 	const [inputText, setInputText] = useState<string>("");
+	const menuRef = useRef<HTMLDivElement | null>(null);
+
 
 	const optionValues: IOptionProps[] = hasEmptyOption ? [emptyOption, ...options] : options;
 
@@ -37,10 +43,35 @@ const Select = (props: ISelectProps): JSX.Element => {
 		}
 	};
 
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (!menuRef.current || isSearchable) return;
+
+    const char = e.key.toLowerCase();
+    if (!/^[a-z]$/i.test(char)) return;
+
+    const optionNodes = menuRef.current.querySelectorAll<HTMLDivElement>(
+      ".react-select__option"
+    );
+
+    const targetNode = Array.from(optionNodes).find((node) =>
+      node.innerText.trim().toLowerCase().startsWith(char)
+    );
+
+    if (targetNode) {
+      targetNode.scrollIntoView({
+        block: "nearest",
+      });
+    }
+  };
+
 	const getObjectValue = (value: string | undefined, options: IOptionProps[]) =>
 		options.find((option) => option.value === value);
 
-	const searchable = type === "inline" || type === "mini" ? false : true;
+	const Menu = (menuProps: any) => (
+			<div ref={menuRef}>
+				<components.Menu {...menuProps} />
+			</div>
+		);
 
 	return (
 		<div data-testid="select-component">
@@ -56,13 +87,15 @@ const Select = (props: ISelectProps): JSX.Element => {
 				classNamePrefix="react-select"
 				error={error}
 				onChange={handleChange}
-				isSearchable={searchable}
+				isSearchable={isSearchable}
 				isClearable={false}
 				onInputChange={handleInputChange}
 				alignRight={alignRight}
 				aria-label={name}
 				maxWidth={maxWidth}
 				inputValue={inputText}
+				components={{ Menu }}
+				onKeyDown={handleKeyDown}
 			/>
 		</div>
 	);

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

@@ -59,7 +59,7 @@ const buttons = [
 const inlineToolbar = ["langDropdown", "undo", "redo"];
 
 const wysiwygConfig = {
-	key: process.env.REACT_APP_FROALA_KEY,
+	key: process.env.GRIDDO_FROALA_KEY || process.env.REACT_APP_FROALA_KEY,
 	// pastePlain: false,
 	pasteDeniedAttrs: ["class", "id", "style", "dir"],
 	listAdvancedTypes: false,
@@ -110,10 +110,8 @@ FroalaEditor.RegisterCommand("langDropdown", {
 	undo: true,
 	focus: true,
 	refreshAfterCallback: true,
-	html: function () {
-		return getLanguageMenuHtml(richTextConfig?.editorLangs ? richTextConfig.editorLangs : languages);
-	},
-	callback: function (cmd: any, val: string) {
+	html: () => getLanguageMenuHtml(richTextConfig?.editorLangs ? richTextConfig.editorLangs : languages),
+	callback: function (_cmd: any, val: string) {
 		const html = this.selection.text();
 		if (val !== "") {
 			this.html.insert(`<span lang="${val}" translate="no">${html}</span>`, true);

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

@@ -1,9 +1,8 @@
-import React from "react";
 import { connect } from "react-redux";
 import FroalaEditorComponent from "react-froala-wysiwyg";
 import FroalaEditor from "froala-editor";
 import { decodeEntities } from "@ax/helpers";
-import { IImage, ISite, IRootState } from "@ax/types";
+import type { IImage, ISite, IRootState } from "@ax/types";
 import { galleryActions } from "@ax/containers/Gallery";
 
 import { wysiwygConfig, buttons, buttonsFull, inlineToolbar } from "./config";
@@ -40,7 +39,7 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 		toolbarButtons: inline ? inlineToolbar : full ? buttonsFull : buttons,
 		toolbarInline: inline,
 		charCounterCount: !inline,
-		imageUpload: full && !inline ? true : false,
+		imageUpload: !!(full && !inline ),
 		multiLine: !inline,
 		enter: inline ? FroalaEditor.ENTER_BR : FroalaEditor.ENTER_P,
 		requestHeaders: {
@@ -70,7 +69,7 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 				const editor: any = this;
 				const html = editor.html.get();
 				const stripedHtml = decodeEntities(html);
-				handleValidation && handleValidation(stripedHtml);
+				handleValidation?.(stripedHtml);
 			},
 		},
 	};

package/src/components/OcassionalToast/index.tsx

@@ -1,16 +1,15 @@
-import React from "react";
 import { createPortal } from "react-dom";
 import { Icon } from "@ax/components";
 
 import * as S from "./style";
 
 const OcassionalToast = (props: IOcassionalToastProps): JSX.Element => {
-	const { message } = props;
+	const { message, icon = "alert" } = props;
 
 	return createPortal(
 		<S.Wrapper data-testid="occasional-toast-wrapper">
 			<S.IconWrapper>
-				<Icon name="alert" />
+				<Icon name={icon} />
 			</S.IconWrapper>
 			<S.Text data-testid="occasional-toast-message">{message}</S.Text>
 		</S.Wrapper>,
@@ -20,6 +19,7 @@ const OcassionalToast = (props: IOcassionalToastProps): JSX.Element => {
 
 export interface IOcassionalToastProps {
 	message: string;
+	icon?: string;
 }
 
 export default OcassionalToast;

package/src/components/OcassionalToast/style.tsx

@@ -3,9 +3,10 @@ import styled from "styled-components";
 const Wrapper = styled.div`
   position: fixed;
   display: flex;
-  background: ${(p) => p.theme.color.uiMainMenuBackground};
+  background: ${(p) => p.theme.color.uiBackground04};
   justify-content: space-between;
   align-items: center;
+  border: 1px solid ${(p) => p.theme.color.borderInverse};
   border-radius: ${(p) => p.theme.radii.s};
   z-index: 2000;
   bottom: ${(p) => p.theme.spacing.m};

package/src/components/SearchField/index.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@ax/components";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Select } from "../Fields";
 
 import * as S from "./style";
@@ -19,7 +19,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
 		value,
 	} = props;
 
-	const [isOpen, setIsOpen] = useState(value && value.trim() !== "" ? true : false);
+	const [isOpen, setIsOpen] = useState(!!(value && value.trim() !== "" ));
 	const [inputValue, setInputValue] = useState(value || "");
 	const [selectValue, setSelectValue] = useState<string>("");
 	const inputRef = useRef<HTMLInputElement | null>(null);
@@ -71,14 +71,14 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
 
 	const handleSelectChange = (value: string) => {
 		setSelectValue(value);
-		onFilterChange && onFilterChange(value);
+		onFilterChange?.(value);
 	};
 
 	return (
 		<S.Wrapper data-testid="search-field-wrapper">
 			{showField ? (
 				<S.FieldWrapper closeOnInactive={closeOnInactive} disabled={disabled} data-testid="field-wrapper">
-					{searchFilters && searchFilters.length && (
+					{searchFilters?.length && (
 						<>
 							<S.FilterWrapper data-testid="filter-wrapper">
 								<Select

package/src/containers/PageEditor/actions.tsx

@@ -1,4 +1,4 @@
-import { Dispatch } from "redux";
+import type { Dispatch } from "redux";
 
 import {
 	isReqOk,
@@ -75,7 +75,7 @@ import {
 	SET_SCROLL_EDITOR_ID,
 } from "./constants";
 
-import {
+import type {
 	IPage,
 	ISavePageParams,
 	IBreadcrumbItem,
@@ -90,7 +90,7 @@ import {
 	IRootState,
 	IGetSitePagesParams,
 } from "@ax/types";
-import {
+import type {
 	ISetBreadcrumb,
 	ISetSchema,
 	ISetTab,
@@ -110,7 +110,6 @@ import {
 	ISetValidated,
 	ISetSitePageID,
 	ISetUserEditing,
-	pageStatus,
 	ISetLastElementAddedId,
 	ISetCopyModule,
 	ISetIsIATranslated,
@@ -119,6 +118,8 @@ import {
 	ISetScrollEditorID,
 } from "./interfaces";
 
+import { pageStatus } from "./interfaces";
+
 const { setIsLoading, setIsSaving, handleError } = appActions;
 const { getDefaults } = navigationActions;
 
@@ -353,12 +354,12 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
 				const { liveStatus, component } = getDefaultSchema(baseSchema);
 
 				if (isNewTranslation) {
-					page["liveStatus"] = liveStatus;
-					page["canBeTranslated"] = true;
-					page["originalLanguage"] = page.language;
+					page.liveStatus = liveStatus;
+					page.canBeTranslated = true;
+					page.originalLanguage = page.language;
 				}
 
-				if (global) page["component"] = component;
+				if (global) page.component = component;
 
 				const pageLiveStatus =
 					page.draftFromPage && !page.publicationScheduled
@@ -409,14 +410,19 @@ function getTemplatePage(template: string): (dispatch: Dispatch, getState: () =>
 	};
 }
 
-function savePage(
-	createDraft: boolean,
-	publishPage?: any,
+function savePage(data?: {
+	createDraft?: boolean,
+	publishPage?: { status: string },
 	publishDraft?: boolean,
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+	setToast?: (msg: string) => void
+}): (dispatch: Dispatch, getState: any) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
 			dispatch(setIsSaving(true));
+			const { createDraft = false, publishPage, publishDraft, setToast } = data || {};
+
+			console.log(setToast, "setToast");
+
 			const {
 				pageEditor: {
 					selectedEditorID,
@@ -449,20 +455,20 @@ function savePage(
 			}
 
 			if (createDraft) {
-				values["draftFromPage"] = values.id;
+				values.draftFromPage = values.id;
 				delete values.id;
 			}
 
 			/* remove header and footer if page should get the default  */
 			const { defaultHeader, defaultFooter } =
-				(templateConfig && templateConfig.templates && templateConfig.templates[template.templateType]) || {};
+				(templateConfig?.templates?.[template.templateType]) || {};
 
 			if (header && ((header.setAsDefault && !defaultHeader) || header.id === defaultHeader)) {
-				values["header"] = null;
+				values.header = null;
 			}
 
 			if (footer && ((footer.setAsDefault && !defaultFooter) || footer.id === defaultFooter)) {
-				values["footer"] = null;
+				values.footer = null;
 			}
 
 			const saveResponse =
@@ -503,7 +509,11 @@ function savePage(
 				dispatch(setIsSaving(false));
 				return true;
 			} else {
-				appActions.handleError(saveResponse)(dispatch);
+				if(typeof setToast === 'function'){
+					setToast(saveResponse.data.message);
+				} else {
+					appActions.handleError(saveResponse)(dispatch);
+				}
 				dispatch(setIsSaving(false));
 				return false;
 			}
@@ -738,7 +748,7 @@ function addComponent(
 
 			generatePageContent(updatedPageContent)(dispatch, getState);
 
-			if (typeof type === "object" && Object.prototype.hasOwnProperty.call(type, "editorID")) {
+			if (typeof type === "object" && Object.hasOwn(type, "editorID")) {
 				setSelectedContent(type.editorID)(dispatch, getState);
 			} else {
 				const { sections: generatedSections } = getStateValues(getState);
@@ -804,7 +814,7 @@ function addModule(
 				type,
 			};
 
-			let updatedSections,
+			let updatedSections: any,
 				updatedSectionIndex = 0;
 
 			if (isComponentModule) {
@@ -1068,7 +1078,7 @@ function pasteModule(
 					if (isReqOk(response.status)) {
 						const validDataIds: number[] = [];
 						response.data.items.forEach(
-							(data: IStructuredDataContent) => data.relatedSite && validDataIds.push(data.id),
+							(data: IStructuredDataContent) => { data.relatedSite && validDataIds.push(data.id) },
 						);
 						const hasInvalidData = validDataIds.length < fixed.length;
 						validatedModuleCopy.data.fixed = validDataIds;
@@ -1111,7 +1121,11 @@ function overwriteHeaderConfig(params: IFieldProps): (dispatch: Dispatch, getSta
 		const updatedContent = deepClone(content);
 		const { headerConfig } = updatedContent.editorContent;
 
-		headerConfig[id] ? (headerConfig[id][key] = value) : (headerConfig[id] = { [key]: value });
+		if(headerConfig[id]){
+			headerConfig[id][key] = value
+		} else {
+			headerConfig[id] = { [key]: value }
+		}
 
 		dispatch(setEditorContent({ ...updatedContent }));
 	};
@@ -1126,7 +1140,7 @@ function generatePageContent(editorContent: IPage): (dispatch: Dispatch, getStat
 		} = getState();
 
 		const { header, footer, isGlobal } = editorContent;
-		const { defaultHeader, defaultFooter } = (configFormData?.templates && configFormData?.templates[template]) || {};
+		const { defaultHeader, defaultFooter } = (configFormData?.templates?.[template]) || {};
 
 		const headerID =
 			header === null || header === undefined ? defaultHeader : typeof header === "object" ? header.id : header;
@@ -1333,7 +1347,7 @@ function getTemplateConfig(template: string): (dispatch: Dispatch, getState: ()
 			const {
 				sites: { currentSiteInfo },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo?.id || null;
 			const responseActions = {
 				handleSuccess: (data: any) => dispatch(setTemplateConfig(data)),
 				handleError: () => console.log("Error en getTemplateConfig"),
@@ -1381,7 +1395,7 @@ function validatePage(publish?: boolean): (dispatch: Dispatch, getState: () => I
 			const fieldErrors = findFieldsErrors(content);
 
 			errors = [...errors, ...fieldErrors];
-			let packagesActivationErrors;
+			let packagesActivationErrors: any;
 			if (!isGlobalPage) {
 				packagesActivationErrors = findPackagesActivationErrors(pageEditor, modules, templates);
 			}
@@ -1541,8 +1555,8 @@ function getPageSummary(): (dispatch: Dispatch, getState: () => IRootState) => P
 			const responseActions = {
 				handleSuccess: (data: { summary: string; keywords: string[] }) => {
 					const content = deepClone(editorContent);
-					content["metaDescription"] = data.summary;
-					content["metaKeywords"] = data.keywords;
+					content.metaDescription = data.summary;
+					content.metaKeywords = data.keywords;
 					generatePageContent(content)(dispatch, getState);
 				},
 				handleError: () => console.log("Error en GetPageSummary"),
@@ -1567,7 +1581,7 @@ function getPageTranslation(langID: number): (dispatch: Dispatch, getState: () =
 
 			const responseActions = {
 				handleSuccess: (data: IPage) => {
-					data["canBeTranslated"] = false;
+					data.canBeTranslated = false;
 					generatePageContent(data)(dispatch, getState);
 					dispatch(setCurrentPageName(data.title));
 					dispatch(setIsIATranslated(true));
@@ -1609,7 +1623,7 @@ function schedulePublication(
 			const updatedEditorContent = { ...editorContent, publicationScheduled: date };
 
 			dispatch(setEditorContent(updatedEditorContent));
-			return await savePage(false, { status })(dispatch, getState);
+			return await savePage({createDraft: false, publishPage: { status }})(dispatch, getState);
 		} catch (e) {
 			console.log("Error", e);
 			return false;

package/src/containers/PageEditor/reducer.tsx

@@ -1,4 +1,4 @@
-import { IPage, IBreadcrumbItem, ISchema, IErrorItem, IUserEditing, IModule, IPageLanguage } from "@ax/types";
+import type { IPage, IBreadcrumbItem, ISchema, IErrorItem, IUserEditing, IModule, IPageLanguage } from "@ax/types";
 
 import {
 	SET_EDITOR_CONTENT,

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

@@ -1,5 +1,5 @@
-import React, { memo } from "react";
-import { ISchemaField } from "@ax/types";
+import { memo } from "react";
+import type { ISchemaField } from "@ax/types";
 
 import * as S from "./style";
 
@@ -8,8 +8,14 @@ const SectionOption = (props: IProps) => {
 
 	const setOption = () => handleClick(option);
 
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") {
+			setOption();
+		}
+	};
+
 	return (
-		<S.Item onClick={setOption} data-testid="section-option">
+		<S.Item onClick={setOption} onKeyDown={handleKeyDown} tabIndex={0} data-testid="section-option">
 			Fields for {option.title}
 		</S.Item>
 	);

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

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import { memo } from "react";
 
 import { getDisplayName, getThumbnailProps, filterImageText } from "@ax/helpers";
 
@@ -16,8 +16,14 @@ const SideModalOption = (props: IProps) => {
 
 	const setOption = () => handleClick(option);
 
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") {
+			setOption();
+		}
+	};
+
 	return (
-		<S.Item onClick={setOption} data-testid="side-modal-option">
+		<S.Item onClick={setOption} onKeyDown={handleKeyDown} tabIndex={0} data-testid="side-modal-option">
 			{thumbnailProps && <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />}
 			{label}
 		</S.Item>

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

@@ -1,8 +1,7 @@
-import React, { useState } from "react";
-
+import { useState } from "react";
 import { getDisplayName } from "@ax/helpers";
 import { SearchField, FloatingButton, NoteField } from "@ax/components";
-import { ISchemaField } from "@ax/types";
+import type { ISchemaField } from "@ax/types";
 
 import SideModalOption from "./SideModalOption";
 import SectionOption from "./SectionOption";
@@ -27,19 +26,19 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 		setIsOpen((state) => !state);
 	};
 
-	const filteredOptions = selectedField?.whiteList?.map((option: string, i: number) => {
+	const filteredOptions = selectedField?.whiteList?.map((option: string) => {
 		const displayName = getDisplayName(option);
 		if (searchQuery.length > 0) {
 			const name = displayName.toLowerCase();
 			const search = searchQuery.toLocaleLowerCase();
-			if (!name.includes(search)) return <></>;
+			if (!name.includes(search)) return null;
 		}
 		return (
-			<SideModalOption option={option} handleClick={handleClick} key={`${option}${i}`} theme={theme}>
+			<SideModalOption option={option} handleClick={handleClick} key={option} theme={theme}>
 				{displayName}
 			</SideModalOption>
 		);
-	}) || <></>;
+	}) || null;
 
 	const sectionOptions = fieldArrays.map((option) => (
 		<SectionOption option={option} handleClick={handleSectionClick} key={option.key} />
@@ -69,7 +68,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 						</S.ColumnsWrapper>
 					</>
 				) : (
-					<>
+					<S.ModalContent>
 						<S.Header>
 							{isMultiArray && selectedField && (
 								<S.BreadCrumb>
@@ -86,6 +85,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 									closeOnInactive={false}
 									small={true}
 									placeholder="Search field"
+									focus={false}
 								/>
 							</S.SearchWrapper>
 						</S.Header>
@@ -95,7 +95,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 							</S.FloatingButtonWrapper>
 							<S.Content>{filteredOptions}</S.Content>
 						</S.ColumnsWrapper>
-					</>
+					</S.ModalContent>
 				)}
 			</S.Wrapper>
 			<S.ClosedWrapper isOpen={!isOpen}>

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

@@ -7,17 +7,19 @@ const Header = styled.div`
   padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} 0`};
 `;
 
-const Content = styled.div`
+const Content = styled.ul`
   list-style: none;
   padding: ${(p) => p.theme.spacing.s};
-  height: ${(p) => `calc(100vh - ${p.theme.spacing.xl})`};
+  height: 100%;
   width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
-  overflow: auto;
   border-right: 1px solid ${(p) => p.theme.colors.uiLine};
   &:last-child {
     border-right: 0;
     width: ${(p) => `calc(${p.theme.spacing.xl} * 4)`};
   }
+  & > li:last-child {
+    margin-bottom: 0;
+  }
 `;
 
 const Wrapper = styled.div<{ isOpen: boolean }>`
@@ -102,6 +104,23 @@ const BreadCrumbItem = styled.button<{ isLastItem: boolean }>`
   }
 `;
 
+const ModalContent = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 4px;
+      height: 100%;
+    }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p) => p.theme.color.iconNonActive};
+  }
+`;
+
 export {
 	Wrapper,
 	Content,
@@ -113,4 +132,5 @@ export {
 	ClosedFloatingButtonWrapper,
 	BreadCrumb,
 	BreadCrumbItem,
+  ModalContent
 };

package/src/modules/GlobalEditor/index.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { connect } from "react-redux";
-import { RouteComponentProps } from "react-router-dom";
+import type { RouteComponentProps } from "react-router-dom";
 import { withErrorBoundary } from "react-error-boundary";
 
-import {
+import type {
 	IErrorItem,
 	ILanguage,
 	INotification,
@@ -23,6 +23,7 @@ import {
 	CancelScheduleModal,
 	ScheduleModal,
 	RestoreModal,
+	OcassionalToast,
 } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
@@ -81,6 +82,7 @@ const GlobalEditor = (props: IProps) => {
 	const [isReadOnly, setIsReadOnly] = useState(false);
 	const [selectedTab, setSelectedTab] = useState(defaultTab);
 	const [notification, setNotification] = useState<INotification | null>(null);
+	const [toastMsg, setToastMsg] = useState<string | null>(null);
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
 	const [errorPagesChecked, setErrorPagesChecked] = useState(false);
 	const [scheduleDate, setScheduleDate] = useState({ date: dateToString(new Date(), "yyy/MM/dd"), time: "12:00 am" });
@@ -92,7 +94,7 @@ const GlobalEditor = (props: IProps) => {
 	const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
 	const isDraft = props.pageStatus === pageStatus.MODIFIED || !!editorContent.draftFromPage;
 	const hasDraft: boolean = editorContent && !!editorContent.haveDraftPage;
-	const isLivePageChanged = editorContent && editorContent.liveChanged;
+	const isLivePageChanged = editorContent?.liveChanged;
 	const structuredData = editorContent ? editorContent.structuredData : "";
 	const isEditLive = isPublished && hasDraft;
 	const isScheduled = props.pageStatus === pageStatus.SCHEDULED;
@@ -117,10 +119,11 @@ const GlobalEditor = (props: IProps) => {
 	useEffect(() => {
 		const { pageID, getPage, setTab, sendPagePing, setStructuredDataFilter } = props;
 
-		editorContent && editorContent.structuredData && setStructuredDataFilter(editorContent.structuredData);
+		editorContent?.structuredData && setStructuredDataFilter(editorContent.structuredData);
 		const defaultTab = "content";
 		const handleGetPage = async () => await getPage(pageID, true);
 		setTab(defaultTab);
+		setToastMsg(null);
 		handleGetPage();
 		if (!pageID) {
 			setIsDirty(false);
@@ -186,7 +189,7 @@ const GlobalEditor = (props: IProps) => {
 			const isSaved =
 				pageID && !isNewTranslation
 					? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-					: await savePage(false, publishPage);
+					: await savePage({ publishPage});
 
 			if (isSaved) {
 				resetDirty();
@@ -206,7 +209,7 @@ const GlobalEditor = (props: IProps) => {
 				status: pageStatus.UPLOAD_PENDING,
 			};
 
-			const isSaved = await savePage(false, publishPage);
+			const isSaved = await savePage({publishPage});
 			if (isSaved) {
 				resetDirty();
 			}
@@ -240,7 +243,7 @@ const GlobalEditor = (props: IProps) => {
 		const validated = skipReviewOnPublish ? true : await validatePage(true);
 
 		if (validated) {
-			const isSaved = await savePage(false, null, true);
+			const isSaved = await savePage({ publishDraft: true });
 			if (isSaved) resetDirty();
 		} else {
 			setNotification({ text: errorNotificationText, type: "error" });
@@ -262,7 +265,7 @@ const GlobalEditor = (props: IProps) => {
 	const handleCreateDraft = async () => {
 		const { savePage } = props;
 
-		const isSaved = await savePage(true);
+		const isSaved = await savePage({ createDraft: true});
 		if (isSaved) resetDirty();
 	};
 
@@ -378,13 +381,16 @@ const GlobalEditor = (props: IProps) => {
 		options: menuOptions,
 	};
 
-	const isEditable = editorContent && editorContent.editable;
+	const isEditable = editorContent?.editable;
 
-	const handleSavePage = async () => {
+	const handleSavePage = async (setToast?: (msg: string) => void) => {
 		const { savePage } = props;
 
-		const isSaved = await savePage(false);
-		if (isSaved) resetDirty();
+		const isSaved = await savePage({setToast});
+		if (isSaved){
+			 resetDirty();
+			 setToastMsg(null);
+		}
 	};
 
 	const goToPages = (path: string) => setRoute(path);
@@ -504,10 +510,17 @@ const GlobalEditor = (props: IProps) => {
 			]
 		: [{ name: "view", text: "Preview mode" }];
 
+	const handleSelectedTab = async (tab: string) => {
+		if(tab === "view" && (!isPublished || isDraft)){
+			handleSavePage(setToastMsg);
+		}
+		setSelectedTab(tab);
+	}
+
 	const tabsPreview = {
 		icons: tabIcons,
 		selectedTab,
-		action: (tab: string) => setSelectedTab(tab),
+		action: (tab: string) => handleSelectedTab(tab),
 	};
 
 	const filteredLanguages = globalLangs.filter((lang) =>
@@ -627,7 +640,10 @@ const GlobalEditor = (props: IProps) => {
 						</S.Content>
 					</>
 				) : (
-					<Preview theme={theme} />
+					<>
+						<Preview theme={theme} />
+						{toastMsg?.length && <OcassionalToast icon="warning" message={toastMsg} />}
+					</>
 				)}
 				<Modal
 					isOpen={isOpen}
@@ -640,8 +656,8 @@ const GlobalEditor = (props: IProps) => {
 					{isOpen && (
 						<S.ModalContent>
 							<p>
-								<strong>{userEditing && userEditing.name}</strong> is currently working on this page. You can preview
-								the page but <strong>you cannot make changes to it</strong> until {userEditing && userEditing.name}{" "}
+								<strong>{userEditing?.name}</strong> is currently working on this page. You can preview
+								the page but <strong>you cannot make changes to it</strong> until {userEditing?.name}{" "}
 								leaves the page.
 							</p>
 						</S.ModalContent>
@@ -705,7 +721,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
 	sitePageID: state.pageEditor.sitePageID,
 	savedSiteInfo: state.sites.savedSiteInfo,
 	userEditing: state.pageEditor.userEditing,
-	currentUserID: state.users.currentUser && state.users.currentUser.id,
+	currentUserID: state.users.currentUser?.id || null,
 	isNewTranslation: state.pageEditor.isNewTranslation,
 	currentSiteErrorPages: state.sites.currentSiteErrorPages,
 	skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
@@ -756,7 +772,7 @@ const mapDispatchToProps = {
 
 interface IPageEditorDispatchProps {
 	getPage(pageID?: number, global?: boolean): Promise<void>;
-	savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
+	savePage(data?: {createDraft?: boolean; publishPage?: { status: string }; publishDraft?: boolean; setToast?: (msg: string) => void}): Promise<boolean>;
 	deletePage(params?: ISavePageParams): Promise<boolean>;
 	validatePage(publish?: boolean): Promise<boolean>;
 	updatePageStatus(id: number[], status: string): Promise<boolean>;

package/src/modules/Login/index.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
 
-import { IRootState } from "@ax/types";
+import type { IRootState } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { Login } from "@ax/components";
-import { IGlobalSettings } from "@ax/containers/App/reducer";
+import type { IGlobalSettings } from "@ax/containers/App/reducer";
 import { errorText } from "./constants";
 
 const LoginModule = (props: IProps) => {
@@ -49,7 +49,7 @@ const LoginModule = (props: IProps) => {
 	}, [petitionId, errorSSO]);
 
 	useEffect(() => {
-		const prefix = process.env.REACT_APP_SITE_TITLE ? process.env.REACT_APP_SITE_TITLE : "";
+		const prefix = process.env.GRIDDO_SITE_TITLE || process.env.REACT_APP_SITE_TITLE || "";
 		document.title = `${prefix} ${globalSettings.welcomeText2}`;
 	}, [globalSettings]);
 
@@ -110,7 +110,6 @@ const LoginModule = (props: IProps) => {
 
 interface IProps {
 	isLoggingIn: boolean;
-	children: any;
 	globalSettings: IGlobalSettings;
 	login(email?: string, password?: string, rememberMe?: boolean, petitionId?: string): Promise<boolean>;
 	loginSSO(): Promise<string | null>;

package/src/modules/PageEditor/index.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { connect } from "react-redux";
-import { RouteComponentProps } from "react-router-dom";
+import type { RouteComponentProps } from "react-router-dom";
 import { withErrorBoundary } from "react-error-boundary";
 
-import {
+import type {
 	IErrorItem,
 	INotification,
 	IRootState,
@@ -22,6 +22,7 @@ import {
 	CancelScheduleModal,
 	ScheduleModal,
 	RestoreModal,
+	OcassionalToast,
 } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { appActions } from "@ax/containers/App";
@@ -82,6 +83,7 @@ const PageEditor = (props: IProps) => {
 	const [isReadOnly, setIsReadOnly] = useState(false);
 	const [selectedTab, setSelectedTab] = useState(defaultTab);
 	const [notification, setNotification] = useState<INotification | null>(null);
+	const [toastMsg, setToastMsg] = useState<string | null>(null);
 	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();
@@ -94,16 +96,16 @@ const PageEditor = (props: IProps) => {
 	const browserRef = useRef<HTMLDivElement>(null);
 
 	const isGlobal = editorContent && editorContent.origin === "GLOBAL";
-	const isEditable = editorContent && editorContent.editable;
+	const isEditable = editorContent?.editable;
 	const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
 	const isDraft = props.pageStatus === pageStatus.MODIFIED || !!editorContent.draftFromPage;
-	const hasDraft = editorContent && editorContent.haveDraftPage;
-	const isLivePageChanged = editorContent && editorContent.liveChanged;
+	const hasDraft = editorContent?.haveDraftPage;
+	const isLivePageChanged = editorContent?.liveChanged;
 	const isTranslated = pageLanguages.length > 1;
 	const structuredData = editorContent ? editorContent.structuredData : "";
 	const isEditLive = isPublished && hasDraft;
 	const isAllowedToDelete = (isPublished && isAllowedToDeletePublishedPage) || (!isPublished && isAllowedToDeletePage);
-	const canBeUnpublished = editorContent && editorContent.canBeUnpublished;
+	const canBeUnpublished = editorContent?.canBeUnpublished;
 	const deleteHelpText = !canBeUnpublished ? "This is the canonical site of the page. You cannot unpublish it." : null;
 	const isScheduled = !!editorContent && !!editorContent.publicationScheduled;
 	const isDeleted = editorContent.deleted;
@@ -127,6 +129,7 @@ const PageEditor = (props: IProps) => {
 
 		setTab(defaultTab);
 		resetDirty();
+		setToastMsg(null);
 		handleGetPage();
 
 		if (!pageID) {
@@ -190,7 +193,7 @@ const PageEditor = (props: IProps) => {
 			const isSaved =
 				pageID && !isNewTranslation
 					? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-					: await savePage(false, publishPage);
+					: await savePage({publishPage});
 
 			if (isSaved) {
 				resetDirty();
@@ -210,7 +213,7 @@ const PageEditor = (props: IProps) => {
 				status: pageStatus.UPLOAD_PENDING,
 			};
 
-			const isSaved = await savePage(false, publishPage);
+			const isSaved = await savePage({publishPage});
 			if (isSaved) {
 				resetDirty();
 			}
@@ -244,7 +247,7 @@ const PageEditor = (props: IProps) => {
 		const validated = skipReviewOnPublish ? true : await validatePage(true);
 
 		if (validated) {
-			const isSaved = await savePage(false, null, true);
+			const isSaved = await savePage({publishDraft: true});
 			if (isSaved) resetDirty();
 		} else {
 			setNotification({ text: errorNotificationText, type: "error" });
@@ -267,7 +270,7 @@ const PageEditor = (props: IProps) => {
 	const handleCreateDraft = async () => {
 		const { savePage } = props;
 
-		const isSaved = await savePage(true);
+		const isSaved = await savePage({createDraft: true});
 		if (isSaved) resetDirty();
 	};
 
@@ -386,11 +389,14 @@ const PageEditor = (props: IProps) => {
 		options: !isGlobal ? menuOptions : [],
 	};
 
-	const handleSavePage = async () => {
+	const handleSavePage = async (setToast?: (msg: string) => void) => {
 		const { savePage } = props;
 
-		const isSaved = await savePage(false);
-		if (isSaved) resetDirty();
+		const isSaved = await savePage({ setToast });
+		if (isSaved) {
+			 resetDirty();
+			 setToastMsg(null);
+		}
 	};
 
 	const goToPages = (path: string) => setRoute(path);
@@ -412,7 +418,7 @@ const PageEditor = (props: IProps) => {
 	let isTemplateActivated = true;
 	let hasDeactivatedModules = false;
 	let deactivatedModules: string[] = [];
-	if (editorContent && editorContent.template) {
+	if (editorContent?.template) {
 		const editorTemplate = editorContent.template;
 		const mainContentModules = editorTemplate?.mainContent?.modules;
 
@@ -423,7 +429,7 @@ const PageEditor = (props: IProps) => {
 			hasDeactivatedModules = isModuleDisabled(selectedComponent, schema.schemaType, activatedModules);
 		}
 
-		isTemplateActivated = activatedTemplates.find((temp) => temp.id === editorTemplate.templateType) ? true : false;
+		isTemplateActivated = !!activatedTemplates.find((temp) => temp.id === editorTemplate.templateType);
 	}
 
 	let availableLanguages = siteLanguages;
@@ -505,7 +511,7 @@ const PageEditor = (props: IProps) => {
 		"This content is part of disabled content type package. To edit it, you must first activate it.";
 
 	const handleClickNotification = () => {
-		if (editorContent && editorContent.template) {
+		if (editorContent?.template) {
 			const editorTemplate = editorContent.template;
 			if (!isTemplateActivated) {
 				getSiteDataPackbyTemplate(editorTemplate.templateType);
@@ -554,10 +560,17 @@ const PageEditor = (props: IProps) => {
 			]
 		: [{ name: "view", text: "Preview mode" }];
 
+	const handleSelectedTab = async (tab: string) => {
+		if(tab === "view" && (!isPublished || isDraft)){
+			handleSavePage(setToastMsg);
+		}
+		setSelectedTab(tab);
+	}
+
 	const tabsPreview = {
 		icons: tabIcons,
 		selectedTab,
-		action: (tab: string) => setSelectedTab(tab),
+		action: (tab: string) => handleSelectedTab(tab),
 	};
 
 	const contentLanguages: ILanguage[] = [];
@@ -680,8 +693,12 @@ const PageEditor = (props: IProps) => {
 						</S.Content>
 					</>
 				) : (
-					<Preview />
+					<>
+						<Preview />
+						{toastMsg?.length && <OcassionalToast icon="warning" message={toastMsg} />}
+					</>
 				)}
+
 				<Modal
 					isOpen={isOpen}
 					hide={toggleModal}
@@ -693,8 +710,8 @@ const PageEditor = (props: IProps) => {
 					{isOpen && (
 						<S.ModalContent>
 							<p>
-								<strong>{userEditing && userEditing.name}</strong> is currently working on this page. You can preview
-								the page but <strong>you cannot make changes to it</strong> until {userEditing && userEditing.name}{" "}
+								<strong>{userEditing?.name}</strong> is currently working on this page. You can preview
+								the page but <strong>you cannot make changes to it</strong> until {userEditing?.name}{" "}
 								leaves the page.
 							</p>
 						</S.ModalContent>
@@ -767,7 +784,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
 	activatedModules: state.dataPacks.modules,
 	errors: state.pageEditor.errors,
 	userEditing: state.pageEditor.userEditing,
-	currentUserID: state.users.currentUser && state.users.currentUser.id,
+	currentUserID: state.users.currentUser?.id || null,
 	isNewTranslation: state.pageEditor.isNewTranslation,
 	currentSiteErrorPages: state.sites.currentSiteErrorPages,
 	skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
@@ -821,7 +838,7 @@ const mapDispatchToProps = {
 
 interface IPageEditorDispatchProps {
 	getPage(pageID?: number): Promise<void>;
-	savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
+	savePage(data?: { createDraft?: boolean; publishPage?: { status: string }; publishDraft?: boolean; setToast?: (msg: string) => void }): Promise<boolean>;
 	deletePage(params?: ISavePageParams): Promise<boolean>;
 	validatePage(publish?: boolean): Promise<boolean>;
 	updatePageStatus(id: number[], status: string): Promise<boolean>;

package/src/themes/theme.json

@@ -226,6 +226,12 @@
 			"warning": {
 				"description": "warning modified",
 				"value": "#ffbb37"
+			},
+			"borderInverse": {
+				"description": "Border for ocassional toasts",
+				"type": "RGB",
+				"value": ["219", "221", "233"],
+				"opacity": "0.3"
 			}
 		}
 	},