From 0012d2d81fee889665d515226062c0eb122b490a Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Tue, 31 May 2022 09:40:03 +0100
Subject: [PATCH] UI/Button: Remove deprecated "link" variant (#49843)

---
 .../src/components/Button/Button.tsx          | 31 ++++---------------
 .../input-datasource/src/InputQueryEditor.tsx |  2 +-
 .../components/FolderFilter/FolderFilter.tsx  |  2 +-
 .../PanelTypeFilter/PanelTypeFilter.tsx       |  2 +-
 .../serviceaccounts/ServiceAccountProfile.tsx |  2 +-
 .../configuration/MappingsConfiguration.tsx   |  2 +-
 .../plugins/panel/nodeGraph/ViewControls.tsx  |  2 +-
 7 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index 978d7dea8fa..2479687518a 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -10,7 +10,7 @@ import { ComponentSize } from '../../types/size';
 import { getPropertiesForButtonSize } from '../Forms/commonStyles';
 import { Icon } from '../Icon/Icon';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link';
+export type ButtonVariant = 'primary' | 'secondary' | 'destructive';
 export const allButtonVariants: ButtonVariant[] = ['primary', 'secondary', 'destructive'];
 export type ButtonFill = 'solid' | 'outline' | 'text';
 export const allButtonFills: ButtonFill[] = ['solid', 'outline', 'text'];
@@ -53,11 +53,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       iconOnly: !children,
     });
 
-    deprecatedPropWarning(
-      variant === 'link',
-      `${Button.displayName}: Prop variant="link" is deprecated. Please use fill="text".`
-    );
-
     return (
       <button className={cx(styles.button, className)} type={type} {...otherProps} ref={ref}>
         {icon && <Icon name={icon} size={size} className={styles.icon} />}
@@ -108,11 +103,6 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       className
     );
 
-    deprecatedPropWarning(
-      variant === 'link',
-      `${LinkButton.displayName}: Prop variant="link" is deprecated. Please use fill="text".`
-    );
-
     return (
       <a className={linkButtonStyles} {...otherProps} tabIndex={disabled ? -1 : 0} ref={ref}>
         {icon && <Icon name={icon} size={size} className={styles.icon} />}
@@ -256,7 +246,7 @@ function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant,
     transition: 'none',
   };
 
-  if (fill === 'text' || variant === 'link') {
+  if (fill === 'text') {
     return {
       ...disabledStyles,
       background: 'transparent',
@@ -280,24 +270,15 @@ function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant,
 }
 
 export function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill) {
-  const buttonVariant = variant === 'link' ? 'primary' : variant;
-  const buttonFill = variant === 'link' ? 'text' : fill;
-
-  switch (buttonVariant) {
+  switch (variant) {
     case 'secondary':
-      return getButtonVariantStyles(theme, theme.colors.secondary, buttonFill);
+      return getButtonVariantStyles(theme, theme.colors.secondary, fill);
 
     case 'destructive':
-      return getButtonVariantStyles(theme, theme.colors.error, buttonFill);
+      return getButtonVariantStyles(theme, theme.colors.error, fill);
 
     case 'primary':
     default:
-      return getButtonVariantStyles(theme, theme.colors.primary, buttonFill);
-  }
-}
-
-function deprecatedPropWarning(test: boolean, message: string) {
-  if (process.env.NODE_ENV === 'development' && test) {
-    console.warn(`@grafana/ui ${message}`);
+      return getButtonVariantStyles(theme, theme.colors.primary, fill);
   }
 }
diff --git a/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx b/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
index 6f213e99719..b20520629f6 100644
--- a/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
+++ b/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
@@ -72,7 +72,7 @@ export class InputQueryEditor extends PureComponent<Props, State> {
             {query.data ? (
               <div style={{ alignSelf: 'center' }}>{describeDataFrame(query.data)}</div>
             ) : (
-              <LinkButton variant="link" href={`datasources/edit/${uid}/`}>
+              <LinkButton fill="text" href={`datasources/edit/${uid}/`}>
                 {name}: {describeDataFrame(datasource.data)} &nbsp;&nbsp;
                 <Icon name="pen" />
               </LinkButton>
diff --git a/public/app/core/components/FolderFilter/FolderFilter.tsx b/public/app/core/components/FolderFilter/FolderFilter.tsx
index 6fd7681dd80..c346fbda1ae 100644
--- a/public/app/core/components/FolderFilter/FolderFilter.tsx
+++ b/public/app/core/components/FolderFilter/FolderFilter.tsx
@@ -47,7 +47,7 @@ export function FolderFilter({ onChange: propsOnChange, maxMenuHeight }: FolderF
         <Button
           size="xs"
           icon="trash-alt"
-          variant="link"
+          fill="text"
           className={styles.clear}
           onClick={() => onChange([])}
           aria-label="Clear folders"
diff --git a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
index 9a3996315c3..0578fe8437a 100644
--- a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
+++ b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
@@ -55,7 +55,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
         <Button
           size="xs"
           icon="trash-alt"
-          variant="link"
+          fill="text"
           className={styles.clear}
           onClick={() => onChange([])}
           aria-label="Clear types"
diff --git a/public/app/features/serviceaccounts/ServiceAccountProfile.tsx b/public/app/features/serviceaccounts/ServiceAccountProfile.tsx
index e1ab18f7739..ee3bb166da1 100644
--- a/public/app/features/serviceaccounts/ServiceAccountProfile.tsx
+++ b/public/app/features/serviceaccounts/ServiceAccountProfile.tsx
@@ -73,7 +73,7 @@ export function ServiceAccountProfile({
     <>
       <div style={{ marginBottom: '10px' }}>
         <a href="org/serviceaccounts" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-          <Button variant="link" icon="backward" />
+          <Button fill="text" icon="backward" />
         </a>
         <h1
           className="page-heading"
diff --git a/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx b/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx
index bb593a1edb0..8babee6d2a2 100644
--- a/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx
+++ b/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx
@@ -20,7 +20,7 @@ export const MappingsConfiguration = (props: Props): JSX.Element => {
       <h3 className="page-heading">Label mappings</h3>
       {!props.showHelp && (
         <p>
-          <Button variant="link" onClick={props.onRestoreHelp}>
+          <Button fill="text" onClick={props.onRestoreHelp}>
             Learn how label mappings work
           </Button>
         </p>
diff --git a/public/app/plugins/panel/nodeGraph/ViewControls.tsx b/public/app/plugins/panel/nodeGraph/ViewControls.tsx
index 1b3a7316014..ea460af3db4 100644
--- a/public/app/plugins/panel/nodeGraph/ViewControls.tsx
+++ b/public/app/plugins/panel/nodeGraph/ViewControls.tsx
@@ -75,7 +75,7 @@ export function ViewControls<Config extends Record<string, any>>(props: Props<Co
       </VerticalGroup>
 
       {allowConfiguration && (
-        <Button size={'xs'} variant={'link'} onClick={() => setShowConfig((showConfig) => !showConfig)}>
+        <Button size={'xs'} fill="text" onClick={() => setShowConfig((showConfig) => !showConfig)}>
           {showConfig ? 'Hide config' : 'Show config'}
         </Button>
       )}