1import React from 'react';
2import { css, cx } from '@emotion/css';
3import { GrafanaTheme2 } from '@grafana/data';
4import { Button, HorizontalGroup, useTheme2 } from '@grafana/ui';
5
6type Props = {
7  addQueryRowButtonDisabled?: boolean;
8  addQueryRowButtonHidden?: boolean;
9  richHistoryButtonActive?: boolean;
10  queryInspectorButtonActive?: boolean;
11
12  onClickAddQueryRowButton: () => void;
13  onClickRichHistoryButton: () => void;
14  onClickQueryInspectorButton: () => void;
15};
16
17const getStyles = (theme: GrafanaTheme2) => {
18  return {
19    containerMargin: css`
20      margin-top: ${theme.spacing(2)};
21    `,
22  };
23};
24export function SecondaryActions(props: Props) {
25  const theme = useTheme2();
26  const styles = getStyles(theme);
27  return (
28    <div className={styles.containerMargin}>
29      <HorizontalGroup>
30        {!props.addQueryRowButtonHidden && (
31          <Button
32            variant="secondary"
33            aria-label="Add row button"
34            onClick={props.onClickAddQueryRowButton}
35            disabled={props.addQueryRowButtonDisabled}
36            icon="plus"
37          >
38            Add query
39          </Button>
40        )}
41        <Button
42          variant="secondary"
43          aria-label="Rich history button"
44          className={cx({ ['explore-active-button']: props.richHistoryButtonActive })}
45          onClick={props.onClickRichHistoryButton}
46          icon="history"
47        >
48          Query history
49        </Button>
50        <Button
51          variant="secondary"
52          aria-label="Query inspector button"
53          className={cx({ ['explore-active-button']: props.queryInspectorButtonActive })}
54          onClick={props.onClickQueryInspectorButton}
55          icon="info-circle"
56        >
57          Inspector
58        </Button>
59      </HorizontalGroup>
60    </div>
61  );
62}
63