Refactor Deprecated UI Components and Variable Editors in Datasource Plugin

[richie-ni]

Description

While reviewing the current implementation of our Datasource plugin editor in Grafana, We noticed that several UI components and APIs being used are either deprecated or outdated. This could lead to long-term maintenance issues and limit compatibility with future Grafana releases.

---

🔍 Observations

1. Outdated UI Components

• The editor currently uses components like <Select>, which have been deprecated or are not recommended for use in newer Grafana plugin development.
• These components may lack support for features like:
  • Dynamic filtering
  • Keyboard accessibility
  • Enhanced UX (e.g., search-as-you-type)

2. Deprecated Variable Editor API

• The plugin currently uses setVariableQueryEditor, which is now deprecated.
• Grafana recommends using either StandardVariableSupport or DatasourceVariableSupport depending on the datasource needs.

---

✅ Proposed Fix

UI Improvements

• Replace all deprecated <Select> components with the ComboBox component from the Grafana UI toolkit.
• Ensure that the new components support search, accessibility, and dynamic options.

Variable Editor Refactor

• Migrate away from setVariableQueryEditor.
• Implement either StandardVariableSupport or DatasourceVariableSupport as per the plugin’s structure and functionality.

---

📦 Benefits

• Aligns with Grafana's latest plugin development standards.
• Reduces tech debt and future migration effort.
• Provides a better and more modern configuration experience for users.
• Ensures longer-term compatibility and community support.

---

[atmgrifter00]

I was actually starting to work on this as it's needed for the upgrade to Grafana 11 (things are currently broken without making some changes).

[atmgrifter00]

I have a branch where I began this effort. One thing to note was that to get those changes to work required a hack to be in place in the Grafana source (specifically here). When Grafana 11+ calls the query function, its default way to do so (queryFunction(request) in the linked code), results in there being no datasource instance context on the call, which means anything requiring this within the query implementation will not work. This seems like an issue with the Grafana 11 code, or a misunderstanding on my part on how datasource plugins are expected to be implemented for Grafana 11.