Add filter to cluster dropdown

web/packages/shared/components/ClusterDropdown/ClusterDropdown.story.tsx

@@ -0,0 +1,119 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import { Cluster } from 'teleport/services/clusters';
+import { createTeleportContext } from 'teleport/mocks/contexts';
+import { ContextProvider } from 'teleport/index';
+import { Text, Box } from 'design';
+
+import { ClusterDropdown } from './ClusterDropdown';
+
+export default {
+  title: 'ClusterDropdown',
+};
+
+const fetchClusters = () => null;
+
+export const Dropdown = () => {
+  const ctx = createTeleportContext();
+  return (
+    <MemoryRouter>
+      <ContextProvider ctx={ctx}>
+        <Box mb={4}>
+          <Text>500 clusters</Text>
+          <ClusterDropdown
+            clusterId="cluster-2"
+            clusterLoader={{
+              fetchClusters,
+              clusters: lotsOfClusters,
+            }}
+            onError={() => null}
+          />
+        </Box>
+        <Box mb={4}>
+          <Text>2 clusters</Text>
+          <ClusterDropdown
+            clusterId="cluster-2"
+            clusterLoader={{
+              fetchClusters,
+              clusters: twoClusters,
+            }}
+            onError={() => null}
+          />
+        </Box>
+        <Box mb={4}>
+          <Text>20 clusters</Text>
+          <ClusterDropdown
+            clusterId="cluster-2"
+            clusterLoader={{ fetchClusters, clusters: twentyClusters }}
+            onError={() => null}
+          />
+        </Box>
+        <Box mb={4}>
+          <Text>5 clusters</Text>
+          <ClusterDropdown
+            clusterId="cluster-2"
+            clusterLoader={{ fetchClusters, clusters: fiveClusters }}
+            onError={() => null}
+          />
+        </Box>
+        <Box mb={4}>
+          <Text>no clusters (shouldn't be displayed)</Text>
+          <ClusterDropdown
+            clusterId="cluster-2"
+            clusterLoader={{ clusters: [], fetchClusters }}
+            onError={() => null}
+          />
+        </Box>
+      </ContextProvider>
+    </MemoryRouter>
+  );
+};
+
+Dropdown.storyName = 'ClusterDropdown';
+
+const lotsOfClusters = new Array(500).fill(null).map(
+  (_, i) =>
+    ({
+      clusterId: `cluster-${i}`,
+    } as Cluster)
+);
+
+const twoClusters = new Array(2).fill(null).map(
+  (_, i) =>
+    ({
+      clusterId: `cluster-${i}`,
+    } as Cluster)
+);
+
+const twentyClusters = new Array(20).fill(null).map(
+  (_, i) =>
+    ({
+      clusterId: `cluster-${i}`,
+    } as Cluster)
+);
+
+const fiveClusters = new Array(5).fill(null).map(
+  (_, i) =>
+    ({
+      clusterId: `cluster-${i}`,
+    } as Cluster)
+);

web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx

@@ -17,8 +17,9 @@
  */
 
 import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
 import { useHistory } from 'react-router';
-import { ButtonSecondary, Flex, Menu, MenuItem, Text } from 'design';
+import { Box, ButtonSecondary, Flex, Menu, MenuItem, Text } from 'design';
 import { ChevronDown } from 'design/Icon';
 import cfg from 'teleport/config';
 import { Cluster } from 'teleport/services/clusters';
@@ -64,6 +65,8 @@ export function ClusterDropdown({
   const [options, setOptions] = React.useState<Option[]>(
     createOptions(initialClusters)
   );
+  const showInput = options.length > 5 ? true : false;
+  const [clusterFilter, setClusterFilter] = useState('');
   const history = useHistory();
   const [anchorEl, setAnchorEl] = useState(null);
 
@@ -130,6 +133,17 @@ export function ClusterDropdown({
     return null;
   }
 
+  const onClusterFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setClusterFilter(e.target.value);
+  };
+
+  let filteredOptions = options;
+  if (clusterFilter) {
+    filteredOptions = options.filter(cluster =>
+      cluster.label.toLowerCase().includes(clusterFilter.toLowerCase())
+    );
+  }
+
   return (
     <Flex textAlign="center" alignItems="center">
       <HoverTooltip tipContent={'Select cluster'}>
@@ -147,7 +161,11 @@ export function ClusterDropdown({
         </ButtonSecondary>
       </HoverTooltip>
       <Menu
-        popoverCss={() => `margin-top: 36px;`}
+        popoverCss={() => `
+          margin-top: ${showInput ? '40px' : '4px'}; 
+          max-height: 265px; 
+          overflow: hidden; 
+        `}
         transformOrigin={{
           vertical: 'top',
           horizontal: 'left',
@@ -160,20 +178,74 @@ export function ClusterDropdown({
         open={Boolean(anchorEl)}
         onClose={handleClose}
       >
-        {options.map(cluster => (
-          <MenuItem
-            px={2}
-            key={cluster.value}
-            onClick={() => onChangeOption(cluster.value)}
+        {showInput ? (
+          <Box
+            css={`
+              padding: ${p => p.theme.space[2]}px;
+            `}
           >
-            <Text ml={2} fontWeight={300} fontSize={2}>
-              {cluster.label}
-            </Text>
-          </MenuItem>
-        ))}
+            <ClusterFilter
+              type="text"
+              autoFocus
+              value={clusterFilter}
+              autoComplete="off"
+              onChange={onClusterFilterChange}
+              placeholder={'Search clusters…'}
+            />
+          </Box>
+        ) : (
+          // without this empty box, the entire positioning is way out of whack
+          // TODO (avatus): find out why during menu/popover rework
+          <Box />
+        )}
+        <Box
+          css={`
+            max-height: 220px;
+            overflow: auto;
+          `}
+        >
+          {filteredOptions.map(cluster => (
+            <MenuItem
+              px={2}
+              key={cluster.value}
+              onClick={() => onChangeOption(cluster.value)}
+            >
+              <Text
+                ml={2}
+                fontWeight={cluster.value === clusterId ? 500 : 300}
+                fontSize={2}
+              >
+                {cluster.label}
+              </Text>
+            </MenuItem>
+          ))}
+        </Box>
       </Menu>
     </Flex>
   );
 }
 
 type Option = { value: string; label: string };
+
+const ClusterFilter = styled.input(
+  ({ theme }) => `
+  background-color: ${theme.colors.spotBackground[0]};
+  padding-left: ${theme.space[3]}px;
+  width: 100%;
+  border-radius: 29px;
+  box-sizing: border-box;
+  color: ${theme.colors.text.main};
+  height: 32px;
+  font-size: ${theme.fontSizes[1]}px;
+  outline: none;
+  border: none;
+  &:focus {
+    border: none;
+  }
+
+  ::placeholder {
+    color: ${theme.colors.text.muted};
+    opacity: 1;
+  }
+`
+);