First version of openapi.yml (#413)

* first version of openapi.yml

* add swagger-ui

* fix version

* add documentation to app build docker stage

* linted the yaml

* remove console.log

.spectral.yaml

@@ -0,0 +1 @@
+extends: ["spectral:oas", "spectral:asyncapi"]

Dockerfile

@@ -2,6 +2,7 @@ FROM node:alpine as assets
 WORKDIR /src/app
 COPY app/package.json /src/app/package.json
 COPY app/package-lock.json /src/app/package-lock.json
+COPY documentation /src/documentation
 RUN npm ci
 COPY app /src/app
 RUN npm ci

app/package.json

@@ -19,6 +19,7 @@
     "react-router": "^6.14.2",
     "react-router-bootstrap": "^0.26.2",
     "react-router-dom": "^6.15.0",
+    "swagger-ui-react": "^5.3.2",
     "use-interval": "^1.4.0",
     "web-vitals": "^3.4.0"
   },
@@ -60,6 +61,7 @@
     "@types/react-router": "^5.1.20",
     "@types/react-router-bootstrap": "^0.26.2",
     "@types/react-router-dom": "^5.3.3",
+    "@types/swagger-ui-react": "^4.18.0",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "@vitejs/plugin-react": "^4.0.4",

app/public/swagger.yml

@@ -0,0 +1 @@
+../../documentation/openapi.yml

app/src/router.tsx

@@ -18,9 +18,11 @@ import { Spinner } from "react-bootstrap";
 import queue from "./queue";
 import sharedAggregators from "./shared-aggregators";
 import hpkeConfigs from "./hpke-configs";
+import swaggerUi from "./swagger-ui";
 
 function buildRouter(apiClient: ApiClient) {
   return createBrowserRouter([
+    swaggerUi(),
     layout(apiClient, [
       logout(apiClient),
       root(apiClient),

app/src/swagger-ui.tsx

@@ -0,0 +1,16 @@
+import { RouteObject } from "react-router-dom";
+
+export default function swaggerUi(): RouteObject {
+  return {
+    path: "swagger-ui",
+    async lazy() {
+      const { default: SwaggerUI } = await import("swagger-ui-react");
+      await import("swagger-ui-react/swagger-ui.css");
+      return {
+        Component() {
+          return <SwaggerUI url="/swagger.yml" supportedSubmitMethods={[]} />;
+        },
+      };
+    },
+  };
+}