[skip ui] Merge branch 'staging' into prettier-changes

Author: Hamms

apps/src/sites/studio/pages/teacher_dashboard/show.js

@@ -105,6 +105,7 @@ $(document).ready(function() {
                 {...props}
                 studioUrlPrefix={scriptData.studioUrlPrefix}
                 pegasusUrlPrefix={scriptData.pegasusUrlPrefix}
+                sectionName={section.name}
               />
             )}
           />

apps/src/templates/NavigationBarLink.jsx

@@ -30,11 +30,7 @@ export default class NavigationBarLink extends React.Component {
     const {label, url} = this.props;
 
     return (
-      <NavLink
-        to={`/${url}`}
-        style={styles.link}
-        activeStyle={styles.activeLink}
-      >
+      <NavLink to={url} style={styles.link} activeStyle={styles.activeLink}>
         <span>{label}</span>
       </NavLink>
     );

apps/src/templates/SmallChevronLink.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FontAwesome from './FontAwesome';
 import color from '../util/color';
+import {makeEnum} from '@cdo/apps/utils';
 
 const styles = {
   link: {
@@ -32,26 +33,38 @@ const styles = {
   }
 };
 
+const ChevronSide = makeEnum('left', 'right');
+
 export default class SmallChevronLink extends Component {
   static propTypes = {
     linkText: PropTypes.string.isRequired,
     link: PropTypes.string.isRequired,
-    isRtl: PropTypes.bool.isRequired
+    isRtl: PropTypes.bool.isRequired,
+    chevronSide: PropTypes.oneOf(Object.values(ChevronSide))
   };
 
-  render() {
-    const {link, linkText, isRtl} = this.props;
-
+  renderChevron = () => {
+    const {isRtl} = this.props;
     const icon = isRtl ? 'chevron-left' : 'chevron-right';
 
+    return (
+      <FontAwesome
+        icon={icon}
+        style={isRtl ? styles.chevronRtl : styles.chevron}
+      />
+    );
+  };
+
+  render() {
+    const {link, linkText, chevronSide} = this.props;
+
     return (
       <div style={styles.linkBox}>
         <a href={link} style={styles.link}>
+          {chevronSide === ChevronSide.left && this.renderChevron()}
           <h3 style={styles.link}>{linkText}</h3>
-          <FontAwesome
-            icon={icon}
-            style={isRtl ? styles.chevronRtl : styles.chevron}
-          />
+          {(!chevronSide || chevronSide === ChevronSide.right) &&
+            this.renderChevron()}
         </a>
       </div>
     );

apps/src/templates/manageStudents/ManageStudentsAgeCell.jsx

@@ -30,7 +30,12 @@ class ManageStudentAgeCell extends Component {
       <div>
         {!this.props.isEditing && <div>{age}</div>}
         {this.props.isEditing && (
-          <select name="age" value={editedValue} onChange={this.onChangeAge}>
+          <select
+            style={{width: 50}}
+            name="age"
+            value={editedValue}
+            onChange={this.onChangeAge}
+          >
             {ages.map(age => (
               <option key={age} value={age}>
                 {age}

apps/src/templates/manageStudents/ManageStudentsTable.jsx

@@ -48,6 +48,10 @@ const styles = {
   },
   buttonWithMargin: {
     marginRight: 5
+  },
+  verticalAlign: {
+    display: 'flex',
+    alignItems: 'center'
   }
 };
 
@@ -288,7 +292,7 @@ class ManageStudentsTable extends Component {
           />
         )}
         {numberOfEditingRows <= 1 && (
-          <span>
+          <span style={styles.verticalAlign}>
             <div style={styles.headerName}>{i18n.actions()}</div>
             <div style={styles.headerIcon}>
               <ManageStudentsActionsHeaderCell
@@ -304,7 +308,7 @@ class ManageStudentsTable extends Component {
 
   projectSharingHeaderFormatter = () => {
     return (
-      <span>
+      <span style={styles.verticalAlign}>
         <div style={styles.headerName} data-for="explain-sharing" data-tip="">
           {i18n.projectSharingColumnHeader()}
         </div>

apps/src/templates/projects/SectionProjectsList.jsx

@@ -9,8 +9,7 @@ const styles = {
     float: 'right'
   },
   filterRow: {
-    backgroundColor: 'transparent',
-    padding: 10
+    paddingBottom: 10
   },
   clearDiv: {
     clear: 'both'

apps/src/templates/sectionAssessments/SectionAssessments.jsx

@@ -200,7 +200,7 @@ class SectionAssessments extends Component {
                   </div>
                 )}
                 {totalStudentSubmissions <= 0 && (
-                  <h3>{i18n.emptyAssessmentSubmissions()}</h3>
+                  <div>{i18n.emptyAssessmentSubmissions()}</div>
                 )}
                 <SubmissionStatusAssessmentsContainer />
                 {totalStudentSubmissions > 0 && (
@@ -237,7 +237,7 @@ class SectionAssessments extends Component {
                   </div>
                 )}
                 {totalStudentSubmissions <= 0 && (
-                  <h3>{i18n.emptySurveyOverviewTable()}</h3>
+                  <div>{i18n.emptySurveyOverviewTable()}</div>
                 )}
               </div>
             )}
@@ -257,9 +257,7 @@ class SectionAssessments extends Component {
           </div>
         )}
         {!isLoading && assessmentList.length === 0 && (
-          <div style={styles.empty}>
-            <h3>{i18n.noAssessments()}</h3>
-          </div>
+          <div style={styles.empty}>{i18n.noAssessments()}</div>
         )}
       </div>
     );

apps/src/templates/teacherDashboard/SelectSectionDropdown.jsx

@@ -7,9 +7,7 @@ import {navigateToHref} from '@cdo/apps/utils';
 const styles = {
   container: {
     display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    marginBottom: 10
+    alignItems: 'center'
   },
   dropdown: {
     marginLeft: 10,

apps/src/templates/teacherDashboard/TeacherDashboard.jsx

@@ -1,8 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Route, Switch} from 'react-router-dom';
-import SelectSectionDropdown from './SelectSectionDropdown';
-import TeacherDashboardNavigation from './TeacherDashboardNavigation';
+import TeacherDashboardHeader from './TeacherDashboardHeader';
 import StatsTableWithData from './StatsTableWithData';
 import SectionProgress from '@cdo/apps/templates/sectionProgress/SectionProgress';
 import ManageStudents from '@cdo/apps/templates/manageStudents/ManageStudents';
@@ -15,24 +14,26 @@ export default class TeacherDashboard extends Component {
   static propTypes = {
     studioUrlPrefix: PropTypes.string.isRequired,
     pegasusUrlPrefix: PropTypes.string.isRequired,
+    sectionName: PropTypes.string.isRequired,
 
     // Provided by React router in parent.
     location: PropTypes.object.isRequired
   };
 
   render() {
-    const {location, studioUrlPrefix, pegasusUrlPrefix} = this.props;
+    const {
+      location,
+      studioUrlPrefix,
+      pegasusUrlPrefix,
+      sectionName
+    } = this.props;
+
     // Include header components unless we are on the /print_login_cards page.
     const includeHeader = location.pathname !== '/print_login_cards';
 
     return (
       <div>
-        {includeHeader && (
-          <div>
-            <SelectSectionDropdown />
-            <TeacherDashboardNavigation />
-          </div>
-        )}
+        {includeHeader && <TeacherDashboardHeader sectionName={sectionName} />}
         <Switch>
           <Route path="/stats" component={props => <StatsTableWithData />} />
           <Route path="/progress" component={props => <SectionProgress />} />
@@ -65,8 +66,12 @@ export default class TeacherDashboard extends Component {
               />
             )}
           />
-          {/* Render <SectionProgress/> by default */}
-          <Route component={props => <SectionProgress />} />
+          {/* Render <ManageStudents/> by default */}
+          <Route
+            component={props => (
+              <ManageStudents studioUrlPrefix={studioUrlPrefix} />
+            )}
+          />
         </Switch>
       </div>
     );

apps/src/templates/teacherDashboard/TeacherDashboardHeader.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import i18n from '@cdo/locale';
+import SmallChevronLink from '../SmallChevronLink';
+import SelectSectionDropdown from './SelectSectionDropdown';
+import TeacherDashboardNavigation from './TeacherDashboardNavigation';
+
+const styles = {
+  headerContainer: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  }
+};
+
+export default class TeacherDashboardHeader extends React.Component {
+  static propTypes = {
+    sectionName: PropTypes.string.isRequired
+  };
+
+  render() {
+    return (
+      <div>
+        <SmallChevronLink
+          link="/home#classroom-sections"
+          linkText={i18n.viewAllSections()}
+          isRtl={true}
+          chevronSide="left"
+        />
+        <div style={styles.headerContainer}>
+          <h1>{this.props.sectionName}</h1>
+          <SelectSectionDropdown />
+        </div>
+        <TeacherDashboardNavigation />
+      </div>
+    );
+  }
+}

apps/src/templates/teacherDashboard/TeacherDashboardNavigation.jsx

@@ -5,27 +5,27 @@ import i18n from '@cdo/locale';
 const teacherDashboardLinks = [
   {
     label: i18n.teacherTabManageStudents(),
-    url: 'manage_students'
+    url: '/manage_students'
   },
   {
     label: i18n.teacherTabProjects(),
-    url: 'projects'
+    url: '/projects'
   },
   {
     label: i18n.teacherTabStats(),
-    url: 'stats'
+    url: '/stats'
   },
   {
     label: i18n.teacherTabStatsTextResponses(),
-    url: 'text_responses'
+    url: '/text_responses'
   },
   {
     label: i18n.teacherTabProgress(),
-    url: 'progress'
+    url: '/progress'
   },
   {
     label: i18n.teacherTabAssessments(),
-    url: 'assessments'
+    url: '/assessments'
   }
 ];
 

dashboard/test/ui/features/teacher_dashboard.feature

@@ -35,11 +35,11 @@ Feature: Using the teacher dashboard
     # Assessments and surveys tab
     When I click selector "#learn-tabs a:contains('Assessments/Surveys')" once I see it
     And I wait until element "#uitest-course-dropdown" is visible
-    And I wait until element "h3:contains(no submissions for this assessment)" is visible
-    And I wait until element "h3:contains(this survey is anonymous)" is not visible
+    And I wait until element "div:contains(no submissions for this assessment)" is visible
+    And I wait until element "div:contains(this survey is anonymous)" is not visible
     And I select the "Lesson 30: Anonymous student survey" option in dropdown "assessment-selector"
-    And I wait until element "h3:contains(this survey is anonymous)" is visible
-    And I wait until element "h3:contains(no submissions for this assessment)" is not visible
+    And I wait until element "div:contains(this survey is anonymous)" is visible
+    And I wait until element "div:contains(no submissions for this assessment)" is not visible
 
   Scenario: Loading section projects
     Given I create a teacher-associated student named "Sally"

dashboard/test/ui/features/teacher_dashboard_assessments1.feature

@@ -29,4 +29,4 @@ Feature: Using the assessments tab in the teacher dashboard
     # Assessments tab
     When I click selector "#learn-tabs a:contains('Assessments/Surveys')" once I see it
     And I wait until element "#uitest-course-dropdown" is visible
-    Then I wait until element "h3:contains(this survey is anonymous)" is visible
+    Then I wait until element "div:contains(this survey is anonymous)" is visible