refactor(authz): remove duplicate hook and gate lock/unlock behind canEditFiles

- Remove useUserPermissionsWithAuthzCourse in favor of useCourseUserPermissions
  which provides the same functionality with better generic typing
- Migrate all consumers (CourseFilesTable, FilesPage, header hooks) to use
  useCourseUserPermissions with flat destructuring
- Hide Lock/Unlock option in FileMenu, MoreInfoColumn, and FileInfoModalSidebar
  when canEditFiles is false (course_auditor should not see lock/unlock)
- Add unit tests for lock/unlock visibility based on permissions
- Fix clipboard mock in tests using Object.defineProperty
- Update FilesPage.test.jsx mocks to match new flat return shape

Author: jacobo-dominguez-wgu

src/authz/hooks.test.ts

@@ -49,7 +49,7 @@ describe('useCourseUserPermissions', () => {
     expect(result.current.canEdit).toBe(false);
   });
 
-  it('returns isLoading=true and no permission keys while authz permissions are loading', () => {
+  it('returns isLoading=true and permissions as false while authz permissions are loading', () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
     jest.mocked(useUserPermissions).mockReturnValue({
       isLoading: true,
@@ -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

@@ -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 && !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;
-    });
-  } else if (!isLoadingUserPermissions) {
-    // Authz is disabled or permissions still loading, default all to true
-    Object.keys(permissions).forEach((permissionKey: string) => {
-      permissionResults[permissionKey] = true;
-    });
-  }
-
-  return {
-    isLoading: isAuthzEnabled ? isLoadingUserPermissions : false,
-    permissions: permissionResults,
-    isAuthzEnabled,
-  };
-};

src/authz/hooks.ts

@@ -28,7 +28,7 @@ import { getFileSizeToClosestByte } from '@src/utils';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { useUserPermissionsWithAuthzCourse } from '@src/authz/hooks';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 import { getFilesPermissions } from '@src/authz/permissionHelpers';
 
 export const CourseFilesTable = () => {
@@ -43,8 +43,10 @@ export const CourseFilesTable = () => {
   } = useSelector((state: DeprecatedReduxState) => state.assets);
 
   const {
-    permissions,
-  } = useUserPermissionsWithAuthzCourse(courseId, getFilesPermissions(courseId));
+    canCreateFiles,
+    canDeleteFiles,
+    canEditFiles,
+  } = useCourseUserPermissions(courseId, getFilesPermissions(courseId));
 
   const handleErrorReset = (error) => dispatch(resetErrors(error));
   const handleDeleteFile = (id) => dispatch(deleteAssetFile(courseId, id));
@@ -75,7 +77,7 @@ export const CourseFilesTable = () => {
     FileInfoModalSidebar({
       asset,
       handleLockedAsset: handleLockFile,
-      canLockFile: permissions.canEditFiles,
+      canLockFile: canEditFiles,
     });
 
   const assets = useModels('assets', assetIds);
@@ -188,9 +190,9 @@ export const CourseFilesTable = () => {
             infoModalSidebar,
             files: assets,
             permissions: {
-              canCreateFiles: permissions.canCreateFiles,
-              canDeleteFiles: permissions.canDeleteFiles,
-              canEditFiles: permissions.canEditFiles,
+              canCreateFiles,
+              canDeleteFiles,
+              canEditFiles,
             },
           }}
         />

src/files-and-videos/files-page/CourseFilesTable.tsx

@@ -79,27 +79,28 @@ const FileInfoModalSidebar = ({
           onClick={() => navigator.clipboard.writeText(asset?.externalUrl)}
         />
       </ActionRow>
-      <ActionRow className=" border-top mt-3 pt-3">
-        <div className="font-weight-bold">
-          <FormattedMessage {...messages.lockFileTitle} />
-        </div>
-        <IconButtonWithTooltip
-          key="lock-file-info"
-          tooltipPlacement="top"
-          tooltipContent={intl.formatMessage(messages.lockFileTooltipContent)}
-          src={InfoOutline}
-          iconAs={Icon}
-          alt="Info"
-          size="inline"
-        />
-        <ActionRow.Spacer />
-        <CheckboxControl
-          disabled={!canLockFile}
-          checked={lockedState}
-          onChange={handleLock}
-          aria-label="Checkbox"
-        />
-      </ActionRow>
+      {canLockFile && (
+        <ActionRow className=" border-top mt-3 pt-3">
+          <div className="font-weight-bold">
+            <FormattedMessage {...messages.lockFileTitle} />
+          </div>
+          <IconButtonWithTooltip
+            key="lock-file-info"
+            tooltipPlacement="top"
+            tooltipContent={intl.formatMessage(messages.lockFileTooltipContent)}
+            src={InfoOutline}
+            iconAs={Icon}
+            alt="Info"
+            size="inline"
+          />
+          <ActionRow.Spacer />
+          <CheckboxControl
+            checked={lockedState}
+            onChange={handleLock}
+            aria-label="Checkbox"
+          />
+        </ActionRow>
+      )}
     </Stack>
   );
 };

src/files-and-videos/files-page/FileInfoModalSidebar.jsx

@@ -48,6 +48,20 @@ describe('FileInfoModalSidebar', () => {
     expect(screen.getByText('Lock file')).toBeInTheDocument();
   });
 
+  it('hides Lock file section when canLockFile is false', () => {
+    renderComponent({ canLockFile: false });
+
+    expect(screen.getByText('Date added')).toBeInTheDocument();
+    expect(screen.getByText('Studio URL')).toBeInTheDocument();
+    expect(screen.queryByText('Lock file')).not.toBeInTheDocument();
+  });
+
+  it('shows Lock file section when canLockFile is true', () => {
+    renderComponent({ canLockFile: true });
+
+    expect(screen.getByText('Lock file')).toBeInTheDocument();
+  });
+
   it('displays the portable URL', () => {
     renderComponent();
     expect(screen.getByText('/static/test-file.png')).toBeInTheDocument();