feat(open-api): add auth/security requirements for individual operations

INT-407
myparcelnl · Apr 15, 2024 · a241ae7 · a241ae7
1 parent 0cb2035
commit a241ae7
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git a/src/.vuepress/plugins/openApi.ts b/src/.vuepress/plugins/openApi.ts
@@ -56,7 +56,7 @@ function renderPaths(document: OpenApiType.Document): string {
       chapters += `
 ### ${path}
 \n
-<OpenApiPath :path='${JSON.stringify(pathObj)}' title='${path}' />
+<OpenApiPath :path='${JSON.stringify(pathObj)}' :components='${JSON.stringify(document.components)}' title='${path}' />
     `;
     }
   }

diff --git a/src/.vuepress/theme/client/components/global/OpenApi.vue b/src/.vuepress/theme/client/components/global/OpenApi.vue
@@ -8,6 +8,7 @@
       <OpenApiPath
         v-if="item"
         :path="item"
+        :components="document.components"
         :title="path" />
     </article>
   </section>

diff --git a/src/.vuepress/theme/client/components/global/OpenApiOperation.vue b/src/.vuepress/theme/client/components/global/OpenApiOperation.vue
@@ -8,21 +8,27 @@
     >
     <pre class="dark:text-gray-100 inline m-0 ml-2 p-0 text-gray-700 text-sm">{{ endpoint }}</pre>
     <br />
-    <template v-if="authentication?.length">
+
+    <template v-if="securityRequirements?.length && securitySchemes">
       <strong>Authentication:</strong>&nbsp;
-      <pre>{{ authentication }}</pre>
+      <OpenApiSecurityRequirements
+        class="text-sm"
+        :security="securityRequirements"
+        :security-schemes="securitySchemes" />
     </template>
   </header>
 </template>
 
 <script setup lang="ts">
 import {computed} from 'vue';
 import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import OpenApiSecurityRequirements from '@mptheme/client/components/global/OpenApiSecurityRequirements.vue';
 
 const props = defineProps<{
   method: string;
   endpoint: string;
-  authentication?: OpenApiType.SecurityRequirementObject[] | null;
+  securityRequirements?: OpenApiType.SecurityRequirementObject[];
+  securitySchemes?: Record<string, OpenApiType.SecuritySchemeObject>;
 }>();
 
 const methodClass = computed(() => {

diff --git a/src/.vuepress/theme/client/components/global/OpenApiPath.vue b/src/.vuepress/theme/client/components/global/OpenApiPath.vue
@@ -13,7 +13,8 @@
         <OpenApiOperation
           :method="method"
           :endpoint="title"
-          :authentication="'security' in operation ? operation.security : null" />
+          :security-schemes="components?.securitySchemes as Record<string, OpenApiType.SecuritySchemeObject>"
+          :security-requirements="'security' in operation ? operation.security : undefined" />
 
         <p v-if="'description' in operation">{{ operation.description }}</p>
 
@@ -76,5 +77,6 @@ import DetailsExpand from './DetailsExpand.vue';
 defineProps<{
   title: string;
   path: OpenApiType.PathItemObject;
+  components?: OpenApiType.ComponentsObject;
 }>();
 </script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiSecurityRequirements.vue b/src/.vuepress/theme/client/components/global/OpenApiSecurityRequirements.vue
@@ -4,7 +4,7 @@
       <OpenApiSecurityScheme
         v-for="(securityItem, index) in resolvedSchemes"
         :key="index"
-        :scheme="resolveRequirementToScheme(securityItem)" />
+        :scheme="securityItem" />
     </ul>
   </div>
 </template>
@@ -20,13 +20,13 @@ const props = defineProps<{
 }>();
 
 const resolvedSchemes = computed(() => {
-  const resolved: OpenApiType.SecurityRequirementObject[] = [];
+  const resolved: OpenApiType.SecuritySchemeObject[] = [];
 
   for (const requirement of props.security) {
     const scheme = resolveRequirementToScheme(requirement);
 
     if (scheme) {
-      resolved.push(requirement);
+      resolved.push(scheme);
     }
   }
 

diff --git a/src/.vuepress/theme/client/components/global/OpenApiSecurityScheme.vue b/src/.vuepress/theme/client/components/global/OpenApiSecurityScheme.vue
@@ -2,15 +2,24 @@
   <li v-if="scheme.type === 'apiKey'">
     <strong>API Key</strong><br />
     <code class="m-0 p-0 text-sm whitespace-nowrap"> {{ scheme.in }}: {{ scheme.name }} </code>
+    <Markdown
+      v-if="scheme.description"
+      class="m-0 p-0 text-gray-600 text-sm"
+      :content="scheme.description" />
   </li>
   <li v-else-if="scheme.type === 'http'">
     <strong>HTTP</strong><br />
     <code class="m-0 p-0 text-sm whitespace-nowrap"> {{ scheme.scheme }}: {{ scheme.bearerFormat }} </code>
+    <Markdown
+      v-if="scheme.description"
+      class="m-0 p-0 text-gray-600 text-sm"
+      :content="scheme.description" />
   </li>
 </template>
 
 <script setup lang="ts">
 import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import Markdown from '@mptheme/client/components/global/Markdown.vue';
 
 defineProps<{
   scheme: OpenApiType.SecuritySchemeObject;