[v15] [Web] Update database connection instructions (#39027)

* remove tsh db login from modal * update commands based on dbprotocols
gravitational · Mar 6, 2024 · d71c637 · d71c637
1 parent 8dc8c73
commit d71c637
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 91 deletions.
diff --git a/web/packages/shared/services/databases/databases.ts b/web/packages/shared/services/databases/databases.ts
@@ -43,7 +43,9 @@ export type DbProtocol =
   | 'cassandra'
   | 'elasticsearch'
   | 'opensearch'
-  | 'dynamodb';
+  | 'dynamodb'
+  | 'clickhouse'
+  | 'clickhouse-http';
 
 const formatProtocol = (input: DbProtocol) => {
   switch (input) {

diff --git a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.story.tsx b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.story.tsx
@@ -24,7 +24,7 @@ export default {
   title: 'Teleport/Databases/Connect',
 };
 
-export const Connect = () => (
+export const ConnectDbNameFlagRequired = () => (
   <ConnectDialog
     username="yassine"
     dbName="aurora"
@@ -35,6 +35,39 @@ export const Connect = () => (
   />
 );
 
+export const ConnectDbNameFlagOptional = () => (
+  <ConnectDialog
+    username="yassine"
+    dbName="cockroach"
+    dbProtocol="cockroachdb"
+    clusterId="im-a-cluster"
+    onClose={() => null}
+    authType="local"
+  />
+);
+
+export const ConnectNoDbNameFlag = () => (
+  <ConnectDialog
+    username="yassine"
+    dbName="cassandra"
+    dbProtocol="cassandra"
+    clusterId="im-a-cluster"
+    onClose={() => null}
+    authType="local"
+  />
+);
+
+export const ConnectDynamodb = () => (
+  <ConnectDialog
+    username="yassine"
+    dbName="dynamo"
+    dbProtocol="dynamodb"
+    clusterId="im-a-cluster"
+    onClose={() => null}
+    authType="local"
+  />
+);
+
 export const ConnectWithRequestId = () => {
   return (
     <ConnectDialog

diff --git a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.test.tsx b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.test.tsx
@@ -25,17 +25,37 @@ import { ConnectWithRequestId } from './ConnectDialog.story';
 test('correct connect command generated for postgres db', () => {
   render(<ConnectDialog {...props} dbProtocol="postgres" />);
 
+  // --db-name flag should be required
   const expectedOutput =
-    'tsh db connect [--db-user=<user>] [--db-name=<name>] aurora';
+    'tsh db connect aurora --db-user=<user> --db-name=<name>';
 
   expect(screen.getByText(expectedOutput)).toBeInTheDocument();
 });
 
 test('correct connect command generated for mysql db', () => {
   render(<ConnectDialog {...props} dbProtocol="mysql" />);
 
+  // --db-name flag should be optional
   const expectedOutput =
-    'tsh db connect [--db-user=<user>] [--db-name=<name>] aurora';
+    'tsh db connect aurora --db-user=<user> [--db-name=<name>]';
+
+  expect(screen.getByText(expectedOutput)).toBeInTheDocument();
+});
+
+test('correct connect command generated for redis', () => {
+  render(<ConnectDialog {...props} dbProtocol="redis" />);
+
+  // There should be no --db-name flag
+  const expectedOutput = 'tsh db connect aurora --db-user=<user>';
+
+  expect(screen.getByText(expectedOutput)).toBeInTheDocument();
+});
+
+test('correct connect command generated for dynamodb', () => {
+  render(<ConnectDialog {...props} dbProtocol="dynamodb" />);
+
+  // Command should be `tsh proxy db --tunnel` instead of `tsh connect db`
+  const expectedOutput = 'tsh proxy db --tunnel aurora --db-user=<user>';
 
   expect(screen.getByText(expectedOutput)).toBeInTheDocument();
 });

diff --git a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
@@ -37,7 +37,40 @@ export default function ConnectDialog({
   onClose,
   authType,
   accessRequestId,
+  dbProtocol,
 }: Props) {
+  // For dynamodb and clickhouse-http protocols, the command is `tsh proxy db --tunnel` instead of `tsh db connect`.
+  let connectCommand =
+    dbProtocol == 'dynamodb' || dbProtocol == 'clickhouse-http'
+      ? 'proxy db --tunnel'
+      : 'db connect';
+
+  // Adjust `--db-name` flag based on db protocol, as it's required for
+  // some, optional for some, and unsupported by some.
+  let dbNameFlag: string;
+  switch (dbProtocol) {
+    case 'postgres':
+    case 'sqlserver':
+    case 'oracle':
+    case 'mongodb':
+      // Required
+      dbNameFlag = ' --db-name=<name>';
+      break;
+    case 'cassandra':
+    case 'clickhouse':
+    case 'clickhouse-http':
+    case 'dynamodb':
+    case 'opensearch':
+    case 'elasticsearch':
+    case 'redis':
+      // No flag
+      dbNameFlag = '';
+      break;
+    default:
+      // Default to optional
+      dbNameFlag = ' [--db-name=<name>]';
+  }
+
   return (
     <Dialog
       dialogCss={() => ({
@@ -71,26 +104,16 @@ export default function ConnectDialog({
           <Text bold as="span">
             Step 2
           </Text>
-          {' - Retrieve credentials for the database'}
-          <TextSelectCopy
-            mt="2"
-            text={`tsh db login [--db-user=<user>] [--db-name=<name>] ${dbName}`}
-          />
-        </Box>
-        <Box mb={4}>
-          <Text bold as="span">
-            Step 3
-          </Text>
           {' - Connect to the database'}
           <TextSelectCopy
             mt="2"
-            text={`tsh db connect [--db-user=<user>] [--db-name=<name>] ${dbName}`}
+            text={`tsh ${connectCommand} ${dbName} --db-user=<user> ${dbNameFlag}`}
           />
         </Box>
         {accessRequestId && (
           <Box mb={4}>
             <Text bold as="span">
-              Step 4 (Optional)
+              Step 3 (Optional)
             </Text>
             {' - When finished, drop the assumed role'}
             <TextSelectCopy mt="2" text={`tsh request drop`} />

diff --git a/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap b/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
@@ -291,42 +291,6 @@ exports[`render dialog with instructions to connect to database 1`] = `
             class="c10"
           >
             Step 2
-          </span>
-           - Retrieve credentials for the database
-          <div
-            class="c11 c12"
-            color="light"
-          >
-            <div
-              class="c13 c14"
-              style="overflow: auto; white-space: pre; word-break: break-all; font-size: 12px; font-family: \\"Droid Sans Mono\\", \\"monospace\\", monospace, \\"Droid Sans Fallback\\";"
-            >
-              <div
-                class="c15"
-                style="user-select: none;"
-              >
-                $
-              </div>
-              <div>
-                tsh db login [--db-user=&lt;user&gt;] [--db-name=&lt;name&gt;] aurora
-              </div>
-            </div>
-            <button
-              class="c16"
-              kind="primary"
-              style="max-width: 48px; width: 100%; padding: 4px 8px; min-height: 10px; font-size: 10px;"
-            >
-              Copy
-            </button>
-          </div>
-        </div>
-        <div
-          class="c9"
-        >
-          <span
-            class="c10"
-          >
-            Step 3
           </span>
            - Connect to the database
           <div
@@ -344,7 +308,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
                 $
               </div>
               <div>
-                tsh db connect [--db-user=&lt;user&gt;] [--db-name=&lt;name&gt;] aurora
+                tsh db connect aurora --db-user=&lt;user&gt;  --db-name=&lt;name&gt;
               </div>
             </div>
             <button
@@ -679,42 +643,6 @@ exports[`render dialog with instructions to connect to database with requestId 1
               class="c10"
             >
               Step 2
-            </span>
-             - Retrieve credentials for the database
-            <div
-              class="c11 c12"
-              color="light"
-            >
-              <div
-                class="c13 c14"
-                style="overflow: auto; white-space: pre; word-break: break-all; font-size: 12px; font-family: \\"Droid Sans Mono\\", \\"monospace\\", monospace, \\"Droid Sans Fallback\\";"
-              >
-                <div
-                  class="c15"
-                  style="user-select: none;"
-                >
-                  $
-                </div>
-                <div>
-                  tsh db login [--db-user=&lt;user&gt;] [--db-name=&lt;name&gt;] aurora
-                </div>
-              </div>
-              <button
-                class="c16"
-                kind="primary"
-                style="max-width: 48px; width: 100%; padding: 4px 8px; min-height: 10px; font-size: 10px;"
-              >
-                Copy
-              </button>
-            </div>
-          </div>
-          <div
-            class="c9"
-          >
-            <span
-              class="c10"
-            >
-              Step 3
             </span>
              - Connect to the database
             <div
@@ -732,7 +660,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
                   $
                 </div>
                 <div>
-                  tsh db connect [--db-user=&lt;user&gt;] [--db-name=&lt;name&gt;] aurora
+                  tsh db connect aurora --db-user=&lt;user&gt;  --db-name=&lt;name&gt;
                 </div>
               </div>
               <button
@@ -750,7 +678,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
             <span
               class="c10"
             >
-              Step 4 (Optional)
+              Step 3 (Optional)
             </span>
              - When finished, drop the assumed role
             <div