[v15] Update aws launch buttons with searchable fields

web/packages/shared/components/AwsLaunchButton.tsx

@@ -18,7 +18,8 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { ButtonBorder, Text } from 'design';
+import { space } from 'design/system';
+import { ButtonBorder, Flex, Text, Box } from 'design';
 import Menu, { MenuItem } from 'design/Menu';
 import { ChevronDown } from 'design/Icon';
 
@@ -30,14 +31,19 @@ export class AwsLaunchButton extends React.Component<Props> {
   state = {
     open: false,
     anchorEl: null,
+    filtered: '',
   };
 
   onOpen = () => {
-    this.setState({ open: true });
+    this.setState({ open: true, filtered: '' });
   };
 
   onClose = () => {
-    this.setState({ open: false });
+    this.setState({ open: false, filtered: '' });
+  };
+
+  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ filtered: event.target.value });
   };
 
   render() {
@@ -57,8 +63,9 @@ export class AwsLaunchButton extends React.Component<Props> {
         </ButtonBorder>
         <Menu
           menuListCss={() => ({
-            overflow: 'auto',
+            overflow: 'hidden',
             minWidth: '180px',
+            maxHeight: '400px',
           })}
           transformOrigin={{
             vertical: 'top',
@@ -74,10 +81,19 @@ export class AwsLaunchButton extends React.Component<Props> {
           onClose={this.onClose}
         >
           <RoleItemList
-            awsRoles={awsRoles}
+            awsRoles={awsRoles.filter(role => {
+              const lowerFilter = this.state.filtered.toLowerCase();
+              const lowerDisplay = role.display.toLowerCase();
+              const lowerName = role.name.toLowerCase();
+              return (
+                lowerDisplay.includes(lowerFilter) ||
+                lowerName.includes(lowerFilter)
+              );
+            })}
             getLaunchUrl={getLaunchUrl}
             onLaunchUrl={onLaunchUrl}
             closeMenu={this.onClose}
+            onChange={this.onChange}
           />
         </Menu>
       </>
@@ -89,10 +105,14 @@ function RoleItemList({
   awsRoles,
   getLaunchUrl,
   closeMenu,
+  onChange,
   onLaunchUrl,
-}: Props & { closeMenu: () => void }) {
+}: Props & {
+  closeMenu: () => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
   const awsRoleItems = awsRoles.map((item, key) => {
-    const { display, arn } = item;
+    const { display, arn, name } = item;
     const launchUrl = getLaunchUrl(arn);
     return (
       <StyledMenuItem
@@ -108,32 +128,47 @@ function RoleItemList({
           onLaunchUrl?.(item.arn);
         }}
       >
-        <Text style={{ maxWidth: '25ch' }}>{display}</Text>
+        <Text>{`${display !== name ? `${display} (${name})` : display}`}</Text>
       </StyledMenuItem>
     );
   });
 
   return (
-    <>
+    <Flex flexDirection="column">
       <Text
         px="2"
         fontSize="11px"
-        mb="2"
         css={`
           color: ${props => props.theme.colors.text.main};
           background: ${props => props.theme.colors.spotBackground[2]};
         `}
       >
         Select IAM Role
       </Text>
-      {awsRoleItems.length ? (
-        awsRoleItems
-      ) : (
-        <Text px={2} m={2} color="text.disabled">
-          No roles found
-        </Text>
-      )}
-    </>
+      <StyledInput
+        p="2"
+        m="2"
+        type="text"
+        onChange={onChange}
+        autoFocus
+        placeholder={'Search IAM roles...'}
+        autoComplete="off"
+      />
+      <Box
+        css={`
+          max-height: 220px;
+          overflow: auto;
+        `}
+      >
+        {awsRoleItems.length ? (
+          awsRoleItems
+        ) : (
+          <Text px={2} m={2} color="text.disabled">
+            No roles found
+          </Text>
+        )}
+      </Box>
+    </Flex>
   );
 }
 
@@ -159,3 +194,26 @@ const StyledMenuItem = styled(MenuItem)(
   }
 `
 );
+
+const StyledInput = styled.input(
+  ({ theme }) => `
+  background: transparent;
+  border: 1px solid ${theme.colors.text.muted};
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: ${theme.colors.text.main};
+  height: 32px;
+  outline: none;
+
+  &:focus, &:hover {
+    border 1px solid ${theme.colors.text.slightlyMuted};
+    outline: none;
+  }
+
+  ::placeholder {
+    color: ${theme.colors.text.muted};
+    opacity: 1;
+  }
+`,
+  space
+);

web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.story.tsx

@@ -32,6 +32,7 @@ import { desktops } from 'teleport/Desktops/fixtures';
 import { nodes } from 'teleport/Nodes/fixtures';
 
 import makeApp from 'teleport/services/apps/makeApps';
+import { ResourceActionButton } from 'teleport/UnifiedResources/ResourceActionButton';
 
 import {
   makeUnifiedResourceViewItemApp,
@@ -104,7 +105,9 @@ export const Cards: Story = {
       <Grid gap={2}>
         {[
           ...apps.map(resource =>
-            makeUnifiedResourceViewItemApp(resource, { ActionButton })
+            makeUnifiedResourceViewItemApp(resource, {
+              ActionButton: <ResourceActionButton resource={resource} />,
+            })
           ),
           ...databases.map(resource =>
             makeUnifiedResourceViewItemDatabase(resource, {
@@ -115,7 +118,9 @@ export const Cards: Story = {
             makeUnifiedResourceViewItemKube(resource, { ActionButton })
           ),
           ...nodes.map(resource =>
-            makeUnifiedResourceViewItemNode(resource, { ActionButton })
+            makeUnifiedResourceViewItemNode(resource, {
+              ActionButton,
+            })
           ),
           ...additionalResources.map(resource =>
             makeUnifiedResourceViewItemApp(resource, { ActionButton })

web/packages/shared/services/apps.ts

@@ -17,6 +17,7 @@
  */
 
 export type AwsRole = {
+  name: string;
   arn: string;
   display: string;
 };

web/packages/teleport/src/Apps/fixtures/index.ts

@@ -151,13 +151,27 @@ export const apps = [
     awsConsole: true,
     awsRoles: [
       {
+        name: 'role name',
         arn: 'arn:aws:iam::joe123:role/EC2FullAccess',
         display: 'EC2FullAccess',
       },
       {
+        name: 'other role name',
+        arn: 'arn:aws:iam::joe123:role/EC2FullAccess',
+        display: 'ReallyLonReallyLonggggggEC2FullAccess',
+      },
+      {
+        name: 'thisthing',
         arn: 'arn:aws:iam::joe123:role/EC2ReadOnly',
         display: 'EC2ReadOnly',
       },
+      ...new Array(20).fill(undefined).map((_, index) => {
+        return {
+          name: `long-${index}`,
+          arc: `arn:aws:iam::${index}`,
+          display: `LONG${index}`,
+        };
+      }),
     ],
     clusterId: 'one',
     fqdn: 'awsconsole-1.com',