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

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
-          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>
         <CloudInfoBox
           dataSource={
             Object {