From 24732eb3739482f8eeec6758085a5555ac9459dd Mon Sep 17 00:00:00 2001
From: Xiaoyan Rao <270668624@qq.com>
Date: Thu, 4 Jan 2024 09:55:49 +0800
Subject: [PATCH] (backport to 3.4.x)fix(kconfig): remove kong version from
 kconfig.js-FTI-5557 (#146)

* fix(kconfig): remove kong version from kconfig.js

* fix(kconfig): retrieve edition from info instead of from kconfig.js
---
 package.json                                |  1 +
 src/components/MakeAWish.vue                |  4 +-
 src/composables/useDetailGeneralConfig.ts   | 10 ++--
 src/composables/useDocsLink.ts              | 15 +++--
 src/composables/useFormGeneralConfig.ts     | 10 ++--
 src/composables/useListGeneralConfig.ts     | 16 ++---
 src/config.ts                               |  8 ---
 src/pages/consumers/ConsumerCredentials.vue |  5 +-
 src/pages/overview/Overview.vue             | 19 +++---
 src/services/apiService.ts                  | 65 +++++++++++++++++++++
 src/stores/info.ts                          | 63 ++++++++++++++++++++
 src/stores/types.ts                         | 33 +++++++++++
 yarn.lock                                   | 13 +++++
 13 files changed, 224 insertions(+), 38 deletions(-)
 create mode 100644 src/services/apiService.ts
 create mode 100644 src/stores/info.ts
 create mode 100644 src/stores/types.ts

diff --git a/package.json b/package.json
index 83b36be6..6daa89a8 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "bmp-js": "^0.1.0",
     "lodash.clonedeep": "^4.5.0",
     "marked": "^5.1.0",
+    "pinia": "^2.1.7",
     "vue": "^3.2.47",
     "vue-router": "^4.2.2"
   },
diff --git a/src/components/MakeAWish.vue b/src/components/MakeAWish.vue
index bd704c5b..b2a6b4ad 100644
--- a/src/components/MakeAWish.vue
+++ b/src/components/MakeAWish.vue
@@ -16,11 +16,13 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from '@/composables/useI18n'
+import { useInfoStore } from '@/stores/info'
 
 const route = useRoute()
 const { t } = useI18n()
+const infoStore = useInfoStore()
 
-const mailToUrl = computed(() => `mailto:wish@konghq.com?subject=${t('wish.subject', { title: `${route.meta.title} | Kong Manager OSS` })}`)
+const mailToUrl = computed(() => `mailto:wish@konghq.com?subject=${t('wish.subject', { title: `${route.meta.title} | Kong Manager OSS@${infoStore.kongVersion}` })}`)
 </script>
 
 <style scoped lang="scss">
diff --git a/src/composables/useDetailGeneralConfig.ts b/src/composables/useDetailGeneralConfig.ts
index f6887318..736a7919 100644
--- a/src/composables/useDetailGeneralConfig.ts
+++ b/src/composables/useDetailGeneralConfig.ts
@@ -1,16 +1,18 @@
 import { reactive } from 'vue'
 import { config } from 'config'
+import { useInfoStore } from '@/stores/info'
 import type { KongManagerBaseEntityConfig } from '@kong-ui/entities-shared'
-import { useAdminApiUrl } from './useAdminApiUrl'
+
+const infoStore = useInfoStore()
 
 export const useDetailGeneralConfig = () => {
   return reactive({
     app: 'kongManager' as const,
     workspace: '',
     gatewayInfo: {
-      edition: config.GATEWAY_EDITION,
-      version: config.GATEWAY_VERSION,
+      edition: infoStore.kongEdition,
+      version: infoStore.kongVersion,
     },
-    apiBaseUrl: useAdminApiUrl(),
+    apiBaseUrl: config.ADMIN_API_URL,
   } as Pick<KongManagerBaseEntityConfig, 'app' | 'workspace' | 'gatewayInfo' | 'apiBaseUrl'>)
 }
diff --git a/src/composables/useDocsLink.ts b/src/composables/useDocsLink.ts
index ff374507..862d40c6 100644
--- a/src/composables/useDocsLink.ts
+++ b/src/composables/useDocsLink.ts
@@ -1,22 +1,27 @@
 import { formatVersion } from '@/utils'
-import { config, type GatewayEdition } from 'config'
+import { type GatewayEdition } from 'config'
 import { EntityType } from '@/types'
