diff --git a/client/components/TestQueue/index.jsx b/client/components/TestQueue/index.jsx index 80b3745f1..72670c143 100644 --- a/client/components/TestQueue/index.jsx +++ b/client/components/TestQueue/index.jsx @@ -102,6 +102,7 @@ const TestQueue = () => { Test Plan + AT Version Requirements Testers Report Status Actions diff --git a/client/components/TestQueue/queries.js b/client/components/TestQueue/queries.js index ddd772409..966966aa9 100644 --- a/client/components/TestQueue/queries.js +++ b/client/components/TestQueue/queries.js @@ -57,6 +57,14 @@ export const TEST_QUEUE_PAGE_QUERY = gql` id name } + minimumAtVersion { + id + name + } + exactAtVersion { + id + name + } browser { id name @@ -108,6 +116,14 @@ export const TEST_PLAN_REPORT_QUERY = gql` id name } + minimumAtVersion { + id + name + } + exactAtVersion { + id + name + } browser { id name diff --git a/client/components/TestQueueRow/index.jsx b/client/components/TestQueueRow/index.jsx index cd2fd6852..8584d58dc 100644 --- a/client/components/TestQueueRow/index.jsx +++ b/client/components/TestQueueRow/index.jsx @@ -105,7 +105,7 @@ const TestQueueRow = ({ testPlanRunId: run.id, ...run.tester })) - .filter(tester => !isBot(tester)); + .filter(tester => !tester.isBot); const getTestPlanRunIdByUserId = userId => { return draftTestPlanRuns.find(({ tester }) => tester.id === userId).id; @@ -530,6 +530,11 @@ const TestQueueRow = ({ {renderAssignedUserToTestPlan()} + + {testPlanReport.minimumAtVersion + ? `${testPlanReport.minimumAtVersion.name} or later` + : testPlanReport.exactAtVersion.name} + {isSignedIn && isTester && (
diff --git a/client/tests/__mocks__/GraphQLMocks/TestQueuePageAdminPopulatedMock.js b/client/tests/__mocks__/GraphQLMocks/TestQueuePageAdminPopulatedMock.js index 53008087a..1e778ad56 100644 --- a/client/tests/__mocks__/GraphQLMocks/TestQueuePageAdminPopulatedMock.js +++ b/client/tests/__mocks__/GraphQLMocks/TestQueuePageAdminPopulatedMock.js @@ -236,6 +236,8 @@ export default testQueuePageQuery => [ runnableTestsLength: 17, markedFinalAt: null, at: { id: '1', name: 'JAWS' }, + minimumAtVersion: { id: '1', name: '2024.3321.1' }, + exactAtVersion: null, browser: { id: '2', name: 'Chrome' }, testPlanVersion: { id: '1', @@ -266,6 +268,8 @@ export default testQueuePageQuery => [ runnableTestsLength: 17, markedFinalAt: null, at: { id: '3', name: 'VoiceOver for macOS' }, + minimumAtVersion: { id: '3', name: '14.5' }, + exactAtVersion: null, browser: { id: '3', name: 'Safari' }, testPlanVersion: { id: '1', @@ -296,6 +300,8 @@ export default testQueuePageQuery => [ runnableTestsLength: 17, markedFinalAt: null, at: { id: '2', name: 'NVDA' }, + minimumAtVersion: null, + exactAtVersion: { id: '2', name: '2024.2' }, browser: { id: '1', name: 'Firefox' }, testPlanVersion: { id: '1', diff --git a/client/tests/__mocks__/GraphQLMocks/TestQueuePageTesterPopulatedMock.js b/client/tests/__mocks__/GraphQLMocks/TestQueuePageTesterPopulatedMock.js index 7e621452c..3d10714bc 100644 --- a/client/tests/__mocks__/GraphQLMocks/TestQueuePageTesterPopulatedMock.js +++ b/client/tests/__mocks__/GraphQLMocks/TestQueuePageTesterPopulatedMock.js @@ -239,6 +239,8 @@ export default testQueuePageQuery => [ id: '2', name: 'NVDA' }, + minimumAtVersion: { id: '1', name: '2024.3321.1' }, + exactAtVersion: null, browser: { id: '1', name: 'Firefox' @@ -287,6 +289,8 @@ export default testQueuePageQuery => [ id: '2', name: 'JAWS' }, + minimumAtVersion: { id: '3', name: '14.5' }, + exactAtVersion: null, browser: { id: '1', name: 'Firefox' @@ -325,6 +329,8 @@ export default testQueuePageQuery => [ id: '3', name: 'VoiceOver for macOS' }, + minimumAtVersion: null, + exactAtVersion: { id: '2', name: '2024.2' }, browser: { id: '1', name: 'Firefox' diff --git a/server/handlebars/embed/public/style.css b/server/handlebars/embed/public/style.css index 02117c5b6..87ccde88f 100644 --- a/server/handlebars/embed/public/style.css +++ b/server/handlebars/embed/public/style.css @@ -4,36 +4,36 @@ body { margin: 0; /* Parent should use the posted message and set an explicit height */ overflow: hidden; - } - - #main { +} + +#main { width: 100%; - } - - a { +} + +a { color: #036; - } - a:focus-visible { +} +a:focus-visible { outline: 2px solid #3a86d1; - } - - h3#report-title { +} + +h3#report-title { margin-top: 0; margin-bottom: 0.5rem; - + font-family: Arial, Helvetica, sans-serif; font-size: 18px; - } - - #copied-message { +} + +#copied-message { align-self: center; - } - - #at-version { +} + +#at-version { font-weight: lighter; - } - - #no-data-content-container { +} + +#no-data-content-container { border-left: 1.5px solid #c0c0c0; border-right: 1.5px solid #c0c0c0; border-bottom: 1.5px solid #c0c0c0; @@ -43,17 +43,17 @@ body { font-size: 14px; margin-bottom: 1em; text-align: center; - } - - #embed-report-phase-container { +} + +#embed-report-phase-container { margin-bottom: 1em; - } - #embed-report-phase-container summary:focus-visible { +} +#embed-report-phase-container summary:focus-visible { outline-offset: -2px; outline: 2px solid #3a86d1; - } - - #embed-report-phase-container summary::after { +} + +#embed-report-phase-container summary::after { width: 30px; height: 30px; border-radius: 3px; @@ -67,19 +67,19 @@ body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6.861' viewBox='0 0 12 6.861'%3E%3Cpath id='Icon_ionic-ios-arrow-down' data-name='Icon ionic-ios-arrow-down' d='M12.19,16.039,16.727,11.5a.854.854,0,0,1,1.211,0,.865.865,0,0,1,0,1.215L12.8,17.858a.856.856,0,0,1-1.183.025L6.438,12.717A.858.858,0,1,1,7.649,11.5Z' transform='translate(18.188 18.108) rotate(180)' fill='%2360470c'/%3E%3C/svg%3E%0A"); background-color: #fce1a4; transform: rotate(180deg); - } - - #embed-report-phase-container[open] summary::after { +} + +#embed-report-phase-container[open] summary::after { transform: rotate(0deg); - } - - /* section: CANDIDATE WARNING STYLING */ - summary { +} + +/* section: CANDIDATE WARNING STYLING */ +summary { display: block; - } - - #candidate-title { - background-color:#fcebc3; +} + +#candidate-title { + background-color: #fcebc3; border: 1.5px solid #fce1a4; border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -87,47 +87,47 @@ body { cursor: pointer; --space-between-elements: 1em; --left-right-padding: 55px; - } - - #candidate-title > span { +} + +#candidate-title > span { position: relative; padding-left: var(--left-right-padding); padding-right: var(--left-right-padding); - } - - #candidate-title > span > h4 { +} + +#candidate-title > span > h4 { font-family: Arial, Helvetica, sans-serif; font-size: 1em; - color: #60470C; + color: #60470c; display: inline-block; - } - - #candidate-title.recommended { +} + +#candidate-title.recommended { border: 1.5px solid #7ac498; background-color: #e9fbe9; - } - #candidate-title.recommended > span { +} +#candidate-title.recommended > span { background-color: #115b11; - } - - #candidate-content-container { +} + +#candidate-content-container { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; padding: 1em 0.5em 0.5em 1em; font-family: Noto Sans, Trebuchet MS, Helvetica Neue, Arial, sans-serif; font-size: 1rem; - color: #60470C; + color: #60470c; background-color: #fdefce; border-left: 1px solid #fce1a4; border-right: 1px solid #fce1a4; border-bottom: 1px solid #fce1a4; - } - - #candidate-content-container > ol > li:not(:last-child) { +} + +#candidate-content-container > ol > li:not(:last-child) { margin-bottom: 3px; - } - - #candidate-title > ::before { +} + +#candidate-title > ::before { width: 32px; height: 32px; display: block; @@ -137,54 +137,54 @@ body { left: 5px; top: -7px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='31' viewBox='0 0 30 31'%3E%3Cg id='Group_1' data-name='Group 1' transform='translate(-11 -292)'%3E%3Cellipse id='Ellipse_1' data-name='Ellipse 1' cx='15' cy='15.5' rx='15' ry='15.5' transform='translate(11 292)' fill='%23d9ae4d'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M4.524-17.368a4.507,4.507,0,0,0-1.56.312.278.278,0,0,0-.13.286V-14.9c0,2.184.416,8.294.468,9.022a.172.172,0,0,0,.182.156h2.08c.156,0,.182-.078.182-.156.078-.78.52-6.916.52-9.1v-1.872a.326.326,0,0,0-.156-.286A5.112,5.112,0,0,0,4.524-17.368Zm0,17.576A1.7,1.7,0,0,0,6.4-1.534,1.741,1.741,0,0,0,4.524-3.328,1.77,1.77,0,0,0,2.652-1.534,1.7,1.7,0,0,0,4.524.208Z' transform='translate(22 316)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); - } - - .no-data-cell { +} + +.no-data-cell { display: block; color: #72777f; font-style: italic; text-align: center; - } - - .responsive-table { +} + +.responsive-table { overflow-x: auto; width: 100%; margin-bottom: 1em; - } - - table { +} + +table { border-collapse: collapse; border-top: 1.5px solid #c0c0c0; width: 100%; - } - - table td, - th { +} + +table td, +th { padding: 1rem; border: 1.5px solid #c0c0c0; - } - - th, - td { +} + +th, +td { font-family: Arial, Helvetica, sans-serif; padding: 15px; border: 1.5px solid #c0c0c0; - } - - th { +} + +th { background-color: #f2f2f2; - } - - table tbody tr th { +} + +table tbody tr th { text-align: left; - } - - table tbody tr td { +} + +table tbody tr td { padding: 20px; text-align: center; - } - - .meter { +} + +.meter { box-sizing: content-box; height: 15px; /* Can be anything */ position: relative; @@ -192,18 +192,18 @@ body { border-radius: 25px; margin-bottom: 10px; overflow: hidden; - } - - .meter > span { +} + +.meter > span { display: block; height: 100%; float: left; background-color: #175a6a; border-radius: 25px; position: relative; - } - - .button { +} + +.button { border: none; padding: 10px 20px; font-family: Arial, Helvetica, sans-serif; @@ -212,57 +212,56 @@ body { cursor: pointer; border-radius: 3px; border: 3px solid #175a6a; - } - - #view-report-button { +} + +#view-report-button { color: white; background-color: #175a6a; margin-right: 6px; - } - #view-report-button:hover { +} +#view-report-button:hover { background-color: #024e5c; border-color: #024e5c; - } - #view-report-button:focus-visible { +} +#view-report-button:focus-visible { margin-left: 4px; padding: 0 8px 0 12px; - } - #embed-button { +} +#embed-button { color: #175a6a; background-color: white; margin-left: 4px; - } - #embed-button:hover { +} +#embed-button:hover { background-color: #f4f4f4; - } - - #view-report-button, - #embed-button { +} + +#view-report-button, +#embed-button { margin-bottom: 1em; padding: 0 12px; line-height: 36px; - } - #view-report-button:focus-visible, - #embed-button:focus-visible { +} +#view-report-button:focus-visible, +#embed-button:focus-visible { outline-offset: 2px; outline: 2px solid #3a86d1; - } - #view-report-button svg, - #embed-button svg { +} +#view-report-button svg, +#embed-button svg { width: 24px; margin-right: 8px; float: left; position: relative; top: 6px; - } - - #embed-button-wrap { +} + +#embed-button-wrap { display: inline-block; - } - - #copied-message { +} + +#copied-message { font-family: Arial, Helvetica, sans-serif; margin: 5px; display: inline-block; - } - \ No newline at end of file +}