From dc26cdf6c93b609dbbdf388e39cb9980e37b61e1 Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Wed, 30 Aug 2023 11:26:09 +0100
Subject: [PATCH] Tempo: Reset metrics summary tag when scope changes (#74028)

Reset tag when scope changes
---
 .../SearchTraceQLEditor/GroupByField.test.tsx |  1 +
 .../SearchTraceQLEditor/GroupByField.tsx      | 35 ++++++++++---------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.test.tsx
index 9c010e7057e..af230d44ecf 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.test.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.test.tsx
@@ -63,6 +63,7 @@ describe('GroupByField', () => {
       const groupByFilter = query.groupBy?.find((f) => f.id === 'group-by-id');
       expect(groupByFilter).not.toBeNull();
       expect(groupByFilter?.scope).toBe('resource');
+      expect(groupByFilter?.tag).toBe('');
     }
   });
 
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx
index 2fb1682bcba..93768010da0 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx
@@ -78,44 +78,45 @@ export const GroupByField = (props: Props) => {
           <div key={f.id}>
             <HorizontalGroup spacing={'none'} width={'auto'}>
               <Select
-                options={scopeOptions}
-                value={f.scope}
-                onChange={(v) => {
-                  updateFilter({ ...f, scope: v?.value });
-                }}
-                placeholder="Select scope"
                 aria-label={`Select scope for filter ${i + 1}`}
+                onChange={(v) => {
+                  updateFilter({ ...f, scope: v?.value, tag: '' });
+                }}
+                options={scopeOptions}
+                placeholder="Select scope"
+                value={f.scope}
               />
               <Select
+                aria-label={`Select tag for filter ${i + 1}`}
+                isClearable
+                isLoading={isTagsLoading}
+                key={f.tag}
+                onChange={(v) => {
+                  updateFilter({ ...f, tag: v?.value });
+                }}
                 options={getTags(f)?.map((t) => ({
                   label: t,
                   value: t,
                 }))}
-                value={f.tag || ''}
-                onChange={(v) => {
-                  updateFilter({ ...f, tag: v?.value });
-                }}
                 placeholder="Select tag"
-                aria-label={`Select tag for filter ${i + 1}`}
-                isLoading={isTagsLoading}
-                isClearable
+                value={f.tag || ''}
               />
               <AccessoryButton
-                variant="secondary"
+                aria-label={`Remove tag for filter ${i + 1}`}
                 icon="times"
                 onClick={() => removeFilter(f)}
                 tooltip="Remove tag"
-                aria-label={`Remove tag for filter ${i + 1}`}
+                variant="secondary"
               />
 
               {i === (query.groupBy?.length ?? 0) - 1 && (
                 <span className={styles.addFilter}>
                   <AccessoryButton
-                    variant="secondary"
+                    aria-label="Add tag"
                     icon="plus"
                     onClick={() => addFilter()}
                     tooltip="Add tag"
-                    aria-label="Add tag"
+                    variant="secondary"
                   />
                 </span>
               )}