From 5c08e93ad096626201935ee2554d263abcb719c7 Mon Sep 17 00:00:00 2001
From: AndreiaPena <andreia.pena@pix.fr>
Date: Wed, 5 Mar 2025 17:45:19 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20certif:=20use=20PixTable=20on=20rep?=
 =?UTF-8?q?orts=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../completed-reports-information-step.hbs    | 186 +++++++++---------
 .../uncompleted-reports-information-step.hbs  | 180 +++++++++--------
 .../styles/components/issue-report-modal.scss |   2 +-
 .../reports-information-step.scss             |  30 +--
 certif/app/styles/globals/panels.scss         |   1 -
 ...completed-reports-information-step-test.js |   3 +-
 ...completed-reports-information-step-test.js |   3 +-
 7 files changed, 201 insertions(+), 204 deletions(-)

diff --git a/certif/app/components/session-finalization/completed-reports-information-step.hbs b/certif/app/components/session-finalization/completed-reports-information-step.hbs
index 9064adc1a59..12ff8adc51c 100644
--- a/certif/app/components/session-finalization/completed-reports-information-step.hbs
+++ b/certif/app/components/session-finalization/completed-reports-information-step.hbs
@@ -1,99 +1,109 @@
-<div class="table session-finalization-reports-information-step">
-  <table>
-    {{#if (gt @session.uncompletedCertificationReports.length 0)}}
-      <caption>
-        <PixNotificationAlert
-          class="session-finalization-reports-information-step__title-completed"
-          @withIcon={{true}}
-          @type="success"
-        >
-          {{t "pages.session-finalization.reporting.completed-reports-information.description"}}
-        </PixNotificationAlert>
-        <span class="screen-reader-only">
-          {{t "pages.session-finalization.reporting.completed-reports-information.extra-information"}}
-        </span>
-      </caption>
-    {{/if}}
-    <thead>
-      <tr>
-        <th>{{t "common.labels.candidate.lastname"}}</th>
-        <th>{{t "common.labels.candidate.firstname"}}</th>
-        <th>{{t "pages.session-finalization.reporting.table.labels.certification-number"}}</th>
-        <th>{{t "pages.session-finalization.reporting.table.labels.reporting"}}</th>
-        {{#if @shouldDisplayHasSeenEndTestScreenCheckbox}}
-          <th>
+<div class="table session-finalization-reports">
+
+  {{#if (gt @session.uncompletedCertificationReports.length 0)}}
+    <PixNotificationAlert class="session-finalization-reports__information" @withIcon={{true}} @type="success">
+      {{t "pages.session-finalization.reporting.completed-reports-information.description"}}
+    </PixNotificationAlert>
+  {{/if}}
+
+  <PixTable
+    @data={{@certificationReports}}
+    @variant="certif"
+    @caption={{t "pages.session-finalization.reporting.completed-reports-information.extra-information"}}
+  >
+    <:columns as |report context|>
+      <PixTableColumn @context={{context}}>
+        <:header>
+          {{t "common.labels.candidate.lastname"}}
+        </:header>
+        <:cell>
+          {{report.lastName}}
+        </:cell>
+      </PixTableColumn>
+      <PixTableColumn @context={{context}}>
+        <:header>
+          {{t "common.labels.candidate.firstname"}}
+        </:header>
+        <:cell>
+          {{report.firstName}}
+        </:cell>
+      </PixTableColumn>
+      <PixTableColumn @context={{context}}>
+        <:header>
+          {{t "pages.session-finalization.reporting.table.labels.certification-number"}}
+        </:header>
+        <:cell>
+          {{report.certificationCourseId}}
+        </:cell>
+      </PixTableColumn>
+      <PixTableColumn @context={{context}}>
+        <:header>
+          {{t "pages.session-finalization.reporting.table.labels.reporting"}}
+        </:header>
+        <:cell>
+          <div class="finalization-report-examiner-comment">
+            {{#if report.certificationIssueReports}}
+              <button
+                type="button"
+                class="button--showed-as-link add-button"
+                {{on "click" (fn this.openIssueReportsModal report)}}
+              >
+                <PixIcon @name="add" @plainIcon={{true}} @ariaHidden={{true}} />
+                {{t "common.actions.add"}}
+                /
+                {{t "common.actions.delete"}}
+              </button>
+              <p data-test-id="finalization-report-has-examiner-comment_{{report.certificationCourseId}}">
+                {{t
+                  "pages.session-finalization.reporting.table.reporting-count"
+                  reportingsCount=report.certificationIssueReports.length
+                }}
+              </p>
+            {{else}}
+              <button
+                type="button"
+                class="button--showed-as-link add-button"
+                {{on "click" (fn this.openAddIssueReportModal report)}}
+              >
+                <PixIcon @name="add" @plainIcon={{true}} @ariaHidden={{true}} />
+                {{t "common.actions.add"}}
+              </button>
+            {{/if}}
+          </div>
+        </:cell>
+      </PixTableColumn>
+      {{#if @shouldDisplayHasSeenEndTestScreenCheckbox}}
+        <PixTableColumn @context={{context}}>
+          <:header>
             <PixCheckbox
               data-test-id="finalization-report-all-candidates-have-seen-end-test-screen"
               @isIndeterminate={{this.hasPartialState}}
               @checked={{this.hasCheckState}}
-              @class="session-finalization-reports-information-step__checker"
+              @class="session-finalization-reports__checker"
               {{on "click" (fn @onAllHasSeenEndTestScreenCheckboxesClicked this.hasCheckedEverything)}}
             >
               <:label>{{t "pages.session-finalization.reporting.table.labels.end-of-test-screen"}}</:label>
             </PixCheckbox>
-          </th>
-        {{/if}}
-      </tr>
-    </thead>
-    <tbody>
-      {{#each @certificationReports as |report|}}
-        <tr>
-          <td data-test-id="finalization-report-last-name_{{report.certificationCourseId}}">{{report.lastName}}</td>
-          <td data-test-id="finalization-report-first-name_{{report.certificationCourseId}}">{{report.firstName}}</td>
-          <td
-            data-test-id="finalization-report-certification-number_{{report.certificationCourseId}}"
-          >{{report.certificationCourseId}}</td>
-          <td data-test-id="finalization-report-certification-issue-reports_{{report.certificationCourseId}}">
-            <div class="finalization-report-examiner-comment">
-              {{#if report.certificationIssueReports}}
-                <button
-                  type="button"
-                  class="button--showed-as-link add-button"
-                  {{on "click" (fn this.openIssueReportsModal report)}}
-                >
-                  <PixIcon @name="add" @plainIcon={{true}} @ariaHidden={{true}} />
-                  {{t "common.actions.add"}}
-                  /
-                  {{t "common.actions.delete"}}
-                </button>
-                <p data-test-id="finalization-report-has-examiner-comment_{{report.certificationCourseId}}">
-                  {{t
-                    "pages.session-finalization.reporting.table.reporting-count"
-                    reportingsCount=report.certificationIssueReports.length
-                  }}
-                </p>
-              {{else}}
-                <button
-                  type="button"
-                  class="button--showed-as-link add-button"
-                  {{on "click" (fn this.openAddIssueReportModal report)}}
-                >
-                  <PixIcon @name="add" @plainIcon={{true}} @ariaHidden={{true}} />
-                  {{t "common.actions.add"}}
-                </button>
-              {{/if}}
-            </div>
-          </td>
-          {{#if @shouldDisplayHasSeenEndTestScreenCheckbox}}
-            <td>
-              <PixCheckbox
-                @screenReaderOnly={{true}}
-                data-test-id="finalization-report-has-seen-end-test-screen_{{report.certificationCourseId}}"
-                @checked={{report.hasSeenEndTestScreen}}
-                {{on "click" (fn @onHasSeenEndTestScreenCheckboxClicked report)}}
-              >
-                <:label>{{t
-                    "pages.session-finalization.reporting.table.labels.end-of-test-screen-for-candidate"
-                    firstName=report.firstName
-                    lastName=report.lastName
-                  }}</:label>
-              </PixCheckbox>
-            </td>
-          {{/if}}
-        </tr>
-      {{/each}}
-    </tbody>
-  </table>
+          </:header>
+          <:cell>
+            <PixCheckbox
+              @screenReaderOnly={{true}}
+              data-test-id="finalization-report-has-seen-end-test-screen_{{report.certificationCourseId}}"
+              @checked={{report.hasSeenEndTestScreen}}
+              {{on "click" (fn @onHasSeenEndTestScreenCheckboxClicked report)}}
+            >
+              <:label>{{t
+                  "pages.session-finalization.reporting.table.labels.end-of-test-screen-for-candidate"
+                  firstName=report.firstName
+                  lastName=report.lastName
+                }}</:label>
+            </PixCheckbox>
+          </:cell>
+        </PixTableColumn>
+      {{/if}}
+    </:columns>
+  </PixTable>
+
   {{#if this.showAddIssueReportModal}}
     <IssueReportModal::AddIssueReportModal
       @showModal={{this.showAddIssueReportModal}}
diff --git a/certif/app/components/session-finalization/uncompleted-reports-information-step.hbs b/certif/app/components/session-finalization/uncompleted-reports-information-step.hbs
index bf78ace42cf..e46acaa8e52 100644
--- a/certif/app/components/session-finalization/uncompleted-reports-information-step.hbs
+++ b/certif/app/components/session-finalization/uncompleted-reports-information-step.hbs
@@ -1,30 +1,81 @@
-<div class="table session-finalization-reports-information-step">
+<div class="table session-finalization-reports">
+  <PixNotificationAlert @type="warning" @withIcon={{true}} class="session-finalization-reports__information">
+    {{t "pages.session-finalization.reporting.uncompleted-reports-information.description"}}
+  </PixNotificationAlert>
 
-  <table>
-    <caption>
-      <PixNotificationAlert
-        @type="warning"
-        @withIcon={{true}}
-        class="session-finalization-reports-information-step__title-uncompleted"
-      >
-        {{t "pages.session-finalization.reporting.uncompleted-reports-information.description"}}
-      </PixNotificationAlert>
-      <span class="screen-reader-only">
-        {{t "pages.session-finalization.reporting.uncompleted-reports-information.extra-information"}}
-      </span>
-    </caption>
-    <thead>
-      <tr>
-        <th>{{t "common.labels.candidate.lastname"}}</th>
-        <th>{{t "common.labels.candidate.firstname"}}</th>
-        <th>{{t "pages.session-finalization.reporting.table.labels.certification-number"}}</th>
-        <th>{{t "pages.session-finalization.reporting.table.labels.reporting"}}</th>
-        <th>
-          <div class="session-finalization-reports-information-step__header-cancel">
+  <PixTable
+    @data={{@certificationReports}}
+    @variant="certif"
+    @caption={{t "pages.session-finalization.reporting.uncompleted-reports-information.extra-information"}}
+  >
+    <:columns as |report context|>
+      <PixTableColumn @context={{context}}>
+        <:header>
+          {{t "common.labels.candidate.lastname"}}
+        </:header>
+        <:cell>
+          {{report.lastName}}
+        </:cell>
+      </PixTableColumn>
+      <PixTableColumn @context={{context}}>
+        <:header>
+          {{t "common.labels.candidate.firstname"}}
+        </:header>
+        <:cell>
+          {{report.firstName}}
+        </:cell>
+      </PixTableColumn>
+      <PixTableColumn @context={{context}}>
+        <:header>
+          {{t "pages.session-finalization.reporting.table.labels.certification-number"}}
+        </:header>
+        <:cell>
+          {{report.certificationCourseId}}
+        </:cell>
+      </PixTableColumn>
+      <PixTableColumn @context={{context}}>
+        <:header>
+          {{t "pages.session-finalization.reporting.table.labels.reporting"}}
+        </:header>
+        <:cell>
+          <div class="finalization-report-examiner-comment">
+            {{#if report.certificationIssueReports.length}}
+              <button
+                type="button"
+                class="button--showed-as-link add-button"
+                {{on "click" (fn this.openIssueReportsModal report)}}
+              >
+                <PixIcon @name="add" @ariaHidden={{true}} />
+                {{t "common.actions.add"}}
+                /
+                {{t "common.actions.delete"}}
+              </button>
+              <p data-test-id="finalization-report-has-examiner-comment_{{report.certificationCourseId}}">
+                {{t
+                  "pages.session-finalization.reporting.table.reporting-count"
+                  reportingsCount=report.certificationIssueReports.length
+                }}
+              </p>
+            {{else}}
+              <button
+                type="button"
+                class="button--showed-as-link add-button"
+                {{on "click" (fn this.openAddIssueReportModal report)}}
+              >
+                <PixIcon @name="add" @ariaHidden={{true}} />
+                {{t "common.actions.add"}}
+              </button>
+            {{/if}}
+          </div>
+        </:cell>
+      </PixTableColumn>
+      <PixTableColumn @context={{context}}>
+        <:header>
+          <div class="session-finalization-reports__header-cancel">
             <span>{{t
                 "pages.session-finalization.reporting.uncompleted-reports-information.table.labels.abandonment-reason"
               }}</span>
-            <PixTooltip @id="tooltip-cancel-reason" @position="left" @isWide={{true}}>
+            <PixTooltip @id="tooltip-cancel-reason" @position="bottom-left" @isWide={{true}}>
               <:triggerElement>
                 <PixIcon
                   @name="info"
@@ -63,68 +114,26 @@
               </:tooltip>
             </PixTooltip>
           </div>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      {{#each @certificationReports as |report|}}
-        <tr>
-          <td data-test-id="finalization-report-last-name_{{report.certificationCourseId}}">{{report.lastName}}</td>
-          <td data-test-id="finalization-report-first-name_{{report.certificationCourseId}}">{{report.firstName}}</td>
-          <td
-            data-test-id="finalization-report-certification-number_{{report.certificationCourseId}}"
-          >{{report.certificationCourseId}}</td>
-          <td data-test-id="finalization-report-certification-issue-reports_{{report.certificationCourseId}}">
-            <div class="finalization-report-examiner-comment">
-              {{#if report.certificationIssueReports.length}}
-                <button
-                  type="button"
-                  class="button--showed-as-link add-button"
-                  {{on "click" (fn this.openIssueReportsModal report)}}
-                >
-                  <PixIcon @name="add" @ariaHidden={{true}} />
-                  {{t "common.actions.add"}}
-                  /
-                  {{t "common.actions.delete"}}
-                </button>
-                <p data-test-id="finalization-report-has-examiner-comment_{{report.certificationCourseId}}">
-                  {{t
-                    "pages.session-finalization.reporting.table.reporting-count"
-                    reportingsCount=report.certificationIssueReports.length
-                  }}
-                </p>
-              {{else}}
-                <button
-                  type="button"
-                  class="button--showed-as-link add-button"
-                  {{on "click" (fn this.openAddIssueReportModal report)}}
-                >
-                  <PixIcon @name="add" @ariaHidden={{true}} />
-                  {{t "common.actions.add"}}
-                </button>
-              {{/if}}
-            </div>
-          </td>
-          <td class="finalization-report-abort-reason">
-            <PixSelect
-              @screenReaderOnly="true"
-              @id={{concat "finalization-report-abort-reason__select" report.id}}
-              @placeholder="-- {{t 'common.actions.choose'}} --"
-              @onChange={{fn @onChangeAbortReason report}}
-              @hideDefaultOption={{true}}
-              @value={{report.abortReason}}
-              required="required"
-              @options={{this.abortOptions}}
-            >
-              <:label>{{t
-                  "pages.session-finalization.reporting.uncompleted-reports-information.table.labels.abandonment-reason-label"
-                }}</:label>
-            </PixSelect>
-          </td>
-        </tr>
-      {{/each}}
-    </tbody>
-  </table>
+        </:header>
+        <:cell>
+          <PixSelect
+            @screenReaderOnly="true"
+            @id={{concat "finalization-report-abort-reason__select" report.id}}
+            @placeholder="-- {{t 'common.actions.choose'}} --"
+            @onChange={{fn @onChangeAbortReason report}}
+            @hideDefaultOption={{true}}
+            @value={{report.abortReason}}
+            required="required"
+            @options={{this.abortOptions}}
+          >
+            <:label>{{t
+                "pages.session-finalization.reporting.uncompleted-reports-information.table.labels.abandonment-reason-label"
+              }}</:label>
+          </PixSelect>
+        </:cell>
+      </PixTableColumn>
+    </:columns>
+  </PixTable>
 
   {{#if this.showAddIssueReportModal}}
     <IssueReportModal::AddIssueReportModal
@@ -146,5 +155,4 @@
       @version={{@session.version}}
     />
   {{/if}}
-
 </div>
\ No newline at end of file
diff --git a/certif/app/styles/components/issue-report-modal.scss b/certif/app/styles/components/issue-report-modal.scss
index d7bdbfb7b94..b1309a9dde3 100644
--- a/certif/app/styles/components/issue-report-modal.scss
+++ b/certif/app/styles/components/issue-report-modal.scss
@@ -49,7 +49,7 @@
   &__subcategory-label {
     margin: 8px 0 0;
     padding: 0 0 0 16px;
-    color: var(--pix-neutral-20);
+    color: var(--pix-neutral-500);
   }
 }
 
diff --git a/certif/app/styles/components/session-finalization/reports-information-step.scss b/certif/app/styles/components/session-finalization/reports-information-step.scss
index a05e66cc117..9d5b1fec831 100644
--- a/certif/app/styles/components/session-finalization/reports-information-step.scss
+++ b/certif/app/styles/components/session-finalization/reports-information-step.scss
@@ -1,30 +1,8 @@
-.session-finalization-reports-information-step {
-  font-size: 0.8125rem;
+.session-finalization-reports {
+  margin-top: var(--pix-spacing-4x);
 
-  &__title-completed {
-    padding: 20px 0 20px 24px;
-
-    &--hidden {
-      display: none;
-    }
-  }
-
-  &__title-uncompleted {
-    padding: 20px 0 20px 24px;
-  }
-
-  table {
-    table-layout: initial;
-
-    th {
-      width: 10%;
-    }
-
-    th:nth-child(1),
-    th:nth-child(2),
-    th:nth-child(4) {
-      width: 20%;
-    }
+  &__information {
+    margin: var(--pix-spacing-2x) 0;
   }
 
   &__checker {
diff --git a/certif/app/styles/globals/panels.scss b/certif/app/styles/globals/panels.scss
index c1eabe3b6f7..d3a572ad24a 100644
--- a/certif/app/styles/globals/panels.scss
+++ b/certif/app/styles/globals/panels.scss
@@ -3,7 +3,6 @@
 .panel {
   background-color: var(--pix-neutral-0);
   border-radius: var(--pix-spacing-2x);
-  box-shadow: 0 1px 1px 0 rgb(12 22 58 / 10%), 0 2px 5px 0 rgb(0 0 0 / 10%);
 }
 
 .navbar {
diff --git a/certif/tests/integration/components/session-finalization/completed-reports-information-step-test.js b/certif/tests/integration/components/session-finalization/completed-reports-information-step-test.js
index cca2496d26a..227e5341fef 100644
--- a/certif/tests/integration/components/session-finalization/completed-reports-information-step-test.js
+++ b/certif/tests/integration/components/session-finalization/completed-reports-information-step-test.js
@@ -1,6 +1,7 @@
 import { render } from '@1024pix/ember-testing-library';
 import { click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { t } from 'ember-intl/test-support';
 import { certificationIssueReportCategories } from 'pix-certif/models/certification-issue-report';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
@@ -105,7 +106,7 @@ module('Integration | Component | SessionFinalization::CompletedReportsInformati
     assert
       .dom(
         screen.getByRole('table', {
-          name: 'Certification(s) terminée(s) Liste des candidats qui ont fini leur test de certification, triée par nom de naissance, avec un lien pour ajouter un ou plusieurs signalements le cas échéant.',
+          name: t('pages.session-finalization.reporting.completed-reports-information.extra-information'),
         }),
       )
       .exists();
diff --git a/certif/tests/integration/components/session-finalization/uncompleted-reports-information-step-test.js b/certif/tests/integration/components/session-finalization/uncompleted-reports-information-step-test.js
index 02bae4ae5b9..fffed7aa135 100644
--- a/certif/tests/integration/components/session-finalization/uncompleted-reports-information-step-test.js
+++ b/certif/tests/integration/components/session-finalization/uncompleted-reports-information-step-test.js
@@ -1,6 +1,7 @@
 import { render as renderScreen } from '@1024pix/ember-testing-library';
 import { click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { t } from 'ember-intl/test-support';
 import { certificationIssueReportCategories } from 'pix-certif/models/certification-issue-report';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
@@ -214,7 +215,7 @@ module('Integration | Component | SessionFinalization::UncompletedReportsInforma
     assert
       .dom(
         screen.getByRole('table', {
-          name: "Ces candidats n'ont pas fini leur test de certification ou le surveillant a mis fin à leur test Liste des candidats qui n’ont pas fini leur test de certification, triée par nom de naissance, avec un lien pour ajouter un ou plusieurs signalements le cas échéant et une liste déroulante permettant de sélectionner la raison de l’abandon.",
+          name: t('pages.session-finalization.reporting.uncompleted-reports-information.extra-information'),
         }),
       )
       .exists();