Modify MultiSelection to include creatable options

ashley-o0o · Aug 28, 2024 · 7a1c960 · 7a1c960
1 parent c6d0fd5
commit 7a1c960
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 343 deletions.
diff --git a/frontend/src/__mocks__/mockConnectionType.ts b/frontend/src/__mocks__/mockConnectionType.ts
@@ -4,6 +4,7 @@ import {
   ConnectionTypeField,
 } from '~/concepts/connectionTypes/types';
 import { toConnectionTypeConfigMap } from '~/concepts/connectionTypes/utils';
+import { GroupsConfig } from '~/pages/groupSettings/groupTypes';
 
 type MockConnectionTypeConfigMap = {
   name?: string;
@@ -542,3 +543,10 @@ const mockFields: ConnectionTypeField[] = [
     },
   },
 ];
+
+export const categoryOptions = [
+  { id: 'object-storage', name: 'Object storage', selected: false },
+  { id: 'database', name: 'Database', selected: false },
+  { id: 'model-registry', name: 'Model registry', selected: false },
+  { id: 'uri', name: 'URI', selected: false },
+];
diff --git a/frontend/src/components/MultiSelection.tsx b/frontend/src/components/MultiSelection.tsx
@@ -42,6 +42,9 @@ type MultiSelectionProps = {
   selectionRequired?: boolean;
   noSelectedOptionsMessage?: string;
   toggleTestId?: string;
+  isCreatable?: boolean;
+  isCreateOptionOnTop?: boolean;
+  createOptionMessage?: string;
 };
 
 export const MultiSelection: React.FC<MultiSelectionProps> = ({
@@ -56,6 +59,9 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({
   toggleTestId,
   selectionRequired,
   noSelectedOptionsMessage = 'One or more options must be selected',
+  isCreatable = false,
+  isCreateOptionOnTop = false,
+  createOptionMessage = 'Create "{value}"',
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState<string>('');
@@ -84,6 +90,7 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({
       setInputValue('');
     }
   };
+
   const groupOptions = selectGroups.reduce<SelectionOptions[]>((acc, g) => {
     acc.push(...g.values);
     return acc;
@@ -156,9 +163,8 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({
       case 'Enter':
         if (isOpen && focusedItem) {
           onSelect(focusedItem);
-        }
-        if (!isOpen) {
-          setIsOpen(true);
+        } else if (isCreatable && inputValue.trim()) {
+          createOption(inputValue);
         }
         break;
       case 'Tab':
@@ -178,9 +184,11 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({
     setOpen(!isOpen);
     setTimeout(() => textInputRef.current?.focus(), 100);
   };
+
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, valueOfInput: string) => {
     setInputValue(valueOfInput);
   };
+
   const onSelect = (menuItem?: SelectionOptions) => {
     if (menuItem) {
       setValue(
@@ -192,6 +200,12 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({
     textInputRef.current?.focus();
   };
 
+  const createOption = (newOption: string) => {
+    const newSelection = { id: newOption, name: newOption, selected: true };
+    setValue([...allOptions, newSelection]);
+    setInputValue('');
+  };
+
   const noSelectedItems = allOptions.filter((option) => option.selected).length === 0;
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
@@ -267,6 +281,15 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({
         onOpenChange={() => setOpen(false)}
         toggle={toggle}
       >
+        {isCreatable && inputValue && !allOptions.some(option => option.name.toLowerCase() === inputValue.toLowerCase()) && (
+          <SelectOption
+            key="create-option"
+            value={inputValue}
+            onClick={() => createOption(inputValue)}
+          >
+            {createOptionMessage.replace('{value}', inputValue)}
+          </SelectOption>
+        )}
         {visibleOptions.length === 0 && inputValue ? (
           <SelectList isAriaMultiselectable>
             <SelectOption isDisabled>No results found</SelectOption>