Finalize on TeacherDashboardHeader after A/B test

apps/src/templates/teacherDashboard/TeacherDashboard.jsx

@@ -4,9 +4,7 @@ import {Route, Switch} from 'react-router-dom';
 import TeacherDashboardNavigation, {
   TeacherDashboardPath
 } from './TeacherDashboardNavigation';
-import experiments from '@cdo/apps/util/experiments';
 import TeacherDashboardHeader from './TeacherDashboardHeader';
-import TeacherDashboardHeaderWithButtons from './TeacherDashboardHeaderWithButtons';
 import StatsTableWithData from './StatsTableWithData';
 import SectionProgress from '@cdo/apps/templates/sectionProgress/SectionProgress';
 import ManageStudents from '@cdo/apps/templates/manageStudents/ManageStudents';
@@ -18,34 +16,7 @@ import EmptySection from './EmptySection';
 import _ from 'lodash';
 import firehoseClient from '../../lib/util/firehose';
 import StandardsReport from '../sectionProgress/standards/StandardsReport';
-import {recordImpression} from './impressionHelpers';
 
-function Header(props) {
-  if (experiments.isEnabled(experiments.TEACHER_DASHBOARD_SECTION_BUTTONS)) {
-    if (
-      experiments.isEnabled(
-        experiments.TEACHER_DASHBOARD_SECTION_BUTTONS_ALTERNATE_TEXT
-      )
-    ) {
-      recordImpression('teacher_dashboard_header_with_buttons_switch_section');
-    } else {
-      recordImpression('teacher_dashboard_header_with_buttons_select_section');
-    }
-    return (
-      <div>
-        {/* TeacherDashboardNavigation must be outside of
-        TeacherDashboardHeader. Routing components do not work with
-        components using Connect/Redux. Library we could use to fix issue:
-        https://github.com/supasate/connected-react-router */}
-        <TeacherDashboardHeaderWithButtons />
-        <TeacherDashboardNavigation />
-      </div>
-    );
-  } else {
-    recordImpression('teacher_dashboard_header_no_buttons');
-    return <TeacherDashboardHeader sectionName={props.sectionName} />;
-  }
-}
 class TeacherDashboard extends Component {
   static propTypes = {
     studioUrlPrefix: PropTypes.string.isRequired,
@@ -106,7 +77,16 @@ class TeacherDashboard extends Component {
 
     return (
       <div>
-        {includeHeader && <Header {...this.props} />}
+        {includeHeader && (
+          <div>
+            {/* TeacherDashboardNavigation must be outside of
+            TeacherDashboardHeader. Routing components do not work with
+            components using Connect/Redux. Library we could use to fix issue:
+            https://github.com/supasate/connected-react-router */}
+            <TeacherDashboardHeader />
+            <TeacherDashboardNavigation />
+          </div>
+        )}
         <Switch>
           <Route
             path={TeacherDashboardPath.manageStudents}

apps/src/templates/teacherDashboard/TeacherDashboardHeader.jsx

@@ -1,22 +1,80 @@
+import FontAwesome from './../FontAwesome';
 import React from 'react';
+import {connect} from 'react-redux';
+import {
+  switchToSection,
+  recordSwitchToSection,
+  recordOpenEditSectionDetails
+} from './sectionHelpers';
 import PropTypes from 'prop-types';
 import i18n from '@cdo/locale';
 import SmallChevronLink from '../SmallChevronLink';
-import SelectSectionDropdown from './SelectSectionDropdown';
-import TeacherDashboardNavigation from './TeacherDashboardNavigation';
+import {ReloadAfterEditSectionDialog} from './EditSectionDialog';
+import {beginEditingSection} from './teacherSectionsRedux';
+import Button from '../Button';
+import DropdownButton from '../DropdownButton';
 
 const styles = {
-  headerContainer: {
+  sectionPrompt: {
+    fontWeight: 'bold'
+  },
+  header: {
     display: 'flex',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+    marginBottom: '5px'
+  },
+  rightColumn: {
+    display: 'flex',
+    flexDirection: 'column-reverse'
+  },
+  buttonSection: {
+    display: 'flex'
+  },
+  buttonWithMargin: {
+    marginRight: '5px'
   }
 };
 
-export default class TeacherDashboardHeader extends React.Component {
+class TeacherDashboardHeader extends React.Component {
   static propTypes = {
-    sectionName: PropTypes.string.isRequired
+    sections: PropTypes.object.isRequired,
+    selectedSectionId: PropTypes.number.isRequired,
+    selectedSectionScript: PropTypes.object.isRequired,
+    openEditSectionDialog: PropTypes.func.isRequired
   };
 
+  constructor(props) {
+    super(props);
+    this.getDropdownOptions = this.getDropdownOptions.bind(this);
+    this.selectedSection = this.props.sections[this.props.selectedSectionId];
+  }
+
+  getDropdownOptions(optionMetricName) {
+    let self = this;
+    let sections = this.props.sections;
+    let options = Object.keys(sections).map(function(key, i) {
+      let section = sections[key];
+      let optionOnClick = () => {
+        switchToSection(section.id, self.selectedSection.id);
+        recordSwitchToSection(
+          section.id,
+          self.selectedSection.id,
+          optionMetricName
+        );
+      };
+      let icon = undefined;
+      if (section.id === self.selectedSection.id) {
+        icon = <FontAwesome icon="check" />;
+      }
+      return (
+        <a key={i} id={section.id} onClick={optionOnClick}>
+          {icon} {section.name}
+        </a>
+      );
+    });
+    return options;
+  }
+
   render() {
     return (
       <div>
@@ -26,12 +84,65 @@ export default class TeacherDashboardHeader extends React.Component {
           isRtl={true}
           chevronSide="left"
         />
-        <div style={styles.headerContainer}>
-          <h1>{this.props.sectionName}</h1>
-          <SelectSectionDropdown />
+        <div style={styles.header}>
+          <div>
+            <h1>{this.selectedSection.name}</h1>
+            <div>
+              <span style={styles.sectionPrompt}>
+                {i18n.assignedToWithColon()}{' '}
+              </span>
+              {this.props.selectedSectionScript.name}
+            </div>
+          </div>
+          <div style={styles.rightColumn}>
+            <div style={styles.buttonSection}>
+              <Button
+                __useDeprecatedTag
+                onClick={() => {
+                  this.props.openEditSectionDialog(this.selectedSection.id);
+                  recordOpenEditSectionDetails(
+                    this.selectedSection.id,
+                    'dashboard_header'
+                  );
+                }}
+                icon="gear"
+                size="narrow"
+                color="gray"
+                text={i18n.editSectionDetails()}
+                style={styles.buttonWithMargin}
+              />
+              <DropdownButton
+                size="narrow"
+                color="gray"
+                text={i18n.switchSection()}
+              >
+                {this.getDropdownOptions('from_button_switch_section')}
+              </DropdownButton>
+            </div>
+          </div>
         </div>
-        <TeacherDashboardNavigation />
+        <ReloadAfterEditSectionDialog />
       </div>
     );
   }
 }
+
+export const UnconnectedTeacherDashboardHeader = TeacherDashboardHeader;
+
+export default connect(
+  state => {
+    let sections = state.teacherSections.sections;
+    let selectedSectionId = state.teacherSections.selectedSectionId;
+
+    let selectedSectionScriptId = state.scriptSelection.scriptId;
+    let selectedSectionScript = state.scriptSelection.validScripts.filter(
+      script => script.id === selectedSectionScriptId
+    )[0];
+    return {sections, selectedSectionId, selectedSectionScript};
+  },
+  dispatch => {
+    return {
+      openEditSectionDialog: id => dispatch(beginEditingSection(id))
+    };
+  }
+)(TeacherDashboardHeader);