fix: prerequisite setting in sidebar and partial updates

Author: navinkarkera

src/course-outline/data/api.ts

@@ -239,28 +239,28 @@ export async function configureCourseSection(variables: ConfigureSectionData): P
 /**
  * Configure course subsection
  */
-export async function configureCourseSubsection(variables: ConfigureSubsectionData): Promise<object> {
+export async function configureCourseSubsection(variables: Partial<ConfigureSubsectionData> & Pick<ConfigureSubsectionData, 'itemId'>): Promise<object> {
   const { data } = await getAuthenticatedHttpClient()
     .post(getCourseItemApiUrl(variables.itemId), {
       publish: 'republish',
-      graderType: variables.graderType,
-      isPrereq: variables.isPrereq,
-      prereqUsageKey: variables.prereqUsageKey,
-      prereqMinScore: variables.prereqMinScore,
-      prereqMinCompletion: variables.prereqMinCompletion,
+      ...(variables.graderType !== undefined && { graderType: variables.graderType }),
+      ...(variables.isPrereq !== undefined && { isPrereq: variables.isPrereq }),
+      ...(variables.prereqUsageKey !== undefined && { prereqUsageKey: variables.prereqUsageKey }),
+      ...(variables.prereqMinScore !== undefined && { prereqMinScore: variables.prereqMinScore }),
+      ...(variables.prereqMinCompletion !== undefined && { prereqMinCompletion: variables.prereqMinCompletion }),
       metadata: {
         // The backend expects metadata.visible_to_staff_only to either true or null
-        visible_to_staff_only: variables.isVisibleToStaffOnly ? true : null,
-        due: variables.dueDate,
-        hide_after_due: variables.hideAfterDue,
-        show_correctness: variables.showCorrectness,
-        is_practice_exam: variables.isPracticeExam,
-        is_time_limited: variables.isTimeLimited,
-        is_proctored_enabled: variables.isProctoredExam || variables.isPracticeExam || variables.isOnboardingExam,
-        exam_review_rules: variables.examReviewRules,
-        default_time_limit_minutes: variables.defaultTimeLimitMinutes,
-        is_onboarding_exam: variables.isOnboardingExam,
-        start: variables.releaseDate,
+        ...(variables.isVisibleToStaffOnly !== undefined && { visible_to_staff_only: variables.isVisibleToStaffOnly ? true : null }),
+        ...(variables.dueDate !== undefined && { due: variables.dueDate }),
+        ...(variables.hideAfterDue !== undefined && { hide_after_due: variables.hideAfterDue }),
+        ...(variables.showCorrectness !== undefined && { show_correctness: variables.showCorrectness }),
+        ...(variables.isPracticeExam !== undefined && { is_practice_exam: variables.isPracticeExam }),
+        ...(variables.isTimeLimited !== undefined && { is_time_limited: variables.isTimeLimited }),
+        ...(variables.isProctoredExam !== undefined || variables.isPracticeExam !== undefined || variables.isOnboardingExam !== undefined ? { is_proctored_enabled: variables.isProctoredExam || variables.isPracticeExam || variables.isOnboardingExam } : {}),
+        ...(variables.examReviewRules !== undefined && { exam_review_rules: variables.examReviewRules }),
+        ...(variables.defaultTimeLimitMinutes !== undefined && { default_time_limit_minutes: variables.defaultTimeLimitMinutes }),
+        ...(variables.isOnboardingExam !== undefined && { is_onboarding_exam: variables.isOnboardingExam }),
+        ...(variables.releaseDate !== undefined && { start: variables.releaseDate }),
       },
     });
   return data;

src/course-outline/data/apiHooks.ts

@@ -9,7 +9,7 @@ import {
 import { getNotificationMessage } from '@src/course-unit/data/utils';
 import { createGlobalState } from '@src/data/apiHooks';
 import type { XBlockBase, XblockChildInfo } from '@src/data/types';
-import { getBlockType, getCourseKey } from '@src/generic/key-utils';
+import { ContainerType, getBlockType, getCourseKey, normalizeContainerType } from '@src/generic/key-utils';
 import { useMutationWithProcessingNotification } from '@src/generic/processing-notification/data/apiHooks';
 import { handleResponseErrors } from '@src/generic/saving-error-alert';
 import { useToastContext } from '@src/generic/toast-context';
@@ -243,10 +243,27 @@ export const useConfigureSection = () => {
 export const useConfigureSubsection = () => {
   const queryClient = useQueryClient();
   return useMutationWithProcessingNotification({
-    mutationFn: (variables: ConfigureSubsectionData & ParentIds) => configureCourseSubsection(variables),
-    onSettled: (_data, _err, variables) => {
-      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.itemId)) });
+    mutationFn: (
+      variables: Partial<ConfigureSubsectionData> & Pick<ConfigureSubsectionData, 'itemId'> & ParentIds
+    ) => configureCourseSubsection(variables),
+    onSettled: async (_data, _err, variables) => {
+      const courseKey = getCourseKey(variables.itemId);
+      queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseKey) });
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
+      if (variables.isPrereq !== undefined) {
+        const subsectionItemQueries = queryClient.getQueryCache().findAll({
+          predicate: (query) => {
+            const queryKey = query.queryKey;
+            return Array.isArray(queryKey)
+              && queryKey.length >= 3
+              && queryKey[0] === courseOutlineQueryKeys.all[0]
+              && queryKey[1] === courseKey
+              && typeof queryKey[2] === 'string'
+              && normalizeContainerType(getBlockType(queryKey[2], 'empty')) === ContainerType.Subsection
+          },
+        });
+        await Promise.all(subsectionItemQueries.map((query) => queryClient.invalidateQueries({ queryKey: query.queryKey })));
+      }
     },
   });
 };

