From cf2d5579749353cdd81d028eb1b841f20c80f563 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Mon, 26 Apr 2021 07:18:46 +0200
Subject: [PATCH] Alerts/InfoBox: Replaces all uses of InfoBox & FeatureInfoBox
 with Alert (#33352)

* Alerts/InfoBox: Replaces all uses of InfoBox & FeatureInfoBox with Alert

* Fixes some more stuff

* fixed border radius
---
 .../grafana-ui/src/components/Alert/Alert.tsx |  37 ++++--
 .../src/components/InfoBox/FeatureInfoBox.tsx |   2 +
 .../src/components/InfoBox/InfoBox.story.tsx  |  21 +++-
 .../src/components/InfoBox/InfoBox.tsx        |  88 ++-----------
 .../alerting/components/ChannelSettings.tsx   |   4 +-
 .../features/alerting/unified/AmRoutes.tsx    |   6 +-
 .../features/alerting/unified/Receivers.tsx   |   6 +-
 .../features/alerting/unified/RuleEditor.tsx  |   6 +-
 .../features/alerting/unified/RuleList.tsx    |  15 +--
 .../features/alerting/unified/Silences.tsx    |   6 +-
 .../components/rule-editor/AlertRuleForm.tsx  |   9 +-
 .../components/ShareModal/ShareEmbed.tsx      |  54 ++++----
 .../components/ShareModal/ShareExport.tsx     |  36 +++---
 .../ShareModal/ShareGlobalPanel.tsx           |  12 +-
 .../components/ShareModal/ShareLink.tsx       | 118 ++++++++----------
 .../components/ShareModal/ShareSnapshot.tsx   |  16 +--
 .../ShareModal/ShareSnapshotCtrl.ts           |   0
 .../TransformationsEditor.tsx                 |  21 ++--
 .../datasources/settings/CloudInfoBox.tsx     |  57 +++------
 .../settings/DataSourceSettingsPage.tsx       |   6 +-
 .../grafana/components/QueryEditor.tsx        |  14 +--
 .../plugins/panel/live/LiveChannelEditor.tsx  |  13 +-
 public/app/plugins/panel/live/LivePanel.tsx   |  22 +---
 23 files changed, 235 insertions(+), 334 deletions(-)
 delete mode 100644 public/app/features/dashboard/components/ShareModal/ShareSnapshotCtrl.ts

diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index 2bd795ed4a7..d3e4bc0c368 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/packages/grafana-ui/src/components/Alert/Alert.tsx
@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, ReactNode } from 'react';
-import { css } from '@emotion/css';
+import React, { HTMLAttributes, ReactNode } from 'react';
+import { css, cx } from '@emotion/css';
 import { GrafanaThemeV2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { useTheme2 } from '../../themes';
@@ -18,6 +18,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   elevated?: boolean;
   buttonContent?: React.ReactNode | string;
+  bottomSpacing?: number;
 }
 
 function getIconFromSeverity(severity: AlertVariant): string {
@@ -34,19 +35,27 @@ function getIconFromSeverity(severity: AlertVariant): string {
   }
 }
 
