Merge pull request #1362 from cloud-pi-native/chore/upgrade-vue-dsfr

chore: ⬆️ major upgrade vue-dsfr

apps/client/.eslintrc-auto-import.json

@@ -8,13 +8,11 @@
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,
     "InjectionKey": true,
-    "OhVueIcon": true,
     "PropType": true,
     "Ref": true,
     "VNode": true,
     "WritableComputedRef": true,
     "acceptHMRUpdate": true,
-    "addIcons": true,
     "computed": true,
     "createApp": true,
     "createPinia": true,

apps/client/cypress/components/support/commands.ts

@@ -1,8 +1,6 @@
 import { mount } from '@cypress/vue'
 import VueDsfr from '@gouvminint/vue-dsfr'
 
-import * as icons from '@/icons.js'
-
 import 'virtual:uno.css'
 import 'uno.css'
 import 'virtual:unocss-devtools'
@@ -17,7 +15,7 @@ Cypress.Commands.add('mount', (component, options = {}) => {
 
   options.global.plugins.push({
     install(app) {
-      app.use(VueDsfr, { icons: Object.values(icons) })
+      app.use(VueDsfr)
     },
   })
 

apps/client/cypress/e2e/specs/admin/organizations.e2e.ts

@@ -61,9 +61,7 @@ describe('Administration organizations', () => {
       .should('be.enabled')
       .click()
 
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', `Organisation ${newOrg.name} créée`)
-    })
+    cy.getByDataTestid('snackbar').should('contain', `Organisation ${newOrg.name} créée`)
 
     cy.getByDataTestid('tableAdministrationOrganizations').within(() => {
       cy.getByDataTestid(`${newOrg.name}-label-input`)
@@ -132,9 +130,7 @@ describe('Administration organizations', () => {
     cy.wait('@putOrganization')
     cy.wait('@getAllOrganizations')
 
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', `Organisation ${newOrg.name} mise à jour`)
-    })
+    cy.getByDataTestid('snackbar').should('contain', `Organisation ${newOrg.name} mise à jour`)
 
     cy.visit('/projects/create-project')
       .get(`select#organizationId-select > option[value="${organizations[0].id}"]`)
@@ -163,9 +159,7 @@ describe('Administration organizations', () => {
       cy.getByDataTestid('confirmUpdateBtn')
         .click()
     })
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', `Organisation ${organization.name} mise à jour`)
-    })
+    cy.getByDataTestid('snackbar').should('contain', `Organisation ${organization.name} mise à jour`)
 
     cy.visit('/projects')
       .wait('@listProjects')
@@ -198,9 +192,7 @@ describe('Administration organizations', () => {
       cy.getByDataTestid('confirmUpdateBtn')
         .click()
     })
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', `Organisation ${organization.name} mise à jour`)
-    })
+    cy.getByDataTestid('snackbar').should('contain', `Organisation ${organization.name} mise à jour`)
 
     cy.visit('/projects')
     cy.getByDataTestid(`projectTile-${projectFailed.name}`)

apps/client/cypress/e2e/specs/admin/projects.e2e.ts

