[v13] Prevent crashing Teleport Connect after downgrading from v15

web/packages/teleterm/src/ui/Documents/DocumentsRenderer.tsx

@@ -17,6 +17,7 @@
 import React, { useMemo } from 'react';
 
 import styled from 'styled-components';
+import { Text } from 'design';
 /* eslint-disable @typescript-eslint/ban-ts-comment*/
 // @ts-ignore
 import { DocumentAccessRequests } from 'e-teleterm/ui/DocumentAccessRequests/DocumentAccessRequests';
@@ -34,7 +35,7 @@ import DocumentGateway from 'teleterm/ui/DocumentGateway';
 import { DocumentTerminal } from 'teleterm/ui/DocumentTerminal';
 
 import Document from 'teleterm/ui/Document';
-import { RootClusterUri } from 'teleterm/ui/uri';
+import { RootClusterUri, isDatabaseUri } from 'teleterm/ui/uri';
 
 import { WorkspaceContextProvider } from './workspaceContext';
 import { KeyboardShortcutsPanel } from './KeyboardShortcutsPanel';
@@ -96,8 +97,21 @@ function MemoizedDocument(props: { doc: types.Document; visible: boolean }) {
     switch (doc.kind) {
       case 'doc.cluster':
         return <DocumentCluster doc={doc} visible={visible} />;
-      case 'doc.gateway':
-        return <DocumentGateway doc={doc} visible={visible} />;
+      case 'doc.gateway': {
+        if (isDatabaseUri(doc.targetUri)) {
+          return <DocumentGateway doc={doc} visible={visible} />;
+        }
+        return (
+          <Document visible={visible}>
+            <Text m="auto" mt={10} textAlign="center">
+              Cannot create a gateway for the target "{doc.targetUri}".
+              <br />
+              Only database targets are supported.
+            </Text>
+          </Document>
+        );
+      }
+
       case 'doc.gateway_cli_client':
         return <DocumentGatewayCliClient doc={doc} visible={visible} />;
       case 'doc.terminal_shell':
@@ -109,7 +123,9 @@ function MemoizedDocument(props: { doc: types.Document; visible: boolean }) {
       default:
         return (
           <Document visible={visible}>
-            Document kind "{doc.kind}" is not supported
+            <Text m="auto" mt={10} textAlign="center">
+              Document kind "{doc.kind}" is not supported.
+            </Text>
           </Document>
         );
     }

web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx

@@ -20,7 +20,7 @@ import { Trash, Unlink } from 'design/Icon';
 
 import { ExtendedTrackedConnection } from 'teleterm/ui/services/connectionTracker';
 import { ListItem } from 'teleterm/ui/components/ListItem';
-import { assertUnreachable } from 'teleterm/ui/utils';
+import { isDatabaseUri } from 'teleterm/ui/uri';
 
 import { useKeyboardArrowsNavigation } from 'teleterm/ui/components/KeyboardArrowsNavigation';
 
@@ -105,7 +105,7 @@ export function ConnectionItem(props: ConnectionItemProps) {
                 border-radius: 4px;
               `}
             >
-              {getKindName(props.item.kind)}
+              {getKindName(props.item)}
             </span>
             <span
               css={`
@@ -138,15 +138,24 @@ export function ConnectionItem(props: ConnectionItemProps) {
   );
 }
 
-function getKindName(kind: ExtendedTrackedConnection['kind']): string {
-  switch (kind) {
+function getKindName(connection: ExtendedTrackedConnection): string {
+  switch (connection.kind) {
     case 'connection.gateway':
-      return 'DB';
+      if (isDatabaseUri(connection.targetUri)) {
+        return 'DB';
+      }
+      return 'UNKNOWN';
     case 'connection.server':
       return 'SSH';
     case 'connection.kube':
       return 'KUBE';
     default:
-      assertUnreachable(kind);
+      // The default branch is triggered when the state read from the disk
+      // contains a connection not supported by the given Connect version.
+      //
+      // For example, the user can open an app connection in Connect v15
+      // and then downgrade to a version that doesn't support apps.
+      // That connection should be shown as 'UNKNOWN' in the connection list.
+      return 'UNKNOWN';
   }
 }

web/packages/teleterm/src/ui/services/connectionTracker/trackedConnectionOperationsFactory.ts

@@ -100,7 +100,7 @@ export class TrackedConnectionOperationsFactory {
   private getConnectionGatewayOperations(
     connection: TrackedGatewayConnection
   ): TrackedConnectionOperations {
-    const { rootClusterId, leafClusterId } = routing.parseDbUri(
+    const { rootClusterId, leafClusterId } = routing.parseClusterUri(
       connection.targetUri
     ).params;
     const { rootClusterUri, leafClusterUri } = this.getClusterUris({

web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsService.ts

@@ -137,7 +137,7 @@ export class DocumentsService {
       origin,
     } = opts;
     const uri = routing.getDocUri({ docId: unique() });
-    const title = `${targetUser}@${targetName}`;
+    const title = targetUser ? `${targetUser}@${targetName}` : targetName;
 
     return {
       uri,

web/packages/teleterm/src/ui/uri.ts

@@ -192,6 +192,18 @@ export const routing = {
   },
 };
 
+export function isDatabaseUri(uri: string): uri is DatabaseUri {
+  return !!routing.parseDbUri(uri);
+}
+
+export function isServerUri(uri: string): uri is ServerUri {
+  return !!routing.parseServerUri(uri);
+}
+
+export function isKubeUri(uri: string): uri is KubeUri {
+  return !!routing.parseKubeUri(uri);
+}
+
 export type Params = {
   rootClusterId?: string;
   leafClusterId?: string;