-export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>(
-  ({ title, onRemove, children, buttonContent, elevated, severity = 'error', ...restProps }, ref) => {
+export const Alert = React.forwardRef<HTMLDivElement, Props>(
+  (
+    { title, onRemove, children, buttonContent, elevated, bottomSpacing, className, severity = 'error', ...restProps },
+    ref
+  ) => {
     const theme = useTheme2();
-    const styles = getStyles(theme, severity, elevated);
+    const styles = getStyles(theme, severity, elevated, bottomSpacing);
 
     return (
-      <div ref={ref} className={styles.alert} aria-label={selectors.components.Alert.alert(severity)} {...restProps}>
+      <div
+        ref={ref}
+        className={cx(styles.alert, className)}
+        aria-label={selectors.components.Alert.alert(severity)}
+        {...restProps}
+      >
         <div className={styles.icon}>
           <Icon size="xl" name={getIconFromSeverity(severity) as IconName} />
         </div>
         <div className={styles.body}>
           <div className={styles.title}>{title}</div>
-          {children && <div>{children}</div>}
+          {children && <div className={styles.content}>{children}</div>}
         </div>
         {/* If onRemove is specified, giving preference to onRemove */}
         {onRemove && !buttonContent && (
@@ -68,19 +77,21 @@ export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>(
 
 Alert.displayName = 'Alert';
 
-const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boolean) => {
+const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boolean, bottomSpacing?: number) => {
   const color = theme.colors[severity];
+  const borderRadius = theme.shape.borderRadius();
 
   return {
     alert: css`
       flex-grow: 1;
       position: relative;
-      border-radius: ${theme.shape.borderRadius()};
+      border-radius: ${borderRadius};
       display: flex;
       flex-direction: row;
       align-items: stretch;
       background: ${theme.colors.background.secondary};
       box-shadow: ${elevated ? theme.shadows.z3 : theme.shadows.z1};
+      margin-bottom: ${theme.spacing(bottomSpacing ?? 2)};
 
       &:before {
         content: '';
@@ -96,6 +107,7 @@ const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boo
     icon: css`
       padding: ${theme.spacing(2, 3)};
       background: ${color.main};
+      border-radius: ${borderRadius} 0 0 ${borderRadius};
       color: ${color.contrastText};
       display: flex;
       align-items: center;
@@ -115,6 +127,10 @@ const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boo
       overflow-wrap: break-word;
       word-break: break-word;
     `,
+    content: css`
+      color: ${theme.colors.text.secondary};
+      padding-top: ${theme.spacing(1)};
+    `,
     buttonWrapper: css`
       padding: ${theme.spacing(1)};
       background: none;
@@ -122,9 +138,8 @@ const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boo
       align-items: center;
     `,
     close: css`
-      padding: ${theme.spacing(1)};
+      padding: ${theme.spacing(2, 1)};
       background: none;
-      align-items: center;
       display: flex;
     `,
   };
diff --git a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
index 54dea1cc082..5e75f40b2c6 100644
--- a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
@@ -10,6 +10,7 @@ export interface FeatureInfoBoxProps extends Omit<InfoBoxProps, 'title' | 'urlTi
   featureState?: FeatureState;
 }
 
+/** @deprecated use Alert with severity info */
 export const FeatureInfoBox = React.memo(
   React.forwardRef<HTMLDivElement, FeatureInfoBoxProps>(({ title, featureState, ...otherProps }, ref) => {
     const styles = useStyles(getFeatureInfoBoxStyles);
@@ -27,6 +28,7 @@ export const FeatureInfoBox = React.memo(
     return <InfoBox branded title={titleEl} urlTitle="Read documentation" ref={ref} {...otherProps} />;
   })
 );
+
 FeatureInfoBox.displayName = 'FeatureInfoBox';
 
 const getFeatureInfoBoxStyles = stylesFactory((theme: GrafanaTheme) => {
diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx
index f4c00a93b1d..bf260daa390 100644
--- a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FeatureState } from '@grafana/data';
-import { InfoBox, FeatureInfoBox } from '@grafana/ui';
+import { InfoBox, FeatureInfoBox, VerticalGroup } from '@grafana/ui';
 import mdx from './InfoBox.mdx';
 import { Story } from '@storybook/react';
 import { FeatureInfoBoxProps } from './FeatureInfoBox';
@@ -44,10 +44,25 @@ const defaultProps: FeatureInfoBoxProps = {
   ),
 };
 
-const InfoBoxTemplate: Story<InfoBoxProps> = (args) => <InfoBox {...args} />;
+const InfoBoxTemplate: Story<InfoBoxProps> = (args) => {
+  return (
+    <VerticalGroup>
+      <div>Deprecrated component, use Alert with info severity</div>
+      <InfoBox {...args} />;
+    </VerticalGroup>
+  );
+};
 export const infoBox = InfoBoxTemplate.bind({});
 infoBox.args = defaultProps;
 
-const FeatureInfoBoxTemplate: Story<FeatureInfoBoxProps> = (args) => <FeatureInfoBox {...args}></FeatureInfoBox>;
+const FeatureInfoBoxTemplate: Story<FeatureInfoBoxProps> = (args) => {
+  return (
+    <VerticalGroup>
+      <div>Deprecrated component, use Alert with info severity</div>
+      <FeatureInfoBox {...args} />
+    </VerticalGroup>
+  );
+};
+
 export const featureInfoBox = FeatureInfoBoxTemplate.bind({});
 featureInfoBox.args = defaultProps;
diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
index 4671904e803..eea3e00fb0e 100644
--- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
@@ -2,12 +2,8 @@ import React from 'react';
 import { css, cx } from '@emotion/css';
 import { GrafanaThemeV2 } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
-import { IconButton } from '../IconButton/IconButton';
-import { HorizontalGroup } from '../Layout/Layout';
-import { AlertVariant } from '../Alert/Alert';
-import panelArtDark from './panelArt_dark.svg';
-import panelArtLight from './panelArt_light.svg';
-import { stylesFactory, useTheme2 } from '../../themes';
+import { Alert, AlertVariant } from '../Alert/Alert';
+import { stylesFactory, useStyles2 } from '../../themes';
 
 export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   children: React.ReactNode;
@@ -25,97 +21,33 @@ export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   onDismiss?: () => void;
 }
 
-/**
-  @public
- */
+/** @deprecated use Alert with severity info */
 export const InfoBox = React.memo(
   React.forwardRef<HTMLDivElement, InfoBoxProps>(
     ({ title, className, children, branded, url, urlTitle, onDismiss, severity = 'info', ...otherProps }, ref) => {
-      const theme = useTheme2();
-      const styles = getInfoBoxStyles(theme, severity);
-      const wrapperClassName = cx(branded ? styles.wrapperBranded : styles.wrapper, className);
+      const styles = useStyles2(getStyles);
 
       return (
-        <div className={wrapperClassName} {...otherProps} ref={ref}>
-          <div>
-            <HorizontalGroup justify={'space-between'} align={'flex-start'}>
-              <div>{typeof title === 'string' ? <h4>{title}</h4> : title}</div>
-              {onDismiss && <IconButton name={'times'} onClick={onDismiss} />}
-            </HorizontalGroup>
-          </div>
+        <Alert severity={severity} className={className} {...otherProps} ref={ref} title={title as string}>
           <div>{children}</div>
           {url && (
-            <a href={url} className={styles.docsLink} target="_blank" rel="noreferrer">
+            <a href={url} className={cx('external-link', styles.docsLink)} target="_blank" rel="noreferrer">
               <Icon name="book" /> {urlTitle || 'Read more'}
             </a>
           )}
-        </div>
+        </Alert>
       );
     }
   )
 );
+
 InfoBox.displayName = 'InfoBox';
 
-const getInfoBoxStyles = stylesFactory((theme: GrafanaThemeV2, severity: AlertVariant) => {
-  const color = theme.colors[severity];
-
+const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
   return {
-    wrapper: css`
-      position: relative;
-      padding: ${theme.v1.spacing.md};
-      background-color: ${theme.v1.colors.bg2};
-      border-left: 3px solid ${color.border};
-      margin-bottom: ${theme.v1.spacing.md};
-      flex-grow: 1;
-      color: ${theme.v1.colors.textSemiWeak};
-      box-shadow: ${theme.shadows.z1};
-
-      code {
-        font-size: ${theme.typography.size.sm};
-        background-color: ${theme.v1.colors.bg1};
-        color: ${theme.v1.colors.text};
-        border: 1px solid ${theme.v1.colors.border2};
-        border-radius: 4px;
-      }
-
-      p:last-child {
-        margin-bottom: 0;
-      }
-
-      &--max-lg {
-        max-width: ${theme.v1.breakpoints.lg};
-      }
-    `,
-    wrapperBranded: css`
-      padding: ${theme.v1.spacing.md};
-      border-radius: ${theme.v1.border.radius.md};
-      position: relative;
-      z-index: 0;
-
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-image: url(${theme.isLight ? panelArtLight : panelArtDark});
-        border-radius: ${theme.v1.border.radius.md};
-        background-position: 50% 50%;
-        background-size: cover;
-        filter: saturate(80%);
-        z-index: -1;
-      }
-
-      p:last-child {
-        margin-bottom: 0;
-      }
-    `,
     docsLink: css`
       display: inline-block;
-      margin-top: ${theme.v1.spacing.md};
-      font-size: ${theme.v1.typography.size.sm};
-      color: ${theme.v1.colors.textSemiWeak};
+      margin-top: ${theme.spacing(2)};
     `,
   };
 });
diff --git a/public/app/features/alerting/components/ChannelSettings.tsx b/public/app/features/alerting/components/ChannelSettings.tsx
index f334a81f51e..9aa90aa87d8 100644
--- a/public/app/features/alerting/components/ChannelSettings.tsx
+++ b/public/app/features/alerting/components/ChannelSettings.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { CollapsableSection, InfoBox } from '@grafana/ui';
+import { Alert, CollapsableSection } from '@grafana/ui';
 import { NotificationChannelOptions } from './NotificationChannelOptions';
 import { NotificationSettingsProps } from './NotificationChannelForm';
 import { NotificationChannelSecureFields, NotificationChannelType } from '../../../types';
@@ -21,7 +21,7 @@ export const ChannelSettings: FC<Props> = ({
 }) => {
   return (
     <CollapsableSection label={`Optional ${selectedChannel.heading}`} isOpen={false}>
-      {selectedChannel.info !== '' && <InfoBox>{selectedChannel.info}</InfoBox>}
+      {selectedChannel.info !== '' && <Alert severity="info" title={selectedChannel.info ?? ''} />}
       <NotificationChannelOptions
         selectedChannelOptions={selectedChannel.options.filter((o) => !o.required)}
         currentFormValues={currentFormValues}
diff --git a/public/app/features/alerting/unified/AmRoutes.tsx b/public/app/features/alerting/unified/AmRoutes.tsx
index 3a4f0ef279a..d472a4e72eb 100644
--- a/public/app/features/alerting/unified/AmRoutes.tsx
+++ b/public/app/features/alerting/unified/AmRoutes.tsx
@@ -1,4 +1,4 @@
-import { Field, InfoBox, LoadingPlaceholder } from '@grafana/ui';
+import { Alert, Field, LoadingPlaceholder } from '@grafana/ui';
 import React, { FC, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { AlertingPageWrapper } from './components/AlertingPageWrapper';
@@ -28,9 +28,9 @@ const AmRoutes: FC = () => {
       <br />
       <br />
       {error && !loading && (
-        <InfoBox severity="error" title={<h4>Error loading alert manager config</h4>}>
+        <Alert severity="error" title="Error loading alert manager config">
           {error.message || 'Unknown error.'}
-        </InfoBox>
+        </Alert>
       )}
       {loading && <LoadingPlaceholder text="loading alert manager config..." />}
       {result && !loading && !error && <pre>{JSON.stringify(result, null, 2)}</pre>}
diff --git a/public/app/features/alerting/unified/Receivers.tsx b/public/app/features/alerting/unified/Receivers.tsx
index 8a8ea296a53..92c87d59467 100644
--- a/public/app/features/alerting/unified/Receivers.tsx
+++ b/public/app/features/alerting/unified/Receivers.tsx
@@ -1,4 +1,4 @@
-import { Field, InfoBox, LoadingPlaceholder } from '@grafana/ui';
+import { Field, Alert, LoadingPlaceholder } from '@grafana/ui';
 import React, { FC, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { AlertingPageWrapper } from './components/AlertingPageWrapper';
@@ -36,9 +36,9 @@ const Receivers: FC = () => {
         <AlertManagerPicker current={alertManagerSourceName} onChange={setAlertManagerSourceName} />
       </Field>
       {error && !loading && (
-        <InfoBox severity="error" title={<h4>Error loading alert manager config</h4>}>
+        <Alert severity="error" title="Error loading alert manager config">
           {error.message || 'Unknown error.'}
-        </InfoBox>
+        </Alert>
       )}
       {loading && <LoadingPlaceholder text="loading receivers..." />}
       {result && !loading && !error && (
diff --git a/public/app/features/alerting/unified/RuleEditor.tsx b/public/app/features/alerting/unified/RuleEditor.tsx
index d036db5971c..8db86fc4219 100644
--- a/public/app/features/alerting/unified/RuleEditor.tsx
+++ b/public/app/features/alerting/unified/RuleEditor.tsx
@@ -1,4 +1,4 @@
-import { Alert, Button, InfoBox, LoadingPlaceholder } from '@grafana/ui';
+import { Alert, Button, LoadingPlaceholder } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -43,12 +43,12 @@ const ExistingRuleEditor: FC<ExistingRuleEditorProps> = ({ identifier }) => {
   if (!result) {
     return (
       <Page.Contents>
-        <InfoBox severity="warning" title="Rule not found">
+        <Alert severity="warning" title="Rule not found">
           <p>Sorry! This rule does not exist.</p>
           <a href="/alerting/list">
             <Button>To rule list</Button>
           </a>
-        </InfoBox>
+        </Alert>
       </Page.Contents>
     );
   }
diff --git a/public/app/features/alerting/unified/RuleList.tsx b/public/app/features/alerting/unified/RuleList.tsx
index ef3fd1dbe65..155f7802016 100644
--- a/public/app/features/alerting/unified/RuleList.tsx
+++ b/public/app/features/alerting/unified/RuleList.tsx
@@ -1,5 +1,5 @@
 import { DataSourceInstanceSettings, GrafanaTheme, urlUtil } from '@grafana/data';
-import { Icon, InfoBox, useStyles, Button, ButtonGroup, ToolbarButton } from '@grafana/ui';
+import { useStyles, Button, ButtonGroup, ToolbarButton, Alert } from '@grafana/ui';
 import { SerializedError } from '@reduxjs/toolkit';
 import React, { FC, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
@@ -88,16 +88,7 @@ export const RuleList: FC = () => {
   return (
     <AlertingPageWrapper pageId="alert-list" isLoading={loading && !haveResults}>
       {(promReqeustErrors.length || rulerRequestErrors.length || grafanaPromError) && (
-        <InfoBox
-          data-testid="cloud-rulessource-errors"
-          title={
-            <h4>
-              <Icon className={styles.iconError} name="exclamation-triangle" size="xl" />
-              Errors loading rules
-            </h4>
-          }
-          severity="error"
-        >
+        <Alert data-testid="cloud-rulessource-errors" title="Errors loading rules" severity="error">
           {grafanaPromError && (
             <div>Failed to load Grafana threshold rules state: {grafanaPromError.message || 'Unknown error.'}</div>
           )}
@@ -118,7 +109,7 @@ export const RuleList: FC = () => {
               {error.message || 'Unknown error.'}
             </div>
           ))}
-        </InfoBox>
+        </Alert>
       )}
       {!showNewAlertSplash && (
         <>
diff --git a/public/app/features/alerting/unified/Silences.tsx b/public/app/features/alerting/unified/Silences.tsx
index eb73b0bd81e..bbb16c5a359 100644
--- a/public/app/features/alerting/unified/Silences.tsx
+++ b/public/app/features/alerting/unified/Silences.tsx
@@ -1,4 +1,4 @@
-import { Field, InfoBox, LoadingPlaceholder } from '@grafana/ui';
+import { Field, Alert, LoadingPlaceholder } from '@grafana/ui';
 import React, { FC, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { AlertingPageWrapper } from './components/AlertingPageWrapper';
@@ -28,9 +28,9 @@ const Silences: FC = () => {
       <br />
       <br />
       {error && !loading && (
-        <InfoBox severity="error" title={<h4>Error loading silences</h4>}>
+        <Alert severity="error" title="Error loading silences">
           {error.message || 'Unknown error.'}
-        </InfoBox>
+        </Alert>
       )}
       {loading && <LoadingPlaceholder text="loading silences..." />}
       {result && !loading && !error && <pre>{JSON.stringify(result, null, 2)}</pre>}
diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
index b82634fa447..6deea1b750f 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { PageToolbar, ToolbarButton, useStyles, CustomScrollbar, Spinner, Alert, InfoBox } from '@grafana/ui';
+import { PageToolbar, ToolbarButton, useStyles, CustomScrollbar, Spinner, Alert } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 import { AlertTypeStep } from './AlertTypeStep';
@@ -100,9 +100,10 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
           <CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>
             <div className={styles.contentInner}>
               {hasErrors && (
-                <InfoBox severity="error">
-                  There are errors in the form below. Please fix them and try saving again.
-                </InfoBox>
+                <Alert
+                  severity="error"
+                  title="There are errors in the form below. Please fix them and try saving again"
+                />
               )}
               {submitState.error && (
                 <Alert severity="error" title="Error saving rule">
diff --git a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
index 77acd83c3ca..503a5eaf70f 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
@@ -74,36 +74,32 @@ export class ShareEmbed extends PureComponent<Props, State> {
     const isRelativeTime = this.props.dashboard ? this.props.dashboard.time.to === 'now' : false;
 
     return (
-      <div className="share-modal-body">
-        <div className="share-modal-header">
-          <div className="share-modal-content">
-            <p className="share-modal-info-text">Generate HTML for embedding an iframe with this panel.</p>
-            <Field
-              label="Current time range"
-              description={isRelativeTime ? 'Transforms the current relative time range to an absolute time range' : ''}
-            >
-              <Switch
-                id="share-current-time-range"
-                value={useCurrentTimeRange}
-                onChange={this.onUseCurrentTimeRangeChange}
-              />
-            </Field>
-            <Field label="Theme">
-              <RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
-            </Field>
-            <Field
-              label="Embed HTML"
-              description="The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled, 
+      <>
+        <p className="share-modal-info-text">Generate HTML for embedding an iframe with this panel.</p>
+        <Field
+          label="Current time range"
+          description={isRelativeTime ? 'Transforms the current relative time range to an absolute time range' : ''}
+        >
+          <Switch
+            id="share-current-time-range"
+            value={useCurrentTimeRange}
+            onChange={this.onUseCurrentTimeRangeChange}
+          />
+        </Field>
+        <Field label="Theme">
+          <RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
+        </Field>
+        <Field
+          label="Embed HTML"
+          description="The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled, 
                 the user viewing that page need to be signed into Grafana for the graph to load."
-            >
-              <TextArea rows={5} value={iframeHtml} onChange={this.onIframeHtmlChange}></TextArea>
-            </Field>
-            <ClipboardButton variant="primary" getText={this.getIframeHtml} onClipboardCopy={this.onIframeHtmlCopy}>
-              Copy to clipboard
-            </ClipboardButton>
-          </div>
-        </div>
-      </div>
+        >
+          <TextArea rows={5} value={iframeHtml} onChange={this.onIframeHtmlChange}></TextArea>
+        </Field>
+        <ClipboardButton variant="primary" getText={this.getIframeHtml} onClipboardCopy={this.onIframeHtmlCopy}>
+          Copy to clipboard
+        </ClipboardButton>
+      </>
     );
   }
 }
diff --git a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
index 7b68139c28c..6ff70790ea2 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareExport.tsx
@@ -90,27 +90,23 @@ export class ShareExport extends PureComponent<Props, State> {
     const { shareExternally } = this.state;
 
     return (
-      <div className="share-modal-body">
-        <div className="share-modal-header">
-          <div className="share-modal-content">
-            <p className="share-modal-info-text">Export this dashboard.</p>
-            <Field label="Export for sharing externally">
-              <Switch value={shareExternally} onChange={this.onShareExternallyChange} />
-            </Field>
-            <div className="gf-form-button-row">
-              <Button variant="primary" onClick={this.onSaveAsFile}>
-                Save to file
-              </Button>
-              <Button variant="secondary" onClick={this.onViewJson}>
-                View JSON
-              </Button>
-              <Button variant="secondary" onClick={onDismiss}>
-                Cancel
-              </Button>
-            </div>
-          </div>
+      <>
+        <p className="share-modal-info-text">Export this dashboard.</p>
+        <Field label="Export for sharing externally">
+          <Switch value={shareExternally} onChange={this.onShareExternallyChange} />
+        </Field>
+        <div className="gf-form-button-row">
+          <Button variant="primary" onClick={this.onSaveAsFile}>
+            Save to file
+          </Button>
+          <Button variant="secondary" onClick={this.onViewJson}>
+            View JSON
+          </Button>
+          <Button variant="secondary" onClick={onDismiss}>
+            Cancel
+          </Button>
         </div>
-      </div>
+      </>
     );
   }
 }
diff --git a/public/app/features/dashboard/components/ShareModal/ShareGlobalPanel.tsx b/public/app/features/dashboard/components/ShareModal/ShareGlobalPanel.tsx
index d4812516aa0..2195f540df5 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareGlobalPanel.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareGlobalPanel.tsx
@@ -14,13 +14,9 @@ export const ShareGlobalPanel = ({ panel, initialFolderId, onDismiss }: Props) =
   }
 
   return (
-    <div className="share-modal-body">
-      <div className="share-modal-header">
-        <div className="share-modal-content">
-          <p className="share-modal-info-text">Add this panel to the panel library.</p>
-          <AddLibraryPanelContents panel={panel} initialFolderId={initialFolderId} onDismiss={onDismiss!} />
-        </div>
-      </div>
-    </div>
+    <>
+      <p className="share-modal-info-text">Add this panel to the panel library.</p>
+      <AddLibraryPanelContents panel={panel} initialFolderId={initialFolderId} onDismiss={onDismiss!} />
+    </>
   );
 };
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
index 0ece68de6aa..48bfc3ef8f0 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { Field, RadioButtonGroup, Switch, ClipboardButton, Icon, InfoBox, Input, FieldSet } from '@grafana/ui';
+import { Field, RadioButtonGroup, Switch, ClipboardButton, Icon, Input, FieldSet, Alert } from '@grafana/ui';
 import { SelectableValue, PanelModel, AppEvents } from '@grafana/data';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { buildImageUrl, buildShareUrl } from './utils';
@@ -90,70 +90,62 @@ export class ShareLink extends PureComponent<Props, State> {
     const selectors = e2eSelectors.pages.SharePanelModal;
 
     return (
-      <div className="share-modal-body">
-        <div className="share-modal-header">
-          <div className="share-modal-content">
-            <p className="share-modal-info-text">
-              Create a direct link to this dashboard or panel, customized with the options below.
-            </p>
-            <FieldSet>
-              <Field
-                label="Lock time range"
-                description={
-                  isRelativeTime ? 'Transforms the current relative time range to an absolute time range' : ''
-                }
-              >
-                <Switch
-                  id="share-current-time-range"
-                  value={useCurrentTimeRange}
-                  onChange={this.onUseCurrentTimeRangeChange}
-                />
-              </Field>
-              <Field label="Theme">
-                <RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
-              </Field>
-              <Field label="Shorten URL">
-                <Switch id="share-shorten-url" value={useShortUrl} onChange={this.onUrlShorten} />
-              </Field>
+      <>
+        <p className="share-modal-info-text">
+          Create a direct link to this dashboard or panel, customized with the options below.
+        </p>
+        <FieldSet>
+          <Field
+            label="Lock time range"
+            description={isRelativeTime ? 'Transforms the current relative time range to an absolute time range' : ''}
+          >
+            <Switch
+              id="share-current-time-range"
+              value={useCurrentTimeRange}
+              onChange={this.onUseCurrentTimeRangeChange}
+            />
+          </Field>
+          <Field label="Theme">
+            <RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
+          </Field>
+          <Field label="Shorten URL">
+            <Switch id="share-shorten-url" value={useShortUrl} onChange={this.onUrlShorten} />
+          </Field>
 
-              <Field label="Link URL">
-                <Input
-                  value={shareUrl}
-                  readOnly
-                  addonAfter={
-                    <ClipboardButton variant="primary" getText={this.getShareUrl} onClipboardCopy={this.onShareUrlCopy}>
-                      <Icon name="copy" /> Copy
-                    </ClipboardButton>
-                  }
-                />
-              </Field>
-            </FieldSet>
-            {panel && config.rendererAvailable && (
-              <div className="gf-form">
-                <a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}>
-                  <Icon name="camera" /> Direct link rendered image
-                </a>
-              </div>
-            )}
-            {panel && !config.rendererAvailable && (
-              <InfoBox>
-                <p>
-                  <>To render a panel image, you must install the </>
-                  <a
-                    href="https://grafana.com/grafana/plugins/grafana-image-renderer"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="external-link"
-                  >
-                    Grafana Image Renderer plugin
-                  </a>
-                  . Please contact your Grafana administrator to install the plugin.
-                </p>
-              </InfoBox>
-            )}
+          <Field label="Link URL">
+            <Input
+              value={shareUrl}
+              readOnly
+              addonAfter={
+                <ClipboardButton variant="primary" getText={this.getShareUrl} onClipboardCopy={this.onShareUrlCopy}>
+                  <Icon name="copy" /> Copy
+                </ClipboardButton>
+              }
+            />
+          </Field>
+        </FieldSet>
+        {panel && config.rendererAvailable && (
+          <div className="gf-form">
+            <a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}>
+              <Icon name="camera" /> Direct link rendered image
+            </a>
           </div>
-        </div>
-      </div>
+        )}
+        {panel && !config.rendererAvailable && (
+          <Alert severity="info" title="Image renderer plugin not installed" bottomSpacing={0}>
+            <>To render a panel image, you must install the </>
+            <a
+              href="https://grafana.com/grafana/plugins/grafana-image-renderer"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="external-link"
+            >
+              Grafana image renderer plugin
+            </a>
+            . Please contact your Grafana administrator to install the plugin.
+          </Alert>
+        )}
+      </>
     );
   }
 }
diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
index 5e8eb908582..20b68937afd 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
@@ -292,16 +292,12 @@ export class ShareSnapshot extends PureComponent<Props, State> {
     const { isLoading, step } = this.state;
 
     return (
-      <div className="share-modal-body">
-        <div className="share-modal-header">
-          <div className="share-modal-content">
-            {step === 1 && this.renderStep1()}
-            {step === 2 && this.renderStep2()}
-            {step === 3 && this.renderStep3()}
-            {isLoading && <Spinner inline={true} />}
-          </div>
-        </div>
-      </div>
+      <>
+        {step === 1 && this.renderStep1()}
+        {step === 2 && this.renderStep2()}
+        {step === 3 && this.renderStep3()}
+        {isLoading && <Spinner inline={true} />}
+      </>
     );
   }
 }
diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshotCtrl.ts b/public/app/features/dashboard/components/ShareModal/ShareSnapshotCtrl.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index 6ea826c6de4..e9a3d2227c7 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -5,7 +5,6 @@ import {
   Container,
   CustomScrollbar,
   Themeable,
-  FeatureInfoBox,
   VerticalGroup,
   withTheme,
   Input,
@@ -263,15 +262,12 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
                 }
 
                 return (
-                  <FeatureInfoBox
+                  <Alert
                     title="Transformations"
-                    className={css`
-                      margin-bottom: ${this.props.theme.spacing.lg};
-                    `}
-                    onDismiss={() => {
+                    onRemove={() => {
                       onDismiss(true);
                     }}
-                    url={getDocsLink(DocsId.Transformations)}
+                    severity="info"
                   >
                     <p>
                       Transformations allow you to join, calculate, re-order, hide, and rename your query results before
@@ -279,9 +275,16 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
                       Many transforms are not suitable if you&apos;re using the Graph visualization, as it currently
                       only only supports time series data. <br />
                       It can help to switch to the Table visualization to understand what a transformation is doing.{' '}
-                      <br />
                     </p>
-                  </FeatureInfoBox>
+                    <a
+                      href={getDocsLink(DocsId.Transformations)}
+                      className="external-link"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Read more
+                    </a>
+                  </Alert>
                 );
               }}
             </LocalStorageValueProvider>
diff --git a/public/app/features/datasources/settings/CloudInfoBox.tsx b/public/app/features/datasources/settings/CloudInfoBox.tsx
index c669497e0f5..96990bf434f 100644
--- a/public/app/features/datasources/settings/CloudInfoBox.tsx
+++ b/public/app/features/datasources/settings/CloudInfoBox.tsx
@@ -1,6 +1,5 @@
-import { DataSourceSettings, GrafanaTheme } from '@grafana/data';
-import { FeatureInfoBox, useStyles } from '@grafana/ui';
-import { css } from '@emotion/css';
+import { DataSourceSettings } from '@grafana/data';
+import { Alert } from '@grafana/ui';
 import React, { FC } from 'react';
 import { config } from 'app/core/config';
 import { GrafanaEdition } from '@grafana/data/src/types/config';
@@ -13,7 +12,6 @@ export interface Props {
 }
 
 export const CloudInfoBox: FC<Props> = ({ dataSource }) => {
-  const styles = useStyles(getStyles);
   let mainDS = '';
   let extraDS = '';
 
@@ -47,46 +45,29 @@ export const CloudInfoBox: FC<Props> = ({ dataSource }) => {
           return null;
         }
         return (
-          <FeatureInfoBox
+          <Alert
             title={`Configure your ${mainDS} data source below`}
-            className={styles.box}
-            branded={false}
-            onDismiss={() => {
+            severity="info"
+            bottomSpacing={4}
+            onRemove={() => {
               onDismiss(true);
             }}
           >
-            <div className={styles.text}>
-              Or skip the effort and get {mainDS} (and {extraDS}) as fully-managed, scalable, and hosted data sources
-              from Grafana Labs with the{' '}
-              <a
-                className="external-link"
-                href={`https://grafana.com/signup/cloud/connect-account?src=grafana-oss&cnt=${dataSource.type}-settings`}
-                target="_blank"
-                rel="noreferrer"
-                title="The free plan includes 10k active metrics and 50gb storage."
-              >
-                free-forever Grafana Cloud plan
-              </a>
-              .
-            </div>
-          </FeatureInfoBox>
+            Or skip the effort and get {mainDS} (and {extraDS}) as fully-managed, scalable, and hosted data sources from
+            Grafana Labs with the{' '}
+            <a
+              className="external-link"
+              href={`https://grafana.com/signup/cloud/connect-account?src=grafana-oss&cnt=${dataSource.type}-settings`}
+              target="_blank"
+              rel="noreferrer"
+              title="The free plan includes 10k active metrics and 50gb storage."
+            >
+              free-forever Grafana Cloud plan
+            </a>
+            .
+          </Alert>
         );
       }}
     </LocalStorageValueProvider>
   );
 };
-
-const getStyles = (theme: GrafanaTheme) => {
-  return {
-    box: css`
-      margin: 0 0 ${theme.spacing.lg} 0;
-    `,
-    text: css`
-      color: ${theme.colors.textSemiWeak};
-      padding: ${theme.spacing.sm} 0;
-      a {
-        text-decoration: underline;
-      }
-    `,
-  };
-};
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
index 760b3acc539..e128c4bf021 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@@ -21,7 +21,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
 // Types
 import { StoreState } from 'app/types/';
 import { DataSourceSettings } from '@grafana/data';
-import { Alert, Button, InfoBox, LinkButton } from '@grafana/ui';
+import { Alert, Button, LinkButton } from '@grafana/ui';
 import { getDataSourceLoadingNav } from '../state/navModel';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
 import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers';
@@ -127,10 +127,10 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
 
   renderIsReadOnlyMessage() {
     return (
-      <InfoBox aria-label={selectors.pages.DataSource.readOnly} severity="info">
+      <Alert aria-label={selectors.pages.DataSource.readOnly} severity="info" title="Provisioned data source">
         This data source was added by config and cannot be modified using the UI. Please contact your server admin to
         update this data source.
-      </InfoBox>
+      </Alert>
     );
   }
 
diff --git a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
index 77fa5b1d158..17c1d79adcc 100644
--- a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
@@ -1,8 +1,8 @@
 import { defaults } from 'lodash';
 
 import React, { PureComponent } from 'react';
-import { InlineField, Select, FeatureInfoBox, Input } from '@grafana/ui';
-import { QueryEditorProps, SelectableValue, FeatureState, dataFrameFromJSON, rangeUtil } from '@grafana/data';
+import { InlineField, Select, Alert, Input } from '@grafana/ui';
+import { QueryEditorProps, SelectableValue, dataFrameFromJSON, rangeUtil } from '@grafana/data';
 import { GrafanaDatasource } from '../datasource';
 import { defaultQuery, GrafanaQuery, GrafanaQueryType } from '../types';
 import { getBackendSrv } from '@grafana/runtime';
@@ -232,12 +232,10 @@ export class QueryEditor extends PureComponent<Props, State> {
           </div>
         )}
 
-        <FeatureInfoBox title="Grafana Live - Measurements" featureState={FeatureState.alpha}>
-          <p>
-            This supports real-time event streams in Grafana core. This feature is under heavy development. Expect the
-            interfaces and structures to change as this becomes more production ready.
-          </p>
-        </FeatureInfoBox>
+        <Alert title="Grafana Live - Measurements" severity="info">
+          This supports real-time event streams in Grafana core. This feature is under heavy development. Expect the
+          interfaces and structures to change as this becomes more production ready.
+        </Alert>
       </>
     );
   }
