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({ // 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 5dd3c78d73..4c02c92431 100644 --- a/packages/entities/entities-plugins/src/components/PluginList.vue +++ b/packages/entities/entities-plugins/src/components/PluginList.vue @@ -404,9 +404,29 @@ const fetcherBaseUrl = computed(() => { .replace(/{entityId}/gi, props.config?.entityId || '') }) +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('') const filterConfig = computed['$props']['config']>(() => { const isExactMatch = (props.config.app === 'konnect' || props.config.isExactMatch) + const isEqMatch = (props.config.app === 'kongManager' || props.config.isEqMatch) if (isExactMatch) { return { @@ -416,6 +436,14 @@ const filterConfig = computed['$props']['confi id: { label: t('plugins.list.table_headers.id'), sortable: true }, }, 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 } @@ -776,7 +804,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; } 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()" /> @@ -124,22 +123,19 @@