[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

@@ -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))}
                     >

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
     }
   }
 ];

src/apps/queries.ts

@@ -30,6 +30,7 @@ export const appsList = gql`
           name
           isActive
           type
+          appUrl
         }
       }
     }

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" }

src/graphql/hooks.generated.ts

@@ -3065,6 +3065,7 @@ export const AppsListDocument = gql`
         name
         isActive
         type
+        appUrl
       }
     }
   }

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; }>;
 

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"