[TECH] Utiliser le PixTable dans tout PixOrga (PIX-15793)

high-level-tests/e2e/cypress/support/step_definitions/campaign.js

@@ -15,7 +15,7 @@ When(
 
 When(`j'ouvre le sujet {string}`, (tubeName) => {
   cy.contains(tubeName)
-    .closest('[aria-label="Sujet"]')
+    .closest('tr')
     .within(() => {
       cy.get("button").click();
     });
@@ -35,11 +35,13 @@ When(
 );
 
 Then(`je vois {int} campagne\(s\)`, (campaignsCount) => {
-  cy.get('table tbody tr').should("have.lengthOf", campaignsCount);
+  cy.findAllByRole('row').should("have.lengthOf", campaignsCount + 1);
 });
 
 Then(`je vois {int} tutoriel\(s\)`, (tutorialsCount) => {
-  cy.get('[aria-label="Tutoriel"]').should("have.lengthOf", tutorialsCount);
+  cy.findByRole('table', { name: "Tableau des sujets à travailler, certains présentent des colonnes supplémentaires indiquant le nombre de tutoriels existant en lien avec le sujet et un accès à ces tutoriels" }).within(() => {
+    cy.findAllByRole('listitem').should("have.lengthOf", tutorialsCount);
+  });
 });
 
 When(`je recherche une campagne avec le nom {string}`, (campaignSearchName) => {
@@ -51,25 +53,31 @@ Then(`je vois le détail de la campagne {string}`, (campaignName) => {
 });
 
 Then(`je vois {int} participants`, (numberOfParticipants) => {
-  cy.get('[aria-label="Participant"]').should(
-    "have.lengthOf",
-    numberOfParticipants,
-  );
+  cy.findByRole('table', {name: "Liste des participants"}).within(() => {
+    cy.findAllByRole('row').should(
+      "have.lengthOf",
+      numberOfParticipants + 1,
+    );
+  })
 });
 
 Then(`je vois {int} profils`, (numberOfProfiles) => {
-  cy.get('[aria-label="Profil"]').should("have.lengthOf", numberOfProfiles);
+  if(numberOfProfiles === 0) {
+    cy.contains('Aucun participant pour l’instant ! Envoyez-leur le lien suivant pour rejoindre votre campagne.');
+  } else {
+    cy.findAllByRole('row').should("have.lengthOf", numberOfProfiles + 1);
+  }
 });
 
 When(
   `je vois {int} résultats par compétence`,
   (numberOfResultsByCompetence) => {
     if (numberOfResultsByCompetence === 0) {
-      cy.get(".table__empty").should("contain", "En attente de résultat");
+      cy.findByText("En attente de résultats");
     } else {
-      cy.get('[aria-label="Compétence"]').should(
+      cy.findAllByRole('row').should(
         "have.lengthOf",
-        numberOfResultsByCompetence,
+        numberOfResultsByCompetence + 1,
       );
     }
   },
@@ -118,14 +126,16 @@ Then(`je vois que j'ai envoyé les résultats`, () => {
 });
 
 Then(`je vois {int} sujets`, (tubeCount) => {
-  cy.get('[aria-label="Sujet"]').should("have.lengthOf", tubeCount);
+  cy.findByRole('table', { name: "Tableau des sujets à travailler, certains présentent des colonnes supplémentaires indiquant le nombre de tutoriels existant en lien avec le sujet et un accès à ces tutoriels"}).within(() => {
+    cy.findAllByRole('row').should("have.lengthOf", tubeCount + 1);
+  });
 });
 
 Then(
   `je vois que le sujet {string} est {string}`,
   (tubeName, recommendationLevel) => {
     cy.contains(tubeName)
-      .closest('[aria-label="Sujet"]')
+      .closest('tr')
       .get(`[aria-label="${recommendationLevel}"]`);
   },
 );

high-level-tests/e2e/cypress/support/step_definitions/member.js

@@ -14,15 +14,15 @@ Then(`je suis redirigé vers la page pour rejoindre l'organisation`, () => {
 
 Then(`je vois {int} invitation\(s\) en attente`, (numberOfInvitations) => {
   cy.contains(`Invitations (${numberOfInvitations})`).click();
-  cy.get('[aria-label="Invitation en attente"]').should(
+  cy.findAllByRole('row').should(
     "have.lengthOf",
-    numberOfInvitations
+    numberOfInvitations + 1
   );
 });
 
 Then(`je vois {int} membre\(s\)`, (numberOfMembers) => {
   cy.contains(`Membres (${numberOfMembers})`).click();
-  cy.get('[aria-label="Membre"]').should("have.lengthOf", numberOfMembers);
+  cy.findAllByRole('row').should("have.lengthOf", numberOfMembers + 1);
 });
 
 When(`j'invite {string} à rejoindre l'organisation`, (emailAddresses) => {

high-level-tests/e2e/cypress/support/step_definitions/student.js

@@ -1,7 +1,7 @@
 const { When, Then } = require("@badeball/cypress-cucumber-preprocessor");
 
 When(`je veux gérer le compte d'un élève`, () => {
-  cy.get('[aria-label="Afficher les actions"]').click();
+  cy.findByRole('button', {name : "Afficher les actions"}).click();
   cy.contains("Gérer le compte").click();
 });
 
@@ -23,9 +23,9 @@ Then("je vois le mot de passe généré", () => {
 });
 
 Then("je vois {int} élève(s)", (studentsCount) => {
-  cy.get('[aria-label="Élève"]').should("have.lengthOf", studentsCount);
+  cy.findAllByRole('row').should("have.lengthOf", studentsCount + 1);
 });
 
 Then("je vois {int} étudiant(s)", (studentsCount) => {
-  cy.get('[aria-label="Étudiant"]').should("have.lengthOf", studentsCount);
+  cy.findAllByRole('row').should("have.lengthOf", studentsCount + 1);
 });

orga/app/components/campaign/activity/participants-list.gjs

@@ -1,15 +1,15 @@
 import PixIconButton from '@1024pix/pix-ui/components/pix-icon-button';
 import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
+import PixTable from '@1024pix/pix-ui/components/pix-table';
+import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
 import { array, fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { LinkTo } from '@ember/routing';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { t } from 'ember-intl';
 
-import TableHeader from '../../table/header';
 import ParticipationStatus from '../../ui/participation-status';
 import ParticipationFilters from '../filter/participation-filters';
 import DeleteParticipationModal from './delete-participation-modal';
@@ -66,119 +66,114 @@ export default class ParticipantsList extends Component {
       @onResetFilter={{@onResetFilter}}
     />
 
-    <section ...attributes>
-      <div class="panel">
-        <table class="table content-text content-text--small">
-          <colgroup class="table__column">
-            <col class="table__column--wide" />
-            <col class="table__column--wide" />
-            {{#if @campaign.externalIdLabel}}
-              <col class="table__column--medium" />
-            {{/if}}
-            <col class="table__column--wide" />
-            {{#if @showParticipationCount}}
-              <col class="table__column--wide" />
-            {{/if}}
-            {{#if this.canDeleteParticipation}}
-              <col class="table__column--small table__column--right hide-on-mobile" />
-            {{/if}}
-          </colgroup>
-          <thead>
-            <tr>
-              <TableHeader>{{t "pages.campaign-activity.table.column.last-name"}}</TableHeader>
-              <TableHeader>{{t "pages.campaign-activity.table.column.first-name"}}</TableHeader>
-              {{#if @campaign.externalIdLabel}}
-                <TableHeader>{{@campaign.externalIdLabel}}</TableHeader>
-              {{/if}}
-              <TableHeader>{{t "pages.campaign-activity.table.column.status"}}</TableHeader>
-              {{#if @showParticipationCount}}
-                <TableHeader @size="wide">
-                  {{t "pages.campaign-activity.table.column.participationCount"}}
-                </TableHeader>
-              {{/if}}
-              {{#if this.canDeleteParticipation}}
-                <TableHeader class="hide-on-mobile">
-                  <span class="screen-reader-only">
-                    {{t "pages.campaign-activity.table.column.delete"}}
-                  </span>
-                </TableHeader>
-              {{/if}}
-            </tr>
-          </thead>
-
-          {{#if @participations}}
-            <tbody>
-              {{#each @participations as |participation|}}
-                <tr
-                  aria-label={{t "pages.campaign-activity.table.row-title"}}
-                  {{on "click" (fn @onClickParticipant @campaign.id participation.lastCampaignParticipationId)}}
-                  class="tr--clickable"
-                >
-                  <td>
-                    <LinkTo
-                      @route={{if
-                        @campaign.isTypeAssessment
-                        "authenticated.campaigns.participant-assessment"
-                        "authenticated.campaigns.participant-profile"
-                      }}
-                      @models={{array @campaign.id participation.lastCampaignParticipationId}}
-                    >
-                      <span
-                        aria-label="{{t
-                          'pages.campaign-activity.table.see-results'
-                          firstName=participation.firstName
-                          lastName=participation.lastName
-                        }}"
-                      >
-                        {{participation.lastName}}</span>
-                    </LinkTo>
-                  </td>
-                  <td>{{participation.firstName}}</td>
-                  {{#if @campaign.externalIdLabel}}
-                    <td class="table__column table__column--break-word">{{participation.participantExternalId}}</td>
-                  {{/if}}
-                  <td>
-                    <ParticipationStatus @status={{participation.status}} @campaignType={{@campaign.type}} />
-                  </td>
-                  {{#if @showParticipationCount}}
-                    <td>
-                      {{participation.participationCount}}
-                    </td>
-                  {{/if}}
-                  {{#if this.canDeleteParticipation}}
-                    <td class="hide-on-mobile">
-                      <PixIconButton
-                        @ariaLabel={{t "pages.campaign-activity.table.delete-button-label"}}
-                        @withBackground={{true}}
-                        @iconName="delete"
-                        @triggerAction={{fn this.openModal participation}}
-                        @size="small"
-                        class="campaign-activity-table-actions__button campaign-activity-table-actions__button--delete"
-                      />
-                    </td>
-                  {{/if}}
-                </tr>
-              {{/each}}
-            </tbody>
-          {{/if}}
-        </table>
-
-        {{#unless @participations}}
-          <p class="table__empty content-text">{{t "pages.campaign-activity.table.empty"}}</p>
-        {{/unless}}
-      </div>
-
-      {{#if @participations}}
-        <PixPagination @pagination={{@participations.meta}} @locale={{this.getCurrentLocale}} />
-      {{/if}}
-
-      <DeleteParticipationModal
-        @participation={{this.participationToDelete}}
-        @campaign={{@campaign}}
-        @deleteCampaignParticipation={{this.deleteCampaignParticipation}}
-        @closeModal={{this.closeModal}}
-        @isModalOpen={{this.isModalOpen}}
-      />
-    </section>
+    <PixTable
+      @variant="orga"
+      @caption={{t "pages.campaign-activity.table.title"}}
+      @data={{@participations}}
+      class="table"
+      @onRowClick={{@onClickParticipant}}
+    >
+      <:columns as |participation context|>
+        <PixTableColumn @context={{context}}>
+          <:header>
+            {{t "pages.campaign-activity.table.column.last-name"}}
+          </:header>
+          <:cell>
+            <LinkTo
+              @route={{if
+                @campaign.isTypeAssessment
+                "authenticated.campaigns.participant-assessment"
+                "authenticated.campaigns.participant-profile"
+              }}
+              @models={{array @campaign.id participation.lastCampaignParticipationId}}
+            >
+              <span
+                aria-label={{t
+                  "pages.campaign-activity.table.see-results"
+                  firstName=participation.firstName
+                  lastName=participation.lastName
+                }}
+              >
+                {{participation.lastName}}</span>
+            </LinkTo>
+          </:cell>
+        </PixTableColumn>
+
+        <PixTableColumn @context={{context}}>
+          <:header>
+            {{t "pages.campaign-activity.table.column.first-name"}}
+          </:header>
+          <:cell>
+            {{participation.firstName}}
+          </:cell>
+        </PixTableColumn>
+
+        {{#if @campaign.externalIdLabel}}
+          <PixTableColumn @context={{context}}>
+            <:header>
+              {{@campaign.externalIdLabel}}
+            </:header>
+            <:cell>
+              {{participation.participantExternalId}}
+            </:cell>
+          </PixTableColumn>
+        {{/if}}
+
+        <PixTableColumn @context={{context}}>
+          <:header>
+            {{t "pages.campaign-activity.table.column.status"}}
+          </:header>
+          <:cell>
+            <ParticipationStatus @status={{participation.status}} @campaignType={{@campaign.type}} />
+          </:cell>
+        </PixTableColumn>
+
+        {{#if @showParticipationCount}}
+          <PixTableColumn @context={{context}} @type="number">
+            <:header>
+              {{t "pages.campaign-activity.table.column.participationCount"}}
+            </:header>
+            <:cell>
+              {{participation.participationCount}}
+            </:cell>
+          </PixTableColumn>
+        {{/if}}
+
+        {{#if this.canDeleteParticipation}}
+          <PixTableColumn @context={{context}}>
+            <:header>
+              {{t "pages.campaign-activity.table.column.delete"}}
+            </:header>
+            <:cell>
+              <PixIconButton
+                @ariaLabel={{t "pages.campaign-activity.table.delete-button-label"}}
+                @withBackground={{true}}
+                @iconName="delete"
+                @triggerAction={{fn this.openModal participation}}
+                @size="small"
+                class="campaign-activity-table-actions__button campaign-activity-table-actions__button--delete"
+              />
+            </:cell>
+          </PixTableColumn>
+        {{/if}}
+
+      </:columns>
+    </PixTable>
+
+    {{#unless @participations}}
+      <p class="table__empty content-text">{{t "pages.campaign-activity.table.empty"}}</p>
+    {{/unless}}
+
+    {{#if @participations}}
+      <PixPagination @pagination={{@participations.meta}} @locale={{this.getCurrentLocale}} />
+    {{/if}}
+
+    <DeleteParticipationModal
+      @participation={{this.participationToDelete}}
+      @campaign={{@campaign}}
+      @deleteCampaignParticipation={{this.deleteCampaignParticipation}}
+      @closeModal={{this.closeModal}}
+      @isModalOpen={{this.isModalOpen}}
+    />
   </template>
 }