@griddo/ax 1.62.6 → 1.63.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.62.6",
+  "version": "1.63.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -50,7 +50,7 @@
     "@types/node": "12.11.1",
     "@types/react": "^17.0.37",
     "@types/react-datepicker": "^3.1.1",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^17.0.14",
     "@types/react-draft-wysiwyg": "^1.13.1",
     "@types/react-redux": "7.1.4",
     "@types/react-router-dom": "5.1.2",
@@ -108,12 +108,13 @@
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "^6.0.0",
-    "react": "^18.0.0-rc.0-next-3b3daf557-20211210",
+    "react": "^18.0.0",
     "react-app-polyfill": "^1.0.4",
     "react-datepicker": "^3.2.2",
     "react-dev-utils": "^11.0.4",
-    "react-dom": "^18.0.0-rc.0-next-3b3daf557-20211210",
+    "react-dom": "^18.0.0",
     "react-draft-wysiwyg": "^1.14.5",
+    "react-frame-component": "^5.2.1",
     "react-froala-wysiwyg": "3.1.0",
     "react-redux": "7.1.1",
     "react-refresh": "^0.10.0",
@@ -244,5 +245,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b0c7944b7f9e7b51dd7bb08bc1a033f87a23bf87"
+  "gitHead": "69750b52129be69bba914bafa77c6b96f19514eb"
 }

package/src/GlobalStore.tsx

