From f84c328e8c1148fe2fd40fb68b6bb61c355dedef Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Fri, 25 Oct 2024 14:55:50 +0800
Subject: [PATCH 1/4] fix(entities-plugins): filter plugin with select

---
 .../src/components/PluginList.vue                | 10 ++++++++++
 .../components/entity-filter/EntityFilter.vue    | 16 ++++++++++++++--
 .../entities-shared/src/types/entity-filter.ts   |  6 ++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
index 5dd3c78d73..9a8413fbb8 100644
--- a/packages/entities/entities-plugins/src/components/PluginList.vue
+++ b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -404,6 +404,15 @@ const fetcherBaseUrl = computed<string>(() => {
     .replace(/{entityId}/gi, props.config?.entityId || '')
 })
 
+// pluginMeta.pluginMeta is like:
+// { '<pluginSlug>': { id: '<pluginId>', name: '<pluginName>', ... } }
+// convert it to
+// [{ label: '<pluginName>', value: '<pluginId>' }]
+const plugins = Object.entries(pluginMetaData.pluginMetaData).map(([name, plugin]) => ({
+  label: plugin.name,
+  value: name,
+}))
+
 const filterQuery = ref<string>('')
 const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['config']>(() => {
   const isExactMatch = (props.config.app === 'konnect' || props.config.isExactMatch)
@@ -415,6 +424,7 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
         name: fields.name,
         id: { label: t('plugins.list.table_headers.id'), sortable: true },
       },
+      queryItems: plugins,
       placeholder: t(`search.placeholder.${props.config.app}`),
     } as ExactMatchFilterConfig
   }
diff --git a/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue b/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
index 8437a8bf4e..90d175a060 100644
--- a/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
+++ b/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
@@ -1,6 +1,7 @@
 <template>
   <template v-if="config.isExactMatch">
     <KInput
+      v-if="!config.queryItems"
       autocomplete="off"
       class="kong-ui-entity-filter-input"
       data-testid="search-input"
@@ -21,6 +22,17 @@
         />
       </template>
     </KInput>
+    <KSelect
+      v-else
+      class="kong-ui-entity-filter-input"
+      clearable
+      data-testid="search-input"
+      enable-filtering
+      :items="config.queryItems"
+      :model-value="modelValue"
+      :placeholder="config.placeholder"
+      @update:model-value="handleQueryUpdate"
+    />
   </template>
   <template v-else>
     <div class="kong-ui-entity-filter">
@@ -201,8 +213,8 @@ const toggleExpanded = (field: string) => {
   expandedFields.value.has(field) ? expandedFields.value.delete(field) : expandedFields.value.add(field)
 }
 
