feat: added validation to assignment fields

openedx · Oct 21, 2023 · 9270170 · 9270170
1 parent ccc1fe0
commit 9270170
Show file tree

Hide file tree

Showing 25 changed files with 427 additions and 67 deletions.
diff --git a/src/components/GradebookFilters/AssignmentGradeFilter/__snapshots__/index.test.jsx.snap b/src/components/GradebookFilters/AssignmentGradeFilter/__snapshots__/index.test.jsx.snap
@@ -55,7 +55,7 @@ exports[`AssignmentFilter component render without selected assignment snapshot
     className="grade-filter-action"
   >
     <Button
-      disabled={true}
+      disabled={false}
       name="assignmentGradeMinMax"
       type="submit"
       variant="outline-secondary"

diff --git a/src/components/GradebookFilters/AssignmentGradeFilter/hooks.js b/src/components/GradebookFilters/AssignmentGradeFilter/hooks.js
@@ -7,6 +7,7 @@ const useAssignmentGradeFilterData = ({ updateQueryParams }) => {
   const fetchGrades = thunkActions.grades.useFetchGrades();
   const setFilter = actions.app.useSetLocalFilter();
   const updateAssignmentLimits = actions.filters.useUpdateAssignmentLimits();
+  const isDisabled = !selectors.app.useAreAssignmentGradeFiltersValid() || !selectedAssignment;
 
   const handleSubmit = () => {
     updateAssignmentLimits(localAssignmentLimits);
@@ -27,6 +28,7 @@ const useAssignmentGradeFilterData = ({ updateQueryParams }) => {
     assignmentGradeMin,
     assignmentGradeMax,
     selectedAssignment,
+    isDisabled,
     handleSetMax,
     handleSetMin,
     handleSubmit,

diff --git a/src/components/GradebookFilters/AssignmentGradeFilter/hooks.test.js b/src/components/GradebookFilters/AssignmentGradeFilter/hooks.test.js
@@ -4,7 +4,10 @@ import useAssignmentGradeFilterData from './hooks';
 
 jest.mock('data/redux/hooks', () => ({
   selectors: {
-    app: { useAssignmentGradeLimits: jest.fn() },
+    app: {
+      useAreAssignmentGradeFiltersValid: jest.fn(),
+      useAssignmentGradeLimits: jest.fn(),
+    },
     filters: { useSelectedAssignmentLabel: jest.fn() },
   },
   actions: {
@@ -20,6 +23,7 @@ let out;
 
 const assignmentGradeLimits = { assignmentGradeMax: 200, assignmentGradeMin: 3 };
 const selectedAssignmentLabel = 'test-assignment-label';
+const useAreAssignmentGradeFiltersValid = false;
 selectors.app.useAssignmentGradeLimits.mockReturnValue(assignmentGradeLimits);
 selectors.filters.useSelectedAssignmentLabel.mockReturnValue(selectedAssignmentLabel);
 
@@ -40,6 +44,7 @@ describe('useAssignmentFilterData hook', () => {
   });
   describe('behavior', () => {
     it('initializes redux hooks', () => {
+      expect(selectors.app.useAreAssignmentGradeFiltersValid).toHaveBeenCalledWith();
       expect(selectors.app.useAssignmentGradeLimits).toHaveBeenCalledWith();
       expect(selectors.filters.useSelectedAssignmentLabel).toHaveBeenCalledWith();
       expect(actions.app.useSetLocalFilter).toHaveBeenCalledWith();
@@ -77,5 +82,8 @@ describe('useAssignmentFilterData hook', () => {
       expect(out.assignmentGradeMax).toEqual(assignmentGradeLimits.assignmentGradeMax);
       expect(out.assignmentGradeMin).toEqual(assignmentGradeLimits.assignmentGradeMin);
     });
+    it('passes isDisabled from hook', () => {
+      expect(out.isDisabled).toEqual(!useAreAssignmentGradeFiltersValid || !selectedAssignmentLabel);
+    });
   });
 });
diff --git a/src/components/GradebookFilters/AssignmentGradeFilter/index.jsx b/src/components/GradebookFilters/AssignmentGradeFilter/index.jsx
@@ -13,6 +13,7 @@ export const AssignmentGradeFilter = ({ updateQueryParams }) => {
     assignmentGradeMin,
     assignmentGradeMax,
     selectedAssignment,
+    isDisabled,
     handleSetMax,
     handleSetMin,
     handleSubmit,
@@ -39,7 +40,7 @@ export const AssignmentGradeFilter = ({ updateQueryParams }) => {
           type="submit"
           variant="outline-secondary"
           name="assignmentGradeMinMax"
-          disabled={!selectedAssignment}
+          disabled={isDisabled}
           onClick={handleSubmit}
         >
           {formatMessage(messages.apply)}

diff --git a/src/components/GradebookFilters/AssignmentGradeFilter/index.test.jsx b/src/components/GradebookFilters/AssignmentGradeFilter/index.test.jsx
@@ -17,6 +17,7 @@ const hookData = {
   selectedAssignment: 'test-assignment',
   assignmentGradeMax: 300,
   assignmentGradeMin: 23,
+  isDisabled: false,
 };
 useAssignmentGradeFilterData.mockReturnValue(hookData);
 

diff --git a/src/components/GradesView/StatusAlerts.jsx b/src/components/GradesView/StatusAlerts.jsx
@@ -12,34 +12,90 @@ import messages from './StatusAlerts.messages';
 export class StatusAlerts extends React.Component {
   get isCourseGradeFilterAlertOpen() {
     return (
-      !this.props.limitValidity.isMinValid
-      || !this.props.limitValidity.isMaxValid
+      !this.props.courseLimitValidity.isMinValid
+      || !this.props.courseLimitValidity.isMaxValid
+      || !this.props.courseLimitValidity.isMinLessMaxValid
     );
   }
 
-  get minValidityMessage() {
-    return (this.props.limitValidity.isMinValid)
+  get minCourseValidityMessage() {
+    return (this.props.courseLimitValidity.isMinValid)
       ? ''
       : <FormattedMessage {...messages.minGradeInvalid} />;
   }
 
-  get maxValidityMessage() {
-    return (this.props.limitValidity.isMaxValid)
+  get maxCourseValidityMessage() {
+    return (this.props.courseLimitValidity.isMaxValid)
       ? ''
       : <FormattedMessage {...messages.maxGradeInvalid} />;
   }
 
+  get minLessMaxCourseValidityMessage() {
+    return (this.props.courseLimitValidity.isMinLessMaxValid)
+      ? ''
+      : <FormattedMessage {...messages.minLessMaxGradeInvalid} />;
+  }
+
   get courseGradeFilterAlertDialogText() {
     return (
       <>
-        {this.minValidityMessage} {this.maxValidityMessage}
+        {this.minCourseValidityMessage} {this.maxCourseValidityMessage} {this.minLessMaxCourseValidityMessage}
+      </>
+    );
+  }
+
+  get isAssignmentGradeFilterAlertOpen() {
+    return (
+      !this.props.assignmentLimitValidity.isMinValid
+      || !this.props.assignmentLimitValidity.isMaxValid
+      || !this.props.assignmentLimitValidity.isMinLessMaxValid
+    );
+  }
+
+  get minAssignmentValidityMessage() {
+    return (this.props.assignmentLimitValidity.isMinValid)
+      ? ''
+      : <FormattedMessage {...messages.minAssignmentInvalid} />;
+  }
+
+  get maxAssignmentValidityMessage() {
+    return (this.props.assignmentLimitValidity.isMaxValid)
+      ? ''
+      : <FormattedMessage {...messages.maxAssignmentInvalid} />;
+  }
+
+  get minLessMaxAssignmentValidityMessage() {
+    return (this.props.assignmentLimitValidity.isMinLessMaxValid)
+      ? ''
+      : <FormattedMessage {...messages.minLessMaxAssignmentInvalid} />;
+  }
+
+  get assignmentGradeFilterAlertDialogText() {
+    return (
+      <>
+        {/* eslint-disable-next-line max-len */}
+        {this.minAssignmentValidityMessage} {this.maxAssignmentValidityMessage} {this.minLessMaxAssignmentValidityMessage}
       </>
     );
   }
 
   render() {
     return (
       <>
+        <Alert
+          variant="success"
+          onClose={this.props.handleCloseSuccessBanner}
+          show={this.props.showSuccessBanner}
+        >
+          <FormattedMessage {...messages.editSuccessAlert} />
+        </Alert>
+        <Alert
+          variant="danger"
+          dismissible={false}
+          show={this.isAssignmentGradeFilterAlertOpen}
+        >
+          {this.assignmentGradeFilterAlertDialogText}
+        </Alert>
         <Alert
           variant="success"
           onClose={this.props.handleCloseSuccessBanner}
@@ -65,15 +121,22 @@ StatusAlerts.defaultProps = {
 StatusAlerts.propTypes = {
   // redux
   handleCloseSuccessBanner: PropTypes.func.isRequired,
-  limitValidity: PropTypes.shape({
+  courseLimitValidity: PropTypes.shape({
+    isMaxValid: PropTypes.bool,
+    isMinValid: PropTypes.bool,
+    isMinLessMaxValid: PropTypes.bool,
+  }).isRequired,
+  assignmentLimitValidity: PropTypes.shape({
     isMaxValid: PropTypes.bool,
     isMinValid: PropTypes.bool,
+    isMinLessMaxValid: PropTypes.bool,
   }).isRequired,
   showSuccessBanner: PropTypes.bool.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
-  limitValidity: selectors.app.courseGradeFilterValidity(state),
+  courseLimitValidity: selectors.app.courseGradeFilterValidity(state),
+  assignmentLimitValidity: selectors.app.assignmentGradeFilterValidity(state),
   showSuccessBanner: selectors.grades.showSuccess(state),
 });
 

diff --git a/src/components/GradesView/StatusAlerts.messages.js b/src/components/GradesView/StatusAlerts.messages.js
@@ -16,6 +16,26 @@ const messages = defineMessages({
     defaultMessage: 'Minimum course grade must be between 0 and 100',
     description: 'An alert text for selecting a minimum course grade less than 0',
   },
+  minLessMaxGradeInvalid: {
+    id: 'gradebook.GradesView.minLessMaxGradeInvalid',
+    defaultMessage: 'Minimum course grade must be less than maximum course grade',
+    description: 'An alert text for selecting a minimum course grade must be less than maximum course grade',
+  },
+  maxAssignmentInvalid: {
+    id: 'gradebook.GradesView.maxAssignmentGradeInvalid',
+    defaultMessage: 'Maximum assignment grade must be between 0 and 100',
+    description: 'An alert text for selecting a maximum assignment grade greater than 100',
+  },
+  minAssignmentInvalid: {
+    id: 'gradebook.GradesView.minAssignmentGradeInvalid',
+    defaultMessage: 'Minimum assignment grade must be between 0 and 100',
+    description: 'An alert text for selecting a minimum assignment grade less than 0',
+  },
+  minLessMaxAssignmentInvalid: {
+    id: 'gradebook.GradesView.minLessMaxAssignmentInvalid',
+    defaultMessage: 'Minimum assignment grade must be less than maximum assignment grade',
+    description: 'An alert text for selecting a minimum assignment grade must be less than maximum assignment grade',
+  },
 });
 
 export default messages;