@@ -37,7 +37,7 @@ export class GlobalStore {
 
     const globalReducer: Reducer<any> = combineReducers({
       router: connectRouter(history),
-      app: persistReducer(this.authPersistConfig, appReducer),
+      app: persistReducer(this.authPersistConfig, appReducer as Reducer<any, Action<any>>),
       sites: sitesReducer as Reducer<any, Action<any>>,
       pageEditor: pageEditorReducer as Reducer<any, Action<any>>,
       menu: menuReducer as Reducer<any, Action<any>>,

package/src/Style/index.tsx

@@ -21,6 +21,8 @@ const GlobalStyle = createGlobalStyle`
     width: 100%;
     -webkit-font-smoothing: antialiased;
     overscroll-behavior: none;
+  }
+  body {
     min-width: 1280px;
   }
   * { box-sizing: border-box; }

package/src/api/pages.tsx

@@ -1,6 +1,8 @@
 import { template } from "./config";
 import { IServiceConfig, sendRequest } from "./utils";
 
+const PUBLIC_BASE_PATH = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+
 const SERVICES: { [key: string]: IServiceConfig } = {
   GET_PAGE_INFO: {
     ...template,
@@ -67,6 +69,12 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/page/", "/ping"],
     method: "POST",
   },
+  GET_PUPLIC_PAGE: {
+    ...template,
+    host: PUBLIC_BASE_PATH,
+    endpoint: ["/page/", "/preview/"],
+    method: "GET",
+  },
 };
 
 const getPageInfo = async (pageID: number) => {
@@ -180,6 +188,17 @@ const sendPagePing = async (pageID: number) => {
   return sendRequest(SERVICES.PAGE_PING);
 };
 
+const getPublicPage = async (pageID: number, entity: string) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_PUPLIC_PAGE;
+
+  SERVICES.GET_PUPLIC_PAGE.dynamicUrl = `${host}${prefix}${pageID}${suffix}${entity}`;
+
+  return sendRequest(SERVICES.GET_PUPLIC_PAGE);
+};
+
 export default {
   getPageInfo,
   updatePage,
@@ -194,4 +213,5 @@ export default {
   restorePage,
   bulkRestore,
   sendPagePing,
+  getPublicPage,
 };

package/src/api/utils.tsx

@@ -10,10 +10,13 @@ export interface IServiceConfig {
   dynamicUrl?: string;
 }
 
-const getToken = (): Record<string, unknown> => {
+const getToken = (): Record<string, unknown> | null => {
   // non-null assertion - we will always have token when here
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  let { token } = JSON.parse(localStorage.getItem("persist:app")!);
+  const app = localStorage.getItem("persist:app");
+  if (!app) return null;
+
+  let { token } = JSON.parse(app);
   token = JSON.parse(token);
   const authorization = { Authorization: `bearer ${token}` };
 

package/src/components/Browser/index.tsx

@@ -1,79 +1,182 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import { FrameContextConsumer } from "react-frame-component";
+import { StyleSheetManager } from "styled-components";
 
 import * as components from "components";
-import { providers, translations, cloudinaryDefaults } from "components";
+import { providers, translations, cloudinaryDefaults, griddoDamDefaults } from "components";
 import { Preview } from "@griddo/core";
-
 import { findByEditorID } from "@ax/forms";
+import { copyTextToClipboard } from "@ax/helpers";
+import { useToast } from "@ax/hooks";
+import Icon from "../Icon";
+import Tooltip from "../Tooltip";
+import Toast from "../Toast";
 
 import * as S from "./style";
 
 const Browser = (props: IBrowserProps): JSX.Element => {
-  const { url, content, header, footer, isPage, theme, socials, cloudinaryName, siteLangs, disabled, siteID } = props;
+  const {
+    url,
+    content,
+    header,
+    footer,
+    isPage,
+    theme,
+    socials,
+    cloudinaryName,
+    siteLangs,
+    disabled,
+    siteID,
+    isPreview,
+    damDomain,
+    setSelectedContent,
+  } = props;
 
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
   const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
   const { SiteProvider, AnimationProvider } = providers;
 
+  const [resolution, setResolution] = useState("desktop");
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+
   useEffect(() => {
     localStorage.setItem("selectedID", "0");
     (window as any).browserRef = null;
   }, []);
 
   const selectEditorID = (
-    selectedComponent: { editorID: number; component: any; type: string, parentEditorID: number },
+    selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
     parentComponent: string | undefined | null,
     e: React.SyntheticEvent
   ) => {
     const { element } = findByEditorID(content, selectedComponent.parentEditorID);
     element && e.stopPropagation();
 
-    const { setSelectedContent } = props;
-
     const parent = selectedComponent.component === "Page" ? null : "Page";
 
     const { editorID } = selectedComponent;
 
     const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
 
-    if (!disabled || isNavigationModule) {
-      setSelectedContent(editorID, parent);
+    if (!isPreview && (!disabled || isNavigationModule)) {
+      setSelectedContent && setSelectedContent(editorID, parent);
+    }
+  };
+
+  const getWidth = (res: string) => {
+    switch (res) {
+      case "tablet":
+        return "768px";
+      case "phone":
+        return "425px";
+      default:
+        return "100%";
     }
   };
 
+  const copyUrl = () => {
+    const { id, entity } = content;
+    const domain = window.location.origin;
+    const url = `${domain}/page-preview/${id}/${entity}`;
+    copyTextToClipboard(url).then(
+      function () {
+        toggleToast();
+      },
+      function (err) {
+        console.error("Could not copy text: ", err);
+      }
+    );
+  };
+
+  const toastProps = {
+    setIsVisible,
+    message: "URL Copied",
+  };
+
+  const Providers = (
+    <SiteProvider
+      cloudinaryCloudName={cloudinaryName}
+      damDomain={damDomain}
+      theme={theme}
+      socials={socials}
+      siteLangs={siteLangs}
+      translations={translations}
+      selectEditorID={selectEditorID}
+      cloudinaryDefaults={cloudinaryDefaults}
+      griddoDamDefaults={griddoDamDefaults}
+      renderer="editor"
+      apiUrl={API_URL}
+      publicApiUrl={PUBLIC_API_URL}
+      siteId={siteID}
+    >
+      <AnimationProvider showOnScroll={{ active: false }}>
+        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+          <Preview
+            isPage={isPage}
+            apiUrl={API_URL}
+            library={components}
+            content={content}
+            header={header}
+            footer={footer}
+            languageId={content.language}
+            pageLanguages={content.pageLanguages}
+          />
+        </S.Wrapper>
+      </AnimationProvider>
+    </SiteProvider>
+  );
+
+  const getStylesFromHeader = () => {
+    const header = document.head.innerHTML;
+
+    return header.replace(/<style data-styled="active" \b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, "");
+  };
+
+  const initialContent = `<!DOCTYPE html><html><head>${getStylesFromHeader()}</head><body><div></div></body></html>`;
+
   return (
     <S.BrowserWrapper>
       <S.NavBar>
         <S.NavUrl>{url}</S.NavUrl>
+        {isPreview && (
+          <S.NavActions>
+            <S.IconWrapper onClick={copyUrl}>
+              <Tooltip content="Copy url to share draft" bottom>
+                <Icon name="share" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+            <S.IconWrapper active={resolution === "desktop"} onClick={() => setResolution("desktop")}>
+              <Tooltip content="Desktop" bottom>
+                <Icon name="desktop" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+            <S.IconWrapper active={resolution === "tablet"} onClick={() => setResolution("tablet")}>
+              <Tooltip content="Tablet" bottom>
+                <Icon name="tablet" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+            <S.IconWrapper active={resolution === "phone"} onClick={() => setResolution("phone")}>
+              <Tooltip content="Mobile" bottom>
+                <Icon name="phone" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+          </S.NavActions>
+        )}
       </S.NavBar>
-      <SiteProvider
-        cloudinaryCloudName={cloudinaryName}
-        theme={theme}
-        socials={socials}
-        siteLangs={siteLangs}
-        translations={translations}
-        selectEditorID={selectEditorID}
-        cloudinaryDefaults={cloudinaryDefaults}
-        renderer="editor"
-        apiUrl={API_URL}
-        publicApiUrl={PUBLIC_API_URL}
-        siteId={siteID}
-      >
-        <AnimationProvider showOnScroll={{ active: false }}>
-          <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
-            <Preview
-              isPage={isPage}
-              apiUrl={API_URL}
-              library={components}
-              content={content}
-              header={header}
-              footer={footer}
-              languageId={content.language}
-              pageLanguages={content.pageLanguages}
-            />
-          </S.Wrapper>
-        </AnimationProvider>
-      </SiteProvider>
+      {isPreview ? (
+        <S.FrameWrapper>
+          <S.StyledFrame width={getWidth(resolution)} height="100%" initialContent={initialContent}>
+            <FrameContextConsumer>
+              {(frameContext: any) => (
+                <StyleSheetManager target={frameContext.document.head}>{Providers}</StyleSheetManager>
+              )}
+            </FrameContextConsumer>
+          </S.StyledFrame>
+        </S.FrameWrapper>
+      ) : (
+        <>{Providers}</>
+      )}
+      {isVisible && <Toast {...toastProps} />}
     </S.BrowserWrapper>
   );
 };
@@ -84,14 +187,16 @@ interface IBrowserProps {
   footer?: any;
   selectedEditorID: number;
   url: string;
-  setSelectedContent: any;
+  setSelectedContent?: any;
   isPage: boolean;
   theme: string;
   socials: any;
-  cloudinaryName: string;
+  cloudinaryName: string | null;
+  damDomain: string | null;
   siteLangs: any[];
   disabled?: boolean;
   siteID?: number;
+  isPreview?: boolean;
 }
 
 export default Browser;

package/src/components/Browser/style.tsx

@@ -1,15 +1,16 @@
 import styled from "styled-components";
+import Frame from "react-frame-component";
 
-export const BrowserWrapper = styled.div`
-  background: #fff;
+const BrowserWrapper = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground01};
   height: 100%;
   width: 100%;
 `;
 
-export const Wrapper = styled.div`
-  border-left: 1px solid #DBDDE9;
-  border-right: 1px solid #DBDDE9;
-  border-bottom: 1px solid #DBDDE9;
+const Wrapper = styled.div`
+  border-left: 1px solid ${(p) => p.theme.color.uiLine};
+  border-right: 1px solid ${(p) => p.theme.color.uiLine};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   overflow: auto;
   scroll-behavior: smooth;
   height: 100%;
@@ -20,19 +21,54 @@ export const Wrapper = styled.div`
   }
 `;
 
-// TODO: cambiar color del fondo por el del tema
-export const NavBar = styled.div`
-  background-color: #e6e7f9;
+const NavBar = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.color.uiBackground03};
   border-radius: 4px 4px 0 0;
   height: calc(${(p) => p.theme.spacing.m} + (${(p) => p.theme.spacing.xs} * 2));
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.m};
 `;
 
-export const NavUrl = styled.div`
+const NavUrl = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
-  background-color: #ffffff;
+  background-color: ${(p) => p.theme.color.uiBackground02};
   border-radius: 10px;
   color: ${(p) => p.theme.color.textMediumEmphasis};
   height: ${(p) => p.theme.spacing.m};
   padding: ${(p) => p.theme.spacing.xxs} ${(p) => p.theme.spacing.s};
