Merge pull request #38216 from code-dot-org/cforkish/LP-1675-Progress…

…TableStudentName

ProgressTableStudentName

apps/src/templates/sectionProgress/progressTables/ProgressTableStudentName.jsx

@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+import moment from 'moment';
+import firehoseClient from '../../../lib/util/firehose';
+import i18n from '@cdo/locale';
+import color from '@cdo/apps/util/color';
+import * as progressStyles from '@cdo/apps/templates/progress/progressStyles';
+
+const styles = {
+  link: {
+    color: color.teal
+  },
+  tooltip: {
+    display: 'flex',
+    textAlign: 'center'
+  }
+};
+export default class ProgressTableStudentName extends React.PureComponent {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    studentId: PropTypes.number.isRequired,
+    sectionId: PropTypes.number.isRequired,
+    scriptId: PropTypes.number,
+    lastTimestamp: PropTypes.number,
+    localeCode: PropTypes.string,
+    studentUrl: PropTypes.string.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+    this.recordStudentNameClick = this.recordStudentNameClick.bind(this);
+  }
+
+  recordStudentNameClick() {
+    firehoseClient.putRecord(
+      {
+        study: 'teacher_dashboard_actions',
+        study_group: 'progress',
+        event: 'go_to_student',
+        data_json: JSON.stringify({
+          section_id: this.props.sectionId,
+          script_id: this.props.scriptId,
+          student_id: this.props.studentId
+        })
+      },
+      {includeUserId: true}
+    );
+  }
+
+  tooltipId() {
+    return `tooltipIdForStudent${this.props.studentId}`;
+  }
+
+  renderTooltip() {
+    const {lastTimestamp, localeCode} = this.props;
+    const id = this.tooltipId();
+    if (localeCode) {
+      moment.locale(localeCode);
+    }
+    const timestamp = lastTimestamp
+      ? moment(lastTimestamp).calendar()
+      : i18n.none();
+    return (
+      <ReactTooltip
+        id={id}
+        key={id}
+        role="tooltip"
+        wrapper="span"
+        effect="solid"
+      >
+        <span style={styles.tooltip}>
+          {i18n.lastProgress()}
+          <br />
+          {timestamp}
+        </span>
+      </ReactTooltip>
+    );
+  }
+
+  render() {
+    const {name, studentUrl} = this.props;
+    const tooltipId = this.tooltipId();
+
+    return (
+      <div
+        style={progressStyles.studentListContent}
+        data-tip
+        data-for={tooltipId}
+        aria-describedby={tooltipId}
+      >
+        {this.renderTooltip()}
+        <a
+          style={styles.link}
+          href={studentUrl}
+          onClick={this.recordStudentNameClick}
+        >
+          {name}
+        </a>
+      </div>
+    );
+  }
+}

apps/test/unit/templates/sectionProgress/progressTables/ProgressTableStudentNameTest.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {expect} from '../../../../util/reconfiguredChai';
+import {shallow} from 'enzyme';
+import ProgressTableStudentName from '@cdo/apps/templates/sectionProgress/progressTables/ProgressTableStudentName';
+
+const DEFAULT_PROPS = {
+  name: 'Joe',
+  studentId: 1,
+  sectionId: 1,
+  scriptId: 1,
+  lastTimestamp: 1578646800000,
+  localeCode: 'en-US',
+  studentUrl: '/student-link'
+};
+
+describe('ProgressTableStudentName', () => {
+  it('renders tooltip with empty state when lastTimeStamp is null', () => {
+    const props = {...DEFAULT_PROPS, lastTimestamp: null};
+    const wrapper = shallow(<ProgressTableStudentName {...props} />);
+    const tooltip = wrapper.find('#tooltipIdForStudent1');
+    expect(tooltip.contains('Last Progress:')).to.equal(true);
+    expect(tooltip.contains('None')).to.equal(true);
+  });
+
+  it('renders tooltip with timestamp when lastTimeStamp is present', () => {
+    const props = {...DEFAULT_PROPS, lastTimestamp: 1578646800000};
+    const wrapper = shallow(<ProgressTableStudentName {...props} />);
+    const tooltip = wrapper.find('#tooltipIdForStudent1');
+    expect(tooltip.contains('Last Progress:')).to.equal(true);
+    expect(tooltip.contains('01/10/2020')).to.equal(true);
+  });
+
+  it('renders tooltip with timestamp in correct locale when lastTimeStamp and localeCode are present', () => {
+    const props = {
+      ...DEFAULT_PROPS,
+      lastTimestamp: 1578646800000,
+      localeCode: 'fr'
+    };
+    const wrapper = shallow(<ProgressTableStudentName {...props} />);
+    const tooltip = wrapper.find('#tooltipIdForStudent1');
+    expect(tooltip.contains('Last Progress:')).to.equal(true);
+    expect(tooltip.contains('10/01/2020')).to.equal(true);
+  });
+
+  it('renders name as a link to studentUrl', () => {
+    const wrapper = shallow(<ProgressTableStudentName {...DEFAULT_PROPS} />);
+    const link = wrapper.find('a[href="/student-link"]');
+    expect(link).to.have.lengthOf(1);
+    expect(link.contains(DEFAULT_PROPS.name)).to.equal(true);
+  });
+});