From 875cad745ba6491b9857a1b7e152d50059dd1a26 Mon Sep 17 00:00:00 2001
From: Stephannie Jimenez <steff456@hotmail.com>
Date: Wed, 20 Dec 2023 21:41:11 -0500
Subject: [PATCH] fix: fix non saving options and add review style changes

---
 src/course-outline/CourseOutline.jsx          |  1 -
 src/course-outline/CourseOutline.test.jsx     | 45 +++++++++++++++----
 .../configure-modal/AdvancedTab.jsx           |  5 ++-
 .../configure-modal/BasicTab.jsx              | 15 +++----
 .../configure-modal/ConfigureModal.jsx        | 29 +++++++-----
 .../configure-modal/ConfigureModal.test.jsx   | 43 ++++++++++++++++--
 .../configure-modal/VisibilityTab.jsx         |  6 +--
 7 files changed, 107 insertions(+), 37 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 72fb5182b5..a6c91b933a 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -258,7 +258,6 @@ const CourseOutline = ({ courseId }) => {
           onPublishSubmit={handlePublishItemSubmit}
         />
         <ConfigureModal
-          isSubsection={isSubsectionConfigure}
           isOpen={isConfigureModalOpen}
           onClose={closeConfigureModal}
           onConfigureSubmit={
diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
index 94d7f2013c..a5aa91d09f 100644
--- a/src/course-outline/CourseOutline.test.jsx
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -42,6 +42,7 @@ import messages from './messages';
 import headerMessages from './header-navigations/messages';
 import cardHeaderMessages from './card-header/messages';
 import enableHighlightsModalMessages from './enable-highlights-modal/messages';
+import configureModalMessages from './configure-modal/messages';
 
 let axiosMock;
 let store;
@@ -485,25 +486,37 @@ describe('<CourseOutline />', () => {
   });
 
   it('check configure subsection when configure subsection query is successful', async () => {
-    const { findAllByTestId, findByText, findAllByPlaceholderText } = render(<RootWrapper />);
+    const {
+      findAllByTestId,
+      findByText,
+      findAllByPlaceholderText,
+      getByText,
+      getByRole,
+      getAllByRole,
+      getByTestId,
+    } = render(<RootWrapper />);
     const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
     const subsection = section.childInfo.children[0];
     const newReleaseDate = '2025-08-10T10:00:00Z';
+    const newGraderType = 'Homework';
+    const newDue = '2025-09-10T10:00:00Z';
+    const isTimeLimited = true;
+    const defaultTimeLimitMinutes = 210;
 
     axiosMock
       .onPost(getCourseItemApiUrl(subsection.id), {
         publish: 'republish',
-        graderType: 'notgraded',
+        graderType: newGraderType,
         metadata: {
           visible_to_staff_only: true,
-          due: null,
+          due: newDue,
           hide_after_due: false,
           show_correctness: false,
           is_practice_exam: false,
-          is_time_limited: false,
+          is_time_limited: isTimeLimited,
           exam_review_rules: '',
           is_proctored_enabled: false,
-          default_time_limit_minutes: null,
+          default_time_limit_minutes: defaultTimeLimitMinutes,
           is_onboarding_exam: false,
           start: newReleaseDate,
         },
@@ -520,6 +533,10 @@ describe('<CourseOutline />', () => {
     expect(subsectionDropdownButton).toBeInTheDocument();
 
     subsection.start = newReleaseDate;
+    subsection.due = newDue;
+    subsection.format = newGraderType;
+    subsection.isTimeLimited = isTimeLimited;
+    subsection.defaultTimeLimitMinutes = defaultTimeLimitMinutes;
     section.childInfo.children[0] = subsection;
     axiosMock
       .onGet(getXBlockApiUrl(section.id))
@@ -530,10 +547,10 @@ describe('<CourseOutline />', () => {
       section.id,
       true,
       newReleaseDate,
-      'notgraded',
-      null,
-      false,
-      null,
+      newGraderType,
+      newDue,
+      true,
+      defaultTimeLimitMinutes,
       false,
       false,
     ), store.dispatch);
@@ -543,6 +560,16 @@ describe('<CourseOutline />', () => {
 
     const datePicker = await findAllByPlaceholderText('MM/DD/YYYY');
     expect(datePicker[0]).toHaveValue('08/10/2025');
+    expect(datePicker[1]).toHaveValue('09/10/2025');
+
+    expect(getByText(newGraderType)).toBeInTheDocument();
+    const advancedTab = getByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
+    fireEvent.click(advancedTab);
+    const radioButtons = await getAllByRole('radio');
+    expect(radioButtons[0]).toHaveProperty('checked', false);
+    expect(radioButtons[1]).toHaveProperty('checked', true);
+    const hours = await getByTestId('hour-autosuggest');
+    expect(hours).toHaveValue('03:30');
   });
 
   it('check update highlights when update highlights query is successfully', async () => {
diff --git a/src/course-outline/configure-modal/AdvancedTab.jsx b/src/course-outline/configure-modal/AdvancedTab.jsx
index f6db1ddfd2..f4e552dbab 100644
--- a/src/course-outline/configure-modal/AdvancedTab.jsx
+++ b/src/course-outline/configure-modal/AdvancedTab.jsx
@@ -50,7 +50,7 @@ const AdvancedTab = ({
 
   return (
     <>
-      <h3 className="mt-3"><FormattedMessage {...messages.setSpecialExam} /></h3>
+      <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.setSpecialExam} /></h5>
       <hr />
       <Form.RadioSet
         name="specialExam"
@@ -67,10 +67,11 @@ const AdvancedTab = ({
       </Form.RadioSet>
       { isTimeLimited && (
         <>
-          <h4 className="mt-3"><FormattedMessage {...messages.timeAllotted} /></h4>
+          <h6 className="mt-4 text-gray-700"><FormattedMessage {...messages.timeAllotted} /></h6>
           <Form.Autosuggest
             value={defaultTimeLimit === null ? formatHour(timeLimits[0]) : formatHour(defaultTimeLimit)}
             onSelected={(value) => setSelected(value)}
+            data-testid="hour-autosuggest"
           >
             {generateTimeLimits()}
           </Form.Autosuggest>
diff --git a/src/course-outline/configure-modal/BasicTab.jsx b/src/course-outline/configure-modal/BasicTab.jsx
index 4c8fda6394..b715fc6c7b 100644
--- a/src/course-outline/configure-modal/BasicTab.jsx
+++ b/src/course-outline/configure-modal/BasicTab.jsx
@@ -20,24 +20,21 @@ const BasicTab = ({
     setReleaseDate(value);
   };
 
-  const onChangeGraderType = (e) => {
-    const { value } = e.target;
-    return value === 'Not Graded' ? setGraderType('notgraded') : setGraderType(value);
-  };
+  const onChangeGraderType = (e) => setGraderType(e.target.value);
 
   const onChangeDueDate = (value) => {
     setDueDate(value);
   };
 
   const createOptions = () => courseGraders.map((option) => (
-    <option> {option} </option>
+    <option value={option}> {option} </option>
   ));
 
   return (
     <>
-      <h3 className="mt-3"><FormattedMessage {...messages.releaseDateAndTime} /></h3>
+      <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.releaseDateAndTime} /></h5>
       <hr />
-      <Stack direction="horizontal" gap={5}>
+      <Stack className="mt-3" direction="horizontal" gap={5}>
         <DatepickerControl
           type={DATEPICKER_TYPES.date}
           value={releaseDate}
@@ -56,7 +53,7 @@ const BasicTab = ({
       {
         isSubsection ? (
           <div>
-            <h3 className="mt-3"><FormattedMessage {...messages.grading} /></h3>
+            <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.grading} /></h5>
             <hr />
             <Form.Label><FormattedMessage {...messages.gradeAs} /></Form.Label>
             <Form.Control
@@ -65,7 +62,7 @@ const BasicTab = ({
               onChange={(value) => onChangeGraderType(value)}
               data-testid="grader-type-select"
             >
-              <option> Not Graded </option>
+              <option value="Not Graded"> Not Graded </option>
               {createOptions()}
             </Form.Control>
             <Stack direction="horizontal" gap={5}>
diff --git a/src/course-outline/configure-modal/ConfigureModal.jsx b/src/course-outline/configure-modal/ConfigureModal.jsx
index be9beb74ab..45fc28e25e 100644
--- a/src/course-outline/configure-modal/ConfigureModal.jsx
+++ b/src/course-outline/configure-modal/ConfigureModal.jsx
@@ -19,7 +19,6 @@ import VisibilityTab from './VisibilityTab';
 import AdvancedTab from './AdvancedTab';
 
 const ConfigureModal = ({
-  isSubsection,
   isOpen,
   onClose,
   onConfigureSubmit,
@@ -29,30 +28,41 @@ const ConfigureModal = ({
     displayName,
     start: sectionStartDate,
     visibilityState,
-    dueDate,
+    due,
     isTimeLimited,
     defaultTimeLimitMinutes,
     hideAfterDue,
     showCorrectness,
     courseGraders,
+    category,
+    format,
   } = useSelector(getCurrentItem);
   const [releaseDate, setReleaseDate] = useState(sectionStartDate);
   const [isVisibleToStaffOnly, setIsVisibleToStaffOnly] = useState(visibilityState === VisibilityTypes.STAFF_ONLY);
   const [saveButtonDisabled, setSaveButtonDisabled] = useState(true);
-  const [graderType, setGraderType] = useState('Not Graded');
+  const [graderType, setGraderType] = useState(format == null ? 'Not Graded' : format);
   const [dueDateState, setDueDateState] = useState('');
   const [isTimeLimitedState, setIsTimeLimitedState] = useState(false);
   const [defaultTimeLimitMin, setDefaultTimeLimitMin] = useState(30);
   const [hideAfterDueState, setHideAfterDueState] = useState(false);
   const [showCorrectnessState, setShowCorrectnessState] = useState(false);
+  const [isSubsection, setIsSubsection] = useState(category === 'sequential');
 
   useEffect(() => {
     setReleaseDate(sectionStartDate);
   }, [sectionStartDate]);
 
   useEffect(() => {
-    setDueDateState(dueDate);
-  }, [dueDate]);
+    setIsSubsection(category === 'sequential');
+  }, [category]);
+
+  useEffect(() => {
+    setGraderType(format == null ? 'Not Graded' : format);
+  }, [format]);
+
+  useEffect(() => {
+    setDueDateState(due);
+  }, [due]);
 
   useEffect(() => {
     setIsTimeLimitedState(isTimeLimited);
@@ -79,12 +89,12 @@ const ConfigureModal = ({
     setSaveButtonDisabled(
       visibilityUnchanged
       && releaseDate === sectionStartDate
-      && dueDateState === dueDate
+      && dueDateState === due
       && isTimeLimitedState === isTimeLimited
       && defaultTimeLimitMin === defaultTimeLimitMinutes
       && hideAfterDueState === hideAfterDue
       && showCorrectnessState === showCorrectness
-      && graderType === 'Not Graded',
+      && graderType === format,
     );
   }, [
     releaseDate,
@@ -116,13 +126,13 @@ const ConfigureModal = ({
 
   const handleClose = () => {
     setReleaseDate(sectionStartDate);
-    setDueDateState(dueDate);
+    setDueDateState(due);
     setIsTimeLimitedState(isTimeLimited);
     setDefaultTimeLimitMin(defaultTimeLimitMinutes);
     setHideAfterDueState(hideAfterDue);
     setShowCorrectnessState(showCorrectness);
     setIsVisibleToStaffOnly(visibilityState === VisibilityTypes.STAFF_ONLY);
-    setGraderType('Not Graded');
+    setGraderType(format);
   };
 
   return (
@@ -193,7 +203,6 @@ const ConfigureModal = ({
 };
 
 ConfigureModal.propTypes = {
-  isSubsection: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   onConfigureSubmit: PropTypes.func.isRequired,
diff --git a/src/course-outline/configure-modal/ConfigureModal.test.jsx b/src/course-outline/configure-modal/ConfigureModal.test.jsx
index 36f213788c..224faa022b 100644
--- a/src/course-outline/configure-modal/ConfigureModal.test.jsx
+++ b/src/course-outline/configure-modal/ConfigureModal.test.jsx
@@ -30,12 +30,25 @@ jest.mock('react-router-dom', () => ({
 
 const currentSectionMock = {
   displayName: 'Section1',
+  category: 'chapter',
+  start: '2025-08-10T10:00:00Z',
+  visibilityState: true,
+  format: 'Not Graded',
   childInfo: {
     displayName: 'Subsection',
     children: [
       {
         displayName: 'Subsection 1',
         id: 1,
+        category: 'sequential',
+        due: '',
+        start: '2025-08-10T10:00:00Z',
+        visibilityState: true,
+        defaultTimeLimitMinutes: null,
+        hideAfterDue: false,
+        showCorrectness: false,
+        format: 'Homework',
+        courseGraders: ['Homework', 'Exam'],
         childInfo: {
           displayName: 'Unit',
           children: [
@@ -49,6 +62,15 @@ const currentSectionMock = {
       {
         displayName: 'Subsection 2',
         id: 2,
+        category: 'sequential',
+        due: '',
+        start: '2025-08-10T10:00:00Z',
+        visibilityState: true,
+        defaultTimeLimitMinutes: null,
+        hideAfterDue: false,
+        showCorrectness: false,
+        format: 'Homework',
+        courseGraders: ['Homework', 'Exam'],
         childInfo: {
           displayName: 'Unit',
           children: [
@@ -62,6 +84,15 @@ const currentSectionMock = {
       {
         displayName: 'Subsection 3',
         id: 3,
+        category: 'sequential',
+        due: '',
+        start: '2025-08-10T10:00:00Z',
+        visibilityState: true,
+        defaultTimeLimitMinutes: null,
+        hideAfterDue: false,
+        showCorrectness: false,
+        format: 'Homework',
+        courseGraders: ['Homework', 'Exam'],
         childInfo: {
           children: [],
         },
@@ -77,7 +108,6 @@ const renderComponent = () => render(
   <AppProvider store={store}>
     <IntlProvider locale="en">
       <ConfigureModal
-        isSubsection={false}
         isOpen
         onClose={onCloseMock}
         onConfigureSubmit={onConfigureSubmitMock}
@@ -142,6 +172,14 @@ describe('<ConfigureModal />', () => {
 const currentSubsectionMock = {
   displayName: 'Subsection 1',
   id: 1,
+  category: 'sequential',
+  due: '',
+  start: '2025-08-10T10:00:00Z',
+  visibilityState: true,
+  defaultTimeLimitMinutes: null,
+  hideAfterDue: false,
+  showCorrectness: false,
+  format: 'Homework',
   courseGraders: ['Homework', 'Exam'],
   childInfo: {
     displayName: 'Unit',
@@ -162,7 +200,6 @@ const renderSubsectionComponent = () => render(
   <AppProvider store={store}>
     <IntlProvider locale="en">
       <ConfigureModal
-        isSubsection
         isOpen
         onClose={onCloseMock}
         onConfigureSubmit={onConfigureSubmitMock}
@@ -242,7 +279,7 @@ describe('<ConfigureModal />', () => {
     expect(saveButton).toBeDisabled();
 
     const input = getByTestId('grader-type-select');
-    fireEvent.change(input, { target: { value: 'Homework' } });
+    fireEvent.change(input, { target: { value: 'Exam' } });
     expect(saveButton).not.toBeDisabled();
   });
 });
diff --git a/src/course-outline/configure-modal/VisibilityTab.jsx b/src/course-outline/configure-modal/VisibilityTab.jsx
index f62843811f..c44842333b 100644
--- a/src/course-outline/configure-modal/VisibilityTab.jsx
+++ b/src/course-outline/configure-modal/VisibilityTab.jsx
@@ -50,9 +50,9 @@ const VisibilityTab = ({
     <>
       {
         isSubsection ? (
-          <h3 className="mt-3"><FormattedMessage {...messages.subsectionVisibility} /></h3>
+          <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.subsectionVisibility} /></h5>
         ) : (
-          <h3 className="mt-3"><FormattedMessage {...messages.sectionVisibility} /></h3>
+          <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.sectionVisibility} /></h5>
         )
       }
       <hr />
@@ -77,7 +77,7 @@ const VisibilityTab = ({
               </Form.Radio>
               <Form.Text><FormattedMessage {...messages.hideEntireSubsectionDescription} /></Form.Text>
             </Form.RadioSet>
-            <h3 className="mt-3"><FormattedMessage {...messages.assessmentResultsVisibility} /></h3>
+            <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.assessmentResultsVisibility} /></h5>
             <Form.RadioSet
               name="assessmentResultsVisibility"
               onChange={correctnessChanged}