Simplify the db connection tab (#720)

As described in gravitational/webapps.e#177, we want to replace the db
tab with just two sections:

* "Connect with CLI" which will show the command to use in terminal
* "Connect with GUI" which links to our documentation

After gravitational/teleport#11720 gets merged, the "Connect with CLI"
section will be massively simplified: it'll be basically just something like:

    psql postgres://localhost:12345

Moreover, @smallinsky suggested that tsh should be responsible for creating
those CLI connection commands. We should also do this in the future as
it'll let us support new protocols as soon as they land in tsh, without
us having to touch Teleterm codebase, for the most part.

packages/teleterm/src/main.ts

@@ -1,5 +1,5 @@
 import { spawn } from 'child_process';
-import { app, globalShortcut } from 'electron';
+import { app, globalShortcut, shell } from 'electron';
 import MainProcess from 'teleterm/mainProcess';
 import { getRuntimeSettings } from 'teleterm/mainProcess/runtimeSettings';
 import createLoggerService from 'teleterm/services/logger';
@@ -67,10 +67,19 @@ app.on('web-contents-created', (_, contents) => {
     event.preventDefault();
   });
 
-  contents.setWindowOpenHandler(({ url }) => {
-    logger.warn(
-      `Opening a new window to ${url} blocked by 'setWindowOpenHandler'`
-    );
+  contents.setWindowOpenHandler(details => {
+    const url = new URL(details.url);
+
+    // Open links to documentation in the external browser.
+    // They need to have `target` set to `_blank`.
+    if (url.host === 'goteleport.com') {
+      shell.openExternal(url.toString());
+    } else {
+      logger.warn(
+        `Opening a new window to ${url} blocked by 'setWindowOpenHandler'`
+      );
+    }
+
     return { action: 'deny' };
   });
 });

packages/teleterm/src/ui/DocumentGateway/DocumentGateway.tsx

@@ -15,16 +15,17 @@ limitations under the License.
 */
 
 import React from 'react';
-import { Text, Flex, Box, ButtonPrimary } from 'design';
+import { Text, Flex, Box, ButtonPrimary, ButtonSecondary, Link } from 'design';
+import TextSelectCopy from 'teleport/components/TextSelectCopy';
 import Document from 'teleterm/ui/Document';
 import * as Alerts from 'design/Alert';
 import * as types from 'teleterm/ui/services/workspacesService';
 import LinearProgress from 'teleterm/ui/components/LinearProgress';
 import { GatewayProtocol } from 'teleterm/ui/services/clusters/types';
 import useDocumentGateway, { State } from './useDocumentGateway';
-import { Postgres } from './Postgres';
-import { Mongo } from './Mongo';
-import { MySql } from './MySql';
+import { usePostgres } from './Postgres/usePostgres';
+import { useMongo } from './Mongo/useMongo';
+import { useMySql } from './MySql/useMySql';
 
 type Props = {
   visible: boolean;
@@ -42,8 +43,7 @@ export default function Container(props: Props) {
 }
 
 export function DocumentGateway(props: State) {
-  const { doc, gateway, connected, connectAttempt, disconnect, reconnect } =
-    props;
+  const { gateway, connected, connectAttempt, disconnect, reconnect } = props;
 
   if (!connected) {
     return (
@@ -53,7 +53,7 @@ export function DocumentGateway(props: State) {
           color="text.primary"
           style={{ position: 'relative' }}
         >
-          The Database Proxy connection is currently offline
+          The database connection is currently offline
           {connectAttempt.status === 'processing' && <LinearProgress />}
         </Text>
         {connectAttempt.status === 'error' && (
@@ -71,20 +71,55 @@ export function DocumentGateway(props: State) {
     );
   }
 
+  let cliConnectionString: string;
+
   switch (gateway.protocol as GatewayProtocol) {
     case 'mongodb':
-      return (
-        <Mongo gateway={gateway} title={doc.title} disconnect={disconnect} />
-      );
+      cliConnectionString = useMongo(gateway);
+      break;
     case 'postgres':
-      return (
-        <Postgres gateway={gateway} title={doc.title} disconnect={disconnect} />
-      );
+      cliConnectionString = usePostgres(gateway);
+      break;
     case 'mysql':
-      return (
-        <MySql gateway={gateway} title={doc.title} disconnect={disconnect} />
-      );
-    default:
-      return <Box> {`Unknown protocol type ${gateway.protocol}`}</Box>;
+      cliConnectionString = useMySql(gateway);
+      break;
   }
+
+  const cliSection = cliConnectionString ? (
+    <TextSelectCopy
+      bash={false}
+      bg={'primary.dark'}
+      mb={4}
+      text={cliConnectionString}
+    />
+  ) : (
+    // We're going to add support for other protocols before the preview release.
+    <Text mb={4}>{gateway.protocol} support is coming soon!</Text>
+  );
+
+  return (
+    <Box maxWidth="1024px" mx="auto" mt="4" px="5">
+      <Flex justifyContent="space-between" mb="4">
+        <Text typography="h3" color="text.secondary">
+          Database Connection
+        </Text>
+        <ButtonSecondary size="small" onClick={disconnect}>
+          Close Connection
+        </ButtonSecondary>
+      </Flex>
+      <Text bold>Connect with CLI</Text>
+      {cliSection}
+      <Text bold>Connect with GUI</Text>
+      <Text>
+        To connect with a GUI database client, see our{' '}
+        <Link
+          href="https://goteleport.com/docs/database-access/guides/gui-clients/"
+          target="_blank"
+        >
+          documentation
+        </Link>{' '}
+        for instructions.
+      </Text>
+    </Box>
+  );
 }

packages/teleterm/src/ui/DocumentGateway/Mongo/useMongo.ts

@@ -16,15 +16,7 @@ limitations under the License.
 
 import { Gateway } from 'teleterm/ui/services/clusters';
 
-export type MongoProps = {
-  title: string;
-  disconnect(): void;
-  gateway: Gateway;
-};
-
-export function useMongo(props: MongoProps) {
-  const { gateway, disconnect, title } = props;
-
+export function useMongo(gateway: Gateway) {
   const mongoConnectionStr = [
     `mongo`,
     `--host ${gateway.localAddress}`,
@@ -34,20 +26,5 @@ export function useMongo(props: MongoProps) {
     `--sslCAFile ${gateway.caCertPath}`,
   ].join(' ');
 
-  const mongoshConnectionStr = [
-    `mongosh`,
-    `--host ${gateway.localAddress}`,
-    `--port ${gateway.localPort}`,
-    `--tls`,
-    `--tlsCertificateKeyFile ${gateway.certPath}`,
-    `--tlsCAFile ${gateway.caCertPath}`,
-  ].join(' ');
-
-  return {
-    title,
-    disconnect,
-    gateway,
-    mongoConnectionStr,
-    mongoshConnectionStr,
-  };
+  return mongoConnectionStr;
 }