Action button refactor

src/components/AckButton/AckButton.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { ActionButton } from '../ActionButton/ActionButton';
+
+interface Props {
+  className?: string;
+  onClick(): void;
+}
+
+export const AckButton: FC<Props> = ({ className, onClick }) => {
+  return (
+    <ActionButton className={className} icon="reply-all" tooltip="Acknowledge problem" onClick={onClick} />
+  );
+};

src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,71 @@
+import React, { FC } from 'react';
+import { cx, css } from 'emotion';
+import { stylesFactory, useTheme } from '@grafana/ui';
+import { GrafanaTheme, GrafanaThemeType } from '@grafana/data';
+import { FAIcon } from '../FAIcon/FAIcon';
+import { Tooltip } from '../Tooltip/Tooltip';
+
+interface Props {
+  icon?: string;
+  width?: number;
+  tooltip?: string;
+  className?: string;
+  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
+}
+
+export const ActionButton: FC<Props> = ({ icon, width, tooltip, className, children, onClick }) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+  const buttonClass = cx(
+    'btn',
+    styles.button,
+    css`width: ${width || 3}rem`,
+    className,
+  );
+
+  let button = (
+    <button className={buttonClass} onClick={onClick}>
+      {icon && <FAIcon icon={icon} customClass={styles.icon} />}
+      {children}
+    </button>
+  );
+
+  if (tooltip) {
+    button = (
+      <Tooltip placement="bottom" content={tooltip}>
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  const actionBlue = theme.type === GrafanaThemeType.Light ? '#497dc0' : '#005f81';
+  const hoverBlue = theme.type === GrafanaThemeType.Light ? '#456ba4' : '#354f77';
+
+  return {
+    button: css`
+      height: 2rem;
+      background-image: none;
+      background-color: ${actionBlue};
+      border: 1px solid ${theme.colors.gray1};
+      border-radius: 1px;
+      color: ${theme.colors.text};
+
+      i {
+        vertical-align: middle;
+      }
+
+      &:hover {
+        background-color: ${hoverBlue};
+      }
+    `,
+    icon: css`
+      i {
+        color: ${theme.colors.text};
+      }
+    `,
+  };
+});

src/components/ExploreButton/ExploreButton.tsx

@@ -1,13 +1,10 @@
 import React, { FC } from 'react';
-import { cx, css } from 'emotion';
-import { stylesFactory, useTheme } from '@grafana/ui';
-import { GrafanaTheme, GrafanaThemeType } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
 import { MODE_METRICS, MODE_ITEMID } from '../../datasource-zabbix/constants';
 import { renderUrl } from '../../panel-triggers/utils';
 import { expandItemName } from '../../datasource-zabbix/utils';
-import { FAIcon } from '../FAIcon/FAIcon';
 import { ProblemDTO } from '../../datasource-zabbix/types';
+import { ActionButton } from '../ActionButton/ActionButton';
 
 interface Props {
   problem: ProblemDTO;
@@ -15,14 +12,10 @@ interface Props {
 }
 
 export const ExploreButton: FC<Props> = ({ problem, panelId }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
-  const buttonClass = cx('btn', styles.button);
-
   return (
-    <button className={buttonClass} onClick={() => openInExplore(problem, panelId)}>
-      <FAIcon icon="compass" customClass={styles.icon} /><span>Explore</span>
-    </button>
+    <ActionButton icon="compass" width={6} onClick={() => openInExplore(problem, panelId)}>
+      Explore
+    </ActionButton>
   );
 };
 
@@ -59,31 +52,3 @@ const openInExplore = (problem: ProblemDTO, panelId: number) => {
   const url = renderUrl('/explore', { left: exploreState });
   getLocationSrv().update({ path: url, query: {} });
 };
-
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const actionBlue = theme.type === GrafanaThemeType.Light ? '#497dc0' : '#005f81';
-  return {
-    button: css`
-      width: 6rem;
-      height: 2rem;
-      background-image: none;
-      background-color: ${actionBlue};
-      border: 1px solid darken(${actionBlue}, 6%);
-      border-radius: 1px;
-      margin-right: 1.6rem;
-
-      i {
-        vertical-align: middle;
-      }
-
-      &:hover {
-        background-color: darken(${actionBlue}, 4%);
-      }
-    `,
-    icon: css`
-      i {
-        color: ${theme.colors.text};
-      }
-    `,
-  };
-});

src/components/index.ts

@@ -1,5 +1,6 @@
 export { GFHeartIcon } from './GFHeartIcon/GFHeartIcon';
 export { FAIcon } from './FAIcon/FAIcon';
+export { AckButton } from './AckButton/AckButton';
 export { ExploreButton } from './ExploreButton/ExploreButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { ModalController } from './Modal/ModalController';