Automatically try to connect a connection when possible

web/packages/teleterm/src/ui/DocumentGateway/useDocumentGateway.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 import * as types from 'teleterm/ui/services/workspacesService';
 import useAsync from 'teleterm/ui/useAsync';
@@ -25,6 +25,7 @@ export default function useGateway(doc: types.DocumentGateway) {
   const workspaceDocumentsService = useWorkspaceDocumentsService();
   const gateway = ctx.clustersService.findGateway(doc.gatewayUri);
   const connected = !!gateway;
+  const cluster = ctx.clustersService.findRootClusterByResource(doc.targetUri);
 
   const [connectAttempt, createGateway, setConnectAttempt] = useAsync(
     async () => {
@@ -45,10 +46,7 @@ export default function useGateway(doc: types.DocumentGateway) {
   });
 
   const reconnect = () => {
-    const cluster = ctx.clustersService.findRootClusterByResource(
-      doc.targetUri
-    );
-    if (cluster && cluster.connected) {
+    if (cluster?.connected) {
       createGateway();
       return;
     }
@@ -75,6 +73,12 @@ export default function useGateway(doc: types.DocumentGateway) {
     }
   }, [disconnectAttempt.status]);
 
+  useEffect(() => {
+    if (cluster.connected) {
+      createGateway();
+    }
+  }, [cluster.connected]);
+
   return {
     doc,
     gateway,

web/packages/teleterm/src/ui/DocumentTerminal/useReconnect.ts

@@ -18,20 +18,25 @@ import { useAppContext } from 'teleterm/ui/appContextProvider';
 import * as types from 'teleterm/ui/services/workspacesService';
 import useAttempt from 'shared/hooks/useAttemptNext';
 import { useWorkspaceDocumentsService } from 'teleterm/ui/Documents';
+import { useEffect } from 'react';
 
 export function useReconnect(doc: types.DocumentTshNode) {
   const ctx = useAppContext();
   const workspaceDocumentsService = useWorkspaceDocumentsService();
   const { attempt, setAttempt } = useAttempt('');
+  const cluster = ctx.clustersService.findRootClusterByResource(doc.serverUri);
 
-  function updateDoc() {
+  function markDocumentAsConnected() {
     workspaceDocumentsService.update(doc.uri, { status: 'connected' });
   }
 
+  useEffect(() => {
+    if (cluster.connected) {
+      markDocumentAsConnected();
+    }
+  }, []);
+
   function reconnect() {
-    const cluster = ctx.clustersService.findRootClusterByResource(
-      doc.serverUri
-    );
     if (!cluster) {
       setAttempt({
         status: 'failed',
@@ -44,13 +49,13 @@ export function useReconnect(doc: types.DocumentTshNode) {
     if (!cluster.connected) {
       ctx.commandLauncher.executeCommand('cluster-connect', {
         clusterUri: cluster.uri,
-        onSuccess: updateDoc,
+        onSuccess: markDocumentAsConnected,
       });
 
       return;
     }
 
-    updateDoc();
+    markDocumentAsConnected();
   }
 
   return { reconnect, attempt };