+import { computed } from 'vue'
+import { useInfoStore } from '@/stores/info'
+
+const infoStore = useInfoStore()
+const kongVersion = computed(() => infoStore.kongVersion)
 
 const getVersionInPath = (edition: GatewayEdition) => {
-  if (!config.GATEWAY_VERSION) {
+  if (!kongVersion.value) {
     return 'latest'
   }
 
   return edition === 'enterprise'
     // For Enterprise, the version has a pattern of <major>.<minor>.0.x where the 3rd digit
     // will always be 0 regardless of the actual patch version
-    ? `${formatVersion(config.GATEWAY_VERSION)}.0.x`
+    ? `${formatVersion(kongVersion.value)}.0.x`
     // For OSS, the version has a pattern of <major>.<minor>.x
-    : `${formatVersion(config.GATEWAY_VERSION)}.x`
+    : `${formatVersion(kongVersion.value)}.x`
 }
 
 export const useDocsLink = (entityType: EntityType) => {
-  const edition = config.GATEWAY_EDITION ?? 'community'
+  const edition = infoStore.kongEdition ?? 'community'
   const versionInPath = getVersionInPath(edition)
   const docsBase = `https://docs.konghq.com/gateway/api/admin-${edition === 'enterprise' ? 'ee' : 'oss'}/${versionInPath}/#/`
 
diff --git a/src/composables/useFormGeneralConfig.ts b/src/composables/useFormGeneralConfig.ts
index e4288a72..cd7e55d5 100644
--- a/src/composables/useFormGeneralConfig.ts
+++ b/src/composables/useFormGeneralConfig.ts
@@ -1,16 +1,18 @@
 import { reactive } from 'vue'
 import { config } from 'config'
+import { useInfoStore } from '@/stores/info'
 import type { KongManagerBaseFormConfig } from '@kong-ui/entities-shared'
-import { useAdminApiUrl } from './useAdminApiUrl'
+
+const infoStore = useInfoStore()
 
 export const useFormGeneralConfig = () => {
   return reactive({
     app: 'kongManager' as const,
     workspace: '',
     gatewayInfo: {
-      edition: config.GATEWAY_EDITION,
-      version: config.GATEWAY_VERSION,
+      edition: infoStore.kongEdition,
+      version: infoStore.kongVersion,
     },
-    apiBaseUrl: useAdminApiUrl(),
+    apiBaseUrl: config.ADMIN_API_URL,
   } as Pick<KongManagerBaseFormConfig, 'app' | 'workspace' | 'gatewayInfo' | 'apiBaseUrl'>)
 }
diff --git a/src/composables/useListGeneralConfig.ts b/src/composables/useListGeneralConfig.ts
index 5059f745..82d289a8 100644
--- a/src/composables/useListGeneralConfig.ts
+++ b/src/composables/useListGeneralConfig.ts
@@ -1,19 +1,21 @@
 import { reactive } from 'vue'
 import { config } from 'config'
+import { useInfoStore } from '@/stores/info'
 import type { KongManagerBaseTableConfig } from '@kong-ui/entities-shared'
-import { useAdminApiUrl } from './useAdminApiUrl'
+
+const infoStore = useInfoStore()
 
 export const useListGeneralConfig = () => {
   return reactive({
     app: 'kongManager' as const,
     workspace: '',
     gatewayInfo: {
-      edition: config.GATEWAY_EDITION,
-      version: config.GATEWAY_VERSION,
+      edition: infoStore.kongEdition,
+      version: infoStore.kongVersion,
     },
-    apiBaseUrl: useAdminApiUrl(),
+    apiBaseUrl: config.ADMIN_API_URL,
     // Kong Gateway OSS only supports exact match and does not support sorting
-    isExactMatch: true,
-    disableSorting: true,
-  } as Pick<KongManagerBaseTableConfig, 'app' | 'workspace' | 'gatewayInfo' | 'isExactMatch' | 'apiBaseUrl' | 'disableSorting'>)
+    isExactMatch: infoStore.kongEdition === 'community',
+    disableSorting: infoStore.kongEdition === 'community',
+  }) as Pick<KongManagerBaseTableConfig, 'app' | 'workspace' | 'gatewayInfo' | 'isExactMatch' | 'apiBaseUrl' | 'disableSorting'>
 }
diff --git a/src/config.ts b/src/config.ts
index 786af821..2bb57301 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -52,14 +52,6 @@ export const config = {
     return `${window.location.protocol}//${window.location.hostname}:${port}`
   },
 
-  get GATEWAY_VERSION () {
-    return getConfig<string | null>('KONG_VERSION', null)
-  },
-
-  get GATEWAY_EDITION () {
-    return getConfig<GatewayEdition | null>('KONG_EDITION', null)
-  },
-
   get ANONYMOUS_REPORTS () {
     return getConfig('ANONYMOUS_REPORTS', false)
   },
