feat: add Assign Role button and update messages for role assignment navigation

Author: bra-i-am

src/authz-module/authz-home/index.tsx

@@ -1,13 +1,15 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Tab, Tabs } from '@openedx/paragon';
-import { useLocation } from 'react-router-dom';
+import { Button, Tab, Tabs } from '@openedx/paragon';
+import { Plus } from '@openedx/paragon/icons';
+import { useLocation, useNavigate } from 'react-router-dom';
 import RolesPermissions from '../roles-permissions/RolesPermissions';
 import AuthZLayout from '../components/AuthZLayout';
 
 import messages from './messages';
 
 const AuthzHome = () => {
   const { hash } = useLocation();
+  const navigate = useNavigate();
   const intl = useIntl();
 
   const rootBreadcrumb = intl.formatMessage(messages['authz.breadcrumb.root']) || '';
@@ -21,13 +23,16 @@ const AuthzHome = () => {
         activeLabel={pageTitle}
         pageTitle={pageTitle}
         pageSubtitle=""
-        actions={
-          []
-          // this needs to be enable again once is refactored to be used outside of library context
-          // [
-          //   <AddNewTeamMemberTrigger libraryId="" key="add-new-member" />,
-          // ]
-        }
+        actions={[
+          <Button
+            iconBefore={Plus}
+            variant="primary"
+            onClick={() => navigate('/authz/assign-role')}
+            key="assign-role"
+          >
+            {intl.formatMessage(messages['authz.manage.assign.role.button'])}
+          </Button>,
+        ]}
       >
         <Tabs
           variant="tabs"

src/authz-module/authz-home/messages.ts

@@ -21,6 +21,11 @@ const messages = defineMessages({
     defaultMessage: 'Roles and Permissions',
     description: 'Libraries AuthZ title for the roles tab',
   },
+  'authz.manage.assign.role.button': {
+    id: 'authz.manage.assign.role.button',
+    defaultMessage: 'Assign Role',
+    description: 'Button to navigate to the assign role wizard',
+  },
 });
 
 export default messages;

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

@@ -1,12 +1,11 @@
 import { useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Container, Skeleton, Tab, Tabs, Button,
+  Container, Skeleton, Tab, Tabs,
 } from '@openedx/paragon';
 import { useLibrary } from '@src/authz-module/data/hooks';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { ROUTES } from '@src/authz-module/constants';
-import { Plus } from '@openedx/paragon/icons';
 import TeamTable from './components/TeamTable';
 import AuthZLayout from '../components/AuthZLayout';
 import RoleCard from '../components/RoleCard';
@@ -19,20 +18,14 @@ import messages from './messages';
 const LibrariesTeamManager = () => {
   const intl = useIntl();
   const { hash } = useLocation();
-  const navigate = useNavigate();
   const {
-    libraryId, canManageTeam, roles, permissions, resources,
+    libraryId, roles, permissions, resources,
   } = useLibraryAuthZ();
   const { data: library } = useLibrary(libraryId);
   const rootBreadcrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
   const pageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
   const teamMembersPath = `/authz${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', libraryId)}`;
 
-  // Handler to navigate to Assign Role Wizard
-  const handleNavigateToWizard = () => {
-    navigate(`/authz/assign-role?scope=${libraryId}`);
-  };
-
   const [libraryPermissionsByRole, libraryPermissionsByResource] = useMemo(() => {
     if (!roles && !permissions && !resources) { return [null, null]; }
     const permissionsByRole = buildPermissionMatrixByRole({
@@ -55,20 +48,7 @@ const LibrariesTeamManager = () => {
         activeLabel={pageTitle}
         pageTitle={pageTitle}
         pageSubtitle={libraryId}
-        actions={
-          canManageTeam
-            ? [
-              <Button
-                iconBefore={Plus}
-                variant="primary"
-                onClick={handleNavigateToWizard}
-                key="add-new-role"
-              >
-                {intl.formatMessage(messages['library.authz.manage.add.role.button'])}
-              </Button>,
-            ]
-            : []
-        }
+        actions={[]}
       >
         <Tabs
           variant="tabs"

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

@@ -4,7 +4,7 @@ import { Button, useToggle } from '@openedx/paragon';
 import { Plus } from '@openedx/paragon/icons';
 
 import { PutAssignTeamMembersRoleResponse } from 'authz-module/data/api';
-import { useAssignTeamMembersRole, useValidateUsers } from '@src/authz-module/data/hooks';
+import { useAssignTeamMembersRole } from '@src/authz-module/data/hooks';
 import { RoleOperationErrorStatus } from '@src/authz-module/constants';
 import { AppToast, useToastManager } from '@src/authz-module/libraries-manager/ToastManagerContext';
 import { DEFAULT_TOAST_DELAY } from '@src/authz-module/libraries-manager/constants';
@@ -28,9 +28,7 @@ const AddNewTeamMemberTrigger = ({ libraryId }: AddNewTeamMemberTriggerProps) =>
   const [isError, setIsError] = useState(false);
   const [errorUsers, setErrorUsers] = useState<string[]>([]);
 
-  const { mutate: assignTeamMembersRole, isPending: isAssigning } = useAssignTeamMembersRole();
-  const { mutateAsync: validateUsersAsync, isPending: isValidating } = useValidateUsers();
-  const isPending = isAssigning || isValidating;
+  const { mutate: assignTeamMembersRole, isPending } = useAssignTeamMembersRole();
   const {
     showToast, showErrorToast, Bold, Br,
   } = useToastManager();
@@ -130,34 +128,14 @@ const AddNewTeamMemberTrigger = ({ libraryId }: AddNewTeamMemberTriggerProps) =>
     };
   };
 
-  const handleAddTeamMember = async () => {
+  const handleAddTeamMember = () => {
     const normalizedUsers = [...new Set(
       formValues.users
         .split(',')
         .map((u) => u.trim())
         .filter(Boolean),
     )];
 
-    const { invalidUsers } = await validateUsersAsync({ data: { users: normalizedUsers } })
-      .catch(() => ({ invalidUsers: [] }));
-
-    if (invalidUsers.length > 0) {
-      const notFoundMessage = intl.formatMessage(
-        messages['libraries.authz.manage.add.member.failure.not.found'],
-        {
-          count: invalidUsers.length,
-          userIds: invalidUsers.join(', '),
-          Bold,
-          Br,
-        },
-      );
-      showToast({ message: notFoundMessage, type: 'error', delay: DEFAULT_TOAST_DELAY });
-      setErrorUsers(invalidUsers);
-      setIsError(true);
-      setFormValues((prev) => ({ ...prev, users: invalidUsers.join(', ') }));
-      return;
-    }
-
     if (normalizedUsers.length === 0) { return; }
 
     const payload = {

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

@@ -11,11 +11,6 @@ const messages = defineMessages({
     defaultMessage: 'Manage Access',
     description: 'Libreries AuthZ root breafcrumb',
   },
-  'library.authz.manage.add.role.button': {
-    id: 'library.authz.manage.add.role.button',
-    defaultMessage: 'Assign Role',
-    description: 'Button to add a new role',
-  },
   'library.authz.tabs.team': {
     id: 'library.authz.tabs.team',
     defaultMessage: 'Team Members',