Standardization across Zabbix UI components (#2141)

## Summary

Throughout Zabbix we did not have a uniform UI - some drop-down were
using `Select` others `Combobox` others a custom one that we created.
Some had placeholders and others did not. This PR aims to standardize
our Zabbix UI across our query, variable and config editors

## Detailed summary 

- Migrate from `Select` to `Combobox` -> `Select` component is
deprecated
- Migrate from `HorizontalGroup` to `Stack` -> `HorizontalGroup` is also
deprecated
- Remove use of "custom" dropdown `MetricPickerMenu` in favor of
`Combobox` ensuring uniformity across our drop-down and removing
maintenance overhead for us down the line
- Standardize placeholders across all inputs

<img width="630" height="243" alt="Screenshot 2025-12-17 at 1 13 45 PM"
src="https://github.com/user-attachments/assets/9382057e-b443-4474-a9c8-850086d7f3d4"
/>

<img width="691" height="256" alt="Screenshot 2025-12-17 at 1 14 05 PM"
src="https://github.com/user-attachments/assets/a05ff2af-8603-4752-8d12-337dc381c0fd"
/>

## Why
To have a clean and standard UI and remove use of UI deprecated
packages.

## How to test
- Query Editor:
- By creating a new query in a dashboard or Explore and interacting with
all the different query types and drop-downs
     - All drop-downs should be searchable and have placeholders
- Config Editor:
- By going to a datasource and ensuring that the dropdown for Datasource
(when DB connection is enabled) and Auth type are responsive and working
as expected)


Fixes:
https://github.com/orgs/grafana/projects/457/views/40?pane=issue&itemId=3740545830&issue=grafana%7Coss-big-tent-squad%7C139

src/panel-triggers/components/ExecScriptModal.tsx

@@ -1,7 +1,17 @@
 import React, { PureComponent, ReactNode } from 'react';
 import { css } from '@emotion/css';
-import { GrafanaTheme, SelectableValue } from '@grafana/data';
-import { Button, Spinner, Modal, Select, stylesFactory, withTheme, Themeable, ButtonGroup } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import {
+  Button,
+  Spinner,
+  Modal,
+  stylesFactory,
+  withTheme,
+  Themeable,
+  ButtonGroup,
+  Combobox,
+  ComboboxOption,
+} from '@grafana/ui';
 import { ZBXScript, APIExecuteScriptResponse } from '../../datasource/zabbix/connectors/zabbix_api/types';
 import { FAIcon } from '../../components';
 
@@ -12,8 +22,8 @@ interface Props extends Themeable {
 }
 
 interface State {
-  selectedScript: SelectableValue<string>;
-  scriptOptions: Array<SelectableValue<string>>;
+  selectedScript: ComboboxOption<string>;
+  scriptOptions: Array<ComboboxOption<string>>;
   script: ZBXScript;
   error: boolean;
   errorMessage: string | ReactNode;
@@ -47,7 +57,7 @@ export class ExecScriptModalUnthemed extends PureComponent<Props, State> {
   async componentDidMount() {
     const scripts = await this.props.getScripts();
     this.scripts = scripts;
-    const scriptOptions: Array<SelectableValue<string>> = scripts.map((s) => {
+    const scriptOptions: Array<ComboboxOption<string>> = scripts.map((s) => {
       return {
         value: s.scriptid,
         label: s.name,
@@ -61,7 +71,7 @@ export class ExecScriptModalUnthemed extends PureComponent<Props, State> {
     this.setState({ scriptOptions, selectedScript, script });
   }
 
-  onChangeSelectedScript = (v: SelectableValue<string>) => {
+  onChangeSelectedScript = (v: ComboboxOption<string>) => {
     const script = this.scripts.find((s) => v.value === s.scriptid);
     this.setState({ selectedScript: v, script, errorMessage: '', loading: false, result: '' });
   };
@@ -133,7 +143,7 @@ export class ExecScriptModalUnthemed extends PureComponent<Props, State> {
           </div>
         }
       >
-        <Select options={scriptOptions} value={selectedScript} onChange={this.onChangeSelectedScript} />
+        <Combobox options={scriptOptions} value={selectedScript} onChange={this.onChangeSelectedScript} />
         {selectError && <small className={styles.inputError}>{selectError}</small>}
 
         <div className={styles.scriptCommandContainer}>