Update "Connect with GUI" section, add universal context menu (gravit…

…ational#926) * Add universal context menu * Update text of "Connect with GUI" section
hatched · Jun 28, 2022 · 1e8275c · 1e8275c
1 parent 17e9a71
commit 1e8275c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/web/packages/teleterm/src/mainProcess/windowsManager.ts b/web/packages/teleterm/src/mainProcess/windowsManager.ts
@@ -1,4 +1,4 @@
-import { BrowserWindow, Rectangle, screen } from 'electron';
+import { BrowserWindow, Menu, Rectangle, screen } from 'electron';
 import { getAssetPath } from 'teleterm/mainProcess/runtimeSettings';
 import path from 'path';
 import { FileStorage } from 'teleterm/services/fileStorage';
@@ -9,11 +9,24 @@ type WindowState = Rectangle;
 
 export class WindowsManager {
   private storageKey = 'windowState';
+  private selectionContextMenu: Menu;
+  private inputContextMenu: Menu;
 
   constructor(
     private fileStorage: FileStorage,
     private settings: RuntimeSettings
-  ) {}
+  ) {
+    this.selectionContextMenu = Menu.buildFromTemplate([{ role: 'copy' }]);
+
+    this.inputContextMenu = Menu.buildFromTemplate([
+      { role: 'undo' },
+      { role: 'redo' },
+      { type: 'separator' },
+      { role: 'cut' },
+      { role: 'copy' },
+      { role: 'paste' },
+    ]);
+  }
 
   createWindow(): void {
     const windowState = this.getWindowState();
@@ -43,6 +56,10 @@ export class WindowsManager {
     } else {
       window.loadFile(path.join(__dirname, '../renderer/index.html'));
     }
+
+    window.webContents.on('context-menu', (_, props) => {
+      this.popupUniversalContextMenu(window, props);
+    });
   }
 
   private saveWindowState(window: BrowserWindow): void {
@@ -53,6 +70,21 @@ export class WindowsManager {
     this.fileStorage.put(this.storageKey, windowState);
   }
 
+  private popupUniversalContextMenu(
+    window: BrowserWindow,
+    props: Electron.ContextMenuParams
+  ): void {
+    // Taken from https://github.com/electron/electron/issues/4068#issuecomment-274159726
+    // selectall was removed from menus because it doesn't make sense in our context.
+    const { selectionText, isEditable } = props;
+
+    if (isEditable) {
+      this.inputContextMenu.popup({ window });
+    } else if (selectionText && selectionText.trim() !== '') {
+      this.selectionContextMenu.popup({ window });
+    }
+  }
+
   private getWindowState(): WindowState {
     const windowState = this.fileStorage.get<WindowState>(this.storageKey);
     const getDefaults = () => ({

diff --git a/web/packages/teleterm/src/ui/DocumentGateway/DocumentGateway.tsx b/web/packages/teleterm/src/ui/DocumentGateway/DocumentGateway.tsx
@@ -100,7 +100,7 @@ export function DocumentGateway(props: State) {
   }
 
   return (
-    <Box maxWidth="580px" mx="auto" mt="4" px="5">
+    <Box maxWidth="590px" mx="auto" mt="4" px="5">
       <Flex justifyContent="space-between" mb="4">
         <Text typography="h3" color="text.secondary">
           Database Connection
@@ -109,7 +109,9 @@ export function DocumentGateway(props: State) {
           Close Connection
         </ButtonSecondary>
       </Flex>
-      <Text typography="h4">Connect with CLI</Text>
+      <Text typography="h4" mb={1}>
+        Connect with CLI
+      </Text>
       <Flex>
         <Validation>
           <ConfigInput
@@ -131,18 +133,24 @@ export function DocumentGateway(props: State) {
           Could not change the database name: {changeDbNameAttempt.statusText}
         </Alerts.Danger>
       )}
-      <Text typography="h4" mt={3}>
+      <Text typography="h4" mt={3} mb={1}>
         Connect with GUI
       </Text>
       <Text>
-        To connect with a GUI database client, see our{' '}
+        Configure the GUI database client to connect to host{' '}
+        <code>{gateway.localAddress}</code> on port{' '}
+        <code>{gateway.localPort}</code>.
+      </Text>
+      <Text>
+        The connection is made through an authenticated proxy so no extra
+        credentials are necessary. See{' '}
         <Link
           href="https://goteleport.com/docs/database-access/guides/gui-clients/"
           target="_blank"
         >
-          documentation
+          the documentation
         </Link>{' '}
-        for instructions.
+        for more details.
       </Text>
     </Box>
   );
@@ -179,7 +187,6 @@ function CliCommand({
       justifyContent="space-between"
       borderRadius={2}
       bg={'primary.dark'}
-      mb={2}
     >
       <Flex
         mr="2"