diff --git a/services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss b/services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss index a29c48d1485..0a42747b80c 100644 --- a/services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss +++ b/services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss @@ -113,6 +113,19 @@ table.data-table { display: inline-block; } } + .student-responses-link { + text-decoration: none; + &:focus { + .data-table-chip { + outline: dashed 2px #06806B; + outline-offset: 2px; + text-decoration: inherit; + } + } + .data-table-chip { + margin: 4px; + } + } td { .aggregate-row-icon, .aggregate-row-toggle { margin-left: 4px; @@ -127,6 +140,42 @@ table.data-table { display: flex; align-items: center; } + .data-table-chip { + display: flex; + align-items: center; + border-radius: 4px; + padding: 4px 8px 4px 6px; + background-color: $quill-green-1; + border: 1px solid $quill-green-20; + width: min-content; + max-width: 100%; + + &:focus { + outline-offset: 3px; + } + + &:not(.grey):hover { + background-color: $quill-green-5; + } + + &.grey { + background-color: $quill-grey-1; + border: 1px solid $quill-grey-15; + + p { + color: $quill-grey-90; + } + } + + p { + @include display-xs; + color: $quill-green; + margin-left: 4px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } } &:hover { background-color: #f2f2f2 !important; diff --git a/services/QuillLMS/client/app/bundles/Shared/utils/languageList.js b/services/QuillLMS/client/app/bundles/Shared/utils/languageList.js index 850bf047d84..3151479d7f2 100644 --- a/services/QuillLMS/client/app/bundles/Shared/utils/languageList.js +++ b/services/QuillLMS/client/app/bundles/Shared/utils/languageList.js @@ -117,61 +117,5 @@ export const languageToLocale = { [DARI]: 'prs' } -export const ALPHA_TRANSLATED_ACTIVITY_UIDS = [ - "2a9481f3-f910-42e2-9ae4-53cd73bbee47", - "78cc6398-5259-4c6d-a37a-b0490184bed3", - "90b977be-9e64-4c2b-83a4-addcfb92eac8", - "06e087b2-6626-41b5-b113-13e990c2cabb", - "9721ed85-47d7-4930-93cf-1b57bf1a0dce", - "a7b84aa2-4215-4c6b-9ae7-4813f247d7bb", - "acc77361-b80c-414d-ba11-5e56a45e8aff", - "2a72b366-259b-4fc5-8108-1439f84a3094", - "c2c551cd-c231-431a-a4cf-861186839020", - "ea9e0db2-10cf-4e58-be67-5b90eb12b3d4", - "7e6e9576-aaa0-4401-aefd-ed939ac009a9", - "582a3f46-afd8-4337-b8a6-858f84b78961", - "2ecef095-f63a-4c12-bc3f-6fd8f7fc577e", - "6eaebc60-4288-4931-9d52-b81aad270ea9", - "24674ecd-dc25-4db0-9115-9ae198d7b4b0", - "da5836d1-793c-4835-b33b-ee673c20d444", - "1d8ae118-3783-4669-983d-0d05e4eca292", - "d707c2f5-d42b-4b3d-b8e3-ec6307034660", - "f60fac99-f404-43a9-acc3-d0039d70e0cf", - "09260fbf-f008-4592-b114-879ba7b38d32", - "bce290af-27bc-49b7-9d53-45b7b59e1c1f", - "3973edce-5321-4f63-88cd-f84288b275f4", - "a55ac86d-e815-4490-8763-49e492801463", - "2409c828-a9d8-4491-aa28-d3780013956a", - "74e41e8c-25db-4b06-80e7-5c9432694173", - "542f6188-92b8-49e4-b9df-810efdbc9fee", - "8b551a3d-7eae-4672-8c3d-d8516fedb2bf", - "abcc9513-cb6b-40c9-9c8e-eb5770a6b838", - "13170c3b-b49c-4d96-8495-2c6cc0974b13", - "cb5356d5-8d92-458a-83e9-b3c03904e6d0", - "9a5e0e0e-3af7-4046-9d82-bcd45b208777", - "86bdb660-7a01-49f2-8332-28d811a9a422", - "0dea4444-5146-46e3-9ebf-4bfa35712087", - "03b59374-d120-4cb5-ac27-5b3d45b9e581", - "6ee604d9-611d-466e-9eac-7812d77acbea", - "53381c9b-ab29-437b-acee-17228f9ebc85", - "bd3f0acc-e8c3-41f6-ae36-a9c65f007f87", - "4b8bc1c7-ffd0-4b59-b8f8-91c4f4db35bc", - "93f866a8-db6f-4f79-953c-ca1228eeebe1", - "8706a43c-13b5-4ca0-9520-ed982250c96a", - "21e71dab-b3c5-4776-8061-5cd6ee82e287", - "d674d622-b551-4119-a727-e1909e79e232", - "c94eaeb3-4a7a-4b3c-8709-bb7eee457f8a", - "92f7e941-99c7-48c1-b927-4a2f6c0f021f", - "27abce8c-6062-4938-aa85-74deebba5e40", - "2a07dddd-796a-4f4f-83b6-b0ec03d3f370", - "14534975-e3d0-460e-881b-ecd389f0fb96", - "e2c285fd-b973-4d52-a2b3-0cb73b3b6391", - "4f17260c-c793-4443-8902-0a5f81b92116", - "7d363347-6ad3-4476-b124-6d0e08182cc8", - "54c91530-d44a-4a9a-8ce9-af9c6680fd60", - // randomized question activities - "-KybO7eiRjMiMYYowjtR", - "z8WSMBEV9uBRodWd_t-RNA", - "-KybNc1Xkj1Yz59OoNaA", - "-L0udJg9M0ETmF6k0zJ6" -] +// we'll keep this for when new activities are translated and the translations still need to be QA'ed +export const ALPHA_TRANSLATED_ACTIVITY_UIDS = [] diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/__tests__/__snapshots__/studentResponsesIndex.test.jsx.snap b/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/__tests__/__snapshots__/studentResponsesIndex.test.jsx.snap index 9eaec226e65..5a9a263672b 100644 --- a/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/__tests__/__snapshots__/studentResponsesIndex.test.jsx.snap +++ b/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/__tests__/__snapshots__/studentResponsesIndex.test.jsx.snap @@ -1,262 +1,29 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`StudentResponsesIndex component should render when there is no student data 1`] = ` - - + + `; exports[`StudentResponsesIndex component should render when there is student data 1`] = ` - - + + `; diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/__tests__/studentResponsesIndex.test.jsx b/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/__tests__/studentResponsesIndex.test.jsx index d138d91460c..0c31fb697bf 100644 --- a/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/__tests__/studentResponsesIndex.test.jsx +++ b/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/__tests__/studentResponsesIndex.test.jsx @@ -1,5 +1,5 @@ -import { mount } from 'enzyme'; import React from 'react'; +import { render } from '@testing-library/react'; import { BrowserRouter as Router } from 'react-router-dom'; import { @@ -13,7 +13,7 @@ import { StudentResponsesIndex, } from '../studentResponsesIndex'; describe('StudentResponsesIndex component', () => { it('should render when there is no student data', () => { - const wrapper = mount( + const { asFragment } = render( { passedStudents={passedStudentsWithNoStudentData} /> ) - expect(wrapper).toMatchSnapshot() + expect(asFragment()).toMatchSnapshot(); }) it('should render when there is student data', () => { - const wrapper = mount( + const { asFragment } = render( { passedStudents={passedStudentsWithStudentData} /> ) - expect(wrapper).toMatchSnapshot() + expect(asFragment()).toMatchSnapshot(); }) }) diff --git a/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/studentResponsesIndex.tsx b/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/studentResponsesIndex.tsx index 79411a28343..41a5154e91e 100644 --- a/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/studentResponsesIndex.tsx +++ b/services/QuillLMS/client/app/bundles/Teacher/components/progress_reports/diagnostic_reports/diagnostics/studentResponsesIndex.tsx @@ -13,7 +13,7 @@ import { } from './shared'; import { requestGet } from '../../../../../../modules/request/index'; -import { DataTable, pluralize } from '../../../../../Shared/index'; +import { DataTable, DataTableChip, accountGreenIcon, pluralize } from '../../../../../Shared/index'; import LoadingSpinner from '../../../shared/loading_indicator.jsx'; interface Student { @@ -32,8 +32,7 @@ interface Student { const S_CELL_WIDTH = '176px' const M_CELL_WIDTH = '184px' -const L_CELL_WIDTH = '244px' -const XL_CELL_WIDTH = '252px' +const L_CELL_WIDTH = '320px' const NOT_AVAILABLE = 'Not available' const diagnosticNotCompletedElement = (Diagnostic not completed) @@ -51,7 +50,7 @@ const preTestDesktopHeaders = (isSortable) => ([ name: '', attribute: 'activeDiagnosticSkillsCorrectElement', sortAttribute: 'totalCorrectSkillsCount', - width: XL_CELL_WIDTH, + width: L_CELL_WIDTH, rowSectionClassName: 'score-section', headerClassName: 'score-header', primaryTitle: 'Pre:', @@ -65,21 +64,13 @@ const preTestDesktopHeaders = (isSortable) => ([ name: '', attribute: 'preSkillsProficientElement', sortAttribute: 'totalPreCorrectSkillsCount', - width: XL_CELL_WIDTH, + width: L_CELL_WIDTH, primaryTitle: 'Pre:', secondaryTitle: 'Skills Proficient', tooltipName: 'Pre: Skills Proficient', tooltipDescription: preSkillsProficientTooltipText, noTooltip: true, isSortable - }, - { - name: 'Responses', - attribute: 'individualResponsesLink', - width: S_CELL_WIDTH, - noTooltip: true, - rowSectionClassName: 'individual-responses-link', - headerClassName: 'individual-responses-header' } ]) @@ -155,14 +146,6 @@ const postTestDesktopHeaders = (isSortable) => ([ tooltipDescription: postSkillsImprovedOrMaintainTooltipText, noTooltip: true, isSortable - }, - { - name: 'Responses', - attribute: 'individualResponsesLink', - width: S_CELL_WIDTH, - noTooltip: true, - rowSectionClassName: 'individual-responses-link', - headerClassName: 'individual-responses-header' } ]) @@ -312,10 +295,18 @@ export const StudentResponsesIndex = ({ passedStudents, match, mobileNavigation, ) } - function renderIndividualResponsesLink({total_correct_questions_count, id}) { - if (total_correct_questions_count === undefined) { return null } - - return View + function renderStudentChip({ total_correct_questions_count, id, name, isDesktopView }) { + if (isDesktopView && total_correct_questions_count === undefined) { + return {name} + } + if (total_correct_questions_count === undefined) { + return {name}Diagnostic not completed + } + return( + + + + ) } const responsesLink = (studentId: number) => unitId ? `/diagnostics/${activityId}/classroom/${classroomId}/responses/${studentId}?unit=${unitId}` : `/diagnostics/${activityId}/classroom/${classroomId}/responses/${studentId}` @@ -330,7 +321,7 @@ export const StudentResponsesIndex = ({ passedStudents, match, mobileNavigation, return { id: id || name, - name, + name: renderStudentChip({ total_correct_questions_count, id, name, isDesktopView: true }), alphabeticalName: alphabeticalName(name), preToPostImprovedSkills: renderPreToPostImprovedSkillsElement({total_correct_questions_count, total_acquired_skill_groups_count}), totalCorrectSkillsCount: total_correct_questions_count, @@ -341,21 +332,18 @@ export const StudentResponsesIndex = ({ passedStudents, match, mobileNavigation, preSkillsProficientElement: renderPreSkillsProficient({ total_correct_questions_count, total_pre_correct_questions_count, skill_groups, total_correct_skill_groups_count, correct_skill_groups_text }), preSkillsCorrectElement: renderPreSkillsCorrectElement({ total_correct_questions_count, total_pre_correct_questions_count, total_pre_possible_questions_count, total_possible_questions_count }), activeDiagnosticSkillsCorrectElement: renderActiveDiagnosticSkillsCorrectElement({ total_correct_questions_count, total_possible_questions_count }), - postSkillsImprovedOrMaintained: renderPostSkillsImprovedOrMaintained({ total_pre_possible_questions_count, correct_skill_groups_text, total_acquired_skill_groups_count, total_maintained_skill_group_proficiency_count }), - individualResponsesLink: renderIndividualResponsesLink({ total_correct_questions_count, id }) + postSkillsImprovedOrMaintained: renderPostSkillsImprovedOrMaintained({ total_pre_possible_questions_count, correct_skill_groups_text, total_acquired_skill_groups_count, total_maintained_skill_group_proficiency_count }) } }) const mobileRows = students.map(student => { const { name, total_possible_questions_count, total_correct_questions_count, id, } = student - const nameElement = total_correct_questions_count !== undefined ? {name} : {name}Diagnostic not completed return { id: id || name, - name: nameElement, + name: renderStudentChip({ total_correct_questions_count, id, name, isDesktopView: false }), alphabeticalName: alphabeticalName(name), totalCorrectSkillsCount: total_correct_questions_count, - skillsCorrectElement: total_correct_questions_count !== undefined ?
{total_correct_questions_count} of {total_possible_questions_count} ({calculateSkillsPercentage(total_correct_questions_count, total_possible_questions_count)}%)
: null, - individualResponsesLink: total_correct_questions_count !== undefined ? View : Diagnostic not completed + skillsCorrectElement: total_correct_questions_count !== undefined ?
{total_correct_questions_count} of {total_possible_questions_count} ({calculateSkillsPercentage(total_correct_questions_count, total_possible_questions_count)}%)
: null } })