Add support to use custom values in dropdown (#2163)

## Summary
When we switched to use `Combobox` we were no longer able to add custom
values for our dropdowns, and this prevented users from using regexp
values for `group`, `host`, `proxy` etc. This PR adds
`createCustomValue` flag so that any custom value can be entered into
the dropdowns.

## Detailed summary
- Make use of `Combobox`'s `createCustomValues` so that wherever
necessary, users are able to enter regex values.
    
<img width="720" height="221" alt="Screenshot 2026-01-05 at 7 15 23 AM"
src="https://github.com/user-attachments/assets/841716eb-cd86-49d1-b13c-a0e37e8a37b9"
/>

## Why
For users to be able to use regexp, and any custom value in our
dropdowns.

## How to test
For all query types where dropdowns are used and user configurable (i.e.
group, host, proxy, application) start typing a value that does not
already exist in the dropdown. You should see an option to `Use custom
value`

Fixes
[comment](https://github.com/grafana/grafana-zabbix/pull/2141#issuecomment-3698818476),
thanks for the testing and call out @christos-diamantis

.changeset/full-parrots-crash.md

@@ -0,0 +1,5 @@
+---
+'grafana-zabbix': minor
+---
+
+Support adding custom values in dropdowns for all query types

src/components/MetricPicker/MetricPicker.tsx

@@ -9,10 +9,11 @@ export interface Props {
   isLoading?: boolean;
   options: Array<ComboboxOption<string>>;
   width?: number;
+  createCustomValue?: boolean;
   onChange: (value: string) => void;
 }
 
-export const MetricPicker = ({ value, placeholder, options, isLoading, width, onChange }: Props) => {
+export const MetricPicker = ({ value, placeholder, options, isLoading, width, onChange, createCustomValue }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const onMenuOptionSelect = (option: SelectableValue<string>) => {
@@ -23,6 +24,7 @@ export const MetricPicker = ({ value, placeholder, options, isLoading, width, on
   return (
     <div data-testid="role-picker" style={{ position: 'relative' }} ref={ref}>
       <Combobox<string>
+        createCustomValue={createCustomValue ?? false}
         width={width}
         value={value}
         options={options ?? []}

src/datasource/components/QueryEditor/HostTagQueryEditor.tsx

@@ -105,6 +105,7 @@ export const HostTagQueryEditor = ({
                 options={hostTagOptions ?? []}
                 width={19}
                 loading={hostTagOptionsLoading}
+                createCustomValue={true}
               />
               <Combobox
                 value={filter.operator}

src/datasource/components/QueryEditor/MetricsQueryEditor.tsx

@@ -239,6 +239,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
             isLoading={groupsLoading}
             onChange={onFilterChange('group')}
             placeholder="Group name"
+            createCustomValue={true}
           />
         </InlineField>
         <InlineField label="Host tag" labelWidth={12}>
@@ -259,6 +260,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
             isLoading={hostsLoading}
             onChange={onFilterChange('host')}
             placeholder="Host name"
+            createCustomValue={true}
           />
         </InlineField>
       </QueryEditorRow>
@@ -271,6 +273,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
               options={appOptions}
               isLoading={appsLoading}
               onChange={onFilterChange('application')}
+              createCustomValue={true}
               placeholder="Application name"
             />
           </InlineField>
@@ -283,6 +286,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
               options={tagOptions}
               isLoading={tagsLoading}
               onChange={onFilterChange('itemTag')}
+              createCustomValue={true}
               placeholder="Item tag name"
             />
           </InlineField>
@@ -294,6 +298,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
             options={itemOptions}
             isLoading={itemsLoading}
             onChange={onFilterChange('item')}
+            createCustomValue={true}
             placeholder="Item name"
           />
         </InlineField>

src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx

@@ -166,6 +166,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
             options={groupsOptions}
             isLoading={groupsLoading}
             onChange={onFilterChange('group')}
+            createCustomValue={true}
             placeholder="Group name"
           />
         </InlineField>
@@ -176,6 +177,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
             options={hostOptions}
             isLoading={hostsLoading}
             onChange={onFilterChange('host')}
+            createCustomValue={true}
             placeholder="Host name"
           />
         </InlineField>
@@ -186,6 +188,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
             options={proxiesOptions}
             isLoading={proxiesLoading}
             onChange={onFilterChange('proxy')}
+            createCustomValue={true}
             placeholder="Proxy name"
           />
         </InlineField>
@@ -199,6 +202,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
               options={appOptions}
               isLoading={appsLoading}
               onChange={onFilterChange('application')}
+              createCustomValue={true}
               placeholder="Application name"
             />
           </InlineField>

src/datasource/components/QueryEditor/ServicesQueryEditor.tsx

@@ -95,6 +95,7 @@ export const ServicesQueryEditor = ({ query, datasource, onChange }: Props) => {
             options={itServicesOptions}
             isLoading={itServicesLoading}
             onChange={onStringPropChange('itServiceFilter')}
+            createCustomValue={true}
             placeholder="Service name"
           />
         </InlineField>
@@ -105,6 +106,7 @@ export const ServicesQueryEditor = ({ query, datasource, onChange }: Props) => {
             options={slaOptions}
             isLoading={slaLoading}
             onChange={onStringPropChange('slaFilter')}
+            createCustomValue={true}
             placeholder="SLA name"
           />
         </InlineField>

src/datasource/components/QueryEditor/TextMetricsQueryEditor.tsx

@@ -144,6 +144,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
             options={groupsOptions}
             isLoading={groupsLoading}
             onChange={onFilterChange('group')}
+            createCustomValue={true}
             placeholder="Group name"
           />
         </InlineField>
@@ -154,6 +155,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
             options={hostOptions}
             isLoading={hostsLoading}
             onChange={onFilterChange('host')}
+            createCustomValue={true}
             placeholder="Host name"
           />
         </InlineField>
@@ -166,6 +168,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
             options={appOptions}
             isLoading={appsLoading}
             onChange={onFilterChange('application')}
+            createCustomValue={true}
             placeholder="Application name"
           />
         </InlineField>
@@ -176,6 +179,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
             options={itemOptions}
             isLoading={itemsLoading}
             onChange={onFilterChange('item')}
+            createCustomValue={true}
             placeholder="Item name"
           />
         </InlineField>

src/datasource/components/QueryEditor/TriggersQueryEditor.tsx

@@ -230,6 +230,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
             isLoading={groupsLoading}
             onChange={onFilterChange('group')}
             placeholder="Group name"
+            createCustomValue={true}
           />
         </InlineField>
         <InlineField label="Host" labelWidth={12}>
@@ -239,6 +240,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
             options={hostOptions}
             isLoading={hostsLoading}
             onChange={onFilterChange('host')}
+            createCustomValue={true}
             placeholder="Host name"
           />
         </InlineField>
@@ -250,6 +252,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
               options={proxiesOptions}
               isLoading={proxiesLoading}
               onChange={onFilterChange('proxy')}
+              createCustomValue={true}
               placeholder="Proxy name"
             />
           </InlineField>
@@ -264,6 +267,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
               options={appOptions}
               isLoading={appsLoading}
               onChange={onFilterChange('application')}
+              createCustomValue={true}
               placeholder="Application name"
             />
           </InlineField>
@@ -276,6 +280,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
               options={tagOptions}
               isLoading={tagsLoading}
               onChange={onFilterChange('itemTag')}
+              createCustomValue={true}
               placeholder="Item tag name"
             />
           </InlineField>
@@ -300,6 +305,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
               options={itemOptions}
               isLoading={itemsLoading}
               onChange={onFilterChange('item')}
+              createCustomValue={true}
               placeholder="Item name"
             />
           </InlineField>

src/datasource/components/QueryEditor/UserMacrosQueryEditor.tsx

@@ -101,6 +101,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
             options={groupsOptions}
             isLoading={groupsLoading}
             onChange={onFilterChange('group')}
+            createCustomValue={true}
             placeholder="Group name"
           />
         </InlineField>
@@ -111,6 +112,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
             options={hostOptions}
             isLoading={hostsLoading}
             onChange={onFilterChange('host')}
+            createCustomValue={true}
             placeholder="Host name"
           />
         </InlineField>
@@ -123,6 +125,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
             options={macrosOptions}
             isLoading={macrosLoading}
             onChange={onFilterChange('macro')}
+            createCustomValue={true}
             placeholder="Macro name"
           />
         </InlineField>