Do not show sidebar if it is not needed (#3198)

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -36,7 +36,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
   return (
     <CategoryCreateForm onSubmit={onSubmit} disabled={disabled}>
       {({ data, change, handlers, submit, isSaveDisabled }) => (
-        <DetailedContent>
+        <DetailedContent useSingleColumn>
           <TopNav
             href={backUrl}
             title={intl.formatMessage({

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -91,7 +91,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
       disabled={disabled}
     >
       {({ data, change, handlers, submit, isSaveDisabled }) => (
-        <DetailedContent>
+        <DetailedContent useSingleColumn>
           <TopNav href={backHref} title={category?.name} />
           <Content>
             <CategoryDetailsForm

src/components/AppLayout/AppLayout.tsx

@@ -60,8 +60,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
             borderColor="neutralPlain"
             __maxWidth={contentMaxWidth}
             margin="auto"
-            // @ts-ignore
+            zIndex="3"
-            __zIndex="3"
           />
         </Box>
       </Box>

src/components/AppLayout/Content.tsx

@@ -1,17 +1,27 @@
 import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 
-import { borderHeight, savebarHeight, topBarHeight } from "./consts";
+import { useContentHeight } from "./useContentHeight";
 
 interface ContentProps {
   [key: `data-${string}`]: string;
   children: React.ReactNode;
+  noSavebar?: boolean;
+  noTopNav?: boolean;
 }
 
-export const Content: React.FC<ContentProps> = ({ children, ...rest }) => (
+export const Content: React.FC<ContentProps> = ({
+  children,
+  noSavebar = false,
+  noTopNav = false,
+  ...rest
+}) => {
+  const { withoutSaveBar, withSaveBar } = useContentHeight();
+
+  return (
     <Box
       __gridArea="content"
-    __height={`calc(100vh - ${topBarHeight} - ${savebarHeight} - ${borderHeight})`}
+      __height={noSavebar ? withoutSaveBar() : withSaveBar({ noTopNav })}
       overflowY="auto"
       className="hide-scrollbar"
       {...rest}
@@ -19,3 +29,4 @@ export const Content: React.FC<ContentProps> = ({ children, ...rest }) => (
       {children}
     </Box>
   );
+};

src/components/AppLayout/RightSidebar.tsx

@@ -7,17 +7,21 @@ import { borderHeight, savebarHeight } from "./consts";
 interface RightSidebarProps {
   children: React.ReactNode;
   className?: string;
+  noSavebar?: boolean;
 }
 
 export const RightSidebar: React.FC<RightSidebarProps> = ({
   children,
+  noSavebar = false,
   className,
 }) => (
   <Box
     borderStyle="solid"
     borderColor="neutralPlain"
     borderLeftWidth={1}
-    __height={`calc(100vh - ${savebarHeight} - ${borderHeight})`}
+    __height={
+      noSavebar ? "100%" : `calc(100vh - ${savebarHeight} - ${borderHeight})`
+    }
     position="sticky"
     top={0}
     overflowY="auto"

src/components/AppLayout/useContentHeight.test.ts

@@ -0,0 +1,24 @@
+import { useContentHeight } from "./useContentHeight";
+
+describe("useContentHeight", () => {
+  it("should return the correct height without savebar", () => {
+    const { withoutSaveBar } = useContentHeight();
+    const height = withoutSaveBar();
+
+    expect(height).toEqual("calc(100vh - 77px - 1px)");
+  });
+
+  it("should return the correct height with savebar", () => {
+    const { withSaveBar } = useContentHeight();
+    const height = withSaveBar({ noTopNav: false });
+
+    expect(height).toEqual("calc(100vh - 77px - 64px - 1px)");
+  });
+
+  it("should return the correct height with savebar and no top nav", () => {
+    const { withSaveBar } = useContentHeight();
+    const height = withSaveBar({ noTopNav: true });
+
+    expect(height).toEqual("calc(100vh - 0px - 64px - 1px)");
+  });
+});

src/components/AppLayout/useContentHeight.ts

@@ -0,0 +1,14 @@
+import { borderHeight, savebarHeight, topBarHeight } from "./consts";
+
+export const useContentHeight = () => {
+  const withoutSaveBar = () =>
+    `calc(100vh - ${topBarHeight} - ${borderHeight})`;
+
+  const withSaveBar = ({ noTopNav }) => {
+    const topHeight = noTopNav ? "0px" : topBarHeight;
+
+    return `calc(100vh - ${topHeight} - ${savebarHeight} - ${borderHeight})`;
+  };
+
+  return { withoutSaveBar, withSaveBar };
+};

src/configuration/ConfigurationPage.tsx

@@ -99,7 +99,7 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
       <TopNav title={intl.formatMessage(sectionNames.configuration)}>
         {isSmUp && renderVersionInfo}
       </TopNav>
-      <Content>
+      <Content noSavebar>
         <Box paddingX={9} __maxWidth={"1024px"} margin="auto">
           {menus
             .filter(menu =>

src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx

@@ -1,4 +1,7 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
+import {
+  borderHeight,
+  topBarHeight,
+} from "@dashboard/components/AppLayout/consts";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
 import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper";
@@ -46,8 +49,10 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
           />
         </Button>
       </TopNav>
-      <Content>
+      <Box
-        <Box padding={9}>
+        padding={9}
+        __height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}
+      >
         <Box marginBottom={4}>
           <Text as="p">
             <FormattedMessage
@@ -111,7 +116,6 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
           </TableBody>
         </ResponsiveTable>
       </Box>
-      </Content>
     </>
   );
 };

src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx

@@ -1,9 +1,9 @@
 import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
 import { Content } from "@dashboard/components/AppLayout/Content";
+import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
-import Grid from "@dashboard/components/Grid";
 import Savebar from "@dashboard/components/Savebar";
 import { customerListUrl } from "@dashboard/customers/urls";
 import {
@@ -152,7 +152,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
         const handleCountrySelect = createCountryHandler(countrySelect, set);
 
         return (
-          <>
+          <DetailedContent useSingleColumn>
             <TopNav
               href={customerListUrl()}
               title={intl.formatMessage({
@@ -162,7 +162,6 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
               })}
             />
             <Content>
-              <Grid>
               <div>
                 <CustomerCreateDetails
                   data={data}
@@ -188,7 +187,6 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
                   onChange={change}
                 />
               </div>
-              </Grid>
               <Savebar
                 disabled={isSaveDisabled}
                 state={saveButtonBar}
@@ -196,7 +194,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
                 onCancel={() => navigate(customerListUrl())}
               />
             </Content>
-          </>
+          </DetailedContent>
         );
       }}
     </Form>

src/home/components/HomePage/HomePage.tsx

@@ -80,7 +80,7 @@ const HomePage: React.FC<HomePageProps> = props => {
   return (
     <DetailedContent>
       <TopNav title={<HomeHeader userName={userName} />} />
-      <Content>
+      <Content noSavebar>
         <Box paddingLeft={9} paddingRight={11}>
           <CardSpacer />
           <RequirePermissions
@@ -155,7 +155,7 @@ const HomePage: React.FC<HomePageProps> = props => {
         </Box>
       </Content>
       {activities && (
-        <RightSidebar>
+        <RightSidebar noSavebar>
           <RequirePermissions
             requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
           >

src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx

@@ -86,8 +86,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
   return (
     <Form confirmLeave initial={initialForm} onSubmit={handleSubmit}>
       {({ change, data, submit }) => (
-        <DetailedContent>
+        <DetailedContent useSingleColumn>
-          <Content>
+          <Content noTopNav>
             <Box padding={9} margin="auto" height="100vh">
               <Backlink href={menuListUrl()}>
                 {intl.formatMessage(sectionNames.navigation)}

src/navigation/components/MenuListPage/MenuListPage.tsx

@@ -1,3 +1,7 @@
+import {
+  borderHeight,
+  topBarHeight,
+} from "@dashboard/components/AppLayout/consts";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
 import { configurationMenuUrl } from "@dashboard/configuration";
@@ -5,6 +9,7 @@ import { MenuFragment } from "@dashboard/graphql";
 import { sectionNames } from "@dashboard/intl";
 import { menuListUrl, MenuListUrlSortField } from "@dashboard/navigation/urls";
 import { ListActions, PageListProps, SortPage } from "@dashboard/types";
+import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -38,7 +43,9 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
           />
         </Button>
       </TopNav>
+      <Box __height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}>
         <MenuList {...listProps} />
+      </Box>
     </>
   );
 };

src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx

@@ -14,7 +14,7 @@ import TableRowLink from "@dashboard/components/TableRowLink";
 import { AttributeFragment, AttributeTypeEnum } from "@dashboard/graphql";
 import { renderCollection } from "@dashboard/misc";
 import { ListActions, ReorderAction } from "@dashboard/types";
-import { Card, TableCell } from "@material-ui/core";
+import { Card, CardContent, TableCell } from "@material-ui/core";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -95,6 +95,7 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
           </Button>
         }
       />
+      <CardContent>
         <ResponsiveTable>
           <colgroup>
             <col className={classes.colGrab} />
@@ -182,6 +183,7 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
             )}
           </SortableTableBody>
         </ResponsiveTable>
+      </CardContent>
     </Card>
   );
 };

src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx

@@ -118,7 +118,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
-          <DetailedContent>
+          <DetailedContent useSingleColumn>
             <TopNav href={pageTypeListUrl()} title={pageTitle} />
             <Content>
               <Grid

src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx

@@ -49,10 +49,10 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
           description: "header",
         })}
       />
-      <Content>
+      <Content noSavebar>
         <ShippingZonesList disabled={disabled} {...listProps} />
       </Content>
-      <RightSidebar>
+      <RightSidebar noSavebar>
         <RequirePermissions
           requiredPermissions={[PermissionEnum.MANAGE_SETTINGS]}
         >

src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx

@@ -139,7 +139,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
         const handleCountrySelect = createCountryHandler(countrySelect, set);
 
         return (
-          <DetailedContent>
+          <DetailedContent useSingleColumn>
             <TopNav
               href={configurationMenuUrl}
               title={intl.formatMessage(commonMessages.generalInformations)}