Multi select for permissions in user profile

assets/js/lib/forms/index.jsx

@@ -18,3 +18,10 @@ export const REQUIRED_FIELD_TEXT = 'Required field';
 export const errorMessage = (message) => (
   <p className="text-red-500 mt-1">{capitalize(message)}</p>
 );
+
+export const mapAbilities = (abilities) =>
+  abilities.map(({ id, name, resource, label }) => ({
+    value: id,
+    label: `${name}:${resource}`,
+    tooltip: label,
+  }));

assets/js/pages/Profile/ProfileForm.jsx

@@ -5,8 +5,9 @@ import Button from '@common/Button';
 import Input from '@common/Input';
 import Label from '@common/Label';
 import Modal from '@common/Modal';
+import MultiSelect from '@common/MultiSelect';
 import ProfilePasswordChangeForm from '@pages/Profile/ProfilePasswordChangeForm';
-import { REQUIRED_FIELD_TEXT, errorMessage } from '@lib/forms';
+import { REQUIRED_FIELD_TEXT, errorMessage, mapAbilities } from '@lib/forms';
 
 function ProfileForm({
   fullName = '',
@@ -58,10 +59,6 @@ function ProfileForm({
     setEmailAddressError(getError('email', errors));
   }, [errors]);
 
-  const formattedAbilities = abilities
-    .map(({ name, resource }) => `${resource}:${name}`)
-    .join(' ');
-
   return (
     <div>
       <div className="container max-w-7xl mx-auto p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-800 rounded-lg">
@@ -110,10 +107,11 @@ function ProfileForm({
           </div>
           <Label className="col-start-1 col-span-1">Permissions</Label>
           <div className="col-start-2 col-span-3">
-            <Input
-              value={formattedAbilities}
+            <MultiSelect
               aria-label="permissions"
-              disabled
+              values={mapAbilities(abilities)}
+              isDisabled
+              options={mapAbilities(abilities)}
             />
           </div>
         </div>

assets/js/pages/Profile/ProfileForm.test.jsx

@@ -31,9 +31,9 @@ describe('ProfileForm', () => {
     expect(screen.getByText('Username')).toBeVisible();
     expect(screen.getByLabelText('username').value).toBe(username);
     expect(screen.getByText('Permissions')).toBeVisible();
-    expect(screen.getByLabelText('permissions').value).toBe(
-      abilities.map(({ name, resource }) => `${resource}:${name}`).join(' ')
-    );
+    abilities.forEach(({ resource, name }) => {
+      expect(screen.getByText(`${name}:${resource}`)).toBeVisible();
+    });
     expect(screen.getByText('Change Password')).toBeVisible();
     expect(screen.getByText('Save')).toBeVisible();
   });

assets/js/pages/Users/UserForm.jsx

@@ -13,6 +13,7 @@ import {
   PASSWORD_PLACEHOLDER,
   REQUIRED_FIELD_TEXT,
   errorMessage,
+  mapAbilities,
 } from '@lib/forms';
 import { getError } from '@lib/api/validationErrors';
 
@@ -23,13 +24,6 @@ const USER_ENABLED = 'Enabled';
 const defaultAbilities = [];
 const defaultErrors = [];
 
-const mapAbilities = (abilities) =>
-  abilities.map(({ id, name, resource, label }) => ({
-    value: id,
-    label: `${name}:${resource}`,
-    tooltip: label,
-  }));
-
 function UserForm({
   fullName = '',
   emailAddress = '',