Merge pull request #43702 from code-dot-org/emergency-mode-banners

Emergency mode banner for teacher dashboard

apps/i18n/common/en_us.json

@@ -618,6 +618,8 @@
   "disabledProgress1": "Yikes! This week is Hour of Code and we are experiencing even more traffic than we anticipated.",
   "disabledProgress2": "Unfortunately, we are not able to save the progress that you make on your course while we are dealing with this issue. Don't worry, your progress from before this week is still safe.",
   "disabledProgress3": "You can still try Hour of Code tutorials even though your progress won't save.",
+  "disabledProgressTeacherDashboard1": "Warning: Progress not saving",
+  "disabledProgressTeacherDashboard2": "Unfortunately, we are not able to save the progress that your students make on their course while we are dealing with this issue. Don't worry, their progress from before this week is still safe. They can still try Hour of Code tutorials even though their progress won't save.",
   "disableMaker": "Disable Maker Toolkit",
   "discussionGoal": "Discussion Goal",
   "discountCodeSchoolConfirm": "Before you can receive your code, please verify the school at which you teach:",

apps/src/templates/teacherDashboard/TeacherDashboardHeader.jsx

@@ -20,6 +20,7 @@ import {
 import {sectionShape} from '@cdo/apps/templates/teacherDashboard/shapes';
 import Button from '../Button';
 import DropdownButton from '../DropdownButton';
+import {disabledBubblesSupportArticle} from '@cdo/apps/code-studio/disabledBubbles';
 
 class TeacherDashboardHeader extends React.Component {
   static propTypes = {
@@ -70,6 +71,24 @@ class TeacherDashboardHeader extends React.Component {
       />
     ));
 
+  progressNotSavingNotification() {
+    return (
+      <Notification
+        type={NotificationType.failure}
+        notice={i18n.disabledProgressTeacherDashboard1()}
+        details={
+          i18n.disabledProgress1() +
+          ' ' +
+          i18n.disabledProgressTeacherDashboard2()
+        }
+        detailsLinkText={i18n.learnMore()}
+        detailsLink={disabledBubblesSupportArticle}
+        detailsLinkNewWindow={true}
+        dismissable={false}
+      />
+    );
+  }
+
   render() {
     return (
       <div>
@@ -83,6 +102,9 @@ class TeacherDashboardHeader extends React.Component {
           restrictSection={this.props.selectedSection.restrictSection}
           loginType={this.props.selectedSection.loginType}
         />
+        {this.props.selectedSection.postMilestoneDisabled && (
+          <this.progressNotSavingNotification />
+        )}
         <div style={styles.header}>
           <div>
             <h1>{this.props.selectedSection.name}</h1>

apps/src/templates/teacherDashboard/shapes.jsx

@@ -17,7 +17,8 @@ export const sectionShape = PropTypes.shape({
   scriptId: PropTypes.number,
   grade: PropTypes.string,
   providerManaged: PropTypes.bool.isRequired,
-  restrictSection: PropTypes.bool
+  restrictSection: PropTypes.bool,
+  postMilestoneDisabled: PropTypes.bool
 });
 
 // Used on the Teacher Dashboard for components that

apps/src/templates/teacherDashboard/teacherSectionsRedux.js

@@ -1187,7 +1187,8 @@ export const sectionFromServerSection = serverSection => ({
   hidden: serverSection.hidden,
   isAssigned: serverSection.isAssigned,
   restrictSection: serverSection.restrict_section,
-  codeReviewEnabled: serverSection.code_review_enabled
+  codeReviewEnabled: serverSection.code_review_enabled,
+  postMilestoneDisabled: serverSection.post_milestone_disabled
 });
 
 /**

apps/test/unit/templates/teacherDashboard/teacherSectionsReduxTest.js

@@ -75,7 +75,8 @@ const sections = [
     studentCount: 10,
     hidden: false,
     restrict_section: false,
-    code_review_enabled: true
+    code_review_enabled: true,
+    post_milestone_disabled: false
   },
   {
     id: 12,
@@ -97,7 +98,8 @@ const sections = [
     studentCount: 1,
     hidden: false,
     restrict_section: false,
-    code_review_enabled: true
+    code_review_enabled: true,
+    post_milestone_disabled: false
   },
   {
     id: 307,
@@ -119,7 +121,8 @@ const sections = [
     studentCount: 0,
     hidden: false,
     restrict_section: false,
-    code_review_enabled: true
+    code_review_enabled: true,
+    post_milestone_disabled: false
   }
 ];
 
@@ -646,7 +649,8 @@ describe('teacherSectionsRedux', () => {
         hidden: false,
         isAssigned: undefined,
         restrictSection: false,
-        codeReviewEnabled: true
+        codeReviewEnabled: true,
+        postMilestoneDisabled: false
       });
     });
   });
@@ -787,7 +791,8 @@ describe('teacherSectionsRedux', () => {
       createdAt: createdAt,
       hidden: false,
       restrict_section: false,
-      code_review_enabled: true
+      code_review_enabled: true,
+      post_milestone_disabled: false
     };
 
     function successResponse(customProps = {}) {
@@ -939,7 +944,8 @@ describe('teacherSectionsRedux', () => {
           hidden: false,
           isAssigned: undefined,
           restrictSection: false,
-          codeReviewEnabled: true
+          codeReviewEnabled: true,
+          postMilestoneDisabled: false
         }
       });
     });
@@ -995,7 +1001,8 @@ describe('teacherSectionsRedux', () => {
       script_id: null,
       hidden: false,
       restrict_section: false,
-      code_review_enabled: true
+      code_review_enabled: true,
+      post_milestone_disabled: false
     };
 
     function successResponse(sectionId, customProps = {}) {
@@ -1228,7 +1235,8 @@ describe('teacherSectionsRedux', () => {
       studentCount: 10,
       hidden: false,
       restrict_section: false,
-      code_review_enabled: true
+      code_review_enabled: true,
+      post_milestone_disabled: false
     };
 
     it('transfers some fields directly, mapping from snake_case to camelCase', () => {
@@ -1258,6 +1266,10 @@ describe('teacherSectionsRedux', () => {
         section.code_review_enabled,
         serverSection.codeReviewEnabled
       );
+      assert.strictEqual(
+        section.post_milestone_disabled,
+        serverSection.postMilestoneDisabled
+      );
     });
 
     it('maps from a script object to a script_id', () => {

dashboard/app/models/sections/section.rb

@@ -304,6 +304,8 @@ def summarize(include_students: true)
       restrict_section: restrict_section,
       code_review_enabled: code_review_enabled?,
       is_assigned_csa: assigned_csa?,
+      # this will be true when we are in emergency mode, for the scripts returned by ScriptConfig.hoc_scripts and ScriptConfig.csf_scripts
+      post_milestone_disabled: !!script && !Gatekeeper.allows('postMilestone', where: {script_name: script.name}, default: true),
       code_review_expires_at: code_review_expires_at
     }
   end

dashboard/test/models/sections/section_test.rb

@@ -394,6 +394,7 @@ def verify(actual, expected)
         restrict_section: false,
         code_review_enabled: true,
         is_assigned_csa: false,
+        post_milestone_disabled: false,
         code_review_expires_at: nil
       }
       # Compare created_at separately because the object's created_at microseconds
@@ -437,6 +438,7 @@ def verify(actual, expected)
         restrict_section: false,
         code_review_enabled: true,
         is_assigned_csa: false,
+        post_milestone_disabled: false,
         code_review_expires_at: nil
       }
       # Compare created_at separately because the object's created_at microseconds
@@ -483,6 +485,7 @@ def verify(actual, expected)
         restrict_section: false,
         code_review_enabled: true,
         is_assigned_csa: false,
+        post_milestone_disabled: false,
         code_review_expires_at: nil
       }
       # Compare created_at separately because the object's created_at microseconds
@@ -523,6 +526,7 @@ def verify(actual, expected)
         restrict_section: false,
         code_review_enabled: true,
         is_assigned_csa: false,
+        post_milestone_disabled: false,
         code_review_expires_at: nil
       }
       # Compare created_at separately because the object's created_at microseconds