feat(plugin): support ordering

package.json

@@ -14,6 +14,7 @@
     "stylelint": "stylelint --allow-empty-input 'src/**/*.{css,scss,sass,less,styl,vue}'",
     "postinstall": "husky install"
   },
+  "license": "Apache-2.0",
   "lint-staged": {
     "src/**/*.{ts,js,vue}": "eslint --fix",
     "src/**/*.{css,scss,sass,less,styl,vue}": "stylelint --allow-empty-input --fix 'src/**/*.{css,scss,sass,less,styl,vue}'"

src/composables/useDocsLink.ts

@@ -2,7 +2,7 @@ import { computed } from 'vue'
 import { formatVersion } from '@/utils'
 import { config } from 'config'
 
-export const useDocsLink = (entity: string) => {
+export const useDocsLink = (entity?: string) => {
   const version = computed(() => {
     if (!config.GATEWAY_VERSION) {
       return 'latest'
@@ -11,15 +11,15 @@ export const useDocsLink = (entity: string) => {
     return `${formatVersion(config.GATEWAY_VERSION)}.x`
   })
 
-  const docsBase = computed(() => `https://docs.konghq.com/gateway/${version.value}/admin-api`)
+  const docsBase = computed(() => `https://docs.konghq.com/gateway/${version.value}`)
   const docsLink = computed(() => {
     switch (entity) {
       case 'key-set':
-        return `${docsBase.value}/#key-sets-entity`
+        return `${docsBase.value}/admin-api/#key-sets-entity`
       default:
-        return `${docsBase.value}/#${entity}-object`
+        return `${docsBase.value}/admin-api/#${entity}-object`
     }
   })
 
-  return docsLink
+  return { docsBase, docsLink }
 }

src/locales/en.json

@@ -6,7 +6,9 @@
       "back": "Back",
       "edit": "Edit",
       "save": "Save",
-      "create": "Create"
+      "create": "Create",
+      "update": "Update",
+      "cancel": "Cancel"
     },
     "learn.more": "Learn more"
   },
@@ -123,7 +125,21 @@
       "disabled": "Plugin {name} is successfully disabled!",
       "list.title": "Plugins",
       "create.form.title": "New Plugin",
-      "edit.form.title": "Edit Plugin"
+      "edit.form.title": "Edit Plugin",
+      "ordering.title": "Ordering",
+      "ordering.disabled": "Consumer-scoped plugins don't support dynamic ordering",
+      "doc.dynamic": "Dynamic plugin ordering - {docLink}",
+      "doc.default": "Default plugin execution order - {docLink}",
+      "empty.ordering.title": "No dynamic ordering applied",
+      "empty.ordering.cta.text": "Add ordering to override the static priority for Plugin execution",
+      "empty.ordering.cta.button": "Add ordering",
+      "ordering.plugin.label": "Plugin {index}",
+      "ordering.add.plugin": "Add Plugin",
+      "ordering.before.label": "Before access",
+      "ordering.before.desc": "Dynamic plugin ordering for 'before.access' phase",
+      "ordering.after.label": "After access",
+      "ordering.after.desc": "Dynamic plugin ordering for 'after.access' phase",
+      "ordering.updated": "Plugin ordering successfully updated"
     },
     "upstream": {
       "description": "An Upstream represents a virtual hostname and can be used to load balance incoming requests over multiple Services.",

src/pages/ca-certificates/List.vue

@@ -38,7 +38,7 @@ defineOptions({
 const { createRedirectRouteQuery } = useListRedirect()
 const toaster = useToaster()
 const { t } = useI18n()
-const docsLink = useDocsLink('ca-certificate')
+const { docsLink } = useDocsLink('ca-certificate')
 
 const createRoute = computed(() => {
   return { name: 'ca-certificate-create' }
@@ -59,6 +59,8 @@ const caCertificateListConfig = reactive({
   createRoute,
   getViewRoute,
   getEditRoute,
+  // CA Certificates only support exact match for both CE and EE
+  isExactMatch: true,
 })
 
 const canCreate = async () => true

src/pages/certificates/List.vue

@@ -38,7 +38,7 @@ defineOptions({
 const { createRedirectRouteQuery } = useListRedirect()
 const toaster = useToaster()
 const { t } = useI18n()
-const docsLink = useDocsLink('certificate')
+const { docsLink } = useDocsLink('certificate')
 
 const createRoute = computed(() => {
   return { name: 'certificate-create' }
@@ -59,6 +59,8 @@ const certificateListConfig = reactive({
   createRoute,
   getViewRoute,
   getEditRoute,
+  // Certificates only support exact match for both CE and EE
+  isExactMatch: true,
 })
 
 const canCreate = async () => true

src/pages/consumers/List.vue

@@ -39,7 +39,7 @@ defineOptions({
 const { createRedirectRouteQuery } = useListRedirect()
 const toaster = useToaster()
 const { t } = useI18n()
-const docsLink = useDocsLink('consumer')
+const { docsLink } = useDocsLink('consumer')
 
 const createRoute = computed(() => {
   return { name: 'consumer-create' }

src/pages/key-sets/List.vue

@@ -39,7 +39,7 @@ defineOptions({
 const { createRedirectRouteQuery } = useListRedirect()
 const toaster = useToaster()
 const { t } = useI18n()
-const docsLink = useDocsLink('key-set')
+const { docsLink } = useDocsLink('key-set')
 
 const filterSchema = computed<FilterSchema>(() => {
   return {

src/pages/keys/List.vue

@@ -45,7 +45,7 @@ const { createRedirectRouteQuery } = useListRedirect()
 const toaster = useToaster()
 const route = useRoute()
 const { t } = useI18n()
-const docsLink = useDocsLink('keys')
+const { docsLink } = useDocsLink('keys')
 
 const keySetId = computed(() => (route.params?.id ?? '') as string)
 const cacheIdentifier = computed(() => `routes-${keySetId.value}`)

src/pages/plugins/Detail.vue

@@ -21,7 +21,26 @@
       }"
     />
   </PageHeader>
+  <KTabs
+    v-if="isOrderingSupported"
+    :model-value="initialHash"
+    :tabs="tabs"
+    @changed="onTabChange"
+  >
+    <template #configuration>
+      <PluginConfigCard
+        :config="pluginDetailConfig"
+        :scoped-entity-type="entityType"
+        :scoped-entity-id="entityId"
+        @copy:success="onCopySuccess"
+      />
+    </template>
+    <template #ordering>
+      <router-view />
+    </template>
+  </KTabs>
   <PluginConfigCard
+    v-else
     :config="pluginDetailConfig"
     :scoped-entity-type="entityType"
     :scoped-entity-id="entityId"
@@ -35,13 +54,30 @@ import { useRoute } from 'vue-router'
 import { PluginConfigCard, PluginIcon } from '@kong-ui-public/entities-plugins'
 import { useDetailGeneralConfig } from '@/composables/useDetailGeneralConfig'
 import { useCopyEventHandlers } from '@/composables/useCopyEventHandlers'
+import { useGatewayFeatureSupported } from '@/composables/useGatewayFeatureSupported'
 import { useI18n } from '@/composables/useI18n'
+import { useTabs } from '@/composables/useTabs'
 import { pluginMeta } from '@/pages/plugins/PluginMeta'
 
 defineOptions({
   name: 'PluginDetail',
 })
 
+// Plugin ordering is supported in Kong Gateway Enterprise 3.0
+const isOrderingSupported = useGatewayFeatureSupported({
+  enterprise: ['3.0'],
+})
+const { kongponentTabs: tabs, initialHash, onTabChange } = useTabs([
+  {
+    title: 'Configuration',
+    route: { name: 'plugin-detail' },
+  },
+  {
+    title: 'Ordering',
+    route: { name: 'plugin-ordering' },
+  },
+])
+
 const route = useRoute()
 const { t } = useI18n()
 
@@ -54,7 +90,7 @@ const entityType = computed(() => {
 
   return `${(route.query?.entity_type as string).split('_')[0]}s`
 })
-const entityId = computed(() => route.query?.entity_id)
+const entityId = computed(() => (route.query?.entity_id ?? '') as string)
 
 const pluginDetailConfig = reactive({
   ...useDetailGeneralConfig(),

src/pages/plugins/List.vue

@@ -47,7 +47,7 @@ defineOptions({
 const { createRedirectRouteQuery } = useListRedirect()
 const toaster = useToaster()
 const { t } = useI18n()
-const docsLink = useDocsLink('plugin')
+const { docsLink } = useDocsLink('plugin')
 const route = useRoute()
 const cacheIdentifier = computed(() => `plugins-${route.params?.id}`)
 const entityType = computed(() => route.meta?.scopedIn as EntityType)
@@ -97,6 +97,20 @@ const getViewRoute = (plugin: Pick<EntityRow, 'id' | 'name'>) => {
   }
 }
 
+const getConfigureDynamicOrderingRoute = (plugin: Pick<EntityRow, 'id' | 'name'>) => {
+  return {
+    name: 'plugin-ordering',
+    params: {
+      id: plugin.id,
+      pluginType: plugin.name,
+    },
+    query: {
+      ...scopedQuery.value,
+      ...createRedirectRouteQuery(),
+    },
+  }
+}
+
 const getEditRoute = (plugin: EntityRow) => ({
   name: 'plugin-edit',
   params: {
@@ -130,7 +144,7 @@ const pluginListConfig = reactive({
   getViewRoute,
   getEditRoute,
   getScopedEntityViewRoute,
-  getConfigureDynamicOrderingRoute: getViewRoute,
+  getConfigureDynamicOrderingRoute,
   filterSchema,
 })