From e0659c05da0c1c8db3cbf0b212e63a48b82fb4ff Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Fri, 22 Sep 2023 09:02:38 +0100
Subject: [PATCH] Tracing: Span filters reset show matches only (#75150)

* Reset show matches only when clear button pressed

* Add test

* Update test
---
 .../TracePageHeader/SearchBar/TracePageSearchBar.tsx  |  5 +++--
 .../TracePageHeader/SpanFilters/SpanFilters.test.tsx  | 11 +++++++++--
 .../TracePageHeader/SpanFilters/SpanFilters.tsx       |  3 ++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
index e5890f1f6d5..ff8b6397e10 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
@@ -64,9 +64,10 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
       search.tags.length > 1 ||
       search.tags.some((tag) => {
         return tag.key;
-      })
+      }) ||
+      showSpanFilterMatchesOnly
     );
-  }, [search.serviceName, search.spanName, search.from, search.to, search.tags]);
+  }, [search.serviceName, search.spanName, search.from, search.to, search.tags, showSpanFilterMatchesOnly]);
 
   return (
     <div className={styles.container}>
diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx
index 7abb4348814..84fd36a0240 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx
@@ -45,12 +45,13 @@ describe('SpanFilters', () => {
   let user: ReturnType<typeof userEvent.setup>;
   const SpanFiltersWithProps = ({ showFilters = true }) => {
     const [search, setSearch] = useState(defaultFilters);
+    const [showSpanFilterMatchesOnly, setShowSpanFilterMatchesOnly] = useState(false);
     const props = {
       trace: trace,
       showSpanFilters: showFilters,
       setShowSpanFilters: jest.fn(),
-      showSpanFilterMatchesOnly: false,
-      setShowSpanFilterMatchesOnly: jest.fn(),
+      showSpanFilterMatchesOnly,
+      setShowSpanFilterMatchesOnly,
       search,
       setSearch,
       spanFilterMatches: undefined,
@@ -210,12 +211,18 @@ describe('SpanFilters', () => {
     await selectAndCheckValue(user, tagKey, 'TagKey0');
     await selectAndCheckValue(user, tagValue, 'TagValue0');
 
+    const matchesSwitch = screen.getByRole('checkbox', { name: 'Show matches only switch' });
+    expect(matchesSwitch).not.toBeChecked();
+    await user.click(matchesSwitch);
+    expect(matchesSwitch).toBeChecked();
+
     expect((clearFiltersButton as HTMLButtonElement)['disabled']).toBe(false);
     await user.click(clearFiltersButton);
     expect(screen.queryByText('Service0')).not.toBeInTheDocument();
     expect(screen.queryByText('Span0')).not.toBeInTheDocument();
     expect(screen.queryByText('TagKey0')).not.toBeInTheDocument();
     expect(screen.queryByText('TagValue0')).not.toBeInTheDocument();
+    expect(matchesSwitch).not.toBeChecked();
   });
 
   it('renders buttons when span filters is collapsed', async () => {
diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx
index bfef4eff74a..2bb219f93a1 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx
@@ -69,7 +69,8 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
     setTagKeys(undefined);
     setTagValues({});
     setSearch(defaultFilters);
-  }, [setSearch]);
+    setShowSpanFilterMatchesOnly(false);
+  }, [setSearch, setShowSpanFilterMatchesOnly]);
 
   useEffect(() => {
     clear();