Alerts: Update Alert storybook to show more states (#30908)

* Alert: Design update for alerts

* Before text color

* Text update

* reverted style changes

* Minor fix

* Updated snapshot

packages/grafana-ui/src/components/Alert/Alert.story.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import { Alert, AlertVariant } from './Alert';
+import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from '../Alert/Alert.mdx';
+import { StoryExample } from '../../utils/storybook/StoryExample';
 
 export default {
   title: 'Overlays/Alert',
@@ -18,24 +18,34 @@ export default {
 
 const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
 
-export const basic = () => {
+export const Examples = () => {
-  const severity = select('Severity', severities, 'info');
-  return <Alert title="Some very important message" severity={severity} />;
-};
-
-export const withRemove = () => {
-  const severity = select('Severity', severities, 'info');
-  return <Alert title="Some very important message" severity={severity} onRemove={action('Remove button clicked')} />;
-};
-
-export const customButtonContent = () => {
-  const severity = select('Severity', severities, 'info');
   return (
-    <Alert
+    <VerticalGroup>
-      title="Some very important message"
+      <StoryExample name="With buttonContent and children">
-      severity={severity}
+        <Alert
-      buttonContent={<span>Close</span>}
+          title="Some very important message"
-      onRemove={action('Remove button clicked')}
+          severity="error"
-    />
+          buttonContent={<span>Close</span>}
+          onRemove={action('Remove button clicked')}
+        >
+          Child content that includes some alert details, like maybe what actually happened.
+        </Alert>
+      </StoryExample>
+      <StoryExample name="No dismiss">
+        <Alert title="Some very important message" severity="info" />
+      </StoryExample>
+      <StoryExample name="Severities">
+        <VerticalGroup>
+          {severities.map((severity) => (
+            <Alert
+              title={`Severity: ${severity}`}
+              severity={severity}
+              key={severity}
+              onRemove={action('Remove button clicked')}
+            />
+          ))}
+        </VerticalGroup>
+      </StoryExample>
+    </VerticalGroup>
   );
 };

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -79,6 +79,7 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean
 
   return {
     alert: css`
+      flex-grow: 1;
       padding: 15px 20px;
       margin-bottom: ${theme.spacing.xs};
       position: relative;

packages/grafana-ui/src/utils/colors.ts

@@ -134,8 +134,10 @@ export let sortedColors = sortColorsByHue(colors);
 export function getColorsFromSeverity(severity: AlertVariant, theme: GrafanaTheme): [string, string] {
   switch (severity) {
     case 'error':
-    case 'warning':
       return [theme.palette.redBase, theme.palette.redShade];
+    case 'warning':
+      return [theme.palette.queryOrange, theme.palette.orange];
+    case 'info':
     case 'info':
       return [theme.palette.blue80, theme.palette.blue77];
     case 'success':

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -23,7 +23,7 @@ import { getRouteParamsId } from 'app/core/selectors/location';
 // Types
 import { CoreEvents, StoreState } from 'app/types/';
 import { DataSourcePluginMeta, DataSourceSettings, NavModel, UrlQueryMap } from '@grafana/data';
-import { Alert } from '@grafana/ui';
+import { Alert, InfoBox } from '@grafana/ui';
 import { getDataSourceLoadingNav } from '../state/navModel';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
 import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers';
@@ -100,10 +100,10 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
 
   renderIsReadOnlyMessage() {
     return (
-      <div className="grafana-info-box span8">
+      <InfoBox severity="info">
         This datasource was added by config and cannot be modified using the UI. Please contact your server admin to
         update this datasource.
-      </div>
+      </InfoBox>
     );
   }
 

public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap

@@ -295,11 +295,11 @@ exports[`Render should render is ready only message 1`] = `
       <form
         onSubmit={[Function]}
       >
-        <div
+        <InfoBox
-          className="grafana-info-box span8"
+          severity="info"
         >
           This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
-        </div>
+        </InfoBox>
         <CloudInfoBox
           dataSource={
             Object {

public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx

@@ -8,7 +8,7 @@ import {
   onUpdateDatasourceJsonDataOptionSelect,
   onUpdateDatasourceSecureJsonDataOption,
 } from '@grafana/data';
-import { DataSourceHttpSettings, InlineFormLabel, LegacyForms } from '@grafana/ui';
+import { DataSourceHttpSettings, InfoBox, InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Select, Input, SecretFormField } = LegacyForms;
 import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types';
 
@@ -74,7 +74,7 @@ export class ConfigEditor extends PureComponent<Props> {
     return (
       <div>
         <div className="gf-form-group">
-          <div className="width-30 grafana-info-box">
+          <InfoBox>
             <h5>Support for flux in Grafana is currently in beta</h5>
             <p>
               Please report any issues to: <br />
@@ -82,7 +82,7 @@ export class ConfigEditor extends PureComponent<Props> {
                 https://github.com/grafana/grafana/issues
               </a>
             </p>
-          </div>
+          </InfoBox>
         </div>
         <br />
 
@@ -231,7 +231,7 @@ export class ConfigEditor extends PureComponent<Props> {
         </div>
 
         <div className="gf-form-group">
-          <div className="grafana-info-box">
+          <InfoBox>
             <h5>Database Access</h5>
             <p>
               Setting the database for this datasource does not deny access to other databases. The InfluxDB query
@@ -242,7 +242,7 @@ export class ConfigEditor extends PureComponent<Props> {
               <br />
               To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
             </p>
-          </div>
+          </InfoBox>
         </div>
         <div className="gf-form-group">
           <div className="gf-form-inline">

public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap

@@ -234,9 +234,7 @@ exports[`Render should disable basic auth password input 1`] = `
     <div
       className="gf-form-group"
     >
-      <div
+      <InfoBox>
-        className="grafana-info-box"
-      >
         <h5>
           Database Access
         </h5>
@@ -253,7 +251,7 @@ exports[`Render should disable basic auth password input 1`] = `
           <br />
           To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
         </p>
-      </div>
+      </InfoBox>
     </div>
     <div
       className="gf-form-group"
@@ -522,9 +520,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
     <div
       className="gf-form-group"
     >
-      <div
+      <InfoBox>
-        className="grafana-info-box"
-      >
         <h5>
           Database Access
         </h5>
@@ -541,7 +537,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
           <br />
           To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
         </p>
-      </div>
+      </InfoBox>
     </div>
     <div
       className="gf-form-group"
@@ -810,9 +806,7 @@ exports[`Render should hide white listed cookies input when browser access chose
     <div
       className="gf-form-group"
     >
-      <div
+      <InfoBox>
-        className="grafana-info-box"
-      >
         <h5>
           Database Access
         </h5>
@@ -829,7 +823,7 @@ exports[`Render should hide white listed cookies input when browser access chose
           <br />
           To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
         </p>
-      </div>
+      </InfoBox>
     </div>
     <div
       className="gf-form-group"
@@ -1098,9 +1092,7 @@ exports[`Render should render component 1`] = `
     <div
       className="gf-form-group"
     >
-      <div
+      <InfoBox>
-        className="grafana-info-box"
-      >
         <h5>
           Database Access
         </h5>
@@ -1117,7 +1109,7 @@ exports[`Render should render component 1`] = `
           <br />
           To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
         </p>
-      </div>
+      </InfoBox>
     </div>
     <div
       className="gf-form-group"