diff --git a/src/pages/consumers/ConsumerCredentials.vue b/src/pages/consumers/ConsumerCredentials.vue
index 39438ed4..ee72700f 100644
--- a/src/pages/consumers/ConsumerCredentials.vue
+++ b/src/pages/consumers/ConsumerCredentials.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { computed, onBeforeMount, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { config } from 'config'
+import { useInfoStore } from '@/stores/info'
 import { pluginMeta } from '@/pages/plugins/PluginMeta'
 import { useAxios } from '@/composables/useAxios'
 import { useAdminApiUrl } from '@/composables/useAdminApiUrl'
@@ -36,6 +36,7 @@ const router = useRouter()
 const { axiosInstance } = useAxios()
 const adminApiUrl = useAdminApiUrl()
 const { t } = useI18n()
+const infoStore = useInfoStore()
 
 const enabledPlugins = ref<string[]>([])
 const enabledPluginsFetched = ref(false)
@@ -46,7 +47,7 @@ const credentialPlugins = [
   'hmac-auth',
   'jwt',
   'key-auth',
-  ...(config.GATEWAY_EDITION === 'community' ? [] : ['key-auth-enc']),
+  ...(infoStore.kongEdition === 'community' ? [] : ['key-auth-enc']),
   'oauth2',
 ]
   .filter(plugin => !!pluginMeta[plugin])
diff --git a/src/pages/overview/Overview.vue b/src/pages/overview/Overview.vue
index 2940161e..025db5db 100644
--- a/src/pages/overview/Overview.vue
+++ b/src/pages/overview/Overview.vue
@@ -59,12 +59,12 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref, computed } from 'vue'
-import { config as gatewayConfig } from 'config'
+import { onBeforeMount, computed } from 'vue'
 import KonnectCTA from '@/components/KonnectCTA.vue'
 import { useAxios } from '@/composables/useAxios'
 import { useAdminApiUrl } from '@/composables/useAdminApiUrl'
 import { useI18n } from '@/composables/useI18n'
