Manage students tab: show data with new UI under experiment

apps/src/sites/code.org/pages/public/teacher-dashboard/index.js

@@ -15,8 +15,9 @@ import {
   renderSyncOauthSectionControl,
   unmountSyncOauthSectionControl,
   renderLoginTypeAndSharingControls,
-  unmountLoginTypeAndSharingControls
-} from './sections';
+  unmountLoginTypeAndSharingControls,
+  renderSectionTable,
+} from '@cdo/apps/templates/teacherDashboard/sections';
 import logToCloud from '@cdo/apps/logToCloud';
 
 const script = document.querySelector('script[data-teacherdashboard]');
@@ -28,6 +29,7 @@ main(scriptData);
 // disableExperiments url params will cause a persistent setting to be stored
 // from any page in teacher dashboard.
 const showProjectThumbnails = experiments.isEnabled('showProjectThumbnails');
+const showManageStudentsReact = experiments.isEnabled(experiments.MANAGE_STUDENTS);
 
 function renderSectionProjects(sectionId) {
   const dataUrl = `/dashboardapi/v1/projects/section/${sectionId}`;
@@ -395,6 +397,12 @@ function main() {
         $scope.section.$promise.then(section => renderLoginTypeAndSharingControls(section.id));
       });
 
+      if (showManageStudentsReact) {
+        $scope.$on('student-table-react-rendered', () => {
+          $scope.section.$promise.then(section => renderSectionTable(section.id, section.login_type));
+        });
+      }
+
       $scope.$on('$destroy', () => {
         unmountSyncOauthSectionControl();
         unmountLoginTypeAndSharingControls();

apps/src/templates/manageStudents/ManageStudentsTable.jsx

@@ -16,13 +16,12 @@ export const studentSectionDataPropType = PropTypes.shape({
   id: PropTypes.number.isRequired,
   name: PropTypes.string,
   username: PropTypes.string,
-  userType: PropTypes.string,
   age: PropTypes.number,
   gender: PropTypes.string,
   secretWords: PropTypes.string,
-  secretPictureName: PropTypes.string,
   secretPicturePath: PropTypes.string,
   sectionId: PropTypes.number,
+  loginType: PropTypes.string,
 });
 
 /** @enum {number} */

apps/src/templates/manageStudents/ShowSecret.jsx

@@ -15,8 +15,8 @@ const styles = {
 class ShowSecret extends Component {
   static propTypes = {
     initialIsShowing: PropTypes.bool,
-    secretWord: PropTypes.string.isRequired,
-    secretPicture: PropTypes.string.isRequired,
+    secretWord: PropTypes.string,
+    secretPicture: PropTypes.string,
     resetSecret: PropTypes.func.isRequired,
     loginType: PropTypes.string.isRequired,
   };
@@ -56,7 +56,7 @@ class ShowSecret extends Component {
               <p>{this.props.secretWord}</p>
             }
             {this.props.loginType === SectionLoginType.picture &&
-              <img src={this.props.secretPicture} style={styles.image} />
+              <img src={'/images/' + this.props.secretPicture} style={styles.image} />
             }
             <Button onClick={this.reset} color={Button.ButtonColor.blue} text={i18n.reset()} style={styles.reset} />
             <Button onClick={this.hide} color={Button.ButtonColor.white} text={i18n.hideSecret()} />

apps/src/sites/code.org/pages/public/teacher-dashboard/sections.js → apps/src/templates/teacherDashboard/sections.js

@@ -9,6 +9,7 @@ import teacherSections, {
 import SyncOmniAuthSectionControl from '@cdo/apps/lib/ui/SyncOmniAuthSectionControl';
 import LoginTypeParagraph from '@cdo/apps/templates/teacherDashboard/LoginTypeParagraph';
 import SectionsSharingButton from '@cdo/apps/templates/teacherDashboard/SectionsSharingButton';
+import ManageStudentsTable from '@cdo/apps/templates/manageStudents/ManageStudentsTable';
 
 /**
  * On the manage students tab of an oauth section, use React to render a button
@@ -69,6 +70,38 @@ export function renderLoginTypeAndSharingControls(sectionId) {
   );
 }
 
+export function renderSectionTable(sectionId, loginType) {
+  const dataUrl = `/v2/sections/${sectionId}/students`;
+  const element = document.getElementById('student-table-react');
+
+  $.ajax({
+    method: 'GET',
+    url: dataUrl,
+    dataType: 'json'
+  }).done(studentData => {
+    studentData = studentData.map((student) => {
+      return {
+        id: student.id,
+        name: student.name,
+        username: student.username,
+        age: student.age,
+        gender: student.gender,
+        secretWords: student.secret_words,
+        secretPicturePath: student.secret_picture_path,
+        sectionId: sectionId,
+        loginType: loginType,
+      };
+    });
+    ReactDOM.render(
+      <ManageStudentsTable
+        studentData={studentData}
+        id={sectionId}
+        loginType={loginType}
+      />,
+      element);
+  });
+}
+
 export function unmountLoginTypeAndSharingControls() {
   ReactDOM.unmountComponentAtNode(loginTypeControlsMountPoint());
   ReactDOM.unmountComponentAtNode(shareSettingMountPoint());

apps/src/util/experiments.js

@@ -15,6 +15,8 @@ const STORAGE_KEY = 'experimentsList';
 const GA_EVENT = 'experiments';
 const EXPERIMENT_LIFESPAN_HOURS = 12;
 
+experiments.MANAGE_STUDENTS = 'manageStudents';
+
 /**
  * Get our query string. Provided as a method so that tests can mock this.
  */

pegasus/sites.v3/code.org/public/teacher-dashboard/section_manage.haml

@@ -1,4 +1,3 @@
-
 ---
 layout: none
 theme: none
@@ -148,6 +147,8 @@ content-type: text/ng-template
       %th.manage-th{style: "padding-top:5px;padding-bottom:5px; height:45px"}
         %button.btn.btn-primary{"ng-click" => "save(section.students)", "ng-show" => "editingAny(section.students)", style: "float:left", "ng-disabled" => "allForm.$invalid"}= I18n.t('dashboard_action_save_all')
 
+  #student-table-react{'ng-init' => '$emit("student-table-react-rendered");'}
+
   %div{"ng-if" => "section.login_type === 'picture' || section.login_type === 'word'"}
     %h3{"ng-show" => 'section.students.length > 0'}
       = I18n.t 'dashboard_students_share_section', section_code: '{{section.code}}', join_url: CDO.code_org_url('/join', 'http:')