From c1292d3b4073a0cb5169280c4ede3807e41ae723 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 29 Sep 2023 11:09:22 +0200
Subject: [PATCH] Nettoyage de TODO (#482)

* use formatted status everywhere

* remove old todos or convert them to fixme
---
 .../AuditGeneralInformationsForm.vue          |   1 -
 .../components/AuditGenerationCriterium.vue   |   6 +-
 .../src/components/ChartLegend.vue            |  11 +-
 confiture-web-app/src/components/PieChart.vue |   9 +-
 confiture-web-app/src/components/Radio.vue    |   1 -
 .../src/components/ReportA11yStatement.vue    |   1 -
 .../src/components/StackBarChart.vue          |   9 +-
 .../TestEnvironmentSelection.vue              |   2 +-
 .../TestEnvironmentSelection/combinations.ts  |   2 +-
 .../pages/edit/EditAuditDeclarationPage.vue   |   1 -
 .../src/pages/edit/EditAuditStepFourPage.vue  |   1 -
 .../src/pages/error/ErrorPage.vue             |   1 -
 .../src/pages/misc/PrivacyPage.vue            | 172 ++++++++++++------
 confiture-web-app/src/types/report.ts         |   3 -
 confiture-web-app/src/utils.ts                |   1 -
 15 files changed, 144 insertions(+), 77 deletions(-)

diff --git a/confiture-web-app/src/components/AuditGeneralInformationsForm.vue b/confiture-web-app/src/components/AuditGeneralInformationsForm.vue
index 85ab256a6..44ac05c7b 100644
--- a/confiture-web-app/src/components/AuditGeneralInformationsForm.vue
+++ b/confiture-web-app/src/components/AuditGeneralInformationsForm.vue
@@ -85,7 +85,6 @@ async function deletePage(i: number) {
 }
 
 /**
- * TODO: remove this
  * Dev function to avoid filling all fields manually
  */
 function fillFields() {
diff --git a/confiture-web-app/src/components/AuditGenerationCriterium.vue b/confiture-web-app/src/components/AuditGenerationCriterium.vue
index 05a37e61e..3e0467de6 100644
--- a/confiture-web-app/src/components/AuditGenerationCriterium.vue
+++ b/confiture-web-app/src/components/AuditGenerationCriterium.vue
@@ -38,17 +38,17 @@ const statuses: Array<{
   color?: RadioColor;
 }> = [
   {
-    label: "Conforme",
+    label: formatStatus(CriteriumResultStatus.COMPLIANT),
     value: CriteriumResultStatus.COMPLIANT,
     color: "green",
   },
   {
-    label: "Non conforme",
+    label: formatStatus(CriteriumResultStatus.NOT_COMPLIANT),
     value: CriteriumResultStatus.NOT_COMPLIANT,
     color: "red",
   },
   {
-    label: "Non applicable",
+    label: formatStatus(CriteriumResultStatus.NOT_APPLICABLE),
     value: CriteriumResultStatus.NOT_APPLICABLE,
     color: "grey",
   },
diff --git a/confiture-web-app/src/components/ChartLegend.vue b/confiture-web-app/src/components/ChartLegend.vue
index cf88f6f3d..a0d22d89b 100644
--- a/confiture-web-app/src/components/ChartLegend.vue
+++ b/confiture-web-app/src/components/ChartLegend.vue
@@ -1,18 +1,23 @@
+<script lang="ts" setup>
+import { formatStatus } from "../utils";
+import { CriteriumResultStatus } from "../types";
+</script>
+
 <template>
   <div class="fr-py-5v" aria-hidden="true">
     <div class="fr-mb-2w fr-text--xs legend-title">Légende</div>
 
     <div class="fr-text--sm fr-text--bold fr-mb-1v legend-item">
       <div class="fr-mr-1w legend-color compliant" />
-      Conforme
+      {{ formatStatus(CriteriumResultStatus.COMPLIANT) }}
     </div>
     <div class="fr-text--sm fr-text--bold fr-mb-1v legend-item">
       <div class="fr-mr-1w legend-color not-compliant" />
-      Non conforme
+      {{ formatStatus(CriteriumResultStatus.NOT_COMPLIANT) }}
     </div>
     <div class="fr-text--sm fr-text--bold legend-item">
       <div class="fr-mr-1w legend-color not-applicable" />
-      Non applicable
+      {{ formatStatus(CriteriumResultStatus.NOT_APPLICABLE) }}
     </div>
   </div>
 </template>
diff --git a/confiture-web-app/src/components/PieChart.vue b/confiture-web-app/src/components/PieChart.vue
index f80667b71..b2aa25f2d 100644
--- a/confiture-web-app/src/components/PieChart.vue
+++ b/confiture-web-app/src/components/PieChart.vue
@@ -8,7 +8,8 @@ ChartJS.register(PieController, ArcElement);
 import { Chart, ChartConfiguration } from "chart.js";
 import { onMounted, onUnmounted, ref } from "vue";
 
-import { getCssVarValue } from "../utils";
+import { getCssVarValue, formatStatus } from "../utils";
+import { CriteriumResultStatus } from "../types";
 import { useChartColorsUpdate } from "../composables/useChartColorsUpdate";
 
 const props = defineProps<{
@@ -20,7 +21,11 @@ const props = defineProps<{
 const chartConfig: ChartConfiguration<"pie", number[], string> = {
   type: "pie",
   data: {
-    labels: ["Conforme", "Non conforme", "Non applicable"],
+    labels: [
+      formatStatus(CriteriumResultStatus.COMPLIANT),
+      formatStatus(CriteriumResultStatus.NOT_COMPLIANT),
+      formatStatus(CriteriumResultStatus.NOT_APPLICABLE),
+    ],
     datasets: [
       {
         data: [props.compliant, props.notCompliant, props.notApplicable],
diff --git a/confiture-web-app/src/components/Radio.vue b/confiture-web-app/src/components/Radio.vue
index 13a28f2eb..cbca89601 100644
--- a/confiture-web-app/src/components/Radio.vue
+++ b/confiture-web-app/src/components/Radio.vue
@@ -3,7 +3,6 @@ export type RadioColor = "red" | "green" | "yellow" | "grey";
 </script>
 
 <script setup lang="ts">
-// TODO: checkboxes or radios?
 defineProps<{
   label: string;
   id: string;
diff --git a/confiture-web-app/src/components/ReportA11yStatement.vue b/confiture-web-app/src/components/ReportA11yStatement.vue
index 2c68013f9..02cee2c87 100644
--- a/confiture-web-app/src/components/ReportA11yStatement.vue
+++ b/confiture-web-app/src/components/ReportA11yStatement.vue
@@ -322,7 +322,6 @@ function hideCopyAlert() {
           les versions suivantes :
         </p>
         <ul class="fr-mb-2w fr-mb-md-3w">
-          <!-- TODO: format browser + AT (PR #53) -->
           <template v-if="report.data.context.desktopEnvironments.length">
             <li
               v-for="(env, i) in report.data.context.desktopEnvironments"
diff --git a/confiture-web-app/src/components/StackBarChart.vue b/confiture-web-app/src/components/StackBarChart.vue
index 75193217f..136365b61 100644
--- a/confiture-web-app/src/components/StackBarChart.vue
+++ b/confiture-web-app/src/components/StackBarChart.vue
@@ -14,7 +14,8 @@ ChartJS.register(LinearScale, CategoryScale, BarController, BarElement);
 import { Chart, ChartConfiguration } from "chart.js";
 import { ref, onMounted, onUnmounted } from "vue";
 
-import { getCssVarValue } from "../utils";
+import { getCssVarValue, formatStatus } from "../utils";
+import { CriteriumResultStatus } from "../types";
 import { useChartColorsUpdate } from "../composables/useChartColorsUpdate";
 
 interface DataItem {
@@ -40,19 +41,19 @@ const props = defineProps<{
 const chartLabels = props.data.map((item) => item.name);
 const chartDatasets = [
   {
-    label: "Conforme",
+    label: formatStatus(CriteriumResultStatus.COMPLIANT),
     data: props.data.map((d) => d.compliant.percentage),
     backgroundColor: getCssVarValue("--background-action-high-success"),
     barThickness: 16,
   },
   {
-    label: "Non conforme",
+    label: formatStatus(CriteriumResultStatus.NOT_COMPLIANT),
     data: props.data.map((d) => d.notCompliant.percentage),
     backgroundColor: getCssVarValue("--background-action-high-error"),
     barThickness: 16,
   },
   {
-    label: "Non applicable",
+    label: formatStatus(CriteriumResultStatus.NOT_APPLICABLE),
     data: props.data.map((d) => d.notApplicable.percentage),
     backgroundColor: getCssVarValue("--grey-200-850"),
     barThickness: 16,
diff --git a/confiture-web-app/src/components/TestEnvironmentSelection/TestEnvironmentSelection.vue b/confiture-web-app/src/components/TestEnvironmentSelection/TestEnvironmentSelection.vue
index 20879aa1d..58c8138bf 100644
--- a/confiture-web-app/src/components/TestEnvironmentSelection/TestEnvironmentSelection.vue
+++ b/confiture-web-app/src/components/TestEnvironmentSelection/TestEnvironmentSelection.vue
@@ -191,7 +191,7 @@ function combineEnvironments(
         .map((combination) => {
           return combination.environments.map((c) => {
             return {
-              // TODO: set platform directly in desktopCombinations
+              // FIXME: set platform directly in desktopCombinations
               platform: Platform.DESKTOP,
               ...c,
             };
diff --git a/confiture-web-app/src/components/TestEnvironmentSelection/combinations.ts b/confiture-web-app/src/components/TestEnvironmentSelection/combinations.ts
index c7e8fc100..70e40aa0f 100644
--- a/confiture-web-app/src/components/TestEnvironmentSelection/combinations.ts
+++ b/confiture-web-app/src/components/TestEnvironmentSelection/combinations.ts
@@ -6,7 +6,7 @@ import {
 } from "../../enums";
 import { AuditEnvironment } from "../../types";
 
-// TODO: there's probably a super cool and simple way to rewrite the content of this file
+// FIXME: there's probably a super cool and simple way to rewrite the content of this file
 
 /** Default desktop environment combinations. */
 export const desktopCombinations = [
diff --git a/confiture-web-app/src/pages/edit/EditAuditDeclarationPage.vue b/confiture-web-app/src/pages/edit/EditAuditDeclarationPage.vue
index c7746182b..fb96efb7d 100644
--- a/confiture-web-app/src/pages/edit/EditAuditDeclarationPage.vue
+++ b/confiture-web-app/src/pages/edit/EditAuditDeclarationPage.vue
@@ -193,7 +193,6 @@ function handleSubmit() {
     environments: environments.value,
     tools: tools.value,
 
-    // TODO: plug not accessible content
     notCompliantContent: notCompliantContent.value,
     derogatedContent: derogatedContent.value,
     notInScopeContent: notInScopeContent.value,
diff --git a/confiture-web-app/src/pages/edit/EditAuditStepFourPage.vue b/confiture-web-app/src/pages/edit/EditAuditStepFourPage.vue
index 1401c3ac5..4c6ae3275 100644
--- a/confiture-web-app/src/pages/edit/EditAuditStepFourPage.vue
+++ b/confiture-web-app/src/pages/edit/EditAuditStepFourPage.vue
@@ -88,7 +88,6 @@ const successAlertContent = computed(() => {
 </script>
 
 <template>
-  <!-- TODO: plug audit status -->
   <template v-if="auditStore.data && resultsStore.data">
     <PageMeta
       :title="`Audit ${auditStore.data.procedureName} terminé`"
diff --git a/confiture-web-app/src/pages/error/ErrorPage.vue b/confiture-web-app/src/pages/error/ErrorPage.vue
index 6d1c1b60e..766b811fb 100644
--- a/confiture-web-app/src/pages/error/ErrorPage.vue
+++ b/confiture-web-app/src/pages/error/ErrorPage.vue
@@ -76,7 +76,6 @@ const route = useRoute();
         v-html="marked.parse(errorInstruction, { gfm: false })"
       ></div>
       <div>
-        <!-- TODO: make the button full width on mobile. DSFR helper? -->
         <RouterLink
           v-if="[404, 410].includes(statusCode)"
           class="fr-btn fr-mr-2w"
diff --git a/confiture-web-app/src/pages/misc/PrivacyPage.vue b/confiture-web-app/src/pages/misc/PrivacyPage.vue
index fa61acecc..6f01ff2ce 100644
--- a/confiture-web-app/src/pages/misc/PrivacyPage.vue
+++ b/confiture-web-app/src/pages/misc/PrivacyPage.vue
@@ -2,79 +2,145 @@
 import PageMeta from "../../components/PageMeta";
 </script>
 
-<!--
-  TODO: complete all content once the audit will be done.
- -->
 <template>
   <PageMeta
     title="Données personnelles"
     description="Politique de confidentialité des données personnelles du site ara.numerique.gouv.fr"
   />
   <section class="fr-my-0 fr-mx-auto content">
-
-
     <h1>Politique de confidentialité des données personnelles</h1>
     <h2>Traitement des données</h2>
-    <p>La Direction interministérielle du numérique s’engage à ce que le traitement des données personnelles effectué sur ara.numerique.gouv.fr soient conformes au règlement général sur la protection des données (RGPD) et à la loi Informatique et Libertés.</p>
+    <p>
+      La Direction interministérielle du numérique s’engage à ce que le
+      traitement des données personnelles effectué sur ara.numerique.gouv.fr
+      soient conformes au règlement général sur la protection des données (RGPD)
+      et à la loi Informatique et Libertés.
+    </p>
 
     <h2>Objet du traitement</h2>
-    <p>Ara est un outil d’audit d’accessibilité numérique. Un audit est réalisé par une personne experte qui doit saisir les informations personnelles suivantes : prénom, nom et adresse électronique.</p>
-    <p>Ces données personnelles sont utilisées :</p>
-    <ul><li>pour envoyer par courriel à l’auditeur ou l’auditrice l’URL de l’audit en cours de réalisation</li><li>pour que la personne qui reçoit l’audit puisse contacter facilement l’auditeur ou l’auditrice</li></ul>
-    <p>Lors de la suppression de l’audit, les données de l’audit, le rapport de l’audit et les données personnelles de l’auditeur ou l’auditrice sont supprimées.</p>
+    <p>
+      Ara est un outil d’audit d’accessibilité numérique. Un audit est réalisé
+      par une personne experte qui doit saisir les informations personnelles
+      suivantes : prénom, nom et adresse électronique.
+    </p>
+    <p>Ces données personnelles sont utilisées :</p>
+    <ul>
+      <li>
+        pour envoyer par courriel à l’auditeur ou l’auditrice l’URL de l’audit
+        en cours de réalisation
+      </li>
+      <li>
+        pour que la personne qui reçoit l’audit puisse contacter facilement
+        l’auditeur ou l’auditrice
+      </li>
+    </ul>
+    <p>
+      Lors de la suppression de l’audit, les données de l’audit, le rapport de
+      l’audit et les données personnelles de l’auditeur ou l’auditrice sont
+      supprimées.
+    </p>
     <h2>Vos droits sur vos données</h2>
-    <p>Vous pouvez exercer vos droits ou obtenir des informations concernant le traitement de vos données personnelles par courriel à l’adresse suivante : <strong>contact@design.numerique.gouv.fr</strong>.</p>
-    <p>Si la réponse apportée ne vous convient pas, vous pouvez alors saisir le délégué à la protection des données des services du Premier ministre.</p>
+    <p>
+      Vous pouvez exercer vos droits ou obtenir des informations concernant le
+      traitement de vos données personnelles par courriel à l’adresse suivante :
+      <strong>contact@design.numerique.gouv.fr</strong>.
+    </p>
+    <p>
+      Si la réponse apportée ne vous convient pas, vous pouvez alors saisir le
+      délégué à la protection des données des services du Premier ministre.
+    </p>
     <ul>
-    <li>par courriel à l’adresse suivante : dpd@pm.gouv.fr ;</li>
-    <li>par courrier à l’adresse suivante :<br/>
-    Service du Premier ministre<br/>
-    À l’attention du délégué à la protection des données (DPD)<br/>
-    56 rue de Varenne<br/>75007 Paris</li>
+      <li>par courriel à l’adresse suivante : dpd@pm.gouv.fr ;</li>
+      <li>
+        par courrier à l’adresse suivante :<br />
+        Service du Premier ministre<br />
+        À l’attention du délégué à la protection des données (DPD)<br />
+        56 rue de Varenne<br />75007 Paris
+      </li>
     </ul>
 
-    <h2>À propos des <span lang="en">cookies</span> </h2>
-    <p>Le site ara.numérique.gouv.fr utilise des <span lang="en">cookies</span> uniquement à des fins statistiques de mesure d’audience.</p>
+    <h2>À propos des <span lang="en">cookies</span></h2>
+    <p>
+      Le site ara.numérique.gouv.fr utilise des
+      <span lang="en">cookies</span> uniquement à des fins statistiques de
+      mesure d’audience.
+    </p>
     <h3>Qu’est-ce qu’un &laquo;<span lang="en">cookie</span>&raquo; ?</h3>
-    <p>Un &laquo;<span lang="en">cookie</span>&raquo; est une suite d’informations, généralement de petite taille et identifié par un nom, qui peut être transmis à votre navigateur par un site <span lang="en">web</span> sur lequel vous vous connectez. Votre navigateur <span lang="en">web</span> le conservera pendant une certaine durée, et le renverra au serveur web chaque fois que vous vous y re-connecterez. Les cookies ont de multiples usages : ils peuvent servir à mémoriser votre identifiant client auprès d’un site marchand, le contenu courant de votre panier d’achat, un identifiant permettant de tracer votre navigation pour des finalités statistiques ou publicitaires, etc. </p>
-    
-    <h4>Type de <span lang="en">cookie</span> déposé sur ara.numerique.gouv.fr</h4>
- 
-    <p>L’outil de mesure d’audience que nous utilisons, Matomo (ex-Piwik), est paramétré de façon à ce que les informations recueillies soient anonymisées. Le petit fichier texte (« <span lang="en">cookie</span> ») déposé sur votre ordinateur lorsque vous le consultez nous permet simplement de connaître le nombre de visites et les pages les plus consultées, et ainsi d’améliorer nos contenus et votre expérience, sans pour autant permettre de vous identifier personnellement.</p>
+    <p>
+      Un &laquo;<span lang="en">cookie</span>&raquo; est une suite
+      d’informations, généralement de petite taille et identifié par un nom, qui
+      peut être transmis à votre navigateur par un site
+      <span lang="en">web</span> sur lequel vous vous connectez. Votre
+      navigateur <span lang="en">web</span> le conservera pendant une certaine
+      durée, et le renverra au serveur web chaque fois que vous vous y
+      re-connecterez. Les cookies ont de multiples usages : ils peuvent servir à
+      mémoriser votre identifiant client auprès d’un site marchand, le contenu
+      courant de votre panier d’achat, un identifiant permettant de tracer votre
+      navigation pour des finalités statistiques ou publicitaires, etc.
+    </p>
+
+    <h4>
+      Type de <span lang="en">cookie</span> déposé sur ara.numerique.gouv.fr
+    </h4>
+
+    <p>
+      L’outil de mesure d’audience que nous utilisons, Matomo (ex-Piwik), est
+      paramétré de façon à ce que les informations recueillies soient
+      anonymisées. Le petit fichier texte (« <span lang="en">cookie</span> »)
+      déposé sur votre ordinateur lorsque vous le consultez nous permet
+      simplement de connaître le nombre de visites et les pages les plus
+      consultées, et ainsi d’améliorer nos contenus et votre expérience, sans
+      pour autant permettre de vous identifier personnellement.
+    </p>
 
-    <p>Nous sommes ainsi en conformité avec la réglementation « <span lang="en">cookie</span> » de la CNIL et exemptés d’autorisation préalable. C’est pour cela que vous n’avez pas eu besoin de cliquer sur un bloc pour accepter le dépôt de cookies ! </p>
-    <table  class="fr-table fr-table--bordered  fr-table--no-caption">
-      <caption><span lang="en">Cookies</span> de mesure d’audience</caption>
+    <p>
+      Nous sommes ainsi en conformité avec la réglementation «
+      <span lang="en">cookie</span> » de la CNIL et exemptés d’autorisation
+      préalable. C’est pour cela que vous n’avez pas eu besoin de cliquer sur un
+      bloc pour accepter le dépôt de cookies !
+    </p>
+    <table class="fr-table fr-table--bordered fr-table--no-caption">
+      <caption>
+        <span lang="en">Cookies</span>
+        de mesure d’audience
+      </caption>
       <thead>
-      <tr>
-        <th  scope="col">Cookie lié au service</th>
-        <th  scope="col">Nom technique</th>
-        <th  scope="col">Finalité</th>
-        <th  scope="col">Durée de conservation</th>
-      </tr>  
+        <tr>
+          <th scope="col">Cookie lié au service</th>
+          <th scope="col">Nom technique</th>
+          <th scope="col">Finalité</th>
+          <th scope="col">Durée de conservation</th>
+        </tr>
       </thead>
       <tbody>
-      <tr>
-        <td>Matomo</td>
-        <td>_pk_id#</td>
-        <td>Permet de stocker votre identifiant unique de visite via Matomo</td>
-        <td>13 mois</td>
-      </tr>  
-      <tr>
-        <td>Matomo</td>
-        <td>_pk_ses#</td>
-        <td>Permet de stocker temporairement vos données de visite via Matomo</td>
-        <td>30 minutes</td>
-      </tr> 
-      <tr>
-        <td>Matomo</td>
-        <td>piwik_ignore</td>
-        <td>Permet de mémoriser votre choix d’ignorer la mesure d’audience via Matomo</td>
-        <td>2 ans</td>
-      </tr>  
-    </tbody>
+        <tr>
+          <td>Matomo</td>
+          <td>_pk_id#</td>
+          <td>
+            Permet de stocker votre identifiant unique de visite via Matomo
+          </td>
+          <td>13 mois</td>
+        </tr>
+        <tr>
+          <td>Matomo</td>
+          <td>_pk_ses#</td>
+          <td>
+            Permet de stocker temporairement vos données de visite via Matomo
+          </td>
+          <td>30 minutes</td>
+        </tr>
+        <tr>
+          <td>Matomo</td>
+          <td>piwik_ignore</td>
+          <td>
+            Permet de mémoriser votre choix d’ignorer la mesure d’audience via
+            Matomo
+          </td>
+          <td>2 ans</td>
+        </tr>
+      </tbody>
     </table>
-</section>
+  </section>
 </template>
 
 <style scoped>
diff --git a/confiture-web-app/src/types/report.ts b/confiture-web-app/src/types/report.ts
index 82d43039e..d242a641e 100644
--- a/confiture-web-app/src/types/report.ts
+++ b/confiture-web-app/src/types/report.ts
@@ -85,9 +85,6 @@ interface AuditReportContext {
 
   samples: PageSample[];
 
-  // TODO: derogated content
-  // derogatedContent: any
-
   tools: string[];
 
   desktopEnvironments: Environment[];
diff --git a/confiture-web-app/src/utils.ts b/confiture-web-app/src/utils.ts
index d7ae17ae4..6e43f17ad 100644
--- a/confiture-web-app/src/utils.ts
+++ b/confiture-web-app/src/utils.ts
@@ -52,7 +52,6 @@ export function formatUserImpact(
   return FORMATTED_USER_IMPACT[userImpact];
 }
 
-// TODO: replace everywhere in the app
 const FORMATTED_STATUS = {
   [CriteriumResultStatus.NOT_TESTED]: "Non testé",
   [CriteriumResultStatus.COMPLIANT]: "Conforme",