refactor: 🚑 fix the fix about swagger

fix swagger path in vue router
cloud-pi-native · Dec 15, 2024 · 0502107 · 0502107
1 parent a76b016
commit 0502107
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 16 deletions.
diff --git a/apps/client/cypress/e2e/specs/redirection.e2e.ts b/apps/client/cypress/e2e/specs/redirection.e2e.ts
@@ -1,3 +1,4 @@
+import { swaggerUiPath } from '@cpn-console/shared'
 import { getModelById } from '../support/func.js'
 
 const project = getModelById('project', '011e7860-04d7-461f-912d-334c622d38b3')
@@ -66,19 +67,13 @@ describe('Redirection', () => {
   it('Should redirect to swagger ui', () => {
     cy.intercept('POST', '/realms/cloud-pi-native/protocol/openid-connect/token').as('postToken')
 
-    cy.visit('/login')
-    cy.url().should('not.contain', '/login')
-    cy.get('input#username').type('test')
-    cy.get('input#password').type('test')
-    cy.get('input#kc-login').click()
-    cy.wait('@postToken')
-    cy.url().should('contain', '/')
+    cy.visit('/')
     cy.get('h1').contains(' Cloud π Native ')
       .should('exist')
 
     cy.getByDataTestid('swaggerUrl')
       .click()
-    cy.url().should('contain', 'swagger-ui')
+    cy.url().should('have.text', swaggerUiPath)
     cy.get('div.description')
       .should('contain', 'API de gestion des ressources Cloud Pi Native.')
   })

diff --git a/apps/client/src/App.vue b/apps/client/src/App.vue
@@ -7,6 +7,7 @@ import { useProjectStore } from './stores/project.js'
 import { useUserStore } from './stores/user.js'
 import { useAdminRoleStore } from './stores/admin-role.js'
 import ReloadPrompt from './components/ReloadPrompt.vue'
+import router from './router/index.js'
 import { useServiceStore } from '@/stores/services-monitor.js'
 
 const keycloak = getKeycloak()
@@ -27,6 +28,12 @@ const quickLinks = computed(() => [{
   iconRight: true,
 }])
 
+function navigateExternally(event: Event) {
+  // Laisser le navigateur gérer la navigation
+  event.preventDefault()
+  window.location.href = swaggerUiPath
+}
+
 onErrorCaptured((error) => {
   if (error instanceof Error) {
     console.trace(error)
@@ -56,7 +63,11 @@ watch(userStore, async () => {
 </script>
 
 <template>
+  <router-view
+    v-if="router.currentRoute.value.name === 'Swagger'"
+  />
   <div
+    v-else
     class="min-h-screen min-w-screen flex flex-col"
   >
     <DsfrHeader
@@ -90,7 +101,9 @@ watch(userStore, async () => {
           <a
             data-testid="swaggerUrl"
             :href="swaggerUiPath"
+            target="_blank"
             title="accéder au swagger"
+            @click="navigateExternally"
           >
             swagger
           </a>

diff --git a/apps/client/src/router/index.ts b/apps/client/src/router/index.ts
@@ -257,11 +257,6 @@ export const routes: Readonly<RouteRecordRaw[]> = [
       },
     ],
   },
-  {
-    path: '/api',
-    // no component, swagger plugin
-    components: {},
-  },
   {
     path: '/:pathMatch(.*)*',
     name: 'NotFound',
@@ -287,7 +282,7 @@ router.beforeEach((to) => { // Cf. https://github.com/vueuse/head pour des trans
  * Redirect unlogged user to login view
  */
 router.beforeEach(async (to, _from, next) => {
-  const validPath = ['Login', 'Home', 'Doc', 'NotFound', 'ServicesHealth', 'Maintenance', 'Logout']
+  const validPath = ['Login', 'Home', 'Doc', 'NotFound', 'ServicesHealth', 'Maintenance', 'Logout', 'Swagger']
   const userStore = useUserStore()
   const systemStore = useSystemSettingsStore()
   await userStore.setIsLoggedIn()

diff --git a/apps/client/src/views/Swagger.vue b/apps/client/src/views/Swagger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { swaggerUiPath } from '@cpn-console/shared'
+</script>
+
+<template>
+  <iframe
+    :src="swaggerUiPath"
+    class="w-full h-full"
+    title="Swagger Frame"
+  />
+</template>
diff --git a/apps/server/src/utils/keycloak.ts b/apps/server/src/utils/keycloak.ts
@@ -1,4 +1,4 @@
-import { apiPrefix } from '@cpn-console/shared'
+import { apiPrefix, swaggerUiPath } from '@cpn-console/shared'
 import type { KeycloakOptions } from 'fastify-keycloak-adapter'
 import {
   keycloakClientId,
@@ -22,7 +22,7 @@ export const keycloakConf = {
   // @ts-ignore
   userPayloadMapper,
   retries: 5,
-  excludedPatterns: [`${apiPrefix}/version`, `${apiPrefix}/healthz`, `${apiPrefix}/swagger-ui/**`, `${apiPrefix}/services`],
+  excludedPatterns: [`${apiPrefix}/version`, `${apiPrefix}/healthz`, `${swaggerUiPath}/**`, `${apiPrefix}/services`],
   bypassFn,
 } as const satisfies KeycloakOptions