AdHocVariables: Move custom value option to top for regex operations

package.json

@@ -104,7 +104,7 @@
     "@grafana/data": "^11.3.0",
     "@grafana/lezer-logql": "^0.2.7",
     "@grafana/runtime": "^11.3.0",
-    "@grafana/scenes": "6.1.1",
+    "@grafana/scenes": "@grafana/[email protected]",
     "@grafana/ui": "^11.3.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@lezer/common": "^1.2.1",

src/Components/IndexScene/IndexScene.tsx

@@ -23,8 +23,8 @@ import {
   SceneVariableSet,
 } from '@grafana/scenes';
 import {
-  AppliedPattern,
   AdHocFiltersWithLabelsAndMeta,
+  AppliedPattern,
   EXPLORATION_DS,
   MIXED_FORMAT_EXPR,
   PENDING_FIELDS_EXPR,
@@ -87,7 +87,11 @@ import { JsonData } from '../AppConfig/AppConfig';
 import { reportAppInteraction } from '../../services/analytics';
 import { getDetectedFieldValuesTagValuesProvider, getLabelsTagValuesProvider } from '../../services/TagValuesProviders';
 import { logger } from '../../services/logger';
-import { getFieldsKeysProvider, getLabelsTagKeysProvider } from '../../services/TagKeysProviders';
+import {
+  getFieldsKeysProvider,
+  getLabelsTagKeysProvider,
+  resetCustomValuePosition,
+} from '../../services/TagKeysProviders';
 import { getLokiDatasource } from '../../services/scenes';
 import { ShowLogsButtonScene } from './ShowLogsButtonScene';
 import { CustomVariableValueSelectors } from './CustomVariableValueSelectors';
@@ -384,6 +388,8 @@ export class IndexScene extends SceneObjectBase<IndexSceneState> {
    */
   private getCombinedFieldsTagKeysProvider() {
     return (variable: AdHocFiltersVariable, currentKey: string | null) => {
+      // Reset custom value position to bottom, it will be pushed to top if a regex operation is selected when we fetch the values
+      resetCustomValuePosition(variable);
       // Current key seems to always be null, I think it's only supported for other variable types that allow editing the key without first removing the value/operator?
       const metadataVar = getMetadataVariable(this);
       const fieldVar = getFieldsVariable(this);

src/services/TagKeysProviders.ts

@@ -27,6 +27,7 @@ export async function getLabelsTagKeysProvider(variable: AdHocFiltersVariable):
     logger.error(new Error('getTagKeysProvider: Invalid datasource!'));
     throw new Error('Invalid datasource!');
   }
+  resetCustomValuePosition(variable);
   const datasource = datasource_ as LokiDatasource;
 
   if (datasource && datasource.getTagKeys) {
@@ -73,6 +74,7 @@ export async function getFieldsKeysProvider({
     logger.error(new Error('getTagKeysProvider: Invalid datasource!'));
     throw new Error('Invalid datasource!');
   }
+
   const datasource = datasource_ as LokiDatasource;
   const languageProvider = datasource.languageProvider as LokiLanguageProviderWithDetectedLabelValues;
 
@@ -197,3 +199,9 @@ async function fetchDetectedFields(
     }
   });
 }
+
+export function resetCustomValuePosition(variable: AdHocFiltersVariable) {
+  variable.setState({
+    allowCustomValue: true,
+  });
+}

src/services/TagValuesProviders.ts

@@ -48,6 +48,18 @@ export interface LokiLanguageProviderWithDetectedLabelValues {
   ) => Promise<DetectedFieldsResult | Error>;
 }
 
+function setCustomValuePosition(filter: AdHocFilterWithLabels, variable: AdHocFiltersVariable) {
+  if (isOperatorRegex(filter.operator)) {
+    variable.setState({
+      allowCustomValue: 'first',
+    });
+  } else {
+    variable.setState({
+      allowCustomValue: true,
+    });
+  }
+}
+
 export const getDetectedFieldValuesTagValuesProvider = async (
   filter: AdHocFiltersWithLabelsAndMeta,
   variable: AdHocFiltersVariable,
@@ -65,6 +77,7 @@ export const getDetectedFieldValuesTagValuesProvider = async (
     logger.error(new Error('getTagValuesProvider: Invalid datasource!'));
     throw new Error('Invalid datasource!');
   }
+  setCustomValuePosition(filter, variable);
 
   // Assert datasource is Loki
   const lokiDatasource = datasourceUnknownType as LokiDatasource;
@@ -182,6 +195,8 @@ export async function getLabelsTagValuesProvider(
   replace?: boolean;
   values: GetTagResponse | MetricFindValue[];
 }> {
+  setCustomValuePosition(filter, variable);
+
   const datasource_ = await getDataSourceSrv().get(getDataSource(variable));
   if (!(datasource_ instanceof DataSourceWithBackend)) {
     logger.error(new Error('getTagValuesProvider: Invalid datasource!'));

src/services/getOperatorDescription.ts

@@ -1,5 +1,7 @@
 import { FilterOp, FilterOpType } from './filterTypes';
-import { logger } from './logger';
+// Importing the logger here breaks e2e tests as this file is included in the explore.ts
+// I do not know why though
+// import { logger } from './logger';
 
 export function getOperatorDescription(op: FilterOpType): string {
   if (op === FilterOp.NotEqual) {
@@ -28,6 +30,7 @@ export function getOperatorDescription(op: FilterOpType): string {
   }
 
   const error = new Error('Invalid operator!');
-  logger.error(error, { msg: 'Invalid operator', operator: op });
   throw error;
+  // logger.error(error, { msg: 'Invalid operator', operator: op });
+  // throw error;
 }

tests/fixtures/explore.ts

@@ -5,6 +5,7 @@ import { expect } from '@grafana/plugin-e2e';
 
 import { LokiQuery } from '../../src/services/lokiQuery';
 import { FilterOp, FilterOpType } from '../../src/services/filterTypes';
+import { isOperatorRegex } from '../../src/services/operatorHelpers';
 
 export interface PlaywrightRequest {
   post: any;
@@ -378,8 +379,10 @@ export class ExplorePage {
     await this.getOperatorLocator(operator).click();
     // Enter custom value
     await this.page.keyboard.type(text);
-    // Need to scroll to the bottom of the list
-    await this.page.keyboard.press('ArrowUp');
+    if (!isOperatorRegex(operator)) {
+      await this.page.keyboard.press('ArrowUp');
+    }
+
     // Select custom value
     await this.page.getByRole('option', { name: /Use custom value/ }).click();
     // Close the label name dropdown that opens after adding a value

yarn.lock

@@ -1114,10 +1114,10 @@
     rxjs "7.8.1"
     tslib "2.7.0"
 
-"@grafana/scenes@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@grafana/scenes/-/scenes-6.1.1.tgz#04383df0f628d3233ce1475584d320406d0590ad"
-  integrity sha512-VLFNxwEFemW9/vWC0ygq1fIZ8GbCYU41UZajMtBjv1DCCY3eYgICMH3JLbyqcV3BpfTPE5yQzgbKvUMFRu4KPw==
+"@grafana/scenes@@grafana/[email protected]":
+  version "6.2.0--canary.1066.13575913588.0"
+  resolved "https://registry.yarnpkg.com/@grafana/scenes/-/scenes-6.2.0--canary.1066.13575913588.0.tgz#23f666dfd342d54374f24139b3ed3f7b9c83b64e"
+  integrity sha512-Z+DL7BAO6dMW0geyHBKNzrCnlxHo1MwEvcFnZBjlzyN9JIULTiKYPcfmsxLm8cUwhh3k77NyQTylaNS8KGGBMA==
   dependencies:
     "@floating-ui/react" "^0.26.16"
     "@leeoniya/ufuzzy" "^1.0.16"