Influxdb: Improve filtering (#60994)

* Add createOptionPosition props to SelectBase

* Show create option in the beginning of the list

* Show only matched template variables

* Fix the test

* Remove redundant check

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -97,6 +97,7 @@ export function SelectBase<T>({
   className,
   closeMenuOnSelect = true,
   components,
+  createOptionPosition = 'last',
   defaultOptions,
   defaultValue,
   disabled = false,
@@ -256,6 +257,7 @@ export function SelectBase<T>({
     creatableProps.allowCreateWhileLoading = allowCreateWhileLoading;
     creatableProps.formatCreateLabel = formatCreateLabel ?? defaultFormatCreateLabel;
     creatableProps.onCreateOption = onCreateOption;
+    creatableProps.createOptionPosition = createOptionPosition;
     creatableProps.isValidNewOption = isValidNewOption;
   }
 

packages/grafana-ui/src/components/Select/types.ts

@@ -27,6 +27,8 @@ export interface SelectCommonProps<T> {
   closeMenuOnSelect?: boolean;
   /** Used for custom components. For more information, see `react-select` */
   components?: any;
+  /** Sets the position of the createOption element in your options list. Defaults to 'last' */
+  createOptionPosition?: 'first' | 'last';
   defaultValue?: any;
   disabled?: boolean;
   filterOption?: (option: SelectableValue<T>, searchQuery: string) => boolean;
@@ -140,6 +142,7 @@ export type ControlComponent<T> = React.ComponentType<CustomControlProps<T>>;
 export interface SelectableOptGroup<T = any> {
   label: string;
   options: Array<SelectableValue<T>>;
+
   [key: string]: any;
 }
 

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tags.test.tsx

@@ -33,6 +33,14 @@ jest.mock('../../influxQLMetadataQuery', () => {
   };
 });
 
+jest.mock('@grafana/runtime', () => {
+  return {
+    getTemplateSrv: jest.fn().mockReturnValueOnce({
+      getVariables: jest.fn().mockReturnValueOnce([]),
+    }),
+  };
+});
+
 beforeEach(() => {
   (mockedMeta.getTagKeysForMeasurementAndTags as jest.Mock).mockClear();
 });

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx

@@ -14,13 +14,13 @@ import {
   getTagValues,
 } from '../../influxQLMetadataQuery';
 import {
-  normalizeQuery,
-  addNewSelectPart,
-  removeSelectPart,
   addNewGroupByPart,
-  removeGroupByPart,
+  addNewSelectPart,
-  changeSelectPart,
   changeGroupByPart,
+  changeSelectPart,
+  normalizeQuery,
+  removeGroupByPart,
+  removeSelectPart,
 } from '../../queryUtils';
 import { InfluxQuery, InfluxQueryTag } from '../../types';
 import { DEFAULT_RESULT_FORMAT } from '../constants';
@@ -32,7 +32,7 @@ import { InputSection } from './InputSection';
 import { OrderByTimeSection } from './OrderByTimeSection';
 import { PartListSection } from './PartListSection';
 import { TagsSection } from './TagsSection';
-import { getNewSelectPartOptions, getNewGroupByPartOptions, makePartList } from './partListUtils';
+import { getNewGroupByPartOptions, getNewSelectPartOptions, makePartList } from './partListUtils';
 
 type Props = {
   query: InfluxQuery;
@@ -52,8 +52,12 @@ function getTemplateVariableOptions() {
 }
 
 // helper function to make it easy to call this from the widget-render-code
-function withTemplateVariableOptions(optionsPromise: Promise<string[]>): Promise<string[]> {
+function withTemplateVariableOptions(optionsPromise: Promise<string[]>, filter?: string): Promise<string[]> {
-  return optionsPromise.then((options) => [...getTemplateVariableOptions(), ...options]);
+  let templateVariableOptions = getTemplateVariableOptions();
+  if (filter) {
+    templateVariableOptions = templateVariableOptions.filter((tvo) => tvo.indexOf(filter) > -1);
+  }
+  return optionsPromise.then((options) => [...templateVariableOptions, ...options]);
 }
 
 // it is possible to add fields into the `InfluxQueryTag` structures, and they do work,
@@ -142,7 +146,8 @@ export const Editor = (props: Props): JSX.Element => {
                   filterTags(query.tags ?? [], keys),
                   datasource
                 )
-              )
+              ),
+              filter
             )
           }
           onChange={handleFromSectionChange}

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx

@@ -1,10 +1,10 @@
-import { cx, css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import debouncePromise from 'debounce-promise';
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
-import { InlineLabel, Select, AsyncSelect, Input } from '@grafana/ui';
+import { AsyncSelect, InlineLabel, Input, Select } from '@grafana/ui';
 
 import { useShadowedState } from '../useShadowedState';
 
@@ -86,6 +86,7 @@ const SelReload = ({ loadOptions, allowCustomValue, onChange, onClose }: SelRelo
         allowCustomValue={allowCustomValue}
         loadOptions={debouncedLoadOptions}
         onChange={onChange}
+        createOptionPosition="first"
       />
     </div>
   );
@@ -116,6 +117,7 @@ const SelSingleLoad = ({ loadOptions, allowCustomValue, onChange, onClose }: Sel
         allowCustomValue={allowCustomValue}
         options={loadState.value ?? []}
         onChange={onChange}
+        createOptionPosition="first"
       />
     </div>
   );