+  width: 100%;
+`;
+
+const NavActions = styled.div`
+  display: flex;
+  padding-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const IconWrapper = styled.div<{ active?: boolean }>`
+  margin-left: ${(p) => p.theme.spacing.m};
+  cursor: pointer;
+  :hover {
+    svg {
+      path {
+        fill: ${(p) => p.theme.color.interactive01};
+      }
+    }
+  }
+  svg {
+    path {
+      fill: ${(p) => (p.active ? p.theme.color.interactive01 : p.theme.color.iconNonActive)};
+    }
+  }
 `;
+
+const FrameWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  height: 100%;
+`;
+
+const StyledFrame = styled(Frame)`
+  box-shadow: ${(p) => p.theme.shadow.shadowL};
+`;
+
+export { BrowserWrapper, Wrapper, NavBar, NavUrl, NavActions, IconWrapper, FrameWrapper, StyledFrame };

package/src/components/ConfigPanel/index.tsx

@@ -28,7 +28,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
     isEditable,
     pageTitle,
     setHistoryPush,
-    isPreviewMode,
+    isReadOnly,
     userEditing,
     theme,
   } = props;
@@ -41,7 +41,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
   const isGlobalPageNotEditable = isGlobal && isPage && !isEditable;
 
   const getForm = () => {
-    if (isPreviewMode) {
+    if (isReadOnly) {
       return <PreviewForm setSelectedTab={setSelectedTab} selectedTab={selectedTab} userEditing={userEditing} />;
     } else if (showNavigationForm) {
       return <NavigationForm schema={schema} theme={theme} />;
@@ -102,7 +102,7 @@ interface IStateProps {
   isGlobal?: boolean;
   pageTitle?: string;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
-  isPreviewMode?: boolean;
+  isReadOnly?: boolean;
   userEditing?: IUserEditing | null;
   theme: string;
 }

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

@@ -12,7 +12,7 @@ import * as S from "./style";
 const RichText = (props: IRichTextProps): JSX.Element => {
   const { value, error, placeholder, onChange, disabled, editorID, handleValidation, html = false } = props;
 
-  const rawData = html ? htmlToDraft(value) : markdownToDraft(value);
+  const rawData = html ? htmlToDraft(value || "") : markdownToDraft(value);
   const { contentBlocks, entityMap } = rawData;
   const contentState = html ? ContentState.createFromBlockArray(contentBlocks, entityMap) : convertFromRaw(rawData);
 
@@ -20,7 +20,7 @@ const RichText = (props: IRichTextProps): JSX.Element => {
   const timeOutRef = useRef<ReturnType<typeof setTimeout>>();
 
   useEffect(() => {
-    const rawData = html ? htmlToDraft(value) : markdownToDraft(value);
+    const rawData = html ? htmlToDraft(value || "") : markdownToDraft(value);
     const { contentBlocks, entityMap } = rawData;
     const contentState = html ? ContentState.createFromBlockArray(contentBlocks, entityMap) : convertFromRaw(rawData);
     setEditorState(EditorState.createWithContent(contentState));

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

@@ -13,9 +13,18 @@ const findAnchorsFromPage = (page: IPage): ISelectOption[] => {
         const option = { value: module.anchorID, label: module.anchorID };
         options.push(option);
       }
+      if (module.elements) {
+        module.elements.forEach((element: any) => {
+          element.componentModules && element.componentModules.forEach((component: any) => {
+            if (component.anchorID && component.anchorID.trim() !== "") {
+              const option = { value: component.anchorID, label: component.anchorID };
+              options.push(option);
+            }
+          });
+        });
+      }
     });
   });
-
   return options;
 };
 

package/src/components/Icon/components/Desktop.js

@@ -1,8 +1,13 @@
-import React from "react";
+import * as React from "react";
 
-const SvgDesktop = props => (
-  <svg width={24} height={24} fill="none" {...props}>
-    <path fillRule="evenodd" clipRule="evenodd" d="M3 2h18c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2h-7v2h2v2H8v-2h2v-2H3c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2zm0 14h18V4H3v12z" fill="#5057FF" />
+const SvgDesktop = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 2h18c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2h-7v2h2v2H8v-2h2v-2H3c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2Zm0 14h18V4H3v12Z"
+      fill="#5057FF"
+    />
   </svg>
 );
 

package/src/components/Icon/components/Phone.js

@@ -1,11 +1,11 @@
-import React from "react";
+import * as React from "react";
 
-const SvgPhone = props => (
-  <svg width={24} height={24} fill="none" {...props}>
+const SvgPhone = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M15.5 1h-8A2.5 2.5 0 005 3.5v17A2.5 2.5 0 007.5 23h8a2.5 2.5 0 002.5-2.5v-17A2.5 2.5 0 0015.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM7 18h9V4H7v14z"
+      d="M15.5 1h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1Zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5ZM7 18h9V4H7v14Z"
       fill="#5057FF"
     />
   </svg>

package/src/components/Icon/components/Share.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+const SvgShare = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92 0-1.61-1.31-2.92-2.92-2.92Z"
+      fill="#5057FF"
+    />
+  </svg>
+);
+
+export default SvgShare;

package/src/components/Icon/components/Tablet.js

@@ -1,11 +1,11 @@
-import React from "react";
+import * as React from "react";
 
-const SvgTablet = props => (
-  <svg width={24} height={24} fill="none" {...props}>
+const SvgTablet = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M18.5 0h-14A2.5 2.5 0 002 2.5v19A2.5 2.5 0 004.5 24h14a2.5 2.5 0 002.5-2.5v-19A2.5 2.5 0 0018.5 0zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM4 19h15V3H4v16z"
+      d="M18.5 0h-14A2.5 2.5 0 0 0 2 2.5v19A2.5 2.5 0 0 0 4.5 24h14a2.5 2.5 0 0 0 2.5-2.5v-19A2.5 2.5 0 0 0 18.5 0Zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5ZM4 19h15V3H4v16Z"
       fill="#5057FF"
     />
   </svg>

package/src/components/Icon/svgs/Share.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5C21 3.34 19.66 2 18 2C16.34 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.35C15.11 18.56 15.08 18.78 15.08 19C15.08 20.61 16.39 21.92 18 21.92C19.61 21.92 20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08Z" fill="#5057FF"/>
+</svg>

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

@@ -2,6 +2,7 @@ import React from "react";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
 import { IErrorItem } from "@ax/types";
+import { trimText } from "@ax/helpers";
 import {
   Button,
   Icon,
@@ -144,19 +145,30 @@ const AppBar = (props: IProps): JSX.Element => {
 
   return (
     <S.Header className={`${fixedClass} ${additionalClass}`} inversed={inversed}>
-      <S.Wrapper>
+      <S.WrapperTitle>
         {backLink && (
           <Tooltip content="Back to content screen" bottom>
             <IconAction icon="FullArrowLeft" onClick={goToPages} inversed={inversed} />
           </Tooltip>
         )}
         <S.Title>
-          {title}
+          {trimText(title, 50)}
           <S.Subtitle>{subtitle}</S.Subtitle>
         </S.Title>
-        {tabs && <Tabs tabs={tabs.tabSet} active={tabs.selectedTab} setSelectedTab={tabs.action} isInAppBar={true} />}
-      </S.Wrapper>
-      <S.Wrapper>
+      </S.WrapperTitle>
+      {tabs && (
+        <S.WrapperTabs>
+          <Tabs
+            tabs={tabs.tabSet}
+            icons={tabs.icons}
+            active={tabs.selectedTab}
+            setSelectedTab={tabs.action}
+            isInAppBar={true}
+            inversed={inversed}
+          />
+        </S.WrapperTabs>
+      )}
+      <S.WrapperEnd>
         {searchAction && (
           <>
             <S.SearchWrapper>
@@ -220,7 +232,7 @@ const AppBar = (props: IProps): JSX.Element => {
             </FloatingMenu>
           </Tooltip>
         )}
-      </S.Wrapper>
+      </S.WrapperEnd>
     </S.Header>
   );
 };
@@ -229,7 +241,7 @@ interface IAppBarProps {
   backLink?: boolean | string;
   rightButton?: { label: string; disabled?: boolean; action: (e: any) => void };
   rightLineButton?: { label: string; disabled?: boolean; action: (e: any) => void };
-  tabs?: { tabSet: any; selectedTab: string; action: (e: any) => void };
+  tabs?: { tabSet?: any; icons?: { name: string; text: string }[]; selectedTab: string; action: (e: any) => void };
   downArrowMenu?: { displayed: boolean; options: any; button: any };
   title: string;
   subtitle?: string;