From 09eef604f79609a64581aca82feb995162d1d8f3 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@disroot.org>
Date: Tue, 23 Jan 2024 16:12:41 +0530
Subject: [PATCH] refactor: replace time picker by text box in advanced tab

---
 src/course-outline/CourseOutline.test.jsx     | 12 +++---
 .../configure-modal/AdvancedTab.jsx           | 39 ++++++++++---------
 .../configure-modal/ConfigureModal.jsx        |  1 -
 .../configure-modal/ConfigureModal.scss       | 15 -------
 4 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
index 205717dae..be9c62d0a 100644
--- a/src/course-outline/CourseOutline.test.jsx
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -676,7 +676,7 @@ describe('<CourseOutline />', () => {
     const newGraderType = 'Homework';
     const newDue = '2025-09-10T00:00:00Z';
     const isTimeLimited = true;
-    const defaultTimeLimitMinutes = 210;
+    const defaultTimeLimitMinutes = 3270;
 
     axiosMock
       .onPost(getCourseItemApiUrl(subsection.id), {
@@ -733,8 +733,8 @@ describe('<CourseOutline />', () => {
     let radioButtons = await within(configureModal).findAllByRole('radio');
     fireEvent.click(radioButtons[1]);
     let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
-    let hours = await within(hoursWrapper).findByRole('textbox');
-    fireEvent.change(hours, { target: { value: '03:30' } });
+    let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    fireEvent.change(hours, { target: { value: '54:30' } });
     const saveButton = await within(configureModal).findByTestId('configure-save-button');
     await act(async () => fireEvent.click(saveButton));
 
@@ -778,8 +778,8 @@ describe('<CourseOutline />', () => {
     expect(radioButtons[0]).toHaveProperty('checked', false);
     expect(radioButtons[1]).toHaveProperty('checked', true);
     hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
-    hours = await within(hoursWrapper).findByRole('textbox');
-    expect(hours).toHaveValue('03:30');
+    hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    expect(hours).toHaveValue('54:30');
   });
 
   it('check configure modal for unit', async () => {
@@ -1332,7 +1332,7 @@ describe('<CourseOutline />', () => {
       });
     const { findAllByTestId } = render(<RootWrapper />);
     const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
-    const [sectionElement] = await findAllByTestId('conditional-sortable-element--no-drag-handle')
+    const [sectionElement] = await findAllByTestId('conditional-sortable-element--no-drag-handle');
 
     await waitFor(() => {
       expect(within(sectionElement).queryByText(section.displayName)).toBeInTheDocument();
diff --git a/src/course-outline/configure-modal/AdvancedTab.jsx b/src/course-outline/configure-modal/AdvancedTab.jsx
index cb40a30c6..4a8c9771a 100644
--- a/src/course-outline/configure-modal/AdvancedTab.jsx
+++ b/src/course-outline/configure-modal/AdvancedTab.jsx
@@ -2,10 +2,8 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Form } from '@edx/paragon';
-import { useIntl, FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
-import { DatepickerControl, DATEPICKER_TYPES } from '../../generic/datepicker-control';
+import { FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
-import { convertToStringFromDate } from '../../utils';
 
 const AdvancedTab = ({
   isTimeLimited,
@@ -13,8 +11,6 @@ const AdvancedTab = ({
   defaultTimeLimit,
   setDefaultTimeLimit,
 }) => {
-  const intl = useIntl();
-
   const formatHour = (hour) => {
     const hh = Math.floor(hour / 60);
     const mm = hour % 60;
@@ -35,7 +31,7 @@ const AdvancedTab = ({
     return `${hhs}:${mms}`;
   };
 
-  const [timeLimit, setTimeLimit] = useState(convertToStringFromDate(moment(formatHour(defaultTimeLimit), 'HH:mm')));
+  const [timeLimit, setTimeLimit] = useState(formatHour(defaultTimeLimit));
 
   const handleChange = (e) => {
     if (e.target.value === 'timed') {
@@ -46,12 +42,15 @@ const AdvancedTab = ({
     }
   };
 
-  const setCurrentTimeLimit = (dateStr) => {
-    if (dateStr) {
-      const minutes = moment.duration(moment(dateStr).format('HH:mm')).asMinutes();
+  const setCurrentTimeLimit = (event) => {
+    const { validity: { valid } } = event.target;
+    let { value } = event.target;
+    value = value.trim();
+    if (value && valid) {
+      const minutes = moment.duration(value).asMinutes();
       setDefaultTimeLimit(minutes);
-      setTimeLimit(dateStr);
     }
+    setTimeLimit(value);
   };
 
   return (
@@ -72,14 +71,18 @@ const AdvancedTab = ({
         <Form.Text><FormattedMessage {...messages.timedDescription} /></Form.Text>
       </Form.RadioSet>
       { isTimeLimited && (
-        <div className="hide-header mt-3" data-testid="advanced-tab-hours-picker-wrapper">
-          <DatepickerControl
-            type={DATEPICKER_TYPES.time}
-            value={timeLimit}
-            label={intl.formatMessage(messages.timeAllotted)}
-            controlName="allotted-time"
-            onChange={setCurrentTimeLimit}
-          />
+        <div className="mt-3" data-testid="advanced-tab-hours-picker-wrapper">
+          <Form.Group>
+            <Form.Label>
+              <FormattedMessage {...messages.timeAllotted} />
+            </Form.Label>
+            <Form.Control
+              onChange={setCurrentTimeLimit}
+              value={timeLimit}
+              placeholder="HH:MM"
+              pattern="^[0-9][0-9]:[0-5][0-9]$"
+            />
+          </Form.Group>
           <Form.Text><FormattedMessage {...messages.timeLimitDescription} /></Form.Text>
         </div>
       )}
diff --git a/src/course-outline/configure-modal/ConfigureModal.jsx b/src/course-outline/configure-modal/ConfigureModal.jsx
index 764d99ac0..5772faf20 100644
--- a/src/course-outline/configure-modal/ConfigureModal.jsx
+++ b/src/course-outline/configure-modal/ConfigureModal.jsx
@@ -273,7 +273,6 @@ const ConfigureModal = ({
         onClose={onClose}
         hasCloseButton
         isFullscreenOnMobile
-        isFullscreenScroll
       >
         <div data-testid="configure-modal">
           <ModalDialog.Header className="configure-modal__header">
diff --git a/src/course-outline/configure-modal/ConfigureModal.scss b/src/course-outline/configure-modal/ConfigureModal.scss
index 841120a22..3b8d04a9b 100644
--- a/src/course-outline/configure-modal/ConfigureModal.scss
+++ b/src/course-outline/configure-modal/ConfigureModal.scss
@@ -1,23 +1,8 @@
 .configure-modal {
   max-width: 33.6875rem;
-  overflow: visible;
 
   .configure-modal__header {
     padding-top: 1.5rem;
     position: static;
   }
-
-  .configure-modal__body {
-    overflow: visible;
-  }
-
-  .hide-header {
-    .react-datepicker__header {
-      display: none;
-    }
-
-    .react-datepicker-wrapper {
-      width: 100%;
-    }
-  }
 }