From 0c1053beb85967f322ccb12b650f9137d12cc74f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Wed, 1 Mar 2023 16:16:32 +0100
Subject: [PATCH] Fix iframe height + manifest url (#3247)

---
 src/index.css                                 | 14 +++++
 src/new-apps/components/AppPage/AppPage.tsx   | 60 ++++++++++---------
 src/new-apps/components/AppPage/styles.ts     | 21 -------
 .../InstalledAppListRow/AppManifestUrl.tsx    | 43 +++++++++++++
 .../InstalledAppListRow.tsx                   | 51 ++++++++++------
 5 files changed, 122 insertions(+), 67 deletions(-)
 delete mode 100644 src/new-apps/components/AppPage/styles.ts
 create mode 100644 src/new-apps/components/InstalledAppListRow/AppManifestUrl.tsx

diff --git a/src/index.css b/src/index.css
index b23260a5c..72d390ebb 100644
--- a/src/index.css
+++ b/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;
+}
diff --git a/src/new-apps/components/AppPage/AppPage.tsx b/src/new-apps/components/AppPage/AppPage.tsx
index ed7b09bf2..fd99fcf5e 100644
--- a/src/new-apps/components/AppPage/AppPage.tsx
+++ b/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();
-
-  return (
-    <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
-      <AppPageNav
-        name={data?.name}
-        supportUrl={data?.supportUrl}
-        homepageUrl={data?.homepageUrl}
-      />
-      <DetailPageLayout.Content>
-        <div className={classes.iframeContainer}>
-          {url && data?.id && data?.accessToken && (
-            <AppFrame
-              src={url}
-              appToken={data?.accessToken ?? ""}
-              onError={onError}
-              appId={data?.id ?? ""}
-              refetch={refetch}
-            />
-          )}
-        </div>
-      </DetailPageLayout.Content>
-    </DetailPageLayout>
-  );
-};
+}) => (
+  <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
+    <AppPageNav
+      name={data?.name}
+      supportUrl={data?.supportUrl}
+      homepageUrl={data?.homepageUrl}
+    />
+    <DetailPageLayout.Content>
+      <Box
+        position="relative"
+        // It removes extra space between iframe and container
+        __lineHeight={0}
+        height="100%"
+        __minHeight={`calc(100vh - ${borderHeight} - ${topBarHeight})`}
+      >
+        {url && data?.id && data?.accessToken && (
+          <AppFrame
+            src={url}
+            appToken={data?.accessToken ?? ""}
+            onError={onError}
+            appId={data?.id ?? ""}
+            refetch={refetch}
+          />
+        )}
+      </Box>
+    </DetailPageLayout.Content>
+  </DetailPageLayout>
+);
 
 AppPage.displayName = "AppPage";
 export default AppPage;
diff --git a/src/new-apps/components/AppPage/styles.ts b/src/new-apps/components/AppPage/styles.ts
deleted file mode 100644
index 92a6f2a54..000000000
--- a/src/new-apps/components/AppPage/styles.ts
+++ /dev/null
@@ -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" },
-);
diff --git a/src/new-apps/components/InstalledAppListRow/AppManifestUrl.tsx b/src/new-apps/components/InstalledAppListRow/AppManifestUrl.tsx
new file mode 100644
index 000000000..ecbd23a05
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/new-apps/components/InstalledAppListRow/InstalledAppListRow.tsx b/src/new-apps/components/InstalledAppListRow/InstalledAppListRow.tsx
index 4cc677e68..a5336a180 100644
--- a/src/new-apps/components/InstalledAppListRow/InstalledAppListRow.tsx
+++ b/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>
-          <Text variant="body" color="textNeutralSubdued">
-            {`v${app.version}`}
-          </Text>
-          {isExternal && (
-            <Chip data-test-id="app-external-label" size="large">
-              <Text variant="caption" size="small">
-                <FormattedMessage {...appsMessages.externalApp} />
+          <Box
+            display="flex"
+            gap={3}
+            flexDirection="column"
+            alignItems="flex-start"
+          >
+            <Box display="flex" gap={5}>
+              <Text variant="bodyStrong">{app.name}</Text>
+              <Text variant="body" color="textNeutralSubdued">
+                {`v${app.version}`}
               </Text>
-            </Chip>
-          )}
-          {app.manifestUrl && isAppInTunnel(app.manifestUrl) ? (
-            <Text
-              variant="caption"
-              color="textNeutralSubdued"
-              data-test-id="app-tunnel-label"
-            >
-              {`(${intl.formatMessage(messages.tunnelDevelopment)})`}
-            </Text>
-          ) : null}
+              {isExternal && (
+                <Chip data-test-id="app-external-label" size="large">
+                  <Text variant="caption" size="small">
+                    <FormattedMessage {...appsMessages.externalApp} />
+                  </Text>
+                </Chip>
+              )}
+              {app.manifestUrl && isAppInTunnel(app.manifestUrl) ? (
+                <Text
+                  variant="caption"
+                  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"