feat: add role assignment functionality with modal and trigger components

Author: bra-i-am

src/authz-module/libraries-manager/LibrariesUserManager.tsx

@@ -10,6 +10,7 @@ import { useLibrary, useTeamMembers } from '../data/hooks';
 import { buildPermissionsByRoleMatrix } from './utils';
 
 import messages from './messages';
+import AddNewMemberRoleTrigger from './components/AssignNewRoleTrigger';
 
 const LibrariesUserManager = () => {
   const intl = useIntl();
@@ -42,7 +43,13 @@ const LibrariesUserManager = () => {
         activeLabel={user?.username || ''}
         pageTitle={user?.username || ''}
         pageSubtitle={<p>{user?.email}</p>}
-        actions={[]}
+        actions={user
+          ? [<AddNewMemberRoleTrigger
+              username={user.username}
+              libraryId={libraryId}
+              currentUserRoles={userRoles.map(role => role.role)}
+          />]
+          : []}
       >
         <Container className="bg-light-200 p-5">
           {isLoading ? <Skeleton count={2} height={200} /> : null}

src/authz-module/libraries-manager/components/AssignNewRoleModal.tsx

@@ -0,0 +1,70 @@
+import { FC } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow, Button, Form, ModalDialog,
+} from '@openedx/paragon';
+import { Role } from 'types';
+import messages from './messages';
+
+interface AssignNewRoleModalProps {
+  isOpen: boolean;
+  isLoading: boolean;
+  roleOptions: Role[];
+  selectedRole: string;
+  close: () => void;
+  onSave: () => void;
+  handleChangeSelectedRole: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLSelectElement>) => void;
+}
+
+const AssignNewRoleModal: FC<AssignNewRoleModalProps> = ({
+  isOpen, isLoading, selectedRole, roleOptions, close, onSave, handleChangeSelectedRole,
+}) => {
+  const intl = useIntl();
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages['libraries.authz.manage.assign.new.role.title'])}
+      isOpen={isOpen}
+      onClose={isLoading ? () => {} : close}
+      size="lg"
+      variant="dark"
+      hasCloseButton
+      isOverflowVisible={false}
+      zIndex={5}
+    >
+      <ModalDialog.Header className="bg-primary-500 text-light-100">
+        <ModalDialog.Title>
+          {intl.formatMessage(messages['libraries.authz.manage.assign.new.role.title'])}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+
+      <ModalDialog.Body className="my-4">
+        <Form.Group controlId="role_options">
+          <Form.Label>{intl.formatMessage(messages['library.authz.team.table.roles'])}</Form.Label>
+          <Form.Control as="select" name="role" value={selectedRole} onChange={handleChangeSelectedRole}>
+            <option value="" disabled>Select a role</option>
+            {roleOptions.map((role) => <option key={role.role} value={role.role}>{role.name}</option>)}
+          </Form.Control>
+        </Form.Group>
+      </ModalDialog.Body>
+
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary" disabled={isLoading}>
+            {intl.formatMessage(messages['libraries.authz.manage.cancel.button'])}
+          </ModalDialog.CloseButton>
+          <Button
+            className="px-4"
+            onClick={() => onSave()}
+            disabled={!selectedRole || isLoading}
+          >
+            {isLoading
+              ? intl.formatMessage(messages['libraries.authz.manage.saving.button'])
+              : intl.formatMessage(messages['libraries.authz.manage.save.button'])}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default AssignNewRoleModal;

src/authz-module/libraries-manager/components/AssignNewRoleTrigger.tsx

@@ -0,0 +1,70 @@
+import React, { FC, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, useToggle } from '@openedx/paragon';
+import { Plus } from '@openedx/paragon/icons';
+
+import { useLibraryAuthZ } from '@src/authz-module/libraries-manager/context';
+import { useAssignTeamMembersRole } from 'authz-module/data/hooks';
+import messages from './messages';
+import AssignNewRoleModal from './AssignNewRoleModal';
+
+interface AssignNewRoleTriggerProps {
+  username: string;
+  libraryId: string;
+  currentUserRoles: string[];
+}
+
+const AssignNewRoleTrigger: FC<AssignNewRoleTriggerProps> = ({
+  username,
+  libraryId,
+  currentUserRoles,
+}) => {
+  const intl = useIntl();
+  const [isOpen, open, close] = useToggle(false);
+  const { roles } = useLibraryAuthZ();
+
+  const [newRole, setNewRole] = useState<string>('');
+
+  const { mutate: assignTeamMembersRole, isPending: isAssignTeamMembersRolePending } = useAssignTeamMembersRole();
+
+  const handleAddTeamMember = () => {
+    const data = {
+      users: [username],
+      role: newRole,
+      scope: libraryId,
+    };
+
+    assignTeamMembersRole({ data }, {
+      onSuccess: () => {
+        close();
+        setNewRole('');
+      },
+    });
+  };
+
+  return (
+    <>
+      <Button
+        key="authz-header-action-new-team-member"
+        iconBefore={Plus}
+        onClick={open}
+      >
+        {intl.formatMessage(messages['libraries.authz.manage.assign.new.role.title'])}
+      </Button>
+
+      {isOpen && (
+        <AssignNewRoleModal
+          isOpen={isOpen}
+          close={close}
+          onSave={handleAddTeamMember}
+          isLoading={isAssignTeamMembersRolePending}
+          roleOptions={roles.filter(role => !currentUserRoles.includes(role.role))}
+          selectedRole={newRole}
+          handleChangeSelectedRole={(e) => setNewRole(e.target.value)}
+        />
+      )}
+    </>
+  );
+};
+
+export default AssignNewRoleTrigger;

src/authz-module/libraries-manager/components/messages.ts

@@ -31,6 +31,26 @@ const messages = defineMessages({
     defaultMessage: 'Edit',
     description: 'Edit action',
   },
+  'libraries.authz.manage.assign.new.role.title': {
+    id: 'libraries.authz.manage.assign.new.role.title',
+    defaultMessage: 'Add New Role',
+    description: 'Libraries AuthZ assign a new role to a user button title',
+  },
+  'libraries.authz.manage.cancel.button': {
+    id: 'libraries.authz.manage.cancel.button',
+    defaultMessage: 'Cancel',
+    description: 'Libraries AuthZ cancel button title',
+  },
+  'libraries.authz.manage.saving.button': {
+    id: 'libraries.authz.manage.saving.button',
+    defaultMessage: 'Saving...',
+    description: 'Libraries AuthZ saving button title',
+  },
+  'libraries.authz.manage.save.button': {
+    id: 'libraries.authz.manage.save.button',
+    defaultMessage: 'Save',
+    description: 'Libraries AuthZ save button title',
+  },
 });
 
 export default messages;