[v9] Backport Teleport Connect (2 of 5)

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;
   };