diff --git a/public/app/plugins/panel/live/LiveChannelEditor.tsx b/public/app/plugins/panel/live/LiveChannelEditor.tsx
index 3c43643e57c..2da40180272 100644
--- a/public/app/plugins/panel/live/LiveChannelEditor.tsx
+++ b/public/app/plugins/panel/live/LiveChannelEditor.tsx
@@ -1,13 +1,12 @@
 import React, { PureComponent } from 'react';
 import { css } from '@emotion/css';
-import { Select, FeatureInfoBox, Label, stylesFactory } from '@grafana/ui';
+import { Select, Alert, Label, stylesFactory } from '@grafana/ui';
 import {
   LiveChannelScope,
   LiveChannelAddress,
   LiveChannelSupport,
   SelectableValue,
   StandardEditorProps,
-  FeatureState,
   GrafanaTheme,
 } from '@grafana/data';
 
@@ -100,12 +99,10 @@ export class LiveChannelEditor extends PureComponent<Props, State> {
 
     return (
       <>
-        <FeatureInfoBox title="Grafana Live" featureState={FeatureState.alpha}>
-          <p>
-            This supports real-time event streams in grafana core. This feature is under heavy development. Expect the
-            intefaces and structures to change as this becomes more production ready.
-          </p>
-        </FeatureInfoBox>
+        <Alert title="Grafana Live" severity="info">
+          This supports real-time event streams in grafana core. This feature is under heavy development. Expect the
+          intefaces and structures to change as this becomes more production ready.
+        </Alert>
 
         <div>
           <div className={style.dropWrap}>
diff --git a/public/app/plugins/panel/live/LivePanel.tsx b/public/app/plugins/panel/live/LivePanel.tsx
index 20b90761ac1..b81097e0387 100755
--- a/public/app/plugins/panel/live/LivePanel.tsx
+++ b/public/app/plugins/panel/live/LivePanel.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Unsubscribable, PartialObserver } from 'rxjs';
-import { FeatureInfoBox, stylesFactory, Button, JSONFormatter, CustomScrollbar, CodeEditor } from '@grafana/ui';
+import { Alert, stylesFactory, Button, JSONFormatter, CustomScrollbar, CodeEditor } from '@grafana/ui';
 import {
   GrafanaTheme,
   PanelProps,
@@ -126,17 +126,12 @@ export class LivePanel extends PureComponent<Props, State> {
     const preformatted = `[feature_toggles]
     enable = live`;
     return (
-      <FeatureInfoBox
-        title="Grafana Live"
-        style={{
-          height: this.props.height,
-        }}
-      >
+      <Alert title="Grafana Live" severity="info">
         <p>Grafana live requires a feature flag to run</p>
 
         <b>custom.ini:</b>
         <pre>{preformatted}</pre>
-      </FeatureInfoBox>
+      </Alert>
     );
   }
 
@@ -298,14 +293,9 @@ export class LivePanel extends PureComponent<Props, State> {
     const { addr, error } = this.state;
     if (!addr) {
       return (
-        <FeatureInfoBox
-          title="Grafana Live"
-          style={{
-            height: this.props.height,
-          }}
-        >
-          <p>Use the panel editor to pick a channel</p>
-        </FeatureInfoBox>
+        <Alert title="Grafana Live" severity="info">
+          Use the panel editor to pick a channel
+        </Alert>
       );
     }
     if (error) {