From 07b08fc09f1d212cb3712f5081fcfb13b4a3fbf1 Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Wed, 11 Oct 2023 09:51:48 +0100
Subject: [PATCH] Tempo: Disable show matches only button when no matches
 (#76124)

* Disable show matches only button when there are no matches

* Update tests
---
 .../TracePageHeader/SearchBar/TracePageSearchBar.tsx |  8 +++-----
 .../TracePageHeader/SpanFilters/SpanFilters.test.tsx | 12 +++++++++---
 2 files changed, 12 insertions(+), 8 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 ff8b6397e10..86f574891bc 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
@@ -89,12 +89,14 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
                 value={showSpanFilterMatchesOnly}
                 onChange={(value) => setShowSpanFilterMatchesOnly(value.currentTarget.checked ?? false)}
                 label="Show matches only switch"
+                disabled={!spanFilterMatches?.size}
               />
               <Button
                 onClick={() => setShowSpanFilterMatchesOnly(!showSpanFilterMatchesOnly)}
                 className={styles.clearMatchesButton}
                 variant="secondary"
                 fill="text"
+                disabled={!spanFilterMatches?.size}
               >
                 Show matches only
               </Button>
@@ -139,16 +141,12 @@ export const getStyles = (theme: GrafanaTheme2) => {
       margin: 0 0 0 25px;
       vertical-align: middle;
       align-items: center;
-
-      span {
-        cursor: pointer;
-      }
     `,
     clearMatchesButton: css`
       color: ${theme.colors.text.primary};
+
       &:hover {
         background: inherit;
-        color: inherit;
       }
     `,
     nextPrevResult: css`
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 84fd36a0240..05f52f3e6c2 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
@@ -39,11 +39,17 @@ const trace: Trace = {
       logs: [{ fields: [{ key: 'LogKey1', type: 'string', value: 'LogValue1' }] }],
     },
   ],
+  processes: {
+    '1ed38015486087ca': {
+      serviceName: 'Service0',
+      tags: [],
+    },
+  },
 } as unknown as Trace;
 
 describe('SpanFilters', () => {
   let user: ReturnType<typeof userEvent.setup>;
-  const SpanFiltersWithProps = ({ showFilters = true }) => {
+  const SpanFiltersWithProps = ({ showFilters = true, matches }: { showFilters?: boolean; matches?: Set<string> }) => {
     const [search, setSearch] = useState(defaultFilters);
     const [showSpanFilterMatchesOnly, setShowSpanFilterMatchesOnly] = useState(false);
     const props = {
@@ -54,7 +60,7 @@ describe('SpanFilters', () => {
       setShowSpanFilterMatchesOnly,
       search,
       setSearch,
-      spanFilterMatches: undefined,
+      spanFilterMatches: matches,
       setFocusedSpanIdForSearch: jest.fn(),
       datasourceType: 'tempo',
     };
@@ -197,7 +203,7 @@ describe('SpanFilters', () => {
   });
 
   it('should allow resetting filters', async () => {
-    render(<SpanFiltersWithProps />);
+    render(<SpanFiltersWithProps matches={new Set('1ed38015486087ca')} />);
     const clearFiltersButton = screen.getByRole('button', { name: 'Clear filters button' });
     expect(clearFiltersButton).toBeInTheDocument();
     expect((clearFiltersButton as HTMLButtonElement)['disabled']).toBe(true);