From e395c9297d14126f89c9237c87961307f13d378d Mon Sep 17 00:00:00 2001
From: Leo Giovanetti <hello@leog.me>
Date: Fri, 22 Jul 2022 21:59:30 -0300
Subject: [PATCH] Fixing already installed apps & link to them (#3500)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/components/App.tsx                                | 4 ++++
 apps/web/components/integrations/CalendarListContainer.tsx | 2 ++
 apps/web/components/integrations/IntegrationListItem.tsx   | 6 +++++-
 apps/web/pages/apps/installed.tsx                          | 1 +
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/App.tsx b/apps/web/components/App.tsx
index 98f1b7f25f..7b7c7ce987 100644
--- a/apps/web/components/App.tsx
+++ b/apps/web/components/App.tsx
@@ -146,6 +146,10 @@ const Component = ({
                     />
                   )}
                 </div>
+              ) : installedAppCount > 0 ? (
+                <Button color="secondary" disabled title="App already installed">
+                  {t("installed")}
+                </Button>
               ) : (
                 <InstallAppButton
                   type={type}
diff --git a/apps/web/components/integrations/CalendarListContainer.tsx b/apps/web/components/integrations/CalendarListContainer.tsx
index 55fc7d00e4..d2864bf265 100644
--- a/apps/web/components/integrations/CalendarListContainer.tsx
+++ b/apps/web/components/integrations/CalendarListContainer.tsx
@@ -106,6 +106,7 @@ function CalendarList(props: Props) {
         <List>
           {data.items.map((item) => (
             <IntegrationListItem
+              slug={item.slug}
               key={item.title}
               title={item.title}
               imageSrc={item.imageSrc}
@@ -147,6 +148,7 @@ function ConnectedCalendarsList(props: Props) {
               <Fragment key={item.credentialId}>
                 {item.calendars ? (
                   <IntegrationListItem
+                    slug={item.integration.slug}
                     title={item.integration.title}
                     imageSrc={item.integration.imageSrc}
                     description={item.primary?.externalId || "No external Id"}
diff --git a/apps/web/components/integrations/IntegrationListItem.tsx b/apps/web/components/integrations/IntegrationListItem.tsx
index 39f9a0d88b..9333c747b9 100644
--- a/apps/web/components/integrations/IntegrationListItem.tsx
+++ b/apps/web/components/integrations/IntegrationListItem.tsx
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { ReactNode } from "react";
 
 import classNames from "@lib/classNames";
@@ -6,6 +7,7 @@ import { ListItem, ListItemText, ListItemTitle } from "@components/List";
 
 function IntegrationListItem(props: {
   imageSrc?: string;
+  slug: string;
   title: string;
   description: string;
   actions?: ReactNode;
@@ -19,7 +21,9 @@ function IntegrationListItem(props: {
           props.imageSrc && <img className="h-10 w-10" src={props.imageSrc} alt={props.title} />
         }
         <div className="flex-grow truncate pl-2">
-          <ListItemTitle component="h3">{props.title}</ListItemTitle>
+          <ListItemTitle component="h3">
+            <Link href={"/apps/" + props.slug}>{props.title}</Link>
+          </ListItemTitle>
           <ListItemText component="p">{props.description}</ListItemText>
         </div>
         <div>{props.actions}</div>
diff --git a/apps/web/pages/apps/installed.tsx b/apps/web/pages/apps/installed.tsx
index fc39738c71..bdcc4873f0 100644
--- a/apps/web/pages/apps/installed.tsx
+++ b/apps/web/pages/apps/installed.tsx
@@ -118,6 +118,7 @@ const IntegrationsContainer = ({ variant, className = "" }: IntegrationsContaine
                 <List>
                   {data.items.map((item) => (
                     <IntegrationListItem
+                      slug={item.slug}
                       key={item.title}
                       title={item.title}
                       imageSrc={item.imageSrc}