feat: Add max value warning and disable the submit button

Co-authored-by: lkatsikaris

Signed-off-by: Farhaan Bukhsh <[email protected]>

Author: farhaanbukhsh

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/__snapshots__/index.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`AdjustedGradeInput component render snapshot 1`] = `
   <Form.Control
     name="adjustedGradeValue"
     onChange={[MockFunction hook.onChange]}
-    type="text"
+    type="number"
     value="test-value"
   />
   some-hint-text

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/hooks.js

@@ -15,6 +15,7 @@ const useAdjustedGradeInputData = () => {
     value,
     onChange,
     hintText,
+    possibleGrade,
   };
 };
 

src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 import { Form } from '@openedx/paragon';
 
+import { useIntl } from '@edx/frontend-platform/i18n';
 import useAdjustedGradeInputData from './hooks';
+import messages from '../messages';
 
 /**
  * <AdjustedGradeInput />
@@ -14,16 +16,18 @@ export const AdjustedGradeInput = () => {
     value,
     onChange,
     hintText,
+    possibleGrade,
   } = useAdjustedGradeInputData();
+  const { formatMessage } = useIntl();
   return (
     <span>
       <Form.Control
-        type="text"
+        type="number"
         name="adjustedGradeValue"
         value={value}
         onChange={onChange}
       />
-      {hintText}
+      {value > possibleGrade ? <div style={{ color: 'red' }}>{ formatMessage(messages.adjustedGradeError, { possibleGrade })}</div> : hintText}
     </span>
   );
 };

src/components/GradesView/EditModal/OverrideTable/messages.js

@@ -21,6 +21,11 @@ const messages = defineMessages({
     defaultMessage: 'Reason',
     description: 'Edit Modal Override Table Reason column header',
   },
+  adjustedGradeError: {
+    id: 'gradebook.GradesView.EditModal.Overrides.adjustedGradeError',
+    defaultMessage: 'The value exceeds the maximum grade: {possibleGrade}',
+    description: 'Edit Modal Override Adjusted Grade Error',
+  },
 });
 
 export default messages;

src/components/GradesView/EditModal/__snapshots__/index.test.jsx.snap

@@ -36,6 +36,7 @@ exports[`EditModal component render with error snapshot 1`] = `
         Cancel
       </ModalDialog.CloseButton>
       <Button
+        disabled={false}
         onClick={[MockFunction hooks.handleAdjustedGradeClick]}
         variant="primary"
       >
@@ -80,6 +81,7 @@ exports[`EditModal component render without error snapshot 1`] = `
         Cancel
       </ModalDialog.CloseButton>
       <Button
+        disabled={false}
         onClick={[MockFunction hooks.handleAdjustedGradeClick]}
         variant="primary"
       >

src/components/GradesView/EditModal/index.jsx

@@ -12,6 +12,7 @@ import OverrideTable from './OverrideTable';
 import ModalHeaders from './ModalHeaders';
 import useEditModalData from './hooks';
 import messages from './messages';
+import useAdjustedGradeInputData from './OverrideTable/AdjustedGradeInput/hooks';
 
 /**
  * <EditModal />
@@ -30,6 +31,10 @@ export const EditModal = () => {
     handleAdjustedGradeClick,
     isOpen,
   } = useEditModalData();
+  const {
+    value,
+    possibleGrade,
+  } = useAdjustedGradeInputData();
 
   return (
     <ModalDialog
@@ -57,7 +62,7 @@ export const EditModal = () => {
           <ModalDialog.CloseButton variant="tertiary">
             {formatMessage(messages.closeText)}
           </ModalDialog.CloseButton>
-          <Button variant="primary" onClick={handleAdjustedGradeClick}>
+          <Button variant="primary" onClick={handleAdjustedGradeClick} disabled={value > possibleGrade}>
             {formatMessage(messages.saveGrade)}
           </Button>
         </ActionRow>

src/components/GradesView/EditModal/index.test.jsx

@@ -14,10 +14,12 @@ import OverrideTable from './OverrideTable';
 import useEditModalData from './hooks';
 import EditModal from '.';
 import messages from './messages';
+import useAdjustedGradeInputData from './OverrideTable/AdjustedGradeInput/hooks';
 
 jest.mock('./hooks', () => jest.fn());
 jest.mock('./ModalHeaders', () => 'ModalHeaders');
 jest.mock('./OverrideTable', () => 'OverrideTable');
+jest.mock('./OverrideTable/AdjustedGradeInput/hooks', () => jest.fn());
 
 const hookProps = {
   onClose: jest.fn().mockName('hooks.onClose'),
@@ -27,6 +29,12 @@ const hookProps = {
 };
 useEditModalData.mockReturnValue(hookProps);
 
+const adjustedGradeProps = {
+  value: 50,
+  possibleGrade: 100,
+};
+useAdjustedGradeInputData.mockReturnValue(adjustedGradeProps);
+
 let el;
 describe('EditModal component', () => {
   beforeEach(() => {
@@ -39,6 +47,7 @@ describe('EditModal component', () => {
     });
     it('initializes component hooks', () => {
       expect(useEditModalData).toHaveBeenCalled();
+      expect(useAdjustedGradeInputData).toHaveBeenCalled();
     });
   });
   describe('render', () => {
@@ -88,16 +97,18 @@ describe('EditModal component', () => {
         expect(button.children[0].el).toEqual(formatMessage(messages.closeText));
         expect(button.type).toEqual('ModalDialog.CloseButton');
       });
-      test('adjusted grade button', () => {
+      test('adjusted grade button enabled', () => {
         const button = footer[1].findByType(ActionRow)[0].children[1];
         expect(button.children[0].el).toEqual(formatMessage(messages.saveGrade));
         expect(button.type).toEqual('Button');
         expect(button.props.onClick).toEqual(hookProps.handleAdjustedGradeClick);
+        expect(button.props.disabled).toEqual(false);
       });
     };
     describe('without error', () => {
       beforeEach(() => {
         useEditModalData.mockReturnValueOnce({ ...hookProps, error: undefined });
+        useAdjustedGradeInputData.mockReturnValueOnce({ value: 50, possibleGrade: 100 });
         el = shallow(<EditModal />);
       });
       test('snapshot', () => {
@@ -124,5 +135,15 @@ describe('EditModal component', () => {
       });
       testFooter();
     });
+    describe('when the adjusted grade button is disabled', () => {
+      beforeEach(() => {
+        useAdjustedGradeInputData.mockReturnValueOnce({ value: 101, possibleGrade: 100 });
+        el = shallow(<EditModal />);
+      });
+      test('adjusted grade button is disabled', () => {
+        const button = el.instance.findByType(ActionRow)[0].children[1];
+        expect(button.props.disabled).toEqual(true);
+      });
+    });
   });
 });