fixup! feat: subsection settings

Author: navinkarkera

src/course-outline/data/types.ts

@@ -111,7 +111,7 @@ export interface ConfigureSubsectionData {
   examReviewRules?: string,
   defaultTimeLimitMin?: number,
   hideAfterDue: boolean,
-  showCorrectness: string,
+  showCorrectness: "always" | "never" | "past_due" | "never_but_include_grade",
   isPrereq?: boolean,
   prereqUsageKey?: string,
   prereqMinScore?: number,

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

@@ -1,14 +1,17 @@
 import { FormattedMessage, useIntl } from "@edx/frontend-platform/i18n";
 import { Button, ButtonGroup, Form, Stack } from "@openedx/paragon";
 import { useConfigureSubsection, useCourseDetails, useCourseItemData } from "@src/course-outline/data/apiHooks";
+import { getProctoredExamsFlag, getTimedExamsFlag } from "@src/course-outline/data/selectors";
 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 { FormEvent, useState } from "react";
+import { useState } from "react";
+import { useSelector } from "react-redux";
 import messages from './messages';
 
 interface Props {
@@ -102,7 +105,7 @@ const GradingSection = ({ subsectionId, onChange }: SubProps) => {
         </Button>
       </ButtonGroup>
       {graded &&
-        <Form.Group>
+        <Form.Group className="mt-2">
           <Form.Label className="x-small">
             <FormattedMessage {...messages.subsectionGradingDropdownLabel} />
           </Form.Label>
@@ -120,7 +123,7 @@ const GradingSection = ({ subsectionId, onChange }: SubProps) => {
         </Form.Group>
       }
       {!courseDetails?.selfPaced && graded &&
-        <Stack className="mt-3" direction="horizontal" gap={3}>
+        <Stack direction="horizontal" gap={3}>
           <DatepickerControl
             type={DATEPICKER_TYPES.date}
             value={localState?.dueDate}
@@ -142,6 +145,144 @@ const GradingSection = ({ subsectionId, onChange }: SubProps) => {
   );
 }
 
+const VisibilitySection = ({ subsectionId, onChange }: SubProps) => {
+  const intl = useIntl();
+  const { data: itemData } = useCourseItemData(subsectionId);
+  const [localState, setLocalState] = useStateWithCallback<Partial<ConfigureSubsectionData>>(
+    {
+      isVisibleToStaffOnly: itemData?.visibilityState === VisibilityTypes.STAFF_ONLY,
+      hideAfterDue: itemData?.hideAfterDue,
+    },
+    (val) => onChange(val || {})
+  );
+
+  return (
+    <SidebarSection
+      title={intl.formatMessage(messages.subsectionGradingTitle)}
+    >
+      <ButtonGroup toggle>
+        <Button
+          variant={localState?.isVisibleToStaffOnly ? 'outline-primary' : 'primary'}
+          onClick={() => setLocalState({ ...localState,  isVisibleToStaffOnly: false })}
+        >
+          <FormattedMessage {...messages.subsectionVisibilityStudentVisible} />
+        </Button>
+        <Button
+          variant={localState?.isVisibleToStaffOnly ? 'primary' : 'outline-primary'}
+          onClick={() => setLocalState({
+            ...localState,
+            isVisibleToStaffOnly: true,
+            hideAfterDue: false,
+          })}
+        >
+          <FormattedMessage {...messages.subsectionVisibilityStaffOnly} />
+        </Button>
+      </ButtonGroup>
+      {!localState?.isVisibleToStaffOnly && <Form.Checkbox
+        checked={localState?.hideAfterDue}
+        className="mt-2"
+        onChange={ (e) => setLocalState({
+          ...localState,
+          hideAfterDue: e.target.checked,
+          isVisibleToStaffOnly: false,
+        }) }
+      >
+        <FormattedMessage {...messages.subsectionVisibilityHideAfterDueLabel} />
+      </Form.Checkbox>}
+    </SidebarSection>
+  );
+}
+
+const AssessmentResultVisibilitySection = ({ subsectionId, onChange }: SubProps) => {
+  const intl = useIntl();
+  const { data: itemData } = useCourseItemData(subsectionId);
+  const [localState, setLocalState] = useStateWithCallback<Partial<ConfigureSubsectionData>>(
+    {
+      showCorrectness: itemData?.showCorrectness,
+    },
+    (val) => onChange(val || {})
+  );
+
+  return (
+    <SidebarSection
+      title={intl.formatMessage(messages.subsectionAssessmentResultsTitle)}
+    >
+      <ButtonGroup toggle>
+        <Button
+          variant={localState?.showCorrectness === "always" ? 'primary' : 'outline-primary'}
+          onClick={() => setLocalState({ showCorrectness: "always" })}
+        >
+          <FormattedMessage {...messages.subsectionAssessmentResultsShowBtn} />
+        </Button>
+        <Button
+          variant={["never", "past_due"].includes(localState?.showCorrectness || "") ? 'primary' : 'outline-primary'}
+          onClick={() => {
+            if (localState?.showCorrectness === "always") {
+              setLocalState({ showCorrectness: "never" })
+            }
+          }}
+        >
+          <FormattedMessage {...messages.subsectionAssessmentResultsHideBtn} />
+        </Button>
+      </ButtonGroup>
+      <Form.Checkbox
+        checked={localState?.showCorrectness === "past_due"}
+        className="mt-2"
+        onChange={() => setLocalState({ showCorrectness: "past_due" })}
+      >
+        <FormattedMessage {...messages.subsectionAssessmentResultsCheckbox} />
+      </Form.Checkbox>
+    </SidebarSection>
+  );
+}
+
+const SpecialExamSection = ({ subsectionId, onChange }: SubProps) => {
+  const intl = useIntl();
+  const { data: itemData } = useCourseItemData(subsectionId);
+  const enableTimedExams = useSelector(getTimedExamsFlag);
+  const enableProctoredExams = useSelector(getProctoredExamsFlag);
+  const [localState, setLocalState] = useStateWithCallback<Partial<ConfigureSubsectionData>>(
+    {
+      showCorrectness: itemData?.showCorrectness,
+    },
+    (val) => onChange(val || {})
+  );
+
+  const setFieldValue = (key: keyof ConfigureSubsectionData, value: any) => {
+    setLocalState({
+      ...localState,
+      [key]: value,
+    })
+  }
+
+  return (
+    <SidebarSection
+      title={intl.formatMessage(messages.subsectionSpecialExamTitle)}
+    >
+      <AdvancedTab
+        values={{
+          isProctoredExam: itemData?.isProctoredExam,
+          isTimeLimited: itemData?.isTimeLimited,
+          isOnboardingExam: itemData?.isOnboardingExam,
+          isPracticeExam: itemData?.isPracticeExam,
+          defaultTimeLimitMinutes: itemData?.defaultTimeLimitMinutes,
+          examReviewRules: itemData?.examReviewRules,
+        }}
+        setFieldValue={setFieldValue}
+        prereqs={itemData?.prereqs}
+        releasedToStudents={itemData?.releasedToStudents}
+        wasExamEverLinkedWithExternal={itemData?.wasExamEverLinkedWithExternal}
+        enableProctoredExams={enableProctoredExams}
+        enableTimedExams={enableTimedExams}
+        supportsOnboarding={itemData?.supportsOnboarding}
+        showReviewRules={itemData?.showReviewRules}
+        wasProctoredExam={itemData?.isProctoredExam}
+        onlineProctoringRules={itemData?.onlineProctoringRules}
+      />
+    </SidebarSection>
+  );
+}
+
 export const SubsectionSettings = ({ subsectionId }: Props) => {
   const { courseId } = useCourseAuthoringContext();
   const { data: courseDetails } = useCourseDetails(courseId);
@@ -186,6 +327,18 @@ export const SubsectionSettings = ({ subsectionId }: Props) => {
         subsectionId={subsectionId}
         onChange={onChange}
       />
+      <VisibilitySection
+        subsectionId={subsectionId}
+        onChange={onChange}
+      />
+      <AssessmentResultVisibilitySection
+        subsectionId={subsectionId}
+        onChange={onChange}
+      />
+      <SpecialExamSection
+        subsectionId={subsectionId}
+        onChange={onChange}
+      />
     </SidebarContent>
   )
 }

src/course-outline/outline-sidebar/info-sidebar/messages.ts

@@ -66,11 +66,31 @@ const messages = defineMessages({
     defaultMessage: 'Staff Only',
     description: 'Visibility option for staff only in subsection settings sidebar',
   },
+  subsectionVisibilityHideAfterDueLabel: {
+    id: 'course-authoring.course-outline.sidebar.library.subsection-settings.visibility.hideAfterDue',
+    defaultMessage: 'Hide content after due date',
+    description: 'Hide content after due date Checkbox label',
+  },
   subsectionAssessmentResultsTitle: {
     id: 'course-authoring.course-outline.sidebar.library.subsection-settings.assessment-results.title',
     defaultMessage: 'Assessment Results Visibility',
     description: 'Subsection Assessment Results Visibility section title in subsection settings sidebar',
   },
+  subsectionAssessmentResultsShowBtn: {
+    id: 'course-authoring.course-outline.sidebar.library.subsection-settings.assessment-results.show-btn',
+    defaultMessage: 'Show',
+    description: 'Subsection Assessment Results Visibility section show button text in subsection settings sidebar',
+  },
+  subsectionAssessmentResultsHideBtn: {
+    id: 'course-authoring.course-outline.sidebar.library.subsection-settings.assessment-results.hide-btn',
+    defaultMessage: 'Hide',
+    description: 'Subsection Assessment Results Visibility section hide button text in subsection settings sidebar',
+  },
+  subsectionAssessmentResultsCheckbox: {
+    id: 'course-authoring.course-outline.sidebar.library.subsection-settings.assessment-results.checkbox',
+    defaultMessage: 'Only show results after due date',
+    description: 'Subsection Assessment Results Visibility section checkbox text in subsection settings sidebar',
+  },
   subsectionSpecialExamTitle: {
     id: 'course-authoring.course-outline.sidebar.library.subsection-settings.special-exam.title',
     defaultMessage: 'Set as Special Exam',

src/data/types.ts

@@ -97,7 +97,7 @@ export interface XBlockBase {
   actions: XBlockActions;
   explanatoryMessage?: string;
   userPartitions: UserPartitionTypes[];
-  showCorrectness: string;
+  showCorrectness: "always" | "never" | "past_due" | "never_but_include_grade",
   highlights: string[];
   highlightsEnabled: boolean;
   highlightsPreviewOnly: boolean;

src/generic/configure-modal/AdvancedTab.tsx

@@ -14,7 +14,7 @@ import messages from './messages';
 import PrereqSettings from './PrereqSettings';
 
 interface ValuesProps {
-  isTimeLimited: boolean;
+  isTimeLimited?: boolean;
   defaultTimeLimitMinutes?: number;
   isPrereq?: boolean;
   prereqUsageKey?: string;

src/hooks.ts

@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { history } from '@edx/frontend-platform';
 import { useLocation, useSearchParams } from 'react-router-dom';
+import { isEqual } from 'lodash';
 
 export const useScrollToHashElement = ({ isLoading }: { isLoading: boolean }) => {
   const [elementWithHash, setElementWithHash] = useState<string | null>(null);
@@ -241,8 +242,16 @@ export function useStateWithCallback<T>(
 ): [T | undefined, (val?: T) => void] {
   const [value, setValue] = useState<T | undefined>(defaultValue);
   const setValueWithCallback = useCallback((val?: T) => {
-    setValue(val);
-    callback?.(val)
+    let hasChanged = false;
+    setValue((prev) => {
+      if (!isEqual(val, prev)) {
+        hasChanged = true;
+      }
+      return val;
+    });
+    if (hasChanged) {
+      callback?.(val)
+    }
   }, [callback]);
   return [value, setValueWithCallback];
 }