Fix the rendering of the embedded API doc (#4023)

sandhose · web-flow · commit 7fe30ac80b59 · 2025-02-12T18:26:54.000+01:00
This broke with #4013
diff --git a/frontend/knip.config.ts b/frontend/knip.config.ts
@@ -8,7 +8,7 @@ import type { KnipConfig } from "knip";
 export default {
   entry: [
     "src/main.tsx",
-    "src/swagger.tsx",
+    "src/swagger.ts",
     "src/routes/*",
     "i18next-parser.config.ts",
   ],
diff --git a/frontend/src/swagger.ts b/frontend/src/swagger.ts
@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Please see LICENSE in the repository root for full details.
 
-import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist";
+import { SwaggerUIBundle } from "swagger-ui-dist";
 import "swagger-ui-dist/swagger-ui.css";
 
 type ApiConfig = {
@@ -14,16 +14,18 @@ type ApiConfig = {
 
 interface IWindow {
   API_CONFIG?: ApiConfig;
+  ui?: SwaggerUIBundle;
 }
 
 const config = typeof window !== "undefined" && (window as IWindow).API_CONFIG;
 if (!config) {
   throw new Error("API_CONFIG is not defined");
 }
 
-SwaggerUIBundle({
-  url: "./spec.json",
+(window as IWindow).ui = SwaggerUIBundle({
+  url: config.openapiUrl,
+  oauth2RedirectUrl: config.callbackUrl,
   dom_id: "#swagger-ui",
   deepLinking: true,
-  presets: [SwaggerUIStandalonePreset],
+  presets: [SwaggerUIBundle.presets.apis],
 });
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -58,7 +58,7 @@ export default defineConfig((env) => ({
         resolve(__dirname, "src/main.tsx"),
         resolve(__dirname, "src/shared.css"),
         resolve(__dirname, "src/templates.css"),
-        resolve(__dirname, "src/swagger.tsx"),
+        resolve(__dirname, "src/swagger.ts"),
       ],
     },
   },
diff --git a/templates/swagger/doc.html b/templates/swagger/doc.html
@@ -18,10 +18,10 @@
         callbackUrl: "{{ callback_url | add_slashes | safe }}",
       };
     </script>
-    {{ include_asset('src/swagger.tsx') | indent(4) | safe }}
+    {{ include_asset('src/swagger.ts') | indent(4) | safe }}
   </head>
 
   <body>
-    <div id="root"></div>
+    <div id="swagger-ui"></div>
   </body>
 </html>
