fix: reworked grading deadline (openedx#584)

codecov.yml

@@ -8,3 +8,5 @@ coverage:
       default:
         target: auto
         threshold: 0%
+ignore:
+  - "src/grading-settings/grading-scale/react-ranger.js"

src/constants.js

@@ -23,3 +23,5 @@ export const NOTIFICATION_MESSAGES = {
   duplicating: 'Duplicating',
   deleting: 'Deleting',
 };
+
+export const DEFAULT_TIME_STAMP = '00:00';

src/grading-settings/GradingSettings.test.jsx

@@ -61,7 +61,7 @@ describe('<GradingSettings />', () => {
       expect(segmentInputs).toHaveLength(5);
       const segmentInput = segmentInputs[1];
       fireEvent.change(segmentInput, { target: { value: 'Test' } });
-      expect(segmentInput).toHaveValue('TEST');
+      expect(segmentInput).toHaveValue('Test');
       expect(getByTestId('grading-settings-save-alert')).toBeVisible();
     });
   });
@@ -73,7 +73,7 @@ describe('<GradingSettings />', () => {
       const segmentInput = segmentInputs[1];
       fireEvent.change(segmentInput, { target: { value: 'Test' } });
       fireEvent.click(getByText(messages.buttonCancelText.defaultMessage));
-      expect(segmentInput).toHaveValue('A');
+      expect(segmentInput).toHaveValue('a');
     });
   });
   it('should save segment input changes and display saving message', async () => {

src/grading-settings/assignment-section/messages.js

@@ -15,7 +15,7 @@ const messages = defineMessages({
   },
   assignmentTypeNameErrorMessage2: {
     id: 'course-authoring.grading-settings.assignment.type-name.error.message-2',
-    defaultMessage: 'For grading to work, you must change all {initialAssignmentName} subsections to {value}',
+    defaultMessage: 'For grading to work, you must change all {initialAssignmentName} subsections to {value}.',
   },
   assignmentTypeNameErrorMessage3: {
     id: 'course-authoring.grading-settings.assignment.type-name.error.message-3',

src/grading-settings/assignment-section/utils/enum.js

@@ -15,5 +15,5 @@ export const defaultAssignmentsPropTypes = {
   dropCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   shortLabel: PropTypes.string,
   weight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  id: PropTypes.number,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };

src/grading-settings/data/api.js

@@ -2,7 +2,7 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
-import { deepConvertingKeysToSnakeCase } from '../../utils';
+import { deepConvertingKeysToCamelCase, deepConvertingKeysToSnakeCase } from '../../utils';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
 export const getGradingSettingsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_grading/${courseId}`;
@@ -16,7 +16,7 @@ export const getCourseSettingsApiUrl = (courseId) => `${getApiBaseUrl()}/api/con
 export async function getGradingSettings(courseId) {
   const { data } = await getAuthenticatedHttpClient()
     .get(getGradingSettingsApiUrl(courseId));
-  return camelCaseObject(data);
+  return deepConvertingKeysToCamelCase(data);
 }
 
 /**

src/grading-settings/deadline-section/DeadlineSection.test.jsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import DeadlineSection from '.';
+import { DEFAULT_TIME_STAMP, TIME_FORMAT } from '../../constants';
 import messages from './messages';
+import DeadlineSection from '.';
 
 const testObj = {};
 
@@ -19,7 +20,6 @@ const RootWrapper = (props = {}) => (
   <IntlProvider locale="en">
     <DeadlineSection
       setShowSavePrompt={jest.fn()}
-      gracePeriod={gracePeriodDefaultTime}
       setGradingData={jest.fn()}
       setShowSuccessAlert={jest.fn()}
       {...props}
@@ -29,14 +29,17 @@ const RootWrapper = (props = {}) => (
 
 describe('<DeadlineSection />', () => {
   it('checking deadline label and description text', async () => {
-    const { getByText } = render(<RootWrapper />);
+    const { getByText } = render(<RootWrapper gracePeriod={gracePeriodDefaultTime} />);
     await waitFor(() => {
       expect(getByText(messages.gracePeriodOnDeadlineLabel.defaultMessage)).toBeInTheDocument();
       expect(getByText(messages.gracePeriodOnDeadlineDescription.defaultMessage)).toBeInTheDocument();
     });
   });
   it('checking deadline input value', async () => {
-    const { getByTestId } = render(<RootWrapper setGradingData={setGradingData} />);
+    const { getByTestId } = render(<RootWrapper
+      gracePeriod={gracePeriodDefaultTime}
+      setGradingData={setGradingData}
+    />);
     await waitFor(() => {
       const inputElement = getByTestId('deadline-period-input');
       expect(inputElement.value).toBe('12:12');
@@ -45,4 +48,34 @@ describe('<DeadlineSection />', () => {
       expect(testObj.gracePeriod.minutes).toBe(13);
     });
   });
+  it('checking deadline input value if grace Period equal null', async () => {
+    const { getByTestId } = render(<RootWrapper gracePeriod={null} setGradingData={setGradingData} />);
+    await waitFor(() => {
+      const inputElement = getByTestId('deadline-period-input');
+      expect(inputElement.value).toBe(DEFAULT_TIME_STAMP);
+    });
+  });
+  it('checking deadline input validation error', async () => {
+    const { getByPlaceholderText, getByText } = render(<RootWrapper
+      gracePeriod={gracePeriodDefaultTime}
+      setGradingData={setGradingData}
+    />);
+    await waitFor(() => {
+      const inputElement = getByPlaceholderText(TIME_FORMAT.toUpperCase());
+      fireEvent.change(inputElement, { target: { value: 'wrong:input format' } });
+      expect(getByText(`Grace period must be specified in ${TIME_FORMAT.toUpperCase()} format.`)).toBeInTheDocument();
+    });
+  });
+  it('checking deadline input time format validation error', async () => {
+    const { getByPlaceholderText, getByText } = render(<RootWrapper
+      gracePeriod={gracePeriodDefaultTime}
+      setGradingData={setGradingData}
+    />);
+
+    await waitFor(() => {
+      const inputElement = getByPlaceholderText(TIME_FORMAT.toUpperCase());
+      fireEvent.change(inputElement, { target: { value: '32:70' } });
+      expect(getByText(`Grace period must be specified in ${TIME_FORMAT.toUpperCase()} format.`)).toBeInTheDocument();
+    });
+  });
 });

src/grading-settings/deadline-section/index.jsx

@@ -1,46 +1,66 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Form } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
 
+import { DEFAULT_TIME_STAMP, TIME_FORMAT } from '../../constants';
+import { formatTime, timerValidation } from './utils';
 import messages from './messages';
 
-const DEFAULT_TIME_STAMP = '00:00';
-
 const DeadlineSection = ({
   intl, setShowSavePrompt, gracePeriod, setGradingData, setShowSuccessAlert,
 }) => {
-  const formatTime = (time) => (time >= 10 ? time.toString() : `0${time}`);
   const timeStampValue = gracePeriod
-    ? `${formatTime(gracePeriod.hours) }:${ formatTime(gracePeriod.minutes)}` : DEFAULT_TIME_STAMP;
+    ? gracePeriod.hours && `${formatTime(gracePeriod.hours)}:${formatTime(gracePeriod.minutes)}`
+    : DEFAULT_TIME_STAMP;
+  const [newDeadlineValue, setNewDeadlineValue] = useState(timeStampValue);
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    setNewDeadlineValue(timeStampValue);
+  }, [gracePeriod]);
 
   const handleDeadlineChange = (e) => {
-    const hoursAndMinutes = e.target.value.split(':');
-    setShowSavePrompt(true);
-    setGradingData(prevData => ({
-      ...prevData,
-      gracePeriod: {
-        hours: Number(hoursAndMinutes[0]),
-        minutes: parseInt(hoursAndMinutes[1] ?? 0, 10),
-      },
-    }));
-    setShowSuccessAlert(false);
+    const { value } = e.target;
+    const [hours, minutes] = value.split(':');
+
+    setNewDeadlineValue(value);
+
+    if (timerValidation(value, setShowSavePrompt, setIsError)) {
+      setGradingData(prevData => ({
+        ...prevData,
+        gracePeriod: {
+          hours: +hours,
+          minutes: +minutes,
+        },
+      }));
+      setShowSuccessAlert(false);
+    }
   };
 
   return (
-    <Form.Group className="w-50">
+    <Form.Group className={classNames('w-50 form-group-custom', {
+      'form-group-custom_isInvalid': isError,
+    })}
+    >
       <Form.Label className="grading-label">
         {intl.formatMessage(messages.gracePeriodOnDeadlineLabel)}
       </Form.Label>
       <Form.Control
         data-testid="deadline-period-input"
-        type="time"
-        value={timeStampValue}
+        value={newDeadlineValue}
         onChange={handleDeadlineChange}
+        placeholder={TIME_FORMAT.toUpperCase()}
       />
       <Form.Control.Feedback className="grading-description">
         {intl.formatMessage(messages.gracePeriodOnDeadlineDescription)}
       </Form.Control.Feedback>
+      {isError && (
+        <Form.Control.Feedback className="feedback-error" type="invalid">
+          {intl.formatMessage(messages.gracePeriodOnDeadlineErrorMsg, { timeFormat: TIME_FORMAT.toUpperCase() })}
+        </Form.Control.Feedback>
+      )}
     </Form.Group>
   );
 };
@@ -55,8 +75,8 @@ DeadlineSection.propTypes = {
   setGradingData: PropTypes.func.isRequired,
   setShowSuccessAlert: PropTypes.func.isRequired,
   gracePeriod: PropTypes.shape({
-    hours: PropTypes.number,
-    minutes: PropTypes.number,
+    hours: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    minutes: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }),
 };
 

src/grading-settings/deadline-section/messages.js

@@ -9,6 +9,10 @@ const messages = defineMessages({
     id: 'course-authoring.grading-settings.deadline.description',
     defaultMessage: 'Leeway on due dates',
   },
+  gracePeriodOnDeadlineErrorMsg: {
+    id: 'course-authoring.grading-settings.deadline.error.message',
+    defaultMessage: 'Grace period must be specified in {timeFormat} format.',
+  },
 });
 
 export default messages;

src/grading-settings/deadline-section/utils.js

@@ -0,0 +1,27 @@
+/**
+ * Time format conversions for values (hours or minutes) that are less than 10.
+ *
+ * @param {number} time - incoming time data.
+ * @returns {string} - formatted time string.
+ */
+export function formatTime(time) {
+  return (time >= 10 ? time.toString() : `0${time}`);
+}
+
+/**
+ * Validates inputStr as a time in HH:MM format.
+ *
+ * @param {string} inputStr - the input string to validate.
+ * @param {function} setShowSavePrompt - a function to control save prompt display.
+ * @param {function} setIsError - a function to set error state.
+ * @returns {boolean} - returns `true` if `inputStr` is a valid time, else `false`.
+ */
+export function timerValidation(inputStr, setShowSavePrompt, setIsError) {
+  const timePattern = /^(?:[01]\d|2[0-3]):[0-5]\d$/;
+
+  const isValid = timePattern.test(inputStr);
+  setShowSavePrompt(isValid);
+  setIsError(!isValid);
+
+  return isValid;
+}

src/grading-settings/deadline-section/utils.test.js

@@ -0,0 +1,42 @@
+import { formatTime, timerValidation } from './utils';
+
+const setShowSavePrompt = jest.fn();
+const setIsError = jest.fn();
+
+describe('formatTime', () => {
+  it('formats single-digit time values correctly', () => {
+    expect(formatTime(5)).toBe('05');
+    expect(formatTime(9)).toBe('09');
+  });
+
+  it('does not modify double-digit time values', () => {
+    expect(formatTime(10)).toBe('10');
+    expect(formatTime(45)).toBe('45');
+  });
+});
+
+describe('timerValidation', () => {
+  it('handles empty input', () => {
+    const result = timerValidation('', setShowSavePrompt, setIsError);
+
+    expect(result).toBe(false);
+    expect(setShowSavePrompt).toHaveBeenCalledWith(false);
+    expect(setIsError).toHaveBeenCalledWith(true);
+  });
+
+  it('validates correct HH:MM input', () => {
+    const result = timerValidation('12:34', setShowSavePrompt, setIsError);
+
+    expect(result).toBe(true);
+    expect(setShowSavePrompt).toHaveBeenCalledWith(true);
+    expect(setIsError).toHaveBeenCalledWith(false);
+  });
+
+  it('handles invalid input', () => {
+    const result = timerValidation('abc', setShowSavePrompt, setIsError);
+
+    expect(result).toBe(false);
+    expect(setShowSavePrompt).toHaveBeenCalledWith(false);
+    expect(setIsError).toHaveBeenCalledWith(true);
+  });
+});

src/grading-settings/grading-scale/GradingScale.jsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useRanger } from 'react-ranger';
 import { Icon, IconButtonWithTooltip } from '@edx/paragon';
 import { Add as IconAdd } from '@edx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
+import { useRanger } from './react-ranger';
 import messages from './messages';
 import { convertGradeData, MAXIMUM_SCALE_LENGTH } from './utils';
 import { GradingScaleTicks, GradingScaleHandle, GradingScaleSegment } from './components';
 
 const DEFAULT_LETTERS = ['A', 'B', 'C', 'D'];
+const getDefaultPassText = intl => intl.formatMessage(messages.defaultPassText);
 
 const GradingScale = ({
   intl,
@@ -144,7 +145,7 @@ const GradingScale = ({
       const updatedLetters = [...prevLetters];
       updatedLetters.splice(updatedLetters.length - 1, 1);
 
-      return updatedLetters.length === 1 ? ['pass'] : updatedLetters;
+      return updatedLetters.length === 1 ? [getDefaultPassText(intl)] : updatedLetters;
     });
   };
 

src/grading-settings/grading-scale/GradingScale.test.jsx

@@ -90,7 +90,7 @@ describe('<GradingScale />', () => {
       expect(segmentInputs).toHaveLength(5);
       const segmentInput = segmentInputs[1];
       fireEvent.change(segmentInput, { target: { value: 'Test' } });
-      expect(segmentInput).toHaveValue('TEST');
+      expect(segmentInput).toHaveValue('Test');
     });
   });
 
@@ -120,7 +120,7 @@ describe('<GradingScale />', () => {
       const segmentInputs = getAllByTestId('grading-scale-segment-input');
       expect(segmentInputs[0]).toHaveValue('Fail');
       fireEvent.change(segmentInputs[1], { target: { value: 'Test' } });
-      expect(segmentInputs[1]).toHaveValue('TEST');
+      expect(segmentInputs[1]).toHaveValue('Test');
     });
   });
 });

src/grading-settings/grading-scale/messages.js

@@ -13,6 +13,10 @@ const messages = defineMessages({
     id: 'course-authoring.grading-settings.fail-segment.text',
     defaultMessage: 'Fail',
   },
+  defaultPassText: {
+    id: 'course-authoring.grading-settings.default.pass.text',
+    defaultMessage: 'Pass',
+  },
 });
 
 export default messages;