From f90e7b4b3146421af7e06614f716f203691fdf1e Mon Sep 17 00:00:00 2001
From: Gabriel Corado <gabriel.oliveira@goteleport.com>
Date: Mon, 9 Dec 2024 17:42:35 -0300
Subject: [PATCH 1/8] feat(web): add database terminal access

---
 web/packages/teleport/src/Console/Console.tsx |   5 +-
 .../src/Console/DocumentDb/ConnectDialog.tsx  | 202 ++++++++++++++++++
 .../Console/DocumentDb/DocumentDb.story.tsx   | 196 +++++++++++++++++
 .../Console/DocumentDb/DocumentDb.test.tsx    | 154 +++++++++++++
 .../src/Console/DocumentDb/DocumentDb.tsx     |  75 +++++++
 .../teleport/src/Console/DocumentDb/index.js  |  20 ++
 .../src/Console/DocumentDb/useDbSession.tsx   | 148 +++++++++++++
 .../Console/DocumentSsh/Terminal/Terminal.tsx |   9 +
 .../teleport/src/Console/consoleContext.tsx   |  33 ++-
 .../teleport/src/Console/stores/storeDocs.ts  |   4 +
 .../teleport/src/Console/stores/types.ts      |  12 +-
 .../teleport/src/Console/useTabRouting.ts     |   5 +-
 .../ConnectDialog/ConnectDialog.story.tsx     |  12 ++
 .../Databases/ConnectDialog/ConnectDialog.tsx |  25 ++-
 .../UnifiedResources/ResourceActionButton.tsx |   3 +-
 web/packages/teleport/src/config.ts           |  17 ++
 .../teleport/src/lib/term/protobuf.ts         |   6 +
 web/packages/teleport/src/lib/term/tty.ts     |  14 ++
 .../src/services/databases/databases.test.ts  |  12 ++
 .../src/services/databases/makeDatabase.ts    |   2 +
 .../teleport/src/services/databases/types.ts  |   2 +
 21 files changed, 946 insertions(+), 10 deletions(-)
 create mode 100644 web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
 create mode 100644 web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
 create mode 100644 web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
 create mode 100644 web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
 create mode 100644 web/packages/teleport/src/Console/DocumentDb/index.js
 create mode 100644 web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx

diff --git a/web/packages/teleport/src/Console/Console.tsx b/web/packages/teleport/src/Console/Console.tsx
index 36cf572586dbd..f17a59ae259df 100644
--- a/web/packages/teleport/src/Console/Console.tsx
+++ b/web/packages/teleport/src/Console/Console.tsx
@@ -37,6 +37,7 @@ import usePageTitle from './usePageTitle';
 import useTabRouting from './useTabRouting';
 import useOnExitConfirmation from './useOnExitConfirmation';
 import useKeyboardNav from './useKeyboardNav';
+import DocumentDb from './DocumentDb';
 
 const POLL_INTERVAL = 5000; // every 5 sec
 
@@ -77,7 +78,7 @@ export default function Console() {
     return consoleCtx.refreshParties();
   }
 
-  const disableNewTab = storeDocs.getNodeDocuments().length > 0;
+  const disableNewTab = storeDocs.getNodeDocuments().length > 0 || storeDocs.getDbDocuments().length > 0;
   const $docs = documents.map(doc => (
     <MemoizedDocument doc={doc} visible={doc.id === activeDocId} key={doc.id} />
   ));
@@ -139,6 +140,8 @@ function MemoizedDocument(props: { doc: stores.Document; visible: boolean }) {
         return <DocumentNodes doc={doc} visible={visible} />;
       case 'kubeExec':
         return <DocumentKubeExec doc={doc} visible={visible} />;
+      case 'db':
+        return <DocumentDb doc={doc} visible={visible} />;
       default:
         return <DocumentBlank doc={doc} visible={visible} />;
     }
