refactor: replace useUserPermissionsWithAuthzCourse with useCourseUserPermissions

Remove the deprecated useUserPermissionsWithAuthzCourse hook and migrate all consumers to use useCourseUserPermissions, which provides a flatter API by spreading permission booleans directly into the return object.

Author: jacobo-dominguez-wgu

src/authz/hooks.test.ts

@@ -60,8 +60,8 @@ describe('useCourseUserPermissions', () => {
 
     expect(result.current.isLoading).toBe(true);
     expect(result.current.isAuthzEnabled).toBe(true);
-    expect(result.current.canView).toBeUndefined();
-    expect(result.current.canEdit).toBeUndefined();
+    expect(result.current.canView).toBe(false);
+    expect(result.current.canEdit).toBe(false);
   });
 
   it('falls back to false for permissions absent from server response when authz is enabled', () => {

src/authz/hooks.test.tsx

@@ -5,14 +5,14 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as authzApi from '@src/authz/data/api';
 import { PermissionValidationQuery } from '@src/authz/types';
 import { mockWaffleFlags } from '@src/data/apiHooks.mock';
-import { useUserPermissionsWithAuthzCourse } from './hooks';
+import { useCourseUserPermissions } from './hooks';
 
 jest.mock('@src/data/api');
 jest.mock('@src/authz/data/api');
 
 const mockedAuthzApi = jest.mocked(authzApi);
 
-describe('useUserPermissionsWithAuthzCourse', () => {
+describe('useCourseUserPermissions', () => {
   let queryClient: QueryClient;
 
   const createWrapper = () =>
@@ -50,7 +50,7 @@ describe('useUserPermissionsWithAuthzCourse', () => {
     });
 
     const { result } = renderHook(
-      () => useUserPermissionsWithAuthzCourse('course-v1:Test+101+2023', mockPermissions),
+      () => useCourseUserPermissions('course-v1:Test+101+2023', mockPermissions),
       { wrapper: createWrapper() },
     );
 
@@ -59,8 +59,8 @@ describe('useUserPermissionsWithAuthzCourse', () => {
     });
 
     expect(result.current.isAuthzEnabled).toBe(false);
-    expect(result.current.permissions.canViewFiles).toBe(true);
-    expect(result.current.permissions.canManageFiles).toBe(true);
+    expect(result.current.canViewFiles).toBe(true);
+    expect(result.current.canManageFiles).toBe(true);
   });
 
   it('returns loading state when authz is enabled and permissions are loading', async () => {
@@ -73,7 +73,7 @@ describe('useUserPermissionsWithAuthzCourse', () => {
     );
 
     const { result } = renderHook(
-      () => useUserPermissionsWithAuthzCourse('course-v1:Test+101+2023', mockPermissions),
+      () => useCourseUserPermissions('course-v1:Test+101+2023', mockPermissions),
       { wrapper: createWrapper() },
     );
 
@@ -82,6 +82,8 @@ describe('useUserPermissionsWithAuthzCourse', () => {
     });
 
     expect(result.current.isLoading).toBe(true);
+    expect(result.current.canViewFiles).toBe(false);
+    expect(result.current.canManageFiles).toBe(false);
   });
 
   it('returns actual permission values when authz is enabled and permissions loaded', async () => {
@@ -95,7 +97,7 @@ describe('useUserPermissionsWithAuthzCourse', () => {
     });
 
     const { result } = renderHook(
-      () => useUserPermissionsWithAuthzCourse('course-v1:Test+101+2023', mockPermissions),
+      () => useCourseUserPermissions('course-v1:Test+101+2023', mockPermissions),
       { wrapper: createWrapper() },
     );
 
@@ -104,8 +106,8 @@ describe('useUserPermissionsWithAuthzCourse', () => {
     });
 
     expect(result.current.isAuthzEnabled).toBe(true);
-    expect(result.current.permissions.canViewFiles).toBe(true);
-    expect(result.current.permissions.canManageFiles).toBe(false);
+    expect(result.current.canViewFiles).toBe(true);
+    expect(result.current.canManageFiles).toBe(false);
   });
 
   it('falls back to false for undefined permissions when authz is enabled', async () => {
@@ -118,7 +120,7 @@ describe('useUserPermissionsWithAuthzCourse', () => {
     });
 
     const { result } = renderHook(
-      () => useUserPermissionsWithAuthzCourse('course-v1:Test+101+2023', mockPermissions),
+      () => useCourseUserPermissions('course-v1:Test+101+2023', mockPermissions),
       { wrapper: createWrapper() },
     );
 
@@ -127,7 +129,7 @@ describe('useUserPermissionsWithAuthzCourse', () => {
     });
 
     expect(result.current.isAuthzEnabled).toBe(true);
-    expect(result.current.permissions.canViewFiles).toBe(true);
-    expect(result.current.permissions.canManageFiles).toBe(false);
+    expect(result.current.canViewFiles).toBe(true);
+    expect(result.current.canManageFiles).toBe(false);
   });
 });

src/authz/hooks.ts

@@ -7,18 +7,6 @@ type UseCourseUserPermissionsReturn<Query extends PermissionValidationQuery> = {
   isAuthzEnabled: boolean;
 } & PermissionValidationAnswer<Query>;
 
-/**
- * Return type for the useUserCoursePermissionsWithAuthz hook
- */
-interface UseUserPermissionsWithAuthzCourseReturn {
-  /** Whether permissions are currently loading */
-  isLoading: boolean;
-  /** Object containing permission results with boolean values */
-  permissions: PermissionValidationAnswer;
-  /** Whether authorization is enabled for the course */
-  isAuthzEnabled: boolean;
-}
-
 /**
  * Custom hook to retrieve and evaluate user permissions for the current course using the openedx-authz service.
  *
@@ -54,96 +42,36 @@ export const useCourseUserPermissions = <Query extends PermissionValidationQuery
   permissions: Query,
 ): UseCourseUserPermissionsReturn<Query> => {
   const waffleFlags = useWaffleFlags(courseId);
+  const isWaffleFlagsLoading: boolean = waffleFlags?.isLoading ?? true;
   const isAuthzEnabled: boolean = waffleFlags?.enableAuthzCourseAuthoring ?? false;
 
   const {
     isLoading: isLoadingUserPermissions,
     data: userPermissions,
   } = useUserPermissions(permissions, isAuthzEnabled);
 
+  const isLoading = isWaffleFlagsLoading || (isAuthzEnabled && isLoadingUserPermissions);
+
   const resolvePermission = (key: string): boolean => {
     if (!isAuthzEnabled) {
       return true;
     }
     return userPermissions?.[key] ?? false;
   };
 
-  const permissionResults: Record<string, boolean> = isLoadingUserPermissions
-    ? {}
+  const permissionResults: Record<string, boolean> = isLoading
+    ? Object.keys(permissions).reduce<Record<string, boolean>>((acc, key) => {
+      acc[key] = false;
+      return acc;
+    }, {})
     : Object.keys(permissions).reduce<Record<string, boolean>>((acc, key) => {
       acc[key] = resolvePermission(key);
       return acc;
     }, {});
 
   return {
-    isLoading: isAuthzEnabled ? isLoadingUserPermissions : false,
+    isLoading,
     isAuthzEnabled,
     ...permissionResults as PermissionValidationAnswer<Query>,
   };
 };
-
-/**
- * Custom hook to handle user permissions with course authorization waffle flag
- *
- * This hook abstracts the common pattern of:
- * 1. Checking if authz is enabled via waffle flag
- * 2. Fetching user permissions when authz is enabled
- * 3. Defaulting all permissions to true when authz is disabled
- * 4. Providing fallback values for undefined permissions
- *
- * @param courseId - The course ID to check permissions for
- * @param permissions - Object mapping permission names to their action/scope definitions
- * @returns Object containing loading state, permissions results, and authz status
- *
- * @example
- * ```tsx
- * const { isLoading, permissions, isAuthzEnabled } = useUserPermissionsWithAuthzCourse(
- *   courseId,
- *   {
- *     canViewFiles: {
- *       action: COURSE_PERMISSIONS.VIEW_FILES,
- *       scope: courseId,
- *     },
- *     canManageFiles: {
- *       action: COURSE_PERMISSIONS.MANAGE_FILES,
- *       scope: courseId,
- *     },
- *   }
- * );
- *
- * const { canViewFiles, canManageFiles } = permissions;
- * ```
- */
-export const useUserPermissionsWithAuthzCourse = (
-  courseId: string,
-  permissions: PermissionValidationQuery,
-): UseUserPermissionsWithAuthzCourseReturn => {
-  const waffleFlags = useWaffleFlags(courseId);
-  const isAuthzEnabled: boolean = waffleFlags?.enableAuthzCourseAuthoring ?? false;
-
-  const {
-    isLoading: isLoadingUserPermissions,
-    data: userPermissions,
-  } = useUserPermissions(permissions, isAuthzEnabled);
-
-  // Build permission results object
-  const permissionResults: PermissionValidationAnswer = {};
-
-  if (!isAuthzEnabled) {
-    // Authz is disabled, default all permissions to true immediately
-    Object.keys(permissions).forEach((permissionKey: string) => {
-      permissionResults[permissionKey] = true;
-    });
-  } else if (!isLoadingUserPermissions) {
-    // Authz is enabled and permissions loaded, use actual permission values with fallback to false
-    Object.keys(permissions).forEach((permissionKey: string) => {
-      permissionResults[permissionKey] = userPermissions?.[permissionKey] ?? false;
-    });
-  }
-
-  return {
-    isLoading: isAuthzEnabled ? isLoadingUserPermissions : false,
-    permissions: permissionResults,
-    isAuthzEnabled,
-  };
-};

src/course-updates/CourseUpdates.test.tsx

@@ -8,6 +8,7 @@ import {
   fireEvent,
   screen,
 } from '@src/testUtils';
+import userEvent from '@testing-library/user-event';
 
 import { useUserPermissions } from '@src/authz/data/apiHooks';
 
@@ -42,7 +43,7 @@ jest.mock('@src/authz/data/apiHooks', () => ({
 
 jest.mock('@src/data/apiHooks', () => ({
   ...jest.requireActual('@src/data/apiHooks'),
-  useWaffleFlags: jest.fn(() => ({ enableAuthzCourseAuthoring: false })),
+  useWaffleFlags: jest.fn(() => ({ enableAuthzCourseAuthoring: false, isLoading: false })),
 }));
 
 jest.mock('react-router-dom', () => ({
@@ -370,7 +371,7 @@ describe('<CourseUpdates />', () => {
         store = mocks.reduxStore;
         axiosMock = mocks.axiosMock;
 
-        (apiHooks.useWaffleFlags as jest.Mock).mockReturnValue({ enableAuthzCourseAuthoring: true });
+        (apiHooks.useWaffleFlags as jest.Mock).mockReturnValue({ enableAuthzCourseAuthoring: true, isLoading: false });
         (useUserPermissions as jest.Mock).mockReturnValue({
           isLoading: false,
           data: { canManageCourseUpdates: true, canViewCourseUpdates: true },
@@ -403,6 +404,15 @@ describe('<CourseUpdates />', () => {
         expect(await screen.findAllByRole('button', { name: /edit/i })).toHaveLength(4); // 3 for course updates and 1 for handouts
         expect(await screen.findAllByRole('button', { name: /delete/i })).toHaveLength(3);
       });
+
+      it('should open delete modal when clicking delete button on a course update', async () => {
+        render(<RootWrapper />);
+
+        const deleteButtons = await screen.findAllByTestId('course-update-delete-button');
+        await userEvent.click(deleteButtons[0]);
+
+        expect(screen.getByText('Are you sure you want to delete this update?')).toBeInTheDocument();
+      });
     });
 
     describe('when user does NOT have permission to manage course updates and enableAuthzCourseAuthoring is enabled', () => {
@@ -411,7 +421,7 @@ describe('<CourseUpdates />', () => {
         store = mocks.reduxStore;
         axiosMock = mocks.axiosMock;
 
-        (apiHooks.useWaffleFlags as jest.Mock).mockReturnValue({ enableAuthzCourseAuthoring: true });
+        (apiHooks.useWaffleFlags as jest.Mock).mockReturnValue({ enableAuthzCourseAuthoring: true, isLoading: false });
         (useUserPermissions as jest.Mock).mockReturnValue({
           isLoading: false,
           data: { canManageCourseUpdates: false, canViewCourseUpdates: true },
@@ -454,7 +464,7 @@ describe('<CourseUpdates />', () => {
         store = mocks.reduxStore;
         axiosMock = mocks.axiosMock;
 
-        (apiHooks.useWaffleFlags as jest.Mock).mockReturnValue({ enableAuthzCourseAuthoring: false });
+        (apiHooks.useWaffleFlags as jest.Mock).mockReturnValue({ enableAuthzCourseAuthoring: false, isLoading: false });
         (useUserPermissions as jest.Mock).mockReturnValue({
           isLoading: false,
           data: { canManageCourseUpdates: false },
@@ -479,13 +489,42 @@ describe('<CourseUpdates />', () => {
       });
     });
 
+    describe('when permissions are still loading', () => {
+      beforeEach(() => {
+        const mocks = initializeMocks();
+        store = mocks.reduxStore;
+        axiosMock = mocks.axiosMock;
+
+        (apiHooks.useWaffleFlags as jest.Mock).mockReturnValue({ enableAuthzCourseAuthoring: true, isLoading: false });
+        (useUserPermissions as jest.Mock).mockReturnValue({
+          isLoading: true,
+          data: undefined,
+        });
+
+        axiosMock
+          .onGet(getCourseUpdatesApiUrl(courseId))
+          .reply(200, courseUpdatesMock);
+        axiosMock
+          .onGet(getCourseHandoutApiUrl(courseId))
+          .reply(200, courseHandoutsMock);
+      });
+
+      it('should render loading spinner while permissions are loading', () => {
+        render(<RootWrapper />);
+
+        expect(screen.getByRole('status')).toBeInTheDocument();
+        expect(screen.queryByText(messages.headingTitle.defaultMessage)).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: messages.newUpdateButton.defaultMessage })).not.toBeInTheDocument();
+      });
+    });
+
     describe('when user does NOT have permission to view course updates', () => {
       beforeEach(() => {
         const mocks = initializeMocks();
         store = mocks.reduxStore;
         axiosMock = mocks.axiosMock;
 
-        (apiHooks.useWaffleFlags as jest.Mock).mockReturnValue({ enableAuthzCourseAuthoring: true });
+        (apiHooks.useWaffleFlags as jest.Mock).mockReturnValue({ enableAuthzCourseAuthoring: true, isLoading: false });
         (useUserPermissions as jest.Mock).mockReturnValue({
           isLoading: false,
           data: { canManageCourseUpdates: false, canViewCourseUpdates: false },

src/course-updates/CourseUpdates.tsx

@@ -31,7 +31,8 @@ import { matchesAnyStatus } from './utils';
 import getPageHeadTitle from '../generic/utils';
 import AlertMessage from '../generic/alert-message';
 import { getCourseUpdatesPermissions } from '@src/authz/permissionHelpers';
-import { useUserPermissionsWithAuthzCourse } from '@src/authz/hooks';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import Loading from '@src/generic/Loading';
 
 const CourseUpdates = () => {
   const intl = useIntl();
@@ -56,10 +57,9 @@ const CourseUpdates = () => {
 
   const {
     isLoading: isLoadingPermissions,
-    permissions,
-  } = useUserPermissionsWithAuthzCourse(courseId, getCourseUpdatesPermissions(courseId));
-
-  const { canViewCourseUpdates, canManageCourseUpdates } = permissions;
+    canViewCourseUpdates,
+    canManageCourseUpdates,
+  } = useCourseUserPermissions(courseId, getCourseUpdatesPermissions(courseId));
 
   const loadingStatuses = useSelector(getLoadingStatuses);
   const savingStatuses = useSelector(getSavingStatuses);
@@ -81,7 +81,7 @@ const CourseUpdates = () => {
     );
   }
   if (isLoadingPermissions) {
-    return null;
+    return <Loading />;
   }
 
   return (

src/header/hooks.test.tsx

@@ -135,6 +135,20 @@ describe('header utils', () => {
       const actualItemsTitle = actualItems.map((item) => item.title);
       expect(actualItemsTitle).toContain(messages['header.links.updates'].defaultMessage);
     });
+    it('when useNewUpdatesPage is false should use legacy studio URL for updates', () => {
+      mockWaffleFlags({ enableAuthzCourseAuthoring: false, useNewUpdatesPage: false });
+      jest.mocked(useUserPermissions).mockReturnValue({
+        isLoading: false,
+        data: { canViewCourseUpdates: true },
+      } as any);
+      jest.mocked(useSelector).mockReturnValue({
+        librariesV2Enabled: false,
+      });
+      const actualItems =
+        renderHook(() => useContentMenuItems('course-123'), { wrapper: createWrapper() }).result.current;
+      const updatesItem = actualItems.find((item) => item.title === messages['header.links.updates'].defaultMessage);
+      expect(updatesItem?.href).toContain('/course_info/course-123');
+    });
   });
 
   describe('getSettingsMenuitems', () => {