Feat/affichage swagger

.gitignore

@@ -18,6 +18,7 @@ logs
 .fleet
 .idea
 .claude
+.tool-versions
 
 # Local env files
 .env

README.md

@@ -58,6 +58,8 @@ Start the development server on `http://localhost:3000`:
 pnpm run dev
 ```
 
+You might need to add dev.local to your /etc/hosts file: `sudo sh -c 'echo "127.0.0.1 dev.local" >> /etc/hosts'`
+
 ### Common Commands
 ```bash
 pnpm run dev          # Start development server

components/OpenApi/OpenApiProperties.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="mt-6 bg-white p-4 rounded">
+    <div
+      v-if="loading"
+      class="flex justify-center py-8"
+    >
+      <AnimatedLoader />
+    </div>
+    <p
+      v-else-if="fetchError"
+      class="text-sm text-red-600"
+    >
+      {{ $t('Impossible de charger la documentation OpenAPI.') }}
+    </p>
+    <p
+      v-else-if="endpoints.length === 0"
+      class="text-sm text-gray-500 italic"
+    >
+      {{ $t('Aucune réponse documentée dans le swagger.') }}
+    </p>
+    <div
+      v-for="endpoint in endpoints"
+      v-else
+      :key="`${endpoint.method}-${endpoint.path}`"
+      class="mb-4 bg-white border border-gray-200 rounded-sm p-4"
+    >
+      <h3 class="text-base font-bold mb-3">
+        {{ endpoint.summary || endpoint.path }}
+      </h3>
+      <hr class="mb-4 border-gray-200">
+      <OpenApiProperty
+        v-for="(schema, name) in endpoint.properties"
+        :key="name"
+        :name="String(name)"
+        :schema="schema"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { parse } from 'yaml'
+import { AnimatedLoader } from '@datagouv/components-next'
+import OpenApiProperty from './OpenApiProperty.vue'
+import { getProxiedUrl } from '~/utils/openapi-proxy'
+import { extractEndpoints, type EndpointProperties } from '~/utils/openapi-extract'
+import { unwrapBouquetData, filterEndpointsByTitle } from '~/utils/openapi-bouquet'
+
+const props = defineProps<{
+  url: string
+  title?: string
+}>()
+
+const endpoints = ref<EndpointProperties[]>([])
+const loading = ref(true)
+const fetchError = ref(false)
+
+onMounted(async () => {
+  try {
+    const response = await fetch(getProxiedUrl(props.url))
+    if (!response.ok) throw new Error(`Fetch failed: ${response.status}`)
+    const text = await response.text()
+    const spec = parse(text)
+    let eps = extractEndpoints(spec)
+    if (props.title?.includes('| Bouquet')) {
+      eps = unwrapBouquetData(eps)
+      eps = filterEndpointsByTitle(eps, props.title)
+    }
+    endpoints.value = eps
+  }
+  catch (e) {
+    console.error('Failed to load OpenAPI spec:', e)
+    fetchError.value = true
+  }
+  finally {
+    loading.value = false
+  }
+})
+</script>

