@griddo/ax 1.75.224 → 1.75.226

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.224",
+  "version": "1.75.226",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -235,5 +235,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1c4e2c06dd6fbee54a37eba2c8f2ebd27b38781f"
+  "gitHead": "26895cf4c323b6031eee9c65bfefa8ecaa4eae38"
 }

package/src/components/ConfigPanel/Form/ConnectedField/NavConnectedField/index.tsx

@@ -24,6 +24,7 @@ const NavConnectedField = (props: any) => {
     activatedTemplates,
     menus,
     theme,
+    disabled,
     moduleCopy,
   } = props;
 
@@ -56,7 +57,15 @@ const NavConnectedField = (props: any) => {
 
   if (isConditional) {
     const innerActions = { ...actions, updateValue, goTo };
-    innerFields = getInnerFields(field.fields, innerActions, selectedContent, isTemplateActivated, theme, site);
+    innerFields = getInnerFields(
+      field.fields,
+      innerActions,
+      selectedContent,
+      isTemplateActivated,
+      theme,
+      disabled,
+      site
+    );
   }
 
   return (

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -45,6 +45,7 @@ const Field = (props: IFieldProps): JSX.Element => {
       selectedContent,
       isTemplateActivated,
       theme,
+      disabled,
       site,
       errors,
       deleteError

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -37,6 +37,7 @@ const PageConnectedField = (props: any) => {
     availableDataPacks,
     template,
     setHistoryPush,
+    isReadOnly,
   } = props;
 
   const isTemplate = field.type === "template";
@@ -55,22 +56,25 @@ const PageConnectedField = (props: any) => {
   }
 
   const parentIsReadOnly =
-    componentType === "page" &&
-    objKey === "parent" &&
-    isTemplateActivated &&
-    templateConfig &&
-    templateConfig.modifiableOnPage === false;
+    (componentType === "page" &&
+      objKey === "parent" &&
+      isTemplateActivated &&
+      templateConfig &&
+      templateConfig.modifiableOnPage === false) ||
+    isReadOnly;
+
   const defaultParent =
     isTemplateActivated && templateConfig && templateConfig.defaultParent ? templateConfig.defaultParent : null;
+
   const hasDefaultIndex = isTemplateActivated && templateConfig && templateConfig.indexDefault !== undefined;
 
-  const isReadOnly =
+  const isFieldReadOnly =
     (["parent", "slug"].includes(objKey) && (selectedContent.setAsHome || isPageHome)) || parentIsReadOnly;
+
   const isDisabled =
-    !isGlobal &&
-    (isModuleDisabled(selectedContent.component, componentType, activatedModules) ||
-      isReadOnly ||
-      !isTemplateActivated);
+    (!isGlobal &&
+      (isModuleDisabled(selectedContent.component, componentType, activatedModules) || !isTemplateActivated)) ||
+    isFieldReadOnly;
 
   const isMetaTitleModified = selectedContent.metaTitle && selectedContent.metaTitle !== selectedContent.title;
 
@@ -176,7 +180,7 @@ const PageConnectedField = (props: any) => {
       site={site}
       lang={lang}
       disabled={isDisabled}
-      readonly={isReadOnly}
+      readonly={isFieldReadOnly}
       activatedModules={activatedModules}
       isTemplateActivated={isTemplateActivated}
       error={error}

package/src/components/ConfigPanel/Form/index.tsx

@@ -8,8 +8,20 @@ import ConnectedField from "./ConnectedField";
 import * as S from "./style";
 
 export const Form = (props: IFormProps): JSX.Element => {
-  const { schema, selectedTab, setSelectedTab, actions, isPage, isGlobal, theme, setHistoryPush, header, footer } =
-    props;
+  const {
+    schema,
+    selectedTab,
+    setSelectedTab,
+    actions,
+    isPage,
+    isGlobal,
+    theme,
+    setHistoryPush,
+    header,
+    footer,
+    isEditLive,
+  } = props;
+
   const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title === selectedTab);
   const setTab = (tab: string) => setSelectedTab(tab);
 
@@ -33,6 +45,7 @@ export const Form = (props: IFormProps): JSX.Element => {
         isGlobal={isGlobal}
         theme={theme}
         setHistoryPush={setHistoryPush}
+        isReadOnly={isEditLive}
       />
     );
   };
@@ -65,6 +78,12 @@ export const Form = (props: IFormProps): JSX.Element => {
   return (
     <section data-testid="form-section">
       <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setTab} />
+      {selectedTab === "content" && isEditLive && (
+        <S.FieldWrapper>
+          There are some changes in the <strong>draft associated</strong> with this page. Before making changes to the
+          published version, you should <strong>discard or publish your draft</strong>.
+        </S.FieldWrapper>
+      )}
       {selectedTab === "content" && !isGlobal && header === 0 && (
         <S.FieldWrapper>
           This page doesn&apos;t have a header. Click{" "}
@@ -100,6 +119,7 @@ export interface IFormProps {
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   header?: number | null;
   footer?: number | null;
+  isEditLive?: boolean;
 }
 
 export default Form;

package/src/components/ConfigPanel/index.tsx

@@ -35,6 +35,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
     lastElementAddedId,
     header,
     footer,
+    isEditLive,
   } = props;
 
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -84,6 +85,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
           setHistoryPush={setHistoryPush}
           header={header}
           footer={footer}
+          isEditLive={isEditLive}
         />
       );
     }
@@ -125,6 +127,7 @@ export interface IStateProps {
   lastElementAddedId?: null | number;
   header?: number | null;
   footer?: number | null;
+  isEditLive?: boolean;
 }
 
 export default ConfigPanel;

package/src/components/ErrorCenter/index.tsx

@@ -8,7 +8,7 @@ const ErrorCenter = (props: IErrorCenterProps): JSX.Element => {
   const { errors, actions } = props;
 
   const goToElement = (key: string) => {
-    const element = document.getElementById(key);
+    const element = document.getElementById(`gdd_${key}`);
 
     if (element) {
       const pos = element.style.position;
@@ -28,7 +28,7 @@ const ErrorCenter = (props: IErrorCenterProps): JSX.Element => {
       if (item.hasDeactivatedPackage) {
         actions?.goToPackage();
       } else {
-        item.editorID && actions?.goToError(item.editorID, item.tab, item.template);
+        item.editorID !== null && actions?.goToError(item.editorID, item.tab, item.template);
         goToElement(item.key);
       }
     };

package/src/components/Fields/AnalyticsField/PageAnalytics/atoms.tsx

@@ -11,8 +11,9 @@ const DimensionsGroup = (props: {
   analytics: IAnalytics;
   state: IState;
   setDimension: (value: Record<string, string>) => void;
+  disabled?: boolean;
 }): JSX.Element => {
-  const { analytics, state, setDimension } = props;
+  const { analytics, state, setDimension, disabled } = props;
   const { groupSelect, values } = state;
   const selectedGroup = analytics.groups.find((g) => g.name === groupSelect);
   const dimensionNames = splitAndTrim(selectedGroup?.dimensions, ";");
@@ -26,7 +27,8 @@ const DimensionsGroup = (props: {
       <S.FieldsDivider />
       {groupDimensions &&
         groupDimensions.map(
-          (dimension, idx) => dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+          (dimension, idx) =>
+            dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />
         )}
     </>
   );
@@ -36,8 +38,9 @@ const DimensionsSelection = (props: {
   analytics: IAnalytics;
   state: IState;
   setDimension: (value: Record<string, string>) => void;
+  disabled?: boolean;
 }): JSX.Element => {
-  const { analytics, state, setDimension } = props;
+  const { analytics, state, setDimension, disabled } = props;
   const { dimensionsSelect, values } = state;
   const selectedDimensions = analytics.dimensions?.filter((d) => dimensionsSelect.includes(d.name));
 
@@ -46,19 +49,24 @@ const DimensionsSelection = (props: {
       {selectedDimensions?.length ? <S.FieldsDivider /> : <></>}
       {selectedDimensions &&
         selectedDimensions.map((dimension, idx) => (
-          <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+          <DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />
         ))}
     </>
   );
 };
 
-const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Record<string, string>) => void, values: Record<string, string> }) => {
-  const { dimension, setDimension, values } = props;
+const DimensionValue = (props: {
+  dimension: IDimension;
+  setDimension: (value: Record<string, string>) => void;
+  values: Record<string, string>;
+  disabled?: boolean;
+}) => {
+  const { dimension, setDimension, values, disabled } = props;
   const dimensionValues = splitAndTrim(dimension?.values, ";");
   const options = dimensionValues.map((option) => ({ label: option, value: option }));
   const handleOnChange = (value: string) => {
     dimension && setDimension({ [dimension.name]: value });
-  }
+  };
 
   const isNullValue = dimensionValues.includes("null");
   const fieldValue = values && dimension ? values[dimension.name] : "";
@@ -70,6 +78,7 @@ const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Re
       value={fieldValue}
       onChange={handleOnChange}
       placeholder="Type a variable"
+      disabled={disabled}
     />
   ) : (
     <FieldsBehavior
@@ -79,8 +88,9 @@ const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Re
       value={fieldValue}
       onChange={handleOnChange}
       placeholder="Select variable"
+      disabled={disabled}
     />
-  )
-}
+  );
+};
 
 export { DimensionsGroup, DimensionsSelection };

package/src/components/Fields/AnalyticsField/PageAnalytics/index.tsx

@@ -7,7 +7,7 @@ import { DimensionsGroup, DimensionsSelection } from "./atoms";
 import * as S from "../style";
 
 const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
-  const { value, onChange, analytics } = props;
+  const { value, onChange, analytics, disabled } = props;
 
   const initialState = {
     contentSelect: "",
@@ -103,6 +103,7 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
           value={state.contentSelect}
           onChange={handleContentSelect}
           placeholder="Select Dimensions Options"
+          disabled={disabled}
         />
       </S.FieldWrapper>
       {isGroup && (
@@ -114,8 +115,9 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
             value={state.groupSelect}
             onChange={handleGroupSelect}
             placeholder="Select Group"
+            disabled={disabled}
           />
-          {!!state.groupSelect && <DimensionsGroup {...{ analytics, state, setDimension }} />}
+          {!!state.groupSelect && <DimensionsGroup {...{ analytics, state, setDimension, disabled }} />}
         </>
       )}
       {isIndividual && (
@@ -128,9 +130,10 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
             onChange={handleDimensionsSelect}
             selectAllOption="all"
             placeholder="Select Dimensions"
+            disabled={disabled}
             floating
           />
-          {!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension }} />}
+          {!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension, disabled }} />}
         </>
       )}
     </>

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/atoms.tsx