+import { useInfoStore } from '@/stores/info'
 import { formatVersion } from '@/utils'
 
 defineOptions({
@@ -74,10 +74,15 @@ defineOptions({
 const { axiosInstance } = useAxios()
 const adminApiUrl = useAdminApiUrl()
 const { t } = useI18n()
+const infoStore = useInfoStore()
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const config = ref<Record<string, any>>({})
-const version = computed(() => gatewayConfig.GATEWAY_VERSION ? `${formatVersion(gatewayConfig.GATEWAY_VERSION)}.x` : 'latest')
+const config = computed(() => ({
+  ...infoStore.infoConfig,
+  kongVersion: infoStore.kongVersion,
+  kongEdition: infoStore.kongEdition,
+  hostname: infoStore.info.hostname,
+}))
+const version = computed(() => config.value.kongVersion ? `${formatVersion(config.value.kongVersion)}.x` : 'latest')
 const info = computed(() => {
   return [
     {
@@ -85,11 +90,11 @@ const info = computed(() => {
       items: [
         {
           label: t('overview.info.gateway.edition'),
-          value: gatewayConfig.GATEWAY_EDITION,
+          value: config.value.kongEdition,
         },
         {
           label: t('overview.info.gateway.version'),
-          value: gatewayConfig.GATEWAY_VERSION,
+          value: config.value.kongVersion,
         },
       ],
     },
diff --git a/src/services/apiService.ts b/src/services/apiService.ts
new file mode 100644
index 00000000..e4c054ad
--- /dev/null
+++ b/src/services/apiService.ts
@@ -0,0 +1,65 @@
+import axios, {
+  type AxiosInstance,
+  type AxiosRequestConfig,
+} from 'axios'
+import { config } from 'config'
+
+const adminApiUrl = config.ADMIN_API_URL
+
+class ApiService {
+  instance: AxiosInstance
+
+  constructor () {
+    this.instance = axios.create({
+      timeout: 30000,
+    })
+  }
+
+  getInfo () {
+    return this.instance.get(`${adminApiUrl}`)
+  }
+
+  // entity-specific methods
+  findAll (entity: string, params: Pick<AxiosRequestConfig, 'params'> = {}) {
+    return this.instance.get(`${adminApiUrl}/${entity}`, { params })
+  }
+
+  findRecord (entity: string, id: string) {
+    return this.instance.get(`${adminApiUrl}/${entity}/${id}`)
+  }
+
+  createRecord (entity: string, data: Record<string, unknown>) {
+    return this.instance.post(`${adminApiUrl}/${entity}`, data)
+  }
+
+  updateRecord (entity: string, id: string, data: Record<string, unknown>) {
+    return this.instance.patch(`${adminApiUrl}/${entity}/${id}`, data)
+  }
+
+  deleteRecord (entity: string, id: string) {
+    return this.instance.delete(`${adminApiUrl}/${entity}/${id}`)
+  }
+
+  // generic methods
+  get (url = '', config: AxiosRequestConfig = {}) {
+    return this.instance.get(`${adminApiUrl}/${url}`, config)
+  }
+
+  post (url = '', data?: Record<string, unknown>, config: AxiosRequestConfig = {}) {
+    return this.instance.post(`${adminApiUrl}/${url}`, data, config)
+  }
+
+  put (url = '', data?: Record<string, unknown>, config: AxiosRequestConfig = {}) {
+    return this.instance.put(`${adminApiUrl}/${url}`, data, config)
+  }
+
+  patch (url = '', data?: Record<string, unknown>, config: AxiosRequestConfig = {}) {
+    return this.instance.patch(`${adminApiUrl}/${url}`, data, config)
+  }
+
+  delete (url = '', config: AxiosRequestConfig = {}) {
+    return this.instance.delete(`${adminApiUrl}/${url}`, config)
+  }
+}
+
+export const apiService = new ApiService()
diff --git a/src/stores/info.ts b/src/stores/info.ts
new file mode 100644
index 00000000..49cbb279
--- /dev/null
+++ b/src/stores/info.ts
@@ -0,0 +1,63 @@
+import { apiService } from '@/services/apiService'
+import { defineStore } from 'pinia'
+import type { AnyObject, Info } from './types'
+
+interface State {
+  info: Info;
+}
+
+export const useInfoStore = defineStore('info', {
+  state: (): State => ({
+    info: {},
+  }),
+
+  getters: {
+    kongVersion: state => state.info.version,
+    kongEdition: state => state.info.edition,
+    infoConfig: (state) => {
+      const config = state.info.configuration || {}
+      if (!config?.node) {
+        config.node = {}
+        config.node.version = state.info.version
+        config.node.edition = state.info.edition
+        config.node.tagline = state.info.tagline
+        config.node.hostname = state.info.hostname
+        config.node.lua_version = state.info.lua_version
+      }
+
+      return config
+    },
+    isHybridMode: (state) => {
+      return (state.info.configuration?.role ?? 'traditional') !== 'traditional'
+    },
+    plugins: (state) => ({
+      enabledInCluster: state.info.plugins?.enabled_in_cluster ?? [],
+      availableOnServer: state.info.plugins?.available_on_server ?? [],
+    }),
+  },
+
+  actions: {
+    async getInfo (payload: AnyObject = { silent: true, force: false }) {
+      const { silent = true, force = false } = payload
+
+      // Return the info if it's already loaded unless force is true
+      if (this.info?.version && !force) {
+        return this.info
+      }
+
+      return apiService.getInfo()
+        .then((info) => {
+          this.info = info.data
+
+          return info.data
+        })
+        .catch(err => {
+          if (silent) {
+            return
+          }
+
+          throw err
+        })
+    },
+  },
+})
diff --git a/src/stores/types.ts b/src/stores/types.ts
new file mode 100644
index 00000000..1165e23d
--- /dev/null
+++ b/src/stores/types.ts
@@ -0,0 +1,33 @@
+import type { GatewayEdition } from '@/config'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyObject = Record<string, any>
+
+export interface Info {
+  configuration?: {
+    database?: string
+    node?: {
+      hostname?: string
+      lua_version?: string
+      tagline?: string
+      version?: string
+      edition?: GatewayEdition
+    }
+    role?: 'traditional' | 'control_plane' | 'data_plane'
+    admin_listen?: string[]
+    admin_gui_listeners?: Array<{ port: number, ssl?: boolean }>
+    proxy_listeners?: Array<{ port: number, ssl?: boolean }>
+    pg_user?: string
+    pg_host?: string
+    pg_port?: number
+    pg_ssl?: boolean
+  } & AnyObject
+  license?: AnyObject
+  version?: string,
+  edition?: GatewayEdition,
+  timers?: AnyObject
+  plugins?: AnyObject
+  hostname?: string
+  tagline?: string
+  lua_version?: string
+}
diff --git a/yarn.lock b/yarn.lock
index 47792021..6868f988 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2773,6 +2773,14 @@ pidtree@^0.6.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
   integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
 
+pinia@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc"
+  integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
 playwright-core@1.36.2:
   version "1.36.2"
   resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.36.2.tgz#32382f2d96764c24c65a86ea336cf79721c2e50e"
@@ -3317,6 +3325,11 @@ vite@^4.3.9:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-demi@>=0.14.5:
+  version "0.14.6"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
+  integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+
 vue-draggable-next@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/vue-draggable-next/-/vue-draggable-next-2.2.0.tgz#cdefc345f950d64afb013436bf3111c7d87239f3"