Fixing already installed apps & link to them (#3500)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

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}

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

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>

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}