From da68243a91865732db46b9ae610a82eeec5c9bf2 Mon Sep 17 00:00:00 2001
From: Claire Nollet <clairenlet@gmail.com>
Date: Wed, 24 Jan 2024 19:21:30 +0100
Subject: [PATCH] feat: :children_crossing: better ux for forms in tiles

---
 apps/client/cypress/e2e/support/commands.ts   |  2 ++
 apps/client/src/components/ClusterForm.vue    |  2 +-
 apps/client/src/components/QuotaForm.vue      |  2 +-
 apps/client/src/components/RepoForm.vue       |  6 +++---
 apps/client/src/components/StageForm.vue      |  2 +-
 apps/client/src/views/admin/ListClusters.vue  | 19 ++++++++++++++++++-
 apps/client/src/views/admin/ListProjects.vue  |  1 +
 apps/client/src/views/admin/ListQuotas.vue    | 19 ++++++++++++++++++-
 apps/client/src/views/admin/ListStages.vue    | 19 ++++++++++++++++++-
 apps/client/src/views/projects/DsoRepos.vue   | 19 ++++++++++++++++++-
 .../src/views/projects/ManageEnvironments.vue | 19 ++++++++++++++++++-
 11 files changed, 99 insertions(+), 11 deletions(-)

diff --git a/apps/client/cypress/e2e/support/commands.ts b/apps/client/cypress/e2e/support/commands.ts
index 1433020c9..050c4e033 100644
--- a/apps/client/cypress/e2e/support/commands.ts
+++ b/apps/client/cypress/e2e/support/commands.ts
@@ -235,6 +235,8 @@ Cypress.Commands.add('assertAddEnvironment', (project, environments, isDeepCheck
         .should('have.value', environment?.quota?.id)
       cy.get('#cluster-select')
         .should('have.value', environment?.cluster?.id)
+      cy.getByDataTestid('goBackBtn')
+        .click()
     }
   })
 })