src/course-outline/data/types.ts

@@ -100,22 +100,22 @@ export interface ConfigureSectionData {
 
 export interface ConfigureSubsectionData {
   itemId: string,
-  isVisibleToStaffOnly: boolean,
-  releaseDate: string,
-  graderType: string,
-  dueDate: string,
+  isVisibleToStaffOnly?: boolean,
+  releaseDate?: string,
+  graderType?: string,
+  dueDate?: string,
   isTimeLimited?: boolean,
   isProctoredExam?: boolean,
   isOnboardingExam?: boolean,
   isPracticeExam?: boolean,
   examReviewRules?: string,
   defaultTimeLimitMinutes?: number,
-  hideAfterDue: boolean,
-  showCorrectness: 'always' | 'never' | 'past_due' | 'never_but_include_grade',
+  hideAfterDue?: boolean,
+  showCorrectness?: 'always' | 'never' | 'past_due' | 'never_but_include_grade',
   isPrereq?: boolean,
   prereqUsageKey?: string,
   prereqMinScore?: number,
-  prereqMinCompletion: number,
+  prereqMinCompletion?: number,
 }
 
 export interface ConfigureUnitData {

src/course-outline/outline-sidebar/info-sidebar/SubsectionSettings.tsx

@@ -7,12 +7,11 @@ import { getProctoredExamsFlag, getTimedExamsFlag } from '@src/course-outline/da
 import { ConfigureSubsectionData } from '@src/course-outline/data/types';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
-import { VisibilityTypes } from '@src/data/constants';
 import AdvancedTab from '@src/generic/configure-modal/AdvancedTab';
 import { DatepickerControl, DATEPICKER_TYPES } from '@src/generic/datepicker-control';
 import { SidebarContent, SidebarSection } from '@src/generic/sidebar';
 import { useStateWithCallback } from '@src/hooks';
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { ReleaseSection } from './sharedSettings/ReleaseSection';
 import messages from './messages';
@@ -166,18 +165,31 @@ const SpecialExamSection = ({ subsectionId, onChange }: SubProps) => {
   const { data: itemData } = useCourseItemData(subsectionId);
   const enableTimedExams = useSelector(getTimedExamsFlag);
   const enableProctoredExams = useSelector(getProctoredExamsFlag);
-  const [localState, setLocalState] = useStateWithCallback<Partial<ConfigureSubsectionData>>(
-    {
+  const getLatestLocalState = useCallback(() => {
+    return {
       isProctoredExam: itemData?.isProctoredExam,
       isTimeLimited: itemData?.isTimeLimited,
       isOnboardingExam: itemData?.isOnboardingExam,
       isPracticeExam: itemData?.isPracticeExam,
       defaultTimeLimitMinutes: itemData?.defaultTimeLimitMinutes,
       examReviewRules: itemData?.examReviewRules,
-    },
-    (val) => onChange(val || {}),
+      isPrereq: itemData?.isPrereq,
+      prereqMinScore: defaultPrereqScore(itemData?.prereqMinScore),
+      prereqMinCompletion: defaultPrereqScore(itemData?.prereqMinCompletion),
+      prereqUsageKey: itemData?.prereq,
+    };
+  }, [itemData]);
+
+  const [localState, setLocalState] = useStateWithCallback<Partial<ConfigureSubsectionData>>(
+    getLatestLocalState(),
+    (val) => onChange(val || {})
   );
 
+  useEffect(() => {
+    if (!itemData) return;
+    setLocalState({ value: getLatestLocalState(), skipCallback: true });
+  }, [itemData]);
+
   const setFieldValue = (key: keyof ConfigureSubsectionData, value: any) => {
     setLocalState((prev) => ({
       ...prev,
@@ -190,14 +202,7 @@ const SpecialExamSection = ({ subsectionId, onChange }: SubProps) => {
       title={intl.formatMessage(messages.subsectionSpecialExamTitle)}
     >
       <AdvancedTab
-        values={{
-          isProctoredExam: localState?.isProctoredExam,
-          isTimeLimited: localState?.isTimeLimited,
-          isOnboardingExam: localState?.isOnboardingExam,
-          isPracticeExam: localState?.isPracticeExam,
-          defaultTimeLimitMinutes: localState?.defaultTimeLimitMinutes,
-          examReviewRules: localState?.examReviewRules,
-        }}
+        values={localState || {}}
         setFieldValue={setFieldValue}
         prereqs={itemData?.prereqs}
         releasedToStudents={itemData?.releasedToStudents}
@@ -226,25 +231,10 @@ export const SubsectionSettings = ({ subsectionId }: Props) => {
     if (isPending || !itemData) {
       return;
     }
+
     mutate({
       itemId: subsectionId,
       sectionId: selectedContainerState?.sectionId,
-      isVisibleToStaffOnly: itemData.visibilityState === VisibilityTypes.STAFF_ONLY,
-      releaseDate: itemData.start,
-      graderType: itemData.format == null ? 'notgraded' : itemData.format,
-      dueDate: itemData.due == null ? '' : itemData.due,
-      isTimeLimited: itemData.isTimeLimited,
-      isProctoredExam: itemData.isProctoredExam,
-      isOnboardingExam: itemData.isOnboardingExam,
-      isPracticeExam: itemData.isPracticeExam,
-      examReviewRules: itemData.examReviewRules,
-      defaultTimeLimitMinutes: itemData.defaultTimeLimitMinutes,
-      hideAfterDue: itemData.hideAfterDue === undefined ? false : itemData.hideAfterDue,
-      showCorrectness: itemData.showCorrectness,
-      isPrereq: itemData.isPrereq,
-      prereqUsageKey: itemData.prereq,
-      prereqMinScore: defaultPrereqScore(itemData.prereqMinScore),
-      prereqMinCompletion: defaultPrereqScore(itemData.prereqMinCompletion),
       ...variables,
     });
   };

src/generic/FormikControl.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Form } from '@openedx/paragon';
-import { getIn, useFormikContext } from 'formik';
+import { FormikContextType, getIn, useFormikContext } from 'formik';
 import FormikErrorFeedback from './FormikErrorFeedback';
 
 interface Props {
@@ -10,6 +10,7 @@ interface Props {
   className?: string;
   controlClasses?: string;
   value: string | number;
+  setFieldValue?: (name: string, value: any) => void;
 }
 
 // Because <Form.Control> is only typed as 'any' in Paragon so far, the props of the following become 'any' :/
@@ -22,14 +23,24 @@ const FormikControl: React.FC<Props & React.ComponentProps<typeof Form.Control>>
   help = <></>,
   className = '',
   controlClasses = 'pb-2',
+  setFieldValue,
   ...params
 }) => {
-  const {
-    touched, errors, handleChange, handleBlur, setFieldError,
-  } = useFormikContext();
-  const fieldTouched = getIn(touched, name);
-  const fieldError = getIn(errors, name);
-  const handleFocus = (e) => setFieldError(e.target.name, undefined);
+  let formikContext: FormikContextType<unknown> | null;
+  try {
+    formikContext = useFormikContext();
+  } catch (e) {
+    formikContext = null;
+  }
+
+  const fieldTouched = formikContext ? getIn(formikContext.touched, name) : false;
+  const fieldError = formikContext ? getIn(formikContext.errors, name) : undefined;
+  const handleFocus = formikContext ? (
+    e: { target: { name: any; } }
+  ) => formikContext?.setFieldError(e.target.name, undefined) : undefined;
+  const handleBlur = formikContext ? formikContext.handleBlur : undefined;
+  const handleChange = formikContext ? formikContext.handleChange : undefined;
+  const formikSetFieldValue = formikContext ? formikContext.setFieldValue : undefined;
 
   return (
     <Form.Group className={className}>
@@ -38,14 +49,28 @@ const FormikControl: React.FC<Props & React.ComponentProps<typeof Form.Control>>
         {...params}
         name={name}
         className={controlClasses}
-        onChange={handleChange}
+        onChange={(e: { target: { value: any; }; }) => {
+          if (setFieldValue) {
+            setFieldValue(name, e.target.value);
+            return;
+          }
+          if (handleChange) {
+            handleChange(e);
+            return;
+          }
+          if (formikSetFieldValue) {
+            formikSetFieldValue(name, e.target.value);
+          }
+        }}
         onBlur={handleBlur}
         onFocus={handleFocus}
         isInvalid={!!fieldTouched && !!fieldError}
       />
-      <FormikErrorFeedback name={name}>
-        <Form.Text>{help}</Form.Text>
-      </FormikErrorFeedback>
+      {formikContext && (
+        <FormikErrorFeedback name={name}>
+          <Form.Text>{help}</Form.Text>
+        </FormikErrorFeedback>
+      )}
     </Form.Group>
   );
 };

src/generic/configure-modal/PrereqSettings.jsx

@@ -61,6 +61,7 @@ const PrereqSettings = ({
             <FormikControl
               name="prereqMinScore"
               value={prereqMinScore}
+              setFieldValue={(field, value) => setFieldValue(field, value === '' ? '' : Number(value))}
               label={<Form.Label>{intl.formatMessage(messages.minScoreLabel)}</Form.Label>}
               controlClassName="text-right"
               controlClasses="w-7rem"
@@ -70,6 +71,7 @@ const PrereqSettings = ({
             <FormikControl
               name="prereqMinCompletion"
               value={prereqMinCompletion}
+              setFieldValue={(field, value) => setFieldValue(field, value === '' ? '' : Number(value))}
               label={<Form.Label>{intl.formatMessage(messages.minCompletionLabel)}</Form.Label>}
               controlClassName="text-right"
               controlClasses="w-7rem"

src/generic/key-utils.test.ts

@@ -33,6 +33,7 @@ describe('component utils', () => {
     for (const input of ['', undefined, null, 'not a key', 'lb:foo', 'block-v1:foo']) {
       it(`throws an exception for usage key '${input}'`, () => {
         expect(() => getBlockType(input as any)).toThrow(`Invalid usageKey: ${input}`);
+      expect(getBlockType(input as any, 'empty')).toBe('');
       });
     }
   });

src/generic/key-utils.ts

@@ -3,7 +3,10 @@
  * @param usageKey e.g. `lb:org:lib:html:id`, `block-v1:org+type@html+block@1`
  * @returns The block type as a string
  */
-export function getBlockType(usageKey: string): string {
+export function getBlockType(
+  usageKey: string,
+  onInvalid: 'empty' | 'error' = 'error',
+): string {
   if (usageKey) {
     if (usageKey.startsWith('lb:') || usageKey.startsWith('lct:')) {
       const blockType = usageKey.split(':')[3];
@@ -17,6 +20,11 @@ export function getBlockType(usageKey: string): string {
       }
     }
   }
+
+  if (onInvalid === 'empty') {
+    return '';
+  }
+
   throw new Error(`Invalid usageKey: ${usageKey}`);
 }
 

src/hooks.ts

@@ -230,9 +230,18 @@ export function useToggleWithValue<T>(defaultValue?: T): [
   return [isDefined, value, define, undefine];
 }
 
+type SetStateWithCallbackAction<T> = React.SetStateAction<T | undefined> | {
+  value: React.SetStateAction<T | undefined>;
+  skipCallback?: boolean;
+};
+
 /**
  * Hook to use `useState` and also trigger a callback when the state updates. This is particularly useful for
  * scenarios where you want to update the UI or perform side effects every time the state changes.
+ *
+ * The returned setter also accepts `{ value, skipCallback }` to optionally suppress the callback for a
+ * specific update.
+ *
  * @param defaultValue The default value of the state
  * @param callback Receives the latest value as argument
  * @param delay Time in milliseconds before the callback is triggered after state update (defaults to 500 ms)
@@ -241,10 +250,11 @@ export function useStateWithCallback<T>(
   defaultValue?: T,
   callback?: (val: T | undefined) => void,
   delay = 500,
-): [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>] {
+): [T | undefined, React.Dispatch<SetStateWithCallbackAction<T>>] {
   const [data, setData] = useState(defaultValue);
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const callbackRef = useRef(callback);
+  const skipCallbackRef = useRef(false);
   const prevDataRef = useRef(defaultValue); // Track previous value
 
   useEffect(() => {
@@ -259,6 +269,11 @@ export function useStateWithCallback<T>(
 
     prevDataRef.current = data;
 
+    if (skipCallbackRef.current) {
+      skipCallbackRef.current = false;
+      return () => {};
+    }
+
     if (timeoutRef.current) { clearTimeout(timeoutRef.current); }
 
     timeoutRef.current = setTimeout(() => {
@@ -268,5 +283,16 @@ export function useStateWithCallback<T>(
     return () => clearTimeout(timeoutRef.current);
   }, [data, delay]);
 
-  return [data, setData];
+  const setDataWithCallback = (value: SetStateWithCallbackAction<T>) => {
+    if (typeof value === 'object' && value !== null && 'value' in value) {
+      skipCallbackRef.current = !!value.skipCallback;
+      setData(value.value);
+      return;
+    }
+
+    skipCallbackRef.current = false;
+    setData(value as React.SetStateAction<T | undefined>);
+  };
+
+  return [data, setDataWithCallback];
 }