ui: Release notes signup

pkg/ui/src/components/core/typography.styl

@@ -17,6 +17,7 @@ $font-family--bold = SourceSansPro-Bold
 $font-family--semi-bold = SourceSansPro-SemiBold
 $font-family--monospace = SFMono
 
+$font-weight--extra-bold = 900
 $font-weight--bold = 600
 $font-weight--medium = 500
 $font-weight--light = 400

pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.spec.ts

@@ -14,7 +14,6 @@ import Analytics from "analytics-node";
 
 import { signUpEmailSubscription } from "./customAnalyticsSagas";
 import {
-  completeEmailSubscriptionSignUp,
   signUpForEmailSubscription,
 } from "./customAnanlyticsActions";
 
@@ -33,7 +32,6 @@ describe("customAnalyticsSagas", () => {
       const action = signUpForEmailSubscription(clusterId, email);
 
       return expectSaga(signUpEmailSubscription, action)
-        .put(completeEmailSubscriptionSignUp())
         .dispatch(action)
         .run()
         .then(() => {

pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts

@@ -13,8 +13,9 @@ import Analytics from "analytics-node";
 
 import { PayloadAction } from "src/interfaces/action";
 import { COCKROACHLABS_ADDR } from "src/util/cockroachlabsAPI";
+import { emailSubscriptionAlertLocalSetting } from "src/redux/alerts";
+
 import {
-  completeEmailSubscriptionSignUp,
   EMAIL_SUBSCRIPTION_SIGN_UP,
   EmailSubscriptionSignUpPayload,
 } from "./customAnanlyticsActions";
@@ -44,9 +45,11 @@ export function* signUpEmailSubscription(action: PayloadAction<EmailSubscription
     userId: clusterId,
     traits: {
       email,
+      release_notes_sign_up_from_admin_ui: "true",
+      product_updates: "true",
     },
   });
-  yield put(completeEmailSubscriptionSignUp());
+  yield put(emailSubscriptionAlertLocalSetting.set(true));
 }
 
 export function* customAnalyticsSaga() {

pkg/ui/src/redux/customAnalytics/customAnanlyticsActions.ts

@@ -8,12 +8,9 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import { Action } from "redux";
-
 import { PayloadAction } from "src/interfaces/action";
 
 export const EMAIL_SUBSCRIPTION_SIGN_UP = "cockroachui/customanalytics/EMAIL_SUBSCRIPTION_SIGN_UP";
-export const EMAIL_SUBSCRIPTION_SIGN_UP_COMPLETE = "cockroachui/customanalytics/EMAIL_SUBSCRIPTION_SIGN_UP_COMPLETE";
 
 export type EmailSubscriptionSignUpPayload = {
   email: string;
@@ -29,9 +26,3 @@ export function signUpForEmailSubscription(clusterId: string, email: string): Pa
     },
   };
 }
-
-export function completeEmailSubscriptionSignUp(): Action {
-  return {
-    type: EMAIL_SUBSCRIPTION_SIGN_UP_COMPLETE,
-  };
-}

pkg/ui/src/views/cluster/containers/clusterOverview/index.tsx

@@ -22,6 +22,7 @@ import createChartComponent from "src/views/shared/util/d3-react";
 import capacityChart from "./capacity";
 import spinner from "assets/spinner.gif";
 import { refreshNodes, refreshLiveness } from "src/redux/apiReducers";
+import EmailSubscription from "src/views/dashboard/emailSubscription";
 import "./cluster.styl";
 
 // tslint:disable-next-line:variable-name
@@ -217,6 +218,7 @@ export default class ClusterOverview extends React.Component<any, any> {
     return (
       <div className="cluster-page">
         <Helmet title="Cluster Overview" />
+        <EmailSubscription />
         <section className="cluster-overview">
           <ClusterSummaryConnected />
         </section>

pkg/ui/src/views/dashboard/emailSubscription.styl

@@ -0,0 +1,79 @@
+// Copyright 2020 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+@require '~src/components/core/index.styl'
+
+$text-width = 352px
+
+.crl-email-subscription
+  border-radius 5px
+  box-shadow: 0 0 1px 0 rgba(67, 90, 111, 0.41)
+  display flex
+  flex-direction row
+  align-items center
+  justify-content flex-end
+  height 90px
+  background-color $colors--white
+  background-image url("../../../assets/dashboard/email_signup_background.svg")
+  background-repeat no-repeat
+  background-position-x $text-width
+
+  &__text
+    font-size $font-size--large
+    font-family $font-family--base
+    line-height 1.6
+    letter-spacing -0.2px
+    color $colors--white
+    flex-grow 1
+    height inherit
+    border-radius inherit
+    & > div
+      max-width $text-width
+      background $colors--primary-green-3
+      padding-left $spacing-large
+      height inherit
+      border-bottom-left-radius: inherit;
+      border-top-left-radius: inherit;
+      display flex
+      align-items center
+
+
+  &__controls
+    flex-grow 0
+    margin-left $spacing-medium
+
+  &__close-button
+    flex-grow 0
+    color $colors--neutral-7
+    align-self flex-start
+    margin $spacing-smaller $spacing-small $spacing-small $spacing-medium
+    cursor pointer
+    font-size $font-size--large
+    line-height $spacing-smaller
+    font-weight $font-weight--extra-bold
+
+
+  @media (max-width: 1055px) {
+    background-position center
+
+    .crl-email-subscription__text {
+      font-size $font-size--tall
+      font-family $font-family--base
+      line-height 1.6
+    }
+  }
+
+  @media (max-width: 940px) {
+    background-position left
+
+    .crl-email-subscription__text {
+      display none
+    }
+  }

pkg/ui/src/views/dashboard/emailSubscription.tsx

@@ -0,0 +1,87 @@
+// Copyright 2020 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React from "react";
+import { connect } from "react-redux";
+
+import { EmailSubscriptionForm } from "src/views/shared/components/emailSubscriptionForm";
+import { signUpForEmailSubscription } from "src/redux/customAnalytics";
+import { AdminUIState } from "src/redux/state";
+import { clusterIdSelector } from "src/redux/nodes";
+import { LocalSetting } from "src/redux/localsettings";
+
+import "./emailSubscription.styl";
+
+type EmailSubscriptionProps = MapDispatchToProps & MapStateToProps;
+
+class EmailSubscription extends React.Component<EmailSubscriptionProps> {
+  handleEmailSubscriptionSubmit = (email: string) => {
+    this.props.signUpForEmailSubscription(this.props.clusterId, email);
+  }
+
+  handlePanelHide = () => {
+    this.props.hidePanel();
+  }
+
+  render() {
+    const { isHiddenPanel } = this.props;
+
+    if (isHiddenPanel) {
+      return null;
+    }
+
+    return (
+      <section className="section">
+        <div className="crl-email-subscription">
+          <div className="crl-email-subscription__text">
+            <div>
+              Keep up-to-date with CockroachDB
+              software releases and best practices.
+            </div>
+          </div>
+          <div className="crl-email-subscription__controls">
+            <EmailSubscriptionForm onSubmit={this.handleEmailSubscriptionSubmit} />
+          </div>
+          <div
+            onClick={this.handlePanelHide}
+            className="crl-email-subscription__close-button"
+          >
+            &times;
+          </div>
+        </div>
+      </section>
+    );
+  }
+}
+
+const hidePanelLocalSetting = new LocalSetting<AdminUIState, boolean>(
+  "dashboard/release_notes_signup/hide", (s) => s.localSettings, false,
+);
+
+interface MapDispatchToProps {
+  signUpForEmailSubscription: (clusterId: string, email: string) => void;
+  hidePanel: () => void;
+}
+
+const mapDispatchToProps = {
+  signUpForEmailSubscription,
+  hidePanel: () => hidePanelLocalSetting.set(true),
+};
+
+interface MapStateToProps {
+  isHiddenPanel: boolean;
+  clusterId: string;
+}
+const mapStateToProps = (state: AdminUIState) => ({
+  isHiddenPanel: hidePanelLocalSetting.selector(state),
+  clusterId: clusterIdSelector(state),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(EmailSubscription);