From b611d54349fa456848d6501bb0fd07f98054cb25 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Wed, 17 Nov 2021 16:46:44 +0100
Subject: [PATCH] Alerting: adds Unified Alerting promotion (#41551)

---
 .../app/features/alerting/AlertRuleList.tsx   |  2 +
 .../UnifiedAlertingPromotion.test.tsx         | 34 ++++++++++++++
 .../components/UnifiedAlertingPromotion.tsx   | 45 +++++++++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 public/app/features/alerting/components/UnifiedAlertingPromotion.test.tsx
 create mode 100644 public/app/features/alerting/components/UnifiedAlertingPromotion.tsx

diff --git a/public/app/features/alerting/AlertRuleList.tsx b/public/app/features/alerting/AlertRuleList.tsx
index ebe98915623..2085c76b96d 100644
--- a/public/app/features/alerting/AlertRuleList.tsx
+++ b/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 (
diff --git a/public/app/features/alerting/components/UnifiedAlertingPromotion.test.tsx b/public/app/features/alerting/components/UnifiedAlertingPromotion.test.tsx
new file mode 100644
index 00000000000..dba56797acf
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/public/app/features/alerting/components/UnifiedAlertingPromotion.tsx b/public/app/features/alerting/components/UnifiedAlertingPromotion.tsx
new file mode 100644
index 00000000000..d3a369494c9
--- /dev/null
+++ b/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 };