Revert "Revert "Simplify header when viewing level page as a peer doing code review""

apps/src/code-studio/components/TeacherContentToggle.js

@@ -25,7 +25,8 @@ class TeacherContentToggle extends React.Component {
     hiddenLessonsInitialized: PropTypes.bool.isRequired,
     sectionsAreLoaded: PropTypes.bool.isRequired,
     isHiddenLesson: PropTypes.bool.isRequired,
-    isLockedLesson: PropTypes.bool.isRequired
+    isLockedLesson: PropTypes.bool.isRequired,
+    isCodeReviewing: PropTypes.bool
   };
 
   componentDidMount() {
@@ -55,7 +56,8 @@ class TeacherContentToggle extends React.Component {
       sectionsAreLoaded,
       isLockedLesson,
       isHiddenLesson,
-      isBlocklyOrDroplet
+      isBlocklyOrDroplet,
+      isCodeReviewing
     } = this.props;
 
     const frameStyle = {
@@ -71,9 +73,13 @@ class TeacherContentToggle extends React.Component {
     let hasOverlayFrame = isLockedLesson || isHiddenLesson;
 
     if (viewAs === ViewType.Participant) {
+      // When a teacher is code reviewing another teacher, we load a different header experience
+      // so that we don't expose progress between peers. Section data is not loaded in this teacher-as-student
+      // viewing another teacher experience
+      const sectionsAreLoading = !sectionsAreLoaded && !isCodeReviewing;
       // Keep this hidden until we've made our async calls for hidden_lessons and
       // locked lessons, so that we don't flash content before hiding it
-      if (!hiddenLessonsInitialized || !sectionsAreLoaded || hasOverlayFrame) {
+      if (!hiddenLessonsInitialized || sectionsAreLoading || hasOverlayFrame) {
         contentStyle.visibility = 'hidden';
       }
     }
@@ -138,7 +144,7 @@ export const mapStateToProps = state => {
     );
   } else if (!state.verifiedInstructor.isVerified) {
     // if not-authorized teacher
-    isLockedLesson = state.progress.lessons.some(
+    isLockedLesson = state.progress.lessons?.some(
       lesson => lesson.id === currentLessonId && lesson.lockable
     );
   }
@@ -148,7 +154,8 @@ export const mapStateToProps = state => {
     sectionsAreLoaded: state.teacherSections.sectionsAreLoaded,
     hiddenLessonsInitialized: state.hiddenLesson.hiddenLessonsInitialized,
     isHiddenLesson,
-    isLockedLesson
+    isLockedLesson,
+    isCodeReviewing: state.pageConstants?.isCodeReviewing
   };
 };
 

apps/src/code-studio/components/header/HeaderMiddle.jsx

@@ -16,6 +16,7 @@ const lessonProgressExtraWidth = 10;
 class HeaderMiddle extends React.Component {
   static propTypes = {
     projectInfoOnly: PropTypes.bool,
+    scriptNameOnly: PropTypes.bool,
     appLoadStarted: PropTypes.bool,
     appLoaded: PropTypes.bool,
     scriptNameData: PropTypes.object,
@@ -78,6 +79,7 @@ class HeaderMiddle extends React.Component {
   static getWidths(
     width,
     projectInfoOnly,
+    scriptNameOnly,
     projectInfoDesiredWidth,
     scriptNameDesiredWidth,
     lessonProgressDesiredWidth,
@@ -96,6 +98,18 @@ class HeaderMiddle extends React.Component {
       };
     }
 
+    if (scriptNameOnly) {
+      return {
+        projectInfo: 0,
+        scriptName: Math.floor(
+          Math.min(scriptNameDesiredWidth + scriptNameExtraWidth, width)
+        ),
+        progress: 0,
+        popup: 0,
+        finish: 0
+      };
+    }
+
     // We will take care of padding the lesson progress with an extra 5 pixels
     // on each side.
     const lessonProgressDesiredWidthAdjusted =
@@ -179,6 +193,7 @@ class HeaderMiddle extends React.Component {
     const widths = HeaderMiddle.getWidths(
       this.state.width,
       this.props.projectInfoOnly,
+      this.props.scriptNameOnly,
       this.state.projectInfoDesiredWidth,
       this.state.scriptNameDesiredWidth,
       this.state.lessonProgressDesiredWidth,

apps/src/code-studio/components/progress/teacherPanel/TeacherPanel.jsx

@@ -320,7 +320,7 @@ export default connect(
     );
 
     let lessonNames = {};
-    state.progress.lessons.forEach(lesson => {
+    state.progress.lessons?.forEach(lesson => {
       lessonNames[lesson.id] = lesson.name;
     });
 

apps/src/code-studio/header.js

@@ -139,6 +139,17 @@ header.buildProjectInfoOnly = function() {
   );
 };
 
+// When viewing the level page in code review mode, we want to show only the
+// lesson information (which is displayed by the ScriptName component).
+header.buildScriptNameOnly = function(scriptNameData) {
+  ReactDOM.render(
+    <Provider store={getStore()}>
+      <HeaderMiddle scriptNameData={scriptNameData} scriptNameOnly={true} />
+    </Provider>,
+    document.querySelector('.header_level')
+  );
+};
+
 // When the page is cached, this function is called to retrieve and set the
 // sign-in button or user menu in the DOM.
 header.buildUserMenu = function() {

apps/src/sites/studio/pages/levels/_teacher_panel.js

@@ -14,6 +14,7 @@ import {
   setUserRoleInCourse,
   CourseRoles
 } from '@cdo/apps/templates/currentUserRedux';
+import {queryParams} from '@cdo/apps/code-studio/utils';
 
 $(document).ready(initPage);
 
@@ -34,16 +35,26 @@ function initPage() {
   }
 
   if (teacherPanelData.is_instructor) {
-    store.dispatch(setViewType(ViewType.Instructor));
+    store.dispatch(setViewType(queryParams('viewAs') || ViewType.Instructor));
     store.dispatch(setUserRoleInCourse(CourseRoles.Instructor));
   }
 
-  renderTeacherPanel(
-    store,
-    teacherPanelData.script_id,
-    teacherPanelData.script_name,
-    teacherPanelData.page_type
-  );
+  // If a teacher is peer-reviewing another teacher in a workshop, don't render
+  // the teacher panel, as it doesn't make sense in that context.
+  // We need to check for presence of appOptions since some pages such as /extras
+  // (lesson extras page) do not set appOptions.
+  const shouldRenderTeacherPanel = window.appOptions
+    ? !window.appOptions.isCodeReviewing
+    : true;
+
+  if (shouldRenderTeacherPanel) {
+    renderTeacherPanel(
+      store,
+      teacherPanelData.script_id,
+      teacherPanelData.script_name,
+      teacherPanelData.page_type
+    );
+  }
 }
 
 function renderTeacherContentToggle(store) {

apps/test/unit/code-studio/components/header/HeaderMiddleTest.js

@@ -10,6 +10,7 @@ describe('HeaderMiddle', () => {
     const widths = HeaderMiddle.getWidths(
       700,    // width,
       false,  // projectInfoOnly,
+      false,  // scriptNameOnly,
       0,      // projectInfoDesiredWidth,
       200,    // scriptNameDesiredWidth,
       350,    // lessonProgressDesiredWidth,
@@ -31,6 +32,7 @@ describe('HeaderMiddle', () => {
     const widths = HeaderMiddle.getWidths(
       350,    // width,
       false,  // projectInfoOnly,
+      false,  // scriptNameOnly,
       0,      // projectInfoDesiredWidth,
       200,    // scriptNameDesiredWidth,
       350,    // lessonProgressDesiredWidth,
@@ -52,6 +54,7 @@ describe('HeaderMiddle', () => {
     const widths = HeaderMiddle.getWidths(
       700,    // width,
       false,  // projectInfoOnly,
+      false,  // scriptNameOnly,
       200,    // projectInfoDesiredWidth,
       200,    // scriptNameDesiredWidth,
       350,    // lessonProgressDesiredWidth,
@@ -73,6 +76,7 @@ describe('HeaderMiddle', () => {
     const widths = HeaderMiddle.getWidths(
       350,    // width,
       false,  // projectInfoOnly,
+      false,  // scriptNameOnly,
       200,    // projectInfoDesiredWidth,
       200,    // scriptNameDesiredWidth,
       350,    // lessonProgressDesiredWidth,
@@ -94,6 +98,7 @@ describe('HeaderMiddle', () => {
     const widths = HeaderMiddle.getWidths(
       700,    // width,
       true,   // projectInfoOnly,
+      false,  // scriptNameOnly,
       400,    // projectInfoDesiredWidth,
       0,      // scriptNameDesiredWidth,
       0,      // lessonProgressDesiredWidth,
@@ -113,6 +118,7 @@ describe('HeaderMiddle', () => {
     const widths = HeaderMiddle.getWidths(
       350,    // width,
       true,   // projectInfoOnly,
+      false,  // scriptNameOnly,
       400,    // projectInfoDesiredWidth,
       0,      // scriptNameDesiredWidth,
       0,      // lessonProgressDesiredWidth,
@@ -127,4 +133,44 @@ describe('HeaderMiddle', () => {
     assert.equal(widths.popup, 0);
     assert.equal(widths.finish, 0);
   });
+
+  it('widths for script name only when wide', () => {
+    const widths = HeaderMiddle.getWidths(
+      700,    // width,
+      false,  // projectInfoOnly,
+      true,   // scriptNameOnly,
+      0,      // projectInfoDesiredWidth,
+      400,    // scriptNameDesiredWidth,
+      0,      // lessonProgressDesiredWidth,
+      0,      // numScriptLessons,
+      0,      // finishDesiredWidth,
+      false   // showFinish
+    );
+
+    assert.equal(widths.projectInfo, 0);
+    assert.equal(widths.scriptName, 410);
+    assert.equal(widths.progress, 0);
+    assert.equal(widths.popup, 0);
+    assert.equal(widths.finish, 0);
+  });
+
+  it('widths for script name only when narrow', () => {
+    const widths = HeaderMiddle.getWidths(
+      350,    // width,
+      false,  // projectInfoOnly,
+      true,   // scriptNameOnly,
+      0,      // projectInfoDesiredWidth,
+      400,    // scriptNameDesiredWidth,
+      0,      // lessonProgressDesiredWidth,
+      0,      // numScriptLessons,
+      0,      // finishDesiredWidth,
+      false   // showFinish
+    );
+
+    assert.equal(widths.projectInfo, 0);
+    assert.equal(widths.scriptName, 350);
+    assert.equal(widths.progress, 0);
+    assert.equal(widths.popup, 0);
+    assert.equal(widths.finish, 0);
+  });
 });

dashboard/app/controllers/script_levels_controller.rb

@@ -413,6 +413,7 @@ def load_user
       @user = user_to_view
 
       if can?(:view_as_user_for_code_review, @script_level, user_to_view, sublevel_to_view)
+        @is_code_reviewing = true
         view_options(is_code_reviewing: true)
       end
     end

dashboard/app/views/layouts/_header.html.haml

@@ -42,7 +42,7 @@
   header_contents_options[:loc_prefix] = "nav.header."
   header_contents_options[:page_mode] = request.cookies['pm']
 
-  should_show_progress = script_level || @lesson_extras
+  should_show_progress = (script_level || @lesson_extras) && !@is_code_reviewing
 
   sign_in_user = current_user || user_type && OpenStruct.new(
     id: nil,
@@ -131,6 +131,12 @@
       href: script_path(@script, section_id: section_id, user_id: user_id),
       smallText: small_text
     }
+  elsif @is_code_reviewing
+    script_name_data = {
+      name: script_level.lesson.localized_title,
+      href: '#',  # When viewing peer code, link should do nothing
+      smallText: false
+    }
   end
 
 - if should_show_progress
@@ -150,6 +156,12 @@
     )
     //]]>
 
+- elsif @is_code_reviewing
+  :javascript
+    dashboard.header.buildScriptNameOnly(
+      #{script_name_data.to_json}
+    )
+
 - elsif level
   :javascript
     dashboard.header.buildProjectInfoOnly()