From 91beae9a4b31efdd594d406ff8ef05d6d022f3c8 Mon Sep 17 00:00:00 2001 From: Charlie Forkish Date: Wed, 20 Jan 2021 14:36:51 -0800 Subject: [PATCH 1/2] refactored SectionProgressNameCell into new ProgressTableStudentName --- .../ProgressTableStudentName.jsx | 103 ++++++++++++++++++ .../ProgressTableStudentNameTest.jsx | 51 +++++++++ 2 files changed, 154 insertions(+) create mode 100644 apps/src/templates/sectionProgress/progressTables/ProgressTableStudentName.jsx create mode 100644 apps/test/unit/templates/sectionProgress/progressTables/ProgressTableStudentNameTest.jsx diff --git a/apps/src/templates/sectionProgress/progressTables/ProgressTableStudentName.jsx b/apps/src/templates/sectionProgress/progressTables/ProgressTableStudentName.jsx new file mode 100644 index 0000000000000..1fd455a7fe809 --- /dev/null +++ b/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 ( + + + {i18n.lastProgress()} +
+ {timestamp} +
+
+ ); + } + + render() { + const {name, studentUrl} = this.props; + const tooltipId = this.tooltipId(); + + return ( +
+ {this.renderTooltip()} + + {name} + +
+ ); + } +} diff --git a/apps/test/unit/templates/sectionProgress/progressTables/ProgressTableStudentNameTest.jsx b/apps/test/unit/templates/sectionProgress/progressTables/ProgressTableStudentNameTest.jsx new file mode 100644 index 0000000000000..7469b26d55add --- /dev/null +++ b/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(); + 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(); + 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(); + 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(); + const link = wrapper.find('a[href="/student-link"]'); + expect(link).to.have.lengthOf(1); + expect(link.contains(DEFAULT_PROPS.name)).to.equal(true); + }); +}); From 6030f1b8c07a2c85765a7085022a69274584ba76 Mon Sep 17 00:00:00 2001 From: Charlie Forkish Date: Wed, 20 Jan 2021 16:03:22 -0800 Subject: [PATCH 2/2] trigger drone run