Update document title on target port change

gravitational · Jan 16, 2025 · fcf9b7e · fcf9b7e
1 parent 7f60071
commit fcf9b7e
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 32 deletions.
diff --git a/web/packages/teleterm/src/ui/DocumentGateway/useGateway.ts b/web/packages/teleterm/src/ui/DocumentGateway/useGateway.ts
@@ -24,7 +24,10 @@ import { useAsync } from 'shared/hooks/useAsync';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 import { useWorkspaceContext } from 'teleterm/ui/Documents';
 import { useStoreSelector } from 'teleterm/ui/hooks/useStoreSelector';
-import { DocumentGateway } from 'teleterm/ui/services/workspacesService';
+import {
+  DocumentGateway,
+  getGatewayDocumentTitle,
+} from 'teleterm/ui/services/workspacesService';
 import { isAppUri, isDatabaseUri } from 'teleterm/ui/uri';
 import { retryWithRelogin } from 'teleterm/ui/utils';
 
@@ -120,8 +123,12 @@ export function useGateway(doc: DocumentGateway) {
                 name
               );
 
-            documentsService.update(doc.uri, {
-              targetSubresourceName: updatedGateway.targetSubresourceName,
+            documentsService.update(doc.uri, draft => {
+              const draftDoc = draft as DocumentGateway;
+
+              draftDoc.targetSubresourceName =
+                updatedGateway.targetSubresourceName;
+              draftDoc.title = getGatewayDocumentTitle(draftDoc);
             });
           }),
         [

diff --git a/web/packages/teleterm/src/ui/services/connectionTracker/connectionTrackerService.test.tsx b/web/packages/teleterm/src/ui/services/connectionTracker/connectionTrackerService.test.tsx
@@ -74,6 +74,7 @@ test('updating target port creates new connection', async () => {
   expect(await screen.findByText('Close Connection')).toBeInTheDocument();
   expect(ctx.connectionTracker.getConnections()).toHaveLength(1);
   const conn1337 = ctx.connectionTracker.getConnections()[0];
+  expect(conn1337.title).toEqual(`${app.name}:1337`);
 
   // Update target port.
   let targetPortInput = screen.getByLabelText('Target Port');
@@ -93,6 +94,7 @@ test('updating target port creates new connection', async () => {
   expect(ctx.connectionTracker.getConnections()).toHaveLength(2);
   const conn4242 = ctx.connectionTracker.getConnections()[1];
   expect(conn4242.id).not.toEqual(conn1337.id);
+  expect(conn4242.title).toEqual(`${app.name}:4242`);
 
   await act(async () => {
     await ctx.connectionTracker.activateItem(conn4242.id, {

diff --git a/...packages/teleterm/src/ui/services/workspacesService/documentsService/connectToApp.test.ts b/...packages/teleterm/src/ui/services/workspacesService/documentsService/connectToApp.test.ts
@@ -132,6 +132,7 @@ describe('setUpAppGateway', () => {
         tcpPorts: [{ port: 1234, endPort: 0 }],
       }),
       expectedTargetSubresourceName: '1234',
+      expectedTitle: 'foo:1234',
     },
     {
       name: 'creates tunnel for a multi-port TCP app with a preselected target port',
@@ -140,40 +141,49 @@ describe('setUpAppGateway', () => {
         tcpPorts: [{ port: 1234, endPort: 0 }],
       }),
       targetPort: 1234,
+      expectedTitle: 'foo:1234',
     },
     {
       name: 'creates tunnel for a web app',
       app: makeApp({
         endpointUri: 'http://localhost:3000',
       }),
     },
-  ])('$name', async ({ app, targetPort, expectedTargetSubresourceName }) => {
-    const appContext = new MockAppContext();
-    setTestCluster(appContext);
-
-    await setUpAppGateway(appContext, app, {
-      telemetry: { origin: 'resource_table' },
+  ])(
+    '$name',
+    async ({
+      app,
       targetPort,
-    });
-    const documents = appContext.workspacesService
-      .getActiveWorkspaceDocumentService()
-      .getGatewayDocuments();
-    expect(documents).toHaveLength(1);
-    expect(documents[0]).toEqual({
-      gatewayUri: undefined,
-      kind: 'doc.gateway',
-      origin: 'resource_table',
-      port: undefined,
-      status: '',
-      targetName: 'foo',
-      targetSubresourceName:
-        expectedTargetSubresourceName || targetPort?.toString() || undefined,
-      targetUri: '/clusters/teleport-local/apps/foo',
-      targetUser: '',
-      title: 'foo',
-      uri: expect.any(String),
-    });
-  });
+      expectedTargetSubresourceName,
+      expectedTitle,
+    }) => {
+      const appContext = new MockAppContext();
+      setTestCluster(appContext);
+
+      await setUpAppGateway(appContext, app, {
+        telemetry: { origin: 'resource_table' },
+        targetPort,
+      });
+      const documents = appContext.workspacesService
+        .getActiveWorkspaceDocumentService()
+        .getGatewayDocuments();
+      expect(documents).toHaveLength(1);
+      expect(documents[0]).toEqual({
+        gatewayUri: undefined,
+        kind: 'doc.gateway',
+        origin: 'resource_table',
+        port: undefined,
+        status: '',
+        targetName: 'foo',
+        targetSubresourceName:
+          expectedTargetSubresourceName || targetPort?.toString() || undefined,
+        targetUri: '/clusters/teleport-local/apps/foo',
+        targetUser: '',
+        title: expectedTitle || 'foo',
+        uri: expect.any(String),
+      });
+    }
+  );
 });
 
 test('cloud app triggers alert', async () => {

diff --git a/web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsService.ts b/web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsService.ts
@@ -29,6 +29,10 @@ import {
 } from 'teleterm/ui/uri';
 import { unique } from 'teleterm/ui/utils/uid';
 
+import {
+  getDocumentGatewayTargetUriKind,
+  getGatewayDocumentTitle,
+} from './documentsUtils';
 import {
   CreateAccessRequestDocumentOpts,
   CreateGatewayDocumentOpts,
@@ -155,21 +159,22 @@ export class DocumentsService {
       origin,
     } = opts;
     const uri = routing.getDocUri({ docId: unique() });
-    const title = targetUser ? `${targetUser}@${targetName}` : targetName;
 
-    return {
+    const doc: DocumentGateway = {
       uri,
       kind: 'doc.gateway',
       targetUri,
       targetUser,
       targetName,
       targetSubresourceName,
       gatewayUri,
-      title,
+      title: undefined,
       port,
       origin,
       status: '',
     };
+    doc.title = getGatewayDocumentTitle(doc);
+    return doc;
   }
 
   createGatewayCliDocument({

diff --git a/web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsUtils.ts b/web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsUtils.ts
@@ -93,3 +93,22 @@ export function getDocumentGatewayTargetUriKind(
   // However, at the moment that field is essentially of type string, so there's not much we can do
   // with regards to type safety.
 }
+
+export function getGatewayDocumentTitle(doc: DocumentGateway): string {
+  const { targetName, targetUri, targetUser, targetSubresourceName } = doc;
+  const targetKind = getDocumentGatewayTargetUriKind(targetUri);
+
+  switch (targetKind) {
+    case 'db': {
+      return targetUser ? `${targetUser}@${targetName}` : targetName;
+    }
+    case 'app': {
+      return targetSubresourceName
+        ? `${targetName}:${targetSubresourceName}`
+        : targetName;
+    }
+    default: {
+      targetKind satisfies never;
+    }
+  }
+}