Update autocomplete with multi-select.

nebari-dev · Apr 4, 2024 · 98219b7 · 98219b7
1 parent 5bb33de
commit 98219b7
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/ui/src/components/app-sharing/app-sharing.tsx b/ui/src/components/app-sharing/app-sharing.tsx
@@ -56,22 +56,23 @@ export const AppSharing = ({
   const [availablePermissions, setAvailablePermissions] = useState<
     AppSharingItem[]
   >([]);
-  const [currentShare, setCurrentShare] = useState('');
+  const [currentShare, setCurrentShare] = useState<AppSharingItem[]>([]);
   const [currentItems, setCurrentItems] = useState<AppSharingItem[]>([]);
 
   const handleShare = () => {
-    const currentShareName = currentShare.split(' ')[0];
-    if (currentShareName) {
-      const isGroup = currentShare.split(' ').length > 1;
-      setCurrentItems((prev) => [
-        ...prev,
-        { name: currentShareName, type: isGroup ? 'group' : 'user' },
-      ]);
-      if (isGroup) {
-        setCurrentGroupPermissions((prev) => [...prev, currentShareName]);
-      } else {
-        setCurrentUserPermissions((prev) => [...prev, currentShareName]);
-      }
+    if (currentShare.length > 0) {
+      const allItems = [...new Set([...currentItems, ...currentShare])];
+      setCurrentItems(allItems);
+      setCurrentGroupPermissions(() =>
+        allItems
+          .filter((item) => item.type === 'group')
+          .map((item) => item.name),
+      );
+      setCurrentUserPermissions(() =>
+        allItems
+          .filter((item) => item.type === 'user')
+          .map((item) => item.name),
+      );
     }
   };
 
@@ -156,14 +157,17 @@ export const AppSharing = ({
                     ? option.name
                     : `${option.name} (Group)`
                 }
+                multiple
+                disableCloseOnSelect
+                limitTags={2}
                 sx={{ width: 470 }}
                 renderInput={(params) => (
                   <TextField
                     {...params}
                     placeholder="Search one or more usernames or group names"
                   />
                 )}
-                onInputChange={(event, value) => {
+                onChange={(event, value) => {
                   if (event && value) {
                     setCurrentShare(value);
                   }
@@ -182,6 +186,7 @@ export const AppSharing = ({
                 color="primary"
                 onClick={handleShare}
                 disabled={!currentShare}
+                sx={{ height: '56px' }}
               >
                 Share
               </Button>