add macros name intersection alert

Author: Roman M

src/views/QueryEditor/QueryEditor.tsx

@@ -12,6 +12,7 @@ import {useAutocompleteData} from './hooks/useAutocompletionData';
 import {initializeQueryDefaults, initializeQueryDefaultsForVariables} from './helpers/initializeQueryDefaults';
 import './QueryEditor.css';
 import {getAdhocFilters} from './helpers/getAdHocFilters';
+import {detectVariableMacroIntersections, createVariableMacroConflictWarning} from './helpers/detectVariableMacroIntersections';
 
 export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDataSourceOptions>): any {
   const { datasource, query, onChange, onRunQuery, data } = props;
@@ -41,6 +42,10 @@ export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDat
   const adHocFiltersKey = adHocFilters.map(({ key, operator, value }) => `${key}${operator}${value}`).join(',');
   const areAdHocFiltersAvailable = !!adHocFilters.length;
 
+  // Detect variable/macro name conflicts
+  const variableMacroConflicts = detectVariableMacroIntersections();
+  const conflictWarning = createVariableMacroConflictWarning(variableMacroConflicts);
+
   useEffect(() => {
     if (props.app !== CoreApp.Explore) {
       onChange({ ...initializedQuery, adHocFilters: adHocFilters });
@@ -62,6 +67,16 @@ export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDat
         hasAutocompleteError={hasPermissionError}
       />
       {error ? <Alert title={error} elevated style={{ marginTop: '5px', marginBottom: '5px' }} /> : null}
+      {conflictWarning ? (
+        <Alert 
+          title="Variable/Macro Name Conflict Warning" 
+          severity="warning" 
+          elevated 
+          style={{ marginTop: '5px', marginBottom: '5px' }}
+        >
+          {conflictWarning}
+        </Alert>
+      ) : null}
       {editorMode === EditorMode.Builder && (
         <QueryBuilder
           query={initializedQuery}
@@ -122,6 +137,10 @@ export function QueryEditorVariable(props: QueryEditorProps<CHDataSource, CHQuer
   const adHocFiltersKey = adHocFilters.map(({ key, operator, value }) => `${key}${operator}${value}`).join(',');
   const areAdHocFiltersAvailable = !!adHocFilters.length;
 
+  // Detect variable/macro name conflicts
+  const variableMacroConflicts = detectVariableMacroIntersections();
+  const conflictWarning = createVariableMacroConflictWarning(variableMacroConflicts);
+
   useEffect(() => {
     if (props.app !== CoreApp.Explore) {
       onChange({ ...initializedQuery, adHocFilters: adHocFilters });
@@ -142,6 +161,16 @@ export function QueryEditorVariable(props: QueryEditorProps<CHDataSource, CHQuer
         hasAutocompleteError={false}
       />
       {error ? <Alert title={error} elevated style={{ marginTop: '5px', marginBottom: '5px' }} /> : null}
+      {conflictWarning ? (
+        <Alert 
+          title="Variable/Macro Name Conflict Warning" 
+          severity="warning" 
+          elevated 
+          style={{ marginTop: '5px', marginBottom: '5px' }}
+        >
+          {conflictWarning}
+        </Alert>
+      ) : null}
       {editorMode === EditorMode.Builder && (
         <QueryBuilder
           query={initializedQuery}

src/views/QueryEditor/helpers/detectVariableMacroIntersections.ts

@@ -0,0 +1,40 @@
+import { getTemplateSrv } from '@grafana/runtime';
+import macros from '../components/QueryTextEditor/editor/constants/macros';
+
+/**
+ * Detects potential name intersections between Grafana template variables and ClickHouse macros
+ * Returns an array of conflicting names
+ */
+export function detectVariableMacroIntersections(): string[] {
+  const templateSrv = getTemplateSrv();
+  const variables = templateSrv.getVariables();
+  const conflicts: string[] = [];
+
+  const variableNames = variables.map(variable => `$${variable.name}`);
+
+  // Check for intersections with macros
+  for (const variableName of variableNames) {
+    if (macros.includes(variableName)) {
+      conflicts.push(variableName);
+    }
+  }
+
+  return conflicts;
+}
+
+/**
+ * Creates a warning message for variable/macro name conflicts
+ */
+export function createVariableMacroConflictWarning(conflicts: string[]): string {
+  if (conflicts.length === 0) {
+    return '';
+  }
+
+  const conflictList = conflicts.join(', ');
+  
+  if (conflicts.length === 1) {
+    return `Template variable "${conflictList}" has the same name as a ClickHouse macro. This may cause unexpected behavior during query processing.`;
+  } else {
+    return `Template variables "${conflictList}" have the same names as ClickHouse macros. This may cause unexpected behavior during query processing.`;
+  }
+}