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

* feat(swagger): update to 5.1.0 swagger-ui

* fix(swaggger-ui): test files

* fix(swagger-ui-web-component): styles

* fix(swagger): get swagger Ui styles working as expected without local import

* chore(*): bump package size limit a bit to accomodate

* fix(*): unpin swagger-ui version, delete obsolete test

* style(*): override background style for operations

* fix(*): fix lockfile

* style(*): tweak css background on hover in operations list in sandbox

* style(*): tweak css of method badges

* fix(*): apply pr feedback

* style(*): override background and color for expand and collapse

* style(*): update css selector

* style(*): update css variable

* style(*): pr fb

* chore(lockfile): fix lockfile

* style(swagger-ui): apply pr feedback

* chore(*): add to codeowners

---------

Co-authored-by: kai.arrowood <[email protected]>
Co-authored-by: Manjiri Tapaswi <[email protected]>

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>