Use connection dropdown

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/src/ui/DocumentCluster/ClusterResources/Servers/MenuSshLoginTheme.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { ThemeProvider } from 'styled-components';
+import theme from 'teleterm/ui/ThemeProvider/theme';
+
+const menuSshLoginTheme = {
+  ...theme,
+  colors: {
+    ...theme.colors,
+    subtle:theme.colors.primary.lighter,
+    light: theme.colors.primary.dark,
+    grey: {
+      [50]: 'rgba(255,255,255,0.05)',
+      [900]: theme.colors.text.primary,
+    },
+    link: theme.colors.text.primary,
+  },
+};
+
+export const MenuSshLoginTheme: FC = props => (
+  <ThemeProvider theme={menuSshLoginTheme} children={props.children} />
+);

packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx

@@ -18,16 +18,17 @@ import React from 'react';
 import { useServers, State } from './useServers';
 import * as types from 'teleterm/ui/services/clusters/types';
 import Table, { Cell } from 'design/DataTable';
-import { ButtonBorder } from 'design';
 import { renderLabelCell } from '../renderLabelCell';
+import MenuSshLogin from 'shared/components/MenuSshLogin';
+import { MenuSshLoginTheme } from './MenuSshLoginTheme';
 
 export default function Container() {
   const state = useServers();
   return <ServerList {...state} />;
 }
 
 function ServerList(props: State) {
-  const { servers = [], connect } = props;
+  const { servers = [], getSshLogins, connect } = props;
   return (
     <Table
       columns={[
@@ -49,7 +50,11 @@ function ServerList(props: State) {
         },
         {
           altKey: 'connect-btn',
-          render: server => renderConnectCell(server.uri, connect),
+          render: server =>
+            renderConnectCell(
+              () => getSshLogins(server.uri),
+              login => connect(server.uri, login)
+            ),
         },
       ]}
       emptyText="No Nodes Found"
@@ -60,19 +65,25 @@ function ServerList(props: State) {
 }
 
 const renderConnectCell = (
-  serverUri: string,
-  connect: (serverUri: string) => void
+  getSshLogins: () => string[],
+  onConnect: (login: string) => void
 ) => {
   return (
     <Cell align="right">
-      <ButtonBorder
-        size="small"
-        onClick={() => {
-          connect(serverUri);
-        }}
-      >
-        Connect
-      </ButtonBorder>
+      <MenuSshLoginTheme>
+        <MenuSshLogin
+          onOpen={() => getSshLogins().map(login => ({ login, url: '' }))}
+          onSelect={(e, login) => onConnect(login)}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          anchorOrigin={{
+            vertical: 'center',
+            horizontal: 'right',
+          }}
+        />
+      </MenuSshLoginTheme>
     </Cell>
   );
 };
@@ -87,4 +98,4 @@ const renderAddressCell = ({ addr, tunnel }: types.Server) => (
     )}
     {!tunnel && addr}
   </Cell>
-);
+);

packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/useServers.ts

@@ -15,16 +15,39 @@ limitations under the License.
 */
 
 import { useClusterContext } from 'teleterm/ui/DocumentCluster/clusterContext';
+import { useAppContext } from 'teleterm/ui/appContextProvider';
 
 export function useServers() {
-  const ctx = useClusterContext();
-  const servers = ctx.getServers();
-  const syncStatus = ctx.getSyncStatus().servers;
+  const appContext = useAppContext();
+  const clusterContext = useClusterContext();
+  const servers = clusterContext.getServers();
+  const syncStatus = clusterContext.getSyncStatus().servers;
+
+  function getSshLogins(serverUri: string): string[] {
+    const cluster = appContext.clustersService.findClusterByResource(serverUri);
+    return cluster?.loggedInUser?.sshLoginsList || [];
+  }
+
+  function connect(serverUri: string, login: string): void {
+    const server = appContext.clustersService.getServer(serverUri);
+
+    const rootCluster =
+      appContext.clustersService.findRootClusterByResource(serverUri);
+    const documentsService =
+      appContext.workspacesService.getWorkspaceDocumentService(rootCluster.uri);
+    const doc = documentsService.createTshNodeDocument(serverUri);
+    doc.title = `${login}@${server.hostname}`;
+    doc.login = login;
+
+    documentsService.add(doc);
+    documentsService.setLocation(doc.uri);
+  }
 
   return {
-    connect: ctx.connectServer,
     servers,
     syncStatus,
+    getSshLogins,
+    connect,
   };
 }
 

packages/teleterm/src/ui/DocumentCluster/clusterContext.tsx

@@ -71,10 +71,6 @@ class ClusterContext extends Store<State> {
     this.appCtx.commandLauncher.executeCommand('kube-connect', { kubeUri });
   };
 
-  connectServer = (serverUri: string) => {
-    this.appCtx.commandLauncher.executeCommand('ssh', { serverUri });
-  };
-
   connectDb = (dbUri: string) => {
     this.appCtx.commandLauncher.executeCommand('proxy-db', { dbUri });
   };

packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx

@@ -17,7 +17,6 @@
 import React from 'react';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 import GatewayCreate from 'teleterm/ui/GatewayCreate';
-import ServerConnect from 'teleterm/ui/ServerConnect';
 import ClusterRemove from '../ClusterRemove/ClusterRemove';
 import { ClusterConnect } from 'teleterm/ui/ClusterConnect';
 
@@ -51,9 +50,5 @@ export default function ModalsHost() {
     return <GatewayCreate {...dialog} onClose={handleClose} />;
   }
 
-  if (dialog.kind === 'server-connect') {
-    return <ServerConnect serverUri={dialog.serverUri} onClose={handleClose} />;
-  }
-
   return null;
 }