feat: implement grading permissions and authorization hooks

bra-i-am · bra-i-am · commit b60df73983ca · 2026-04-08T16:54:57.000-05:00
diff --git a/src/authz/constants.ts b/src/authz/constants.ts
@@ -17,4 +17,7 @@ export const CONTENT_LIBRARY_PERMISSIONS = {
 
 export const COURSE_PERMISSIONS = {
   MANAGE_ADVANCED_SETTINGS: 'courses.manage_advanced_settings',
+
+  VIEW_GRADING_SETTINGS: 'courses.view_grading_settings',
+  EDIT_GRADING_SETTINGS: 'courses.edit_grading_settings',
 };
diff --git a/src/authz/hooks.ts b/src/authz/hooks.ts
@@ -0,0 +1,81 @@
+import { useWaffleFlags } from '@src/data/apiHooks';
+import { useUserPermissions } from '@src/authz/data/apiHooks';
+import { PermissionValidationQuery, PermissionValidationAnswer } from '@src/authz/types';
+
+/**
+ * Return type for the useUserPermissionsWithAuthzCourse 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 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,
+ *   {
+ *     canViewGradingSettings: {
+ *       action: COURSE_PERMISSIONS.VIEW_GRADING_SETTINGS,
+ *       scope: courseId,
+ *     },
+ *     canEditGradingSettings: {
+ *       action: COURSE_PERMISSIONS.EDIT_GRADING_SETTINGS,
+ *       scope: courseId,
+ *     },
+ *   }
+ * );
+ *
+ * const { canViewGradingSettings, canEditGradingSettings } = 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, default all to true
+    Object.keys(permissions).forEach((permissionKey: string) => {
+      permissionResults[permissionKey] = true;
+    });
+  }
+
+  return {
+    isLoading: isAuthzEnabled ? isLoadingUserPermissions : false,
+    permissions: permissionResults,
+    isAuthzEnabled,
+  };
+};
diff --git a/src/authz/permissionHelpers.ts b/src/authz/permissionHelpers.ts
@@ -0,0 +1,12 @@
+import { COURSE_PERMISSIONS } from './constants';
+
+export const getGradingPermissions = (courseId: string) => ({
+  canViewGradingSettings: {
+    action: COURSE_PERMISSIONS.VIEW_GRADING_SETTINGS,
+    scope: courseId,
+  },
+  canEditGradingSettings: {
+    action: COURSE_PERMISSIONS.EDIT_GRADING_SETTINGS,
+    scope: courseId,
+  },
+});
diff --git a/src/grading-settings/GradingSettings.jsx b/src/grading-settings/GradingSettings.jsx
@@ -9,7 +9,10 @@ import { Helmet } from 'react-helmet';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { STATEFUL_BUTTON_STATES } from '@src/constants';
 import { useCourseSettings } from '@src/data/apiHooks';
+import { useUserPermissionsWithAuthzCourse } from '@src/authz/hooks';
+import { getGradingPermissions } from '@src/authz/permissionHelpers';
 import ConnectionErrorAlert from '@src/generic/ConnectionErrorAlert';
+import PermissionDeniedAlert from '@src/generic/PermissionDeniedAlert';
 import SectionSubHeader from '@src/generic/section-sub-header';
 import SubHeader from '@src/generic/sub-header/SubHeader';
 import AlertMessage from '@src/generic/alert-message';
@@ -31,6 +34,12 @@ import messages from './messages';
 const GradingSettings = () => {
   const intl = useIntl();
   const { courseId, courseDetails } = useCourseAuthoringContext();
+
+  const {
+    isLoading: isLoadingUserPermissions,
+    permissions: userPermissions,
+  } = useUserPermissionsWithAuthzCourse(courseId, getGradingPermissions(courseId));
+
   const {
     data: gradingSettings,
     isLoading: isGradingSettingsLoading,
@@ -52,7 +61,7 @@ const GradingSettings = () => {
   const courseGradingDetails = gradingSettings?.courseDetails;
   const isLoadingDenied = isGradingSettingsError || isCourseSettingsError;
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
-  const isLoading = isCourseSettingsLoading || isGradingSettingsLoading;
+  const isLoading = isCourseSettingsLoading || isGradingSettingsLoading || isLoadingUserPermissions;
   const [isQueryPending, setIsQueryPending] = useState(false);
   const [showOverrideInternetConnectionAlert, setOverrideInternetConnectionAlert] = useState(false);
   const [eligibleGrade, setEligibleGrade] = useState(null);
@@ -90,6 +99,10 @@ const GradingSettings = () => {
     }
   }, [savePending]);
 
+  if (!isLoadingUserPermissions && !userPermissions.canViewGradingSettings) {
+    return <PermissionDeniedAlert />;
+  }
+
   if (isLoadingDenied) {
     return (
       <Container size="xl" className="course-unit px-4 mt-4">
@@ -102,6 +115,8 @@ const GradingSettings = () => {
     return null;
   }
 
+  const isEditable = !isLoadingUserPermissions && userPermissions.canEditGradingSettings;
+
   const handleQueryProcessing = () => {
     setShowSuccessAlert(false);
     updateGradingSettings(gradingData);
@@ -174,6 +189,7 @@ const GradingSettings = () => {
                       setOverrideInternetConnectionAlert={setOverrideInternetConnectionAlert}
                       setEligibleGrade={setEligibleGrade}
                       defaultGradeDesignations={gradingSettings?.defaultGradeDesignations}
+                      isEditable={isEditable}
                     />
                   </section>
                   {courseSettingsData.creditEligibilityEnabled && courseSettingsData.isCreditCourse && (
@@ -188,6 +204,7 @@ const GradingSettings = () => {
                         minimumGradeCredit={minimumGradeCredit}
                         setGradingData={setGradingData}
                         setShowSuccessAlert={setShowSuccessAlert}
+                        isEditable={isEditable}
                       />
                     </section>
                   )}
@@ -201,6 +218,7 @@ const GradingSettings = () => {
                       gracePeriod={gracePeriod}
                       setGradingData={setGradingData}
                       setShowSuccessAlert={setShowSuccessAlert}
+                      isEditable={isEditable}
                     />
                   </section>
                   <section>
@@ -219,11 +237,13 @@ const GradingSettings = () => {
                       setGradingData={setGradingData}
                       courseAssignmentLists={courseAssignmentLists}
                       setShowSuccessAlert={setShowSuccessAlert}
+                      isEditable={isEditable}
                     />
                     <Button
                       variant="primary"
                       iconBefore={IconAdd}
                       onClick={handleAddAssignment}
+                      disabled={!isEditable}
                     >
                       {intl.formatMessage(messages.addNewAssignmentTypeBtn)}
                     </Button>
@@ -267,6 +287,7 @@ const GradingSettings = () => {
               key="statefulBtn"
               onClick={handleSendGradingSettingsData}
               state={isQueryPending ? STATEFUL_BUTTON_STATES.pending : STATEFUL_BUTTON_STATES.default}
+              disabled={!isEditable}
               {...updateValuesButtonState}
             />,
           ].filter(Boolean)}
diff --git a/src/grading-settings/assignment-section/assignments/AssignmentItem.jsx b/src/grading-settings/assignment-section/assignments/AssignmentItem.jsx
@@ -20,6 +20,7 @@ const AssignmentItem = ({
   secondErrorMsg,
   gradeField,
   trailingElement,
+  disabled,
 }) => (
   <li className={className}>
     <Form.Group className={classNames('form-group-custom', {
@@ -37,6 +38,7 @@ const AssignmentItem = ({
         value={value}
         isInvalid={errorEffort}
         trailingElement={trailingElement}
+        disabled={disabled}
       />
       <Form.Control.Feedback className="grading-description">
         {descriptions}
@@ -64,6 +66,7 @@ AssignmentItem.defaultProps = {
   errorEffort: false,
   gradeField: undefined,
   trailingElement: undefined,
+  disabled: false,
 };
 
 AssignmentItem.propTypes = {
@@ -81,6 +84,7 @@ AssignmentItem.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   gradeField: PropTypes.shape(defaultAssignmentsPropTypes),
   trailingElement: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 
 export default AssignmentItem;
diff --git a/src/grading-settings/assignment-section/assignments/AssignmentTypeName.jsx b/src/grading-settings/assignment-section/assignments/AssignmentTypeName.jsx
@@ -11,6 +11,7 @@ const AssignmentTypeName = ({
   value,
   errorEffort,
   onChange,
+  disabled,
 }) => {
   const intl = useIntl();
   const initialAssignmentName = useRef(value);
@@ -31,6 +32,7 @@ const AssignmentTypeName = ({
           onChange={onChange}
           value={value}
           isInvalid={Boolean(errorEffort)}
+          disabled={disabled}
         />
         <Form.Control.Feedback className="grading-description">
           {intl.formatMessage(messages.assignmentTypeNameDescription)}
@@ -60,12 +62,14 @@ const AssignmentTypeName = ({
 
 AssignmentTypeName.defaultProps = {
   errorEffort: false,
+  disabled: false,
 };
 
 AssignmentTypeName.propTypes = {
   onChange: PropTypes.func.isRequired,
   errorEffort: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
+  disabled: PropTypes.bool,
 };
 
 export default AssignmentTypeName;
diff --git a/src/grading-settings/assignment-section/index.jsx b/src/grading-settings/assignment-section/index.jsx
@@ -22,6 +22,7 @@ const AssignmentSection = ({
   setGradingData,
   courseAssignmentLists,
   setShowSuccessAlert,
+  isEditable,
 }) => {
   const intl = useIntl();
   const [errorList, setErrorList] = useState({});
@@ -84,6 +85,7 @@ const AssignmentSection = ({
                 value={gradeField.type}
                 errorEffort={errorList[`${type}-${gradeField.id}`]}
                 onChange={(e) => handleAssignmentChange(e, gradeField.id)}
+                disabled={!isEditable}
               />
               <AssignmentItem
                 className="course-grading-assignment-abbreviation"
@@ -93,6 +95,7 @@ const AssignmentSection = ({
                 name="shortLabel"
                 value={gradeField.shortLabel}
                 onChange={(e) => handleAssignmentChange(e, gradeField.id)}
+                disabled={!isEditable}
               />
               <AssignmentItem
                 className="course-grading-assignment-total-grade"
@@ -107,6 +110,7 @@ const AssignmentSection = ({
                 onChange={(e) => handleAssignmentChange(e, gradeField.id)}
                 errorEffort={errorList[`${weight}-${gradeField.id}`]}
                 trailingElement="%"
+                disabled={!isEditable}
               />
               <AssignmentItem
                 className="course-grading-assignment-total-number"
@@ -119,6 +123,7 @@ const AssignmentSection = ({
                 value={gradeField.minCount}
                 onChange={(e) => handleAssignmentChange(e, gradeField.id)}
                 errorEffort={errorList[`${minCount}-${gradeField.id}`]}
+                disabled={!isEditable}
               />
               <AssignmentItem
                 className="course-grading-assignment-number-droppable"
@@ -135,6 +140,7 @@ const AssignmentSection = ({
                   type: gradeField.type,
                 })}
                 errorEffort={errorList[`${dropCount}-${gradeField.id}`]}
+                disabled={!isEditable}
               />
             </ol>
             {showDefinedCaseAlert && (
@@ -186,6 +192,7 @@ const AssignmentSection = ({
               variant="outline-primary"
               size="sm"
               onClick={() => handleRemoveAssignment(gradeField.id)}
+              disabled={!isEditable}
             >
               {intl.formatMessage(messages.assignmentDeleteButton)}
             </Button>
@@ -199,6 +206,7 @@ const AssignmentSection = ({
 AssignmentSection.defaultProps = {
   courseAssignmentLists: undefined,
   graders: undefined,
+  isEditable: true,
 };
 
 AssignmentSection.propTypes = {
@@ -210,6 +218,7 @@ AssignmentSection.propTypes = {
   graders: PropTypes.arrayOf(
     PropTypes.shape(defaultAssignmentsPropTypes),
   ),
+  isEditable: PropTypes.bool,
 };
 
 export default AssignmentSection;
diff --git a/src/grading-settings/credit-section/index.jsx b/src/grading-settings/credit-section/index.jsx
@@ -12,6 +12,7 @@ const CreditSection = ({
   minimumGradeCredit,
   setGradingData,
   setShowSuccessAlert,
+  isEditable,
 }) => {
   const intl = useIntl();
   const [errorEffort, setErrorEffort] = useState(false);
@@ -51,6 +52,7 @@ const CreditSection = ({
         value={Math.round(parseFloat(minimumGradeCredit) * 100) || ''}
         name="minimum_grade_credit"
         onChange={handleCreditChange}
+        disabled={!isEditable}
       />
       <Form.Control.Feedback className="grading-description">
         {intl.formatMessage(messages.creditEligibilityDescription)}
@@ -64,12 +66,17 @@ const CreditSection = ({
   );
 };
 
+CreditSection.defaultProps = {
+  isEditable: true,
+};
+
 CreditSection.propTypes = {
   eligibleGrade: PropTypes.number.isRequired,
   setShowSavePrompt: PropTypes.func.isRequired,
   setGradingData: PropTypes.func.isRequired,
   setShowSuccessAlert: PropTypes.func.isRequired,
   minimumGradeCredit: PropTypes.number.isRequired,
+  isEditable: PropTypes.bool,
 };
 
 export default CreditSection;
diff --git a/src/grading-settings/deadline-section/index.jsx b/src/grading-settings/deadline-section/index.jsx
diff --git a/src/grading-settings/grading-scale/GradingScale.jsx b/src/grading-settings/grading-scale/GradingScale.jsx
diff --git a/src/grading-settings/grading-scale/components/GradingScaleHandle.jsx b/src/grading-settings/grading-scale/components/GradingScaleHandle.jsx
diff --git a/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx b/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx
