feat: add eq match and filter after select behavior

[Justineo]

Summary

KM-591

Preview link

This pull request provides a PoC for a new filter interaction in the plugins list, aimed at improving usability by addressing the mismatch between visible display names and filterable names.

Context

A plugin instance may have three different "names":

• name: the backend-stored plugin name (key), e.g., mtls-auth
• display name: the UI-visible name, e.g., Key Authentication
• instance name: a user-defined name for a plugin instance, e.g., MyAwesomePlugin

Currently, because display names are not stored on the backend, the filter API (/plugins?filter[name][contains]={query}) only matches against the plugin's backend name or user-defined instance name. This gap can cause confusion when users try to filter by the display names they see in the UI.

To address this, @erichsend proposed an approach with these steps:

1. Replace the standard input filter with a Select component.
2. Allow users to type a query into the Select component.
3. Fuzzy match plugin (not plugin instances) against multiple fields—names, display names, and groups—aligning with filter logic on the plugin creation page.
4. When a user selects a plugin, use an exact match query (e.g., /plugins?filter[name][eq]=mtls-auth) to display all instances of the selected plugin.

Trade-Offs

This approach presents some benefits and limitations:

+ Enables filtering by display names and group names apart from names.
+ Aligns filter behavior with the plugin creation page.
- Limits filtering to instances of a single plugin at a time.
- Disables filtering by instance names.

Code Changes

• Added usePluginSelect composable (extracted from PluginsSelectPage.vue with modifications)

  • pluginList is now a computed reference instead of a simple ref - need confirmation.
  • Removed the watch logic for pluginList updates, as it should update automatically as a computed reference.
  • Removed @revalidate="() => pluginsList = buildPluginList()" from PluginSelect.vue - need confirmation.

• Added selectItems and selectFilterFunction to ExactMatchFilterConfig

  • Introduced to enable the new select-then-filter behavior and customize the Select component’s filter logic.

• Added isEqMatch in KonnectConfig

  • This option supports the newly implemented exact match filtering, differentiating it from other filtering methods.
  • When a user selects an exact plugin name, the /plugins?filter[name][eq]={query} endpoint is called to ensure precise results (e.g., preventing Rate Limiting from returning instances of Rate Limiting Advanced).

[kongponents-bot]

Preview components from this PR in consuming application

In consuming application project install preview versions of shared packages generated by this PR:

@kong-ui-public/entities-shared@pr-1752
@kong-ui-public/dashboard-renderer@pr-1752
@kong-ui-public/documentation@pr-1752
@kong-ui-public/entities-certificates@pr-1752
@kong-ui-public/entities-consumer-credentials@pr-1752
@kong-ui-public/entities-consumer-groups@pr-1752
@kong-ui-public/entities-consumers@pr-1752
@kong-ui-public/entities-data-plane-nodes@pr-1752
@kong-ui-public/entities-gateway-services@pr-1752
@kong-ui-public/entities-key-sets@pr-1752
@kong-ui-public/entities-keys@pr-1752
@kong-ui-public/entities-routes@pr-1752
@kong-ui-public/entities-snis@pr-1752
@kong-ui-public/entities-upstreams-targets@pr-1752
@kong-ui-public/entities-vaults@pr-1752
@kong-ui-public/entities-plugins@pr-1752