WIP: api version standards

.env.example

@@ -5,6 +5,7 @@ VITE_OBP_EXPLORER_HOST=http://localhost:5173
 VITE_OBP_CONSUMER_KEY=your_consumer_key
 VITE_OBP_CONSUMER_SECRET=your_consumer_secret
 VITE_OBP_REDIRECT_URL=http://localhost:5173/api/callback
+VITE_OPB_SERVER_SESSION_PASSWORD=very secret
 # Product styling setting
 #VITE_OBP_LINKS_COLOR="#52b165"
 #VITE_OBP_HEADER_LINKS_COLOR="#39455f"

server/app.ts

@@ -11,7 +11,7 @@ const app: Application = express()
 app.use(express.json())
 app.use(
   session({
-    secret: 'very secret',
+    secret: process.env.VITE_OPB_SERVER_SESSION_PASSWORD,
     resave: false,
     saveUninitialized: true
   })

src/components/Content.vue

@@ -12,11 +12,15 @@ import {
 } from '../obp'
 import { setTabActive, initializeAPICollections } from './SearchNav.vue'
 import { summaryPagerLinksColor as summaryPagerLinksColorSetting } from '../obp/style-setting'
+import { version } from '../obp'
+import { getGroupedResourceDocs } from '../obp/resource-docs'
 
 const route = useRoute()
+const configVersion = 'OBP' + version
 const description = ref('')
 const summary = ref('')
-const docs = inject('OBP-ResourceDocs')
+const resourceDocs = inject('OBP-ResourceDocs')
+const docs = getGroupedResourceDocs(configVersion, resourceDocs)
 const displayPrev = ref(true)
 const displayNext = ref(true)
 const prev = ref({ id: 'prev' })
@@ -27,8 +31,8 @@ let routeId = ''
 let isFavorite = false
 let apiCollectionsEndpoint = inject('OBP-MyCollectionsEndpoint')!
 
-const setOperationDetails = (id: string): void => {
-  const operation = getOperationDetails(docs, id)
+const setOperationDetails = (id: string, version: string): void => {
+  const operation = getOperationDetails(version, id, resourceDocs)
   description.value = operation.description
   summary.value = operation.summary
 }
@@ -111,13 +115,15 @@ const showNotification = (message: string, type: string): void => {
 
 onMounted(async () => {
   routeId = route.params.id
-  setOperationDetails(routeId)
+  const version = route.query.version ? route.query.version : configVersion
+  setOperationDetails(routeId, version)
   setPager(routeId)
   await tagFavoriteButton(routeId)
 })
 onBeforeRouteUpdate(async (to) => {
   routeId = to.params.id
-  setOperationDetails(routeId)
+  const version = route.query.version ? route.query.version : configVersion
+  setOperationDetails(routeId, version)
   setPager(routeId)
   await tagFavoriteButton(routeId)
 })

src/components/HeaderNav.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, watchEffect, onMounted } from 'vue'
+import { ref, inject, watchEffect, onMounted } from 'vue'
 import { ArrowDown } from '@element-plus/icons-vue'
 import { useRoute, useRouter } from 'vue-router'
 import { getCurrentUser } from '../obp'
+import { getOBPAPIVersions } from '../obp/api-version'
 import {
   logo as logoSource,
   headerLinksColor,
@@ -15,7 +16,8 @@ const router = useRouter()
 const obpApiHost = ref(import.meta.env.VITE_OBP_API_HOST)
 const obpApiManagerHost = ref(import.meta.env.VITE_OBP_API_MANAGER_HOST)
 const loginUsername = ref('')
-const logOffUrl = ref('')
+const logoffurl = ref('')
+const obpApiVersions = ref(inject('OBP-APIActiveVersions')!)
 const isShowLoginButton = ref(true)
 const isShowLogOffButton = ref(false)
 const logo = ref(logoSource)
@@ -41,7 +43,11 @@ const setActive = (target) => {
 }
 
 const handleMore = (command: string) => {
-  router.push({ name: 'message-docs', params: { id: command } })
+  if (command.includes('_')) {
+    router.push({ name: 'message-docs', params: { id: command } })
+  } else {
+    router.replace({ path: '/operationid', query: { version: command } })
+  }
 }
 
 onMounted(async () => {
@@ -98,6 +104,9 @@ watchEffect(() => {
           </span>
           <template #dropdown>
             <el-dropdown-menu>
+              <el-dropdown-item v-for="value in obpApiVersions" :command="value" key="value">{{
+                value
+              }}</el-dropdown-item>
               <el-dropdown-item command="akka_vDec2018" key="akka_vDec2018"
                 >Message Docs for: Akka</el-dropdown-item
               >

src/components/Preview.vue

@@ -3,9 +3,11 @@ import { ref, reactive, inject, onBeforeMount } from 'vue'
 import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 import { getOperationDetails } from '../obp/resource-docs'
 import type { ElNotification, FormInstance } from 'element-plus'
-import { get, create, update, discard, createEntitlement, getCurrentUser } from '../obp'
+import { version, get, create, update, discard, createEntitlement, getCurrentUser } from '../obp'
+import { getGroupedResourceDocs } from '../obp/resource-docs'
 
 const elMessageDuration = 5500
+const configVersion = 'OBP' + version
 const url = ref('')
 const roleName = ref('')
 const method = ref('')
@@ -23,7 +25,8 @@ const showPossibleErrors = ref(true)
 const showConnectorMethods = ref(true)
 const isUserLogon = ref(true)
 const type = ref('')
-const docs = inject('OBP-ResourceDocs')
+const resourceDocs = inject('OBP-ResourceDocs')
+const docs = getGroupedResourceDocs(configVersion, resourceDocs)
 const footNote = ref({
   operationId: '',
   version: '',
@@ -37,8 +40,8 @@ const requestForm = reactive({ url: '' })
 const roleFormRef = reactive<FormInstance>({})
 const roleForm = reactive({})
 
-const setOperationDetails = (id: string): void => {
-  const operation = getOperationDetails(docs, id)
+const setOperationDetails = (id: string, version: string): void => {
+  const operation = getOperationDetails(version, id, resourceDocs)
   url.value = operation.specified_url
   method.value = operation.request_verb
   exampleRequestBody.value = JSON.stringify(operation.example_request_body)
@@ -160,14 +163,16 @@ const submitEntitlement = async () => {
 }
 onBeforeMount(async () => {
   const route = useRoute()
-  setOperationDetails(route.params.id)
+  const version = route.query.version ? route.query.version : configVersion
+  setOperationDetails(route.params.id, version)
 
   const currentUser = await getCurrentUser()
   isUserLogon.value = currentUser.username
   setRoleForm()
 })
 onBeforeRouteUpdate((to) => {
-  setOperationDetails(to.params.id)
+  const version = to.query.version ? to.query.version : configVersion
+  setOperationDetails(to.params.id, version)
   responseHeaderTitle.value = 'TYPICAL SUCCESSFUL RESPONSE'
   setRoleForm()
 })

src/components/SearchNav.vue

@@ -1,11 +1,12 @@
 <script lang="ts">
-import { reactive, ref, onBeforeMount, onMounted, inject } from 'vue'
+import { reactive, ref, watch, onBeforeMount, onMounted, inject } from 'vue'
 import { Search, Star } from '@element-plus/icons-vue'
 import { useRoute } from 'vue-router'
-import { getMyAPICollections, getMyAPICollectionsEndpoint } from '../obp'
+import { version, getMyAPICollections, getMyAPICollectionsEndpoint } from '../obp'
+import { getGroupedResourceDocs } from '../obp/resource-docs'
 import { searchLinksColor as searchLinksColorSetting } from '../obp/style-setting'
-
 const operationIdTitle = {}
+const resourceDocs = ref({})
 const docs = ref({})
 const groups = ref({})
 const sortedKeys = ref([])
@@ -51,8 +52,10 @@ export const initializeAPICollections = async () => {
 
 <script setup lang="ts">
 const route = useRoute()
+let selectedVersion = 'OBP' + version
 onBeforeMount(async () => {
-  docs.value = inject('OBP-GroupedResourceDocs')!
+  resourceDocs.value = inject('OBP-ResourceDocs')!
+  docs.value = getGroupedResourceDocs(selectedVersion, resourceDocs.value)
   groups.value = JSON.parse(JSON.stringify(docs.value))
   activeKeys.value = Object.keys(groups.value)
   sortedKeys.value = activeKeys.value.sort()
@@ -61,6 +64,23 @@ onBeforeMount(async () => {
 })
 
 onMounted(() => {
+  routeToFirstAPI()
+})
+
+watch(
+  () => route.query.version,
+  async (version) => {
+    selectedVersion = version
+    docs.value = getGroupedResourceDocs(version, resourceDocs.value)
+    groups.value = JSON.parse(JSON.stringify(docs.value))
+    activeKeys.value = Object.keys(groups.value)
+    sortedKeys.value = activeKeys.value.sort()
+    await initializeAPICollections()
+    routeToFirstAPI()
+  }
+)
+
+const routeToFirstAPI = () => {
   let element
   const elements = document.getElementsByClassName('api-router-link')
   const id = route.params.id
@@ -75,7 +95,7 @@ onMounted(() => {
   } else {
     elements.item(0).click()
   }
-})
+}
 
 const sortLinks = (items: any) => {
   const uniqueLinks = {}
@@ -179,7 +199,7 @@ const searchEvent = (value) => {
             active-class="active-api-router-link"
             class="api-router-link"
             :id="value"
-            :to="{ name: 'api', params: { id: value } }"
+            :to="{ name: 'api', params: { id: value }, query: { version: selectedVersion } }"
             >{{ key }}</RouterLink
           >
         </div>

src/main.ts

@@ -13,7 +13,7 @@ import {
   cacheDoc as cacheResourceDocsDoc
 } from './obp/resource-docs'
 import { cache as cacheMessageDocs, cacheDoc as cacheMessageDocsDoc } from './obp/message-docs'
-import { getMyAPICollections, getMyAPICollectionsEndpoint } from './obp'
+import { version as configVersion, getMyAPICollections, getMyAPICollectionsEndpoint } from './obp'
 import { getOBPGlossary } from './obp/glossary'
 
 import 'element-plus/dist/index.css'
@@ -29,7 +29,6 @@ import '@fontsource/roboto/700.css'
   const resourceDocsCacheResponse = await resourceDocsCache.match('/operationid')
   const messageDocsCache = await caches.open('obp-message-docs-cache')
   const messageDocsCacheResponse = await resourceDocsCache.match('/message-docs')
-
   const resourceDocs = await cacheResourceDocs(resourceDocsCache, resourceDocsCacheResponse, worker)
   const messageDocs = await cacheMessageDocs(messageDocsCache, messageDocsCacheResponse, worker)
 
@@ -43,9 +42,10 @@ import '@fontsource/roboto/700.css'
       await cacheMessageDocsDoc(messageDocsCache)
     }
   }
-  const groupedDocs = await getGroupedResourceDocs(resourceDocs)
+  const groupedDocs = getGroupedResourceDocs('OBP' + configVersion, resourceDocs)
 
   app.provide('OBP-ResourceDocs', resourceDocs)
+  app.provide('OBP-APIActiveVersions', Object.keys(resourceDocs).sort())
   app.provide('OBP-GroupedResourceDocs', groupedDocs)
   app.provide('OBP-GroupedMessageDocs', messageDocs)
   app.provide('OBP-API-Host', import.meta.env.VITE_OBP_API_HOST)

src/obp/message-docs.ts

@@ -1,12 +1,4 @@
-import { Any, GetAny, Version, API, get } from 'obp-typescript'
-import type { APIClientConfig } from 'obp-typescript'
-import { version } from '../obp'
-
-const clientConfig: APIClientConfig = {
-  baseUri: import.meta.env.VITE_OBP_API_HOST,
-  version: version as Version,
-  withFixedVersion: true
-}
+import { version, get } from '../obp'
 
 export const connectors = [
   'kafka_vSept2018',
@@ -17,10 +9,10 @@ export const connectors = [
 
 // Get Message Docs
 export async function getOBPMessageDocs(item: string): Promise<any> {
-  return await get<API.Any>(clientConfig, Any)(GetAny)(`/message-docs/${item}`)
+  return await get(`obp/${version}/message-docs/${item}`)
 }
 
-export async function getGroupedMessageDocs(docs: any): Promise<any> {
+export function getGroupedMessageDocs(docs: any): Promise<any> {
   return docs.message_docs.reduce((values: any, doc: any) => {
     const tag = doc.adapter_implementation.group.replace('-', '').trim()
     ;(values[tag] = values[tag] || []).push(doc)
@@ -32,7 +24,7 @@ export async function cacheDoc(messageDocsCache: any): Promise<any> {
   const messageDocs = await connectors.reduce(async (agroup: any, connector: any) => {
     const group = await agroup
     const docs = await getOBPMessageDocs(connector)
-    group[connector] = await getGroupedMessageDocs(docs)
+    group[connector] = getGroupedMessageDocs(docs)
     return group
   }, Promise.resolve({}))
   await messageDocsCache.put('/message-docs', new Response(JSON.stringify(messageDocs)))

src/obp/resource-docs.ts

@@ -1,33 +1,41 @@
-import { Any, GetAny, Version, API, get } from 'obp-typescript'
-import type { APIClientConfig } from 'obp-typescript'
-import { version } from '../obp'
-
-const clientConfig: APIClientConfig = {
-  baseUri: import.meta.env.VITE_OBP_API_HOST,
-  version: Version.v510,
-  withFixedVersion: true
-}
+import { get, version as configVersion } from '../obp'
+import { getOBPAPIVersions } from '../obp/api-version'
 
 // Get Resource Docs
-export async function getOBPResourceDocs(): Promise<any> {
-  return await get<API.Any>(clientConfig, Any)(GetAny)(`/resource-docs/${version}/obp`)
+export async function getOBPResourceDocs(version: string): Promise<any> {
+  return await get(`/obp/${configVersion}/resource-docs/${version}/obp`)
 }
 
-export async function getGroupedResourceDocs(docs: any): Promise<any> {
-  return docs.resource_docs.reduce((values: any, doc: any) => {
+export function getGroupedResourceDocs(version: string, docs: any): Promise<any> {
+  return docs[version].resource_docs.reduce((values: any, doc: any) => {
     const tag = doc.tags[0]
     ;(values[tag] = values[tag] || []).push(doc)
     return values
   }, {})
 }
 
-export function getOperationDetails(docs: any, operation_id: string): any {
-  return docs.resource_docs.filter((doc: any) => doc.operation_id === operation_id)[0]
+export function getOperationDetails(version: string, operation_id: string, docs: any): any {
+  return docs[version].resource_docs.filter((doc: any) => doc.operation_id === operation_id)[0]
 }
 
 export async function cacheDoc(resourceDocsCache: any): Promise<any> {
-  const resourceDocs = await getOBPResourceDocs()
-  await resourceDocsCache.put('/operationid', new Response(JSON.stringify(resourceDocs)))
+  const apiVersions = await getOBPAPIVersions()
+  if (apiVersions) {
+    const scannedAPIVersions = apiVersions.scanned_api_versions
+    const resourceDocsMapping: any = {}
+    for (const { urlPrefix, API_VERSION } of scannedAPIVersions) {
+      if (urlPrefix) {
+        const version = `${urlPrefix.toUpperCase()}${API_VERSION}`
+        const resourceDocs = await getOBPResourceDocs(version)
+        if (version && Object.keys(resourceDocs).includes('resource_docs'))
+          resourceDocsMapping[version] = resourceDocs
+      }
+    }
+    await resourceDocsCache.put('/operationid', new Response(JSON.stringify(resourceDocsMapping)))
+  } else {
+    const resourceDocs = { ['OBP' + configVersion]: await getOBPResourceDocs(configVersion) }
+    await resourceDocsCache.put('/operationid', new Response(JSON.stringify(resourceDocs)))
+  }
 }
 
 export async function cache(
@@ -40,16 +48,16 @@ export async function cache(
     try {
       resourceDocs = await resourceDocsCacheResponse.json()
       if (!resourceDocs) {
-        resourceDocs = await cacheDocs(resourceDocsCache)
+        resourceDocs = await cacheDoc(resourceDocsCache)
       }
     } catch (err) {
       console.warn(err)
       //If cache docs is malformed update with the latest resource docs.
-      resourceDocs = await cacheDocs(resourceDocsCache)
+      resourceDocs = await cacheDoc(resourceDocsCache)
     }
     worker.postMessage('update-resource-docs')
   } else {
-    resourceDocs = await cacheDocs(resourceDocsCache)
+    resourceDocs = await cacheDoc(resourceDocsCache)
   }
   return resourceDocs
 }