diff --git a/apps/client/src/components/ClusterForm.vue b/apps/client/src/components/ClusterForm.vue
index 7102006d6..a54521306 100644
--- a/apps/client/src/components/ClusterForm.vue
+++ b/apps/client/src/components/ClusterForm.vue
@@ -374,7 +374,7 @@ watch(selectedContext, () => {
       />
       <DsfrButton
         v-else
-        label="Mettre à jour le cluster"
+        label="Enregistrer"
         data-testid="updateClusterBtn"
         :disabled="!isClusterValid"
         primary
diff --git a/apps/client/src/components/QuotaForm.vue b/apps/client/src/components/QuotaForm.vue
index e6964c771..c6f1840dd 100644
--- a/apps/client/src/components/QuotaForm.vue
+++ b/apps/client/src/components/QuotaForm.vue
@@ -171,7 +171,7 @@ onBeforeMount(() => {
       />
       <DsfrButton
         v-else
-        label="Modifier le quota"
+        label="Enregistrer"
         data-testid="updateQuotaBtn"
         :disabled="!isQuotaValid"
         primary
diff --git a/apps/client/src/components/RepoForm.vue b/apps/client/src/components/RepoForm.vue
index 08ba4a791..18865a313 100644
--- a/apps/client/src/components/RepoForm.vue
+++ b/apps/client/src/components/RepoForm.vue
@@ -50,8 +50,8 @@ const saveRepo = () => {
   emit('save', localRepo.value)
 }
 
-const cancel = (event) => {
-  emit('cancel', event)
+const cancel = () => {
+  emit('cancel')
 }
 
 </script>
@@ -171,7 +171,7 @@ const cancel = (event) => {
       class="flex space-x-10 mt-5"
     >
       <DsfrButton
-        :label="localRepo.id ? 'Modifier le dépôt' : 'Ajouter le dépôt'"
+        :label="localRepo.id ? 'Enregistrer' : 'Ajouter le dépôt'"
         :data-testid="localRepo.id ? 'updateRepoBtn' : 'addRepoBtn'"
         :disabled="!isRepoValid"
         primary
diff --git a/apps/client/src/components/StageForm.vue b/apps/client/src/components/StageForm.vue
index f3c6b28ad..bea0de367 100644
--- a/apps/client/src/components/StageForm.vue
+++ b/apps/client/src/components/StageForm.vue
@@ -170,7 +170,7 @@ onBeforeMount(() => {
       />
       <DsfrButton
         v-else
-        label="Modifier le type d'environnement"
+        label="Enregistrer"
         data-testid="updateStageBtn"
         :disabled="!isStageValid"
         primary
diff --git a/apps/client/src/views/admin/ListClusters.vue b/apps/client/src/views/admin/ListClusters.vue
index 145025b0a..28b637402 100644
--- a/apps/client/src/views/admin/ListClusters.vue
+++ b/apps/client/src/views/admin/ListClusters.vue
@@ -96,6 +96,7 @@ watch(clusters, () => {
     class="flex <md:flex-col-reverse items-center justify-between pb-5"
   >
     <DsfrButton
+      v-if="!Object.keys(selectedCluster).length && !isNewClusterForm"
       label="Ajouter un nouveau cluster"
       data-testid="addClusterLink"
       tertiary
@@ -104,6 +105,19 @@ watch(clusters, () => {
       icon="ri-add-line"
       @click="showNewClusterForm()"
     />
+    <div
+      v-else
+      class="w-full flex justify-end"
+    >
+      <DsfrButton
+        title="Revenir à la liste des clusters"
+        data-testid="goBackBtn"
+        secondary
+        icon-only
+        icon="ri-arrow-go-back-line"
+        @click="() => cancel()"
+      />
+    </div>
   </div>
   <div
     v-if="isNewClusterForm"
@@ -120,6 +134,7 @@ watch(clusters, () => {
     />
   </div>
   <div
+    v-else
     :class="{
       'md:grid md:grid-cols-3 md:gap-3 items-center justify-between': !selectedCluster?.label,
     }"
@@ -129,7 +144,9 @@ watch(clusters, () => {
       :key="cluster.id"
       class="fr-mt-2v fr-mb-4w w-full"
     >
-      <div>
+      <div
+        v-show="!Object.keys(selectedCluster).length"
+      >
         <DsfrTile
           :title="cluster.title"
           :data-testid="`clusterTile-${cluster.title}`"
diff --git a/apps/client/src/views/admin/ListProjects.vue b/apps/client/src/views/admin/ListProjects.vue
index 16353fefc..8d53606df 100644
--- a/apps/client/src/views/admin/ListProjects.vue
+++ b/apps/client/src/views/admin/ListProjects.vue
@@ -367,6 +367,7 @@ onBeforeMount(async () => {
       <DsfrButton
         v-if="selectedProject"
         title="Revenir à la liste des projets"
+        data-testid="goBackBtn"
         secondary
         icon-only
         icon="ri-arrow-go-back-line"
diff --git a/apps/client/src/views/admin/ListQuotas.vue b/apps/client/src/views/admin/ListQuotas.vue
index ee3dc3e8f..f6b729607 100644
--- a/apps/client/src/views/admin/ListQuotas.vue
+++ b/apps/client/src/views/admin/ListQuotas.vue
@@ -102,6 +102,7 @@ watch(quotas, () => {
     class="flex <md:flex-col-reverse items-center justify-between pb-5"
   >
     <DsfrButton
+      v-if="!Object.keys(selectedQuota).length && !isNewQuotaForm"
       label="Ajouter un nouveau quota"
       data-testid="addQuotaLink"
       tertiary
@@ -110,6 +111,19 @@ watch(quotas, () => {
       icon="ri-add-line"
       @click="showNewQuotaForm()"
     />
+    <div
+      v-else
+      class="w-full flex justify-end"
+    >
+      <DsfrButton
+        title="Revenir à la liste des quotas"
+        data-testid="goBackBtn"
+        secondary
+        icon-only
+        icon="ri-arrow-go-back-line"
+        @click="() => cancel()"
+      />
+    </div>
   </div>
   <div
     v-if="isNewQuotaForm"
@@ -125,6 +139,7 @@ watch(quotas, () => {
     />
   </div>
   <div
+    v-else
     :class="{
       'md:grid md:grid-cols-3 md:gap-3 items-center justify-between': !selectedQuota?.name,
     }"
@@ -134,7 +149,9 @@ watch(quotas, () => {
       :key="quota.id"
       class="fr-mt-2v fr-mb-4w w-full"
     >
-      <div>
+      <div
+        v-show="!Object.keys(selectedQuota).length"
+      >
         <DsfrTile
           :title="quota.title"
           :data-testid="`quotaTile-${quota.title}`"
diff --git a/apps/client/src/views/admin/ListStages.vue b/apps/client/src/views/admin/ListStages.vue
index 8b797a796..b37bc24bf 100644
--- a/apps/client/src/views/admin/ListStages.vue
+++ b/apps/client/src/views/admin/ListStages.vue
@@ -105,6 +105,7 @@ watch(stages, () => {
     class="flex <md:flex-col-reverse items-center justify-between pb-5"
   >
     <DsfrButton
+      v-if="!Object.keys(selectedStage).length && !isNewStageForm"
       label="Ajouter un nouveau type d'environnement"
       data-testid="addStageLink"
       tertiary
@@ -113,6 +114,19 @@ watch(stages, () => {
       icon="ri-add-line"
       @click="showNewStageForm()"
     />
+    <div
+      v-else
+      class="w-full flex justify-end"
+    >
+      <DsfrButton
+        title="Revenir à la liste des types d'environnement"
+        data-testid="goBackBtn"
+        secondary
+        icon-only
+        icon="ri-arrow-go-back-line"
+        @click="() => cancel()"
+      />
+    </div>
   </div>
   <div
     v-if="isNewStageForm"
@@ -129,6 +143,7 @@ watch(stages, () => {
     />
   </div>
   <div
+    v-else
     :class="{
       'md:grid md:grid-cols-3 md:gap-3 items-center justify-between': !selectedStage?.name,
     }"
@@ -138,7 +153,9 @@ watch(stages, () => {
       :key="stage.id"
       class="fr-mt-2v fr-mb-4w w-full"
     >
-      <div>
+      <div
+        v-show="!Object.keys(selectedStage).length"
+      >
         <DsfrTile
           :title="stage.title"
           :data-testid="`stageTile-${stage.title}`"
diff --git a/apps/client/src/views/projects/DsoRepos.vue b/apps/client/src/views/projects/DsoRepos.vue
index 1bbee6ed2..fa9935a90 100644
--- a/apps/client/src/views/projects/DsoRepos.vue
+++ b/apps/client/src/views/projects/DsoRepos.vue
@@ -85,6 +85,7 @@ watch(project, () => {
     class="flex <md:flex-col-reverse items-center justify-between pb-5"
   >
     <DsfrButton
+      v-if="!Object.keys(selectedRepo).length && !isNewRepoForm"
       label="Ajouter un nouveau dépôt"
       data-testid="addRepoLink"
       tertiary
@@ -94,6 +95,19 @@ watch(project, () => {
       icon="ri-add-line"
       @click="showNewRepoForm()"
     />
+    <div
+      v-else
+      class="w-full flex justify-end"
+    >
+      <DsfrButton
+        title="Revenir à la liste des dépôts"
+        data-testid="goBackBtn"
+        secondary
+        icon-only
+        icon="ri-arrow-go-back-line"
+        @click="() => cancel()"
+      />
+    </div>
   </div>
   <div
     v-if="isNewRepoForm"
@@ -107,6 +121,7 @@ watch(project, () => {
     />
   </div>
   <div
+    v-else
     :class="{
       'md:grid md:grid-cols-3 md:gap-3 items-center justify-between': !selectedRepo.internalRepoName,
     }"
@@ -116,7 +131,9 @@ watch(project, () => {
       :key="repo.id"
       class="fr-mt-2v fr-mb-4w"
     >
-      <div>
+      <div
+        v-show="!Object.keys(selectedRepo).length"
+      >
         <DsfrTile
           :title="repo.title"
           :description="['deleting', 'initializing'].includes(repo?.data?.status) ? 'Opérations en cours' : null"
diff --git a/apps/client/src/views/projects/ManageEnvironments.vue b/apps/client/src/views/projects/ManageEnvironments.vue
index 225ccd99d..e191f66a9 100644
--- a/apps/client/src/views/projects/ManageEnvironments.vue
+++ b/apps/client/src/views/projects/ManageEnvironments.vue
@@ -101,6 +101,7 @@ watch(project, () => {
     class="flex <md:flex-col-reverse items-center justify-between pb-5"
   >
     <DsfrButton
+      v-if="!Object.keys(selectedEnvironment).length && !isNewEnvironmentForm"
       label="Ajouter un nouvel environnement"
       data-testid="addEnvironmentLink"
       tertiary
@@ -110,6 +111,19 @@ watch(project, () => {
       icon="ri-add-line"
       @click="showNewEnvironmentForm()"
     />
+    <div
+      v-else
+      class="w-full flex justify-end"
+    >
+      <DsfrButton
+        title="Revenir à la liste des environnements"
+        data-testid="goBackBtn"
+        secondary
+        icon-only
+        icon="ri-arrow-go-back-line"
+        @click="() => cancel()"
+      />
+    </div>
   </div>
   <div
     v-if="isNewEnvironmentForm"
@@ -126,6 +140,7 @@ watch(project, () => {
     />
   </div>
   <div
+    v-else
     :class="{
       'md:grid md:grid-cols-3 md:gap-3 items-center justify-between': !selectedEnvironment.id,
     }"
@@ -135,7 +150,9 @@ watch(project, () => {
       :key="environment.id"
       class="fr-mt-2v fr-mb-4w"
     >
-      <div>
+      <div
+        v-show="!Object.keys(selectedEnvironment).length"
+      >
         <DsfrTile
           :title="environment.title"
           :description="['deleting', 'initializing'].includes(environment.status) ? 'Opérations en cours' : null"