From 116b2568d23d17fbae7d9f4fa63477bc75c0395b Mon Sep 17 00:00:00 2001
From: Tomasz Magulski <tomasz.magulski@saleor.io>
Date: Wed, 27 Apr 2022 12:41:03 +0200
Subject: [PATCH] [SALEOR-6645] Show appUrl in 3rd-party apps list (#2015)

* [SALEOR-6645] Show appUrl in 3rd-party apps list
---
 src/apps/components/InstalledApps/InstalledApps.tsx | 9 +++++++++
 src/apps/fixtures.ts                                | 9 ++++++---
 src/apps/queries.ts                                 | 1 +
 src/apps/styles.ts                                  | 7 +++++++
 src/graphql/hooks.generated.ts                      | 1 +
 src/graphql/types.generated.ts                      | 2 +-
 src/storybook/__snapshots__/Stories.test.ts.snap    | 5 +++++
 7 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/apps/components/InstalledApps/InstalledApps.tsx b/src/apps/components/InstalledApps/InstalledApps.tsx
index b139ac576..7e8d25859 100644
--- a/src/apps/components/InstalledApps/InstalledApps.tsx
+++ b/src/apps/components/InstalledApps/InstalledApps.tsx
@@ -17,6 +17,7 @@ import {
 } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import { ListProps } from "@saleor/types";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -92,6 +93,14 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
                     )}
                   </TableCell>
                   <TableCell className={classes.colAction}>
+                    {app.node.appUrl && (
+                      <Typography
+                        className={clsx(classes.text, classes.appUrl)}
+                        variant="body2"
+                      >
+                        {app.node.appUrl}
+                      </Typography>
+                    )}
                     <Button
                       onClick={stopPropagation(onRowAboutClick(app.node.id))}
                     >
diff --git a/src/apps/fixtures.ts b/src/apps/fixtures.ts
index 3937c689b..1b4bd555b 100644
--- a/src/apps/fixtures.ts
+++ b/src/apps/fixtures.ts
@@ -16,7 +16,8 @@ export const appsList: AppsListQuery["apps"]["edges"] = [
       id: "QXBwOjE3Ng==",
       isActive: true,
       name: "app",
-      type: AppTypeEnum.THIRDPARTY
+      type: AppTypeEnum.THIRDPARTY,
+      appUrl: null
     }
   },
   {
@@ -26,7 +27,8 @@ export const appsList: AppsListQuery["apps"]["edges"] = [
       id: "QXBwOjE3Ng==",
       isActive: false,
       name: "app1",
-      type: AppTypeEnum.THIRDPARTY
+      type: AppTypeEnum.THIRDPARTY,
+      appUrl: "http://localhost:3000"
     }
   }
 ];
@@ -39,7 +41,8 @@ export const customAppsList: AppsListQuery["apps"]["edges"] = [
       id: "QXBwOjE3Ng==",
       isActive: true,
       name: "app custom",
-      type: AppTypeEnum.LOCAL
+      type: AppTypeEnum.LOCAL,
+      appUrl: null
     }
   }
 ];
diff --git a/src/apps/queries.ts b/src/apps/queries.ts
index 3a7a9102d..1588cf00e 100644
--- a/src/apps/queries.ts
+++ b/src/apps/queries.ts
@@ -30,6 +30,7 @@ export const appsList = gql`
           name
           isActive
           type
+          appUrl
         }
       }
     }
diff --git a/src/apps/styles.ts b/src/apps/styles.ts
index e55993ec8..b10a9fab9 100644
--- a/src/apps/styles.ts
+++ b/src/apps/styles.ts
@@ -40,6 +40,10 @@ export const useStyles = makeStyles(
         paddingRight: theme.spacing(3),
         textAlign: "right"
       },
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "flex-end",
       textAlign: "right"
     },
     colInstallAction: {
@@ -206,6 +210,9 @@ export const useStyles = makeStyles(
       "& img": {
         marginRight: theme.spacing(1)
       }
+    },
+    appUrl: {
+      marginRight: theme.spacing(1)
     }
   }),
   { name: "AppList" }
diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index de1f023cf..3ef3d2f68 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -3065,6 +3065,7 @@ export const AppsListDocument = gql`
         name
         isActive
         type
+        appUrl
       }
     }
   }
diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
index 32473793f..c27827ebe 100644
--- a/src/graphql/types.generated.ts
+++ b/src/graphql/types.generated.ts
@@ -4846,7 +4846,7 @@ export type AppsListQueryVariables = Exact<{
 }>;
 
 
-export type AppsListQuery = { __typename: 'Query', apps: { __typename: 'AppCountableConnection', totalCount: number | null, pageInfo: { __typename: 'PageInfo', hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null, endCursor: string | null }, edges: Array<{ __typename: 'AppCountableEdge', node: { __typename: 'App', id: string, name: string | null, isActive: boolean | null, type: AppTypeEnum | null } }> } | null };
+export type AppsListQuery = { __typename: 'Query', apps: { __typename: 'AppCountableConnection', totalCount: number | null, pageInfo: { __typename: 'PageInfo', hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null, endCursor: string | null }, edges: Array<{ __typename: 'AppCountableEdge', node: { __typename: 'App', id: string, name: string | null, isActive: boolean | null, type: AppTypeEnum | null, appUrl: string | null } }> } | null };
 
 export type AppsInstallationsQueryVariables = Exact<{ [key: string]: never; }>;
 
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 929e3b0a6..549111460 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -25267,6 +25267,11 @@ exports[`Storyshots Views / Apps / Apps list default 1`] = `
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id"
               >
+                <div
+                  class="MuiTypography-root-id AppList-text-id AppList-appUrl-id MuiTypography-body2-id"
+                >
+                  http://localhost:3000
+                </div>
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
                   tabindex="0"