@@ -38,23 +38,17 @@ describe('Administration projects', () => {
     cy.getByDataTestid('tableAdministrationProjects').within(() => {
       projects.forEach((project, index: number) => {
         cy.get(`tbody tr:nth-of-type(${index + 1})`).within(() => {
-          cy.get('td:nth-of-type(1)').should('contain', project.organization)
-          cy.get('td:nth-of-type(2)').should('contain', project.name)
+          cy.getSettled('td:nth-of-type(1)').should('contain', project.organization)
+          cy.getSettled('td:nth-of-type(2)').should('contain', project.name)
           cy.getByDataTestid('description').invoke('text').then((text) => {
-            const maxDescriptionLength = 60
-            if (text?.length > maxDescriptionLength) {
-              const lastSpaceIndex = project.description.slice(0, maxDescriptionLength).lastIndexOf(' ')
-              const truncatedDescription = project.description.slice(0, lastSpaceIndex > 0 ? lastSpaceIndex : maxDescriptionLength)
-              expect(text).to.equal(`${truncatedDescription} ...`)
-              return
-            }
+            cy.log(text)
             expect(text).to.equal(truncateDescription(text).innerHTML)
           })
-          cy.get('td:nth-of-type(4)').should('contain', project.owner.email)
-          cy.get('td:nth-of-type(5) svg title').should('contain', `Le projet ${project.name} est ${statusDict.status[project.status].wording}`)
-          cy.get('td:nth-of-type(6) svg title').should('contain', `Le projet ${project.name} est ${statusDict.locked[String(!!project.locked)].wording}`)
-          cy.get('td:nth-of-type(7)').should('contain', formatDate(project.createdAt))
-          cy.get('td:nth-of-type(8)').should('contain', formatDate(project.updatedAt))
+          cy.getSettled('td:nth-of-type(4)').should('contain', project.owner.email)
+          cy.getSettled('td:nth-of-type(5) svg title').should('contain', `Le projet ${project.name} est ${statusDict.status[project.status].wording}`)
+          cy.getSettled('td:nth-of-type(6) svg title').should('contain', `Le projet ${project.name} est ${statusDict.locked[String(!!project.locked)].wording}`)
+          cy.getSettled('td:nth-of-type(7)').should('contain', formatDate(project.createdAt))
+          cy.getSettled('td:nth-of-type(8)').should('contain', formatDate(project.updatedAt))
         })
       })
     })
@@ -136,9 +130,7 @@ describe('Administration projects', () => {
       .click()
 
     cy.wait('@replayHooks').its('response.statusCode').should('match', /^20\d$/)
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', `Le projet ayant pour id ${project.id} a été reprovisionné avec succès`)
-    })
+    cy.getByDataTestid('snackbar').should('contain', `Le projet ayant pour id ${project.id} a été reprovisionné avec succès`)
   })
 
   it('Should lock and unlock a project, loggedIn as admin', () => {

apps/client/cypress/e2e/specs/admin/quotas.e2e.ts

@@ -204,9 +204,7 @@ describe('Administration quotas', () => {
     cy.wait('@createQuota').its('response').then(($response) => {
       expect($response?.statusCode).to.not.match(/^20\d$/)
     })
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', 'Un quota portant ce nom existe déjà')
-    })
+    cy.getByDataTestid('snackbar').should('contain', 'Un quota portant ce nom existe déjà')
   })
 
   it('Should create a private quota', () => {

apps/client/cypress/e2e/specs/admin/roles.e2e.ts

@@ -41,9 +41,7 @@ describe('Administration roles', () => {
       .click()
     cy.wait('@createRole')
       .its('response.statusCode').should('match', /^20\d$/)
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', 'Rôle ajouté')
-    })
+    cy.getByDataTestid('snackbar').should('contain', 'Rôle ajouté')
     cy.getByDataTestid('saveBtn')
       .should('be.disabled')
     cy.getByDataTestid('roleNameInput')
@@ -59,11 +57,11 @@ describe('Administration roles', () => {
       .its('response.statusCode').should('match', /^20\d$/)
     cy.get('[data-testid$="-tab"]').contains(newOidcRole.name)
       .should('be.visible')
-    cy.getByDataTestid('test-membres')
+    cy.getByDataTestid('test-members')
       .click()
     cy.getByDataTestid('addUserSuggestionInput')
       .should('not.exist')
-    cy.get('#members')
+    cy.get('div#members')
       .should('contain', 'Les groupes ayant une liaison OIDC ne peuvent pas gérer leurs membres.')
   })
 
@@ -75,9 +73,7 @@ describe('Administration roles', () => {
       .click()
     cy.wait('@createRole')
       .its('response.statusCode').should('match', /^20\d$/)
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', 'Rôle ajouté')
-    })
+    cy.getByDataTestid('snackbar').should('contain', 'Rôle ajouté')
     cy.getByDataTestid('saveBtn')
       .should('be.disabled')
     cy.getByDataTestid('roleNameInput')
@@ -98,7 +94,7 @@ describe('Administration roles', () => {
   it('Should add a user to a role', () => {
     cy.get('[data-testid$="-tab"]').contains(newRole.name)
       .click()
-    cy.getByDataTestid('test-membres')
+    cy.getByDataTestid('test-members')
       .click()
     cy.getByDataTestid('addUserBtn')
       .should('be.disabled')

apps/client/cypress/e2e/specs/admin/stages.e2e.ts

@@ -147,9 +147,7 @@ describe('Administration stages', () => {
     cy.wait('@createStage').its('response').then(($response) => {
       expect($response?.statusCode).to.not.match(/^20\d$/)
     })
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', 'Un type d\'environnement portant ce nom existe déjà')
-    })
+    cy.getByDataTestid('snackbar').should('contain', 'Un type d\'environnement portant ce nom existe déjà')
   })
 
   it('Should update a stage', () => {

apps/client/cypress/e2e/specs/admin/zones.e2e.ts

@@ -188,9 +188,7 @@ describe('Administration zones', () => {
       .click()
 
     cy.wait('@createZone').its('response.statusCode').should('match', /^40\d$/)
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', `Une zone portant le nom ${newZone.slug} existe déjà.`)
-    })
+    cy.getByDataTestid('snackbar').should('contain', `Une zone portant le nom ${newZone.slug} existe déjà.`)
   })
 
   it('Should not delete a zone if associated clusters', () => {

apps/client/cypress/e2e/specs/create-project.e2e.ts

@@ -25,7 +25,7 @@ describe('Create Project', () => {
       .getByDataTestid('createProjectLink').click()
       .get('h1').should('contain', 'Commander un espace projet')
       .get('[data-testid^="repoFieldset-"]').should('not.exist')
-      .get('p.fr-alert__description').should('contain', owner.email)
+    cy.getByDataTestid('ownerInfo').should('contain', owner.email)
       .get('select#organizationId-select').select(project.orgId)
       .getByDataTestid('nameInput').type(`${project.name} ErrorSpace`)
       .getByDataTestid('nameInput').should('have.class', 'fr-input--error')
@@ -52,8 +52,6 @@ describe('Create Project', () => {
       .getByDataTestid('nameInput').type(`${project.name}`)
     cy.getByDataTestid('createProjectBtn').should('be.enabled').click()
     cy.wait('@postProject').its('response.statusCode').should('not.match', /^20\d$/)
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', `Le projet "${project.name}" existe déjà`)
-    })
+    cy.getByDataTestid('snackbar').should('contain', `Le projet "${project.name}" existe déjà`)
   })
 })

apps/client/cypress/e2e/specs/dashboard.e2e.ts

@@ -74,9 +74,7 @@ describe('Dashboard', () => {
       .getByDataTestid('showSecretsBtn').click()
 
     cy.wait('@getProjectSecrets').its('response.statusCode').should('match', /^20\d$/)
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', 'Secrets récupérés')
-    })
+    cy.getByDataTestid('snackbar').should('contain', 'Secrets récupérés')
 
     cy.getByDataTestid('projectSecretsZone').should('exist')
     cy.getByDataTestid('noProjectSecretsP').should('contain', 'Aucun secret à afficher')
@@ -96,9 +94,7 @@ describe('Dashboard', () => {
     cy.getByDataTestid('replayHooksBtn').click()
 
     cy.wait('@replayHooks').its('response.statusCode').should('match', /^20\d$/)
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', 'Le projet a été reprovisionné avec succès')
-    })
+    cy.getByDataTestid('snackbar').should('contain', 'Le projet a été reprovisionné avec succès')
   })
 
   it('Should not be able to access project secrets if not owner', () => {

apps/client/cypress/e2e/specs/environments.e2e.ts

@@ -86,9 +86,7 @@ describe('Manage project environments', () => {
       .click()
 
     cy.wait('@postEnvironment').its('response.statusCode').should('not.match', /^20\d$/)
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', 'Ce nom d\'environnement est déjà pris.')
-    })
+    cy.getByDataTestid('snackbar').should('contain', 'Ce nom d\'environnement est déjà pris.')
   })
 
   it('Should handle cluster availability', () => {

apps/client/cypress/e2e/specs/repos.e2e.ts

@@ -233,9 +233,7 @@ describe('Add repos into project', () => {
 
     cy.wait('@syncRepo').its('response.statusCode').should('match', /^20\d$/)
 
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', `Job de synchronisation lancé pour le dépôt repo03`)
-    })
+    cy.getByDataTestid('snackbar').should('contain', `Job de synchronisation lancé pour le dépôt repo03`)
 
     cy.getByDataTestid('branchNameInput')
       .clear()
@@ -252,9 +250,7 @@ describe('Add repos into project', () => {
 
     cy.wait('@syncRepo').its('response.statusCode').should('match', /^20\d$/)
 
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', `Job de synchronisation lancé pour le dépôt repo03`)
-    })
+    cy.getByDataTestid('snackbar').should('contain', `Job de synchronisation lancé pour le dépôt repo03`)
   })
 
   it('Should delete a repo', () => {

apps/client/cypress/e2e/specs/roles.e2e.ts

@@ -56,9 +56,7 @@ describe('Project roles', () => {
         .click()
       cy.wait('@createRole')
         .its('response.statusCode').should('match', /^20\d$/)
-      cy.getByDataTestid('snackbar').within(() => {
-        cy.get('p').should('contain', 'Rôle ajouté')
-      })
+      cy.getByDataTestid('snackbar').should('contain', 'Rôle ajouté')
       cy.getByDataTestid('saveBtn').should('be.disabled')
       cy.getByDataTestid('roleNameInput')
         .should('have.value', 'Nouveau rôle')
@@ -67,7 +65,7 @@ describe('Project roles', () => {
       cy.getByDataTestid('saveBtn')
         .should('be.enabled')
         .click()
-      cy.getByDataTestid('test-membres').click()
+      cy.getByDataTestid('test-members').click()
       cy.getByDataTestid(`input-checkbox-${user.id}-cbx`).check({ force: true })
     })
 

apps/client/cypress/e2e/specs/team.e2e.ts

@@ -34,9 +34,7 @@ describe('Team view', () => {
     cy.getByDataTestid('addUserBtn')
       .should('be.enabled').click()
 
-    cy.getByDataTestid('snackbar').within(() => {
-      cy.get('p').should('contain', 'Utilisateur introuvable')
-    })
+    cy.getByDataTestid('snackbar').should('contain', 'Utilisateur introuvable')
 
     cy.getByDataTestid('teamTable')
       .find('tbody > tr')

apps/client/cypress/e2e/support/commands.ts

@@ -50,7 +50,7 @@ Cypress.Commands.add('createProject', (project, ownerEmail = defaultOwner.email)
     .getByDataTestid('createProjectLink').click()
     .get('h1').should('contain', 'Commander un espace projet')
     .get('[data-testid^="repoFieldset-"]').should('not.exist')
-    .get('p.fr-alert__description').should('contain', ownerEmail)
+  cy.getByDataTestid('ownerInfo').should('contain', ownerEmail)
     .get('select#organizationId-select').select(orgMi.id)
     .getByDataTestid('nameInput').clear().type(newProject.name)
     .getByDataTestid('nameInput').should('not.have.class', 'fr-input--error')

apps/client/package.json

@@ -30,21 +30,20 @@
   "dependencies": {
     "@cpn-console/shared": "workspace:^",
     "@gouvfr/dsfr": "^1.12.1",
-    "@gouvminint/vue-dsfr": "^5.20.1",
-    "@iconify-json/ri": "^1.1.21",
+    "@gouvminint/vue-dsfr": "^7.0.0",
+    "@iconify/vue": "^4.1.2",
     "@ts-rest/core": "^3.45.2",
     "@vue/tsconfig": "^0.5.1",
-    "axios": "^1.7.2",
+    "axios": "^1.7.7",
     "dotenv": "^16.4.5",
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
-    "keycloak-js": "^25.0.1",
+    "keycloak-js": "^25.0.5",
     "nanoid": "5.0.7",
-    "oh-vue-icons": "1.0.0-rc3",
     "p-debounce": "^4.0.0",
     "pinia": "^2.1.7",
-    "vue": "^3.4.31",
-    "vue-router": "^4.4.0",
+    "vue": "^3.4.38",
+    "vue-router": "^4.4.5",
     "vue3-json-viewer": "^2.2.2"
   },
   "optionalDependencies": {
@@ -56,26 +55,26 @@
     "@cpn-console/eslint-config": "workspace:^",
     "@cpn-console/test-utils": "workspace:^",
     "@cpn-console/ts-config": "workspace:^",
-    "@eslint/compat": "^1.1.0",
+    "@eslint/compat": "^1.1.1",
     "@faker-js/faker": "^8.4.1",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.9",
-    "@unocss/transformer-directives": "^0.61.0",
+    "@unocss/transformer-directives": "^0.61.9",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitest/coverage-v8": "^1.6.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-vue": "^9.27.0",
-    "jsdom": "^24.1.0",
+    "jsdom": "^24.1.3",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.7",
+    "rimraf": "^5.0.10",
     "stylelint": "^16.6.1",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^36.0.1",
     "typescript": "^5.5.2",
-    "unocss": "^0.61.0",
-    "unplugin-auto-import": "^0.17.6",
+    "unocss": "^0.61.9",
+    "unplugin-auto-import": "^0.17.8",
     "unplugin-vue-components": "^0.27.2",
     "vite": "^5.3.2",
     "vitest": "^1.6.0",

apps/client/src/App.vue

@@ -18,7 +18,7 @@ const appVersion: string = process.env.APP_VERSION ? `v${process.env.APP_VERSION
 const quickLinks = ref([{
   label,
   to,
-  icon: 'ri-account-circle-line',
+  icon: 'ri:account-circle-line',
   iconRight: true,
 }])