feat: hide the deploy button when the Dokku server is not connected

backend/server/src/SSHSocketClient.ts

@@ -13,7 +13,10 @@ export class SSHSocketClient {
   private conn: Client
   private config: SSHConfig
   private socketPath: string
-  private isConnected: boolean = false
+  private _isConnected: boolean = false
+  public get isConnected(): boolean {
+    return this._isConnected
+  }
 
   // Constructor initializes the SSH client and sets up configuration
   constructor(config: SSHConfig, socketPath: string) {
@@ -34,7 +37,7 @@ export class SSHSocketClient {
   private closeConnection() {
     console.log("Closing SSH connection...")
     this.conn.end()
-    this.isConnected = false
+    this._isConnected = false
     process.exit(0)
   }
 
@@ -44,17 +47,17 @@ export class SSHSocketClient {
       this.conn
         .on("ready", () => {
           console.log("SSH connection established")
-          this.isConnected = true
+          this._isConnected = true
           resolve()
         })
         .on("error", (err) => {
           console.error("SSH connection error:", err)
-          this.isConnected = false
+          this._isConnected = false
           reject(err)
         })
         .on("close", () => {
           console.log("SSH connection closed")
-          this.isConnected = false
+          this._isConnected = false
         })
         .connect(this.config)
     })

backend/server/src/Sandbox.ts

@@ -170,8 +170,20 @@ export class Sandbox {
 
     // Handle checking if an app exists
     const handleAppExists: SocketHandler = async ({ appName }) => {
-      if (!this.dokkuClient)
+      if (!this.dokkuClient) {
-        throw new Error("Failed to check app existence: No Dokku client")
+        console.log("Failed to check app existence: No Dokku client")
+        return {
+          success: false,
+        }
+      }
+      if (!this.dokkuClient.isConnected) {
+        console.log(
+          "Failed to check app existence: The Dokku client is not connected"
+        )
+        return {
+          success: false,
+        }
+      }
       return {
         success: true,
         exists: await this.dokkuClient.appExists(appName),

frontend/components/editor/navbar/deploy.tsx

@@ -21,12 +21,14 @@ export default function DeployButtonModal({
   const { deploy, getAppExists } = useTerminal()
   const [isDeploying, setIsDeploying] = useState(false)
   const [isDeployed, setIsDeployed] = useState(false)
+  const [deployButtonVisible, setDeployButtonEnabled] = useState(false)
 
   useEffect(() => {
     const checkDeployment = async () => {
       if (getAppExists) {
         const exists = await getAppExists(data.id)
-        setIsDeployed(exists)
+        setDeployButtonEnabled(exists.success)
+        setIsDeployed((exists.success && exists.exists) ?? false)
       }
     }
     checkDeployment()
@@ -50,10 +52,12 @@ export default function DeployButtonModal({
     <>
       <Popover>
         <PopoverTrigger asChild>
+          {deployButtonVisible && (
             <Button variant="outline">
               <Globe className="w-4 h-4 mr-2" />
               Deploy
             </Button>
+          )}
         </PopoverTrigger>
         <PopoverContent
           className="p-4 w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg shadow-lg"

frontend/context/TerminalContext.tsx

@@ -20,7 +20,9 @@ interface TerminalContextType {
   createNewTerminal: (command?: string) => Promise<void>
   closeTerminal: (id: string) => void
   deploy: (callback: () => void) => void
-  getAppExists: ((appName: string) => Promise<boolean>) | null
+  getAppExists:
+    | ((appName: string) => Promise<{ success: boolean; exists?: boolean }>)
+    | null
 }
 
 const TerminalContext = createContext<TerminalContextType | undefined>(
@@ -92,16 +94,18 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
     })
   }
 
-  const getAppExists = async (appName: string): Promise<boolean> => {
+  const getAppExists = async (
+    appName: string
+  ): Promise<{ success: boolean; exists?: boolean }> => {
     console.log("Is there a socket: " + !!socket)
     if (!socket) {
       console.error("Couldn't check if app exists: No socket")
-      return false
+      return { success: false }
     }
-    const response: { exists: boolean } = await new Promise((resolve) =>
+    const response: { success: boolean; exists?: boolean } = await new Promise(
-      socket.emit("getAppExists", { appName }, resolve)
+      (resolve) => socket.emit("getAppExists", { appName }, resolve)
     )
-    return response.exists
+    return response
   }
 
   const value = {