From e80ef522bbe77b85620843a530c612c1ebf11524 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Wed, 2 Oct 2024 13:55:48 +0200
Subject: [PATCH] Alerting: Hide query name when using simplified mode in the
 alert rule (#93779)

* Hide query name when using simplified mode in the alert rule

* rename hideName to hideRefId
---
 .../unified/components/rule-editor/QueryWrapper.tsx   |  1 +
 .../app/features/query/components/QueryEditorRow.tsx  |  5 ++++-
 .../query/components/QueryEditorRowHeader.tsx         | 11 ++++++-----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
index d5468f64cde..e7366b34f2e 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
@@ -180,6 +180,7 @@ export const QueryWrapper = ({
       <div className={styles.wrapper}>
         <QueryEditorRow<AlertDataQuery>
           alerting
+          hideRefId={!isAdvancedMode}
           hideActionButtons={!isAdvancedMode}
           collapsable={false}
           dataSource={dsSettings}
diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index fb76109bc45..959fd40e73e 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -69,6 +69,7 @@ export interface Props<TQuery extends DataQuery> {
   onQueryRemoved?: () => void;
   onQueryToggled?: (queryStatus?: boolean | undefined) => void;
   collapsable?: boolean;
+  hideRefId?: boolean;
 }
 
 interface State<TQuery extends DataQuery> {
@@ -509,7 +510,8 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   };
 
   renderHeader = (props: QueryOperationRowRenderProps) => {
-    const { alerting, query, dataSource, onChangeDataSource, onChange, queries, renderHeaderExtras } = this.props;
+    const { alerting, query, dataSource, onChangeDataSource, onChange, queries, renderHeaderExtras, hideRefId } =
+      this.props;
 
     return (
       <QueryEditorRowHeader
@@ -523,6 +525,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
         collapsedText={!props.isOpen ? this.renderCollapsedText() : null}
         renderExtras={renderHeaderExtras}
         alerting={alerting}
+        hideRefId={hideRefId}
       />
     );
   };
diff --git a/public/app/features/query/components/QueryEditorRowHeader.tsx b/public/app/features/query/components/QueryEditorRowHeader.tsx
index e2bc2f63801..be1ff4eeed9 100644
--- a/public/app/features/query/components/QueryEditorRowHeader.tsx
+++ b/public/app/features/query/components/QueryEditorRowHeader.tsx
@@ -1,10 +1,10 @@
 import { css, cx } from '@emotion/css';
-import { ReactNode, useState } from 'react';
 import * as React from 'react';
+import { ReactNode, useState } from 'react';
 
 import { DataQuery, DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Icon, Input, FieldValidationMessage, useStyles2 } from '@grafana/ui';
+import { FieldValidationMessage, Icon, Input, useStyles2 } from '@grafana/ui';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 
 export interface Props<TQuery extends DataQuery = DataQuery> {
@@ -18,10 +18,11 @@ export interface Props<TQuery extends DataQuery = DataQuery> {
   onClick: (e: React.MouseEvent) => void;
   collapsedText: string | null;
   alerting?: boolean;
+  hideRefId?: boolean;
 }
 
 export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQuery>) => {
-  const { query, queries, onChange, collapsedText, renderExtras, hidden } = props;
+  const { query, queries, onChange, collapsedText, renderExtras, hidden, hideRefId = false } = props;
 
   const styles = useStyles2(getStyles);
   const [isEditing, setIsEditing] = useState<boolean>(false);
@@ -85,7 +86,7 @@ export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQue
   return (
     <>
       <div className={styles.wrapper}>
-        {!isEditing && (
+        {!hideRefId && !isEditing && (
           <button
             className={styles.queryNameWrapper}
             aria-label={selectors.components.QueryEditorRow.title(query.refId)}
@@ -99,7 +100,7 @@ export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQue
           </button>
         )}
 
-        {isEditing && (
+        {!hideRefId && isEditing && (
           <>
             <Input
               type="text"