Hide toolbar in app page (#2938)

* Hide toolbar in app page

* Remove back button from app frame page

locale/defaultMessages.json

@@ -4167,10 +4167,6 @@
     "context": "searchbar placeholder",
     "string": "Country"
   },
-  "UCHtG6": {
-    "context": "button",
-    "string": "About"
-  },
   "UD7/q8": {
     "string": "No Products added to Order"
   },

src/apps/components/AppPage/AppPage.stories.tsx

@@ -8,7 +8,6 @@ import AppPage, { AppPageProps } from "./AppPage";
 const props: AppPageProps = {
   data: appDetails,
   url: appDetails.appUrl!,
-  aboutHref: "",
   onError: () => undefined,
 };
 

src/apps/components/AppPage/AppPage.tsx

@@ -1,81 +1,27 @@
-import { Typography } from "@material-ui/core";
-import { appsListPath } from "@saleor/apps/urls";
-import { Backlink } from "@saleor/components/Backlink";
-import { Button } from "@saleor/components/Button";
-import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
-import Grid from "@saleor/components/Grid";
-import Hr from "@saleor/components/Hr";
 import { AppQuery } from "@saleor/graphql";
-import { sectionNames } from "@saleor/intl";
-import clsx from "clsx";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
 
 import { AppFrame } from "../AppFrame";
 import { useStyles } from "./styles";
