Add Spec Version Drop-Down

docs/apis/routing-api-preview.mdx

----
-title: Routing API (Preview)
-hide_table_of_contents: true
----
-
-import ApiSpec from '@views/ApiSpec'
-
-<ApiSpec gitlabProjectId={"44"} path={"routing-api"} artifact={"routing-api.yaml"} version={"*"} includePrerelease={true} allowAuthentication={"false"} allowTry={true} />

docs/apis/routing-api.mdx

@@ -5,4 +5,4 @@ hide_table_of_contents: true
 
 import ApiSpec from '@views/ApiSpec'
 
-<ApiSpec gitlabProjectId={"44"} path={"routing-api"} artifact={"routing-api.yaml"} version={"*"} includePrerelease={"false"} allowAuthentication={"false"} allowTry={true} />
+<ApiSpec gitlabProjectId={"44"} path={"routing-api"} artifact={"routing-api.yaml"} version={"*"} includePrereleaseVersion={false} includePrerelease={true} allowAuthentication={"false"} allowTry={true} />

docs/apis/submission-api.mdx

@@ -5,4 +5,4 @@ hide_table_of_contents: true
 
 import ApiSpec from '@views/ApiSpec'
 
-<ApiSpec gitlabProjectId={"1"} path={"submission-api"} artifact={"submission-api.yaml"} version={"1.*"} />
+<ApiSpec gitlabProjectId={"1"} path={"submission-api"} artifact={"submission-api.yaml"} version={"*"} includePrereleaseVersion={false} includePrerelease={true} />

src/components/VersionSelect.js

@@ -2,25 +2,27 @@ import React, {useEffect} from "react"
 import useAsync from '@hooks/useAsync'
 import getVersionList from "@lib/utils/getVersionList";
 
-export default ({ version, setVersion, gitlabId }) => {
+export default ({ version, setVersion, gitlabId, includePrerelease = false }) => {
 
   const {execute, status, error, value: versions} = useAsync(getVersionList, {
     projectId: gitlabId,
-    includePrerelease: false
+    includePrerelease,
   }, false)
 
+  const selectStyle = {
+    border: "1px solid rgba(128, 126, 163, 0.8)",
+    borderRadius: "3px",
+    height: "36px",
+    lineHeight: "20px",
+  }
+
   useEffect(() => {
     execute()
   }, [])
 
-  useEffect(async () => {
-    if (status === 'success') {
-      console.log('vvvvvv', versions)
-    }
-  }, [status])
-
   return <div>
     Andere Version anzeigen: <select
+      style={selectStyle}
       value={version}
       onChange={e => setVersion(e.target.value)}>
       {versions && versions.map ? versions.map((v, i) => (

src/lib/utils/getLatestVersion.js

@@ -17,7 +17,7 @@ export default async function ({siteVersion, projectId, includePrerelease = fals
           .sort()
 
         const result_version = semver.maxSatisfying(suitableVersions, versionRange, {includePrerelease})
-        console.log('Get version for project: %s, requested version: %s, includePrerelease: %s, available versions: %s, selected version: %s', projectId, siteVersion, includePrerelease, suitableVersions, result_version)
+        // console.log('Get version for project: %s, requested version: %s, includePrerelease: %s, available versions: %s, selected version: %s', projectId, siteVersion, includePrerelease, suitableVersions, result_version)
         return result_version
       })
   }

src/lib/utils/getVersionList.js

@@ -6,7 +6,11 @@ export default async function ({projectId, includePrerelease = false}) {
     .catch((error) => {
       throw `Fetching of tags failed with ${error.response.status}`
     })
-    .then(async ({data}) => {
+    .then(async ({ data }) => {
+      // inject test rc to check if fiter is working
+      // const test_rc = { ...data[0] }
+      // test_rc.name = '1.2.0-rc.1'
+      // data.push(test_rc)
       const versionRange = `~*.*.*`
       const suitableVersions = await data
         .filter(({name}) => semver.satisfies(name, versionRange, {includePrerelease}))

src/views/ApiSpec.js

-import React, {useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
 import BrowserOnly from '@docusaurus/BrowserOnly'
 
-import {useActivePlugin, useActiveVersion,} from '@docusaurus/plugin-content-docs/client'
-
 import useAsync from '@hooks/useAsync'
 import getLatestVersion from "@lib/utils/getLatestVersion";
 import DownloadLabel from "@components/DownloadLabel";
+import VersionSelect from "@components/VersionSelect";
 
 const SCHEMA_BASE_URL = 'https://schema.fitko.de/fit-connect'
 
 export default function ApiSpec(props) {
-  const isInBrowser = ExecutionEnvironment.canUseDOM
+  const {artifact, path, version, gitlabProjectId, includePrerelease, includePrereleaseVersion} = props
+  const [selectedVersion, setSelectedVersion] = useState('')
 
-  const {pluginId} = useActivePlugin({failfast: true})
+  const isInBrowser = ExecutionEnvironment.canUseDOM
 
   const {execute, status, error, value: latestVersion} = useAsync(getLatestVersion, {
-    siteVersion: props.version === undefined ? '*' : props.version,
-    projectId: props.gitlabProjectId,
-    includePrerelease: props.includePrerelease !== undefined
+    siteVersion: version === undefined ? '*' : version,
+    projectId: gitlabProjectId,
+    includePrerelease: !!includePrereleaseVersion
   }, false)
 
   if (isInBrowser) {
     useEffect(() => {
       execute()
     }, [])
+
+    useEffect(async () => {
+      if (status === 'success') {
+        setSelectedVersion(latestVersion)
+      }
+    }, [status])
   }
 
   return (
@@ -36,14 +42,14 @@ export default function ApiSpec(props) {
           <div>
             <p>Die aktuell angezeigte Version der API ist {status === 'success' &&
               <code>{latestVersion}</code>} {status === 'success' &&
-              <DownloadLabel baseURL={`${SCHEMA_BASE_URL}/${props.path}`} version={latestVersion} artifact={props.artifact} label="OpenAPI"/>}.
-              Alle vorherigen Versionen <a href={`${SCHEMA_BASE_URL}/${props.path}`}>finden sich hier.</a>
+              <DownloadLabel baseURL={`${SCHEMA_BASE_URL}/${path}`} version={selectedVersion} artifact={artifact} label="OpenAPI"/>}.
             </p>
+            <VersionSelect version={selectedVersion} setVersion={setSelectedVersion} gitlabId={gitlabProjectId} includePrerelease={includePrerelease} /><br/>
 
-            {status === 'success' && latestVersion && <rapi-doc
+            {status === 'success' && selectedVersion && <rapi-doc
               render-style="view"
               layout="column"
-              spec-url={`${SCHEMA_BASE_URL}/${props.path}/${latestVersion}/${props.artifact}`}
+              spec-url={`${SCHEMA_BASE_URL}/${path}/${selectedVersion}/${artifact}`}
               theme="light"
               schema-description-expanded="true"
               show-info="false"

src/views/JSONSchema.js

@@ -35,7 +35,6 @@ export default function JSONSchema(props) {
   const { name, version, includePrerelease } = props;
   const [jsonSchema, setJsonSchema] = useState(null)
   const [selectedVersion, setSelectedVersion] = useState(version)
-  console.log('selectedVersion: ', selectedVersion);
   const isInBrowser = ExecutionEnvironment.canUseDOM
   const {pluginId} = useActivePlugin({failfast: true})
   const {name: siteVersion} = useActiveVersion(pluginId)