feat(swagger): update to 5.1.0 swagger-ui [KHCP-10938]

CODEOWNERS

@@ -37,7 +37,7 @@
 # Portal packages
 /packages/portal/document-viewer/ @Kong/team-devx
 /packages/portal/spec-renderer/ @Kong/team-devx
-/packages/portal/swagger-ui-web-component/ @adamdehaven @davidma415 @kaiarrowood
+/packages/portal/swagger-ui-web-component/ @adamdehaven @davidma415 @kaiarrowood @mptap
 
 # Analytics packages
 /packages/analytics/analytics-chart @Kong/team-data

packages/portal/spec-renderer/sandbox/pages/SpecRenderer.vue

@@ -10,13 +10,33 @@
             type="checkbox"
           > essentialsOnly
         </label>
+
+        <br>
+
+        <label>
+          <input
+            v-model="format"
+            name="format"
+            type="radio"
+            value="yaml"
+          > YAML
+        </label>
+
+        <label>
+          <input
+            v-model="format"
+            name="format"
+            type="radio"
+            value="json"
+          > JSON
+        </label>
       </div>
       <br><br>
       <SpecRenderer
         :key="key"
         :essentials-only="essentialsOnly"
         :operations-list="opsList"
-        :spec="defaultDocument"
+        :spec="format === 'yaml' ? defaultDocument : jsonContent"
         :tags="tags"
       />
     </main>
@@ -28,6 +48,7 @@ import { ref, watch } from 'vue'
 import type { Operation, Tag } from '../../src/types'
 // @ts-ignore
 import yamlContent from '../test.yaml'
+import jsonContent from '../test.json'
 import { SpecRenderer } from '../../src'
 // only imported in Sandbox! Parent app should do this
 import '@kong/kongponents/dist/style.css'
@@ -151,9 +172,10 @@ const tags = ref<Tag[]>([
 
 // checkboxes for toggling options
 const essentialsOnly = ref(false)
+const format = ref<'yaml' | 'json'>('yaml')
 
 const key = ref(0)
-watch(() => [essentialsOnly.value], () => {
+watch(() => [essentialsOnly.value, format.value], () => {
   key.value++
 }, { deep: true, immediate: true })
 </script>