-import useSettingsBreadcrumbs from "./useSettingsBreadcrumbs";
 
 export interface AppPageProps {
   data: AppQuery["app"];
   url: string;
   onError: () => void;
-  aboutHref: string;
   refetch?: () => void;
 }
 
 export const AppPage: React.FC<AppPageProps> = ({
   data,
   url,
-  aboutHref,
   onError,
   refetch,
 }) => {
-  const intl = useIntl();
-  const classes = useStyles({});
-  const [breadcrumbs, onBreadcrumbClick] = useSettingsBreadcrumbs();
+  const classes = useStyles();
 
   return (
-    <Container>
-      <Backlink href={appsListPath}>
-        {intl.formatMessage(sectionNames.apps)}
-      </Backlink>
-      <Grid variant="uniform">
-        <div className={classes.breadcrumbContainer}>
-          <div className={classes.breadcrumbs}>
-            <Typography
-              className={clsx(classes.breadcrumb, classes.breadcrumbDisabled)}
-              variant="h5"
-            >
-              {data?.name}
-            </Typography>
-            {breadcrumbs.map(b => (
-              <Typography
-                className={classes.breadcrumb}
-                variant="h5"
-                onClick={() => onBreadcrumbClick(b.value)}
-                key={b.label}
-              >
-                {b.label}
-              </Typography>
-            ))}
-          </div>
-        </div>
-        <div className={classes.appSettingsHeader}>
-          <Button href={aboutHref} variant="primary">
-            <FormattedMessage
-              id="UCHtG6"
-              defaultMessage="About"
-              description="button"
-            />
-          </Button>
-        </div>
-      </Grid>
-      <CardSpacer />
-
-      <Hr />
-
-      <CardSpacer />
+    <Container className={classes.container}>
       <div className={classes.iframeContainer}>
         {url && (
           <AppFrame

src/apps/components/AppPage/styles.ts

@@ -1,65 +1,18 @@
 import { makeStyles } from "@saleor/macaw-ui";
 
 export const useStyles = makeStyles(
-  theme => ({
-    appSettingsHeader: {
-      "& > button, & > a": {
-        "&:last-child": {
-          marginRight: 0,
-        },
-        marginRight: theme.spacing(2),
-      },
-      display: "flex",
-      justifyContent: "flex-end",
-    },
-    breadcrumb: {
-      "&:not(:last-child)": {
-        "&:after": {
-          content: "'/'",
-          display: "block",
-          position: "absolute",
-          right: theme.spacing(-2),
-          top: 0,
-        },
-        "&:not(:first-child):hover": {
-          cursor: "pointer",
-          textDecoration: "underline",
-        },
-      },
-      marginRight: theme.spacing(3),
-      position: "relative",
-    },
-    breadcrumbContainer: {
-      alignItems: "center",
-      display: "flex",
-    },
-    breadcrumbDisabled: {
-      "&:hover": {
-        textDecoration: "none",
-      },
-      color: theme.palette.text.disabled,
-    },
-    breadcrumbs: {
-      display: "flex",
-    },
-    hr: {
-      border: "none",
-      borderTop: `1px solid ${theme.palette.divider}`,
-      height: 0,
-      marginBottom: 0,
-      marginTop: 0,
-      width: "100%",
+  () => ({
+    container: {
+      height: "100%",
     },
     iframeContainer: {
       lineHeight: 0, // It removes extra space between iframe and container
+      height: "100%",
       "& > iframe": {
         border: "none",
         minHeight: "60vh",
-        height: `calc(100vh - 27.8rem)`,
+        height: "100%",
         width: "100%",
-        [theme.breakpoints.up("md")]: {
-          height: `calc(100vh - 23.4rem)`,
-        },
       },
     },
   }),

src/apps/components/AppPage/useSettingsBreadcrumbs.ts

@@ -1,38 +0,0 @@
-import {
-  Breadcrumb,
-  BreadcrumbChangeMessage,
-  BreadcrumbClickMessage,
-  ExtensionMessageEvent,
-  ExtensionMessageType,
-  sendMessageToExtension,
-  useExtensionMessage,
-} from "@saleor/macaw-ui";
-import { useState } from "react";
-
-type UseSettingsBreadcrumbs = [Breadcrumb[], (value: string) => void];
-function useSettingsBreadcrumbs(): UseSettingsBreadcrumbs {
-  const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([]);
-
-  const handleBreadcrumbSet = (
-    event: ExtensionMessageEvent<BreadcrumbChangeMessage>,
-  ) => {
-    if (event.data.type === ExtensionMessageType.BREADCRUMB_SET) {
-      setBreadcrumbs(event.data.breadcrumbs);
-    }
-  };
-
-  useExtensionMessage(handleBreadcrumbSet);
-
-  const handleBreadcrumbClick = (value: string) =>
-    sendMessageToExtension<BreadcrumbClickMessage>(
-      {
-        breadcrumb: value,
-        type: ExtensionMessageType.BREADCRUMB_CLICK,
-      },
-      "*",
-    );
-
-  return [breadcrumbs, handleBreadcrumbClick];
-}
-
-export default useSettingsBreadcrumbs;

src/apps/views/App/App.tsx

@@ -8,11 +8,7 @@ import { useIntl } from "react-intl";
 import { useLocation } from "react-router";
 
 import AppPage from "../../components/AppPage";
-import {
-  appDetailsUrl,
-  appsListPath,
-  getAppCompleteUrlFromDashboardUrl,
-} from "../../urls";
+import { appsListPath, getAppCompleteUrlFromDashboardUrl } from "../../urls";
 
 interface AppProps {
   id: string;
@@ -45,7 +41,6 @@ export const App: React.FC<AppProps> = ({ id }) => {
     <AppPage
       data={data?.app || null}
       url={appCompleteUrl || ""}
-      aboutHref={appDetailsUrl(id)}
       refetch={refetch}
       onError={() =>
         notify({

src/apps/views/AppSettings/AppSettings.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import AppPage from "../../components/AppPage";
-import { appDetailsUrl, appsListPath } from "../../urls";
+import { appsListPath } from "../../urls";
 
 interface AppSettingsProps {
   id: string;
@@ -31,7 +31,6 @@ export const AppSettings: React.FC<AppSettingsProps> = ({ id }) => {
     <AppPage
       data={data?.app ?? null}
       url={data?.app?.configurationUrl ?? ""}
-      aboutHref={appDetailsUrl(id)}
       refetch={refetch}
       onError={() =>
         notify({

src/components/AppLayout/AppLayout.tsx

@@ -2,7 +2,6 @@ import { LinearProgress, useMediaQuery } from "@material-ui/core";
 import { useUser } from "@saleor/auth";
 import useAppState from "@saleor/hooks/useAppState";
 import {
-  makeStyles,
   SaleorTheme,
   Sidebar,
   SidebarDrawer,
@@ -22,100 +21,11 @@ import NavigatorButton from "../NavigatorButton/NavigatorButton";
 import UserChip from "../UserChip";
 import useAppChannel from "./AppChannelContext";
 import AppChannelSelect from "./AppChannelSelect";
-import { appLoaderHeight } from "./consts";
 import useMenuStructure from "./menuStructure";
 import { SidebarLink } from "./SidebarLink";
+import { useFullSizeStyles, useStyles } from "./styles";
 import { isMenuActive } from "./utils";
 
-const useStyles = makeStyles(
-  theme => ({
-    appAction: {
-      [theme.breakpoints.down("sm")]: {
-        left: 0,
-        width: "100%",
-      },
-      bottom: 0,
-      gridColumn: 2,
-      position: "sticky",
-      zIndex: 10,
-    },
-    appLoader: {
-      height: appLoaderHeight,
-      marginBottom: theme.spacing(4),
-      zIndex: 1201,
-    },
-    appLoaderPlaceholder: {
-      height: appLoaderHeight,
-      marginBottom: theme.spacing(4),
-    },
-
-    content: {
-      flex: 1,
-      [theme.breakpoints.up("md")]: {
-        width: 0, // workaround for flex children width expansion affected by their contents
-      },
-    },
-    darkThemeSwitch: {
-      [theme.breakpoints.down("sm")]: {
-        marginRight: theme.spacing(1),
-      },
-      marginRight: theme.spacing(2),
-    },
-    header: {
-      display: "grid",
-      gridTemplateAreas: `"headerAnchor headerToolbar"`,
-      [theme.breakpoints.down("sm")]: {
-        gridTemplateAreas: `"headerToolbar" 
-        "headerAnchor"`,
-      },
-      marginBottom: theme.spacing(6),
-    },
-    headerAnchor: {
-      gridArea: "headerAnchor",
-    },
-    headerToolbar: {
-      display: "flex",
-      gridArea: "headerToolbar",
-      height: 40,
-      [theme.breakpoints.down("sm")]: {
-        height: "auto",
-      },
-    },
-    root: {
-      isolation: "isolate",
-      [theme.breakpoints.up("md")]: {
-        display: "flex",
-      },
-      width: `100%`,
-    },
-    spacer: {
-      flex: 1,
-    },
-    userBar: {
-      alignItems: "center",
-      display: "flex",
-    },
-
-    view: {
-      marginLeft: 0,
-    },
-    viewMargins: {
-      paddingBottom: theme.spacing(),
-      [theme.breakpoints.up("sm")]: {
-        paddingBottom: theme.spacing(3),
-      },
-    },
-    viewContainer: {
-      minHeight: `calc(100vh - ${appLoaderHeight + 72}px - ${theme.spacing(
-        4,
-      )})`,
-    },
-  }),
-  {
-    name: "AppLayout",
-  },
-);
-
 interface AppLayoutProps {
   children: React.ReactNode;
   fullSize?: boolean;
@@ -126,6 +36,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({
   fullSize = false,
 }) => {
   const classes = useStyles();
+  const fullSizeClasses = useFullSizeStyles();
   const { themeType, setTheme } = useTheme();
   const { anchor: appActionAnchor } = useActionBar();
   const appHeaderAnchor = useBacklink();
@@ -167,13 +78,21 @@ const AppLayout: React.FC<AppLayoutProps> = ({
             linkComponent={SidebarLink}
           />
         )}
-        <div className={classes.content}>
+        <div
+          className={clsx(classes.content, {
+            [fullSizeClasses.content]: fullSize,
+          })}
+        >
           {appState.loading ? (
             <LinearProgress className={classes.appLoader} color="primary" />
           ) : (
             <div className={classes.appLoaderPlaceholder} />
           )}
-          <div className={classes.viewContainer}>
+          <div
+            className={clsx(classes.viewContainer, {
+              [fullSizeClasses.viewContainer]: fullSize,
+            })}
+          >
             <div>
               <Container>
                 <div className={classes.header}>
@@ -214,6 +133,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({
             <main
               className={clsx(classes.view, {
                 [classes.viewMargins]: !fullSize,
+                [fullSizeClasses.view]: fullSize,
               })}
             >
               {children}

src/components/AppLayout/styles.ts

@@ -0,0 +1,110 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+import { appLoaderHeight } from "./consts";
+
+export const useStyles = makeStyles(
+  theme => ({
+    appAction: {
+      [theme.breakpoints.down("sm")]: {
+        left: 0,
+        width: "100%",
+      },
+      bottom: 0,
+      gridColumn: 2,
+      position: "sticky",
+      zIndex: 10,
+    },
+    appLoader: {
+      height: appLoaderHeight,
+      marginBottom: theme.spacing(4),
+      zIndex: 1201,
+    },
+    appLoaderPlaceholder: {
+      height: appLoaderHeight,
+      marginBottom: theme.spacing(4),
+    },
+
+    content: {
+      flex: 1,
+      [theme.breakpoints.up("md")]: {
+        width: 0, // workaround for flex children width expansion affected by their contents
+      },
+    },
+    darkThemeSwitch: {
+      [theme.breakpoints.down("sm")]: {
+        marginRight: theme.spacing(1),
+      },
+      marginRight: theme.spacing(2),
+    },
+    header: {
+      display: "grid",
+      gridTemplateAreas: `"headerAnchor headerToolbar"`,
+      [theme.breakpoints.down("sm")]: {
+        gridTemplateAreas: `"headerToolbar" 
+        "headerAnchor"`,
+      },
+      marginBottom: theme.spacing(6),
+    },
+    headerAnchor: {
+      gridArea: "headerAnchor",
+    },
+    headerToolbar: {
+      display: "flex",
+      gridArea: "headerToolbar",
+      height: 40,
+      [theme.breakpoints.down("sm")]: {
+        height: "auto",
+      },
+    },
+    root: {
+      isolation: "isolate",
+      [theme.breakpoints.up("md")]: {
+        display: "flex",
+      },
+      width: `100%`,
+    },
+    spacer: {
+      flex: 1,
+    },
+    userBar: {
+      alignItems: "center",
+      display: "flex",
+    },
+
+    view: {
+      marginLeft: 0,
+    },
+    viewMargins: {
+      paddingBottom: theme.spacing(),
+      [theme.breakpoints.up("sm")]: {
+        paddingBottom: theme.spacing(3),
+      },
+    },
+    viewContainer: {
+      minHeight: `calc(100vh - ${appLoaderHeight + 72}px - ${theme.spacing(
+        4,
+      )})`,
+    },
+  }),
+  { name: "AppLayout" },
+);
+
+export const useFullSizeStyles = makeStyles(
+  () => ({
+    content: {
+      height: "100vh",
+      display: "flex",
+      flexDirection: "column",
+    },
+    viewContainer: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+    },
+    view: {
+      flex: 1,
+    },
+    viewContainerWrapper: {},
+  }),
+  { name: "AppLayoutFullSize" },
+);