Chore: Remove deprecated SCSS styles (#90187)

clean up infobox styles

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -1,10 +1,11 @@
 import { css, cx } from '@emotion/css';
 import { useState, useCallback, useId } from 'react';
 
-import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2, useTheme2 } from '../../themes';
+import { useTheme2 } from '../../themes';
+import { Alert } from '../Alert/Alert';
 import { FormField } from '../FormField/FormField';
 import { InlineFormLabel } from '../FormLabel/FormLabel';
 import { InlineField } from '../Forms/InlineField';
@@ -38,9 +39,8 @@ const DEFAULT_ACCESS_OPTION = {
 };
 
 const HttpAccessHelp = () => {
-  const styles = useStyles2(getAccessStyles);
   return (
-    <div className={cx('grafana-info-box', styles.infoBox)}>
+    <Alert severity="info" title="" topSpacing={3}>
       <p>
         Access mode controls how requests to the data source will be handled.
         <strong>
@@ -60,16 +60,10 @@ const HttpAccessHelp = () => {
         Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this access
         mode.
       </p>
-    </div>
+    </Alert>
   );
 };
 
-const getAccessStyles = (theme: GrafanaTheme2) => ({
-  infoBox: css({
-    marginTop: theme.spacing(3),
-  }),
-});
-
 const LABEL_WIDTH = 26;
 
 export const DataSourceHttpSettings = (props: HttpSettingsProps) => {

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { MouseEvent } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui';
+import { Alert, Button, CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui';
 
 export interface Props {
   title: string;
@@ -59,10 +59,9 @@ const EmptyListCTA = ({
           ''
         )}
         {infoBox ? (
-          <div key="infoBoxHtml" className={`grafana-info-box ${infoBoxStyles}`}>
+          <Alert severity="info" title={infoBoxTitle ?? ''} className={infoBoxStyles}>
-            {infoBoxTitle && <h5>{infoBoxTitle}</h5>}
             <div dangerouslySetInnerHTML={infoBox} />
-          </div>
+          </Alert>
         ) : (
           ''
         )}

public/app/features/admin/AdminSettings.tsx

@@ -1,6 +1,7 @@
 import { useAsync } from 'react-use';
 
 import { getBackendSrv } from '@grafana/runtime';
+import { Alert } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
 import { AdminSettingsTable } from './AdminSettingsTable';
@@ -13,10 +14,10 @@ function AdminSettings() {
   return (
     <Page navId="server-settings">
       <Page.Contents>
-        <div className="grafana-info-box span8" style={{ margin: '20px 0 25px 0' }}>
+        <Alert severity="info" title="">
           These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). To change
           these you currently need to restart Grafana.
-        </div>
+        </Alert>
 
         {loading && <AdminSettingsTable.Skeleton />}
 

public/app/features/users/UsersListPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { renderMarkdown } from '@grafana/data';
+import { Alert } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { OrgUser, OrgRole, StoreState } from 'app/types';
@@ -104,7 +105,9 @@ export const UsersListPageUnconnected = ({
     <Page.Contents isLoading={!isLoading}>
       <UsersActionBar onShowInvites={onShowInvites} showInvites={showInvites} />
       {externalUserMngInfoHtml && (
-        <div className="grafana-info-box" dangerouslySetInnerHTML={{ __html: externalUserMngInfoHtml }} />
+        <Alert severity="info" title="">
+          <div dangerouslySetInnerHTML={{ __html: externalUserMngInfoHtml }} />
+        </Alert>
       )}
       {isLoading && renderTable()}
     </Page.Contents>

public/app/plugins/datasource/cloud-monitoring/components/AnnotationsHelp.tsx

@@ -1,8 +1,9 @@
+import { Alert } from '@grafana/ui';
+
 export const AnnotationsHelp = () => {
   return (
-    <div className="grafana-info-box alert-info">
+    <Alert severity="info" title="Annotation Query Format">
       <div>
-        <h5>Annotation Query Format</h5>
         <p>
           An annotation is an event that is overlaid on top of graphs. Annotation rendering is expensive so it is
           important to limit the number of rows returned.{' '}
@@ -37,6 +38,6 @@ export const AnnotationsHelp = () => {
           <code>{`${'{{resource.label.label_name}}'}`}</code> = Resource label metadata e.g. resource.label.zone
         </p>
       </div>
-    </div>
+    </Alert>
   );
 };

public/sass/_angular.scss

@@ -1981,3 +1981,51 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
     color: $text-muted;
   }
 }
+
+.grafana-info-box {
+  position: relative;
+  padding: $space-lg;
+  background-color: $empty-list-cta-bg;
+  border-left: 3px solid $info-box-border-color;
+  margin-bottom: $space-md;
+  margin-right: $space-xs;
+  box-shadow: $card-shadow;
+  flex-grow: 1;
+
+  h5 {
+    margin-bottom: $spacer;
+  }
+  ul {
+    padding-left: $spacer * 1.5;
+  }
+
+  code {
+    @include font-family-monospace();
+    font-size: $font-size-base - 2;
+    background-color: $code-tag-bg;
+    color: $text-color;
+    border: 1px solid $code-tag-border;
+    border-radius: 4px;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  a {
+    @extend .external-link;
+  }
+
+  &--max-lg {
+    max-width: map.get($grid-breakpoints, 'lg');
+  }
+}
+
+.grafana-info-box__close {
+  text-align: center;
+  display: block;
+  color: $link-color !important;
+  height: 0;
+  position: relative;
+  top: -9px;
+}

public/sass/_grafana.scss

@@ -19,7 +19,6 @@
 @import 'components/gf-form';
 @import 'components/modals';
 @import 'components/dropdown';
-@import 'components/infobox';
 @import 'components/query_editor';
 @import 'components/dashboard_grid';
 

public/sass/components/_infobox.scss

@@ -1,48 +0,0 @@
-@use 'sass:map';
-.grafana-info-box {
-  position: relative;
-  padding: $space-lg;
-  background-color: $empty-list-cta-bg;
-  border-left: 3px solid $info-box-border-color;
-  margin-bottom: $space-md;
-  margin-right: $space-xs;
-  box-shadow: $card-shadow;
-  flex-grow: 1;
-
-  h5 {
-    margin-bottom: $spacer;
-  }
-  ul {
-    padding-left: $spacer * 1.5;
-  }
-
-  code {
-    @include font-family-monospace();
-    font-size: $font-size-base - 2;
-    background-color: $code-tag-bg;
-    color: $text-color;
-    border: 1px solid $code-tag-border;
-    border-radius: 4px;
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  a {
-    @extend .external-link;
-  }
-
-  &--max-lg {
-    max-width: map.get($grid-breakpoints, 'lg');
-  }
-}
-
-.grafana-info-box__close {
-  text-align: center;
-  display: block;
-  color: $link-color !important;
-  height: 0;
-  position: relative;
-  top: -9px;
-}