Feat/affichage swagger#1055
Conversation
when using asdf as node version manager, .tool-versions is required
Samuelfaure
force-pushed
the
feat/affichage_swagger
branch
from
5d5a086 to
c025711
Compare
Blocked by CORS, need to make a proxy in dev environment. Adds: - nuxt.config.ts: Vite dev proxy for entreprise.api.gouv.fr and particulier.api.gouv.fr - utils/openapi-proxy.ts: client-side URL rewriter that maps external swagger URLs to the local dev proxy paths
Adds a recursive OpenApiProperty component and an OpenApiProperties wrapper that fetches the dataservice's OpenAPI YAML, extracts the response schema for the matching endpoint, and renders the fields as a structured property tree. Matching uses the dataservice title against endpoint summaries (Bouquet API Entreprise/Particulier conventions). Descriptions render as sanitized HTML via DOMPurify. A loader appears while the YAML is fetched and parsed client-side. The property tree is hosted in a collapsible "Données renvoyées" banner on the dataservice page, matching the existing Swagger banner's pattern.
Generalises the property tree to work with any OpenAPI 2.0 or 3.x spec, not just Bouquet API Entreprise/Particulier. A new utils/openapi-extract module resolves internal $ref pointers, flattens allOf, takes the first variant of oneOf/anyOf, and handles both v2 (responses.200.schema) and v3 (responses.200.content.application/json.schema) response locations. The Bouquet-specific data-wrapper unwrap and title-based filter become post-hoc transforms applied only when the title matches the Bouquet pattern. Non-Bouquet dataservices now render all endpoints with their HTTP method prefixed (GET, POST, ...) in the heading. The property tree banner loses its redundant heading and gets a white inner background.
Samuelfaure
force-pushed
the
feat/affichage_swagger
branch
from
c025711 to
9f56088
Compare
maudetes
requested review from
maudetes
and removed request for
estellebertrand
nicolaskempf57
left a comment
nicolaskempf57
left a comment
There was a problem hiding this comment.
Thanks for your PR 🙏🏻
I'm not quite clear on the product /usability side. I find that having multiple banners reduce the purpose of the use of the banner component in the page.
| v-if="loading" | ||
| class="flex justify-center py-8" | ||
| > | ||
| <AnimatedLoader /> |
There was a problem hiding this comment.
Did you try to use the datagouv-components/src/components/LoadingBlock.vue to manage the loading ?
| import { computed } from 'vue' | ||
| import DOMPurify from 'dompurify' | ||
|
|
||
| defineOptions({ name: 'OpenApiProperty' }) |
There was a problem hiding this comment.
I think we can remove this line
|
|
||
| export type EndpointMethod = (typeof METHODS)[number] | ||
|
|
||
| export interface EndpointProperties { |
There was a problem hiding this comment.
Can you use type here too instead of interface ?
| @@ -0,0 +1,163 @@ | |||
| // Generic OpenAPI 2.0 / 3.x extractor. | |||
There was a problem hiding this comment.
Are both API v2 and v3 required for your use case ?
It would be great if this file could be merged with datagouv-components/src/components/OpenApiViewer/openapi.ts
| </div> | ||
|
|
||
| <div class="container space-y-4"> | ||
| <SimpleBanner |
There was a problem hiding this comment.
Could it be added to the existing banner in datagouv-components/src/components/OpenApiViewer/OpenApiViewer.vue ? Or moved to an AccordionGroup ? I find it strange to have many banners stacked
| return normalize(s).replace(/[^a-z0-9\s]/g, ' ').split(/\s+/).filter(w => w.length > 2).sort() | ||
| } | ||
|
|
||
| interface FilterInfo { |
There was a problem hiding this comment.
Can you use type instead of interface here ?
|
Thanks, will correct all of that 👍 I just arrived on this product and still very junior on those stacks, so feedback is very welcome 🙏 |
2 participants
fix datagouv/data.gouv.fr#1906
1e3f3f8 is for testing, will drop before merge unless someone asks me not to
J'ai pas fait de JS ni de vue ni de typescript depuis un bail donc hésitez pas à me remonter les bretelles
Aussi pas testé car je suis pas sûr de votre politique de test mais je peux ajouter des tests
Note: je vais probablement remplacer le filtrage par nom de provider pour les bouquets API E/P avec un filtre coté API E/P