feat(authz): enhance role assignment wizard with improved scope handling and UI updates

Author: bra-i-am

src/authz-module/data/hooks.ts

@@ -173,13 +173,13 @@ export const useAllRoleAssignments = (querySettings: QuerySettings) => {
  * Results are cached for 30 minutes — suitable for both filter dropdowns and full listings.
  *
  * @param search - Optional text filter applied to organization names.
- * @param page - Page number to fetch (1-based). Omit to fetch the first page.
- * @param pageSize - Number of items per page. Omit to use the API default.
+ * @param page - 1-based page number; defaults to the first page when omitted.
+ * @param pageSize - Items per page; defaults to the API default when omitted.
  * @returns A `QueryResult<GetOrgsResponse>` with `results`, `count`, `next`, and `previous`.
  *
  * @example
  * ```tsx
- * const { data } = useOrgs({ search: 'edX' });
+ * const { data } = useOrgs('edX');
  * const orgs = data?.results ?? [];
  * ```
  */
@@ -223,6 +223,7 @@ export const useScopes = (params: Omit<GetScopesParams, 'page'> = {}) => useInfi
   },
   initialPageParam: 1,
   staleTime: 1000 * 60 * 5,
+  refetchOnWindowFocus: false,
 });
 
 /*

src/authz-module/index.scss

@@ -127,6 +127,10 @@
   max-height: 500px;
 }
 
+.scope-search-input {
+  width: 18.75rem; // 300px
+}
+
 .toast-container {
   // Ensure toast appears above modal
   z-index: 1000;

src/authz-module/role-assignation-wizard/AssignRoleWizard.test.tsx

@@ -103,7 +103,7 @@ describe('AssignRoleWizard — Step 1', () => {
     await user.click(getNextButton());
     await waitFor(() => {
       expect(screen.getByText(/not associated with an account/i)).toBeInTheDocument();
-      expect(screen.queryByTestId('toggle-scope')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('toggle-scope-*')).not.toBeInTheDocument();
     });
   });
 
@@ -115,7 +115,7 @@ describe('AssignRoleWizard — Step 1', () => {
     await user.click(getRoleRadio(/Library Admin/i));
     await user.click(getNextButton());
     await waitFor(() => {
-      expect(screen.getByTestId('toggle-scope')).toBeInTheDocument();
+      expect(screen.getByTestId('toggle-scope-*')).toBeInTheDocument();
     });
   });
 
@@ -128,7 +128,7 @@ describe('AssignRoleWizard — Step 1', () => {
     await user.click(getNextButton());
     await waitFor(() => {
       expect(screen.getByRole('alert')).toBeInTheDocument();
-      expect(screen.queryByTestId('toggle-scope')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('toggle-scope-*')).not.toBeInTheDocument();
     });
   });
 
@@ -156,7 +156,7 @@ describe('AssignRoleWizard — Step 1', () => {
     await waitFor(() => expect(screen.getByRole('alert')).toBeInTheDocument());
     await user.click(screen.getByRole('button', { name: /retry/i }));
     await waitFor(() => {
-      expect(screen.getByTestId('toggle-scope')).toBeInTheDocument();
+      expect(screen.getByTestId('toggle-scope-*')).toBeInTheDocument();
     });
   });
 });
@@ -168,7 +168,7 @@ describe('AssignRoleWizard — Step 2', () => {
     await user.click(getRoleRadio(/Library Admin/i));
     await user.click(getNextButton());
     await waitFor(() => {
-      expect(screen.getByTestId('toggle-scope')).toBeInTheDocument();
+      expect(screen.getByTestId('toggle-scope-*')).toBeInTheDocument();
     });
   };
 
@@ -207,7 +207,7 @@ describe('AssignRoleWizard — Step 2', () => {
     });
     renderWizard({ onClose });
     await advanceToStep2(user);
-    await user.click(screen.getByTestId('toggle-scope'));
+    await user.click(screen.getByTestId('toggle-scope-*'));
     await user.click(screen.getByRole('button', { name: /^Save$/i }));
     await waitFor(() => {
       expect(mockAssignMutateAsync).toHaveBeenCalledWith({
@@ -225,7 +225,7 @@ describe('AssignRoleWizard — Step 2', () => {
     });
     renderWizard();
     await advanceToStep2(user);
-    await user.click(screen.getByTestId('toggle-scope'));
+    await user.click(screen.getByTestId('toggle-scope-*'));
     await user.click(screen.getByRole('button', { name: /^Save$/i }));
     await waitFor(() => {
       expect(screen.getByText(/Some assignments could not be completed/i)).toBeInTheDocument();
@@ -239,7 +239,7 @@ describe('AssignRoleWizard — Step 2', () => {
     mockAssignMutateAsync.mockRejectedValue(new Error('Network error'));
     renderWizard();
     await advanceToStep2(user);
-    await user.click(screen.getByTestId('toggle-scope'));
+    await user.click(screen.getByTestId('toggle-scope-*'));
     await user.click(screen.getByRole('button', { name: /^Save$/i }));
     await waitFor(() => {
       expect(screen.getByRole('alert')).toBeInTheDocument();

src/authz-module/role-assignation-wizard/components/DefineApplicationScopeStep.tsx

@@ -58,7 +58,7 @@ const DefineApplicationScopeStep = ({
     totalCount,
     queryState,
     platformAggregateScopeItem,
-    showOrgAggregates,
+    orgAggregateScopeItems,
   } = useScopeListData({ contextType, search: debouncedSearch, org: selectedOrgs[0] || '' });
 
   return (
@@ -97,8 +97,7 @@ const DefineApplicationScopeStep = ({
         onScopeToggle={onScopeToggle}
         queryState={queryState}
         platformAggregateScopeItem={platformAggregateScopeItem}
-        showOrgAggregates={showOrgAggregates}
-        contextType={contextType}
+        orgAggregateScopeItems={orgAggregateScopeItems}
       />
     </div>
   );

src/authz-module/role-assignation-wizard/components/ScopeCheckboxItem.tsx

@@ -12,7 +12,7 @@ const ScopeCheckboxItem = ({ scope, checked, onToggle }: ScopeCheckboxItemProps)
     <Form.Checkbox
       checked={checked}
       onChange={() => onToggle(scope.externalKey)}
-      data-testid="toggle-scope"
+      data-testid={`toggle-scope-${scope.externalKey}`}
     >
       {scope.displayName}
     </Form.Checkbox>

src/authz-module/role-assignation-wizard/components/ScopeFilterBar.tsx

@@ -34,7 +34,7 @@ const ScopeFilterBar = ({
     <>
       <div className="d-flex align-items-center justify-content-between gap-3 mb-2 flex-wrap">
         <div className="d-flex align-items-center gap-3">
-          <div style={{ width: '300px' }}>
+          <div className="scope-search-input">
             <Form.Group controlId="scope-search" className="mb-0">
               <Form.Control
                 type="text"
@@ -49,7 +49,7 @@ const ScopeFilterBar = ({
           <OrgFilter
             filterButtonText={intl.formatMessage(messages['wizard.step2.filter.org.label'])}
             filterValue={selectedOrgs}
-            setFilter={(value) => onOrgsChange(value)}
+            setFilter={onOrgsChange}
           />
         </div>
 

src/authz-module/role-assignation-wizard/components/ScopeList.tsx

@@ -22,8 +22,7 @@ interface ScopeListProps {
   onScopeToggle: (scopeId: string) => void;
   queryState: ScopeListQueryState;
   platformAggregateScopeItem: Scope | null;
-  showOrgAggregates: boolean;
-  contextType: string | undefined;
+  orgAggregateScopeItems: Record<string, Scope>;
 }
 
 const ScopeList = ({
@@ -34,27 +33,12 @@ const ScopeList = ({
   onScopeToggle,
   queryState,
   platformAggregateScopeItem,
-  showOrgAggregates,
-  contextType,
+  orgAggregateScopeItems,
 }: ScopeListProps) => {
   const intl = useIntl();
   const {
     isLoading, isFetchingNextPage, hasNextPage, isError, fetchNextPage,
   } = queryState;
-  const aggregateLabelMessages = {
-    course: messages['wizard.step2.scopeList.aggregate.label.course'],
-    library: messages['wizard.step2.scopeList.aggregate.label.library'],
-  };
-  const aggregateDescriptionMessages = {
-    course: messages['wizard.step2.scope.aggregate.description.course'],
-    library: messages['wizard.step2.scope.aggregate.description.library'],
-  };
-  const aggregateLabel = contextType && aggregateLabelMessages[contextType]
-    ? intl.formatMessage(aggregateLabelMessages[contextType])
-    : '';
-  const aggregateDescription = contextType && aggregateDescriptionMessages[contextType]
-    ? intl.formatMessage(aggregateDescriptionMessages[contextType])
-    : '';
   const loadMoreRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -88,27 +72,16 @@ const ScopeList = ({
             />
           )}
 
-          {orderedOrgs.map((org) => {
-            const aggregateScopeItem: Scope | undefined = (contextType && showOrgAggregates)
-              ? {
-                externalKey: contextType === 'course' ? `course-v1:${org}+*` : `lib:${org}:*`,
-                displayName: aggregateLabel,
-                description: aggregateDescription,
-                org: { id: '', name: org, shortName: org },
-              }
-              : undefined;
-
-            return (
-              <OrgSection
-                key={org}
-                orgName={organizations?.find((o) => o.shortName === org)?.name || org}
-                scopes={scopesByOrg[org]}
-                selectedScopes={selectedScopes}
-                onScopeToggle={onScopeToggle}
-                aggregateScopeItem={aggregateScopeItem}
-              />
-            );
-          })}
+          {orderedOrgs.map((org) => (
+            <OrgSection
+              key={org}
+              orgName={organizations?.find((o) => o.shortName === org)?.name || org}
+              scopes={scopesByOrg[org]}
+              selectedScopes={selectedScopes}
+              onScopeToggle={onScopeToggle}
+              aggregateScopeItem={orgAggregateScopeItems[org]}
+            />
+          ))}
 
           {orderedOrgs.length === 0 && (
             <p className="text-muted text-center py-3">{intl.formatMessage(messages['wizard.step2.scopeList.empty'])}</p>

src/authz-module/role-assignation-wizard/hooks/useScopeListData.test.ts

@@ -225,8 +225,7 @@ describe('useScopeListData', () => {
         org: '',
       }), { wrapper });
 
-      // Object.keys preserves insertion order from the reduce operation (org2 first, then org1, then org3)
-      expect(result.current.orderedOrgs).toEqual(['org2', 'org1', 'org3']);
+      expect(result.current.orderedOrgs).toEqual(['org1', 'org2', 'org3']);
     });
   });
 

src/authz-module/role-assignation-wizard/hooks/useScopeListData.ts

@@ -11,6 +11,13 @@ interface UseScopeListDataParams {
   org: string;
 }
 
+const groupByOrg = (acc: Record<string, Scope[]>, scope: Scope): Record<string, Scope[]> => {
+  const orgSlug = scope.org!.shortName;
+  if (!acc[orgSlug]) { acc[orgSlug] = []; }
+  acc[orgSlug].push(scope);
+  return acc;
+};
+
 const useScopeListData = ({ contextType, search, org }: UseScopeListDataParams) => {
   const intl = useIntl();
   const {
@@ -36,16 +43,14 @@ const useScopeListData = ({ contextType, search, org }: UseScopeListDataParams)
 
   const totalCount = scopesData?.pages[0]?.count ?? 0;
 
-  const scopesByOrg = useMemo(() => allScopes
-    .filter((s: Scope) => !!s.org)
-    .reduce<Record<string, Scope[]>>((acc, scope: Scope) => {
-      const orgSlug = scope.org!.shortName;
-      if (!acc[orgSlug]) { acc[orgSlug] = []; }
-      acc[orgSlug].push(scope);
-      return acc;
-    }, {}), [allScopes]);
+  const scopesByOrg = useMemo(
+    () => allScopes
+      .filter((s: Scope) => !!s.org)
+      .reduce<Record<string, Scope[]>>(groupByOrg, {}),
+    [allScopes],
+  );
 
-  const orderedOrgs = useMemo(() => Object.keys(scopesByOrg), [scopesByOrg]);
+  const orderedOrgs = useMemo(() => Object.keys(scopesByOrg).sort(), [scopesByOrg]);
 
   const aggregateDescription = contextType === 'course'
     ? intl.formatMessage(messages['wizard.step2.scope.aggregate.description.course'])
@@ -55,9 +60,16 @@ const useScopeListData = ({ contextType, search, org }: UseScopeListDataParams)
     ? intl.formatMessage(messages['wizard.step2.scope.aggregate.platform.label.course'])
     : intl.formatMessage(messages['wizard.step2.scope.aggregate.platform.label.library']);
 
-  // Only show platform aggregate and org aggregates for administrators
-  const user = getAuthenticatedUser();
-  const isPlatformAdmin = user?.administrator === true;
+  const orgAggregateLabel = contextType === 'course'
+    ? intl.formatMessage(messages['wizard.step2.scopeList.aggregate.label.course'])
+    : intl.formatMessage(messages['wizard.step2.scopeList.aggregate.label.library']);
+
+  // Only show platform aggregate and org aggregates for administrators.
+  // getAuthenticatedUser() is stable for the lifetime of a session (no hot user-switching).
+  const isPlatformAdmin = useMemo(
+    () => getAuthenticatedUser()?.administrator === true,
+    [],
+  );
 
   const platformAggregateScopeItem: Scope | null = (contextType && isPlatformAdmin)
     ? {
@@ -68,9 +80,23 @@ const useScopeListData = ({ contextType, search, org }: UseScopeListDataParams)
     }
     : null;
 
-  // Also control whether org aggregates are shown - only for admins
   const showOrgAggregates = isPlatformAdmin;
 
+  const orgAggregateScopeItems = useMemo<Record<string, Scope>>(() => {
+    if (!contextType || !showOrgAggregates) { return {}; }
+    return Object.fromEntries(
+      orderedOrgs.map((orgSlug) => [
+        orgSlug,
+        {
+          externalKey: contextType === 'course' ? `course-v1:${orgSlug}+*` : `lib:${orgSlug}:*`,
+          displayName: orgAggregateLabel,
+          description: aggregateDescription,
+          org: { id: '0', name: orgSlug, shortName: orgSlug },
+        } satisfies Scope,
+      ]),
+    );
+  }, [orderedOrgs, contextType, showOrgAggregates, orgAggregateLabel, aggregateDescription]);
+
   return {
     organizations,
     orderedOrgs,
@@ -82,6 +108,7 @@ const useScopeListData = ({ contextType, search, org }: UseScopeListDataParams)
     },
     platformAggregateScopeItem,
     showOrgAggregates,
+    orgAggregateScopeItems,
   };
 };