From 7b8b57b8f6774f2d4984544b03ea392ecf99cb99 Mon Sep 17 00:00:00 2001
From: Mathieu LAUDE <mathieu.laude@wescale.fr>
Date: Tue, 29 Oct 2024 12:21:39 +0100
Subject: [PATCH] feat: :lipstick: disable cluster selection when creating a
 zone

---
 .../cypress/components/specs/zone-form.ct.ts  | 19 +++++---------
 .../cypress/e2e/specs/admin/zones.e2e.ts      | 18 +++++++------
 apps/client/src/components/ZoneForm.vue       | 26 ++++++++-----------
 3 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/apps/client/cypress/components/specs/zone-form.ct.ts b/apps/client/cypress/components/specs/zone-form.ct.ts
index f03ef8eae..69573bd44 100644
--- a/apps/client/cypress/components/specs/zone-form.ct.ts
+++ b/apps/client/cypress/components/specs/zone-form.ct.ts
@@ -46,11 +46,6 @@ describe('ZoneForm.vue', () => {
       .clear()
       .type('Cette zone de déploiement est publique.')
     cy.getByDataTestid('addZoneBtn').should('be.enabled')
-    cy.get('#clusters-select')
-      .click()
-    cy.getByDataTestid(`${props.allClusters[0].id}-clusters-select-tag`)
-      .click()
-    cy.getByDataTestid('addZoneBtn').should('be.enabled')
   })
 
   it('Should mount a new zone ZoneForm without clusters', () => {
@@ -80,11 +75,6 @@ describe('ZoneForm.vue', () => {
       .clear()
       .type('Cette zone de déploiement est publique.')
     cy.getByDataTestid('addZoneBtn').should('be.enabled')
-    cy.get('#clusters-select h6')
-      .click()
-    cy.get('#clusters-select .fr-tag')
-    cy.should('contain', 'Aucune sélection, 0 choix disponibles')
-    cy.getByDataTestid('addZoneBtn').should('be.enabled')
   })
 
   it('Should mount an update ZoneForm', () => {
@@ -122,8 +112,13 @@ describe('ZoneForm.vue', () => {
       .clear()
       .type('Cette zone de déploiement est privée.')
     cy.getByDataTestid('updateZoneBtn').should('be.enabled')
-    cy.get('#clusters-select')
-      .should('not.exist')
+    cy.get('#clusters-select h6')
+      .click()
+    cy.getByDataTestid(`${props.allClusters[0].id}-clusters-select-tag`)
+      .should('be.visible')
+      .click()
+    cy.getByDataTestid(`${props.allClusters[0].id}-clusters-select-tag`)
+      .should('be.disabled')
     cy.getByDataTestid('updateZoneBtn').should('be.enabled')
   })
 })
diff --git a/apps/client/cypress/e2e/specs/admin/zones.e2e.ts b/apps/client/cypress/e2e/specs/admin/zones.e2e.ts
index cb1157a82..71496915f 100644
--- a/apps/client/cypress/e2e/specs/admin/zones.e2e.ts
+++ b/apps/client/cypress/e2e/specs/admin/zones.e2e.ts
@@ -48,7 +48,8 @@ describe('Administration zones', () => {
         .should('have.value', zone.description)
         .and('be.enabled')
       cy.get('#clusters-select')
-        .should('not.exist')
+        .should('exist')
+        .and('be.disabled')
       cy.getByDataTestid('updateZoneBtn')
         .should('be.enabled')
       cy.getByDataTestid('cancelZoneBtn')
@@ -100,7 +101,8 @@ describe('Administration zones', () => {
       .should('have.value', updatedZone.description)
       .and('be.enabled')
     cy.get('#clusters-select')
-      .should('not.exist')
+      .should('exist')
+      .and('be.disabled')
     cy.getByDataTestid('updateZoneBtn')
       .should('be.enabled')
     cy.getByDataTestid('cancelZoneBtn')
@@ -141,10 +143,8 @@ describe('Administration zones', () => {
     cy.getByDataTestid('descriptionInput')
       .clear()
       .type(newZone.description)
-    newZone.clusterIds.forEach((id) => {
-      cy.getByDataTestid(`${id}-clusters-select-tag`)
-        .click()
-    })
+    cy.get('#clusters-select')
+      .should('not.exist')
     cy.getByDataTestid('addZoneBtn')
       .should('be.enabled')
       .click()
@@ -170,7 +170,8 @@ describe('Administration zones', () => {
       .should('have.value', newZone.description)
       .and('be.enabled')
     cy.get('#clusters-select')
-      .should('not.exist')
+      .should('exist')
+      .and('be.disabled')
     cy.getByDataTestid('updateZoneBtn')
       .should('be.enabled')
     cy.getByDataTestid('cancelZoneBtn')
@@ -180,7 +181,8 @@ describe('Administration zones', () => {
         .should('be.visible')
         .click()
       cy.get('#clusters-select')
-        .should('not.exist')
+        .should('exist')
+        .and('be.disabled')
       cy.getByDataTestid('cancelZoneBtn')
         .click()
     })
diff --git a/apps/client/src/components/ZoneForm.vue b/apps/client/src/components/ZoneForm.vue
index 4293b1500..3de34e8bf 100644
--- a/apps/client/src/components/ZoneForm.vue
+++ b/apps/client/src/components/ZoneForm.vue
@@ -44,10 +44,6 @@ const errorSchema = computed<SharedZodError | undefined>(() => {
 })
 const isZoneValid = computed(() => !errorSchema.value)
 
-function updateClusters(value: string[]) {
-  localZone.value.clusterIds = value
-}
-
 function addZone() {
   if (isZoneValid.value) emit('add', localZone.value)
 }
@@ -117,21 +113,28 @@ onBeforeMount(() => {
       hint="Facultatif. Attention, ces informations seront visibles par les utilisateurs de la console."
     />
     <div
-      v-if="props.isNewZone"
+      v-if="!props.isNewZone"
       class="fr-mb-2w"
     >
       <ChoiceSelector
         id="clusters-select"
         :wrapped="false"
+        :disabled="true"
         label="Clusters associés"
-        :description="!props.isNewZone ? 'Veuillez procéder aux associations dans le formulaire des clusters concernés.' : 'Sélectionnez les clusters autorisés à utiliser cette zone.'"
+        description="Veuillez procéder aux associations dans le formulaire des clusters concernés."
         :options="props.allClusters"
-        :options-selected="props.allClusters.filter(({ id }) => localZone.clusterIds?.includes(id))"
+        :options-selected="props.associatedClusters"
         label-key="label"
         value-key="id"
-        @update="(_c: Cluster[], clusterIds: Cluster['id'][]) => updateClusters(clusterIds)"
       />
     </div>
+    <DsfrAlert
+      v-if="props.associatedClusters.length"
+      class="mt-5"
+      data-testid="associatedClustersAlert"
+      description="La zone ne peut être supprimée, car des clusters y sont associés."
+      small
+    />
     <div
       class="flex space-x-10 mt-5"
     >
@@ -161,13 +164,6 @@ onBeforeMount(() => {
         @click="cancel()"
       />
     </div>
-    <DsfrAlert
-      v-if="props.associatedClusters.length"
-      class="mt-5"
-      data-testid="associatedClustersAlert"
-      description="La zone ne peut être supprimée, car des clusters y sont associés."
-      small
-    />
     <div
       v-if="localZone.id && !props.associatedClusters.length"
       data-testid="deleteZoneZone"