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,10 +22,7 @@ export const AppPage: React.FC<AppPageProps> = ({
   url,
   onError,
   refetch,
-}) => {
-  const classes = useStyles();
-
-  return (
+}) => (
   <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
     <AppPageNav
       name={data?.name}
@@ -29,7 +30,13 @@ export const AppPage: React.FC<AppPageProps> = ({
       homepageUrl={data?.homepageUrl}
     />
     <DetailPageLayout.Content>
-        <div className={classes.iframeContainer}>
+      <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}
@@ -39,11 +46,10 @@ export const AppPage: React.FC<AppPageProps> = ({
             refetch={refetch}
           />
         )}
-        </div>
+      </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,6 +51,13 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
           alignItems="center"
         >
           <AppAvatar logo={logo} />
+          <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}`}
@@ -71,6 +79,11 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
                 </Text>
               ) : null}
             </Box>
+            {app.manifestUrl && (
+              <AppManifestUrl manifestUrl={app.manifestUrl} />
+            )}
+          </Box>
+        </Box>
         <Box
           display="flex"
           marginTop={{ mobile: 4, desktop: 0 }}