[v9] Backport Teleport Connect (2 of 5) (#763)

* Take `localClusterUri` into account in `QuickInput` (#679)

* Display cluster name for each connection

* Automatically try to connect a connection when possible

* Update connection icon

* Always use root cluster URI to obtain `documentsService` in `useServerConnect`

* Don't close the tab on non-zero exit code

* Autocomplete database names for tsh proxy db

* Change placeholder text in `ClusterAdd`

* Show leaf cluster name when possible in Connections list

* Hide kubes and apps

* Force `TopBar` items to take full height

* Change shortcut to open `QuickInput`

* Update electron-builder to 23.0.3

Versions lower than 23.0.2 don't work on newest macOS, see:

* electron-userland/electron-builder#6732
* electron-userland/electron-builder#6606

* remove `Navigator` code (#685)

* Prevent breaking layout on long cluster name (#688)

* Show username when possible in identity list (#687)

* Update command for updating proto files

* Update protobufs for Teleterm (LoginRequest params)

This commit removes a bunch of unused protobufs and also updates some of
those that got updated on the teleterm branch in the teleport repo.

The biggest change from all of them is that LoginRequest now has oneof
on Sso and Local. [1] This is because a login request should have either
Sso or Local params, but not both at the same time.

The previous implementation called both `setSso` and `setLogin` on the same
object. This no longer works with the use of `oneof`, because calling `setLogin`
after `setSso` would clear the `Sso` params. [2]

[1] gravitational/teleport#10286 (comment)
[2] https://developers.google.com/protocol-buffers/docs/proto3#oneof_features

* Render ssh menu item as `NavLink` only when URL is provided

* Use connection dropdown instead of modal for supplying SSH username

* Adjust `Identity` layout, combine `logout` and `clusterRemove` into a single action

* Change command `cluster-remove` to `cluster-logout`

* Apply `Identity` design changes

* Enable `babel-plugin-styled-components` in production and tests (#697)

* Make connections icon bigger

* Properly use `css` prop

Co-authored-by: Grzegorz Zdunek <[email protected]>
Co-authored-by: Grzegorz Zdunek <[email protected]>

packages/build/.babelrc.js

@@ -42,10 +42,13 @@ module.exports = {
     development: {
       plugins: [
         ...plugins,
-        'babel-plugin-styled-components',
+        ['babel-plugin-styled-components', { displayName: true, ssr: false }],
       ],
     },
   },
   presets: makePresents(),
-  plugins,
+  plugins: [
+    ...plugins,
+    ['babel-plugin-styled-components', { displayName: false, ssr: false }],
+  ],
 };

packages/build/package.json

@@ -44,7 +44,7 @@
     "cross-env": "5.0.5",
     "cross-spawn": "6.0.5",
     "css-loader": "^6.5.1",
-    "electron-builder": "22.14.13",
+    "electron-builder": "23.0.3",
     "eslint": "^8.3.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-babel": "^5.3.1",

packages/shared/components/MenuSshLogin/MenuSshLogin.tsx

@@ -20,7 +20,7 @@ import { NavLink } from 'react-router-dom';
 import Menu, { MenuItem } from 'design/Menu';
 import { space } from 'design/system';
 import { MenuSshLoginProps } from './types';
-import { ButtonBorder } from 'design';
+import { ButtonBorder, Flex } from 'design';
 import { CarrotDown } from 'design/Icon';
 
 class MenuSshLogin extends React.Component<MenuSshLoginProps> {
@@ -100,7 +100,7 @@ export const LoginItemList = ({ logins, onClick, onKeyPress }) => {
         key={key}
         px="2"
         mx="2"
-        as={NavLink}
+        as={url ? NavLink : StyledButton}
         to={url}
         onClick={(e: Event) => {
           onClick(e, login);
@@ -112,7 +112,7 @@ export const LoginItemList = ({ logins, onClick, onKeyPress }) => {
   });
 
   return (
-    <React.Fragment>
+    <Flex flexDirection="column">
       <Input
         p="2"
         m="2"
@@ -123,10 +123,16 @@ export const LoginItemList = ({ logins, onClick, onKeyPress }) => {
         autoComplete="off"
       />
       {$menuItems}
-    </React.Fragment>
+    </Flex>
   );
 };
 
+const StyledButton = styled.button`
+  color: inherit;
+  border: none;
+  flex: 1;
+`;
+
 const StyledMenuItem = styled(MenuItem)(
   ({ theme }) => `
   color: ${theme.colors.grey[400]};
@@ -150,7 +156,7 @@ const Input = styled.input(
   border: 1px solid ${theme.colors.subtle};
   border-radius: 4px;
   box-sizing: border-box;
-  color: #263238;
+  color: ${theme.colors.grey[900]};
   height: 32px;
   outline: none;
 

packages/teleterm/README.md

@@ -143,6 +143,6 @@ lib/teleterm/api/protogen/
 
 ```sh
 $ cd teleport
-$ rm -rf ./../webapps/packages/teleterm/src/services/tshd/v1/ && cp -R lib/teleterm/api/protogen/js/v1/ ./../webapps/packages/teleterm/src/services/tshd/
+$ rm -rf ./../webapps/packages/teleterm/src/services/tshd/v1/ && cp -R lib/teleterm/api/protogen/js/v1 ./../webapps/packages/teleterm/src/services/tshd/v1
 ```
 

packages/teleterm/src/mainProcess/mainProcess.ts

@@ -10,7 +10,6 @@ import {
 import { ChildProcess, spawn } from 'child_process';
 import { Logger, RuntimeSettings } from 'teleterm/types';
 import { getAssetPath } from './runtimeSettings';
-import { subscribeToClusterContextMenuEvent } from './contextMenus/clusterContextMenu';
 import { subscribeToTerminalContextMenuEvent } from './contextMenus/terminalContextMenu';
 import {
   ConfigService,
@@ -103,7 +102,6 @@ export default class MainProcess {
     });
 
     subscribeToTerminalContextMenuEvent();
-    subscribeToClusterContextMenuEvent();
     subscribeToTabContextMenuEvent();
     subscribeToConfigServiceEvents(this.configService);
   }

packages/teleterm/src/mainProcess/mainProcessClient.ts

@@ -1,5 +1,4 @@
 import { ipcRenderer } from 'electron';
-import { openClusterContextMenu } from './contextMenus/clusterContextMenu';
 import { openTerminalContextMenu } from './contextMenus/terminalContextMenu';
 import { MainProcessClient } from './types';
 import { createConfigServiceClient } from '../services/config';
@@ -11,7 +10,6 @@ export default function createMainProcessClient(): MainProcessClient {
       return ipcRenderer.sendSync('main-process-get-runtime-settings');
     },
     openTerminalContextMenu,
-    openClusterContextMenu,
     openTabContextMenu,
     configService: createConfigServiceClient(),
   };

packages/teleterm/src/mainProcess/types.ts

@@ -18,7 +18,6 @@ export type RuntimeSettings = {
 export type MainProcessClient = {
   getRuntimeSettings(): RuntimeSettings;
   openTerminalContextMenu(): void;
-  openClusterContextMenu(options: ClusterContextMenuOptions): void;
   openTabContextMenu(options: TabContextMenuOptions): void;
   configService: ConfigService;
 };
@@ -41,18 +40,10 @@ export interface TabContextMenuOptions {
   onDuplicatePty(): void;
 }
 
-export const ClusterContextMenuEventChannel = 'ClusterContextMenuEventChannel';
 export const TerminalContextMenuEventChannel = 'TerminalContextMenuEventChannel';
 export const TabContextMenuEventChannel = 'TabContextMenuEventChannel';
 export const ConfigServiceEventChannel = 'ConfigServiceEventChannel';
 
-export enum ClusterContextMenuEventType {
-  Refresh = 'Refresh',
-  Login = 'Login',
-  Logout = 'Logout',
-  Remove = 'Remove',
-}
-
 export enum TabContextMenuEventType {
   Close = 'Close',
   CloseOthers = 'CloseOthers',

packages/teleterm/src/services/config/providers/keyboardShortcutsConfigProvider.ts

@@ -20,7 +20,7 @@ export type KeyboardShortcutType =
   | 'tab-new'
   | 'tab-previous'
   | 'tab-next'
-  | 'focus-global-search'
+  | 'open-quick-input'
   | 'toggle-connections'
   | 'toggle-clusters'
   | 'toggle-identity';
@@ -44,7 +44,7 @@ export const keyboardShortcutsConfigProvider: ConfigServiceProvider<KeyboardShor
         'tab-new': 'Command-T',
         'tab-previous': 'Control-Shift-Tab',
         'tab-next': 'Control-Tab',
-        'focus-global-search': 'F1',
+        'open-quick-input': 'Command-K',
         'toggle-connections': 'Command-O',
         'toggle-clusters': 'Command-E',
         'toggle-identity': 'Command-I',
@@ -64,7 +64,7 @@ export const keyboardShortcutsConfigProvider: ConfigServiceProvider<KeyboardShor
         'tab-new': 'Ctrl-Shift-T',
         'tab-previous': 'Ctrl-PageUp',
         'tab-next': 'Ctrl-PageDown',
-        'focus-global-search': 'F1',
+        'open-quick-input': 'Ctrl-K',
         'toggle-connections': 'Ctrl-O',
         'toggle-clusters': 'Ctrl-E',
         'toggle-identity': 'Ctrl-I',

packages/teleterm/src/services/tshd/createClient.ts

@@ -149,10 +149,10 @@ export default function createClient(addr: string) {
     },
 
     async login(params: types.LoginParams, abortSignal?: types.TshAbortSignal) {
-      const ssoParams = params.oss
+      const ssoParams = params.sso
         ? new api.LoginRequest.SsoParams()
-            .setProviderName(params.oss.providerName)
-            .setProviderType(params.oss.providerType)
+            .setProviderName(params.sso.providerName)
+            .setProviderType(params.sso.providerType)
         : null;
 
       const localParams = params.local
@@ -163,10 +163,15 @@ export default function createClient(addr: string) {
         : null;
 
       return withAbort(abortSignal, callRef => {
-        const req = new api.LoginRequest()
-          .setClusterUri(params.clusterUri)
-          .setSso(ssoParams)
-          .setLocal(localParams);
+        const req = new api.LoginRequest().setClusterUri(params.clusterUri);
+
+        // LoginRequest has oneof on `Local` and `Sso`, which means that setting one of them clears
+        // the other.
+        if (ssoParams) {
+          req.setSso(ssoParams);
+        } else {
+          req.setLocal(localParams);
+        }
 
         return new Promise<void>((resolve, reject) => {
           callRef.current = tshd.login(req, err => {

packages/teleterm/src/services/tshd/types.ts

@@ -48,7 +48,7 @@ export type TshAbortSignal = {
 
 export type LoginParams = {
   clusterUri: string;
-  oss?: {
+  sso?: {
     providerType: string;
     providerName: string;
   };