Alerting: adds Unified Alerting promotion (#41551)

public/app/features/alerting/AlertRuleList.tsx

@@ -14,6 +14,7 @@ import { Button, FilterInput, LinkButton, Select, VerticalGroup } from '@grafana
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { ShowModalReactEvent } from '../../types/events';
 import { AlertHowToModal } from './AlertHowToModal';
+import { UnifiedAlertingPromotion } from './components/UnifiedAlertingPromotion';
 
 function mapStateToProps(state: StoreState) {
   return {
@@ -124,6 +125,7 @@ export class AlertRuleListUnconnected extends PureComponent<Props> {
               How to add an alert
             </Button>
           </div>
+          <UnifiedAlertingPromotion />
           <VerticalGroup spacing="none">
             {alertRules.map((rule) => {
               return (

public/app/features/alerting/components/UnifiedAlertingPromotion.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UnifiedAlertingPromotion, LOCAL_STORAGE_KEY } from './UnifiedAlertingPromotion';
+
+describe('Unified Alerting promotion', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('should show by default', () => {
+    const promotion = render(<UnifiedAlertingPromotion />);
+    expect(promotion.queryByLabelText('Alert info')).toBeInTheDocument();
+  });
+
+  it('should be hidden if dismissed', () => {
+    const promotion = render(<UnifiedAlertingPromotion />);
+    expect(window.localStorage.getItem(LOCAL_STORAGE_KEY)).toBe('true');
+
+    const dismissButton = promotion.getByRole('button');
+    userEvent.click(dismissButton);
+
+    expect(promotion.queryByLabelText('Alert info')).not.toBeInTheDocument();
+    expect(window.localStorage.getItem(LOCAL_STORAGE_KEY)).toBe('false');
+  });
+
+  it('should not render if previously dismissed', () => {
+    window.localStorage.setItem(LOCAL_STORAGE_KEY, 'false');
+    const promotion = render(<UnifiedAlertingPromotion />);
+
+    expect(promotion.queryByLabelText('Alert info')).not.toBeInTheDocument();
+  });
+});

public/app/features/alerting/components/UnifiedAlertingPromotion.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+
+import { Alert } from '@grafana/ui';
+import { useLocalStorage } from 'react-use';
+
+export const LOCAL_STORAGE_KEY = 'grafana.legacyalerting.unifiedalertingpromo';
+
+const UnifiedAlertingPromotion: FC<{}> = () => {
+  const [showUnifiedAlertingPromotion, setShowUnifiedAlertingPromotion] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_KEY,
+    true
+  );
+
+  if (!showUnifiedAlertingPromotion) {
+    return null;
+  }
+
+  return (
+    <Alert
+      severity="info"
+      title="Try out the Grafana 8 alerting!"
+      onRemove={() => setShowUnifiedAlertingPromotion(false)}
+    >
+      <p>
+        You are using the legacy Grafana alerting.
+        <br />
+        While we have no plans of deprecating it any time soon, we invite you to give the improved Grafana 8 alerting a
+        try.
+      </p>
+      <p>
+        See{' '}
+        <a href="https://grafana.com/docs/grafana/latest/alerting/unified-alerting/difference-old-new/">
+          What’s New with Grafana 8 alerting
+        </a>{' '}
+        to learn more about what&lsquo;s new in Grafana 8 alerting or learn{' '}
+        <a href="https://grafana.com/docs/grafana/latest/alerting/unified-alerting/opt-in/">
+          how to enable the new Grafana 8 alerting feature
+        </a>
+        .
+      </p>
+    </Alert>
+  );
+};
+
+export { UnifiedAlertingPromotion };