-const handleQueryUpdate = (query: string) => {
-  emit('update:modelValue', query)
+const handleQueryUpdate = (query: string | number | null) => {
+  emit('update:modelValue', String(query ?? ''))
 }
 
 const handleQueryClear = () => {
diff --git a/packages/entities/entities-shared/src/types/entity-filter.ts b/packages/entities/entities-shared/src/types/entity-filter.ts
index 3f6a2a286c..60af76ef56 100644
--- a/packages/entities/entities-shared/src/types/entity-filter.ts
+++ b/packages/entities/entities-shared/src/types/entity-filter.ts
@@ -1,3 +1,4 @@
+import type { SelectItem } from '@kong/kongponents/dist/types'
 import type { Field } from './index'
 
 /** Base filter configuration */
@@ -6,6 +7,10 @@ interface BaseFilterConfig {
   isExactMatch: boolean
 }
 
+interface QueryItem extends SelectItem {
+  value: string
+}
+
 /**
  * Exact match filter configuration
  * FIXME: "Exact match" here is no longer accurate, in reality it works as an indicator
@@ -13,6 +18,7 @@ interface BaseFilterConfig {
  */
 export interface ExactMatchFilterConfig extends BaseFilterConfig {
   isExactMatch: true
+  queryItems?: QueryItem[]
   /** Placeholder for the exact match filter input */
   placeholder: string
 }

From d4863fbfbc8f6ca8939f3f66cc32fb00a1fd033b Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Fri, 25 Oct 2024 15:31:47 +0800
Subject: [PATCH 2/4] fix(entities-plugins): should use deep selector

---
 .../entities/entities-plugins/src/components/PluginList.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
index 9a8413fbb8..4fb4f78234 100644
--- a/packages/entities/entities-plugins/src/components/PluginList.vue
+++ b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -786,7 +786,7 @@ onBeforeMount(async () => {
 .kong-ui-entities-plugins-list {
   width: 100%;
 
-  .kong-ui-entity-filter-input {
+  :deep(.kong-ui-entity-filter-input) {
     margin-right: $kui-space-50;
   }
 

From 3fa583c9cb9f37fd9d5b728c9cbcac92536e5b6b Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Wed, 30 Oct 2024 22:54:01 +0800
Subject: [PATCH 3/4] feat(entities-shared,entities-plugins): add eq match and
 filter after select behavior

---
 .../sandbox/pages/PluginListPage.vue          |   1 +
 .../src/components/PluginList.vue             |  33 +-
 .../src/components/PluginSelect.vue           | 257 ++--------------
 .../entities-plugins/src/composables/index.ts |   2 +
 .../src/composables/usePluginSelect.ts        | 281 ++++++++++++++++++
 .../components/entity-filter/EntityFilter.vue |  11 +-
 .../src/composables/useFetchUrlBuilder.ts     |   8 +-
 .../entities-shared/src/types/app-config.ts   |   2 +
 .../src/types/entity-filter.ts                |  11 +-
 9 files changed, 347 insertions(+), 259 deletions(-)
 create mode 100644 packages/entities/entities-plugins/src/composables/usePluginSelect.ts

diff --git a/packages/entities/entities-plugins/sandbox/pages/PluginListPage.vue b/packages/entities/entities-plugins/sandbox/pages/PluginListPage.vue
index def7bb2395..28252e0988 100644
--- a/packages/entities/entities-plugins/sandbox/pages/PluginListPage.vue
+++ b/packages/entities/entities-plugins/sandbox/pages/PluginListPage.vue
@@ -57,6 +57,7 @@ const konnectConfig = ref<KonnectPluginListConfig>({
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
   createRoute: { name: 'select-plugin' },
+  isEqMatch: true,
   getViewRoute: (plugin: EntityRow) => ({ name: 'view-plugin', params: { id: plugin.id, plugin: plugin.name } }),
   getEditRoute: (plugin: EntityRow) => ({ name: 'edit-plugin', params: { id: plugin.id, plugin: plugin.name } }),
   getScopedEntityViewRoute: (type: ViewRouteType, id: string) => ({ name: `view-${type}`, params: { id } }),
diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
index 4fb4f78234..d3f17d83fc 100644
--- a/packages/entities/entities-plugins/src/components/PluginList.vue
+++ b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -404,14 +404,24 @@ const fetcherBaseUrl = computed<string>(() => {
     .replace(/{entityId}/gi, props.config?.entityId || '')
 })
 
-// pluginMeta.pluginMeta is like:
-// { '<pluginSlug>': { id: '<pluginId>', name: '<pluginName>', ... } }
-// convert it to
-// [{ label: '<pluginName>', value: '<pluginId>' }]
-const plugins = Object.entries(pluginMetaData.pluginMetaData).map(([name, plugin]) => ({
-  label: plugin.name,
-  value: name,
-}))
+const { flattenPluginMap, filterPlugin } = composables.usePluginSelect({
+  config: {
+    apiBaseUrl: props.config.apiBaseUrl,
+    axiosRequestConfig: props.config.axiosRequestConfig,
+    entityId: props.config.entityId,
+    entityType: props.config.entityType,
+    ...props.config.app === 'konnect' ? {
+      app: 'konnect',
+      controlPlaneId: props.config.controlPlaneId,
+    } : {
+      app: 'kongManager',
+      workspace: props.config.workspace,
+    },
+  },
+  availableOnServer: true,
+  disabledPlugins: {},
+  ignoredPlugins: [],
+})
 
 const filterQuery = ref<string>('')
 const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['config']>(() => {
@@ -424,7 +434,12 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
         name: fields.name,
         id: { label: t('plugins.list.table_headers.id'), sortable: true },
       },
-      queryItems: plugins,
+      selectItems: Object.entries(flattenPluginMap.value).map(([name, plugin]) => {
+        return { value: name, label: plugin.name, plugin }
+      }),
+      selectFilterFunction: ({ query, items }) => {
+        return items.filter(({ plugin }) => filterPlugin(query, plugin))
+      },
       placeholder: t(`search.placeholder.${props.config.app}`),
     } as ExactMatchFilterConfig
   }
diff --git a/packages/entities/entities-plugins/src/components/PluginSelect.vue b/packages/entities/entities-plugins/src/components/PluginSelect.vue
index d6ad064ae0..0a7b478acc 100644
--- a/packages/entities/entities-plugins/src/components/PluginSelect.vue
+++ b/packages/entities/entities-plugins/src/components/PluginSelect.vue
@@ -102,7 +102,6 @@
               :plugin-list="filteredPlugins"
               @delete:success="(name: string) => $emit('delete-custom:success', name)"
               @plugin-clicked="(val: PluginType) => $emit('plugin-clicked', val)"
-              @revalidate="() => pluginsList = buildPluginList()"
             />
           </div>
         </template>
@@ -124,22 +123,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onBeforeMount, onMounted, type PropType } from 'vue'
+import { computed, ref, watch, onBeforeMount, type PropType, toRefs } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
-  PluginGroup,
-  PluginScope,
   type KongManagerPluginSelectConfig,
   type KonnectPluginSelectConfig,
   type PluginType,
   type DisabledPlugin,
-  type PluginCardList,
+  PluginGroup,
 } from '../types'
-import { useAxios, useHelpers, useErrors } from '@kong-ui-public/entities-shared'
 import composables from '../composables'
-import endpoints from '../plugins-endpoints'
 import PluginCustomGrid from './custom-plugins/PluginCustomGrid.vue'
 import PluginSelectGrid from './select/PluginSelectGrid.vue'
+import { usePluginSelect } from '../composables/usePluginSelect'
 
 const props = defineProps({
   /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
@@ -239,61 +235,31 @@ const emit = defineEmits<{
 const route = useRoute()
 const router = useRouter()
 const { i18n: { t } } = composables.useI18n()
-const { pluginMetaData } = composables.usePluginMetaData()
-const { getMessageFromError } = useErrors()
-const { sortAlpha, objectsAreEqual } = useHelpers()
 
 const filter = ref('')
-const isLoading = ref(true)
-const hasError = ref(false)
-const fetchErrorMessage = ref('')
-const availablePlugins = ref<string[]>([])
-const pluginsList = ref<PluginCardList>({})
-const existingEntityPlugins = ref<string[]>([])
-
-const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
-
-const flattenPluginMap = computed(() => {
-  if (!pluginsList.value) {
-    return {}
-  }
-
-  return Object.entries(pluginsList.value)
-    .filter(([group]) => group !== PluginGroup.CUSTOM_PLUGINS)
-    .reduce((m, [, plugins]) => {
-      for (const plugin of plugins) {
-        m[plugin.id] = plugin
-      }
-      return m
-    }, {} as Record<string, PluginType>)
-})
-
-const filteredPlugins = computed((): PluginCardList => {
-  if (!pluginsList.value) {
-    return {}
-  }
 
-  const query = filter.value.toLowerCase()
-  const results = JSON.parse(JSON.stringify(pluginsList.value))
-
-  for (const type in pluginsList.value) {
-    const matches = pluginsList.value[type as keyof PluginCardList]?.filter((plugin: PluginType) => plugin.name.toLowerCase().includes(query) || plugin.id.toLowerCase().includes(query) || plugin.group.toLowerCase().includes(query)) || []
-
-    if (!matches.length) {
-      delete results[type]
-    } else {
-      results[type] = matches
-    }
-  }
-
-  return results
+const { availableOnServer, ignoredPlugins, disabledPlugins } = toRefs(props)
+
+const {
+  isLoading,
+  hasError,
+  fetchErrorMessage,
+  flattenPluginMap,
+  filteredPlugins,
+  noSearchResults,
+} = usePluginSelect({
+  config: props.config,
+  availableOnServer,
+  ignoredPlugins,
+  disabledPlugins,
+  filter,
 })
 
 const highlightedPlugins = computed(() => {
   return props.highlightedPluginIds.reduce((plugins, id) => {
     const plugin = flattenPluginMap.value[id]
 
-    if (plugin) {
+    if (plugin && plugin.group !== PluginGroup.CUSTOM_PLUGINS) {
       plugins.push(plugin)
     }
 
@@ -301,14 +267,6 @@ const highlightedPlugins = computed(() => {
   }, [] as PluginType[])
 })
 
-const hasFilteredResults = computed((): boolean => {
-  return Object.keys(filteredPlugins.value).length > 0
-})
-
-const noSearchResults = computed((): boolean => {
-  return (Object.keys(pluginsList.value).length > 0 && !hasFilteredResults.value)
-})
-
 const tabs = props.config.app === 'konnect'
   ? [{
     hash: '#kong',
@@ -322,141 +280,10 @@ const tabs = props.config.app === 'konnect'
   : []
 const activeTab = ref(tabs.length ? route?.hash || tabs[0]?.hash || '' : '')
 
-const buildPluginList = (): PluginCardList => {
-  // If availableOnServer is false, we included unavailable plugins from pluginMeta in addition to available plugins
-  // returning an array of unique plugin ids
-  // either grab all plugins from metadata file or use list of available plugins provided by API
-  return [...new Set(
-    [
-      ...Object.keys({ ...(!props.availableOnServer ? pluginMetaData : {}) }),
-      ...availablePlugins.value,
-    ],
-  )]
-    // Filter out ignored plugins
-    .filter((plugin: string) => !props.ignoredPlugins.includes(plugin))
-    // Filter plugins by entity type if adding scoped plugin
-    .filter((plugin: string) => {
-      // For Global Plugins
-      if (!props.config.entityType) {
-        return plugin
-      }
-
-      if (props.config.entityType === 'services') {
-        const isNotServicePlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.SERVICE))
-        if (isNotServicePlugin) {
-          return false
-        }
-      }
-
-      if (props.config.entityType === 'routes') {
-        const isNotRoutePlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.ROUTE))
-        if (isNotRoutePlugin) {
-          return false
-        }
-      }
-
-      if (props.config.entityType === 'consumer_groups') {
-        const isNotConsumerGroupPlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.CONSUMER_GROUP))
-        if (isNotConsumerGroupPlugin) {
-          return false
-        }
-      }
-
-      if (props.config.entityType === 'consumers') {
-        const isNotConsumerPlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.CONSUMER))
-        if (isNotConsumerPlugin) {
-          return false
-        }
-      }
-
-      return plugin
-    })
-    // build the actual card list
-    .reduce((list: PluginCardList, pluginId: string) => {
-      const pluginName = (pluginMetaData[pluginId] && pluginMetaData[pluginId].name) || pluginId
-      const plugin = {
-        ...pluginMetaData[pluginId],
-        id: pluginId,
-        name: pluginName,
-        available: availablePlugins.value.includes(pluginId),
-        disabledMessage: '',
-        group: pluginMetaData[pluginId]?.group || PluginGroup.CUSTOM_PLUGINS,
-      } as PluginType
-
-      if (props.disabledPlugins) {
-        plugin.disabledMessage = props.disabledPlugins[pluginId]
-      }
-
-      const groupName = plugin.group || t('plugins.select.misc_plugins')
-      let plugins = list[groupName]
-
-      if (!plugins) {
-        plugins = []
-      }
-
-      plugins.push(plugin)
-      plugins.sort(sortAlpha('name'))
-
-      list[groupName] = plugins
-
-      return list
-    }, {})
-}
-
-const availablePluginsUrl = computed((): string => {
-  let url = `${props.config.apiBaseUrl}${endpoints.select[props.config.app].availablePlugins}`
-
-  if (props.config.app === 'konnect') {
-    url = url.replace(/{controlPlaneId}/gi, props.config.controlPlaneId || '')
-  } else if (props.config.app === 'kongManager') {
-    url = props.config.gatewayInfo?.edition === 'community'
-      ? `${props.config.apiBaseUrl}${endpoints.select[props.config.app].availablePluginsForOss}`
-      : url.replace(/\/{workspace}/gi, props.config.workspace ? `/${props.config.workspace}` : '')
-  }
-
-  return url
-})
-
-const fetchEntityPluginsUrl = computed((): string => {
-  if (props.config.entityType && props.config.entityId) {
-    let url = `${props.config.apiBaseUrl}${endpoints.list[props.config.app].forEntity}`
-
-    if (props.config.app === 'konnect') {
-      url = url.replace(/{controlPlaneId}/gi, props.config.controlPlaneId || '')
-    } else if (props.config.app === 'kongManager') {
-      url = url.replace(/\/{workspace}/gi, props.config.workspace ? `/${props.config.workspace}` : '')
-    }
-
-    return url
-      .replace(/{entityType}/gi, props.config.entityType || '')
-      .replace(/{entityId}/gi, props.config.entityId || '')
-  }
-
-  return ''
-})
-
 const onTabsChange = (hash: string) => {
   router.replace({ hash, query: route.query })
 }
 
-// race condition between fetch of available plugins and setting
-// disabled/ignored plugins
-// if disabled/ignored plugins changes before availablePlugins fetch
-// wait for fetch to finish and don't attempt to build plugin list yet
-// if disabled/ignored plugins changes AFTER availablePlugins fetch
-// rebuild the list
-watch(() => props.disabledPlugins, (val, oldVal) => {
-  if (!objectsAreEqual(val, oldVal) && !isLoading.value) {
-    pluginsList.value = buildPluginList()
-  }
-})
-
-watch(() => props.ignoredPlugins, (val, oldVal) => {
-  if (!objectsAreEqual(val, oldVal) && !isLoading.value) {
-    pluginsList.value = buildPluginList()
-  }
-})
-
 watch((isLoading), (loading: boolean) => {
   emit('loading', loading)
 })
@@ -471,52 +298,6 @@ onBeforeMount(async () => {
   usercanEditCustomPlugin.value = await props.canEditCustomPlugin()
   usercanDeleteCustomPlugin.value = await props.canDeleteCustomPlugin()
 })
-
-onMounted(async () => {
-  try {
-    const { data } = await axiosInstance.get(availablePluginsUrl.value)
-
-    // TODO: endpoints temporarily return different formats
-    if (props.config.app === 'konnect') {
-      const { names: available } = data
-      availablePlugins.value = available || []
-    } else if (props.config.app === 'kongManager') {
-      const { plugins: { available_on_server: aPlugins } } = data
-      availablePlugins.value = aPlugins ? Object.keys(aPlugins) : []
-    }
-  } catch (error: any) {
-    hasError.value = true
-    fetchErrorMessage.value = getMessageFromError(error)
-  }
-
-  // fetch scoped entity to check for pre-existing plugins
-  if (fetchEntityPluginsUrl.value) {
-    try {
-      const { data: { data } } = await axiosInstance.get(fetchEntityPluginsUrl.value)
-
-      if (data?.length) {
-        const eplugins = data.reduce((plugins: string[], plugin: Record<string, any>) => {
-          if (plugin.name) {
-            plugins.push(plugin.name)
-          }
-
-          return plugins
-        }, [])
-
-        existingEntityPlugins.value = existingEntityPlugins.value.concat(eplugins)
-      }
-    } catch (error: any) {
-      // no op if it fails, backend will catch if they try to create
-      // duplicate plugins
-    }
-  }
-
-  if (!hasError.value) {
-    pluginsList.value = buildPluginList()
-  }
-
-  isLoading.value = false
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/entities/entities-plugins/src/composables/index.ts b/packages/entities/entities-plugins/src/composables/index.ts
index 79e12f0980..4c21ddebee 100644
--- a/packages/entities/entities-plugins/src/composables/index.ts
+++ b/packages/entities/entities-plugins/src/composables/index.ts
@@ -1,12 +1,14 @@
 import useI18n from './useI18n'
 import usePluginHelpers from './usePluginHelpers'
 import { usePluginMetaData } from './usePluginMeta'
+import { usePluginSelect } from './usePluginSelect'
 import { useSchemas } from './useSchemas'
 
 // All composables must be exported as part of the default object for Cypress test stubs
 export default {
   useI18n,
   usePluginMetaData,
+  usePluginSelect,
   usePluginHelpers,
   useSchemas,
 }
diff --git a/packages/entities/entities-plugins/src/composables/usePluginSelect.ts b/packages/entities/entities-plugins/src/composables/usePluginSelect.ts
new file mode 100644
index 0000000000..a38016c181
--- /dev/null
+++ b/packages/entities/entities-plugins/src/composables/usePluginSelect.ts
@@ -0,0 +1,281 @@
+import { onMounted, ref, computed, toValue } from 'vue'
+import { useAxios, useHelpers, useErrors } from '@kong-ui-public/entities-shared'
+import composables from '../composables'
+import endpoints from '../plugins-endpoints'
+import { PluginGroup, PluginScope } from '../types'
+
+import type { MaybeRef } from 'vue'
+import type { PluginType, PluginCardList, EntityType } from '../types'
+import type { KongManagerConfig, KonnectConfig } from '@kong-ui-public/entities-shared'
+
+export interface BasePluginSelectConfig {
+  entityType?: EntityType
+  entityId?: string
+}
+
+export interface KonnectPluginSelectConfig extends KonnectConfig, BasePluginSelectConfig { }
+export interface KongManagerPluginSelectConfig extends KongManagerConfig, BasePluginSelectConfig { }
+
+export type PluginSelectConfig = KonnectPluginSelectConfig | KongManagerPluginSelectConfig
+
+export interface UsePluginSelectOptions {
+  availableOnServer: MaybeRef<boolean>
+  ignoredPlugins: MaybeRef<string[]>
+  disabledPlugins: MaybeRef<Record<string, string>>
+  config: PluginSelectConfig
+  filter?: MaybeRef<string>
+}
+
+const getAvailablePluginsUrl = (config: PluginSelectConfig): string => {
+  let url = `${config.apiBaseUrl}${endpoints.select[config.app].availablePlugins}`
+
+  if (config.app === 'konnect') {
+    url = url.replace(/{controlPlaneId}/gi, config.controlPlaneId || '')
+  } else if (config.app === 'kongManager') {
+    url = config.gatewayInfo?.edition === 'community'
+      ? `${config.apiBaseUrl}${endpoints.select[config.app].availablePluginsForOss}`
+      : url.replace(/\/{workspace}/gi, config.workspace ? `/${config.workspace}` : '')
+  }
+
+  return url
+}
+
+const getFetchEntityPluginsUrl = (config: PluginSelectConfig): string => {
+  if (config.entityType && config.entityId) {
+    let url = `${config.apiBaseUrl}${endpoints.list[config.app].forEntity}`
+
+    if (config.app === 'konnect') {
+      url = url.replace(/{controlPlaneId}/gi, config.controlPlaneId || '')
+    } else if (config.app === 'kongManager') {
+      url = url.replace(/\/{workspace}/gi, config.workspace ? `/${config.workspace}` : '')
+    }
+
+    return url
+      .replace(/{entityType}/gi, config.entityType || '')
+      .replace(/{entityId}/gi, config.entityId || '')
+  }
+
+  return ''
+}
+
+const normalizeName = (name: string): string => {
+  return name.toLowerCase().replace(/[\s-_.]/g, '')
+}
+
+const filterPlugin = (query: string, plugin: PluginType): boolean => {
+  const q = normalizeName(query)
+  return (['name', 'id', 'group'] as const).some((key) => normalizeName(plugin[key]).includes(q))
+}
+
+export const usePluginSelect = ({ config, availableOnServer, ignoredPlugins, disabledPlugins, filter }: UsePluginSelectOptions) => {
+  const { pluginMetaData } = composables.usePluginMetaData()
+  const { i18n: { t } } = composables.useI18n()
+  const { getMessageFromError } = useErrors()
+  const { sortAlpha } = useHelpers()
+
+  const isLoading = ref(true)
+  const hasError = ref(false)
+  const fetchErrorMessage = ref('')
+  const availablePlugins = ref<string[]>([])
+  const existingEntityPlugins = ref<string[]>([])
+
+  const { axiosInstance } = useAxios(config?.axiosRequestConfig)
+
+  const availablePluginsUrl = getAvailablePluginsUrl(config)
+  const fetchEntityPluginsUrl = getFetchEntityPluginsUrl(config)
+
+  const pluginsList = computed((): PluginCardList => {
+    if (hasError.value) {
+      return {}
+    }
+
+    // If availableOnServer is false, we included unavailable plugins from pluginMeta in addition to available plugins
+    // returning an array of unique plugin ids
+    // either grab all plugins from metadata file or use list of available plugins provided by API
+    return [...new Set(
+      [
+        ...Object.keys({ ...(!toValue(availableOnServer) ? pluginMetaData : {}) }),
+        ...availablePlugins.value,
+      ],
+    )]
+      // Filter out ignored plugins
+      .filter((plugin: string) => !toValue(ignoredPlugins).includes(plugin))
+      // Filter plugins by entity type if adding scoped plugin
+      .filter((plugin: string) => {
+        // For Global Plugins
+        if (!config.entityType) {
+          return plugin
+        }
+
+        if (config.entityType === 'services') {
+          const isNotServicePlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.SERVICE))
+          if (isNotServicePlugin) {
+            return false
+          }
+        }
+
+        if (config.entityType === 'routes') {
+          const isNotRoutePlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.ROUTE))
+          if (isNotRoutePlugin) {
+            return false
+          }
+        }
+
+        if (config.entityType === 'consumer_groups') {
+          const isNotConsumerGroupPlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.CONSUMER_GROUP))
+          if (isNotConsumerGroupPlugin) {
+            return false
+          }
+        }
+
+        if (config.entityType === 'consumers') {
+          const isNotConsumerPlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.CONSUMER))
+          if (isNotConsumerPlugin) {
+            return false
+          }
+        }
+
+        return plugin
+      })
+      // build the actual card list
+      .reduce((list: PluginCardList, pluginId: string) => {
+        const pluginName = (pluginMetaData[pluginId] && pluginMetaData[pluginId].name) || pluginId
+        const plugin = {
+          ...pluginMetaData[pluginId],
+          id: pluginId,
+          name: pluginName,
+          available: availablePlugins.value.includes(pluginId),
+          disabledMessage: '',
+          group: pluginMetaData[pluginId]?.group || PluginGroup.CUSTOM_PLUGINS,
+        } as PluginType
+
+        const disabled = toValue(disabledPlugins)
+        if (disabled) {
+          plugin.disabledMessage = disabled[pluginId]
+        }
+
+        const groupName = plugin.group || t('plugins.select.misc_plugins')
+        let plugins = list[groupName]
+
+        if (!plugins) {
+          plugins = []
+        }
+
+        plugins.push(plugin)
+        plugins.sort(sortAlpha('name'))
+
+        list[groupName] = plugins
+
+        return list
+      }, {})
+  })
+  const createFlattenPluginMap = (plugins: PluginCardList): Record<string, PluginType> => {
+    return Object.entries(plugins)
+      .reduce((m, [, plugins]) => {
+        for (const plugin of plugins) {
+          m[plugin.id] = plugin
+        }
+        return m
+      }, {} as Record<string, PluginType>)
+  }
+
+  const filteredPlugins = computed((): PluginCardList => {
+    if (!pluginsList.value) {
+      return {}
+    }
+
+    const query = toValue(filter || '').toLowerCase()
+    const results = JSON.parse(JSON.stringify(pluginsList.value))
+
+    for (const type in pluginsList.value) {
+      const matches = pluginsList.value[type as keyof PluginCardList]?.filter((plugin: PluginType) => filterPlugin(query, plugin)) || []
+
+      if (!matches.length) {
+        delete results[type]
+      } else {
+        results[type] = matches
+      }
+    }
+
+    return results
+  })
+
+  const flattenPluginMap = computed(() => {
+    if (!pluginsList.value) {
+      return {}
+    }
+    return createFlattenPluginMap(pluginsList.value)
+  })
+
+  const filteredFlattenPluginMap = computed(() => {
+    if (!filteredPlugins.value) {
+      return {}
+    }
+    return createFlattenPluginMap(filteredPlugins.value)
+  })
+
+  const hasFilteredResults = computed((): boolean => {
+    return Object.keys(filteredPlugins.value).length > 0
+  })
+
+  const noSearchResults = computed((): boolean => {
+    return (Object.keys(pluginsList.value).length > 0 && !hasFilteredResults.value)
+  })
+
+  onMounted(async () => {
+    try {
+      const { data } = await axiosInstance.get(availablePluginsUrl)
+
+      // TODO: endpoints temporarily return different formats
+      if (config.app === 'konnect') {
+        const { names: available } = data
+        availablePlugins.value = available || []
+      } else if (config.app === 'kongManager') {
+        const { plugins: { available_on_server: aPlugins } } = data
+        availablePlugins.value = aPlugins ? Object.keys(aPlugins) : []
+      }
+    } catch (error: any) {
+      hasError.value = true
+      fetchErrorMessage.value = getMessageFromError(error)
+    }
+
+    // fetch scoped entity to check for pre-existing plugins
+    if (fetchEntityPluginsUrl) {
+      try {
+        const { data: { data } } = await axiosInstance.get(fetchEntityPluginsUrl)
+
+        if (data?.length) {
+          const eplugins = data.reduce((plugins: string[], plugin: Record<string, any>) => {
+            if (plugin.name) {
+              plugins.push(plugin.name)
+            }
+
+            return plugins
+          }, [])
+
+          existingEntityPlugins.value = existingEntityPlugins.value.concat(eplugins)
+        }
+      } catch (error: any) {
+        // no op if it fails, backend will catch if they try to create
+        // duplicate plugins
+      }
+    }
+
+    isLoading.value = false
+  })
+
+  return {
+    isLoading,
+    hasError,
+    fetchErrorMessage,
+    availablePlugins,
+    existingEntityPlugins,
+    pluginsList,
+    filteredPlugins,
+    flattenPluginMap,
+    filteredFlattenPluginMap,
+    hasFilteredResults,
+    noSearchResults,
+    filterPlugin,
+  }
+}
diff --git a/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue b/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
index 90d175a060..2b7d00f1e1 100644
--- a/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
+++ b/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <template v-if="config.isExactMatch">
     <KInput
-      v-if="!config.queryItems"
+      v-if="!config.selectItems"
       autocomplete="off"
       class="kong-ui-entity-filter-input"
       data-testid="search-input"
@@ -28,11 +28,16 @@
       clearable
       data-testid="search-input"
       enable-filtering
-      :items="config.queryItems"
+      :filter-function="config.selectFilterFunction"
+      :items="config.selectItems"
       :model-value="modelValue"
       :placeholder="config.placeholder"
       @update:model-value="handleQueryUpdate"
-    />
+    >
+      <template #before>
+        <IconFilter />
+      </template>
+    </KSelect>
   </template>
   <template v-else>
     <div class="kong-ui-entity-filter">
diff --git a/packages/entities/entities-shared/src/composables/useFetchUrlBuilder.ts b/packages/entities/entities-shared/src/composables/useFetchUrlBuilder.ts
index 0987b62ba6..9cde77f932 100644
--- a/packages/entities/entities-shared/src/composables/useFetchUrlBuilder.ts
+++ b/packages/entities/entities-shared/src/composables/useFetchUrlBuilder.ts
@@ -35,9 +35,11 @@ export default function useFetchUrlBuilder(
         // 1) all konnect usage or
         // 2) kongManager usage with _config.value.isExactMatch === true
         urlWithParams.search = '' // trim any query params
-        urlWithParams = _config.value.isExactMatch
-          ? new URL(`${urlWithParams.href}/${query}`)
-          : new URL(`${urlWithParams.href}?filter[name][contains]=${query}`)
+        urlWithParams = _config.value.app === 'konnect' && _config.value.isEqMatch
+          ? new URL(`${urlWithParams.href}?filter[name][eq]=${query}`)
+          : _config.value.isExactMatch
+            ? new URL(`${urlWithParams.href}/${query}`)
+            : new URL(`${urlWithParams.href}?filter[name][contains]=${query}`)
       } else {
         // handle kongManager usage with _config.value.isExactMatch === false
         if (!isExactMatch.value) {
diff --git a/packages/entities/entities-shared/src/types/app-config.ts b/packages/entities/entities-shared/src/types/app-config.ts
index 7bff7ab824..f561d07f57 100644
--- a/packages/entities/entities-shared/src/types/app-config.ts
+++ b/packages/entities/entities-shared/src/types/app-config.ts
@@ -18,6 +18,8 @@ export interface KonnectConfig extends BaseAppConfig {
   controlPlaneId: string
   /** Should use exact match */
   isExactMatch?: boolean
+  /** Should use ?filter[name][eq]={query} when exact match */
+  isEqMatch?: boolean
 }
 
 /** Base config properties for Kong Manager. All entity configs should extend this interface for the app. */
diff --git a/packages/entities/entities-shared/src/types/entity-filter.ts b/packages/entities/entities-shared/src/types/entity-filter.ts
index 60af76ef56..da8d3c770d 100644
--- a/packages/entities/entities-shared/src/types/entity-filter.ts
+++ b/packages/entities/entities-shared/src/types/entity-filter.ts
@@ -1,4 +1,4 @@
-import type { SelectItem } from '@kong/kongponents/dist/types'
+import type { SelectItem, SelectFilterFunctionParams } from '@kong/kongponents/dist/types'
 import type { Field } from './index'
 
 /** Base filter configuration */
@@ -7,10 +7,6 @@ interface BaseFilterConfig {
   isExactMatch: boolean
 }
 
-interface QueryItem extends SelectItem {
-  value: string
-}
-
 /**
  * Exact match filter configuration
  * FIXME: "Exact match" here is no longer accurate, in reality it works as an indicator
@@ -18,7 +14,10 @@ interface QueryItem extends SelectItem {
  */
 export interface ExactMatchFilterConfig extends BaseFilterConfig {
   isExactMatch: true
-  queryItems?: QueryItem[]
+  /** If provided, the filter will be a select input and the query will be the value of the selected item */
+  selectItems?: SelectItem[]
+  /** If selectItems is provided, we can customize the filter function */
+  selectFilterFunction?: (params: SelectFilterFunctionParams) => SelectItem[] | boolean
   /** Placeholder for the exact match filter input */
   placeholder: string
 }

From c73ad6992a61a45d1688aa06d1368dd74b9ca64f Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Thu, 31 Oct 2024 01:12:33 +0800
Subject: [PATCH 4/4] fix(entities-plugins): only use select when isEqMatch

---
 .../src/components/PluginList.vue                 | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
index d3f17d83fc..4c02c92431 100644
--- a/packages/entities/entities-plugins/src/components/PluginList.vue
+++ b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -426,6 +426,7 @@ const { flattenPluginMap, filterPlugin } = composables.usePluginSelect({
 const filterQuery = ref<string>('')
 const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['config']>(() => {
   const isExactMatch = (props.config.app === 'konnect' || props.config.isExactMatch)
+  const isEqMatch = (props.config.app === 'kongManager' || props.config.isEqMatch)
 
   if (isExactMatch) {
     return {
@@ -434,13 +435,15 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
         name: fields.name,
         id: { label: t('plugins.list.table_headers.id'), sortable: true },
       },
-      selectItems: Object.entries(flattenPluginMap.value).map(([name, plugin]) => {
-        return { value: name, label: plugin.name, plugin }
-      }),
-      selectFilterFunction: ({ query, items }) => {
-        return items.filter(({ plugin }) => filterPlugin(query, plugin))
-      },
       placeholder: t(`search.placeholder.${props.config.app}`),
+      ...isEqMatch ? {
+        selectItems: Object.entries(flattenPluginMap.value).map(([name, plugin]) => {
+          return { value: name, label: plugin.name, plugin }
+        }),
+        selectFilterFunction: ({ query, items }) => {
+          return items.filter(({ plugin }) => filterPlugin(query, plugin))
+        },
+      } : {},
     } as ExactMatchFilterConfig
   }