@@ -7,7 +7,7 @@ import { IAnalytics, IDimension } from "@ax/types";
 import { IState } from "..";
 
 const TemplateDimensions = (props: ITemplateDimensions): JSX.Element => {
-  const { analytics, state, setDimension, dimensionNames } = props;
+  const { analytics, state, setDimension, dimensionNames, disabled } = props;
   const { values } = state;
   const groupDimensions = dimensionNames.map((dimensionName) => {
     const dimension = analytics.dimensions?.find((dimension) => dimension.name === dimensionName);
@@ -18,7 +18,8 @@ const TemplateDimensions = (props: ITemplateDimensions): JSX.Element => {
     <>
       {groupDimensions &&
         groupDimensions.map(
-          (dimension, idx) => dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+          (dimension, idx) =>
+            dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />
         )}
     </>
   );
@@ -28,8 +29,9 @@ const DimensionsSelection = (props: {
   analytics: IAnalytics;
   state: IState;
   setDimension: (value: Record<string, string>) => void;
+  disabled?: boolean;
 }): JSX.Element => {
-  const { analytics, state, setDimension } = props;
+  const { analytics, state, setDimension, disabled } = props;
   const { dimensionsSelect, values } = state;
   const selectedDimensions = analytics.dimensions?.filter((d) => dimensionsSelect.includes(d.name));
 
@@ -37,7 +39,7 @@ const DimensionsSelection = (props: {
     <>
       {selectedDimensions &&
         selectedDimensions.map((dimension, idx) => (
-          <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+          <DimensionValue key={idx} {...{ dimension, setDimension, values, disabled }} />
         ))}
     </>
   );
@@ -47,8 +49,9 @@ const DimensionValue = (props: {
   dimension: IDimension;
   setDimension: (value: Record<string, string>) => void;
   values: Record<string, string>;
+  disabled?: boolean;
 }) => {
-  const { dimension, setDimension, values } = props;
+  const { dimension, setDimension, values, disabled } = props;
   const dimensionValues = splitAndTrim(dimension?.values, ";");
 
   const options = dimensionValues.map((option) => ({ label: option, value: option }));
@@ -66,6 +69,7 @@ const DimensionValue = (props: {
       value={fieldValue}
       onChange={handleOnChange}
       placeholder="Type a variable"
+      disabled={disabled}
     />
   ) : (
     <FieldsBehavior
@@ -75,6 +79,7 @@ const DimensionValue = (props: {
       value={fieldValue}
       onChange={handleOnChange}
       placeholder="Select variable"
+      disabled={disabled}
     />
   );
 };
@@ -84,6 +89,7 @@ interface ITemplateDimensions {
   state: IState;
   setDimension: (value: Record<string, string>) => void;
   dimensionNames: string[];
+  disabled?: boolean;
 }
 
 export { TemplateDimensions, DimensionsSelection };

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/index.tsx

@@ -8,7 +8,7 @@ import { TemplateDimensions, DimensionsSelection } from "./atoms";
 import * as S from "../style";
 
 const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
-  const { value, onChange, analytics, template } = props;
+  const { value, onChange, analytics, template, disabled } = props;
 
   const initialState = {
     dimensionsSelect: [],
@@ -61,7 +61,7 @@ const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
 
   return (
     <>
-      <TemplateDimensions dimensionNames={templateDimensions} {...{ analytics, state, setDimension }} />
+      <TemplateDimensions dimensionNames={templateDimensions} {...{ analytics, state, setDimension, disabled }} />
       {dimensionOptions.length > 1 && (
         <>
           <S.FieldsDivider />
@@ -73,9 +73,10 @@ const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
             onChange={handleDimensionsSelect}
             selectAllOption="all"
             placeholder="Select Dimensions"
+            disabled={disabled}
             floating
           />
-          {!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension }} />}
+          {!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension, disabled }} />}
         </>
       )}
     </>

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

@@ -33,6 +33,7 @@ export interface IAnalyticsFieldProps {
   onChange: (value: IState) => void;
   analytics: IAnalytics;
   template: string;
+  disabled?: boolean;
 }
 
 export interface IState {

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

@@ -4,7 +4,7 @@ import { RadioGroup } from "@ax/components";
 import * as S from "./style";
 
 const ConditionalField = (props: IConditionalFieldProps) => {
-  const { value, options, innerFields, onChange, defaultValue } = props;
+  const { value, options, innerFields, onChange, defaultValue, disabled } = props;
 
   const safeValue = value === undefined ? defaultValue : value;
 
@@ -12,7 +12,7 @@ const ConditionalField = (props: IConditionalFieldProps) => {
 
   return (
     <S.Wrapper>
-      <RadioGroup name="radio" value={safeValue} options={options} onChange={handleChange} />
+      <RadioGroup name="radio" value={safeValue} options={options} onChange={handleChange} disabled={disabled} />
       <S.Content data-testid="conditionalFieldContent">
         {innerFields &&
           innerFields.map((item: any) => {
@@ -31,4 +31,5 @@ interface IConditionalFieldProps {
   innerFields: any;
   onChange: (value: any) => void;
   defaultValue?: string | boolean;
+  disabled?: boolean;
 }

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

@@ -7,8 +7,19 @@ import CheckGroup from "@ax/components/Fields/CheckGroup";
 import * as S from "./style";
 
 const MultiCheckSelect = (props: IMultiCheckSelectProps) => {
-  const { placeholder, source, value, onChange, site, className, mandatory, options, selectAllOption, floating } =
-    props;
+  const {
+    placeholder,
+    source,
+    value,
+    onChange,
+    site,
+    className,
+    mandatory,
+    options,
+    selectAllOption,
+    floating,
+    disabled,
+  } = props;
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -18,16 +29,29 @@ const MultiCheckSelect = (props: IMultiCheckSelectProps) => {
 
   return (
     <S.Wrapper className={className} data-testid="multi-check-select-wrapper">
-      <S.Field isOpen={isOpen} onClick={handleClick} data-testid="field">
+      <S.Field isOpen={isOpen} onClick={handleClick} disabled={disabled} data-testid="field">
         {placeholder} <Asterisk />
       </S.Field>
       {isOpen && (
         <S.DropDown floating={floating}>
           {options && (
-            <CheckGroup options={options} value={value} onChange={onChange} selectAllOption={selectAllOption} />
+            <CheckGroup
+              options={options}
+              value={value}
+              onChange={onChange}
+              selectAllOption={selectAllOption}
+              disabled={disabled}
+            />
           )}
           {source && (
-            <AsyncCheckGroup source={source} site={site} value={value} onChange={onChange} fullHeight={true} />
+            <AsyncCheckGroup
+              source={source}
+              site={site}
+              value={value}
+              onChange={onChange}
+              fullHeight={true}
+              disabled={disabled}
+            />
           )}
         </S.DropDown>
       )}
@@ -46,6 +70,7 @@ export interface IMultiCheckSelectProps {
   options?: { name: string; value: string; title: string }[];
   selectAllOption?: string;
   floating?: boolean;
+  disabled?: boolean;
 }
 
 export default memo(MultiCheckSelect);

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

@@ -7,15 +7,21 @@ const Wrapper = styled.div`
   z-index: 2;
 `;
 
-const Field = styled.div<{ isOpen: boolean }>`
+const Field = styled.div<{ isOpen: boolean; disabled?: boolean }>`
   position: relative;
   ${(p) => p.theme.textStyle?.fieldContent};
-  color: ${(p) => p.theme.color?.textHighEmphasis};
+  color: ${(p) => (p.disabled ? p.theme.color?.interactiveDisabled : p.theme.color?.textHighEmphasis)};
   display: flex;
   width: 100%;
   height: ${(p) => p.theme.spacing?.l};
   background-color: ${(p) => p.theme.color?.interactiveBackground};
-  border: 1px solid ${(p) => (p.isOpen ? p.theme.color?.interactive01 : p.theme.color?.uiLine)};
+  border: 1px solid
+    ${(p) =>
+      p.isOpen
+        ? p.theme.color?.interactive01
+        : p.disabled
+        ? p.theme.color?.interactiveDisabled
+        : p.theme.color?.uiLine};
   border-radius: ${(p) => p.theme.radii?.s};
   align-items: center;
   cursor: pointer;

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

@@ -5,7 +5,7 @@ import { ISite } from "@ax/types";
 import * as S from "./style";
 
 const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
-  const { value, onChange, site, elements, note } = props;
+  const { value, onChange, site, elements, note, disabled, error, handleValidation } = props;
 
   const completedValue = value ? value : {};
 
@@ -25,6 +25,7 @@ const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
             }
 
             onChange(newValue);
+            error && handleValidation && handleValidation(newValue);
           };
 
           const val = completedValue[key] ? completedValue[key] : [];
@@ -39,6 +40,7 @@ const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
               site={fromSite}
               placeholder={placeholder}
               source={source}
+              disabled={disabled}
             />
           );
         })}
@@ -52,6 +54,9 @@ export interface IMultiCheckSelectGroupProps {
   onChange: (value: Record<string, any[]> | Record<string, never>) => void;
   site?: ISite;
   note?: string;
+  error?: boolean;
+  handleValidation?: (value: Record<string, unknown>, validators?: Record<string, unknown>) => void;
+  disabled?: boolean;
 }
 
 export default memo(MultiCheckSelectGroup);

package/src/components/FieldsBehavior/index.tsx

@@ -79,7 +79,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
   };
 
   return (
-    <S.Wrapper className={wrapperClass} showTitle={showTitle} id={objKey}>
+    <S.Wrapper className={wrapperClass} showTitle={showTitle} id={`gdd_${objKey}`}>
       <S.Content error={errorField} data-testid="fields-behavior-wrapper">
         <Field
           {...props}

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

@@ -52,7 +52,9 @@ const ActionSimpleMenu = (props: any) => {
   return (
     menu &&
     menu.options && (
-      <S.ActionMenu data-testid="action-simple-menu">{menu.options.map((item: any, i: number) => ActionMenuItem(item, true))}</S.ActionMenu>
+      <S.ActionMenu data-testid="action-simple-menu">
+        {menu.options.map((item: any, i: number) => ActionMenuItem(item, true))}
+      </S.ActionMenu>
     )
   );
 };

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

@@ -130,7 +130,12 @@ const AppBar = (props: IProps): JSX.Element => {
     </S.ErrorWrapper>
   );
 
-  const StatusBtn = () => pageStatus && <S.StatusBtn data-testid="status-button"><Icon name={pageStatus} size="24" /></S.StatusBtn>;
+  const StatusBtn = () =>
+    pageStatus && (
+      <S.StatusBtn data-testid="status-button">
+        <Icon name={pageStatus} size="24" />
+      </S.StatusBtn>
+    );
 
   const statusMenu = {
     options: pageStatusActions,

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

@@ -82,6 +82,7 @@ const ActionMenuTitle = styled.li`
 const ButtonWrapper = styled.div`
   padding: ${(p) => `0 ${p.theme.spacing.s} ${p.theme.spacing.xs} ${p.theme.spacing.s}`};
   margin-left: 0;
+  white-space: nowrap;
 
   button {
     width: 100%;
@@ -204,5 +205,5 @@ export {
   WrapperEnd,
   WrapperTitle,
   TabsContent,
-  StatusBtn
+  StatusBtn,
 };

package/src/containers/Sites/actions.tsx

@@ -578,7 +578,7 @@ function deleteAndRemoveFromSiteBulk(
         sites: { currentSiteInfo },
       } = getState();
 
-      let responseErrorPages: any = { data: { code: null, message: [] } };
+      let responseErrorPages: any = { data: { code: null, message: null } };
 
       const responsePageActions = {
         handleSuccess: () => true,
@@ -604,13 +604,12 @@ function deleteAndRemoveFromSiteBulk(
           }
         },
         handleError: (response: any) => {
+          const errorMessages = responseErrorPages.data?.message ? responseErrorPages.data.message : [];
           responseErrorPages = {
             ...responseErrorPages,
             data: {
               code: responseErrorPages.data?.code || response.data?.code,
-              message: response.data
-                ? [...responseErrorPages.data.message, ...response.data.message]
-                : responseErrorPages.data?.message,
+              message: response.data ? [...errorMessages, ...response.data.message] : errorMessages,
             },
           };
 

package/src/forms/fields.tsx

@@ -8,9 +8,10 @@ const getInnerFields = (
   selectedContent: IPage,
   isTemplateActivated: boolean,
   theme: string,
+  parentDisabled?: boolean,
   site?: ISite,
   errors?: IErrorItem[],
-  deleteError?: (error: IErrorItem) => void,
+  deleteError?: (error: IErrorItem) => void
 ) => {
   let fieldArr: any[] = [];
 
@@ -27,9 +28,10 @@ const getInnerFields = (
           selectedContent,
           isTemplateActivated,
           theme,
+          parentDisabled,
           site,
           errors,
-          deleteError,
+          deleteError
         );
       }
 
@@ -45,7 +47,7 @@ const getInnerFields = (
           goTo={innerActions.goTo}
           site={site}
           {...singleFieldProps}
-          disabled={!isTemplateActivated || singleFieldProps.disabled}
+          disabled={!isTemplateActivated || singleFieldProps.disabled || parentDisabled}
           error={error}
           deleteError={deleteError}
           theme={theme}

package/src/forms/validators.tsx

@@ -12,6 +12,7 @@ import {
   isValidDate,
   isValidDateRange,
   stringToDate,
+  isEmptyObj,
 } from "@ax/helpers";
 
 import { findByEditorID } from "@ax/forms";
@@ -177,6 +178,7 @@ const isEmptyField = (value: any, fieldType: string, multiple: boolean) => {
     case "AsyncCheckGroup":
     case "CheckGroup":
     case "ComponentArray":
+    case "MultiCheckSelect":
       return (
         !value || (Array.isArray(value) && !value.length) || (value.component === "Section" && !value.modules.length)
       );
@@ -190,6 +192,8 @@ const isEmptyField = (value: any, fieldType: string, multiple: boolean) => {
     }
     case "NumberField":
       return value === null || Number.isNaN(value);
+    case "MultiCheckSelectGroup":
+      return !value || isEmptyObj(value);
     default:
       return typeof value === "string" && value.trim().length === 0;
   }
@@ -238,7 +242,7 @@ const getValidationErrors = (
           type: "error",
           message: getErrorMessage("ERR015", null),
           validator: { mandatory: true },
-          editorID: current && current.editorID ? current.editorID : null,
+          editorID: current && current.editorID ? current.editorID : 0,
           component: current && current.component ? current.component : null,
           name: name ? name : field.title,
           key: field.key,
@@ -261,7 +265,7 @@ const getValidationErrors = (
           type: "error",
           message: getErrorMessage("ERR016", null),
           validator: { isMockup: { type: field.type, defaultValue } },
-          editorID: current.editorID ? current.editorID : null,
+          editorID: current.editorID ? current.editorID : 0,
           component: current.component ? current.component : null,
           name: name ? name : field.title,
           key: field.key,
@@ -285,7 +289,7 @@ const getValidationErrors = (
           type: "error",
           message: errorText,
           validator: allValidators,
-          editorID: current.editorID ? current.editorID : null,
+          editorID: current.editorID ? current.editorID : 0,
           component: current.component ? current.component : null,
           name: name ? name : field.title,
           key: field.key,
@@ -320,6 +324,29 @@ const getValidationErrors = (
           errors = [...errors, ...innerErrors];
         });
     }
+
+    if (field.type === "MultiCheckSelectGroup") {
+      const multiCheckError = field.elements.some((item: any) =>
+        item.mandatory &&
+        (!current || !current[field.key] || !current[field.key][item.key] || !current[field.key][item.key].length)
+          ? true
+          : false
+      );
+
+      if (multiCheckError) {
+        errors.push({
+          type: "error",
+          message: getErrorMessage("ERR015", null),
+          validator: { mandatory: true },
+          editorID: current && current.editorID ? current.editorID : 0,
+          component: current && current.component ? current.component : null,
+          name: name ? name : field.title,
+          key: field.key,
+          tab,
+          template,
+        });
+      }
+    }
   });
 
   return errors;

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

@@ -380,7 +380,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const viewPage = () => window.open(page.fullUrl || `${API_URL}/page/go/${page.id}`, "_blank");
 
   const viewOption = {
-    label: "View live",
+    label: "View online",
     icon: "View",
     action: viewPage,
   };
@@ -397,7 +397,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
       color: true,
     },
     {
-      label: "Edit live page",
+      label: "View live",
       icon: "active",
       action: editLivePage,
       color: true,

package/src/modules/Content/hooks.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 const useSortedListStatus = () => {
   const sortedInitialState: {

package/src/modules/Content/index.tsx

@@ -317,7 +317,10 @@ const Content = (props: IProps): JSX.Element => {
     addToBulkSelection(item, bulkFilter);
   };
 
-  const handleSelectAll = () => selectAllItems(bulkFilter);
+  const handleSelectAll = () => {
+    selectAllItems(bulkFilter);
+    setPagesSelected(isStructuredData ? currentDataContent : currentSitePages);
+  };
 
   const unselectAllItems = () => {
     resetBulkSelection();

package/src/modules/Content/utils.tsx

@@ -112,7 +112,6 @@ const filterByStatus = (bulkSelection: number[], currentSitePages: IPage[]): Rec
         case pageStatus.OFFLINE_PENDING:
         case pageStatus.OFFLINE:
         case pageStatus.UPLOAD_PENDING:
-          notPublishedItems.push(id);
           haveDraftPage ? draftItems.push(id) : notPublishedItems.push(id);
           break;
         case pageStatus.PUBLISHED:

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

@@ -31,6 +31,7 @@ const Editor = (props: IProps) => {
     theme,
     browserRef,
     setNotification,
+    isEditLive,
   } = props;
 
   const actions = {
@@ -48,7 +49,7 @@ const Editor = (props: IProps) => {
 
   return (
     <ResizePanel
-      leftPanel={<PageBrowser isReadOnly={isReadOnly} theme={theme} browserRef={browserRef} />}
+      leftPanel={<PageBrowser isReadOnly={isReadOnly || isEditLive} theme={theme} browserRef={browserRef} />}
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -66,6 +67,7 @@ const Editor = (props: IProps) => {
           isReadOnly={isReadOnly}
           userEditing={userEditing}
           theme={theme}
+          isEditLive={isEditLive}
         />
       }
     />
@@ -101,6 +103,7 @@ interface IPageBrowserDispatchProps {
   isReadOnly: boolean;
   theme: string;
   browserRef: any;
+  isEditLive: boolean;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/GlobalEditor/index.tsx

@@ -55,9 +55,10 @@ const GlobalEditor = (props: IProps) => {
 
   const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
   const isDraft = props.pageStatus === pageStatus.MODIFIED;
-  const hasDraft = editorContent && editorContent.haveDraftPage;
+  const hasDraft: boolean = editorContent && !!editorContent.haveDraftPage;
   const isLivePageChanged = editorContent && editorContent.liveChanged;
   const structuredData = editorContent ? editorContent.structuredData : "";
+  const isEditLive: boolean = isPublished && hasDraft;
 
   const errorNotificationText =
     "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
@@ -173,12 +174,6 @@ const GlobalEditor = (props: IProps) => {
     updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
   };
 
-  const cancelPublishPage = () => {
-    const { updatePageStatus, pageID } = props;
-
-    updatePageStatus([pageID], pageStatus.OFFLINE);
-  };
-
   const reviewPage = async () => {
     const { validatePage } = props;
     const validated = await validatePage(false);
@@ -214,6 +209,13 @@ const GlobalEditor = (props: IProps) => {
     getPage(pageID, true);
   };
 
+  const handleCreateDraft = async () => {
+    const { savePage } = props;
+
+    const isSaved = await savePage(true);
+    if (isSaved) resetDirty();
+  };
+
   const getPublishButton = (status: string) => {
     switch (status) {
       case pageStatus.OFFLINE:
@@ -222,20 +224,16 @@ const GlobalEditor = (props: IProps) => {
           label: "Publish",
           action: publishPage,
         };
-      case pageStatus.UPLOAD_PENDING:
-        return {
-          label: "Cancel Publication",
-          action: cancelPublishPage,
-        };
       case pageStatus.PUBLISHED:
-        return !hasDraft
+      case pageStatus.UPLOAD_PENDING:
+        return !hasDraft && isDirty
           ? {
-              label: "Publish changes",
-              action: publishChanges,
+              label: "Create new draft",
+              action: handleCreateDraft,
             }
           : {
               label: "Unpublish",
-              action: unpublishPage,
+              action: hasDraft ? toggleUnpublishModal : unpublishPage,
             };
       case pageStatus.MODIFIED:
         return {
@@ -259,7 +257,7 @@ const GlobalEditor = (props: IProps) => {
   };
 
   const unpublishOption =
-    props.pageStatus === pageStatus.PUBLISHED && !hasDraft
+    props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty
       ? {
           label: "Unpublish",
           icon: "offline",
@@ -276,6 +274,14 @@ const GlobalEditor = (props: IProps) => {
         }
       : undefined;
 
+  const deleteOption = !isDraft
+    ? {
+        label: "Delete",
+        icon: "delete",
+        action: removePage,
+      }
+    : undefined;
+
   const downArrowMenu = {
     displayed: !isReadOnly,
     button: getPublishButton(props.pageStatus),
@@ -287,11 +293,7 @@ const GlobalEditor = (props: IProps) => {
       },
       unpublishOption,
       discardOption,
-      {
-        label: "Delete",
-        icon: "delete",
-        action: removePage,
-      },
+      deleteOption,
     ],
   };
 
@@ -300,14 +302,7 @@ const GlobalEditor = (props: IProps) => {
   const handleSavePage = async () => {
     const { savePage } = props;
 
-    const publishPage = {
-      status: pageStatus.UPLOAD_PENDING,
-    };
-
-    const createDraft = isPublished && !hasDraft;
-    const status = props.pageStatus === pageStatus.PUBLISHED && !createDraft ? publishPage : undefined;
-
-    const isSaved = await savePage(createDraft, status);
+    const isSaved = await savePage(false);
     if (isSaved) resetDirty();
   };
 
@@ -331,16 +326,20 @@ const GlobalEditor = (props: IProps) => {
     switch (props.pageStatus) {
       case pageStatus.PUBLISHED:
       case pageStatus.UPLOAD_PENDING:
-        return !isDirty && !isNewTranslation ? "Saved" : isPublished && hasDraft ? "Save & publish" : "Save draft";
+        return !isDirty && !isNewTranslation ? "Saved" : isPublished && hasDraft ? "Save & publish" : "Publish changes";
       default:
-        return !isDirty && !isNewTranslation ? "Saved" : "Save";
+        return !pageID || isNewTranslation || (isDirty && props.pageStatus !== pageStatus.MODIFIED)
+          ? "Save"
+          : isDirty && props.pageStatus === pageStatus.MODIFIED
+          ? "Save draft"
+          : "Saved";
     }
   };
 
   const rightButtonProps = {
     label: isSaving ? "Saving" : getSaveLabel(),
     disabled: (!isDirty && pageID !== null && !isNewTranslation) || isSaving || isReadOnly,
-    action: handleSavePage,
+    action: isPublished ? publishChanges : handleSavePage,
   };
 
   const goToLivePage = () => {
@@ -361,7 +360,7 @@ const GlobalEditor = (props: IProps) => {
     props.pageStatus === pageStatus.PUBLISHED || isDraft
       ? [
           {
-            label: "View live",
+            label: "Go to live page",
             icon: "view",
             action: goToLivePage,
           },
@@ -372,7 +371,7 @@ const GlobalEditor = (props: IProps) => {
     isDraft || hasDraft
       ? [
           {
-            label: isDraft ? "Edit live" : "Edit draft",
+            label: isDraft ? "View live" : "Edit draft",
             icon: isDraft ? "active" : "modified",
             action: toggleDraftPage,
           },
@@ -477,6 +476,7 @@ const GlobalEditor = (props: IProps) => {
                 theme={theme}
                 browserRef={browserRef}
                 setNotification={setNotification}
+                isEditLive={isEditLive}
               />
             </S.Content>
           </>

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

@@ -42,6 +42,7 @@ const Editor = (props: IProps) => {
     setNotification,
     restorePageNavigation,
     content,
+    isEditLive,
   } = props;
 
   const { header, footer, theme: pageTheme } = content;
@@ -66,7 +67,11 @@ const Editor = (props: IProps) => {
   return (
     <ResizePanel
       leftPanel={
-        <PageBrowser isTemplateActivated={isTemplateActivated} isReadOnly={isReadOnly} browserRef={browserRef} />
+        <PageBrowser
+          isTemplateActivated={isTemplateActivated}
+          isReadOnly={isReadOnly || isEditLive}
+          browserRef={browserRef}
+        />
       }
       rightPanel={
         <ConfigPanel
@@ -90,6 +95,7 @@ const Editor = (props: IProps) => {
           lastElementAddedId={lastElementAddedId}
           header={header}
           footer={footer}
+          isEditLive={isEditLive}
         />
       }
     />
@@ -133,6 +139,7 @@ interface IPageBrowserDispatchProps {
   pageTitle: string;
   isReadOnly: boolean;
   browserRef: any;
+  isEditLive: boolean;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/PageEditor/index.tsx

@@ -66,6 +66,7 @@ const PageEditor = (props: IProps) => {
   const isLivePageChanged = editorContent && editorContent.liveChanged;
   const isTranslated = pageLanguages.length > 1;
   const structuredData = editorContent ? editorContent.structuredData : "";
+  const isEditLive = isPublished && hasDraft;
 
   const errorNotificationText =
     "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
@@ -189,12 +190,6 @@ const PageEditor = (props: IProps) => {
     updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
   };
 
-  const cancelPublishPage = () => {
-    const { updatePageStatus, pageID } = props;
-
-    updatePageStatus([pageID], pageStatus.OFFLINE);
-  };
-
   const reviewPage = async () => {
     const { validatePage } = props;
     const validated = await validatePage(false);
@@ -231,6 +226,13 @@ const PageEditor = (props: IProps) => {
     getPage(pageID);
   };
 
+  const handleCreateDraft = async () => {
+    const { savePage } = props;
+
+    const isSaved = await savePage(true);
+    if (isSaved) resetDirty();
+  };
+
   const getPublishButton = (status: string) => {
     switch (status) {
       case pageStatus.OFFLINE:
@@ -239,20 +241,16 @@ const PageEditor = (props: IProps) => {
           label: "Publish",
           action: publishPage,
         };
-      case pageStatus.UPLOAD_PENDING:
-        return {
-          label: "Cancel Publication",
-          action: cancelPublishPage,
-        };
       case pageStatus.PUBLISHED:
-        return !isGlobal && !hasDraft
+      case pageStatus.UPLOAD_PENDING:
+        return !isGlobal && !hasDraft && isDirty
           ? {
-              label: "Publish changes",
-              action: publishChanges,
+              label: "Create new draft",
+              action: handleCreateDraft,
             }
           : {
               label: "Unpublish",
-              action: unpublishPage,
+              action: hasDraft ? toggleUnpublishModal : unpublishPage,
             };
       case pageStatus.MODIFIED:
         return {
@@ -276,7 +274,7 @@ const PageEditor = (props: IProps) => {
   };
 
   const unpublishOption =
-    props.pageStatus === pageStatus.PUBLISHED && !hasDraft
+    props.pageStatus === pageStatus.PUBLISHED && !hasDraft && isDirty
       ? {
           label: "Unpublish",
           icon: "offline",
@@ -293,6 +291,14 @@ const PageEditor = (props: IProps) => {
         }
       : undefined;
 
+  const deleteOption = !isDraft
+    ? {
+        label: "Delete",
+        icon: "delete",
+        action: toggleDeleteModal,
+      }
+    : undefined;
+
   const menuOptions = !isGlobal
     ? [
         {
@@ -302,11 +308,7 @@ const PageEditor = (props: IProps) => {
         },
         unpublishOption,
         discardOption,
-        {
-          label: "Delete",
-          icon: "delete",
-          action: toggleDeleteModal,
-        },
+        deleteOption,
       ]
     : [];
 
@@ -319,14 +321,7 @@ const PageEditor = (props: IProps) => {
   const handleSavePage = async () => {
     const { savePage } = props;
 
-    const publishPage = {
-      status: pageStatus.UPLOAD_PENDING,
-    };
-
-    const createDraft = isPublished && !hasDraft && !isGlobal;
-    const status = props.pageStatus === pageStatus.PUBLISHED && !createDraft ? publishPage : undefined;
-
-    const isSaved = await savePage(createDraft, status);
+    const isSaved = await savePage(false);
     if (isSaved) resetDirty();
   };
 
@@ -381,9 +376,13 @@ const PageEditor = (props: IProps) => {
           ? "Saved"
           : isGlobal || (isPublished && hasDraft)
           ? "Save & publish"
-          : "Save draft";
+          : "Publish changes";
       default:
-        return !pageID || isNewTranslation ? "Save" : isDirty ? "Save" : "Saved";
+        return !pageID || isNewTranslation || (isDirty && props.pageStatus !== pageStatus.MODIFIED)
+          ? "Save"
+          : isDirty && props.pageStatus === pageStatus.MODIFIED
+          ? "Save draft"
+          : "Saved";
     }
   };
 
@@ -394,7 +393,7 @@ const PageEditor = (props: IProps) => {
       isSaving ||
       isReadOnly ||
       (!isTemplateActivated && !isGlobal),
-    action: handleSavePage,
+    action: isPublished ? publishChanges : handleSavePage,
   };
 
   const goToLivePage = () => {
@@ -415,7 +414,7 @@ const PageEditor = (props: IProps) => {
     props.pageStatus === pageStatus.PUBLISHED || isDraft
       ? [
           {
-            label: "View live",
+            label: "Go to live page",
             icon: "view",
             action: goToLivePage,
           },
@@ -426,7 +425,7 @@ const PageEditor = (props: IProps) => {
     isDraft || hasDraft
       ? [
           {
-            label: isDraft ? "Edit live" : "Edit draft",
+            label: isDraft ? "View live" : "Edit draft",
             icon: isDraft ? "active" : "modified",
             action: toggleDraftPage,
           },
@@ -543,6 +542,7 @@ const PageEditor = (props: IProps) => {
                 isReadOnly={isReadOnly}
                 browserRef={browserRef}
                 setNotification={setNotification}
+                isEditLive={isEditLive}
               />
             </S.Content>
           </>

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -225,7 +225,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const viewPage = () => window.open(globalPage.fullUrl || `${API_URL}/page/go/${globalPage.id}`, "_blank");
 
   const viewOption = {
-    label: "View live",
+    label: "View online",
     icon: "View",
     action: viewPage,
   };
@@ -238,7 +238,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
       color: true,
     },
     {
-      label: "Edit live page",
+      label: "View live",
       icon: "active",
       action: handleEditLivePage,
       color: true,