feat: add a simple validation to the adjusted grade field

Co-authored-by: vlasovmichael <mykhailo.vlasov@raccoongang.com>

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

@@ -20,15 +20,28 @@ export class AdjustedGradeInput extends React.Component {
   }
 
   onChange = ({ target }) => {
-    this.props.setModalState({ adjustedGradeValue: target.value });
+    let adjustedGradeValue;
+    switch (true) {
+      case target.value < 0:
+        adjustedGradeValue = 0;
+        break;
+      case this.props.possibleGrade && target.value > this.props.possibleGrade:
+        adjustedGradeValue = this.props.possibleGrade;
+        break;
+      default:
+        adjustedGradeValue = target.value;
+    }
+    this.props.setModalState({ adjustedGradeValue });
   };
 
   render() {
     return (
       <span>
         <Form.Control
-          type="text"
+          type="number"
           name="adjustedGradeValue"
+          min="0"
+          max={this.props.possibleGrade ? this.props.possibleGrade : ''}
           value={this.props.value}
           onChange={this.onChange}
         />

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

@@ -54,9 +54,34 @@ describe('AdjustedGradeInput', () => {
     });
     describe('behavior', () => {
       describe('onChange', () => {
-        it('calls props.setModalState event target value', () => {
+        it('calls props.setModalState event target value with correct value', () => {
+          const value = 3;
+          el.instance().onChange({ target: { value } });
+          expect(props.setModalState).toHaveBeenCalledWith({
+            adjustedGradeValue: value,
+          });
+        });
+
+        it('calls props.setModalState event target value with a value more then the possibleGrade value', () => {
           const value = 42;
           el.instance().onChange({ target: { value } });
+          expect(props.setModalState).toHaveBeenCalledWith({
+            adjustedGradeValue: props.possibleGrade,
+          });
+        });
+
+        it('calls props.setModalState event target value with less then 0', () => {
+          const value = -5;
+          el.instance().onChange({ target: { value } });
+          expect(props.setModalState).toHaveBeenCalledWith({
+            adjustedGradeValue: 0,
+          });
+        });
+
+        it('calls props.setModalState event target value without possibleGrade value', () => {
+          const value = 100;
+          const newEl = shallow(<AdjustedGradeInput {...props} possibleGrade={null} />);
+          newEl.instance().onChange({ target: { value } });
           expect(props.setModalState).toHaveBeenCalledWith({
             adjustedGradeValue: value,
           });

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

@@ -3,9 +3,11 @@
 exports[`AdjustedGradeInput Component snapshots displays input control and "out of possible grade" label 1`] = `
 <span>
   <Control
+    max={5}
+    min="0"
     name="adjustedGradeValue"
     onChange={[MockFunction this.onChange]}
-    type="text"
+    type="number"
     value={1}
   />
    / 5

src/components/GradesView/GradebookTable/LabelReplacements.jsx

@@ -7,7 +7,7 @@ import {
   OverlayTrigger,
   Tooltip,
 } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, getLocale, isRtl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
@@ -23,7 +23,7 @@ const TotalGradeLabelReplacement = () => (
     <OverlayTrigger
       trigger={['hover', 'focus']}
       key="left-basic"
-      placement="left"
+      placement={isRtl(getLocale()) ? 'right' : 'left'}
       overlay={(
         <Tooltip id="course-grade-tooltip">
           <FormattedMessage {...messages.totalGradePercentage} />

src/components/GradesView/GradebookTable/LabelReplacements.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { getLocale } from '@edx/frontend-platform/i18n';
 
 import { OverlayTrigger } from '@edx/paragon';
 
@@ -35,3 +36,17 @@ describe('LabelReplacements', () => {
     });
   });
 });
+
+describe('snapshot', () => {
+  let el;
+  test('right to left overlay placement', () => {
+    getLocale.mockImplementation(() => 'en');
+    el = shallow(<TotalGradeLabelReplacement />);
+    expect(el).toMatchSnapshot();
+  });
+  test('left to right overlay placement', () => {
+    getLocale.mockImplementation(() => 'ar');
+    el = shallow(<TotalGradeLabelReplacement />);
+    expect(el).toMatchSnapshot();
+  });
+});

src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap

@@ -80,3 +80,99 @@ exports[`LabelReplacements UsernameLabelReplacement snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`snapshot left to right overlay placement 1`] = `
+<div>
+  <OverlayTrigger
+    key="left-basic"
+    overlay={
+      <Tooltip
+        id="course-grade-tooltip"
+      >
+        <FormattedMessage
+          defaultMessage="Total Grade values are always displayed as a percentage"
+          description="Gradebook table message that total grades are displayed in percent format"
+          id="gradebook.GradesView.table.totalGradePercentage"
+        />
+      </Tooltip>
+    }
+    placement="right"
+    trigger={
+      Array [
+        "hover",
+        "focus",
+      ]
+    }
+  >
+    <div>
+      <FormattedMessage
+        defaultMessage="Total Grade (%)"
+        description="Gradebook table total grade column header"
+        id="gradebook.GradesView.table.headings.totalGrade"
+      />
+      <div
+        id="courseGradeTooltipIcon"
+      >
+        <Icon
+          className="fa fa-info-circle"
+          screenReaderText={
+            <FormattedMessage
+              defaultMessage="Total Grade values are always displayed as a percentage"
+              description="Gradebook table message that total grades are displayed in percent format"
+              id="gradebook.GradesView.table.totalGradePercentage"
+            />
+          }
+        />
+      </div>
+    </div>
+  </OverlayTrigger>
+</div>
+`;
+
+exports[`snapshot right to left overlay placement 1`] = `
+<div>
+  <OverlayTrigger
+    key="left-basic"
+    overlay={
+      <Tooltip
+        id="course-grade-tooltip"
+      >
+        <FormattedMessage
+          defaultMessage="Total Grade values are always displayed as a percentage"
+          description="Gradebook table message that total grades are displayed in percent format"
+          id="gradebook.GradesView.table.totalGradePercentage"
+        />
+      </Tooltip>
+    }
+    placement="left"
+    trigger={
+      Array [
+        "hover",
+        "focus",
+      ]
+    }
+  >
+    <div>
+      <FormattedMessage
+        defaultMessage="Total Grade (%)"
+        description="Gradebook table total grade column header"
+        id="gradebook.GradesView.table.headings.totalGrade"
+      />
+      <div
+        id="courseGradeTooltipIcon"
+      >
+        <Icon
+          className="fa fa-info-circle"
+          screenReaderText={
+            <FormattedMessage
+              defaultMessage="Total Grade values are always displayed as a percentage"
+              description="Gradebook table message that total grades are displayed in percent format"
+              id="gradebook.GradesView.table.totalGradePercentage"
+            />
+          }
+        />
+      </div>
+    </div>
+  </OverlayTrigger>
+</div>
+`;

src/components/GradesView/GradebookTable/__snapshots__/test.jsx.snap

@@ -17,7 +17,7 @@ exports[`GradebookTable component snapshot - fields1 and 2 between email and tot
           Object {
             "key": "Email",
             "label": <FormattedMessage
-              defaultMessage="Email"
+              defaultMessage="Email*"
               description="Gradebook table email column header"
               id="gradebook.GradesView.table.headings.email"
             />,

src/components/GradesView/GradebookTable/messages.js

@@ -3,7 +3,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   emailHeading: {
     id: 'gradebook.GradesView.table.headings.email',
-    defaultMessage: 'Email',
+    defaultMessage: 'Email*',
     description: 'Gradebook table email column header',
   },
   totalGradeHeading: {

src/components/GradesView/GradesView.scss

@@ -207,3 +207,13 @@
 select#ScoreView.form-control {
   padding-right: 26px;
 }
+
+[dir=rtl] #course-grade-tooltip .arrow {
+    right: initial;
+    left: 0;
+    
+    &:before {
+        border-width: 0.4rem 0.4rem 0.4rem 0;
+        border-right-color: $black;
+    }
+}

src/components/WithSidebar/__snapshots__/test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`WithSidebar Component snapshots basic snapshot 1`] = `
 <div
-  className="d-flex sidebar-container"
+  className="d-flex sidebar-container page-gradebook"
 >
   <aside
     className="sidebar-class-names"

src/components/WithSidebar/index.jsx

@@ -32,7 +32,7 @@ export class WithSidebar extends React.Component {
 
   render() {
     return (
-      <div className="d-flex sidebar-container">
+      <div className="d-flex sidebar-container page-gradebook">
         <aside className={this.sidebarClassNames} onTransitionEnd={this.props.handleSlideDone}>
           { this.props.sidebar }
         </aside>

src/i18n/messages/ar.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Reason",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Edit Filters",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Total Grade (%)",
   "gradebook.GradesView.table.headings.username": "Username",
   "gradebook.GradesView.table.labels.studentKey": "Student Key*",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Course Grade",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/i18n/messages/es_419.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Reason",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Edit Filters",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Total Grade (%)",
   "gradebook.GradesView.table.headings.username": "Username",
   "gradebook.GradesView.table.labels.studentKey": "Student Key*",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Course Grade",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/i18n/messages/fr.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Motif",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Editer les filtres",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Note totale (%)",
   "gradebook.GradesView.table.headings.username": "Nom d’utilisateur",
   "gradebook.GradesView.table.labels.studentKey": "Clé d'étudiant",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Note du cours",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/i18n/messages/zh_CN.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Reason",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Edit Filters",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Total Grade (%)",
   "gradebook.GradesView.table.headings.username": "Username",
   "gradebook.GradesView.table.labels.studentKey": "Student Key*",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Course Grade",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/i18n/transifex_input.json

@@ -37,7 +37,7 @@
   "gradebook.GradesView.EditModal.Overrides.reasonHeader": "Reason",
   "gradebook.GradesTab.usersVisibilityLabel'": "Showing {filteredUsers} of {totalUsers} total learners",
   "gradebook.GradesView.editFilterLabel": "Edit Filters",
-  "gradebook.GradesView.table.headings.email": "Email",
+  "gradebook.GradesView.table.headings.email": "Email*",
   "gradebook.GradesView.table.headings.totalGrade": "Total Grade (%)",
   "gradebook.GradesView.table.headings.username": "Username",
   "gradebook.GradesView.table.labels.studentKey": "Student Key*",
@@ -70,4 +70,4 @@
   "gradebook.GradesTab.FilterBadges.courseGrade": "Course Grade",
   "gradebook.GradesTab.FilterBadges.includeCourseRoleMembers": "Include Course Team Members",
   "gradebook.GradesTab.FilterBadges.track": "Track"
-}
+}

src/setupTest.js

@@ -19,5 +19,6 @@ jest.mock('@edx/frontend-platform/i18n', () => {
     }),
     defineMessages: m => m,
     FormattedMessage: () => 'FormattedMessage',
+    getLocale: jest.fn(),
   };
 });