From 47a2ee5b24c20c770859ed76a3f9b8a89115d634 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 18 Jun 2020 16:22:57 +0300
Subject: [PATCH] Grafana UI: Apply disabled styles to LinkButton (#25693)

* Grafana UI: Apply disabled styles to LinkButton

* Grafana UI: Add disabled knob
---
 .../src/components/Button/Button.story.tsx    |  8 +++---
 .../src/components/Button/Button.tsx          | 28 +++++++++++++++----
 .../src/components/Logs/getLogRowStyles.ts    |  2 +-
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx
index a9055562a74..ca37314fc5d 100644
--- a/packages/grafana-ui/src/components/Button/Button.story.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.story.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { select, text } from '@storybook/addon-knobs';
+import { select, text, boolean } from '@storybook/addon-knobs';
 import { Button, ButtonVariant } from './Button';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { getIconKnob } from '../../utils/storybook/knobs';
@@ -24,11 +24,11 @@ const sizes = ['sm', 'md', 'lg'];
 export const simple = () => {
   const variant = select('Variant', variants, 'primary');
   const size = select('Size', sizes, 'md');
-  const buttonText = text('text', 'Button');
+  const buttonText = text('Text', 'Button');
+  const disabled = boolean('Disabled', false);
   const icon = getIconKnob();
-
   return (
-    <Button variant={variant as ButtonVariant} size={size as ComponentSize} icon={icon}>
+    <Button variant={variant as ButtonVariant} size={size as ComponentSize} icon={icon} disabled={disabled}>
       {buttonText}
     </Button>
   );
diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index 48a76d6ca86..0cb13a99ea6 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -72,6 +72,12 @@ export interface StyleProps {
   hasText: boolean;
 }
 
+const disabledStyles = css`
+  cursor: not-allowed;
+  opacity: 0.65;
+  box-shadow: none;
+`;
+
 export const getButtonStyles = stylesFactory((props: StyleProps) => {
   const { theme, variant } = props;
   const { padding, fontSize, height } = getPropertiesForButtonSize(props);
@@ -98,9 +104,7 @@ export const getButtonStyles = stylesFactory((props: StyleProps) => {
 
         &[disabled],
         &:disabled {
-          cursor: not-allowed;
-          opacity: 0.65;
-          box-shadow: none;
+          ${disabledStyles};
         }
       `,
       getFocusStyle(theme),
@@ -157,7 +161,7 @@ Button.displayName = 'Button';
 
 type ButtonLinkProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;
 export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
-  ({ variant, icon, children, className, ...otherProps }, ref) => {
+  ({ variant, icon, children, className, disabled, ...otherProps }, ref) => {
     const theme = useContext(ThemeContext);
     const styles = getButtonStyles({
       theme,
@@ -167,8 +171,22 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       hasIcon: icon !== undefined,
     });
 
+    const linkButtonStyles =
+      disabled &&
+      cx(
+        disabledStyles,
+        css`
+          pointer-events: none;
+        `
+      );
+
     return (
-      <a className={cx(styles.button, className)} {...otherProps} ref={ref}>
+      <a
+        className={cx(styles.button, linkButtonStyles, className)}
+        {...otherProps}
+        ref={ref}
+        tabIndex={disabled ? -1 : 0}
+      >
         <ButtonContent icon={icon} size={otherProps.size}>
           {children}
         </ButtonContent>
diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
index 03d19297f9f..037ad2c5e2f 100644
--- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
+++ b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
@@ -138,7 +138,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
       white-space: pre-wrap;
       word-break: break-all;
     `,
-    //Log details sepcific CSS
+    //Log details specific CSS
     logDetailsContainer: css`
       label: logs-row-details-table;
       border: 1px solid ${borderColor};