@griddo/ax 10.1.96 → 10.2.0

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

@@ -2,6 +2,7 @@ import React from "react";
 
 import { ISchema, ISchemaTab, ISchemaField } from "@ax/types";
 import { Tabs } from "@ax/components";
+import { usePermission } from "@ax/hooks";
 
 import ConnectedField from "./ConnectedField";
 
@@ -22,6 +23,16 @@ export const Form = (props: IFormProps): JSX.Element => {
     isEditLive,
   } = props;
 
+  const isAllowedToEditPageContent =
+    (!isGlobal && usePermission("content.editContentPages")) ||
+    (isGlobal && usePermission("global.globalData.editAllGlobalData"));
+  const isAllowedToEditPageConfig =
+    (!isGlobal && usePermission("content.editConfigPages")) ||
+    (isGlobal && usePermission("global.globalData.editAllGlobalData"));
+  const isAllowedToEditPageSEO =
+    (!isGlobal && usePermission("seoAnalytics.editSeoAnalyticsPages")) ||
+    (isGlobal && usePermission("global.seoAnalytics.editSeoAnalyticsInGlobalPages"));
+
   const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title === selectedTab);
   const setTab = (tab: string) => setSelectedTab(tab);
 
@@ -53,6 +64,7 @@ export const Form = (props: IFormProps): JSX.Element => {
   const getTabs = () => {
     let mappedTabs;
     const isHeader = schema.type === "header";
+    const isPageSchema = schema.schemaType === "page";
     if (isHeader && isPage) {
       mappedTabs = schema.configTabs
         .map((tab: ISchemaTab) => {
@@ -61,7 +73,18 @@ export const Form = (props: IFormProps): JSX.Element => {
         })
         .filter((value: string | boolean) => !!value);
     } else {
-      mappedTabs = schema.configTabs.map((tab: ISchemaTab) => tab.title);
+      mappedTabs = schema.configTabs.reduce((acc: string[], curr: ISchemaTab) => {
+        if (
+          !isPageSchema ||
+          (isPageSchema &&
+            ((curr.title === "content" && isAllowedToEditPageContent) ||
+              (curr.title === "config" && isAllowedToEditPageConfig) ||
+              (curr.title === "SEO & Analytics" && isAllowedToEditPageSEO)))
+        ) {
+          return [...acc, curr.title];
+        }
+        return acc;
+      }, []);
     }
 
     return mappedTabs;

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

@@ -2,27 +2,39 @@ import React from "react";
 import { themes } from "components";
 
 import { Icon, NoteField, Tabs } from "@ax/components";
-import { ISchema } from "@ax/types";
+import { INotification, ISchema } from "@ax/types";
+import { useGlobalPermission } from "@ax/hooks";
+
 import ConnectedField from "../Form/ConnectedField";
 
 import * as S from "./style";
 
 const noteText = "This is Global content and you cannot edit it here. To do so, you must go to the Global page";
 const noteTitle = "Global content";
+const errorText = "You don't have the permissions to edit the original content."
 
 const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
   const { selectedTab, setSelectedTab, schema, pageTitle, setHistoryPush, actions, header, footer } = props;
   const tabs = ["content", "config"];
 
+  const isAllowedToEditGlobalData = useGlobalPermission("global.globalData.editAllGlobalData");
+
   const handleGetGlobalPage = async () => {
     actions.saveCurrentSiteInfoAction();
     await actions.getGlobalFromLocalPageAction();
   };
 
   const handleClick = async () => {
-    await handleGetGlobalPage();
-    const path = "/data/pages/editor";
-    setHistoryPush && setHistoryPush(path, true);
+    if (isAllowedToEditGlobalData) {
+      await handleGetGlobalPage();
+      const path = "/data/pages/editor";
+      setHistoryPush && setHistoryPush(path, true);
+    } else {
+      actions.setNotificationAction({
+        type: "error",
+        text: errorText,
+      });
+    }
   };
 
   const parentField = {
@@ -172,6 +184,7 @@ export interface IGlobalPageFormProps {
     getGlobalFromLocalPageAction(): Promise<void>;
     saveCurrentSiteInfoAction(): Promise<void>;
     restorePageNavigationAction(type: string): Promise<void>;
+    setNotificationAction(notification: INotification): void;
   };
 }
 

package/src/components/ElementsTooltip/index.tsx

@@ -21,7 +21,7 @@ const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
   return (
     <S.Wrapper data-testid="elements-wrapper">
       {visibleElements.map((fullElement, idx) => {
-        const element = defaultElements === 1 && maxChar ? trimText(fullElement, maxChar) : fullElement;
+        const element = maxChar ? trimText(fullElement, maxChar) : fullElement;
         const color = colors && colors[element] ? colors[element] : undefined;
 
         return (

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

@@ -33,8 +33,8 @@ const IntegrationsField = (props: IIntegrationsFieldProps): JSX.Element => {
       pagination: false,
       filterState: "enable",
     };
-    getIntegrations(site.id, params, true);
-  }, [getIntegrations, site.id]);
+    site && getIntegrations(site.id, params, true);
+  }, [getIntegrations, site]);
 
   useEffect(() => {
     onChange && state && onChange(state);
@@ -63,10 +63,9 @@ const IntegrationsField = (props: IIntegrationsFieldProps): JSX.Element => {
       !state?.some((_integration: Partial<IIntegration>) => Number(_integration.id) === Number(integration.id))
   );
 
-  const timeSinceIntegrationCopy = !!integrationCopy && differenceInSeconds(new Date(), new Date(integrationCopy.date));
+  const timeSinceIntegrationCopy = !!integrationCopy ? differenceInSeconds(new Date(), new Date(integrationCopy.date)) : null;
   const eightHoursInSeconds = 8 * 60 * 60;
-  const showPasteIntegrationButton =
-    !disabled && !!integrationCopy && timeSinceIntegrationCopy < eightHoursInSeconds;
+  const showPasteIntegrationButton = !disabled && !!integrationCopy && timeSinceIntegrationCopy !== null && timeSinceIntegrationCopy < eightHoursInSeconds;
 
   const pasteIntegration = () => {
     integrationCopy && handleAdd(integrationCopy.integration);
@@ -127,7 +126,7 @@ interface IStateProps {
   value: Partial<IIntegration>[];
   onChange: (value: Partial<IIntegration>[]) => void;
   disabled: boolean;
-  site: ISite;
+  site: ISite | null;
   languages: ILanguage[];
   integrationCopy: { date: Date; integration: IIntegration } | null;
 }

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

@@ -32,7 +32,7 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
 
 export interface IRadioFieldProps {
   name: string;
-  title: string;
+  title?: string;
   value: string;
   checked?: boolean;
   error?: boolean;

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

@@ -186,11 +186,11 @@ const AutoPanel = (props: IProps): JSX.Element => {
           <S.SourceActions>
             {state.source && `${state.source.length} items`} {addSource}
           </S.SourceActions>
-          {state.source &&
+          {state.source && state.source.length > 0 &&
             state.source.map((singleSource: string) => {
               const sourceFilters = state.filter.filter((f: any) => f.source === singleSource);
               const source = state.sourceTitles.find((el: IDataSource) => el.id === singleSource);
-              return (
+              return source ? (
                 <AutoItem
                   key={singleSource}
                   source={source}
@@ -201,7 +201,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
                   site={site}
                   structuredDataSite={[...structuredData.site, ...categories.site]}
                 />
-              );
+              ) : <></>;
             })}
         </S.SourcesWrapper>
         <S.AllLanguagesWrapper>

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

@@ -112,7 +112,7 @@ const ItemList = (props: IProps) => {
 
 interface IProps {
   items: number[];
-  currentSite: number;
+  currentSite: number | null;
   handleListDelete(value: string[]): void;
   handleChange(newValue: any): void;
 }

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

@@ -24,7 +24,7 @@ const ManualPanel = (props: IProps) => {
   const { state, setState } = useReference();
 
   const [isLoading, setIsLoading] = useState(false);
-  const [selectedSource, setSelectedSource] = useState(state.sourceTitles[0].id);
+  const [selectedSource, setSelectedSource] = useState(state.sourceTitles[0]?.id);
   const [selectedLang, setSelectedLang] = useState(lang.id);
   const debouncedSearch = useDebounce(state.search);
 
@@ -58,7 +58,7 @@ const ManualPanel = (props: IProps) => {
       }
       setIsLoading(false);
     };
-    getAndSetItems();
+    selectedSource && getAndSetItems();
 
     return function cleanup() {
       isMounted = false;
@@ -193,7 +193,7 @@ const ManualPanel = (props: IProps) => {
 };
 
 interface IProps {
-  currentSite: number;
+  currentSite: number | null;
   onChange: (value: any) => void;
   hasMaxItems: boolean;
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;

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

@@ -4,7 +4,7 @@ import { Tag } from "@ax/components";
 import * as S from "./style";
 
 const TagsField = (props: IProps): JSX.Element => {
-  const { value, onChange } = props;
+  const { value, onChange, disabled } = props;
   const valueArray = value && Array.isArray(value) ? value : [];
   const [inputValue, setInputValue] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
@@ -40,7 +40,7 @@ const TagsField = (props: IProps): JSX.Element => {
       {valueArray &&
         valueArray.map((tag: string, index: number) => {
           const handleDelete = () => deleteTag(index);
-          return <Tag key={tag} text={tag} onDeleteAction={handleDelete} />;
+          return <Tag key={tag} text={tag} onDeleteAction={disabled ? undefined : handleDelete} />;
         })}
       <S.Input
         data-testid="tag-field-input"
@@ -50,6 +50,7 @@ const TagsField = (props: IProps): JSX.Element => {
         onChange={_handleChange}
         placeholder={placeholder}
         onKeyDown={_handleKeyDown}
+        disabled={disabled}
       />
     </S.Wrapper>
   );
@@ -59,6 +60,7 @@ interface IProps {
   value: string[];
   placeholder?: string;
   onChange: (value: string[]) => void;
+  disabled?: boolean;
 }
 
 export default TagsField;

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

@@ -23,6 +23,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
     handleValidation,
     validators,
     editorID,
+    autoFocus,
     inversed = false,
   } = props;
 
@@ -98,6 +99,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
         hasPrefix={!!prefix}
         prefixWidth={width}
         aria-label={name}
+        autoFocus={autoFocus}
       />
       {hasBackgroundIcon && (
         <S.BackgroundIcon data-testid="background-icon-component" onClick={onClickIcon} inversed={inversed}>
@@ -132,6 +134,7 @@ interface ITextFieldProps {
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
   validators?: Record<string, unknown>;
   editorID?: number;
+  autoFocus?: boolean;
   inversed?: boolean;
 }
 

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

@@ -113,12 +113,12 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
   };
 
   const validator = { format: "fullURL" };
-  const defensiveHref = value ? value.href : "";
+  const defensiveHref = value && value.href ? value.href : "";
 
   let field = (
     <TextField
       {...props}
-      value={defensiveHref || ""}
+      value={defensiveHref}
       onChange={handleChange}
       placeholder="http://"
       icon="urlLink"
@@ -145,14 +145,14 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
       type: "TextField" as Field,
       name: "title",
       title: "Title",
-      value: value ? value.title || internalPageName : "",
+      value: value && value.title ? value.title : internalPageName ? internalPageName : "",
       onChange: handleTitleChange,
     },
     {
       type: "UniqueCheck" as Field,
       name: "newTab",
       options: [{ title: "Open in new tab" }],
-      value: value ? value.newTab : null,
+      value: value && value.newTab ? value.newTab : null,
       onChange: handleNewTabChange,
     },
     {
@@ -225,7 +225,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 };
 
 export interface IUrlFieldProps {
-  value: IUrlField | null;
+  value?: IUrlField | null;
   title: string;
   onChange: (value: IUrlField | null) => void;
   showAdvanced: boolean;

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import { IImage, IRootState, IImageForm } from "@ax/types";
 import { Button, CheckField, FieldsBehavior, Toast, IconAction } from "@ax/components";
 import { formatBytes, getFileExtension, getFormattedDateWithTimezone } from "@ax/helpers";
+import { usePermission } from "@ax/hooks";
 
 import { galleryActions } from "@ax/containers/Gallery";
 import { IIsSaving } from "@ax/containers/Gallery/reducer";
@@ -34,6 +35,14 @@ const GalleryDetailPanel = (props: IProps) => {
   const [addToGlobal, setAddToGlobal] = useState({ value: "addToGlobal", isChecked: false });
   const [deletedToast, setDeletedToast] = useState(false);
 
+  const isAllowedToDelete =
+    (isGlobalTab && usePermission("mediaGallery.deleteGlobalImagesInSite")) ||
+    (!isGlobalTab && usePermission("mediaGallery.deleteImages"));
+  const isAllowedToEdit =
+    (isGlobalTab && usePermission("mediaGallery.editGlobalImagesInSite")) ||
+    (!isGlobalTab && usePermission("mediaGallery.editImages"));
+  const isAllowedToUploadGlobal = usePermission("mediaGallery.addGlobalImagesFromSite");
+
   const setInitForm = (imageSelected: IImage) => {
     const form = {
       id: imageSelected.id,
@@ -89,7 +98,13 @@ const GalleryDetailPanel = (props: IProps) => {
   const handleSaveAndAdd = async () => {
     if (imageForm.id) {
       await updateImage(imageForm.id, imageForm, true);
-      handleSetAsGlobal();
+      await handleSetAsGlobal();
+      setImage(imageForm);
+    }
+  };
+
+  const handleAdd = async () => {
+    if (imageForm.id) {
       setImage(imageForm);
     }
   };
@@ -134,7 +149,7 @@ const GalleryDetailPanel = (props: IProps) => {
     </S.AddToGlobal>
   );
 
-  const canSetAsGlobal = !isGlobalTab && imageSelected?.file;
+  const canSetAsGlobal = !isGlobalTab && imageSelected?.file && isAllowedToUploadGlobal;
 
   const renderImageForm = !imageSelected ? null : (
     <S.PanelForm>
@@ -170,6 +185,7 @@ const GalleryDetailPanel = (props: IProps) => {
           value={imageForm.title}
           fieldType="TextField"
           onChange={handleTitle}
+          disabled={!isAllowedToEdit}
         />
         <FieldsBehavior
           title="Alternative text"
@@ -177,6 +193,7 @@ const GalleryDetailPanel = (props: IProps) => {
           value={imageForm.alt}
           fieldType="TextField"
           onChange={handleAlt}
+          disabled={!isAllowedToEdit}
         />
         <FieldsBehavior
           title="Description"
@@ -184,8 +201,9 @@ const GalleryDetailPanel = (props: IProps) => {
           value={imageForm.description}
           fieldType="TextArea"
           onChange={handleDescription}
+          disabled={!isAllowedToEdit}
         />
-        <FieldsBehavior title="Tags" value={imageForm.tags} fieldType="TagsField" onChange={handleTags} />
+        <FieldsBehavior title="Tags" value={imageForm.tags} fieldType="TagsField" onChange={handleTags} disabled={!isAllowedToEdit} />
       </S.FormWrapper>
     </S.PanelForm>
   );
@@ -194,29 +212,38 @@ const GalleryDetailPanel = (props: IProps) => {
     <S.DetailPanelWrapper data-testid="detail-panel-wrapper" hidden={!isImageSelected}>
       {renderImageForm}
       <S.PanelActions>
-        <Button
-          type="button"
-          buttonStyle="text"
-          onClick={handleDelete}
-          disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
-        >
-          {isSaving.delete ? `Deleting` : `Delete`}
-        </Button>
-        <Button
+        {isAllowedToDelete && (
+          <Button
+            type="button"
+            buttonStyle="text"
+            onClick={handleDelete}
+            disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
+          >
+            {isSaving.delete ? `Deleting` : `Delete`}
+          </Button>
+        )}
+        {isAllowedToEdit && <Button
           type="button"
           buttonStyle="line"
           onClick={handleSave}
           disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
         >
           {isSaving.save ? `Saving` : `Save`}
-        </Button>
-        <Button
+        </Button>}
+        {isAllowedToEdit && <Button
           type="button"
           onClick={handleSaveAndAdd}
           disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
         >
           {isSaving.saveAdd ? `Saving` : `Save & Add`}
-        </Button>
+        </Button>}
+        {!isAllowedToEdit && <Button
+          type="button"
+          onClick={handleAdd}
+          disabled={isSaving.delete}
+        >
+          Add
+        </Button>}
       </S.PanelActions>
       {deletedToast && <Toast message="1 image deleted" setIsVisible={setDeletedToast} />}
     </S.DetailPanelWrapper>

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/index.tsx

@@ -188,7 +188,7 @@ const GalleryDragAndDrop = (props: IProps) => {
 export interface IGalleryDragAndDropProps {
   isImageSelected: boolean;
   validFormats: string[];
-  site: number | string;
+  site: number | "global";
   allowUpload: boolean;
   refreshImages: () => Promise<void>;
   isUploading: boolean;

package/src/components/Gallery/GalleryPanel/index.tsx

@@ -1,21 +1,35 @@
 import React, { memo } from "react";
 
-import { IImage } from "@ax/types";
+import { IImage, ISite } from "@ax/types";
+import { usePermission } from "@ax/hooks";
 
 import GalleryDragAndDrop from "./GalleryDragAndDrop";
 import DetailPanel from "./DetailPanel";
 import * as S from "./style";
 
 const GalleryPanel = (props: IGalleryPanelProps) => {
-  const { imageSelected, validFormats, setImage, isGlobalTab, site, selectedTab, refreshImages, selectImage } = props;
-  const allowUpload = !isGlobalTab || !selectedTab;
+  const {
+    imageSelected,
+    validFormats,
+    setImage,
+    isGlobalTab,
+    scope,
+    selectedTab,
+    site,
+    refreshImages,
+    selectImage
+  } = props;
+
+  const isAllowedToUpload = usePermission("mediaGallery.addImages");
+
+  const allowUpload = (site && (!isGlobalTab || !selectedTab) && isAllowedToUpload) || (!site && isAllowedToUpload);
 
   return (
     <S.GalleryPanel>
       <GalleryDragAndDrop
         isImageSelected={!!imageSelected}
         validFormats={validFormats}
-        site={site}
+        site={scope}
         allowUpload={allowUpload}
         refreshImages={refreshImages}
         selectImage={selectImage}
@@ -37,9 +51,10 @@ export interface IGalleryPanelProps {
   validFormats: string[];
   setImage: (imageData: any) => void;
   isGlobalTab: boolean;
-  site: number | string;
+  scope: number | "global";
   selectedTab: string;
   refreshImages: () => Promise<void>;
+  site: ISite | null;
   selectImage(item: IImage | null): void;
 }
 

package/src/components/Gallery/index.tsx

@@ -5,6 +5,7 @@ import { galleryActions } from "@ax/containers/Gallery";
 import { IData, IIsLoading } from "@ax/containers/Gallery/reducer";
 import { IGetSiteImages, IImage, IRootState, ISite } from "@ax/types";
 import { Icon, Loader, Tabs, SearchField, EmptyState, ErrorToast, Notification } from "@ax/components";
+import { usePermission } from "@ax/hooks";
 
 import Orientation from "./GalleryFilters/Orientation";
 import SortBy from "./GalleryFilters/SortBy";
@@ -21,13 +22,17 @@ const firstPage = 1;
 const Gallery = (props: IProps): JSX.Element => {
   const { data, isLoading, getSiteImages, getImageSelected, toggleModal, site, uploadError } = props;
 
-  const tabs = [];
-  if (site) tabs.unshift(...["Local", "Global"]);
-  const [selectedTab, setSelectedTab] = useState(tabs[0]);
+  const isAllowedToAccessGlobalImages = usePermission("mediaGallery.accessToGlobalGalleryFromSite");
+
+  const tabs: string[] = [];
+  if (site && isAllowedToAccessGlobalImages) {
+    tabs.unshift(...["Local", "Global"]);
+  }
+  const [selectedTab, setSelectedTab] = useState(site ? "Local" : "Global");
   const [selectedImage, setSelectedImage] = useState<IImage | null>(null);
   const isLocalTab = selectedTab === "Local";
   const isGlobalTab = selectedTab === "Global";
-  const galleryScope = isLocalTab ? site.id : "global";
+  const galleryScope = isLocalTab && site ? site.id : "global";
 
   const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
 
@@ -213,9 +218,10 @@ const Gallery = (props: IProps): JSX.Element => {
         validFormats={validFormats}
         setImage={setImage}
         isGlobalTab={!isLocalTab}
-        site={galleryScope}
+        scope={galleryScope}
         selectedTab={selectedTab}
         refreshImages={refreshImages}
+        site={site}
         selectImage={setSelectedImage}
       />
     </S.Wrapper>
@@ -225,7 +231,7 @@ const Gallery = (props: IProps): JSX.Element => {
 export interface IGalleryProps {
   getImageSelected: (img: IImage | null) => void;
   toggleModal: () => void;
-  site: ISite;
+  site: ISite | null;
   data: IData;
   isLoading: IIsLoading;
 }

package/src/components/Icon/index.tsx

@@ -23,7 +23,15 @@ const Icon = (props: IProps) => {
   const Svg = getImage(name);
 
   if (Svg) {
-    return <Svg data-testid="icon-component" height={size} width={size} viewBox="0 0 24 24" fill={fill} />;
+    return (
+      <Svg
+        data-testid={`icon-component-${name.toLowerCase()}`}
+        height={size}
+        width={size}
+        viewBox="0 0 24 24"
+        fill={fill}
+      />
+    );
   }
 
   return null;

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

@@ -32,7 +32,7 @@ const ActionMenu = (props: any) => {
   const { menu } = props;
   return (
     menu &&
-    menu.options && (
+    menu.options.length > 0 && (
       <S.ActionMenu>
         <S.ActionMenuTitle> More actions </S.ActionMenuTitle>
         <ActionMenuBtn menu={menu} />
@@ -52,7 +52,7 @@ const ActionSimpleMenu = (props: any) => {
   const { menu } = props;
   return (
     menu &&
-    menu.options && (
+    menu.options.length > 0 && (
       <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

@@ -142,14 +142,16 @@ const AppBar = (props: IProps): JSX.Element => {
     options: pageStatusActions,
   };
 
-  const PageStatus = () =>
-    statusMenu.options && statusMenu.options.length > 0 ? (
-      <FloatingMenu Button={StatusBtn} isInAppBar={true} position="left" offset={-20}>
+  const PageStatus = () => {
+    const offset = rightButton || rightLineButton  ? -20 : -135;
+    return statusMenu.options && statusMenu.options.length > 0 ? (
+      <FloatingMenu Button={StatusBtn} isInAppBar={true} position="left" offset={offset}>
         <ActionSimpleMenu menu={statusMenu} />
       </FloatingMenu>
     ) : (
       <Icon name={pageStatus ?? "offline"} size="24" />
     );
+  }
 
   const languageTooltip = typeof currentPageID === "number" && "Add language";
 
@@ -195,34 +197,34 @@ const AppBar = (props: IProps): JSX.Element => {
                 closeOnInactive
               />
             </S.SearchWrapper>
-            <S.Separator />
+            {(language || pageStatus || rightButton || rightLineButton) && <S.Separator />}
           </>
         )}
         {language && (
           <>
             <S.LanguageWrapper data-testid="language-wrapper">
               <Tooltip content={languageTooltip} hideOnClick bottom>
-                <FloatingMenu Button={LanguageBtn} isInAppBar={true} position="left">
+                <FloatingMenu Button={LanguageBtn} isInAppBar={true} position="left" offset={rightButton || rightLineButton ? 0 : -85}>
                   {languageMenu}
                 </FloatingMenu>
               </Tooltip>
             </S.LanguageWrapper>
-            <S.Separator />
+            {(pageStatus || rightButton || rightLineButton ) && <S.Separator />}
           </>
         )}
         {pageStatus && (
           <>
-            <S.IconStatusWrapper data-testid="page-status-wrapper">
+            <S.IconStatusWrapper data-testid="page-status-wrapper" last={!rightButton && !rightLineButton}>
               <Tooltip content={publishedTooltip[pageStatus]} bottom>
                 <PageStatus />
               </Tooltip>
             </S.IconStatusWrapper>
-            <S.Separator />
+            {(rightButton || rightLineButton ) && <S.Separator />}
           </>
         )}
         {isFromEditor && errors && errors.length > 0 && (
           <>
-            <S.IconStatusWrapper data-testid="error-center-wrapper">
+            <S.IconStatusWrapper last={false} data-testid="error-center-wrapper">
               <FloatingMenu Button={ErrorCenterBtn} isInAppBar={true} position="left" offset={-20}>
                 <ErrorCenter errors={errors} actions={errorActions} />
               </FloatingMenu>
@@ -246,7 +248,7 @@ const AppBar = (props: IProps): JSX.Element => {
             {rightButton.label}
           </Button>
         )}
-        {downArrowMenu && downArrowMenu.displayed && (
+        {downArrowMenu && downArrowMenu.displayed && (downArrowMenu.button || downArrowMenu.options.length > 0) && (
           <Tooltip content="Actions" hideOnClick bottom>
             <FloatingMenu Button={DownArrowButton} isInAppBar={true}>
               <ActionMenu menu={downArrowMenu} />