show hidden unit warning banner on script overview page

apps/i18n/common/en_us.json

@@ -644,6 +644,8 @@
   "helpTips": "Help & Tips",
   "hidden": "Hidden",
   "hiddenScriptTooltip": "Please select a section before trying to toggle whether or not the unit is visible to your students.",
+  "hiddenUnitWarningNotice": "The unit is hidden for this section",
+  "hiddenUnitWarningDetails": "Go to the course overview page to update which units are visible to your students by clicking \"View all units.\"",
   "hide": "Hide",
   "hideArchivedSections": "Hide archived sections",
   "hideFullList": "Hide full list",

apps/src/code-studio/components/progress/ScriptOverview.jsx

@@ -14,6 +14,7 @@ import ProgressLegend from '@cdo/apps/templates/progress/ProgressLegend';
 import { resourceShape } from '@cdo/apps/templates/courseOverview/resourceType';
 import { hasLockableStages } from '@cdo/apps/code-studio/progressRedux';
 import ScriptOverviewHeader from './ScriptOverviewHeader';
+import { isScriptHiddenForSection } from '@cdo/apps/code-studio/hiddenStageRedux';
 
 /**
  * Stage progress component used in level header and script overview.
@@ -47,6 +48,8 @@ class ScriptOverview extends React.Component {
     currentCourseId: PropTypes.number,
     scriptHasLockableStages: PropTypes.bool.isRequired,
     scriptAllowsHiddenStages: PropTypes.bool.isRequired,
+    hiddenStageState: PropTypes.object,
+    selectedSectionId: PropTypes.string,
   };
 
   render() {
@@ -69,6 +72,8 @@ class ScriptOverview extends React.Component {
       showCourseUnitVersionWarning,
       showScriptVersionWarning,
       versions,
+      hiddenStageState,
+      selectedSectionId,
     } = this.props;
 
     let scriptProgress = NOT_STARTED;
@@ -78,13 +83,17 @@ class ScriptOverview extends React.Component {
       scriptProgress = IN_PROGRESS;
     }
 
+    const isHiddenUnit = !!selectedSectionId && !!scriptId &&
+      isScriptHiddenForSection(hiddenStageState, selectedSectionId, scriptId);
+
     return (
       <div>
         {onOverviewPage && (
           <div>
             <ScriptOverviewHeader
               showCourseUnitVersionWarning={showCourseUnitVersionWarning}
               showScriptVersionWarning={showScriptVersionWarning}
+              showHiddenUnitWarning={isHiddenUnit}
               versions={versions}
             />
             {!professionalLearningCourse && viewAs === ViewType.Teacher &&
@@ -129,4 +138,6 @@ export default connect(state => ({
   currentCourseId: state.progress.courseId,
   scriptHasLockableStages: state.stageLock.lockableAuthorized && hasLockableStages(state.progress),
   scriptAllowsHiddenStages: state.hiddenStage.hideableStagesAllowed,
+  hiddenStageState: state.hiddenStage,
+  selectedSectionId: state.teacherSections.selectedSectionId,
 }))(UnconnectedScriptOverview);

apps/src/code-studio/components/progress/ScriptOverviewHeader.jsx

@@ -73,6 +73,7 @@ class ScriptOverviewHeader extends Component {
       version_year: PropTypes.string.isRequired,
       version_title: PropTypes.string.isRequired,
     })).isRequired,
+    showHiddenUnitWarning: PropTypes.bool,
   };
 
   componentDidMount() {
@@ -113,6 +114,7 @@ class ScriptOverviewHeader extends Component {
       showCourseUnitVersionWarning,
       showScriptVersionWarning,
       versions,
+      showHiddenUnitWarning,
     } = this.props;
 
     let verifiedResourcesAnnounce = [];
@@ -156,6 +158,17 @@ class ScriptOverviewHeader extends Component {
             onDismiss={this.onDismissVersionWarning}
           />
         }
+        {showHiddenUnitWarning &&
+          <Notification
+            type={NotificationType.warning}
+            notice={i18n.hiddenUnitWarningNotice()}
+            details={i18n.hiddenUnitWarningDetails()}
+            dismissible={false}
+            width={SCRIPT_OVERVIEW_WIDTH}
+            buttonText={i18n.learnMore()}
+            buttonLink="https://support.code.org/hc/en-us/articles/115001479372-Hiding-units-and-lessons-in-Code-org-s-CS-Principles-and-CS-Discoveries-courses"
+          />
+        }
         <div id="lesson">
           <div id="heading" style={styles.heading}>
             <div style={styles.titleWrapper}>

apps/src/code-studio/hiddenStageRedux.js

@@ -165,6 +165,9 @@ function postToggleHidden(scriptName, sectionId, stageId, hidden) {
     dataType: 'json',
     contentType: 'application/json',
     data: JSON.stringify(data)
+  }).success(() => {
+    window.__TestInterface = window.__TestInterface || {};
+    window.__TestInterface.toggleHiddenUnitComplete = true;
   });
 }
 

dashboard/test/ui/features/step_definitions/steps.rb

@@ -1515,6 +1515,9 @@ def refute_bad_gateway_or_site_unreachable
 
 Then /^I hide unit "([^"]+)"$/ do |unit_name|
   @browser.execute_script("$('.uitest-CourseScript:contains(#{unit_name}) .fa-eye-slash').click();")
+  wait_short_until do
+    @browser.execute_script("return window.__TestInterface.toggleHiddenUnitComplete;")
+  end
 end
 
 Then /^unit "([^"]+)" is marked as (not )?visible$/ do |unit_name, negation|

dashboard/test/ui/features/teacher_homepage.feature

@@ -98,9 +98,13 @@ Feature: Using the teacher homepage sections feature
 
     # Hide a unit from the section
     When I hide unit "CSP Unit 2 - Digital Information"
-    And I wait for 5 seconds
     And unit "CSP Unit 2 - Digital Information" is marked as not visible
 
+    # Verify hidden unit warning banner appears
+    When I am on "http://studio.code.org/s/csp2-2017"
+    And I wait until element "#script-title" is visible
+    Then I wait until element ".announcement-notification:contains(unit is hidden)" is visible
+
     # Try to assign the unit
     Given I am on "http://studio.code.org/home"
     And I click selector ".ui-test-section-dropdown"