From 2e96f5c2628be983f437691a383f43bbd25cf45b Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Mon, 20 Jun 2022 14:26:18 +0200
Subject: [PATCH] Add Tooltip explaining that a non-deployed app can't be
 opened

---
 packages/toolpad-app/src/components/Home.tsx | 30 ++++++++++++++------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/toolpad-app/src/components/Home.tsx b/packages/toolpad-app/src/components/Home.tsx
index e6b14e3c48e..2d2dd9ca869 100644
--- a/packages/toolpad-app/src/components/Home.tsx
+++ b/packages/toolpad-app/src/components/Home.tsx
@@ -18,6 +18,7 @@ import {
   Toolbar,
   Typography,
   Box,
+  Tooltip,
 } from '@mui/material';
 import * as React from 'react';
 import { LoadingButton } from '@mui/lab';
@@ -228,6 +229,26 @@ function AppCard({ app, activeDeployment, onDelete }: AppCardProps) {
     }
   }, [appTitleInput, editingTitle]);
 
+  const openDisabled = !app || !activeDeployment;
+  let openButton = (
+    <Button
+      disabled={!app || !activeDeployment}
+      size="small"
+      component="a"
+      href={app ? `deploy/${app.id}` : ''}
+    >
+      Open
+    </Button>
+  );
+
+  if (openDisabled) {
+    openButton = (
+      <Tooltip title="The app hasn't been deployed yet">
+        <span>{openButton}</span>
+      </Tooltip>
+    );
+  }
+
   return (
     <React.Fragment>
       <Card sx={{ gridColumn: 'span 1' }}>
@@ -278,14 +299,7 @@ function AppCard({ app, activeDeployment, onDelete }: AppCardProps) {
           >
             Edit
           </Button>
-          <Button
-            disabled={!app || !activeDeployment}
-            size="small"
-            component="a"
-            href={app ? `deploy/${app.id}` : ''}
-          >
-            View
-          </Button>
+          {openButton}
         </CardActions>
       </Card>
       <Menu