Add a multi-value input component

api/proto/teleport/legacy/types/types.proto

@@ -3319,8 +3319,9 @@ message DatabasePermission {
 
 // KubernetesResource is the Kubernetes resource identifier.
 message KubernetesResource {
-  // Kind specifies the Kubernetes Resource type.
-  // At the moment only "pod" is supported.
+  // Kind specifies the Kubernetes Resource type. See
+  // `KubernetesResourcesKinds` in `api/types/constants.go` for the list of
+  // supported values.
   string Kind = 1 [(gogoproto.jsontag) = "kind,omitempty"];
   // Namespace is the resource namespace.
   // It supports wildcards.

api/types/constants.go

@@ -1270,7 +1270,14 @@ var RequestableResourceKinds = []string{
 	KindSAMLIdPServiceProvider,
 }
 
-// KubernetesResourcesKinds lists the supported Kubernetes resource kinds.
+// The list below needs to be kept in sync with `kubernetesResourceKindOptions`
+// in `web/packages/teleport/src/Roles/RoleEditor/standardmodel.ts`. (Keeping
+// this comment separate to prevent it from being included in the official
+// package docs.)
+
+// KubernetesResourcesKinds lists the supported Kubernetes resource kinds. This
+// is for the latest version of Role resources; roles whose version is set to
+// v6 or prior only support [KindKubePod].
 var KubernetesResourcesKinds = []string{
 	KindKubePod,
 	KindKubeSecret,
@@ -1318,6 +1325,11 @@ const (
 	KubeVerbPortForward = "portforward"
 )
 
+// The list below needs to be kept in sync with `kubernetesResourceVerbOptions`
+// in `web/packages/teleport/src/Roles/RoleEditor/standardmodel.ts`. (Keeping
+// this comment separate to prevent it from being included in the official
+// package docs.)
+
 // KubernetesVerbs lists the supported Kubernetes verbs.
 var KubernetesVerbs = []string{
 	Wildcard,

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

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { FieldMultiInput } from './FieldMultiInput';
+import Box from 'design/Box';
+
+export default {
+  title: 'Shared',
+};
+
+export function Story() {
+  const [items, setItems] = useState([]);
+  return (
+    <Box width="500px">
+      <FieldMultiInput label="Some items" value={items} onChange={setItems} />
+    </Box>
+  );
+}
+Story.storyName = 'FieldMultiInput';

web/packages/shared/components/FieldMultiInput/FieldMultiInput.test.tsx

@@ -0,0 +1,51 @@
+import userEvent from '@testing-library/user-event';
+import React, { useState } from 'react';
+import { FieldMultiInput, FieldMultiInputProps } from './FieldMultiInput';
+import { render, screen } from 'design/utils/testing';
+
+const TestFieldMultiInput = ({
+  onChange,
+  ...rest
+}: Partial<FieldMultiInputProps>) => {
+  const [items, setItems] = useState<string[]>([]);
+  const handleChange = (it: string[]) => {
+    setItems(it);
+    onChange?.(it);
+  };
+  return <FieldMultiInput value={items} onChange={handleChange} {...rest} />;
+};
+
+test('adding, editing, and removing items', async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+  render(<TestFieldMultiInput onChange={onChange} />);
+
+  await user.type(screen.getByRole('textbox'), 'apples');
+  expect(onChange).toHaveBeenLastCalledWith(['apples']);
+
+  await user.click(screen.getByRole('button', { name: 'Add More' }));
+  expect(onChange).toHaveBeenLastCalledWith(['apples', '']);
+
+  await user.type(screen.getAllByRole('textbox')[1], 'oranges');
+  expect(onChange).toHaveBeenLastCalledWith(['apples', 'oranges']);
+
+  await user.click(screen.getAllByRole('button', { name: 'Remove Item' })[0]);
+  expect(onChange).toHaveBeenLastCalledWith(['oranges']);
+
+  await user.click(screen.getAllByRole('button', { name: 'Remove Item' })[0]);
+  expect(onChange).toHaveBeenLastCalledWith([]);
+});
+
+test('keyboard handling', async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+  render(<TestFieldMultiInput onChange={onChange} />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.keyboard('apples{Enter}oranges');
+  expect(onChange).toHaveBeenLastCalledWith(['apples', 'oranges']);
+
+  await user.click(screen.getAllByRole('textbox')[0]);
+  await user.keyboard('{Enter}bananas');
+  expect(onChange).toHaveBeenLastCalledWith(['apples', 'bananas', 'oranges']);
+});

web/packages/shared/components/FieldMultiInput/FieldMultiInput.tsx

@@ -0,0 +1,121 @@
+import Box from 'design/Box';
+import { ButtonSecondary } from 'design/Button';
+import ButtonIcon from 'design/ButtonIcon';
+import Flex from 'design/Flex';
+import * as Icon from 'design/Icon';
+import Input from 'design/Input';
+import { useEffect, useRef, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
+
+export type FieldMultiInputProps = {
+  label?: string;
+  value: string[];
+  disabled?: boolean;
+  onChange?(val: string[]): void;
+};
+
+/**
+ * Allows editing a list of strings, one value per row. Use instead of
+ * `FieldSelectCreatable` when:
+ *
+ * - There are no predefined values to be picked from.
+ * - Values are expected to be relatively long and would be unreadable after
+ *   being truncated.
+ */
+export function FieldMultiInput({
+  label,
+  value,
+  disabled,
+  onChange,
+}: FieldMultiInputProps) {
+  if (value.length === 0) {
+    value = [''];
+  }
+
+  const theme = useTheme();
+  // Index of the input to be focused after the next rendering.
+  const toFocus = useRef<number | undefined>();
+
+  const setFocus = element => {
+    element?.focus();
+    toFocus.current = undefined;
+  };
+
+  function insertItem(index: number) {
+    onChange?.(value.toSpliced(index, 0, ''));
+  }
+
+  function removeItem(index: number) {
+    onChange?.(value.toSpliced(index, 1));
+  }
+
+  function handleKeyDown(index: number, e: React.KeyboardEvent) {
+    if (e.key === 'Enter') {
+      insertItem(index + 1);
+      toFocus.current = index + 1;
+    }
+  }
+
+  return (
+    <Box>
+      <Fieldset>
+        {label && <Legend>{label}</Legend>}
+        {value.map((val, i) => (
+          // Note on keys: using index as a key is an anti-pattern in general,
+          // but here, we can safely assume that even though the list is
+          // editable, we don't rely on any unmanaged HTML element state other
+          // than focus, which we deal with separately anyway. The alternatives
+          // would be either to require an array with keys generated
+          // synthetically and injected from outside (which would make the API
+          // difficult to use) or to keep the array with generated IDs as local
+          // state (which would require us to write a prop/state reconciliation
+          // procedure whose complexity would probably outweigh the benefits).
+          <Flex key={i} alignItems="center" gap={2}>
+            <Box flex="1">
+              <Input
+                value={val}
+                ref={toFocus.current === i ? setFocus : null}
+                onChange={e =>
+                  onChange?.(
+                    value.map((v, j) => (j === i ? e.target.value : v))
+                  )
+                }
+                onKeyDown={e => handleKeyDown(i, e)}
+              />
+            </Box>
+            <ButtonIcon
+              size="0"
+              title="Remove Item"
+              onClick={() => removeItem(i)}
+              disabled={disabled}
+            >
+              <Icon.Cross size="small" color={theme.colors.text.muted} />
+            </ButtonIcon>
+          </Flex>
+        ))}
+        <ButtonSecondary
+          alignSelf="start"
+          onClick={() => insertItem(value.length)}
+        >
+          <Icon.Plus size="small" mr={2} />
+          Add More
+        </ButtonSecondary>
+      </Fieldset>
+    </Box>
+  );
+}
+
+const Fieldset = styled.fieldset`
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${props => props.theme.space[2]}px;
+`;
+
+const Legend = styled.legend`
+  margin: 0 0 ${props => props.theme.space[1]}px 0;
+  padding: 0;
+  ${props => props.theme.typography.body3}
+`;