move AnalyticsNudge component into TopBar, hide if no nudge needed (#…

…1640)
tilt-dev · May 16, 2019 · 4e921aa · 4e921aa
1 parent 499c5f6
commit 4e921aa
Show file tree

Hide file tree

Showing 10 changed files with 214 additions and 548 deletions.
diff --git a/web/src/AnalyticsNudge.scss b/web/src/AnalyticsNudge.scss
@@ -1,12 +1,16 @@
 @import "constants";
 
 .AnalyticsNudge {
-  border-left: $sidebar-item solid #03c7d3;
   padding: $spacing-unit/4;
-  border-bottom: 1px solid $color-gray-light;
+  border: 1px solid $color-white;
+
+  display: none;
+}
+
+.is-visible {
+  display: block;
 }
 
 .AnalyticsNudge-buttons {
-  width: 100%;
   align-content: center;
 }
diff --git a/web/src/AnalyticsNudge.tsx b/web/src/AnalyticsNudge.tsx
@@ -1,7 +1,12 @@
-import React, { Component } from "react"
+import React, { PureComponent } from "react"
 import "./AnalyticsNudge.scss"
+import { ResourceView } from "./types"
 
-class AnalyticsNudge extends Component {
+type AnalyticsNudgeProps = {
+  needsNudge: boolean
+}
+
+class AnalyticsNudge extends PureComponent<AnalyticsNudgeProps> {
   static analyticsOpt(optIn: boolean) {
     let url = `//${window.location.host}/api/analytics_opt`
 
@@ -10,27 +15,34 @@ class AnalyticsNudge extends Component {
     fetch(url, {
       method: "post",
       body: JSON.stringify(payload),
+    }).then(function(response) {
+      console.log("got response -->", response.status) // returns 200
     })
   }
   render() {
+    let classes = ["AnalyticsNudge"]
+    if (this.props.needsNudge) {
+      // or if  already visible...
+      classes.push("is-visible")
+    }
+
     return (
-      <div className="AnalyticsNudge" key="AnalyticsNudge">
-        <div>
-          Congrats on your first Tilt resource 🎉 Help us help you: may we
-          collect anonymized data on your usage? (Read more{" "}
+      <div className={classes.join(" ")}>
+        <span>
+          Congrats on your first Tilt resource 🎉 Opt into analytics? (Read more{" "}
           <a href="https://github.com/windmilleng/tilt#privacy" target="_blank">
             here
           </a>
-          .)
-        </div>
-        <div className="AnalyticsNudge-buttons">
+          .)&nbsp;
+        </span>
+        <span className="AnalyticsNudge-buttons">
           <button onClick={() => AnalyticsNudge.analyticsOpt(true)}>
             Yes!
           </button>
           <button onClick={() => AnalyticsNudge.analyticsOpt(false)}>
             Nope!
           </button>
-        </div>
+        </span>
       </div>
     )
   }

diff --git a/web/src/HUD.tsx b/web/src/HUD.tsx
@@ -197,7 +197,6 @@ class HUD extends Component<HudProps, HudState> {
         <Sidebar
           selected={name}
           items={sidebarItems}
-          needsNudge={needsNudge}
           isClosed={isSidebarClosed}
           toggleSidebar={toggleSidebar}
           resourceView={t}
@@ -234,6 +233,7 @@ class HUD extends Component<HudProps, HudState> {
           sailEnabled={sailEnabled}
           sailUrl={sailUrl}
           numberOfAlerts={numAlerts}
+          needsNudge={needsNudge}
         />
       )
     }

diff --git a/web/src/Sidebar.test.tsx b/web/src/Sidebar.test.tsx
@@ -30,7 +30,6 @@ describe("sidebar", () => {
           <Sidebar
             isClosed={true}
             items={[]}
-            needsNudge={false}
             selected=""
             toggleSidebar={null}
             resourceView={ResourceView.Log}
@@ -54,7 +53,6 @@ describe("sidebar", () => {
         <Sidebar
           isClosed={false}
           items={items}
-          needsNudge={false}
           selected=""
           toggleSidebar={null}
           resourceView={ResourceView.Log}
@@ -76,7 +74,6 @@ describe("sidebar", () => {
           <Sidebar
             isClosed={false}
             items={items}
-            needsNudge={false}
             selected=""
             toggleSidebar={null}
             resourceView={ResourceView.Log}
@@ -103,7 +100,6 @@ describe("sidebar", () => {
           <Sidebar
             isClosed={false}
             items={items}
-            needsNudge={false}
             selected=""
             toggleSidebar={null}
             resourceView={ResourceView.Log}
@@ -127,53 +123,6 @@ describe("sidebar", () => {
           <Sidebar
             isClosed={false}
             items={items}
-            needsNudge={false}
-            selected=""
-            toggleSidebar={null}
-            resourceView={ResourceView.Log}
-            pathBuilder={pathBuilder}
-          />
-        </MemoryRouter>
-      )
-      .toJSON()
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it("renders analytics nudge", () => {
-    let items = twoResourceView().Resources.map((res: any) => {
-      return new SidebarItem(res)
-    })
-    const tree = renderer
-      .create(
-        <MemoryRouter initialEntries={["/"]}>
-          <Sidebar
-            isClosed={false}
-            items={items}
-            needsNudge={true}
-            selected=""
-            toggleSidebar={null}
-            resourceView={ResourceView.Log}
-            pathBuilder={pathBuilder}
-          />
-        </MemoryRouter>
-      )
-      .toJSON()
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it("renders analytics nudge as third list item", () => {
-    let items = allResourcesOK().map((res: any) => {
-      return new SidebarItem(res)
-    })
-    const tree = renderer
-      .create(
-        <MemoryRouter initialEntries={["/"]}>
-          <Sidebar
-            isClosed={false}
-            items={items.slice(0, 6)}
-            needsNudge={true}
             selected=""
             toggleSidebar={null}
             resourceView={ResourceView.Log}

diff --git a/web/src/Sidebar.tsx b/web/src/Sidebar.tsx
@@ -2,7 +2,6 @@ import React, { PureComponent } from "react"
 import { ReactComponent as ChevronSvg } from "./assets/svg/chevron.svg"
 import { ReactComponent as DotSvg } from "./assets/svg/dot.svg"
 import { ReactComponent as DotBuildingSvg } from "./assets/svg/dot-building.svg"
-import AnalyticsNudge from "./AnalyticsNudge"
 import { Link } from "react-router-dom"
 import { combinedStatus, warnings } from "./status"
 import "./Sidebar.scss"
@@ -42,7 +41,6 @@ class SidebarItem {
 type SidebarProps = {
   isClosed: boolean
   items: SidebarItem[]
-  needsNudge: boolean
   selected: string
   toggleSidebar: any
   resourceView: ResourceView
@@ -139,19 +137,6 @@ class Sidebar extends PureComponent<SidebarProps> {
       )
     })
 
-    if (this.props.needsNudge) {
-      let nudgeItem = (
-        <li key="AnalyticsNudge">
-          <AnalyticsNudge />
-        </li>
-      )
-      if (listItems.length > 2) {
-        listItems.splice(2, 0, nudgeItem)
-      } else {
-        listItems.push(nudgeItem)
-      }
-    }
-
     return (
       <section className={classes.join(" ")}>
         <nav className="Sidebar-resources">

diff --git a/web/src/TopBar.scss b/web/src/TopBar.scss
@@ -11,6 +11,11 @@
   z-index: $z-topbar;
   color: $color-gray-light;
 
+  display: flex;
+  flex-direction: column;
+}
+
+.TopBar-row {
   display: flex;
   flex-direction: row;
   align-items: center;

diff --git a/web/src/TopBar.test.tsx b/web/src/TopBar.test.tsx
@@ -16,6 +16,7 @@ it("shows sail share button", () => {
           sailEnabled={true}
           sailUrl=""
           numberOfAlerts={0}
+          needsNudge={false}
         />
       </MemoryRouter>
     )
@@ -36,6 +37,7 @@ it("shows sail url", () => {
           sailEnabled={true}
           sailUrl="www.sail.dev/xyz"
           numberOfAlerts={1}
+          needsNudge={false}
         />
       </MemoryRouter>
     )

diff --git a/web/src/TopBar.tsx b/web/src/TopBar.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from "react"
 import { ResourceView } from "./types"
 import "./TopBar.scss"
+import AnalyticsNudge from "./AnalyticsNudge"
 import SailInfo from "./SailInfo"
 import TabNav from "./TabNav"
 
@@ -12,24 +13,28 @@ type TopBarProps = {
   sailEnabled: boolean
   sailUrl: string
   numberOfAlerts: number
+  needsNudge: boolean
 }
 
 class TopBar extends PureComponent<TopBarProps> {
   render() {
     return (
       <div className="TopBar">
-        <TabNav
-          previewUrl={this.props.previewUrl}
-          logUrl={this.props.logUrl}
-          alertsUrl={this.props.alertsUrl}
-          resourceView={this.props.resourceView}
-          numberOfAlerts={this.props.numberOfAlerts}
-        />
-        <span className="TopBar-spacer">&nbsp;</span>
-        <SailInfo
-          sailEnabled={this.props.sailEnabled}
-          sailUrl={this.props.sailUrl}
-        />
+        <AnalyticsNudge needsNudge={this.props.needsNudge} />
+        <div className="TopBar-row">
+          <TabNav
+            previewUrl={this.props.previewUrl}
+            logUrl={this.props.logUrl}
+            alertsUrl={this.props.alertsUrl}
+            resourceView={this.props.resourceView}
+            numberOfAlerts={this.props.numberOfAlerts}
+          />
+          <span className="TopBar-spacer">&nbsp;</span>
+          <SailInfo
+            sailEnabled={this.props.sailEnabled}
+            sailUrl={this.props.sailUrl}
+          />
+        </div>
       </div>
     )
   }