components/OpenApi/OpenApiProperty.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="mb-4">
+    <div class="flex items-center justify-between mb-1">
+      <span class="inline-block rounded-sm border border-gray-200 bg-white px-3 py-1 text-sm font-bold">
+        {{ title || name }}
+      </span>
+      <span
+        v-if="example !== undefined"
+        class="text-xs text-gray-500 ml-2 whitespace-nowrap"
+      >
+        {{ $t('Ex : {example}', { example: String(example) }) }}
+      </span>
+    </div>
+
+    <p
+      v-if="placeholderMessage"
+      class="text-sm italic text-gray-500 mb-2 pl-3"
+    >
+      {{ placeholderMessage }}
+    </p>
+
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div
+      v-else-if="description"
+      class="text-sm text-gray-600 mb-2 pl-3"
+      v-html="sanitizedDescription"
+    />
+
+    <div
+      v-if="objectProperties"
+      class="border-l border-gray-200 pl-4 ml-3 mt-2"
+    >
+      <OpenApiProperty
+        v-for="(subSchema, subName) in objectProperties"
+        :key="subName"
+        :name="String(subName)"
+        :schema="subSchema"
+      />
+    </div>
+
+    <div
+      v-if="arrayItemProperties"
+      class="border-l border-gray-200 pl-4 ml-3 mt-2"
+    >
+      <p class="text-xs text-gray-500 mb-2">
+        {{ $t('Cette propriété contient 1 ou plusieurs éléments ayant les spécifications suivantes :') }}
+      </p>
+      <OpenApiProperty
+        v-for="(itemSchema, itemName) in arrayItemProperties"
+        :key="itemName"
+        :name="String(itemName)"
+        :schema="itemSchema"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DOMPurify from 'dompurify'
+
+defineOptions({ name: 'OpenApiProperty' })
+
+const props = defineProps<{
+  name: string
+  schema: unknown
+}>()
+
+const { t } = useTranslation()
+
+function isObject(v: unknown): v is Record<string, unknown> {
+  return typeof v === 'object' && v !== null && !Array.isArray(v)
+}
+
+const schemaObj = computed(() => (isObject(props.schema) ? props.schema : {}))
+
+const title = computed(() => (typeof schemaObj.value.title === 'string' ? schemaObj.value.title : undefined))
+const description = computed(() => (typeof schemaObj.value.description === 'string' ? schemaObj.value.description : undefined))
+const example = computed(() => schemaObj.value.example)
+
+const placeholderMessage = computed(() => {
+  switch (schemaObj.value._placeholder) {
+    case 'circular':
+      return t('Référence circulaire')
+    case 'external':
+      return t('Référence externe non résolue')
+    case 'variant': {
+      const count = typeof schemaObj.value._variantCount === 'number' ? schemaObj.value._variantCount : 0
+      return t('Une variante parmi {count}', { count })
+    }
+    default:
+      return undefined
+  }
+})
+
+const objectProperties = computed(() => {
+  if (schemaObj.value.type !== 'object') return undefined
+  return isObject(schemaObj.value.properties) ? schemaObj.value.properties : undefined
+})
+
+const arrayItemProperties = computed(() => {
+  if (schemaObj.value.type !== 'array') return undefined
+  const items = schemaObj.value.items
+  if (!isObject(items)) return undefined
+  return isObject(items.properties) ? items.properties : undefined
+})
+
+const sanitizedDescription = computed(() => {
+  if (!description.value) return ''
+  return DOMPurify.sanitize(description.value, {
+    ALLOWED_TAGS: ['a', 'b', 'strong', 'i', 'em', 'code', 'br', 'p', 'ul', 'ol', 'li'],
+    ALLOWED_ATTR: ['href', 'target', 'rel'],
+  })
+})
+</script>

nuxt.config.ts

@@ -265,6 +265,18 @@ export default defineNuxtConfig({
     plugins: [toml(), tailwindcss()],
     server: {
       allowedHosts: ['dev.local'],
+      proxy: {
+        '/proxy/entreprise-api': {
+          target: 'https://entreprise.api.gouv.fr',
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/proxy\/entreprise-api/, ''),
+        },
+        '/proxy/particulier-api': {
+          target: 'https://particulier.api.gouv.fr',
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/proxy\/particulier-api/, ''),
+        },
+      },
       warmup: {
         clientFiles: [
           './pages/**/*.vue',

package.json

@@ -79,6 +79,7 @@
     "@vueuse/integrations": "^14.2.1",
     "@vueuse/nuxt": "^14.2.1",
     "@vueuse/router": "^14.2.1",
+    "dompurify": "^3.2.5",
     "gray-matter": "^4.0.3",
     "leaflet": "^1.9.4",
     "lodash-es": "^4.17.23",
@@ -94,7 +95,8 @@
     "uuid": "^13.0.0",
     "vue-content-loader": "^2.0.1",
     "vue-router": "^5.0.4",
-    "vue3-text-clamp": "^0.1.2"
+    "vue3-text-clamp": "^0.1.2",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.1",

pages/dataservices/[did].vue

@@ -191,6 +191,33 @@
         </div>
 
         <div class="container space-y-4">
+          <SimpleBanner
+            v-if="dataservice.machine_documentation_url"
+            type="primary-frame"
+          >
+            <button
+              type="button"
+              class="min-h-[42px] w-full flex items-center justify-between"
+              @click="showProperties"
+            >
+              <div class="text-datagouv-dark font-bold text-xl">
+                {{ $t('Données renvoyées') }}
+              </div>
+              <RiArrowUpSLine
+                v-if="openProperties"
+                class="size-6 text-gray-title"
+              />
+              <RiArrowDownSLine
+                v-else
+                class="size-6 text-gray-title"
+              />
+            </button>
+            <OpenApiProperties
+              v-if="openProperties"
+              :url="dataservice.machine_documentation_url"
+              :title="dataservice.title"
+            />
+          </SimpleBanner>
           <SimpleBanner
             v-if="dataservice.business_documentation_url"
             type="primary-frame"
@@ -310,8 +337,16 @@ defineOgImage('ObjectPage.takumi', {
 })
 await useJsonLd('dataservice', route.params.did as string)
 
+const openProperties = ref(false)
 const openSwagger = ref(false)
 
+function showProperties() {
+  openProperties.value = !openProperties.value
+  if (openProperties.value) {
+    $matomo.trackEvent('API', `Accéder à l'api`, 'Bouton : ouvrir données renvoyées')
+  }
+}
+
 function showSwagger() {
   openSwagger.value = !openSwagger.value
   if (openSwagger.value) {