Fix app iframe resolution (#2111)

* Fix app frame sizes

* Update app frame height

* App page functions refactor

* Move useLocationState hook to apps

* Update apps test snapshots

package-lock.json

@@ -10097,7 +10097,7 @@
     "buffer-crc32": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
       "dev": true
     },
     "buffer-equal-constant-time": {
@@ -14970,7 +14970,7 @@
         "pify": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         }
       }
@@ -15453,7 +15453,7 @@
     "fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
       "dev": true,
       "requires": {
         "pend": "~1.2.0"
@@ -23602,7 +23602,7 @@
     "ospath": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
-      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
+      "integrity": "sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=",
       "dev": true
     },
     "p-cancelable": {
@@ -24155,7 +24155,7 @@
     "pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
     "performance-now": {

src/apps/components/AppPage/AppPage.tsx

@@ -87,7 +87,6 @@ export const AppPage: React.FC<AppPageProps> = ({
           />
         )}
       </div>
-      <CardSpacer />
     </Container>
   );
 };

src/apps/components/AppPage/styles.ts

@@ -51,10 +51,15 @@ export const useStyles = makeStyles(
       width: "100%",
     },
     iframeContainer: {
+      lineHeight: 0, // It removes extra space between iframe and container
       "& > iframe": {
         border: "none",
-        minHeight: "75vh",
+        minHeight: "60vh",
+        height: `calc(100vh - 27.8rem)`,
         width: "100%",
+        [theme.breakpoints.up("md")]: {
+          height: `calc(100vh - 23.4rem)`,
+        },
       },
     },
   }),

src/apps/hooks/useLocationState.ts

@@ -0,0 +1,18 @@
+import { appsSection } from "@saleor/apps/urls";
+import { matchPath, useLocation } from "react-router";
+
+const isAppPath = (pathname: string) =>
+  !!matchPath(pathname, {
+    path: `${appsSection}:id`,
+  });
+
+/*
+ * Use detailed information about the current location.
+ */
+export const useLocationState = () => {
+  const location = useLocation();
+
+  return {
+    isAppPath: isAppPath(location.pathname),
+  };
+};

src/components/AppLayout/AppLayout.tsx

@@ -12,6 +12,7 @@ import {
   useTheme,
 } from "@saleor/macaw-ui";
 import { isDarkTheme } from "@saleor/misc";
+import classNames from "classnames";
 import React from "react";
 import { useIntl } from "react-intl";
 import useRouter from "use-react-router";
@@ -99,6 +100,8 @@ const useStyles = makeStyles(
 
     view: {
       marginLeft: 0,
+    },
+    viewMargins: {
       paddingBottom: theme.spacing(),
       [theme.breakpoints.up("sm")]: {
         paddingBottom: theme.spacing(3),
@@ -117,10 +120,14 @@ const useStyles = makeStyles(
 
 interface AppLayoutProps {
   children: React.ReactNode;
+  fullSize?: boolean;
 }
 
-const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
-  const classes = useStyles({});
+const AppLayout: React.FC<AppLayoutProps> = ({
+  children,
+  fullSize = false,
+}) => {
+  const classes = useStyles();
   const { themeType, setTheme } = useTheme();
   const { anchor: appActionAnchor } = useActionBar();
   const appHeaderAnchor = useBacklink();
@@ -222,7 +229,11 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                 </div>
               </Container>
             </div>
-            <main className={classes.view}>
+            <main
+              className={classNames(classes.view, {
+                [classes.viewMargins]: !fullSize,
+              })}
+            >
               {appState.error
                 ? appState.error.type === "unhandled" && (
                     <ErrorPage

src/index.tsx

@@ -13,6 +13,7 @@ import { BrowserRouter, Route, Switch } from "react-router-dom";
 
 import AppsSection from "./apps";
 import { ExternalAppProvider } from "./apps/components/ExternalAppContext";
+import { useLocationState } from "./apps/hooks/useLocationState";
 import { appsSection } from "./apps/urls";
 import AttributeSection from "./attributes";
 import { attributeSection } from "./attributes/urls";
@@ -121,12 +122,14 @@ const Routes: React.FC = () => {
 
   const homePageLoading = (authenticated && !channelLoaded) || authenticating;
 
+  const { isAppPath } = useLocationState();
+
   return (
     <>
       <WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
       {DEMO_MODE && <DemoBanner />}
       {homePageLoaded ? (
-        <AppLayout>
+        <AppLayout fullSize={isAppPath}>
           <ErrorBoundary
             onError={e => {
               const errorId = errorTracker.captureException(e);

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -24713,9 +24713,6 @@ exports[`Storyshots Views / Apps / App default 1`] = `
     <div
       class="AppPage-iframeContainer-id"
     />
-    <div
-      class="CardSpacer-spacer-id"
-    />
   </div>
 </div>
 `;
@@ -25111,9 +25108,6 @@ exports[`Storyshots Views / Apps / App settings 1`] = `
     <div
       class="AppPage-iframeContainer-id"
     />
-    <div
-      class="CardSpacer-spacer-id"
-    />
   </div>
 </div>
 `;