fix: remove isSubsection state, fix css issues and fix tests

open-craft · Dec 22, 2023 · de0d8e5 · de0d8e5
1 parent 89464b5
commit de0d8e5
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 44 deletions.
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
@@ -77,8 +77,7 @@ const CourseOutline = ({ courseId }) => {
     handleInternetConnectionFailed,
     handleOpenHighlightsModal,
     handleHighlightsFormSubmit,
-    handleConfigureSectionSubmit,
-    handleConfigureSubsectionSubmit,
+    handleConfigureSubmit,
     handlePublishItemSubmit,
     handleEditSubmit,
     handleDeleteItemSubmit,
@@ -90,8 +89,6 @@ const CourseOutline = ({ courseId }) => {
   } = useCourseOutline({ courseId });
 
   const [sections, setSections] = useState(sectionsList);
-  const [isSubsectionConfigure, setIsSubsectionConfigure] = useState(false);
-
   const initialSections = [...sectionsList];
 
   const {
@@ -198,7 +195,6 @@ const CourseOutline = ({ courseId }) => {
                                   onDuplicateSubmit={handleDuplicateSectionSubmit}
                                   isSectionsExpanded={isSectionsExpanded}
                                   onNewSubsectionSubmit={handleNewSubsectionSubmit}
-                                  setIsSubsectionConfigure={setIsSubsectionConfigure}
                                 >
                                   {section.childInfo.children.map((subsection) => (
                                     <SubsectionCard
@@ -211,7 +207,6 @@ const CourseOutline = ({ courseId }) => {
                                       onEditSubmit={handleEditSubmit}
                                       onDuplicateSubmit={handleDuplicateSubsectionSubmit}
                                       onOpenConfigureModal={openConfigureModal}
-                                      setIsSubsectionConfigure={setIsSubsectionConfigure}
                                     />
                                   ))}
                                 </SectionCard>
@@ -260,9 +255,7 @@ const CourseOutline = ({ courseId }) => {
         <ConfigureModal
           isOpen={isConfigureModalOpen}
           onClose={closeConfigureModal}
-          onConfigureSubmit={
-            isSubsectionConfigure ? handleConfigureSubsectionSubmit : handleConfigureSectionSubmit
-          }
+          onConfigureSubmit={handleConfigureSubmit}
         />
         <DeleteModal
           isOpen={isDeleteModalOpen}

diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
@@ -490,10 +490,9 @@ describe('<CourseOutline />', () => {
       findAllByTestId,
       findByText,
       findAllByPlaceholderText,
-      getByText,
-      getByRole,
-      getAllByRole,
-      getByTestId,
+      findAllByRole,
+      findByRole,
+      findByTestId,
     } = render(<RootWrapper />);
     const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
     const subsection = section.childInfo.children[0];
@@ -562,13 +561,13 @@ describe('<CourseOutline />', () => {
     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 });
+    expect(await findByText(newGraderType)).toBeInTheDocument();
+    const advancedTab = await findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
     fireEvent.click(advancedTab);
-    const radioButtons = await getAllByRole('radio');
+    const radioButtons = await findAllByRole('radio');
     expect(radioButtons[0]).toHaveProperty('checked', false);
     expect(radioButtons[1]).toHaveProperty('checked', true);
-    const hours = await getByTestId('hour-autosuggest');
+    const hours = await findByTestId('hour-autosuggest');
     expect(hours).toHaveValue('03:30');
   });
 

diff --git a/src/course-outline/card-header/CardHeader.jsx b/src/course-outline/card-header/CardHeader.jsx
@@ -27,7 +27,6 @@ import messages from './messages';
 const CardHeader = ({
   title,
   status,
-  isSubsection,
   hasChanges,
   isExpanded,
   onClickPublish,
@@ -42,7 +41,6 @@ const CardHeader = ({
   onClickDelete,
   onClickDuplicate,
   namePrefix,
-  setIsSubsectionConfigure,
 }) => {
   const intl = useIntl();
   const [titleValue, setTitleValue] = useState(title);
@@ -59,11 +57,6 @@ const CardHeader = ({
     dependency: title,
   });
 
-  const performClickConfigure = () => {
-    setIsSubsectionConfigure(isSubsection);
-    onClickConfigure();
-  };
-
   return (
     <div className="item-card-header" data-testid={`${namePrefix}-card-header`}>
       {isFormOpen ? (
@@ -148,7 +141,7 @@ const CardHeader = ({
             </Dropdown.Item>
             <Dropdown.Item
               data-testid={`${namePrefix}-card-header__menu-configure-button`}
-              onClick={performClickConfigure}
+              onClick={onClickConfigure}
             >
               {intl.formatMessage(messages.menuConfigure)}
             </Dropdown.Item>
@@ -174,7 +167,6 @@ const CardHeader = ({
 CardHeader.propTypes = {
   title: PropTypes.string.isRequired,
   status: PropTypes.string.isRequired,
-  isSubsection: PropTypes.bool.isRequired,
   hasChanges: PropTypes.bool.isRequired,
   isExpanded: PropTypes.bool.isRequired,
   onExpand: PropTypes.func.isRequired,
@@ -189,7 +181,6 @@ CardHeader.propTypes = {
   onClickDelete: PropTypes.func.isRequired,
   onClickDuplicate: PropTypes.func.isRequired,
   namePrefix: PropTypes.string.isRequired,
-  setIsSubsectionConfigure: PropTypes.func.isRequired,
 };
 
 export default CardHeader;
diff --git a/src/course-outline/card-header/CardHeader.test.jsx b/src/course-outline/card-header/CardHeader.test.jsx
@@ -30,7 +30,6 @@ const cardHeaderProps = {
   onClickDelete: onClickDeleteMock,
   onClickDuplicate: onClickDuplicateMock,
   namePrefix: 'section',
-  setIsSubsectionConfigure: jest.fn(),
 };
 
 const renderComponent = (props) => render(

diff --git a/src/course-outline/configure-modal/BasicTab.jsx b/src/course-outline/configure-modal/BasicTab.jsx
@@ -65,7 +65,7 @@ const BasicTab = ({
               <option value="Not Graded"> Not Graded </option>
               {createOptions()}
             </Form.Control>
-            <Stack direction="horizontal" gap={5}>
+            <Stack className="mt-3" direction="horizontal" gap={5}>
               <DatepickerControl
                 type={DATEPICKER_TYPES.date}
                 value={dueDate}

diff --git a/src/course-outline/configure-modal/ConfigureModal.jsx b/src/course-outline/configure-modal/ConfigureModal.jsx
@@ -148,7 +148,7 @@ const ConfigureModal = ({
           {intl.formatMessage(messages.title, { title: displayName })}
         </ModalDialog.Title>
       </ModalDialog.Header>
-      <ModalDialog.Body className="configure-modal__body">
+      <ModalDialog.Body className={!isSubsection ? 'configure-modal__body' : ''}>
         <Tabs>
           <Tab eventKey="basic" title={intl.formatMessage(messages.basicTabTitle)}>
             <BasicTab

diff --git a/src/course-outline/configure-modal/ConfigureModal.scss b/src/course-outline/configure-modal/ConfigureModal.scss
@@ -6,3 +6,7 @@
     padding-top: 1.5rem;
   }
 }
+
+.configure-modal__body {
+  overflow: visible;
+}
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -116,8 +116,6 @@ const useCourseOutline = ({ courseId }) => {
 
   const handleConfigureSectionSubmit = (isVisibleToStaffOnly, startDatetime) => {
     dispatch(configureCourseSectionQuery(currentSection.id, isVisibleToStaffOnly, startDatetime));
-
-    closeConfigureModal();
   };
 
   const handleConfigureSubsectionSubmit = (
@@ -142,6 +140,19 @@ const useCourseOutline = ({ courseId }) => {
       hideAfterDueState,
       showCorrectnessState,
     ));
+  };
+
+  const handleConfigureSubmit = (...args) => {
+    switch (currentItem.category) {
+    case COURSE_BLOCK_NAMES.chapter.id:
+      handleConfigureSectionSubmit(...args);
+      break;
+    case COURSE_BLOCK_NAMES.sequential.id:
+      handleConfigureSubsectionSubmit(...args);
+      break;
+    default:
+      return;
+    }
     closeConfigureModal();
   };
 
@@ -212,8 +223,7 @@ const useCourseOutline = ({ courseId }) => {
     headerNavigationsActions,
     handleEnableHighlightsSubmit,
     handleHighlightsFormSubmit,
-    handleConfigureSectionSubmit,
-    handleConfigureSubsectionSubmit,
+    handleConfigureSubmit,
     handlePublishItemSubmit,
     handleEditSubmit,
     statusBarData,

diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
@@ -25,7 +25,6 @@ const SectionCard = ({
   onDuplicateSubmit,
   isSectionsExpanded,
   onNewSubsectionSubmit,
-  setIsSubsectionConfigure,
 }) => {
   const currentRef = useRef(null);
   const intl = useIntl();
@@ -109,8 +108,6 @@ const SectionCard = ({
           title={displayName}
           status={sectionStatus}
           hasChanges={hasChanges}
-          isSubsection={false}
-          setIsSubsectionConfigure={setIsSubsectionConfigure}
           isExpanded={isExpanded}
           onExpand={handleExpandContent}
           onClickMenuButton={handleClickMenuButton}
@@ -185,7 +182,6 @@ SectionCard.propTypes = {
   onDuplicateSubmit: PropTypes.func.isRequired,
   isSectionsExpanded: PropTypes.bool.isRequired,
   onNewSubsectionSubmit: PropTypes.func.isRequired,
-  setIsSubsectionConfigure: PropTypes.func.isRequired,
 };
 
 export default SectionCard;
diff --git a/src/course-outline/section-card/SectionCard.test.jsx b/src/course-outline/section-card/SectionCard.test.jsx
@@ -41,7 +41,6 @@ const renderComponent = (props) => render(
         onDuplicateSubmit={jest.fn()}
         isSectionsExpanded
         onNewSubsectionSubmit={jest.fn()}
-        setIsSubsectionConfigure={jest.fn()}
         {...props}
       >
         <span>children</span>

diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -21,7 +21,6 @@ const SubsectionCard = ({
   onOpenDeleteModal,
   onDuplicateSubmit,
   onOpenConfigureModal,
-  setIsSubsectionConfigure,
 }) => {
   const currentRef = useRef(null);
   const intl = useIntl();
@@ -87,7 +86,6 @@ const SubsectionCard = ({
       <CardHeader
         title={displayName}
         status={subsectionStatus}
-        isSubsection
         hasChanges={hasChanges}
         isExpanded={isExpanded}
         onExpand={handleExpandContent}
@@ -102,7 +100,6 @@ const SubsectionCard = ({
         isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
         onClickDuplicate={onDuplicateSubmit}
         namePrefix="subsection"
-        setIsSubsectionConfigure={setIsSubsectionConfigure}
       />
       {isExpanded && (
         <>
@@ -158,7 +155,6 @@ SubsectionCard.propTypes = {
   onOpenDeleteModal: PropTypes.func.isRequired,
   onDuplicateSubmit: PropTypes.func.isRequired,
   onOpenConfigureModal: PropTypes.func.isRequired,
-  setIsSubsectionConfigure: PropTypes.func.isRequired,
 };
 
 export default SubsectionCard;
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.jsx b/src/course-outline/subsection-card/SubsectionCard.test.jsx
@@ -52,7 +52,6 @@ const renderComponent = (props) => render(
         onEditSubmit={onEditSubectionSubmit}
         onDuplicateSubmit={jest.fn()}
         namePrefix="subsection"
-        setIsSubsectionConfigure={jest.fn()}
         {...props}
       >
         <span>children</span>