fix(spec): display and download specs in yaml format (#503)

Kong · Apr 26, 2024 · fb91edb · fb91edb
1 parent dbc70fe
commit fb91edb
Showing 1 changed file with 9 additions and 21 deletions.
diff --git a/src/views/Spec.vue b/src/views/Spec.vue
@@ -184,15 +184,16 @@ export default defineComponent({
     const isAllowedToRegister = ref(false)
     const specContents = ref('')
     const specName = ref('')
+    const specExt = ref('')
     const specDetails = ref(null)
     const productVersions = ref(new Map())
     const { canUserAccess } = usePermissionsStore()
     const appStore = useAppStore()
     const { isPublic } = storeToRefs(appStore)
 
-    const objectParsers = [
-      (x: string) => JSON.parse(x),
-      (x: string) => jsyaml.load(x)
+    const specTypes = [
+      { ext: '.json', parser: (x: string) => JSON.parse(x) },
+      { ext: '.yaml', parser: (x: string) => jsyaml.load(x) }
     ]
 
     const applicationRegistrationEnabled = computed(() => {
@@ -319,7 +320,6 @@ export default defineComponent({
 
     function triggerViewSpecModal () {
       viewSpecModalIsVisible.value = true
-      specContents.value = getSpecContents()
     }
 
     function triggerViewSpecRegistrationModal () {
@@ -359,18 +359,9 @@ export default defineComponent({
     }
 
     function downloadSpecContents (): void {
-      let extension: string
       let fileName: string
-      const content = specContents.value
       const element = document.createElement('a')
 
-      try {
-        JSON.parse(content)
-        extension = '.json'
-      } catch (e) {
-        extension = '.yaml'
-      }
-
       if (window.location.pathname.includes('/')) {
         const splitPath = window.location.pathname.split('/')
 
@@ -380,17 +371,13 @@ export default defineComponent({
       }
 
       element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(specContents.value))
-      element.setAttribute('download', fileName + extension)
+      element.setAttribute('download', fileName + specExt.value)
       element.style.display = 'none'
       document.body.appendChild(element)
       element.click()
       document.body.removeChild(element)
     }
 
-    function getSpecContents () {
-      return JSON.stringify(spec.value, null, 2)
-    }
-
     function setTitle (versionName: string) {
       const versionText = versionName ? `- ${versionName} ` : ''
 
@@ -434,15 +421,16 @@ export default defineComponent({
             return res
           }
 
-          const rawContent = res.data.content
+          specContents.value = res.data.content
 
           let parsedObject: any
           const parseErrors = []
 
-          for (const parser of objectParsers) {
+          for (const specType of specTypes) {
             try {
-              parsedObject = parser(rawContent)
+              parsedObject = specType.parser(specContents.value)
               if (parsedObject) {
+                specExt.value = specType.ext
                 break
               }
             } catch (err) {