ui: Add localSetting selector and actions for email subscription alert

Create localSetting selector to preserve alert state (open/closed) for
email subscription notification.
Selector is added to the `bannerAlertsSelector` because it is used to
display global alerts.

Release note: None

pkg/ui/src/redux/alerts.spec.ts

@@ -22,9 +22,14 @@ import { AdminUIState, createAdminUIStore } from "./state";
 import {
   AlertLevel,
   alertDataSync,
-  staggeredVersionWarningSelector, staggeredVersionDismissedSetting,
-  newVersionNotificationSelector, newVersionDismissedLocalSetting,
-  disconnectedAlertSelector, disconnectedDismissedLocalSetting,
+  staggeredVersionWarningSelector,
+  staggeredVersionDismissedSetting,
+  newVersionNotificationSelector,
+  newVersionDismissedLocalSetting,
+  disconnectedAlertSelector,
+  disconnectedDismissedLocalSetting,
+  emailSubscriptionAlertLocalSetting,
+  emailSubscriptionAlertSelector,
 } from "./alerts";
 import { versionsSelector } from "src/redux/nodes";
 import {
@@ -350,6 +355,26 @@ describe("alerts", function() {
         });
       });
     });
+
+    describe("email signup for release notes alert", () => {
+      it("initialized with default 'false' (hidden) state", () => {
+        const settingState = emailSubscriptionAlertLocalSetting.selector(state());
+        assert.isFalse(settingState);
+      });
+
+      it("dismissed by by alert#dismiss", async () => {
+        // set alert to open state
+        dispatch(emailSubscriptionAlertLocalSetting.set(true));
+        const openState = emailSubscriptionAlertLocalSetting.selector(state());
+        assert.isTrue(openState);
+
+        // dismiss alert
+        const alert = emailSubscriptionAlertSelector(state());
+        await alert.dismiss(dispatch, state);
+        const dismissedState = emailSubscriptionAlertLocalSetting.selector(state());
+        assert.isFalse(dismissedState);
+      });
+    });
   });
 
   describe("data sync listener", function() {

pkg/ui/src/redux/alerts.ts

@@ -244,6 +244,29 @@ export const disconnectedAlertSelector = createSelector(
   },
 );
 
+export const emailSubscriptionAlertLocalSetting = new LocalSetting(
+  "email_subscription_alert", localSettingsSelector, false,
+);
+
+export const emailSubscriptionAlertSelector = createSelector(
+  emailSubscriptionAlertLocalSetting.selector,
+  ( emailSubscriptionAlert): Alert => {
+    if (!emailSubscriptionAlert) {
+      return undefined;
+    }
+    return {
+      level: AlertLevel.SUCCESS,
+      title: "You successfully signed up for CockroachDB release notes",
+      text: "You will receive emails about CockroachDB releases and best practices. You can unsubscribe from these emails anytime.",
+      showAsAlert: true,
+      dismiss: (dispatch: Dispatch<Action, AdminUIState>) => {
+        dispatch(emailSubscriptionAlertLocalSetting.set(false));
+        return Promise.resolve();
+      },
+    };
+  },
+);
+
 /**
  * Selector which returns an array of all active alerts which should be
  * displayed in the alerts panel, which is embedded within the cluster overview
@@ -265,6 +288,7 @@ export const panelAlertsSelector = createSelector(
  */
 export const bannerAlertsSelector = createSelector(
   disconnectedAlertSelector,
+  emailSubscriptionAlertSelector,
   (...alerts: Alert[]): Alert[] => {
     return _.without(alerts, null, undefined);
   },