Fix iframe height + manifest url (#3247)

src/index.css

@@ -22,3 +22,17 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+@keyframes pulse {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.2);
+  }
+}
+
+.animate-copy {
+  animation: pulse 0.2s;
+  transition: all 0.2s;
+}

src/new-apps/components/AppPage/AppPage.tsx

@@ -1,10 +1,14 @@
+import {
+  borderHeight,
+  topBarHeight,
+} from "@dashboard/components/AppLayout/consts";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { AppQuery } from "@dashboard/graphql";
+import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 
 import { AppFrame } from "../AppFrame";
 import { AppPageNav } from "./AppPageNav";
-import { useStyles } from "./styles";
 
 export interface AppPageProps {
   data: AppQuery["app"];
@@ -18,32 +22,34 @@ export const AppPage: React.FC<AppPageProps> = ({
   url,
   onError,
   refetch,
-}) => {
+}) => (
-  const classes = useStyles();
+  <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
-
+    <AppPageNav
-  return (
+      name={data?.name}
-    <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
+      supportUrl={data?.supportUrl}
-      <AppPageNav
+      homepageUrl={data?.homepageUrl}
-        name={data?.name}
+    />
-        supportUrl={data?.supportUrl}
+    <DetailPageLayout.Content>
-        homepageUrl={data?.homepageUrl}
+      <Box
-      />
+        position="relative"
-      <DetailPageLayout.Content>
+        // It removes extra space between iframe and container
-        <div className={classes.iframeContainer}>
+        __lineHeight={0}
-          {url && data?.id && data?.accessToken && (
+        height="100%"
-            <AppFrame
+        __minHeight={`calc(100vh - ${borderHeight} - ${topBarHeight})`}
-              src={url}
+      >
-              appToken={data?.accessToken ?? ""}
+        {url && data?.id && data?.accessToken && (
-              onError={onError}
+          <AppFrame
-              appId={data?.id ?? ""}
+            src={url}
-              refetch={refetch}
+            appToken={data?.accessToken ?? ""}
-            />
+            onError={onError}
-          )}
+            appId={data?.id ?? ""}
-        </div>
+            refetch={refetch}
-      </DetailPageLayout.Content>
+          />
-    </DetailPageLayout>
+        )}
-  );
+      </Box>
-};
+    </DetailPageLayout.Content>
+  </DetailPageLayout>
+);
 
 AppPage.displayName = "AppPage";
 export default AppPage;

src/new-apps/components/AppPage/styles.ts

@@ -1,21 +0,0 @@
-import { makeStyles } from "@saleor/macaw-ui";
-
-export const useStyles = makeStyles(
-  () => ({
-    container: {
-      height: "100%",
-    },
-    iframeContainer: {
-      position: "relative",
-      lineHeight: 0, // It removes extra space between iframe and container
-      height: "100%",
-      "& > iframe": {
-        border: "none",
-        minHeight: "100vh",
-        height: "100%",
-        width: "100%",
-      },
-    },
-  }),
-  { name: "AppPage" },
-);

src/new-apps/components/InstalledAppListRow/AppManifestUrl.tsx

@@ -0,0 +1,43 @@
+import { CopyIcon, Tooltip } from "@saleor/macaw-ui";
+import { Box, sprinkles, Text } from "@saleor/macaw-ui/next";
+import clsx from "clsx";
+import React, { useState } from "react";
+
+interface AppManifestUrlProps {
+  manifestUrl: string;
+}
+
+export const AppManifestUrl: React.FC<AppManifestUrlProps> = ({
+  manifestUrl,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <Box
+      display="flex"
+      gap={4}
+      onClick={e => {
+        try {
+          e.preventDefault();
+          e.stopPropagation();
+          navigator.clipboard.writeText(manifestUrl);
+          setCopied(true);
+        } catch (e) {
+          // Copy not supported, ignore
+        }
+      }}
+    >
+      <Tooltip title={manifestUrl} header="App Manifest URL">
+        <Text variant="caption" color="textNeutralSubdued">
+          {new URL(manifestUrl).host}
+        </Text>
+      </Tooltip>
+      <CopyIcon
+        className={clsx(
+          sprinkles({ color: "iconNeutralSubdued" }),
+          copied && "animate-copy",
+        )}
+      />
+    </Box>
+  );
+};

src/new-apps/components/InstalledAppListRow/InstalledAppListRow.tsx

@@ -19,6 +19,7 @@ import { useLocation } from "react-router";
 
 import { AppAvatar } from "../AppAvatar/AppAvatar";
 import AppPermissions from "../AppPermissions";
+import { AppManifestUrl } from "./AppManifestUrl";
 import { messages } from "./messages";
 
 export const InstalledAppListRow: React.FC<InstalledApp> = props => {
@@ -50,26 +51,38 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
           alignItems="center"
         >
           <AppAvatar logo={logo} />
-          <Text variant="bodyStrong">{app.name}</Text>
+          <Box
-          <Text variant="body" color="textNeutralSubdued">
+            display="flex"
-            {`v${app.version}`}
+            gap={3}
-          </Text>
+            flexDirection="column"
-          {isExternal && (
+            alignItems="flex-start"
-            <Chip data-test-id="app-external-label" size="large">
+          >
-              <Text variant="caption" size="small">
+            <Box display="flex" gap={5}>
-                <FormattedMessage {...appsMessages.externalApp} />
+              <Text variant="bodyStrong">{app.name}</Text>
+              <Text variant="body" color="textNeutralSubdued">
+                {`v${app.version}`}
               </Text>
-            </Chip>
+              {isExternal && (
-          )}
+                <Chip data-test-id="app-external-label" size="large">
-          {app.manifestUrl && isAppInTunnel(app.manifestUrl) ? (
+                  <Text variant="caption" size="small">
-            <Text
+                    <FormattedMessage {...appsMessages.externalApp} />
-              variant="caption"
+                  </Text>
-              color="textNeutralSubdued"
+                </Chip>
-              data-test-id="app-tunnel-label"
+              )}
-            >
+              {app.manifestUrl && isAppInTunnel(app.manifestUrl) ? (
-              {`(${intl.formatMessage(messages.tunnelDevelopment)})`}
+                <Text
-            </Text>
+                  variant="caption"
-          ) : null}
+                  color="textNeutralSubdued"
+                  data-test-id="app-tunnel-label"
+                >
+                  {`(${intl.formatMessage(messages.tunnelDevelopment)})`}
+                </Text>
+              ) : null}
+            </Box>
+            {app.manifestUrl && (
+              <AppManifestUrl manifestUrl={app.manifestUrl} />
+            )}
+          </Box>
         </Box>
         <Box
           display="flex"