Revoit la fonctionnalité "Annoter l'audit" (#1110)

* update notes modal wording and add hint

* rename and move report notes tab

* update audit header actions positions

* clean old css in AuditGenerationHeader

* update e2e tests

* update dropdown option in audits page + add copy audit link button to audit page dropdown

* add copy audit link test to audit specs

* fix typos

* delete unused class

* update editor minimum height in notes modal

* update changelog

Author: bellangerq

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 #### <span aria-hidden="true">⚙️</span> Autres changements
 
+- Mise à jour du menu principal de la page "Audit" et de la modale des observations (anciennement "Notes") ([#1110](https://github.com/DISIC/Ara/pull/1110))
 - Modifie le thème visuel des blocs de code de l’éditeur pour assurer un bon contraste des couleurs ([#1124](https://github.com/DISIC/Ara/pull/1124))
 
 #### <span aria-hidden="true">🐛</span> Corrections

confiture-web-app/src/components/account/dashboard/AuditRow.vue

@@ -311,9 +311,9 @@ function copyStatementLink(uniqueId: string) {
                   name: 'report',
                   params: { uniqueId: audit.consultUniqueId }
                 }"
-                target="_blank "
-                class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-eye-line fr-m-0 no-external-icon"
-                >Voir le rapport
+                target="_blank"
+                class="fr-btn fr-btn--tertiary-no-outline fr-m-0"
+                >Consulter le rapport
                 <span class="fr-sr-only"> {{ audit.procedureName }}</span>
               </RouterLink>
             </li>

confiture-web-app/src/components/audit/AuditGenerationHeader.vue

@@ -183,6 +183,18 @@ const csvExportSizeEstimation = computed(() => {
   return 502 + Object.keys(resultsStore.data ?? {}).length * 318;
 });
 
+function copyAuditLink(uniqueId: string) {
+  const url = `${window.location.origin}/audits/${uniqueId}/generation`;
+
+  navigator.clipboard.writeText(url).then(() => {
+    notify(
+      "success",
+      undefined,
+      "Le lien vers l’audit a bien été copié dans le presse-papier."
+    );
+  });
+}
+
 const isDevMode = useDevMode();
 
 const systemStore = useSystemStore();
@@ -231,7 +243,7 @@ onMounted(() => {
   </h1>
   <p class="fr-text--xl fr-mb-4w">{{ auditName }}</p>
 
-  <div ref="stickyIndicator" class="sticky-indicator fr-grid-row fr-mb-3w">
+  <div ref="stickyIndicator" class="fr-grid-row fr-mb-3w sticky-indicator">
     <div
       v-if="!systemStore.isOnline"
       id="offlineAlert"
@@ -247,7 +259,7 @@ onMounted(() => {
     </div>
 
     <div
-      class="indicator-left-side fr-col-12 fr-col-sm-5 fr-col-md-3"
+      class="fr-col-12 fr-col-sm-5 fr-col-md-3 indicator-left-side"
       :class="{ 'with-border': showLeftSideBorders }"
     >
       <AuditProgressBar
@@ -291,64 +303,25 @@ onMounted(() => {
         v-if="route.name === 'audit-generation-full'"
         class="audit-main-indicator"
       />
-      <ul class="top-actions fr-my-0 fr-p-0" role="list">
-        <li class="fr-p-0 settings-item">
-          <RouterLink
-            class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-settings-5-line"
-            :to="{
-              name: 'audit-settings',
-              params: { uniqueId: editUniqueId }
-            }"
-          >
-            Paramètres
-          </RouterLink>
-        </li>
-
+      <ul class="fr-my-0 fr-p-0 top-actions" role="list">
         <li class="fr-p-0">
           <Dropdown
             ref="optionsDropdownRef"
-            title="Actions"
+            title="Options"
             :disabled="isOffline"
           >
             <ul role="list" class="fr-p-0 fr-m-0 dropdown-list">
-              <li class="dropdown-item notes-item mobile-dropdown-item">
+              <li class="fr-hidden-lg dropdown-item">
                 <button
                   class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-draft-line"
                   :disabled="isOffline"
                   @click="openNotesModal"
                 >
-                  Annoter l’audit
-                </button>
-              </li>
-              <li
-                aria-hidden="true"
-                class="dropdown-separator mobile-dropdown-item"
-              />
-              <li class="dropdown-item">
-                <button
-                  class="fr-btn fr-btn--tertiary-no-outline"
-                  @click="duplicateModal?.show()"
-                >
-                  <CopyIcon class="fr-mr-2v" />
-                  Dupliquer l’audit
+                  Ajouter des observations
                 </button>
               </li>
-              <li class="fr-p-0 settings-item mobile-dropdown-item">
-                <RouterLink
-                  class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-settings-5-line"
-                  :to="{
-                    name: 'audit-settings',
-                    params: { uniqueId: editUniqueId }
-                  }"
-                >
-                  Accéder aux paramètres
-                </RouterLink>
-              </li>
-              <li
-                aria-hidden="true"
-                class="dropdown-separator mobile-dropdown-item"
-              />
-              <li class="fr-p-0 report-item mobile-dropdown-item">
+              <li aria-hidden="true" class="fr-hidden-lg dropdown-separator" />
+              <li class="fr-p-0 dropdown-item">
                 <component
                   :is="isOffline ? 'button' : 'RouterLink'"
                   class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left"
@@ -362,10 +335,50 @@ onMounted(() => {
                   :disabled="isOffline"
                 >
                   Consulter le rapport
-                  <span class="fr-sr-only">(Nouvelle fenêtre)</span>
+                  <span class="fr-sr-only">(nouvelle fenêtre)</span>
                 </component>
               </li>
               <li aria-hidden="true" class="dropdown-separator" />
+              <li class="fr-p-0 dropdown-item">
+                <RouterLink
+                  class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-settings-5-line"
+                  :to="{
+                    name: 'audit-settings',
+                    params: { uniqueId: editUniqueId }
+                  }"
+                >
+                  Modifier les paramètres <span class="fr-hidden fr-unhidden-lg"
+                    >de l’audit</span
+                  >
+                </RouterLink>
+              </li>
+              <li class="dropdown-item">
+                <button
+                  class="fr-btn fr-btn--tertiary-no-outline"
+                  @click="duplicateModal?.show()"
+                >
+                  <CopyIcon class="fr-mr-2v" />
+                  Dupliquer l’audit
+                </button>
+              </li>
+              <li
+                v-if="editUniqueId"
+                class="dropdown-item dropdown-item--with-meta"
+              >
+                <button
+                  class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-link fr-m-0"
+                  @click="copyAuditLink(editUniqueId)"
+                >
+                  Copier le lien de l’audit
+                  <span class="fr-sr-only">
+                    {{ auditStore.currentAudit?.procedureName }}</span
+                  >
+                  <span class="fr-text--xs fr-text--regular dropdown-item-meta">
+                    Ce lien permet de modifier l’audit
+                  </span>
+                </button>
+              </li>
+              <li aria-hidden="true" class="dropdown-separator" />
               <li class="dropdown-item">
                 <a
                   class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-download-fill download-link"
@@ -378,7 +391,7 @@ onMounted(() => {
                   </span>
                 </a>
               </li>
-              <li aria-hidden="true" class="dropdown-separator"></li>
+              <li aria-hidden="true" class="dropdown-separator" />
               <li class="dropdown-item">
                 <button
                   class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-delete-line fr-m-0 danger-button--secondary"
@@ -391,29 +404,13 @@ onMounted(() => {
           </Dropdown>
         </li>
 
-        <li class="fr-p-0 report-item">
-          <component
-            :is="isOffline ? 'button' : 'RouterLink'"
-            class="fr-btn fr-btn--secondary fr-btn--icon-left"
-            :to="{
-              name: 'report',
-              params: { uniqueId: auditStore.currentAudit?.consultUniqueId }
-            }"
-            target="_blank"
-            :disabled="isOffline"
-          >
-            Consulter le rapport
-            <span class="fr-sr-only">(Nouvelle fenêtre)</span>
-          </component>
-        </li>
-
-        <li class="fr-p-0 notes-item">
+        <li class="fr-unhidden-lg fr-p-0 notes-desktop-link">
           <button
             class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-draft-line"
             :disabled="isOffline"
             @click="openNotesModal"
           >
-            Annoter l’audit
+            Ajouter des observations
           </button>
         </li>
       </ul>
@@ -473,14 +470,6 @@ onMounted(() => {
   z-index: 3;
 }
 
-.heading {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
 .top-actions {
   display: flex;
   align-items: center;
@@ -498,21 +487,8 @@ onMounted(() => {
   color: var(--text-mention-grey);
 }
 
-.info {
-  border: 1px solid var(--border-default-grey);
-  min-height: 100%;
-}
-
-.info-value {
-  text-transform: capitalize;
-}
-
-.info-label {
-  color: var(--text-mention-grey);
-}
-
-.info-sub-text {
-  text-transform: none;
+.notes-desktop-link {
+  display: none;
 }
 
 .offline-alert {
@@ -529,9 +505,11 @@ onMounted(() => {
   background: var(--background-default-grey);
   min-height: 4rem;
 }
+
 .audit-main-indicator {
   margin-left: 2rem;
 }
+
 @media (width < 36rem) {
   .audit-main-indicator {
     margin-left: 0;
@@ -548,15 +526,6 @@ onMounted(() => {
   color: var(--text-default-success);
 }
 
-.separator {
-  width: 1px;
-  background-color: var(--border-default-grey);
-}
-
-.sticky-grid {
-  flex: 1;
-}
-
 .indicator-left-side {
   display: flex;
   align-items: center;
@@ -588,38 +557,6 @@ onMounted(() => {
   flex-grow: 1;
 }
 
-/* Display / Hide items from the menu in the toolbar or in the dropdown */
-.mobile-dropdown-item {
-  display: none;
-}
-
-@media (width < 83rem) {
-  .report-item.mobile-dropdown-item {
-    display: block;
-  }
-  .report-item:not(.mobile-dropdown-item) {
-    display: none;
-  }
-}
-
-@media (width < 64rem) {
-  .settings-item.mobile-dropdown-item {
-    display: block;
-  }
-  .settings-item:not(.mobile-dropdown-item) {
-    display: none;
-  }
-}
-
-@media (width < 50rem) {
-  .notes-item.mobile-dropdown-item {
-    display: block;
-  }
-  .notes-item:not(.mobile-dropdown-item) {
-    display: none;
-  }
-}
-
 .metrics {
   display: grid;
   grid-template-columns: repeat(v-bind("keyInfos.length"), 1fr);

confiture-web-app/src/components/audit/NotesModal.vue

@@ -97,20 +97,29 @@ function handleDeleteFile(file: AuditFile) {
                 </button>
                 <div class="title-container">
                   <h1 id="notes-modal-title" class="fr-modal__title">
-                    Annotations de l’audit
+                    Observations
                   </h1>
                   <SaveIndicator :store-name="StoreName.AUDIT_STORE" />
                 </div>
+                <p class="fr-text--xs fr-m-0">
+                  Vos observations seront affichées dans le rapport d’audit.
+                </p>
               </div>
-              <p id="audit-notes" class="fr-label">
-                Remarques et recommandations générales
+              <p id="audit-notes" class="fr-label fr-mb-1w">
+                Points à signaler ne concernant pas l’accessibilité du site
+                audité
+                <span class="fr-hint-text fr-mt-1v"
+                  >Exemple : temps de chargement excessif sur certaines pages,
+                  incohérences dans l'usage des couleurs, bug</span
+                >
               </p>
               <TiptapEditor
                 v-model="notes"
                 class="fr-mb-4w"
                 labelled-by="audit-notes"
                 :disabled="isOffline"
                 editor-size="lg"
+                style="--tiptap-editor-height: 16.5rem"
                 @update:model-value="handleNotesChange"
               />
 
@@ -138,24 +147,32 @@ function handleDeleteFile(file: AuditFile) {
   padding-left: 3rem;
   padding-right: 3rem;
 }
+
 .sidebar-header {
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: wrap;
-  column-gap: 1rem;
   align-items: center;
+  justify-content: start;
+  gap: 0.5rem 1rem;
   margin: 2rem 0 1.5rem 0;
-  padding: 0.75rem 0;
+  padding-top: 0.75rem;
   position: sticky;
   top: 0;
   z-index: 9;
   background-color: var(--background-lifted-grey);
 }
+
 .sidebar-header h1 {
   margin-bottom: 0;
   padding-right: 1rem;
   margin-right: 1rem;
 }
+
+.sidebar-header p {
+  color: var(--text-mention-grey);
+}
+
 .title-container {
   flex-basis: 100%;
   flex-grow: 1;