feat: Add confirmation on max score setting [PT-187021265]

This adds a confirmation dialog if the max score is set to be less than existing student scores.

js/components/portal-dashboard/feedback/feedback-legend.tsx

@@ -61,7 +61,7 @@ const FeedbackLegend: React.FC<IProps> = (props) => {
       {feedbackLevel === "Activity" &&
         <div className={css.feedbackBadgeLegend__rubric}>
           <div className={css.feedbackBadgeLegend__rubric_settings}>
-            <FeedbackSettingsToggle activity={activity} scoringSettings={scoringSettings} />
+            <FeedbackSettingsToggle activity={activity} scoringSettings={scoringSettings} feedbacks={feedbacks} />
           </div>
           <div className={css.feedbackBadgeLegend__rubric_score}>
             {showAvgScore && <div className={css.feedbackBadgeLegend__rubric_score_avg}>

js/components/portal-dashboard/feedback/feedback-settings-modal.tsx

@@ -21,27 +21,30 @@ interface IProps {
   scoringSettings: ScoringSettings;
   updateActivityFeedbackSettings: (activityId: string, activityIndex: number, feedbackFlags: any) => void;
   rubric?: Rubric;
+  feedbacks: any;
 }
 
 interface IState {
   scoreType: string;
   maxScore: number;
+  confirmMaxScore: boolean;
 }
 
 class FeedbackSettingsModal extends PureComponent<IProps, IState> {
   private initialSettings: IState;
 
   constructor(props: IProps) {
     super(props);
-    this.initialSettings = props.scoringSettings;
-    this.state = {...props.scoringSettings};
+    this.initialSettings = {
+      ...props.scoringSettings,
+      confirmMaxScore: false,
+    };
+    this.state = {...this.initialSettings};
   }
 
   render() {
-    const { scoreType, maxScore } = this.state;
-    const { show, rubric } = this.props;
-    const maxScoreDisabled = scoreType !== MANUAL_SCORE;
-    const hasScoredQuestions = getScoredQuestions(this.props.activity).size > 0;
+    const { confirmMaxScore } = this.state;
+    const { show } = this.props;
 
     return (
       <Modal animation={false} centered dialogClassName={css.lightbox} onHide={this.handleCancel} show={show} data-cy="feedback-settings-modal">
@@ -52,58 +55,92 @@ class FeedbackSettingsModal extends PureComponent<IProps, IState> {
         </Modal.Header>
         <Modal.Body className={css.lightboxBody}>
           <div className={css.contentArea} data-cy="feedback-settings-modal-content-area">
-            <div className={css.modalOption} data-cy="feedback-settings-modal-option">
-              <FeedbackSettingsModalButton selected={scoreType === NO_SCORE} value={NO_SCORE} onClick={this.handleScoreTypeChange} label="No score" />
-            </div>
-            <div className={css.modalOption} data-cy="feedback-settings-modal-option">
-              <FeedbackSettingsModalButton selected={scoreType === MANUAL_SCORE} value={MANUAL_SCORE} onClick={this.handleScoreTypeChange} label="Manual score">
-                <ScoreInput score={maxScore} minScore={1} disabled={maxScoreDisabled} className={css.maxScore} onChange={this.handleMaxScoreChange}>
-                  <div>Max score</div>
-                </ScoreInput>
-              </FeedbackSettingsModalButton>
-              <div className={css.modalOptionInfo}>
-                <p>
-                  All activities within this assignment can be scored up to your specified max score.
-                </p>
-                <p>
-                  You may also choose <strong>not to score</strong> any student’s activities by not entering values in the entry fields.
-                </p>
-              </div>
-            </div>
-            {rubric && (
-              <div className={css.modalOption} data-cy="feedback-settings-modal-option">
-                <FeedbackSettingsModalButton selected={scoreType === RUBRIC_SCORE} value={RUBRIC_SCORE} onClick={this.handleScoreTypeChange} label="Use score from rubric" />
-                <div className={css.modalOptionInfo}>
-                  <p>
-                    All activities within this assignment will receive a score based on the activity-level rubric scores you’ve selected.
-                  </p>
-                </div>
-              </div>
-            )}
-            {hasScoredQuestions && (
-              <div className={css.modalOption} data-cy="feedback-settings-modal-option">
-                <FeedbackSettingsModalButton selected={scoreType === AUTOMATIC_SCORE} value={AUTOMATIC_SCORE} onClick={this.handleScoreTypeChange} label="Use score from autoscored multiple-choice questions" alignTop={true} />
-                <div className={css.modalOptionInfo}>
-                  <p>
-                  All activities within this assignment will receive a score based on the total score of autoscored multiple-choice questions.
-                  </p>
-                </div>
-              </div>
-            )}
-            <div className={css.buttonContainer}>
-              <div className={css.closeButton} onClick={this.handleCancel} data-cy="feedback-settings-modal-close-button">
-                Cancel
-              </div>
-              <div className={classNames(css.closeButton, {[css.disabled]: this.saveDisabled})} onClick={this.handleSave} data-cy="feedback-settings-modal-close-button">
-                Save
-              </div>
-            </div>
+            {!confirmMaxScore && this.renderOptions()}
+            {confirmMaxScore && this.renderConfirmMaxScore()}
           </div>
         </Modal.Body>
       </Modal>
     );
   }
 
+  renderOptions() {
+    const { scoreType, maxScore } = this.state;
+    const { rubric } = this.props;
+    const maxScoreDisabled = scoreType !== MANUAL_SCORE;
+    const hasScoredQuestions = getScoredQuestions(this.props.activity).size > 0;
+
+    return (
+      <>
+        <div className={css.modalOption} data-cy="feedback-settings-modal-option">
+          <FeedbackSettingsModalButton selected={scoreType === NO_SCORE} value={NO_SCORE} onClick={this.handleScoreTypeChange} label="No score" />
+        </div>
+        <div className={css.modalOption} data-cy="feedback-settings-modal-option">
+          <FeedbackSettingsModalButton selected={scoreType === MANUAL_SCORE} value={MANUAL_SCORE} onClick={this.handleScoreTypeChange} label="Manual score">
+            <ScoreInput score={maxScore} minScore={1} disabled={maxScoreDisabled} className={css.maxScore} onChange={this.handleMaxScoreChange}>
+              <div>Max score</div>
+            </ScoreInput>
+          </FeedbackSettingsModalButton>
+          <div className={css.modalOptionInfo}>
+            <p>
+              All activities within this assignment can be scored up to your specified max score.
+            </p>
+            <p>
+              You may also choose <strong>not to score</strong> any student’s activities by not entering values in the entry fields.
+            </p>
+          </div>
+        </div>
+        {rubric && (
+          <div className={css.modalOption} data-cy="feedback-settings-modal-option">
+            <FeedbackSettingsModalButton selected={scoreType === RUBRIC_SCORE} value={RUBRIC_SCORE} onClick={this.handleScoreTypeChange} label="Use score from rubric" />
+            <div className={css.modalOptionInfo}>
+              <p>
+                All activities within this assignment will receive a score based on the activity-level rubric scores you’ve selected.
+              </p>
+            </div>
+          </div>
+        )}
+        {hasScoredQuestions && (
+          <div className={css.modalOption} data-cy="feedback-settings-modal-option">
+            <FeedbackSettingsModalButton selected={scoreType === AUTOMATIC_SCORE} value={AUTOMATIC_SCORE} onClick={this.handleScoreTypeChange} label="Use score from autoscored multiple-choice questions" alignTop={true} />
+            <div className={css.modalOptionInfo}>
+              <p>
+              All activities within this assignment will receive a score based on the total score of autoscored multiple-choice questions.
+              </p>
+            </div>
+          </div>
+        )}
+        <div className={css.buttonContainer}>
+          <div className={css.closeButton} onClick={this.handleCancel} data-cy="feedback-settings-modal-close-button">
+            Cancel
+          </div>
+          <div className={classNames(css.closeButton, {[css.disabled]: this.saveDisabled})} onClick={this.handleSave} data-cy="feedback-settings-modal-close-button">
+            Save
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  renderConfirmMaxScore() {
+    const { maxScore } = this.state;
+
+    return (
+      <>
+        <p>
+          Some of the current student scores will be above the new max score of {maxScore}.
+        </p>
+        <div className={css.buttonContainer}>
+          <div className={css.closeButton} onClick={this.handleCancel} data-cy="feedback-settings-modal-close-button">
+            Cancel
+          </div>
+          <div className={classNames(css.closeButton)} onClick={this.handleSave} data-cy="feedback-settings-modal-close-button">
+            Continue
+          </div>
+        </div>
+      </>
+    );
+  }
+
   private handleScoreTypeChange = (scoreType: ScoreType) => {
     this.setState({ scoreType });
   }
@@ -113,20 +150,34 @@ class FeedbackSettingsModal extends PureComponent<IProps, IState> {
   }
 
   private handleCancel = () => {
-    // restore initial settings
-    this.setState(this.initialSettings);
-    this.close();
+    if (this.state.confirmMaxScore) {
+      this.setState({ confirmMaxScore: false });
+    } else {
+      // restore initial settings
+      this.setState(this.initialSettings);
+      this.close();
+    }
   }
 
   private handleSave = () => {
-    const {scoreType, maxScore} = this.state;
-    const {updateActivityFeedbackSettings, activityId, activityIndex} = this.props;
+    const {scoreType, maxScore, confirmMaxScore} = this.state;
+    const {updateActivityFeedbackSettings, activityId, activityIndex, feedbacks} = this.props;
     if (!this.saveDisabled) {
       const updates: any = { scoreType };
       if (maxScore !== undefined) {
+        // check if scores above max score and confirm if they are
+        const scoresAboveMax = feedbacks.scores.reduce((acc: boolean, cur: number) => {
+          return acc || cur > maxScore;
+        }, false);
+        if (scoresAboveMax && !confirmMaxScore) {
+          this.setState({ confirmMaxScore: true });
+          return;
+        }
+
         updates.maxScore = maxScore;
       }
       updateActivityFeedbackSettings(activityId, activityIndex, updates);
+      this.setState({ confirmMaxScore: false });
       this.close();
     }
   }
@@ -157,7 +208,7 @@ function mapStateToProps() {
   };
 }
 
-const mapDispatchToProps = (dispatch: any, ownProps: any): Partial<IProps> => {
+const mapDispatchToProps = (dispatch: any): Partial<IProps> => {
   return {
     updateActivityFeedbackSettings: (activityId, activityIndex, feedbackFlags) => dispatch(updateActivityFeedbackSettings(activityId, activityIndex, feedbackFlags)),
   };

js/components/portal-dashboard/feedback/feedback-settings-toggle.tsx

@@ -8,10 +8,11 @@ import css from "../../../../css/portal-dashboard/feedback/feedback-settings-tog
 interface IProps {
   activity: Map<any, any>;
   scoringSettings: ScoringSettings;
+  feedbacks: any;
 }
 
 export const FeedbackSettingsToggle: React.FC<IProps> = (props) => {
-  const { activity, scoringSettings } = props;
+  const { activity, scoringSettings, feedbacks } = props;
   const [modalOpen, setModalOpen] = useState(false);
   const [buttonActive, setButtonActive] = useState(false);
 
@@ -33,6 +34,7 @@ export const FeedbackSettingsToggle: React.FC<IProps> = (props) => {
         onHide={handleShowModal(false)}
         show={true}
         scoringSettings={scoringSettings}
+        feedbacks={feedbacks}
       />}
     </div>
   );