Tempo: Disable show matches only button when no matches (#76124)

* Disable show matches only button when there are no matches

* Update tests
This commit is contained in:
Joey 2023-10-11 09:51:48 +01:00 committed by GitHub
parent 608f066ca5
commit 07b08fc09f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 8 deletions

View File

@ -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`

View File

@ -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);