refactor: improve error handling & address PR feedback

Author: bra-i-am

src/authz-module/data/api.ts

@@ -13,12 +13,12 @@ export type PermissionsByRole = {
   permissions: string[];
   userCount: number;
 };
-export interface PutTeamMembersResponse {
+export interface PutAssignTeamMembersRoleResponse {
   completed: { user: string; status: string }[];
-  errors: { user: string; error: string }[];
+  errors: { userIdentifier: string; error: string }[];
 }
 
-export interface AddTeamMembersRequest {
+export interface AssignTeamMembersRoleRequest {
   users: string[];
   role: string;
   scope: string;
@@ -30,10 +30,10 @@ export const getTeamMembers = async (object: string): Promise<TeamMember[]> => {
   return camelCaseObject(data.results);
 };
 
-export const addTeamMembers = async (
-  data: AddTeamMembersRequest,
-): Promise<PutTeamMembersResponse> => {
-  const res = await getAuthenticatedHttpClient().put(getApiUrl('/api/authz/v1/roles/users'), data);
+export const assignTeamMembersRole = async (
+  data: AssignTeamMembersRoleRequest,
+): Promise<PutAssignTeamMembersRoleResponse> => {
+  const res = await getAuthenticatedHttpClient().put(getApiUrl('/api/authz/v1/roles/users/'), data);
   return camelCaseObject(res.data);
 };
 

src/authz-module/data/hooks.ts

@@ -4,7 +4,9 @@ import {
 import { appId } from '@src/constants';
 import { LibraryMetadata, TeamMember } from '@src/types';
 import {
-  addTeamMembers, AddTeamMembersRequest, getLibrary, getPermissionsByRole, getTeamMembers, PermissionsByRole,
+  assignTeamMembersRole,
+  AssignTeamMembersRoleRequest,
+  getLibrary, getPermissionsByRole, getTeamMembers, PermissionsByRole,
 } from './api';
 
 const authzQueryKeys = {
@@ -68,17 +70,15 @@ export const useLibrary = (libraryId: string) => useSuspenseQuery<LibraryMetadat
  * It provides a mutation function to add users with specified roles to the library's team.
  *
  * @example
- * ```tsx
- * const { mutate: addTeamMember, isPending } = useAddTeamMember();
- * addTeamMember({ data: { libraryId: 'lib:123', users: ['jdoe'], role: 'editor' } });
- * ```
+ * const { mutate: assignTeamMembersRole } = useAssignTeamMembersRole();
+ * assignTeamMembersRole({ data: { libraryId: 'lib:123', users: ['jdoe'], role: 'editor' } });
  */
-export const useAddTeamMember = () => {
+export const useAssignTeamMembersRole = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({ data }: {
-      data: AddTeamMembersRequest
-    }) => addTeamMembers(data),
+      data: AssignTeamMembersRoleRequest
+    }) => assignTeamMembersRole(data),
     onSettled: (_data, _error, { data: { scope } }) => {
       queryClient.invalidateQueries({ queryKey: authzQueryKeys.teamMembers(scope) });
     },

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

@@ -1,14 +1,17 @@
 import { FC } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  ActionRow, Button, Form, ModalDialog,
+  ActionRow, Form, Icon, ModalDialog,
   Stack,
+  StatefulButton,
 } from '@openedx/paragon';
 import { useLibraryAuthZ } from '@src/authz-module/libraries-manager/context';
+import { SpinnerSimple } from '@openedx/paragon/icons';
 import messages from './messages';
 
 interface AddNewTeamMemberModalProps {
   isOpen: boolean;
+  isError: boolean;
   isLoading: boolean;
   formValues: {
     users: string;
@@ -20,7 +23,7 @@ interface AddNewTeamMemberModalProps {
 }
 
 const AddNewTeamMemberModal: FC<AddNewTeamMemberModalProps> = ({
-  isOpen, isLoading, formValues, close, onSave, handleChangeForm,
+  isOpen, isError, isLoading, formValues, close, onSave, handleChangeForm,
 }) => {
   const intl = useIntl();
   const { roles } = useLibraryAuthZ();
@@ -50,19 +53,23 @@ const AddNewTeamMemberModal: FC<AddNewTeamMemberModalProps> = ({
           <Form.Group controlId="users_list">
             <Form.Label>{intl.formatMessage(messages['libraries.authz.manage.add.member.users.label'])}</Form.Label>
             <Form.Control
+              isInvalid={isError}
               as="textarea"
               name="users"
               rows="3"
               value={formValues.users}
               onChange={(e) => handleChangeForm(e)}
+              style={{ color: isError && 'var(--pgn-color-form-feedback-invalid)' }}
             />
           </Form.Group>
 
           <Form.Group controlId="role_options">
             <Form.Label>{intl.formatMessage(messages['libraries.authz.manage.add.member.roles.label'])}</Form.Label>
             <Form.Control as="select" name="role" value={formValues.role} onChange={(e) => handleChangeForm(e)}>
-              <option value="" disabled>Select a role</option>
-              {roles.map(({ role }) => <option key={role}>{role}</option>)}
+              <option value="" disabled>
+                {intl.formatMessage(messages['libraries.authz.manage.add.member.select.default'])}
+              </option>
+              {roles.map((role) => <option key={role.role} value={role.role}>{role.name}</option>)}
             </Form.Control>
           </Form.Group>
         </Stack>
@@ -71,17 +78,22 @@ const AddNewTeamMemberModal: FC<AddNewTeamMemberModalProps> = ({
       <ModalDialog.Footer>
         <ActionRow>
           <ModalDialog.CloseButton variant="tertiary" disabled={isLoading}>
-            {intl.formatMessage(messages['libraries.authz.manage.add.member.cancel.button'])}
+            {intl.formatMessage(messages['libraries.authz.manage.cancel.button'])}
           </ModalDialog.CloseButton>
-          <Button
+          <StatefulButton
             className="px-4"
+            labels={{
+              default: intl.formatMessage(messages['libraries.authz.manage.save.button']),
+              pending: intl.formatMessage(messages['libraries.authz.manage.saving.button']),
+            }}
+            icons={{
+              pending: <Icon src={SpinnerSimple} />,
+            }}
+            state={isLoading ? 'pending' : 'default'}
             onClick={() => onSave()}
-            disabled={!formValues.users || !formValues.role || isLoading}
-          >
-            {isLoading
-              ? intl.formatMessage(messages['libraries.authz.manage.add.member.saving.button'])
-              : intl.formatMessage(messages['libraries.authz.manage.add.member.save.button'])}
-          </Button>
+            disabledStates={['pending']}
+            disabled={!formValues.users || !formValues.role}
+          />
         </ActionRow>
       </ModalDialog.Footer>
     </ModalDialog>

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

@@ -3,7 +3,8 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Toast, useToggle } from '@openedx/paragon';
 import { Plus } from '@openedx/paragon/icons';
 
-import { useAddTeamMember } from '@src/authz-module/data/hooks';
+import { useAssignTeamMembersRole } from '@src/authz-module/data/hooks';
+import { PutAssignTeamMembersRoleResponse } from 'authz-module/data/api';
 import AddNewTeamMemberModal from './AddNewTeamMemberModal';
 import messages from './messages';
 
@@ -23,8 +24,9 @@ const AddNewTeamMemberTrigger: FC<AddNewTeamMemberTriggerProps> = ({
   const [isOpen, open, close] = useToggle(false);
   const [additionMessage, setAdditionMessage] = useState<string | null>(null);
   const [formValues, setFormValues] = useState(DEFAULT_FORM_VALUES);
+  const [isError, setIsError] = useState(false);
 
-  const { mutate: addTeamMember, isPending: isAddingNewTeamMember } = useAddTeamMember();
+  const { mutate: assignTeamMembersRole, isPending: isAssignTeamMembersRolePending } = useAssignTeamMembersRole();
 
   const handleChangeForm = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLSelectElement>) => {
     const { name, value } = e.target;
@@ -34,15 +36,40 @@ const AddNewTeamMemberTrigger: FC<AddNewTeamMemberTriggerProps> = ({
     }));
   };
 
+  const handleErrors = (errors: PutAssignTeamMembersRoleResponse['errors']) => {
+    setIsError(false);
+    const notFoundUsers = errors.filter(err => err.error === 'user_not_found').map(err => err.userIdentifier);
+
+    if (notFoundUsers.length) {
+      setIsError(true);
+      setFormValues((prev) => ({
+        ...prev,
+        users: prev.users
+          .split(',')
+          .map(user => user.trim())
+          .filter(user => notFoundUsers.includes(user))
+          .join(', '),
+      }));
+      setAdditionMessage((prevMessage) => (
+        `${prevMessage ? `${prevMessage} ` : ''}${intl.formatMessage(
+          messages['libraries.authz.manage.add.member.failure'],
+          { count: notFoundUsers.length },
+        )}`
+      ));
+    }
+  };
+
   const handleAddTeamMember = () => {
     const data = {
       users: formValues.users.split(',').map(user => user.trim()),
       role: formValues.role,
       scope: libraryId,
     };
 
-    addTeamMember({ data }, {
+    assignTeamMembersRole({ data }, {
       onSuccess: (successData) => {
+        setAdditionMessage(null);
+
         if (successData.completed.length) {
           setAdditionMessage(
             intl.formatMessage(
@@ -53,13 +80,9 @@ const AddNewTeamMemberTrigger: FC<AddNewTeamMemberTriggerProps> = ({
         }
 
         if (successData.errors.length) {
-          setAdditionMessage((prevMessage) => (
-            `${prevMessage ? `${prevMessage} ` : ''}${intl.formatMessage(
-              messages['libraries.authz.manage.add.member.failure'],
-              { count: successData.errors.length },
-            )}`
-          ));
+          handleErrors(successData.errors);
         } else {
+          setIsError(false);
           close();
           setFormValues(DEFAULT_FORM_VALUES);
         }
@@ -80,9 +103,10 @@ const AddNewTeamMemberTrigger: FC<AddNewTeamMemberTriggerProps> = ({
       {isOpen && (
         <AddNewTeamMemberModal
           isOpen={isOpen}
+          isError={isError}
           close={close}
           onSave={handleAddTeamMember}
-          isLoading={isAddingNewTeamMember}
+          isLoading={isAssignTeamMembersRolePending}
           formValues={formValues}
           handleChangeForm={handleChangeForm}
         />

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

@@ -46,20 +46,30 @@ const messages = defineMessages({
     defaultMessage: 'Roles',
     description: 'Label for the roles select field in the add new team member modal',
   },
-  'libraries.authz.manage.add.member.cancel.button': {
-    id: 'libraries.authz.manage.add.member.cancel.button',
-    defaultMessage: 'Cancel',
-    description: 'Label for the cancel button in the add new team member modal',
+  'libraries.authz.manage.add.member.invalid.users': {
+    id: 'libraries.authz.manage.add.member.invalid.users',
+    defaultMessage: 'The following users could not be found:',
+    description: 'Error message for invalid users in the add new team member modal',
   },
-  'libraries.authz.manage.add.member.save.button': {
-    id: 'libraries.authz.manage.add.member.save.button',
-    defaultMessage: 'Save',
-    description: 'Label for the save button in the add new team member modal',
+  'libraries.authz.manage.add.member.select.default': {
+    id: 'libraries.authz.manage.add.member.select.default',
+    defaultMessage: 'Select a role',
+    description: 'Default option for the roles select field in the add new team member modal',
+  },
+  'libraries.authz.manage.cancel.button': {
+    id: 'libraries.authz.manage.cancel.button',
+    defaultMessage: 'Cancel',
+    description: 'Libraries AuthZ cancel button title',
   },
-  'libraries.authz.manage.add.member.saving.button': {
-    id: 'libraries.authz.manage.add.member.saving.button',
+  'libraries.authz.manage.saving.button': {
+    id: 'libraries.authz.manage.saving.button',
     defaultMessage: 'Saving...',
-    description: 'Label for the save button in the add new team member modal when 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',
   },
   'libraries.authz.manage.add.member.description': {
     id: 'libraries.authz.manage.add.member.description',
@@ -73,7 +83,7 @@ const messages = defineMessages({
   },
   'libraries.authz.manage.add.member.failure': {
     id: 'libraries.authz.manage.add.member.failure',
-    defaultMessage: 'We couldn\'t find a user for {count, plural, one {# email address or username.} other {# email addresses or usernames.}} Please check the email and try again, or invite them to join your organization first.',
+    defaultMessage: 'We couldn\'t find a user for {count, plural, one {# email address or username.} other {# email addresses or usernames.}} Please check the values and try again, or invite them to join your organization first.',
     description: 'Error message when adding new team members',
   },
 });