diff --git a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
new file mode 100644
index 0000000000000..8d270e0271196
--- /dev/null
+++ b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
@@ -0,0 +1,202 @@
+/**
+ * Teleport
+ * Copyright (C) 2024  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import Dialog, {
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from 'design/Dialog';
+import {
+    Box,
+  ButtonPrimary,
+  ButtonSecondary,
+  Flex,
+  Indicator,
+} from 'design';
+
+import Validation from 'shared/components/Validation';
+import { Option } from 'shared/components/Select';
+import { FieldSelect, FieldSelectCreatable } from 'shared/components/FieldSelect';
+import { Database } from 'teleport/services/databases';
+import { useTeleport } from 'teleport';
+import { useUnifiedResourcesFetch } from 'shared/components/UnifiedResources';
+import { Danger } from 'design/Alert';
+import { requiredField } from 'shared/components/Validation/rules';
+
+type Props = {
+  clusterId: string;
+  serviceName: string;
+  onClose(): void;
+  onConnect: onConnectCallback;
+};
+
+type onConnectCallback = (
+  name: string,
+  protocol: string,
+  dbName: string,
+  dbUser: string,
+  dbRoles: string[],
+) => void;
+
+function DbConnectDialog({ clusterId, serviceName, onClose, onConnect }: Props) {
+  // Fetch database information to pre-fill the connection parameters.
+  const ctx = useTeleport();
+  const {
+    fetch: unifiedFetch,
+    attempt,
+    resources,
+  } = useUnifiedResourcesFetch({
+    fetchFunc: useCallback(
+      async (_, signal) => {
+        const response = await ctx.resourceService.fetchUnifiedResources(
+          clusterId,
+          {
+            query: `name == "${serviceName}"`,
+            sort: { fieldName: 'name', dir: 'ASC'},
+            limit: 1,
+          },
+          signal
+        );
+
+
+        // TODO(gabrielcorado): Handle scenarios where there is conflict on the name.
+        if (response.agents.length !== 1 || response.agents[0].kind !== 'db') {
+          throw new Error('Unable to retrieve database information.');
+        }
+
+        return { agents: response.agents };
+      },
+      [clusterId, serviceName]
+    )
+  })
+  useEffect(() => { unifiedFetch({clear: true})}, [])
+
+
+  return (
+    <Dialog
+      dialogCss={dialogCss}
+      disableEscapeKeyDown={false}
+      onClose={onClose}
+      open={true}
+    >
+      <DialogHeader mb={4}>
+        <DialogTitle>Connect To Database</DialogTitle>
+      </DialogHeader>
+
+      {attempt.status === 'failed' && <Danger children={attempt.statusText} />}
+      {(attempt.status === '' || attempt.status === 'processing') && (
+        <Box textAlign="center" m={10}>
+          <Indicator />
+        </Box>
+      )}
+      {attempt.status === 'success' && <DbConnectDialogForm db={resources[0]} onConnect={onConnect} onClose={onClose} />}
+    </Dialog>
+  );
+}
+
+type FormProps = {
+  db: Database;
+  onConnect: onConnectCallback;
+  onClose(): void;
+};
+
+function DbConnectDialogForm({ db, onConnect, onClose }: FormProps) {
+  const dbUserOpts = db.users?.map(user => ({value: user, label: user}));
+  const dbNamesOpts = db.names?.map(name => ({value: name, label: name}));
+  const dbRolesOpts = db.roles?.map(role => ({value: role, label: role}));
+
+  const [selectedName, setSelectedName] = useState<Option>(dbNamesOpts?.[0]);
+  const [selectedUser, setSelectedUser] = useState<Option>(dbUserOpts?.[0]);
+  const [selectedRoles, setSelectedRoles] = useState<readonly Option[]>();
+
+  const dbConnect = () => {
+    onConnect(db.name, db.protocol, selectedName.value, selectedUser.value, selectedRoles?.map((role) => role.value));
+  };
+
+  return (
+    <Validation>
+      {({ validator }) => (
+        <form>
+          <DialogContent minHeight="240px" flex="0 0 auto">
+            <FieldSelectCreatable
+              label="Database user"
+              menuPosition="fixed"
+              onChange={option => setSelectedUser(option as Option)}
+              value={selectedUser}
+              options={dbUserOpts}
+              isDisabled={dbUserOpts?.length == 1}
+              formatCreateLabel={userInput => `Use "${userInput}" database user`}
+              rule={requiredField('Database user is required')}
+            />
+            {dbRolesOpts?.length > 0 && <FieldSelect
+              label="Database roles"
+              menuPosition="fixed"
+              isMulti={true}
+              onChange={setSelectedRoles}
+              value={selectedRoles}
+              options={dbRolesOpts}
+            /> }
+            <FieldSelectCreatable
+              label="Database name"
+              menuPosition="fixed"
+              onChange={option => setSelectedName(option as Option)}
+              value={selectedName}
+              options={dbNamesOpts}
+              isDisabled={dbNamesOpts?.length == 1}
+              formatCreateLabel={userInput => `Use "${userInput}" database name`}
+              rule={requiredField('Database name is required')}
+            />
+          </DialogContent>
+          <DialogFooter>
+            <Flex alignItems="center" justifyContent="space-between">
+              <ButtonSecondary
+                type="button"
+                width="45%"
+                size="large"
+                onClick={onClose}
+              >
+                Close
+              </ButtonSecondary>
+              <ButtonPrimary
+                type="submit"
+                width="45%"
+                size="large"
+                onClick={e => {
+                  e.preventDefault();
+                  validator.validate() && dbConnect();
+                }}
+              >
+                Connect
+              </ButtonPrimary>
+            </Flex>
+          </DialogFooter>
+        </form>
+      )}
+    </Validation>
+  );
+}
+
+const dialogCss = () => `
+  min-height: 200px;
+  max-width: 600px;
+  width: 100%;
+`;
+
+export default DbConnectDialog;
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
new file mode 100644
index 0000000000000..f0a3a48d593d3
--- /dev/null
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
@@ -0,0 +1,196 @@
+/**
+ * Teleport
+ * Copyright (C) 2024  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import { createTeleportContext } from 'teleport/mocks/contexts';
+import ConsoleCtx from 'teleport/Console/consoleContext';
+
+import { ContextProvider } from 'teleport';
+import { TestLayout } from 'teleport/Console/Console.story';
+import TeleportContext from 'teleport/teleportContext';
+import * as stores from 'teleport/Console/stores/types';
+
+import DocumentDb from './DocumentDb';
+
+import { ResourcesResponse, UnifiedResource } from 'teleport/services/agents';
+
+export default {
+  title: 'Teleport/Console/DocumentDb',
+};
+
+export const Connect = () => {
+  const { ctx, consoleCtx } = getContexts(Promise.resolve({
+    agents: [
+      {
+        kind: 'db',
+        name: 'mydb',
+        description: '',
+        type: '',
+        protocol: 'postgres',
+        labels: [],
+        names: ['users', 'orders'],
+        users: ['alice', 'bob'],
+        roles: ['reader', 'all'],
+        hostname: '',
+        supportsInteractive: true,
+      },
+    ]
+  }));
+
+  return (
+    <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />
+  );
+};
+
+export const ConnectWithoutRoles = () => {
+  const { ctx, consoleCtx } = getContexts(Promise.resolve({
+    agents: [
+      {
+        kind: 'db',
+        name: 'mydb',
+        description: '',
+        type: '',
+        protocol: 'postgres',
+        labels: [],
+        names: ['users', 'orders'],
+        users: ['alice', 'bob'],
+        hostname: '',
+        supportsInteractive: true,
+      },
+    ]
+  }));
+
+  return (
+    <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />
+  );
+};
+
+export const ConnectWithoutValues = () => {
+  const { ctx, consoleCtx } = getContexts(Promise.resolve({
+    agents: [
+      {
+        kind: 'db',
+        name: 'mydb',
+        description: '',
+        type: '',
+        protocol: 'postgres',
+        labels: [],
+        hostname: '',
+        supportsInteractive: true,
+      },
+    ]
+  }));
+
+  return (
+    <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />
+  );
+};
+
+export const NotFound = () => {
+  const { ctx, consoleCtx } = getContexts(Promise.resolve({agents: []}));
+
+  return (
+    <DocumentDbWrapper
+      ctx={ctx}
+      consoleCtx={consoleCtx}
+      doc={baseDoc}
+    />
+  );
+};
+
+export const Loading = () => {
+  // Resources list that never resolves.
+  const { ctx, consoleCtx } = getContexts(new Promise(() => {}));
+
+  return (
+    <DocumentDbWrapper
+      ctx={ctx}
+      consoleCtx={consoleCtx}
+      doc={baseDoc}
+    />
+  );
+};
+
+export const LoadError = () => {
+  const { ctx, consoleCtx } = getContexts(Promise.reject(new Error('failed to fetch')));
+
+  return (
+    <DocumentDbWrapper
+      ctx={ctx}
+      consoleCtx={consoleCtx}
+      doc={baseDoc}
+    />
+  );
+};
+
+type Props = {
+  ctx: TeleportContext;
+  consoleCtx: ConsoleCtx;
+  doc: stores.DocumentDb;
+};
+
+const DocumentDbWrapper = ({ ctx, consoleCtx, doc }: Props) => {
+  return (
+    <ContextProvider ctx={ctx}>
+      <TestLayout ctx={consoleCtx}>
+        <DocumentDb doc={doc} visible={true} />
+      </TestLayout>
+    </ContextProvider>
+  );
+};
+
+function getContexts(resources: any) {
+  const ctx = createTeleportContext();
+  ctx.resourceService.fetchUnifiedResources = () => resources;
+
+  const consoleCtx = new ConsoleCtx();
+  const tty = consoleCtx.createTty({
+      kind: 'db',
+      login: '123',
+      sid: '456',
+      namespace: '',
+      created: new Date(),
+      durationText: '',
+      serverId: '',
+      resourceName: '',
+      clusterId: '',
+      parties: [],
+      addr: '',
+      participantModes: [],
+      moderated: false,
+      command: '/bin/bash',
+  });
+  tty.connect = () => null;
+  consoleCtx.createTty = () => tty;
+  consoleCtx.storeUser = ctx.storeUser;
+
+  return { ctx, consoleCtx };
+}
+
+const baseDoc = {
+  kind: 'db',
+  status: 'connected',
+  sid: 'sid-value',
+  clusterId: 'clusterId-value',
+  serverId: 'serverId-value',
+  name: 'mydb',
+  url: 'fd',
+  created: new Date(),
+} as const;
+
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
new file mode 100644
index 0000000000000..0dcea7c1489f7
--- /dev/null
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
@@ -0,0 +1,154 @@
+
+/**
+ * Teleport
+ * Copyright (C) 2024  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+
+import 'jest-canvas-mock';
+
+import { act, render } from 'design/utils/testing';
+
+import { ContextProvider } from 'teleport';
+import { TestLayout } from 'teleport/Console/Console.story';
+import ConsoleCtx from 'teleport/Console/consoleContext';
+import { createTeleportContext } from 'teleport/mocks/contexts';
+
+import Tty from 'teleport/lib/term/tty';
+
+import useDbSession, { Status } from './useDbSession';
+
+import DocumentDb from './DocumentDb';
+
+import type { Session } from 'teleport/services/session';
+
+jest.mock('./useDbSession');
+
+const mockUseDbSession = useDbSession as jest.MockedFunction<
+  typeof useDbSession
+>;
+
+describe('DocumentDb', () => {
+  const setup = (status: Status) => {
+    mockUseDbSession.mockReturnValue({
+      tty: {
+        sendDbConnectData: jest.fn(),
+        on: jest.fn(),
+        removeListener: jest.fn(),
+        connect: jest.fn(),
+        disconnect: jest.fn(),
+        removeAllListeners: jest.fn(),
+      } as unknown as Tty,
+      status,
+      closeDocument: jest.fn(),
+      sendDbConnectData: jest.fn(),
+      session: baseSession,
+    });
+
+    const { ctx, consoleCtx } = getContexts();
+
+    render(
+      <ContextProvider ctx={ctx}>
+        <TestLayout ctx={consoleCtx}>
+          <DocumentDb doc={baseDoc} visible={true} />
+        </TestLayout>
+      </ContextProvider>
+    );
+  };
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  test('renders loading indicator when status is loading', async () => {
+    jest.useFakeTimers();
+    setup('loading');
+
+    act(() => jest.runAllTimers());
+    expect(screen.getByTestId('indicator')).toBeInTheDocument();
+  });
+
+  test('renders terminal window when status is initialized', () => {
+    setup('initialized');
+
+    expect(screen.getByTestId('terminal')).toBeInTheDocument();
+  });
+
+  test('renders data dialog when status is waiting', () => {
+    setup('waiting');
+
+    expect(screen.getByText('Connect To Database')).toBeInTheDocument();
+  });
+
+  test('does not render data dialog when status is initialized', () => {
+    setup('initialized');
+
+    expect(screen.queryByText('Exec into a pod')).not.toBeInTheDocument();
+  });
+});
+
+function getContexts() {
+  const ctx = createTeleportContext();
+  const consoleCtx = new ConsoleCtx();
+  const tty = consoleCtx.createTty(baseSession);
+  tty.connect = () => null;
+  consoleCtx.createTty = () => tty;
+  consoleCtx.storeUser = ctx.storeUser;
+
+  return { ctx, consoleCtx };
+}
+
+const baseDoc = {
+  kind: 'db',
+  status: 'connected',
+  sid: 'sid-value',
+  clusterId: 'clusterId-value',
+  serverId: 'serverId-value',
+  login: 'login-value',
+  url: 'fd',
+  created: new Date(),
+  name: 'mydb',
+} as const;
+
+const baseSession: Session = {
+  kind: 'db',
+  login: '123',
+  sid: '456',
+  namespace: '',
+  created: new Date(),
+  durationText: '',
+  serverId: '',
+  resourceName: '',
+  clusterId: '',
+  parties: [],
+  addr: '',
+  participantModes: [],
+  moderated: false,
+  command: '/bin/bash',
+};
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
new file mode 100644
index 0000000000000..5b85629678178
--- /dev/null
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
@@ -0,0 +1,75 @@
+/**
+ * Teleport
+ * Copyright (C) 2024  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useRef, useEffect } from 'react';
+
+import { useTheme } from 'styled-components';
+import { Box, Indicator } from 'design';
+
+import * as stores from 'teleport/Console/stores/types';
+import { Terminal, TerminalRef } from 'teleport/Console/DocumentSsh/Terminal';
+import { useMfa } from 'teleport/lib/useMfa';
+
+import Document from 'teleport/Console/Document';
+import AuthnDialog from 'teleport/components/AuthnDialog';
+
+import useDbSession from './useDbSession';
+import ConnectDialog from './ConnectDialog';
+
+type Props = {
+  visible: boolean;
+  doc: stores.DocumentDb;
+};
+
+export default function DocumentDb({ doc, visible }: Props) {
+  const terminalRef = useRef<TerminalRef>();
+  const { tty, status, closeDocument, sendDbConnectData } =
+    useDbSession(doc);
+  const mfa = useMfa(tty);
+  useEffect(() => {
+    // when switching tabs or closing tabs, focus on visible terminal
+    terminalRef.current?.focus();
+  }, [visible, mfa.requested, status]);
+  const theme = useTheme();
+
+  const terminal = (
+    <Terminal
+      ref={terminalRef}
+      tty={tty}
+      fontFamily={theme.fonts.mono}
+      theme={theme.colors.terminal}
+      convertEol
+      doc={doc}
+    />
+  );
+
+  return (
+    <Document visible={visible} flexDirection="column">
+      {status === 'loading' && (
+        <Box textAlign="center" m={10}>
+          <Indicator />
+        </Box>
+      )}
+      {mfa.requested && <AuthnDialog mfa={mfa} onCancel={closeDocument} />}
+
+      {status === 'waiting' && (
+        <ConnectDialog clusterId={doc.clusterId} serviceName={doc.name} onConnect={sendDbConnectData} onClose={closeDocument} />
+      )}
+      {status !== 'loading' && terminal}
+    </Document>
+  );
+}
diff --git a/web/packages/teleport/src/Console/DocumentDb/index.js b/web/packages/teleport/src/Console/DocumentDb/index.js
new file mode 100644
index 0000000000000..99efbdf3a0cca
--- /dev/null
+++ b/web/packages/teleport/src/Console/DocumentDb/index.js
@@ -0,0 +1,20 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import DocumentDb from './DocumentDb';
+export default DocumentDb;
diff --git a/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx b/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
new file mode 100644
index 0000000000000..2e011ab587b8d
--- /dev/null
+++ b/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
@@ -0,0 +1,148 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import { context, trace } from '@opentelemetry/api';
+
+import cfg from 'teleport/config';
+import { TermEvent } from 'teleport/lib/term/enums';
+import Tty from 'teleport/lib/term/tty';
+import ConsoleContext from 'teleport/Console/consoleContext';
+import { useConsoleContext } from 'teleport/Console/consoleContextProvider';
+import { DocumentDb } from 'teleport/Console/stores';
+
+import type {
+  ParticipantMode,
+  Session,
+  SessionMetadata,
+} from 'teleport/services/session';
+
+const tracer = trace.getTracer('TTY');
+
+export default function useDbSession(doc: DocumentDb) {
+  const { clusterId, sid } = doc;
+  const ctx = useConsoleContext();
+  const ttyRef = React.useRef<Tty>(null);
+  const tty = ttyRef.current as ReturnType<typeof ctx.createTty>;
+  const [session, setSession] = React.useState<Session>(null);
+  const [status, setStatus] = React.useState<Status>('loading');
+
+  function closeDocument() {
+    ctx.closeTab(doc);
+  }
+
+  function sendDbConnectData(
+    name: string,
+    protocol: string,
+    dbUser: string,
+    dbName: string,
+    dbRoles: string[],
+  ): void {
+    tty.sendDbConnectData({ serviceName: name, protocol, dbUser, dbName,  dbRoles });
+    ctx.updateDbDocument(doc.id, {
+      title: `${dbUser}@${name}`,
+    });
+    setStatus('initialized');
+  }
+
+  React.useEffect(() => {
+    const session: any = {
+      kind: 'db',
+      clusterId,
+      sid,
+    }
+
+    tracer.startActiveSpan(
+      'initTTY',
+      undefined, // SpanOptions
+      context.active(),
+      span => {
+        const tty = ctx.createTty(session);
+
+        // subscribe to tty events to handle connect/disconnects events
+        tty.on(TermEvent.CLOSE, () => ctx.closeTab(doc));
+
+        tty.on(TermEvent.CONN_CLOSE, () => {
+          setStatus('disconnected');
+          ctx.updateDbDocument(doc.id, { status: 'disconnected' });
+        });
+
+        tty.on(TermEvent.SESSION, payload => {
+          const data = JSON.parse(payload);
+          data.session.kind = 'k8s';
+          setSession(data.session);
+          handleTtyConnect(ctx, data.session, doc.id);
+        });
+
+        // assign tty reference so it can be passed down to xterm
+        ttyRef.current = tty;
+        setSession(session);
+        setStatus('waiting');
+        span.end();
+      }
+    );
+
+    function teardownTty() {
+      ttyRef.current && ttyRef.current.removeAllListeners();
+    }
+
+    return teardownTty;
+  }, []);
+
+  return {
+    tty,
+    status,
+    session,
+    closeDocument,
+    sendDbConnectData,
+  };
+}
+
+function handleTtyConnect(
+  ctx: ConsoleContext,
+  session: SessionMetadata,
+  docId: number
+) {
+  let { id: sid, cluster_name: clusterId, created } = session;
+
+  // The server response could not include the session ID. To avoid breaking the
+  // redirect, set a value to the session ID.
+  if (sid === '') {
+    sid = 'new'
+  }
+
+  const url = cfg.getDbSessionRoute({ clusterId, sid });
+  const createdDate = new Date(created);
+
+  ctx.updateDbDocument(docId, {
+    status: 'connected',
+    url,
+    created: createdDate,
+    sid,
+    clusterId,
+  });
+
+  ctx.gotoTab({ url });
+}
+
+export type Status =
+  | 'loading'
+  | 'waiting'
+  | 'initialized'
+  | 'disconnected';
diff --git a/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx b/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
index e235b296ac7a4..ce1aaba42d6d4 100644
--- a/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
+++ b/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
@@ -33,6 +33,7 @@ import XTermCtrl from 'teleport/lib/term/terminal';
 import { getMappedAction } from 'teleport/Console/useKeyboardNav';
 
 import StyledXterm from '../../StyledXterm';
+import { Document } from 'teleport/Console/stores';
 
 export interface TerminalProps {
   tty: Tty;
@@ -43,6 +44,7 @@ export interface TerminalProps {
   convertEol?: boolean;
   // terminalAddons is used to pass the tty to the parent component to enable any optional components like search or filetransfers.
   terminalAddons?: (terminalRef: XTermCtrl) => React.JSX.Element;
+  doc?: Document;
 }
 
 export const Terminal = forwardRef<TerminalRef, TerminalProps>((props, ref) => {
@@ -73,6 +75,13 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>((props, ref) => {
     termCtrl.open();
 
     const { unregister } = termCtrl.registerCustomKeyEventHandler(event => {
+      // Handle CTRL-C special case for database sessions.
+      // TODO(gabrielcorado): remove this once the server can properly handle it.
+      if (props.doc?.kind === 'db' && event.ctrlKey && event.key == 'c') {
+        return false;
+      }
+
+
       const { tabSwitch } = getMappedAction(event);
       if (tabSwitch) {
         return false;
diff --git a/web/packages/teleport/src/Console/consoleContext.tsx b/web/packages/teleport/src/Console/consoleContext.tsx
index e875bb557f73c..2b550ee94d7ce 100644
--- a/web/packages/teleport/src/Console/consoleContext.tsx
+++ b/web/packages/teleport/src/Console/consoleContext.tsx
@@ -23,7 +23,7 @@ import { W3CTraceContextPropagator } from '@opentelemetry/core';
 
 import webSession from 'teleport/services/websession';
 import history from 'teleport/services/history';
-import cfg, { UrlKubeExecParams, UrlSshParams } from 'teleport/config';
+import cfg, { UrlDbConnectParams, UrlKubeExecParams, UrlSshParams } from 'teleport/config';
 import { getHostName } from 'teleport/services/api';
 import Tty from 'teleport/lib/term/tty';
 import TtyAddressResolver from 'teleport/lib/term/ttyAddressResolver';
@@ -43,6 +43,7 @@ import {
   DocumentSsh,
   DocumentKubeExec,
   Document,
+  DocumentDb,
 } from './stores';
 
 const logger = Logger.create('teleport/console');
@@ -99,6 +100,10 @@ export default class ConsoleContext {
     this.storeDocs.update(id, partial);
   }
 
+  updateDbDocument(id: number, partial: Partial<DocumentDb>) {
+    this.storeDocs.update(id, partial);
+  }
+
   addNodeDocument(clusterId = cfg.proxyCluster) {
     return this.storeDocs.add({
       clusterId,
@@ -155,6 +160,20 @@ export default class ConsoleContext {
     });
   }
 
+  addDbDocument(params: UrlDbConnectParams) {
+    const url = this.getDbDocumentUrl(params);
+
+    return this.storeDocs.add({
+      kind: 'db',
+      status: 'disconnected',
+      clusterId: params.clusterId,
+      title: params.serviceName,
+      url,
+      created: new Date(),
+      name: params.serviceName,
+    });
+  }
+
   getDocuments() {
     return this.storeDocs.state.items;
   }
@@ -173,6 +192,10 @@ export default class ConsoleContext {
     return cfg.getKubeExecConnectRoute(kubeExecParams);
   }
 
+  getDbDocumentUrl(dbConnectParams: UrlDbConnectParams) {
+    return cfg.getDbConnectRoute(dbConnectParams);
+  }
+
   refreshParties() {
     return tracer.startActiveSpan('refreshParties', span => {
       // Finds unique clusterIds from all active ssh sessions
@@ -221,9 +244,7 @@ export default class ConsoleContext {
     const ctx = context.active();
 
     propagator.inject(ctx, carrier, defaultTextMapSetter);
-    const baseUrl =
-      session.kind === 'k8s' ? cfg.api.ttyKubeExecWsAddr : cfg.api.ttyWsAddr;
-
+    let baseUrl = '';
     let ttyParams = {};
     switch (session.kind) {
       case 'ssh':
@@ -233,9 +254,13 @@ export default class ConsoleContext {
           server_id: serverId,
           mode,
         };
+        baseUrl = cfg.api.ttyWsAddr;
         break;
       case 'k8s':
+        baseUrl = cfg.api.ttyKubeExecWsAddr;
         break;
+      case 'db':
+        baseUrl = cfg.api.ttyDbWsAddr;
     }
 
     const ttyUrl = baseUrl
diff --git a/web/packages/teleport/src/Console/stores/storeDocs.ts b/web/packages/teleport/src/Console/stores/storeDocs.ts
index e1febf0f2971b..dcda98f5df5d0 100644
--- a/web/packages/teleport/src/Console/stores/storeDocs.ts
+++ b/web/packages/teleport/src/Console/stores/storeDocs.ts
@@ -98,6 +98,10 @@ export default class StoreDocs extends Store<State> {
     ) as DocumentSsh[];
   }
 
+  getDbDocuments() {
+    return this.state.items.filter(doc => doc.kind === 'db');
+  }
+
   getDocuments(): Document[] {
     return this.state.items;
   }
diff --git a/web/packages/teleport/src/Console/stores/types.ts b/web/packages/teleport/src/Console/stores/types.ts
index 843ec95ad544f..1c2ea19a6ee8e 100644
--- a/web/packages/teleport/src/Console/stores/types.ts
+++ b/web/packages/teleport/src/Console/stores/types.ts
@@ -23,7 +23,7 @@ interface DocumentBase {
   title?: string;
   clusterId?: string;
   url: string;
-  kind: 'terminal' | 'nodes' | 'kubeExec' | 'blank';
+  kind: 'terminal' | 'nodes' | 'kubeExec' | 'db' | 'blank';
   created: Date;
 }
 
@@ -64,10 +64,20 @@ export interface DocumentKubeExec extends DocumentBase {
   command: string;
 }
 
+export interface DocumentDb extends DocumentBase {
+  status: 'connected' | 'disconnected';
+  kind: 'db';
+  sid?: string;
+  name: string;
+  dbName?: string;
+  dbUser?: string;
+}
+
 export type Document =
   | DocumentNodes
   | DocumentSsh
   | DocumentKubeExec
+  | DocumentDb
   | DocumentBlank;
 
 export type Parties = Record<string, Participant[]>;
diff --git a/web/packages/teleport/src/Console/useTabRouting.ts b/web/packages/teleport/src/Console/useTabRouting.ts
index b80b5203a1c59..911bfbc952e85 100644
--- a/web/packages/teleport/src/Console/useTabRouting.ts
+++ b/web/packages/teleport/src/Console/useTabRouting.ts
@@ -19,7 +19,7 @@
 import React from 'react';
 import { useRouteMatch, useParams, useLocation } from 'react-router';
 
-import cfg, { UrlKubeExecParams, UrlSshParams } from 'teleport/config';
+import cfg, { UrlDbConnectParams, UrlKubeExecParams, UrlSshParams } from 'teleport/config';
 import { ParticipantMode } from 'teleport/services/session';
 
 import ConsoleContext from './consoleContext';
@@ -35,6 +35,7 @@ export default function useRouting(ctx: ConsoleContext) {
   const joinSshRouteMatch = useRouteMatch<UrlSshParams>(
     cfg.routes.consoleSession
   );
+  const dbConnectMatch = useRouteMatch<UrlDbConnectParams>(cfg.routes.dbConnect);
 
   // Ensure that each URL has corresponding document
   React.useMemo(() => {
@@ -58,6 +59,8 @@ export default function useRouting(ctx: ConsoleContext) {
       ctx.addNodeDocument(clusterId);
     } else if (kubeExecRouteMatch) {
       ctx.addKubeExecDocument(kubeExecRouteMatch.params);
+    } else if (dbConnectMatch) {
+      ctx.addDbDocument(dbConnectMatch.params);
     }
   }, [ctx, pathname]);
 
diff --git a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.story.tsx b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.story.tsx
index 64c53edd97988..347254af33922 100644
--- a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.story.tsx
+++ b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.story.tsx
@@ -92,3 +92,15 @@ export const ConnectWithRequestId = () => {
     />
   );
 };
+
+export const ConnectDbSupportsInteractive = () => (
+  <ConnectDialog
+    username="gabriel"
+    dbName="pg"
+    dbProtocol="postgres"
+    clusterId="im-a-cluster"
+    onClose={() => null}
+    authType="local"
+    supportsInteractive={true}
+  />
+);
diff --git a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
index 20394973f0459..0d7ffda3bd131 100644
--- a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import { Text, Box, ButtonSecondary, Link } from 'design';
+import { Text, Box, ButtonSecondary, Link, Flex, ButtonPrimary } from 'design';
 import Dialog, {
   DialogHeader,
   DialogTitle,
@@ -28,7 +28,9 @@ import { DbProtocol } from 'shared/services/databases';
 
 import { AuthType } from 'teleport/services/user';
 import TextSelectCopy from 'teleport/components/TextSelectCopy';
-import { generateTshLoginCommand } from 'teleport/lib/util';
+import { generateTshLoginCommand, openNewTab } from 'teleport/lib/util';
+import cfg from 'teleport/config';
+import { NewTab as NewTabIcon } from 'design/Icon'; 
 
 export default function ConnectDialog({
   username,
@@ -38,6 +40,7 @@ export default function ConnectDialog({
   authType,
   accessRequestId,
   dbProtocol,
+  supportsInteractive,
 }: Props) {
   // For dynamodb and clickhouse-http protocols, the command is `tsh proxy db --tunnel` instead of `tsh db connect`.
   let connectCommand =
@@ -72,6 +75,12 @@ export default function ConnectDialog({
       dbNameFlag = ' [--db-name=<name>]';
   }
 
+  const onConnect = () => {
+    const url = cfg.getDbConnectRoute({ clusterId, serviceName: dbName });
+    openNewTab(url)
+    onClose()
+  }
+
   return (
     <Dialog
       dialogCss={() => ({
@@ -86,6 +95,17 @@ export default function ConnectDialog({
         <DialogTitle>Connect To Database</DialogTitle>
       </DialogHeader>
       <DialogContent minHeight="240px" flex="0 0 auto">
+        { supportsInteractive && (
+          <Box borderBottom={1} mb={4} pb={4}>
+            <Text mb={3} bold>
+              Open Teleport-authenticated session in the browser:
+            </Text>
+            <ButtonPrimary size="large" gap={2} onClick={onConnect}>
+              Connect in the browser
+              <NewTabIcon />
+            </ButtonPrimary>
+          </Box>
+        )}
         <Box mb={4}>
           <Text bold as="span">
             Step 1
@@ -148,4 +168,5 @@ export type Props = {
   clusterId: string;
   authType: AuthType;
   accessRequestId?: string;
+  supportsInteractive?: boolean;
 };
diff --git a/web/packages/teleport/src/UnifiedResources/ResourceActionButton.tsx b/web/packages/teleport/src/UnifiedResources/ResourceActionButton.tsx
index ab51c11b2c4c4..0a4d7553260b7 100644
--- a/web/packages/teleport/src/UnifiedResources/ResourceActionButton.tsx
+++ b/web/packages/teleport/src/UnifiedResources/ResourceActionButton.tsx
@@ -262,7 +262,7 @@ const AppLaunch = ({ app }: AppLaunchProps) => {
 };
 
 function DatabaseConnect({ database }: { database: Database }) {
-  const { name, protocol } = database;
+  const { name, protocol, supportsInteractive } = database;
   const ctx = useTeleport();
   const { clusterId } = useStickyClusterId();
   const [open, setOpen] = useState(false);
@@ -290,6 +290,7 @@ function DatabaseConnect({ database }: { database: Database }) {
           onClose={() => setOpen(false)}
           authType={authType}
           accessRequestId={accessRequestId}
+          supportsInteractive={supportsInteractive}
         />
       )}
     </>
diff --git a/web/packages/teleport/src/config.ts b/web/packages/teleport/src/config.ts
index 2f1478017633d..8e2e9db5aaa89 100644
--- a/web/packages/teleport/src/config.ts
+++ b/web/packages/teleport/src/config.ts
@@ -176,6 +176,8 @@ const cfg = {
     consoleSession: '/web/cluster/:clusterId/console/session/:sid',
     kubeExec: '/web/cluster/:clusterId/console/kube/exec/:kubeId/',
     kubeExecSession: '/web/cluster/:clusterId/console/kube/exec/:sid',
+    dbConnect: '/web/cluster/:clusterId/console/db/connect/:serviceName',
+    dbSession: '/web/cluster/:clusterId/console/db/session/:sid',
     player: '/web/cluster/:clusterId/session/:sid', // ?recordingType=ssh|desktop|k8s&durationMs=1234
     login: '/web/login',
     loginSuccess: '/web/msg/info/login_success',
@@ -257,6 +259,8 @@ const cfg = {
       'wss://:fqdn/v1/webapi/sites/:clusterId/connect/ws?params=:params&traceparent=:traceparent',
     ttyKubeExecWsAddr:
       'wss://:fqdn/v1/webapi/sites/:clusterId/kube/exec/ws?params=:params&traceparent=:traceparent',
+    ttyDbWsAddr:
+      'wss://:fqdn/v1/webapi/sites/:clusterId/db/exec/ws',
     ttyPlaybackWsAddr:
       'wss://:fqdn/v1/webapi/sites/:clusterId/ttyplayback/:sid?access_token=:token', // TODO(zmb3): get token out of URL
     activeAndPendingSessionsPath: '/v1/webapi/sites/:clusterId/sessions',
@@ -656,6 +660,14 @@ const cfg = {
     });
   },
 
+  getDbConnectRoute(params: UrlDbConnectParams) {
+    return generatePath(cfg.routes.dbConnect, { ...params });
+  },
+
+  getDbSessionRoute({ clusterId, sid }: UrlParams) {
+    return generatePath(cfg.routes.dbSession, { clusterId, sid });
+  },
+
   getKubeExecSessionRoute(
     { clusterId, sid }: UrlParams,
     mode?: ParticipantMode
@@ -1248,6 +1260,11 @@ export interface UrlKubeExecParams {
   kubeId: string;
 }
 
+export interface UrlDbConnectParams {
+  clusterId: string;
+  serviceName: string;
+}
+
 export interface UrlSessionRecordingsParams {
   start: string;
   end: string;
diff --git a/web/packages/teleport/src/lib/term/protobuf.ts b/web/packages/teleport/src/lib/term/protobuf.ts
index 43f5f985a465c..9dbdc3517b357 100644
--- a/web/packages/teleport/src/lib/term/protobuf.ts
+++ b/web/packages/teleport/src/lib/term/protobuf.ts
@@ -33,6 +33,7 @@ export const MessageTypeEnum = {
   ERROR: 'e',
   LATENCY: 'l',
   KUBE_EXEC: 'k',
+  DB_CONNECT: 'd',
 };
 
 export const messageFields = {
@@ -62,6 +63,7 @@ export const messageFields = {
       challengeResponse: MessageTypeEnum.MFA_CHALLENGE.charCodeAt(0),
       kubeExec: MessageTypeEnum.KUBE_EXEC.charCodeAt(0),
       error: MessageTypeEnum.ERROR.charCodeAt(0),
+      dbConnect: MessageTypeEnum.DB_CONNECT.charCodeAt(0),
     },
   },
 };
@@ -95,6 +97,10 @@ export class Protobuf {
     return this.encode(messageFields.type.values.kubeExec, message);
   }
 
+  encodeDbConnectData(message) {
+    return this.encode(messageFields.type.values.dbConnect, message);
+  }
+
   encodeRawMessage(message) {
     return this.encode(messageFields.type.values.data, message);
   }
diff --git a/web/packages/teleport/src/lib/term/tty.ts b/web/packages/teleport/src/lib/term/tty.ts
index 6b28a592e659f..3e924ff466f3f 100644
--- a/web/packages/teleport/src/lib/term/tty.ts
+++ b/web/packages/teleport/src/lib/term/tty.ts
@@ -116,6 +116,12 @@ class Tty extends EventEmitterMfaSender {
     this.socket.send(bytearray);
   }
 
+  sendDbConnectData(data: DbConnectData) {
+    const encoded = this._proto.encodeDbConnectData(JSON.stringify(data));
+    const bytearray = new Uint8Array(encoded);
+    this.socket.send(bytearray);
+  }
+
   _sendFileTransferRequest(message: string) {
     const encoded = this._proto.encodeFileTransferRequest(message);
     const bytearray = new Uint8Array(encoded);
@@ -300,4 +306,12 @@ export type KubeExecData = {
   isInteractive: boolean;
 };
 
+export type DbConnectData = {
+  serviceName: string;
+  protocol: string;
+  dbName: string;
+  dbUser: string;
+  dbRoles: string[];
+};
+
 export default Tty;
diff --git a/web/packages/teleport/src/services/databases/databases.test.ts b/web/packages/teleport/src/services/databases/databases.test.ts
index 9d5f61054acaa..41a695374226c 100644
--- a/web/packages/teleport/src/services/databases/databases.test.ts
+++ b/web/packages/teleport/src/services/databases/databases.test.ts
@@ -39,6 +39,8 @@ test('correct formatting of database fetch response', async () => {
         protocol: 'postgres',
         names: [],
         users: [],
+        roles: [],
+        hostname: '',
         labels: [
           { name: 'cluster', value: 'root' },
           { name: 'env', value: 'aws' },
@@ -49,9 +51,11 @@ test('correct formatting of database fetch response', async () => {
             region: 'us-west-1',
             vpcId: 'vpc-123',
             subnets: ['sn1', 'sn2'],
+            securityGroups: [],
           },
           iamPolicyStatus: IamPolicyStatus.Success,
         },
+        supportsInteractive: false,
       },
       {
         kind: 'db',
@@ -60,7 +64,11 @@ test('correct formatting of database fetch response', async () => {
         protocol: 'postgres',
         names: [],
         users: [],
+        roles: [],
+        hostname: '',
         labels: [],
+        aws: undefined,
+        supportsInteractive: true,
       },
     ],
     startKey: mockResponse.startKey,
@@ -178,6 +186,7 @@ const mockResponse = {
       protocol: 'postgres',
       type: 'rds',
       uri: 'postgres-aurora-instance-1.c1xpjrob56xs.us-west-1.rds.amazonaws.com:5432',
+      hostname: '',
       labels: [
         { name: 'cluster', value: 'root' },
         { name: 'env', value: 'aws' },
@@ -188,6 +197,7 @@ const mockResponse = {
           region: 'us-west-1',
           vpc_id: 'vpc-123',
           subnets: ['sn1', 'sn2'],
+          security_groups: [],
         },
         iam_policy_status: 'IAM_POLICY_STATUS_SUCCESS',
       },
@@ -199,6 +209,8 @@ const mockResponse = {
       protocol: 'postgres',
       uri: 'localhost:5432',
       labels: [],
+      hostname: '',
+      supports_interactive: true,
     },
   ],
   startKey: 'mockKey',
diff --git a/web/packages/teleport/src/services/databases/makeDatabase.ts b/web/packages/teleport/src/services/databases/makeDatabase.ts
index 04b6383b6112a..72193f7c0ecbc 100644
--- a/web/packages/teleport/src/services/databases/makeDatabase.ts
+++ b/web/packages/teleport/src/services/databases/makeDatabase.ts
@@ -51,9 +51,11 @@ export function makeDatabase(json: any): Database {
     labels,
     names: json.database_names || [],
     users: json.database_users || [],
+    roles: json.database_roles || [],
     hostname: json.hostname,
     aws: madeAws,
     requiresRequest,
+    supportsInteractive: json.supports_interactive || false,
   };
 }
 
diff --git a/web/packages/teleport/src/services/databases/types.ts b/web/packages/teleport/src/services/databases/types.ts
index 6615e0bbf577e..e750dc400e58c 100644
--- a/web/packages/teleport/src/services/databases/types.ts
+++ b/web/packages/teleport/src/services/databases/types.ts
@@ -48,9 +48,11 @@ export interface Database {
   labels: ResourceLabel[];
   names?: string[];
   users?: string[];
+  roles?: string[];
   hostname: string;
   aws?: Aws;
   requiresRequest?: boolean;
+  supportsInteractive?: boolean;
 }
 
 export type DatabasesResponse = {

From fac876b3f6ab8b8708e393077bfdc70f08564bd4 Mon Sep 17 00:00:00 2001
From: Gabriel Corado <gabriel.oliveira@goteleport.com>
Date: Mon, 9 Dec 2024 23:38:30 -0300
Subject: [PATCH 2/8] chore(web): make explict type cast

---
 web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
index 8d270e0271196..4f261b81bb262 100644
--- a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
@@ -81,7 +81,7 @@ function DbConnectDialog({ clusterId, serviceName, onClose, onConnect }: Props)
           throw new Error('Unable to retrieve database information.');
         }
 
-        return { agents: response.agents };
+        return { agents: [response.agents[0] as Database] };
       },
       [clusterId, serviceName]
     )

From cb254d19ab1d2778414c297ec564c87e9d46bab7 Mon Sep 17 00:00:00 2001
From: Gabriel Corado <gabriel.oliveira@goteleport.com>
Date: Wed, 11 Dec 2024 12:16:45 -0300
Subject: [PATCH 3/8] refactor(web): code review suggestions

---
 web/packages/teleport/src/Console/Console.tsx |   2 +-
 .../src/Console/DocumentDb/ConnectDialog.tsx  | 111 ++++++++----------
 .../Console/DocumentDb/DocumentDb.story.tsx   |   4 +-
 .../Console/DocumentDb/DocumentDb.test.tsx    |  22 +---
 .../src/Console/DocumentDb/DocumentDb.tsx     |  28 ++---
 .../Console/DocumentDb/{index.js => index.ts} |   3 +-
 .../src/Console/DocumentDb/useDbSession.tsx   |  30 ++---
 .../teleport/src/services/session/types.ts    |  20 ++--
 8 files changed, 92 insertions(+), 128 deletions(-)
 rename web/packages/teleport/src/Console/DocumentDb/{index.js => index.ts} (91%)

diff --git a/web/packages/teleport/src/Console/Console.tsx b/web/packages/teleport/src/Console/Console.tsx
index f17a59ae259df..85bda3b56fb8f 100644
--- a/web/packages/teleport/src/Console/Console.tsx
+++ b/web/packages/teleport/src/Console/Console.tsx
@@ -37,7 +37,7 @@ import usePageTitle from './usePageTitle';
 import useTabRouting from './useTabRouting';
 import useOnExitConfirmation from './useOnExitConfirmation';
 import useKeyboardNav from './useKeyboardNav';
-import DocumentDb from './DocumentDb';
+import { DocumentDb } from './DocumentDb';
 
 const POLL_INTERVAL = 5000; // every 5 sec
 
diff --git a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
index 4f261b81bb262..3689d93e00ebb 100644
--- a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
@@ -36,98 +36,87 @@ import { Option } from 'shared/components/Select';
 import { FieldSelect, FieldSelectCreatable } from 'shared/components/FieldSelect';
 import { Database } from 'teleport/services/databases';
 import { useTeleport } from 'teleport';
-import { useUnifiedResourcesFetch } from 'shared/components/UnifiedResources';
 import { Danger } from 'design/Alert';
 import { requiredField } from 'shared/components/Validation/rules';
-
-type Props = {
-  clusterId: string;
-  serviceName: string;
-  onClose(): void;
-  onConnect: onConnectCallback;
-};
-
-type onConnectCallback = (
-  name: string,
-  protocol: string,
-  dbName: string,
-  dbUser: string,
-  dbRoles: string[],
-) => void;
-
-function DbConnectDialog({ clusterId, serviceName, onClose, onConnect }: Props) {
+import { useAsync } from 'shared/hooks/useAsync';
+import { DbConnectData } from 'teleport/lib/term/tty';
+
+export function ConnectDialog(props: { 
+  clusterId: string; 
+  serviceName: string; 
+  onClose(): void; 
+  onConnect(data: DbConnectData): void; 
+}) {
   // Fetch database information to pre-fill the connection parameters.
   const ctx = useTeleport();
-  const {
-    fetch: unifiedFetch,
-    attempt,
-    resources,
-  } = useUnifiedResourcesFetch({
-    fetchFunc: useCallback(
-      async (_, signal) => {
-        const response = await ctx.resourceService.fetchUnifiedResources(
-          clusterId,
-          {
-            query: `name == "${serviceName}"`,
-            sort: { fieldName: 'name', dir: 'ASC'},
-            limit: 1,
-          },
-          signal
-        );
-
-
-        // TODO(gabrielcorado): Handle scenarios where there is conflict on the name.
-        if (response.agents.length !== 1 || response.agents[0].kind !== 'db') {
-          throw new Error('Unable to retrieve database information.');
+  const [attempt, getDatabase] = useAsync(
+    useCallback(async () => {
+      const response = await ctx.resourceService.fetchUnifiedResources(
+        props.clusterId,
+        {
+          query: `name == "${props.serviceName}"`,
+          kinds: ['db'],
+          sort: { fieldName: 'name', dir: 'ASC' },
+          limit: 1,
         }
+      );
 
-        return { agents: [response.agents[0] as Database] };
-      },
-      [clusterId, serviceName]
-    )
-  })
-  useEffect(() => { unifiedFetch({clear: true})}, [])
+      // TODO(gabrielcorado): Handle scenarios where there is conflict on the name.
+      if (response.agents.length !== 1 || response.agents[0].kind !== 'db') {
+        throw new Error('Unable to retrieve database information.');
+      }
 
+      return response.agents[0];
+    }, [props.clusterId, ctx.resourceService, props.serviceName])
+  );
+
+  useEffect(() => {
+    void getDatabase();
+  }, [getDatabase]);
 
   return (
     <Dialog
       dialogCss={dialogCss}
       disableEscapeKeyDown={false}
-      onClose={onClose}
+      onClose={props.onClose}
       open={true}
     >
       <DialogHeader mb={4}>
         <DialogTitle>Connect To Database</DialogTitle>
       </DialogHeader>
 
-      {attempt.status === 'failed' && <Danger children={attempt.statusText} />}
+      {attempt.status === 'error' && <Danger children={attempt.statusText} />}
       {(attempt.status === '' || attempt.status === 'processing') && (
         <Box textAlign="center" m={10}>
           <Indicator />
         </Box>
       )}
-      {attempt.status === 'success' && <DbConnectDialogForm db={resources[0]} onConnect={onConnect} onClose={onClose} />}
+      {attempt.status === 'success' && <ConnectForm db={attempt.data} onConnect={props.onConnect} onClose={props.onClose} />}
     </Dialog>
   );
 }
 
-type FormProps = {
-  db: Database;
-  onConnect: onConnectCallback;
-  onClose(): void;
-};
-
-function DbConnectDialogForm({ db, onConnect, onClose }: FormProps) {
-  const dbUserOpts = db.users?.map(user => ({value: user, label: user}));
-  const dbNamesOpts = db.names?.map(name => ({value: name, label: name}));
-  const dbRolesOpts = db.roles?.map(role => ({value: role, label: role}));
+function ConnectForm(props: { 
+  db: Database; 
+  onConnect(data: DbConnectData): void; 
+  onClose(): void; 
+}) {
+  const dbUserOpts = props.db.users?.map(user => ({value: user, label: user}));
+  const dbNamesOpts = props.db.names?.map(name => ({value: name, label: name}));
+  const dbRolesOpts = props.db.roles?.map(role => ({value: role, label: role}));
 
   const [selectedName, setSelectedName] = useState<Option>(dbNamesOpts?.[0]);
   const [selectedUser, setSelectedUser] = useState<Option>(dbUserOpts?.[0]);
   const [selectedRoles, setSelectedRoles] = useState<readonly Option[]>();
 
   const dbConnect = () => {
-    onConnect(db.name, db.protocol, selectedName.value, selectedUser.value, selectedRoles?.map((role) => role.value));
+    props.onConnect({
+      serviceName: props.db.name,
+      protocol: props.db.protocol,
+      dbName: selectedName.value,
+      dbUser: selectedUser.value,
+      dbRoles: selectedRoles?.map((role) => role.value)
+    });
   };
 
   return (
@@ -170,7 +159,7 @@ function DbConnectDialogForm({ db, onConnect, onClose }: FormProps) {
                 type="button"
                 width="45%"
                 size="large"
-                onClick={onClose}
+                onClick={props.onClose}
               >
                 Close
               </ButtonSecondary>
@@ -198,5 +187,3 @@ const dialogCss = () => `
   max-width: 600px;
   width: 100%;
 `;
-
-export default DbConnectDialog;
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
index f0a3a48d593d3..3cc0d04ceba8e 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
@@ -26,7 +26,7 @@ import { TestLayout } from 'teleport/Console/Console.story';
 import TeleportContext from 'teleport/teleportContext';
 import * as stores from 'teleport/Console/stores/types';
 
-import DocumentDb from './DocumentDb';
+import { DocumentDb } from './DocumentDb';
 
 import { ResourcesResponse, UnifiedResource } from 'teleport/services/agents';
 
@@ -155,7 +155,7 @@ const DocumentDbWrapper = ({ ctx, consoleCtx, doc }: Props) => {
   );
 };
 
-function getContexts(resources: any) {
+function getContexts(resources: Promise<ResourcesResponse<UnifiedResource>>) {
   const ctx = createTeleportContext();
   ctx.resourceService.fetchUnifiedResources = () => resources;
 
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
index 0dcea7c1489f7..fe7dbcd21d19c 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
@@ -1,4 +1,3 @@
-
 /**
  * Teleport
  * Copyright (C) 2024  Gravitational, Inc.
@@ -16,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import { screen } from '@testing-library/react';
 
@@ -32,9 +32,9 @@ import { createTeleportContext } from 'teleport/mocks/contexts';
 
 import Tty from 'teleport/lib/term/tty';
 
-import useDbSession, { Status } from './useDbSession';
+import { useDbSession, Status }  from './useDbSession';
 
-import DocumentDb from './DocumentDb';
+import { DocumentDb } from './DocumentDb';
 
 import type { Session } from 'teleport/services/session';
 
@@ -72,20 +72,6 @@ describe('DocumentDb', () => {
     );
   };
 
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation(query => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: jest.fn(), // Deprecated
-      removeListener: jest.fn(), // Deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
-    })),
-  });
-
   test('renders loading indicator when status is loading', async () => {
     jest.useFakeTimers();
     setup('loading');
@@ -109,7 +95,7 @@ describe('DocumentDb', () => {
   test('does not render data dialog when status is initialized', () => {
     setup('initialized');
 
-    expect(screen.queryByText('Exec into a pod')).not.toBeInTheDocument();
+    expect(screen.queryByText('Connect to Database')).not.toBeInTheDocument();
   });
 });
 
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
index 5b85629678178..db322a3b6e08b 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
@@ -27,15 +27,15 @@ import { useMfa } from 'teleport/lib/useMfa';
 import Document from 'teleport/Console/Document';
 import AuthnDialog from 'teleport/components/AuthnDialog';
 
-import useDbSession from './useDbSession';
-import ConnectDialog from './ConnectDialog';
+import { useDbSession } from './useDbSession';
+import { ConnectDialog } from './ConnectDialog';
 
 type Props = {
   visible: boolean;
   doc: stores.DocumentDb;
 };
 
-export default function DocumentDb({ doc, visible }: Props) {
+export function DocumentDb({ doc, visible }: Props) {
   const terminalRef = useRef<TerminalRef>();
   const { tty, status, closeDocument, sendDbConnectData } =
     useDbSession(doc);
@@ -46,17 +46,6 @@ export default function DocumentDb({ doc, visible }: Props) {
   }, [visible, mfa.requested, status]);
   const theme = useTheme();
 
-  const terminal = (
-    <Terminal
-      ref={terminalRef}
-      tty={tty}
-      fontFamily={theme.fonts.mono}
-      theme={theme.colors.terminal}
-      convertEol
-      doc={doc}
-    />
-  );
-
   return (
     <Document visible={visible} flexDirection="column">
       {status === 'loading' && (
@@ -69,7 +58,16 @@ export default function DocumentDb({ doc, visible }: Props) {
       {status === 'waiting' && (
         <ConnectDialog clusterId={doc.clusterId} serviceName={doc.name} onConnect={sendDbConnectData} onClose={closeDocument} />
       )}
-      {status !== 'loading' && terminal}
+      {status !== 'loading' && (
+        <Terminal
+          ref={terminalRef}
+          tty={tty}
+          fontFamily={theme.fonts.mono}
+          theme={theme.colors.terminal}
+          convertEol
+          doc={doc}
+        />
+      )}
     </Document>
   );
 }
diff --git a/web/packages/teleport/src/Console/DocumentDb/index.js b/web/packages/teleport/src/Console/DocumentDb/index.ts
similarity index 91%
rename from web/packages/teleport/src/Console/DocumentDb/index.js
rename to web/packages/teleport/src/Console/DocumentDb/index.ts
index 99efbdf3a0cca..d4a26f608354d 100644
--- a/web/packages/teleport/src/Console/DocumentDb/index.js
+++ b/web/packages/teleport/src/Console/DocumentDb/index.ts
@@ -16,5 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import DocumentDb from './DocumentDb';
-export default DocumentDb;
+export { DocumentDb } from './DocumentDb';
diff --git a/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx b/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
index 2e011ab587b8d..7c0292bef2bab 100644
--- a/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
@@ -22,24 +22,23 @@ import { context, trace } from '@opentelemetry/api';
 
 import cfg from 'teleport/config';
 import { TermEvent } from 'teleport/lib/term/enums';
-import Tty from 'teleport/lib/term/tty';
+import Tty, { DbConnectData } from 'teleport/lib/term/tty';
 import ConsoleContext from 'teleport/Console/consoleContext';
 import { useConsoleContext } from 'teleport/Console/consoleContextProvider';
 import { DocumentDb } from 'teleport/Console/stores';
 
 import type {
-  ParticipantMode,
   Session,
   SessionMetadata,
 } from 'teleport/services/session';
 
 const tracer = trace.getTracer('TTY');
 
-export default function useDbSession(doc: DocumentDb) {
+export function useDbSession(doc: DocumentDb) {
   const { clusterId, sid } = doc;
   const ctx = useConsoleContext();
   const ttyRef = React.useRef<Tty>(null);
-  const tty = ttyRef.current as ReturnType<typeof ctx.createTty>;
+  const tty = ttyRef.current;
   const [session, setSession] = React.useState<Session>(null);
   const [status, setStatus] = React.useState<Status>('loading');
 
@@ -47,25 +46,20 @@ export default function useDbSession(doc: DocumentDb) {
     ctx.closeTab(doc);
   }
 
-  function sendDbConnectData(
-    name: string,
-    protocol: string,
-    dbUser: string,
-    dbName: string,
-    dbRoles: string[],
-  ): void {
-    tty.sendDbConnectData({ serviceName: name, protocol, dbUser, dbName,  dbRoles });
+  function sendDbConnectData(data: DbConnectData): void {
+    tty.sendDbConnectData(data);
     ctx.updateDbDocument(doc.id, {
-      title: `${dbUser}@${name}`,
+      title: `${data.dbUser}@${data.serviceName}`,
     });
     setStatus('initialized');
   }
 
   React.useEffect(() => {
-    const session: any = {
-      kind: 'db',
-      clusterId,
-      sid,
+    const session: Session = {
+        kind: 'db',
+        clusterId,
+        sid,
+        resourceName: doc.name,
     }
 
     tracer.startActiveSpan(
@@ -85,7 +79,7 @@ export default function useDbSession(doc: DocumentDb) {
 
         tty.on(TermEvent.SESSION, payload => {
           const data = JSON.parse(payload);
-          data.session.kind = 'k8s';
+          data.session.kind = 'db';
           setSession(data.session);
           handleTtyConnect(ctx, data.session, doc.id);
         });
diff --git a/web/packages/teleport/src/services/session/types.ts b/web/packages/teleport/src/services/session/types.ts
index 60d533dab951e..27c3fe0ffbad6 100644
--- a/web/packages/teleport/src/services/session/types.ts
+++ b/web/packages/teleport/src/services/session/types.ts
@@ -23,14 +23,14 @@ export interface Participant {
 export interface Session {
   kind: SessionKind;
   sid: string;
-  namespace: string;
-  login: string;
-  created: Date;
-  durationText: string;
-  serverId: string;
+  namespace?: string;
+  login?: string;
+  created?: Date;
+  durationText?: string;
+  serverId?: string;
   clusterId: string;
-  parties: Participant[];
-  addr: string;
+  parties?: Participant[];
+  addr?: string;
   // resourceName depending on the "kind" field, is the name
   // of resource that the session is running in:
   //  - ssh: is referring to the hostname
@@ -40,11 +40,11 @@ export interface Session {
   //  - app: is referring to the app
   resourceName: string;
   // participantModes are the participant modes that are available to the user listing this session.
-  participantModes: ParticipantMode[];
+  participantModes?: ParticipantMode[];
   // whether this session requires moderation or not. this is NOT if the session is currently being actively moderated
-  moderated: boolean;
+  moderated?: boolean;
   // command is the command that was run to start this session.
-  command: string;
+  command?: string;
 }
 
 export type SessionMetadata = {

From 941842e9e5e3226396303fb01d89ddbdc0a429ee Mon Sep 17 00:00:00 2001
From: Gabriel Corado <gabriel.oliveira@goteleport.com>
Date: Wed, 11 Dec 2024 12:24:38 -0300
Subject: [PATCH 4/8] chore(web): fix lint errors

---
 web/packages/teleport/src/Console/Console.tsx |   4 +-
 .../src/Console/DocumentDb/ConnectDialog.tsx  |  82 +++++----
 .../Console/DocumentDb/DocumentDb.story.tsx   | 171 ++++++++----------
 .../Console/DocumentDb/DocumentDb.test.tsx    |   2 +-
 .../src/Console/DocumentDb/DocumentDb.tsx     |  10 +-
 .../src/Console/DocumentDb/useDbSession.tsx   |  23 +--
 .../Console/DocumentSsh/Terminal/Terminal.tsx |   1 -
 .../teleport/src/Console/consoleContext.tsx   |   6 +-
 .../teleport/src/Console/useTabRouting.ts     |  10 +-
 .../Databases/ConnectDialog/ConnectDialog.tsx |  10 +-
 web/packages/teleport/src/config.ts           |   3 +-
 11 files changed, 165 insertions(+), 157 deletions(-)

diff --git a/web/packages/teleport/src/Console/Console.tsx b/web/packages/teleport/src/Console/Console.tsx
index 85bda3b56fb8f..e0bc17f879f4d 100644
--- a/web/packages/teleport/src/Console/Console.tsx
+++ b/web/packages/teleport/src/Console/Console.tsx
@@ -78,7 +78,9 @@ export default function Console() {
     return consoleCtx.refreshParties();
   }
 
-  const disableNewTab = storeDocs.getNodeDocuments().length > 0 || storeDocs.getDbDocuments().length > 0;
+  const disableNewTab =
+    storeDocs.getNodeDocuments().length > 0 ||
+    storeDocs.getDbDocuments().length > 0;
   const $docs = documents.map(doc => (
     <MemoizedDocument doc={doc} visible={doc.id === activeDocId} key={doc.id} />
   ));
diff --git a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
index 3689d93e00ebb..1c0d92f465ff7 100644
--- a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
@@ -23,17 +23,14 @@ import Dialog, {
   DialogHeader,
   DialogTitle,
 } from 'design/Dialog';
-import {
-    Box,
-  ButtonPrimary,
-  ButtonSecondary,
-  Flex,
-  Indicator,
-} from 'design';
+import { Box, ButtonPrimary, ButtonSecondary, Flex, Indicator } from 'design';
 
 import Validation from 'shared/components/Validation';
 import { Option } from 'shared/components/Select';
-import { FieldSelect, FieldSelectCreatable } from 'shared/components/FieldSelect';
+import {
+  FieldSelect,
+  FieldSelectCreatable,
+} from 'shared/components/FieldSelect';
 import { Database } from 'teleport/services/databases';
 import { useTeleport } from 'teleport';
 import { Danger } from 'design/Alert';
@@ -41,11 +38,11 @@ import { requiredField } from 'shared/components/Validation/rules';
 import { useAsync } from 'shared/hooks/useAsync';
 import { DbConnectData } from 'teleport/lib/term/tty';
 
-export function ConnectDialog(props: { 
-  clusterId: string; 
-  serviceName: string; 
-  onClose(): void; 
-  onConnect(data: DbConnectData): void; 
+export function ConnectDialog(props: {
+  clusterId: string;
+  serviceName: string;
+  onClose(): void;
+  onConnect(data: DbConnectData): void;
 }) {
   // Fetch database information to pre-fill the connection parameters.
   const ctx = useTeleport();
@@ -91,19 +88,34 @@ export function ConnectDialog(props: {
           <Indicator />
         </Box>
       )}
-      {attempt.status === 'success' && <ConnectForm db={attempt.data} onConnect={props.onConnect} onClose={props.onClose} />}
+      {attempt.status === 'success' && (
+        <ConnectForm
+          db={attempt.data}
+          onConnect={props.onConnect}
+          onClose={props.onClose}
+        />
+      )}
     </Dialog>
   );
 }
 
-function ConnectForm(props: { 
-  db: Database; 
-  onConnect(data: DbConnectData): void; 
-  onClose(): void; 
+function ConnectForm(props: {
+  db: Database;
+  onConnect(data: DbConnectData): void;
+  onClose(): void;
 }) {
-  const dbUserOpts = props.db.users?.map(user => ({value: user, label: user}));
-  const dbNamesOpts = props.db.names?.map(name => ({value: name, label: name}));
-  const dbRolesOpts = props.db.roles?.map(role => ({value: role, label: role}));
+  const dbUserOpts = props.db.users?.map(user => ({
+    value: user,
+    label: user,
+  }));
+  const dbNamesOpts = props.db.names?.map(name => ({
+    value: name,
+    label: name,
+  }));
+  const dbRolesOpts = props.db.roles?.map(role => ({
+    value: role,
+    label: role,
+  }));
 
   const [selectedName, setSelectedName] = useState<Option>(dbNamesOpts?.[0]);
   const [selectedUser, setSelectedUser] = useState<Option>(dbUserOpts?.[0]);
@@ -115,7 +127,7 @@ function ConnectForm(props: {
       protocol: props.db.protocol,
       dbName: selectedName.value,
       dbUser: selectedUser.value,
-      dbRoles: selectedRoles?.map((role) => role.value)
+      dbRoles: selectedRoles?.map(role => role.value),
     });
   };
 
@@ -131,17 +143,21 @@ function ConnectForm(props: {
               value={selectedUser}
               options={dbUserOpts}
               isDisabled={dbUserOpts?.length == 1}
-              formatCreateLabel={userInput => `Use "${userInput}" database user`}
+              formatCreateLabel={userInput =>
+                `Use "${userInput}" database user`
+              }
               rule={requiredField('Database user is required')}
             />
-            {dbRolesOpts?.length > 0 && <FieldSelect
-              label="Database roles"
-              menuPosition="fixed"
-              isMulti={true}
-              onChange={setSelectedRoles}
-              value={selectedRoles}
-              options={dbRolesOpts}
-            /> }
+            {dbRolesOpts?.length > 0 && (
+              <FieldSelect
+                label="Database roles"
+                menuPosition="fixed"
+                isMulti={true}
+                onChange={setSelectedRoles}
+                value={selectedRoles}
+                options={dbRolesOpts}
+              />
+            )}
             <FieldSelectCreatable
               label="Database name"
               menuPosition="fixed"
@@ -149,7 +165,9 @@ function ConnectForm(props: {
               value={selectedName}
               options={dbNamesOpts}
               isDisabled={dbNamesOpts?.length == 1}
-              formatCreateLabel={userInput => `Use "${userInput}" database name`}
+              formatCreateLabel={userInput =>
+                `Use "${userInput}" database name`
+              }
               rule={requiredField('Database name is required')}
             />
           </DialogContent>
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
index 3cc0d04ceba8e..370ed2bb5b0a8 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
@@ -35,108 +35,92 @@ export default {
 };
 
 export const Connect = () => {
-  const { ctx, consoleCtx } = getContexts(Promise.resolve({
-    agents: [
-      {
-        kind: 'db',
-        name: 'mydb',
-        description: '',
-        type: '',
-        protocol: 'postgres',
-        labels: [],
-        names: ['users', 'orders'],
-        users: ['alice', 'bob'],
-        roles: ['reader', 'all'],
-        hostname: '',
-        supportsInteractive: true,
-      },
-    ]
-  }));
-
-  return (
-    <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />
+  const { ctx, consoleCtx } = getContexts(
+    Promise.resolve({
+      agents: [
+        {
+          kind: 'db',
+          name: 'mydb',
+          description: '',
+          type: '',
+          protocol: 'postgres',
+          labels: [],
+          names: ['users', 'orders'],
+          users: ['alice', 'bob'],
+          roles: ['reader', 'all'],
+          hostname: '',
+          supportsInteractive: true,
+        },
+      ],
+    })
   );
+
+  return <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />;
 };
 
 export const ConnectWithoutRoles = () => {
-  const { ctx, consoleCtx } = getContexts(Promise.resolve({
-    agents: [
-      {
-        kind: 'db',
-        name: 'mydb',
-        description: '',
-        type: '',
-        protocol: 'postgres',
-        labels: [],
-        names: ['users', 'orders'],
-        users: ['alice', 'bob'],
-        hostname: '',
-        supportsInteractive: true,
-      },
-    ]
-  }));
-
-  return (
-    <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />
+  const { ctx, consoleCtx } = getContexts(
+    Promise.resolve({
+      agents: [
+        {
+          kind: 'db',
+          name: 'mydb',
+          description: '',
+          type: '',
+          protocol: 'postgres',
+          labels: [],
+          names: ['users', 'orders'],
+          users: ['alice', 'bob'],
+          hostname: '',
+          supportsInteractive: true,
+        },
+      ],
+    })
   );
+
+  return <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />;
 };
 
 export const ConnectWithoutValues = () => {
-  const { ctx, consoleCtx } = getContexts(Promise.resolve({
-    agents: [
-      {
-        kind: 'db',
-        name: 'mydb',
-        description: '',
-        type: '',
-        protocol: 'postgres',
-        labels: [],
-        hostname: '',
-        supportsInteractive: true,
-      },
-    ]
-  }));
-
-  return (
-    <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />
+  const { ctx, consoleCtx } = getContexts(
+    Promise.resolve({
+      agents: [
+        {
+          kind: 'db',
+          name: 'mydb',
+          description: '',
+          type: '',
+          protocol: 'postgres',
+          labels: [],
+          hostname: '',
+          supportsInteractive: true,
+        },
+      ],
+    })
   );
+
+  return <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />;
 };
 
 export const NotFound = () => {
-  const { ctx, consoleCtx } = getContexts(Promise.resolve({agents: []}));
+  const { ctx, consoleCtx } = getContexts(Promise.resolve({ agents: [] }));
 
-  return (
-    <DocumentDbWrapper
-      ctx={ctx}
-      consoleCtx={consoleCtx}
-      doc={baseDoc}
-    />
-  );
+  return <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />;
 };
 
 export const Loading = () => {
   // Resources list that never resolves.
   const { ctx, consoleCtx } = getContexts(new Promise(() => {}));
 
-  return (
-    <DocumentDbWrapper
-      ctx={ctx}
-      consoleCtx={consoleCtx}
-      doc={baseDoc}
-    />
-  );
+  return <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />;
 };
 
 export const LoadError = () => {
-  const { ctx, consoleCtx } = getContexts(Promise.reject(new Error('failed to fetch')));
-
-  return (
-    <DocumentDbWrapper
-      ctx={ctx}
-      consoleCtx={consoleCtx}
-      doc={baseDoc}
-    />
+  const { ctx, consoleCtx } = getContexts(
+    Promise.reject(new Error('failed to fetch'))
   );
+
+  return <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />;
 };
 
 type Props = {
@@ -161,20 +145,20 @@ function getContexts(resources: Promise<ResourcesResponse<UnifiedResource>>) {
 
   const consoleCtx = new ConsoleCtx();
   const tty = consoleCtx.createTty({
-      kind: 'db',
-      login: '123',
-      sid: '456',
-      namespace: '',
-      created: new Date(),
-      durationText: '',
-      serverId: '',
-      resourceName: '',
-      clusterId: '',
-      parties: [],
-      addr: '',
-      participantModes: [],
-      moderated: false,
-      command: '/bin/bash',
+    kind: 'db',
+    login: '123',
+    sid: '456',
+    namespace: '',
+    created: new Date(),
+    durationText: '',
+    serverId: '',
+    resourceName: '',
+    clusterId: '',
+    parties: [],
+    addr: '',
+    participantModes: [],
+    moderated: false,
+    command: '/bin/bash',
   });
   tty.connect = () => null;
   consoleCtx.createTty = () => tty;
@@ -193,4 +177,3 @@ const baseDoc = {
   url: 'fd',
   created: new Date(),
 } as const;
-
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
index fe7dbcd21d19c..156435136618f 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
@@ -32,7 +32,7 @@ import { createTeleportContext } from 'teleport/mocks/contexts';
 
 import Tty from 'teleport/lib/term/tty';
 
-import { useDbSession, Status }  from './useDbSession';
+import { useDbSession, Status } from './useDbSession';
 
 import { DocumentDb } from './DocumentDb';
 
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
index db322a3b6e08b..33fe1e3308720 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
@@ -37,8 +37,7 @@ type Props = {
 
 export function DocumentDb({ doc, visible }: Props) {
   const terminalRef = useRef<TerminalRef>();
-  const { tty, status, closeDocument, sendDbConnectData } =
-    useDbSession(doc);
+  const { tty, status, closeDocument, sendDbConnectData } = useDbSession(doc);
   const mfa = useMfa(tty);
   useEffect(() => {
     // when switching tabs or closing tabs, focus on visible terminal
@@ -56,7 +55,12 @@ export function DocumentDb({ doc, visible }: Props) {
       {mfa.requested && <AuthnDialog mfa={mfa} onCancel={closeDocument} />}
 
       {status === 'waiting' && (
-        <ConnectDialog clusterId={doc.clusterId} serviceName={doc.name} onConnect={sendDbConnectData} onClose={closeDocument} />
+        <ConnectDialog
+          clusterId={doc.clusterId}
+          serviceName={doc.name}
+          onConnect={sendDbConnectData}
+          onClose={closeDocument}
+        />
       )}
       {status !== 'loading' && (
         <Terminal
diff --git a/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx b/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
index 7c0292bef2bab..0c321f8ac6f04 100644
--- a/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
@@ -27,10 +27,7 @@ import ConsoleContext from 'teleport/Console/consoleContext';
 import { useConsoleContext } from 'teleport/Console/consoleContextProvider';
 import { DocumentDb } from 'teleport/Console/stores';
 
-import type {
-  Session,
-  SessionMetadata,
-} from 'teleport/services/session';
+import type { Session, SessionMetadata } from 'teleport/services/session';
 
 const tracer = trace.getTracer('TTY');
 
@@ -56,11 +53,11 @@ export function useDbSession(doc: DocumentDb) {
 
   React.useEffect(() => {
     const session: Session = {
-        kind: 'db',
-        clusterId,
-        sid,
-        resourceName: doc.name,
-    }
+      kind: 'db',
+      clusterId,
+      sid,
+      resourceName: doc.name,
+    };
 
     tracer.startActiveSpan(
       'initTTY',
@@ -118,7 +115,7 @@ function handleTtyConnect(
   // The server response could not include the session ID. To avoid breaking the
   // redirect, set a value to the session ID.
   if (sid === '') {
-    sid = 'new'
+    sid = 'new';
   }
 
   const url = cfg.getDbSessionRoute({ clusterId, sid });
@@ -135,8 +132,4 @@ function handleTtyConnect(
   ctx.gotoTab({ url });
 }
 
-export type Status =
-  | 'loading'
-  | 'waiting'
-  | 'initialized'
-  | 'disconnected';
+export type Status = 'loading' | 'waiting' | 'initialized' | 'disconnected';
diff --git a/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx b/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
index ce1aaba42d6d4..90ea3b7fea727 100644
--- a/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
+++ b/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
@@ -81,7 +81,6 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>((props, ref) => {
         return false;
       }
 
-
       const { tabSwitch } = getMappedAction(event);
       if (tabSwitch) {
         return false;
diff --git a/web/packages/teleport/src/Console/consoleContext.tsx b/web/packages/teleport/src/Console/consoleContext.tsx
index 2b550ee94d7ce..2e452130fdebe 100644
--- a/web/packages/teleport/src/Console/consoleContext.tsx
+++ b/web/packages/teleport/src/Console/consoleContext.tsx
@@ -23,7 +23,11 @@ import { W3CTraceContextPropagator } from '@opentelemetry/core';
 
 import webSession from 'teleport/services/websession';
 import history from 'teleport/services/history';
-import cfg, { UrlDbConnectParams, UrlKubeExecParams, UrlSshParams } from 'teleport/config';
+import cfg, {
+  UrlDbConnectParams,
+  UrlKubeExecParams,
+  UrlSshParams,
+} from 'teleport/config';
 import { getHostName } from 'teleport/services/api';
 import Tty from 'teleport/lib/term/tty';
 import TtyAddressResolver from 'teleport/lib/term/ttyAddressResolver';
diff --git a/web/packages/teleport/src/Console/useTabRouting.ts b/web/packages/teleport/src/Console/useTabRouting.ts
index 911bfbc952e85..650369d196d08 100644
--- a/web/packages/teleport/src/Console/useTabRouting.ts
+++ b/web/packages/teleport/src/Console/useTabRouting.ts
@@ -19,7 +19,11 @@
 import React from 'react';
 import { useRouteMatch, useParams, useLocation } from 'react-router';
 
-import cfg, { UrlDbConnectParams, UrlKubeExecParams, UrlSshParams } from 'teleport/config';
+import cfg, {
+  UrlDbConnectParams,
+  UrlKubeExecParams,
+  UrlSshParams,
+} from 'teleport/config';
 import { ParticipantMode } from 'teleport/services/session';
 
 import ConsoleContext from './consoleContext';
@@ -35,7 +39,9 @@ export default function useRouting(ctx: ConsoleContext) {
   const joinSshRouteMatch = useRouteMatch<UrlSshParams>(
     cfg.routes.consoleSession
   );
-  const dbConnectMatch = useRouteMatch<UrlDbConnectParams>(cfg.routes.dbConnect);
+  const dbConnectMatch = useRouteMatch<UrlDbConnectParams>(
+    cfg.routes.dbConnect
+  );
 
   // Ensure that each URL has corresponding document
   React.useMemo(() => {
diff --git a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
index 0d7ffda3bd131..5152829d0ba8f 100644
--- a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
@@ -30,7 +30,7 @@ import { AuthType } from 'teleport/services/user';
 import TextSelectCopy from 'teleport/components/TextSelectCopy';
 import { generateTshLoginCommand, openNewTab } from 'teleport/lib/util';
 import cfg from 'teleport/config';
-import { NewTab as NewTabIcon } from 'design/Icon'; 
+import { NewTab as NewTabIcon } from 'design/Icon';
 
 export default function ConnectDialog({
   username,
@@ -77,9 +77,9 @@ export default function ConnectDialog({
 
   const onConnect = () => {
     const url = cfg.getDbConnectRoute({ clusterId, serviceName: dbName });
-    openNewTab(url)
-    onClose()
-  }
+    openNewTab(url);
+    onClose();
+  };
 
   return (
     <Dialog
@@ -95,7 +95,7 @@ export default function ConnectDialog({
         <DialogTitle>Connect To Database</DialogTitle>
       </DialogHeader>
       <DialogContent minHeight="240px" flex="0 0 auto">
-        { supportsInteractive && (
+        {supportsInteractive && (
           <Box borderBottom={1} mb={4} pb={4}>
             <Text mb={3} bold>
               Open Teleport-authenticated session in the browser:
diff --git a/web/packages/teleport/src/config.ts b/web/packages/teleport/src/config.ts
index 8e2e9db5aaa89..0569de141f4e6 100644
--- a/web/packages/teleport/src/config.ts
+++ b/web/packages/teleport/src/config.ts
@@ -259,8 +259,7 @@ const cfg = {
       'wss://:fqdn/v1/webapi/sites/:clusterId/connect/ws?params=:params&traceparent=:traceparent',
     ttyKubeExecWsAddr:
       'wss://:fqdn/v1/webapi/sites/:clusterId/kube/exec/ws?params=:params&traceparent=:traceparent',
-    ttyDbWsAddr:
-      'wss://:fqdn/v1/webapi/sites/:clusterId/db/exec/ws',
+    ttyDbWsAddr: 'wss://:fqdn/v1/webapi/sites/:clusterId/db/exec/ws',
     ttyPlaybackWsAddr:
       'wss://:fqdn/v1/webapi/sites/:clusterId/ttyplayback/:sid?access_token=:token', // TODO(zmb3): get token out of URL
     activeAndPendingSessionsPath: '/v1/webapi/sites/:clusterId/sessions',

From 02c699701552bbddd130bf5c43d01c7997c27ea4 Mon Sep 17 00:00:00 2001
From: Gabriel Corado <gabriel.oliveira@goteleport.com>
Date: Wed, 11 Dec 2024 12:37:44 -0300
Subject: [PATCH 5/8] refactor(web): lint errors

---
 .../teleport/src/Console/DocumentDb/ConnectDialog.tsx       | 6 ++++--
 .../teleport/src/Console/DocumentDb/DocumentDb.story.tsx    | 4 ++--
 .../teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx  | 3 ++-
 .../teleport/src/Databases/ConnectDialog/ConnectDialog.tsx  | 5 +++--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
index 1c0d92f465ff7..c4e041c2b56e9 100644
--- a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
@@ -31,11 +31,13 @@ import {
   FieldSelect,
   FieldSelectCreatable,
 } from 'shared/components/FieldSelect';
-import { Database } from 'teleport/services/databases';
-import { useTeleport } from 'teleport';
+
 import { Danger } from 'design/Alert';
 import { requiredField } from 'shared/components/Validation/rules';
 import { useAsync } from 'shared/hooks/useAsync';
+
+import { useTeleport } from 'teleport';
+import { Database } from 'teleport/services/databases';
 import { DbConnectData } from 'teleport/lib/term/tty';
 
 export function ConnectDialog(props: {
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
index 370ed2bb5b0a8..b71b20575dbec 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
@@ -26,10 +26,10 @@ import { TestLayout } from 'teleport/Console/Console.story';
 import TeleportContext from 'teleport/teleportContext';
 import * as stores from 'teleport/Console/stores/types';
 
-import { DocumentDb } from './DocumentDb';
-
 import { ResourcesResponse, UnifiedResource } from 'teleport/services/agents';
 
+import { DocumentDb } from './DocumentDb';
+
 export default {
   title: 'Teleport/Console/DocumentDb',
 };
diff --git a/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx b/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
index 90ea3b7fea727..2e97795f995cb 100644
--- a/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
+++ b/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
@@ -32,9 +32,10 @@ import Tty from 'teleport/lib/term/tty';
 import XTermCtrl from 'teleport/lib/term/terminal';
 import { getMappedAction } from 'teleport/Console/useKeyboardNav';
 
-import StyledXterm from '../../StyledXterm';
 import { Document } from 'teleport/Console/stores';
 
+import StyledXterm from '../../StyledXterm';
+
 export interface TerminalProps {
   tty: Tty;
   fontFamily: string;
diff --git a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
index 5152829d0ba8f..d499383e67081 100644
--- a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import { Text, Box, ButtonSecondary, Link, Flex, ButtonPrimary } from 'design';
+import { Text, Box, ButtonSecondary, Link, ButtonPrimary } from 'design';
 import Dialog, {
   DialogHeader,
   DialogTitle,
@@ -26,11 +26,12 @@ import Dialog, {
 } from 'design/Dialog';
 import { DbProtocol } from 'shared/services/databases';
 
+import { NewTab as NewTabIcon } from 'design/Icon';
+
 import { AuthType } from 'teleport/services/user';
 import TextSelectCopy from 'teleport/components/TextSelectCopy';
 import { generateTshLoginCommand, openNewTab } from 'teleport/lib/util';
 import cfg from 'teleport/config';
-import { NewTab as NewTabIcon } from 'design/Icon';
 
 export default function ConnectDialog({
   username,

From cd260cb49618a115cdda03f16d97229ccee86b5a Mon Sep 17 00:00:00 2001
From: Gabriel Corado <gabriel.oliveira@goteleport.com>
Date: Fri, 13 Dec 2024 12:00:26 -0300
Subject: [PATCH 6/8] refactor: code review suggestions

---
 .../src/Console/DocumentDb/ConnectDialog.tsx  | 30 ++++++++++---------
 .../Console/DocumentDb/DocumentDb.test.tsx    |  3 +-
 .../src/Console/DocumentDb/DocumentDb.tsx     |  3 +-
 .../src/Console/DocumentDb/useDbSession.tsx   |  4 +--
 .../Console/DocumentSsh/Terminal/Terminal.tsx |  8 ++---
 .../teleport/src/Console/stores/types.ts      |  3 --
 6 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
index c4e041c2b56e9..080ee03355fb2 100644
--- a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
@@ -121,7 +121,8 @@ function ConnectForm(props: {
 
   const [selectedName, setSelectedName] = useState<Option>(dbNamesOpts?.[0]);
   const [selectedUser, setSelectedUser] = useState<Option>(dbUserOpts?.[0]);
-  const [selectedRoles, setSelectedRoles] = useState<readonly Option[]>();
+  const [selectedRoles, setSelectedRoles] =
+    useState<readonly Option[]>(dbRolesOpts);
 
   const dbConnect = () => {
     props.onConnect({
@@ -137,7 +138,19 @@ function ConnectForm(props: {
     <Validation>
       {({ validator }) => (
         <form>
-          <DialogContent minHeight="240px" flex="0 0 auto">
+          <DialogContent flex="0 0 auto">
+            <FieldSelectCreatable
+              label="Database name"
+              menuPosition="fixed"
+              onChange={option => setSelectedName(option as Option)}
+              value={selectedName}
+              options={dbNamesOpts}
+              isDisabled={dbNamesOpts?.length == 1}
+              formatCreateLabel={userInput =>
+                `Use "${userInput}" database name`
+              }
+              rule={requiredField('Database name is required')}
+            />
             <FieldSelectCreatable
               label="Database user"
               menuPosition="fixed"
@@ -158,20 +171,9 @@ function ConnectForm(props: {
                 onChange={setSelectedRoles}
                 value={selectedRoles}
                 options={dbRolesOpts}
+                rule={requiredField('At least one database role is required')}
               />
             )}
-            <FieldSelectCreatable
-              label="Database name"
-              menuPosition="fixed"
-              onChange={option => setSelectedName(option as Option)}
-              value={selectedName}
-              options={dbNamesOpts}
-              isDisabled={dbNamesOpts?.length == 1}
-              formatCreateLabel={userInput =>
-                `Use "${userInput}" database name`
-              }
-              rule={requiredField('Database name is required')}
-            />
           </DialogContent>
           <DialogFooter>
             <Flex alignItems="center" justifyContent="space-between">
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
index 156435136618f..e9870cc89f3d9 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx
@@ -72,7 +72,7 @@ describe('DocumentDb', () => {
     );
   };
 
-  test('renders loading indicator when status is loading', async () => {
+  test('renders loading indicator when status is loading', () => {
     jest.useFakeTimers();
     setup('loading');
 
@@ -112,7 +112,6 @@ function getContexts() {
 
 const baseDoc = {
   kind: 'db',
-  status: 'connected',
   sid: 'sid-value',
   clusterId: 'clusterId-value',
   serverId: 'serverId-value',
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
index 33fe1e3308720..583fb3f5285fd 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx
@@ -69,7 +69,8 @@ export function DocumentDb({ doc, visible }: Props) {
           fontFamily={theme.fonts.mono}
           theme={theme.colors.terminal}
           convertEol
-          doc={doc}
+          // TODO(gabrielcorado): remove this once the server can properly handle it.
+          disableCtrlC={true}
         />
       )}
     </Document>
diff --git a/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx b/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
index 0c321f8ac6f04..908997b957448 100644
--- a/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx
@@ -71,7 +71,6 @@ export function useDbSession(doc: DocumentDb) {
 
         tty.on(TermEvent.CONN_CLOSE, () => {
           setStatus('disconnected');
-          ctx.updateDbDocument(doc.id, { status: 'disconnected' });
         });
 
         tty.on(TermEvent.SESSION, payload => {
@@ -90,7 +89,7 @@ export function useDbSession(doc: DocumentDb) {
     );
 
     function teardownTty() {
-      ttyRef.current && ttyRef.current.removeAllListeners();
+      ttyRef.current?.removeAllListeners();
     }
 
     return teardownTty;
@@ -122,7 +121,6 @@ function handleTtyConnect(
   const createdDate = new Date(created);
 
   ctx.updateDbDocument(docId, {
-    status: 'connected',
     url,
     created: createdDate,
     sid,
diff --git a/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx b/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
index 2e97795f995cb..f5188c1ba507e 100644
--- a/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
+++ b/web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx
@@ -32,8 +32,6 @@ import Tty from 'teleport/lib/term/tty';
 import XTermCtrl from 'teleport/lib/term/terminal';
 import { getMappedAction } from 'teleport/Console/useKeyboardNav';
 
-import { Document } from 'teleport/Console/stores';
-
 import StyledXterm from '../../StyledXterm';
 
 export interface TerminalProps {
@@ -45,7 +43,7 @@ export interface TerminalProps {
   convertEol?: boolean;
   // terminalAddons is used to pass the tty to the parent component to enable any optional components like search or filetransfers.
   terminalAddons?: (terminalRef: XTermCtrl) => React.JSX.Element;
-  doc?: Document;
+  disableCtrlC?: boolean;
 }
 
 export const Terminal = forwardRef<TerminalRef, TerminalProps>((props, ref) => {
@@ -76,9 +74,7 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>((props, ref) => {
     termCtrl.open();
 
     const { unregister } = termCtrl.registerCustomKeyEventHandler(event => {
-      // Handle CTRL-C special case for database sessions.
-      // TODO(gabrielcorado): remove this once the server can properly handle it.
-      if (props.doc?.kind === 'db' && event.ctrlKey && event.key == 'c') {
+      if (props.disableCtrlC && event.ctrlKey && event.key == 'c') {
         return false;
       }
 
diff --git a/web/packages/teleport/src/Console/stores/types.ts b/web/packages/teleport/src/Console/stores/types.ts
index 1c2ea19a6ee8e..5817a536850e4 100644
--- a/web/packages/teleport/src/Console/stores/types.ts
+++ b/web/packages/teleport/src/Console/stores/types.ts
@@ -65,12 +65,9 @@ export interface DocumentKubeExec extends DocumentBase {
 }
 
 export interface DocumentDb extends DocumentBase {
-  status: 'connected' | 'disconnected';
   kind: 'db';
   sid?: string;
   name: string;
-  dbName?: string;
-  dbUser?: string;
 }
 
 export type Document =

From 4183439f113b57df5f026e3edf87124ec1ca53f3 Mon Sep 17 00:00:00 2001
From: Gabriel Corado <gabriel.oliveira@goteleport.com>
Date: Fri, 13 Dec 2024 14:13:17 -0300
Subject: [PATCH 7/8] refactor(web): filter wildcard options from connect
 dialog

---
 .../src/Console/DocumentDb/ConnectDialog.tsx  | 36 +++++++++++--------
 .../Console/DocumentDb/DocumentDb.story.tsx   | 23 ++++++++++++
 .../teleport/src/Console/consoleContext.tsx   |  1 -
 3 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
index 080ee03355fb2..6d91f451fe0ae 100644
--- a/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx
@@ -106,18 +106,24 @@ function ConnectForm(props: {
   onConnect(data: DbConnectData): void;
   onClose(): void;
 }) {
-  const dbUserOpts = props.db.users?.map(user => ({
-    value: user,
-    label: user,
-  }));
-  const dbNamesOpts = props.db.names?.map(name => ({
-    value: name,
-    label: name,
-  }));
-  const dbRolesOpts = props.db.roles?.map(role => ({
-    value: role,
-    label: role,
-  }));
+  const dbUserOpts = props.db.users
+    ?.map(user => ({
+      value: user,
+      label: user,
+    }))
+    .filter(removeWildcardOption);
+  const dbNamesOpts = props.db.names
+    ?.map(name => ({
+      value: name,
+      label: name,
+    }))
+    .filter(removeWildcardOption);
+  const dbRolesOpts = props.db.roles
+    ?.map(role => ({
+      value: role,
+      label: role,
+    }))
+    .filter(removeWildcardOption);
 
   const [selectedName, setSelectedName] = useState<Option>(dbNamesOpts?.[0]);
   const [selectedUser, setSelectedUser] = useState<Option>(dbUserOpts?.[0]);
@@ -145,7 +151,6 @@ function ConnectForm(props: {
               onChange={option => setSelectedName(option as Option)}
               value={selectedName}
               options={dbNamesOpts}
-              isDisabled={dbNamesOpts?.length == 1}
               formatCreateLabel={userInput =>
                 `Use "${userInput}" database name`
               }
@@ -157,7 +162,6 @@ function ConnectForm(props: {
               onChange={option => setSelectedUser(option as Option)}
               value={selectedUser}
               options={dbUserOpts}
-              isDisabled={dbUserOpts?.length == 1}
               formatCreateLabel={userInput =>
                 `Use "${userInput}" database user`
               }
@@ -204,6 +208,10 @@ function ConnectForm(props: {
   );
 }
 
+function removeWildcardOption({ value }: Option): boolean {
+  return value !== '*';
+}
+
 const dialogCss = () => `
   min-height: 200px;
   max-width: 600px;
diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
index b71b20575dbec..18c946d183d19 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
@@ -102,6 +102,29 @@ export const ConnectWithoutValues = () => {
   return <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />;
 };
 
+export const ConnectWithWildcards= () => {
+  const { ctx, consoleCtx } = getContexts(
+    Promise.resolve({
+      agents: [
+        {
+          kind: 'db',
+          name: 'mydb',
+          description: '',
+          type: '',
+          protocol: 'postgres',
+          labels: [],
+          names: ['postgres', '*'],
+          users: ['*'],
+          hostname: '',
+          supportsInteractive: true,
+        },
+      ],
+    })
+  );
+
+  return <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />;
+};
+
 export const NotFound = () => {
   const { ctx, consoleCtx } = getContexts(Promise.resolve({ agents: [] }));
 
diff --git a/web/packages/teleport/src/Console/consoleContext.tsx b/web/packages/teleport/src/Console/consoleContext.tsx
index 2e452130fdebe..24f1d8cc4427f 100644
--- a/web/packages/teleport/src/Console/consoleContext.tsx
+++ b/web/packages/teleport/src/Console/consoleContext.tsx
@@ -169,7 +169,6 @@ export default class ConsoleContext {
 
     return this.storeDocs.add({
       kind: 'db',
-      status: 'disconnected',
       clusterId: params.clusterId,
       title: params.serviceName,
       url,

From d1b2af36f15c40f70f01e9354900788b93adbf9d Mon Sep 17 00:00:00 2001
From: Gabriel Corado <gabriel.oliveira@goteleport.com>
Date: Fri, 13 Dec 2024 14:40:29 -0300
Subject: [PATCH 8/8] chore(web): lint

---
 .../teleport/src/Console/DocumentDb/DocumentDb.story.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
index 18c946d183d19..2be3ba4e4bb2f 100644
--- a/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
+++ b/web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx
@@ -102,7 +102,7 @@ export const ConnectWithoutValues = () => {
   return <DocumentDbWrapper ctx={ctx} consoleCtx={consoleCtx} doc={baseDoc} />;
 };
 
-export const ConnectWithWildcards= () => {
+export const ConnectWithWildcards = () => {
   const { ctx, consoleCtx } = getContexts(
     Promise.resolve({
       agents: [