web: report analytics on sidebar name filter

web/src/OverviewSidebarOptions.test.tsx

@@ -1,6 +1,8 @@
 import { mount, ReactWrapper } from "enzyme"
+import fetchMock from "jest-fetch-mock"
 import React from "react"
 import { MemoryRouter } from "react-router"
+import { expectIncrs } from "./analytics_test_helpers"
 import { accessorsForTesting, tiltfileKeyContext } from "./LocalStorage"
 import {
   TestsWithErrors,
@@ -9,6 +11,7 @@ import {
 } from "./OverviewResourceSidebar.stories"
 import {
   AlertsOnTopToggle,
+  ClearResourceNameFilterButton,
   FilterOptionList,
   OverviewSidebarOptions,
   ResourceNameFilterTextField,
@@ -76,8 +79,16 @@ function clickTestsOnlyControl(root: ReactWrapper) {
 const allNames = ["(Tiltfile)", "vigoda", "snack", "beep", "boop"]
 
 describe("overview sidebar options", () => {
+  beforeEach(() => {
+    fetchMock.resetMocks()
+    fetchMock.mockResponse(JSON.stringify({}))
+    jest.useFakeTimers()
+  })
+
   afterEach(() => {
+    fetchMock.resetMocks()
     localStorage.clear()
+    jest.useRealTimers()
   })
 
   it("shows all resources by default", () => {
@@ -250,6 +261,40 @@ describe("overview sidebar options", () => {
       "No matching resources",
     ])
   })
+
+  it("reports analytics, debounced, when search bar edited", () => {
+    const root = mount(
+      <OverviewSidebarOptions
+        options={defaultOptions}
+        setOptions={() => {}}
+        showFilters={true}
+      />
+    )
+    const tf = root.find(ResourceNameFilterTextField)
+    // two changes in rapid succession should result in only one analytics event
+    tf.props().onChange({ target: { value: "foo" } })
+    tf.props().onChange({ target: { value: "foobar" } })
+    expectIncrs(...[])
+    jest.runTimersToTime(10000)
+    expectIncrs({ name: "ui.web.resourceNameFilter", tags: { action: "edit" } })
+  })
+
+  it("reports analytics when search bar cleared", () => {
+    const root = mount(
+      <OverviewSidebarOptions
+        options={{ ...defaultOptions, resourceNameFilter: "foo" }}
+        setOptions={() => {}}
+        showFilters={true}
+      />
+    )
+    const button = root.find(ClearResourceNameFilterButton)
+
+    button.simulate("click")
+    expectIncrs({
+      name: "ui.web.resourceNameFilter",
+      tags: { action: "clear" },
+    })
+  })
 })
 
 it("toggles/untoggles Alerts On Top sorting when button clicked", () => {

web/src/OverviewSidebarOptions.tsx

@@ -1,7 +1,8 @@
-import { InputAdornment, TextField } from "@material-ui/core"
+import { debounce, InputAdornment, TextField } from "@material-ui/core"
 import { InputProps as StandardInputProps } from "@material-ui/core/Input/Input"
 import React, { Dispatch, SetStateAction } from "react"
 import styled from "styled-components"
+import { incr } from "./analytics"
 import { ReactComponent as CloseSvg } from "./assets/svg/close.svg"
 import { ReactComponent as SearchSvg } from "./assets/svg/search.svg"
 import {
@@ -118,6 +119,12 @@ export const ResourceNameFilterTextField = styled(TextField)`
   }
 `
 
+export const ClearResourceNameFilterButton = styled.button`
+  ${mixinResetButtonStyle};
+  display: flex;
+  align-items: center;
+`
+
 type OverviewSidebarOptionsProps = {
   showFilters: boolean
   options: SidebarOptions
@@ -191,31 +198,47 @@ function filterOptions(props: OverviewSidebarOptionsProps) {
   )
 }
 
+const resourceNameFilterEventName = "ui.web.resourceNameFilter"
+
+// debounce so we don't send for every single keypress
+let incrResourceNameFilterEdit = debounce(() => {
+  incr("ui.web.resourceNameFilter", { action: "edit" })
+}, 5000)
+
 function ResourceNameFilter(props: OverviewSidebarOptionsProps) {
   let inputProps: Partial<StandardInputProps> = {
     startAdornment: (
       <InputAdornment position="start">
-        <SearchSvg style={{ fill: Color.grayLightest }} />
+        <SearchSvg fill={Color.grayLightest} />
       </InputAdornment>
     ),
   }
 
   // only show the "x" to clear if there's any input to clear
   if (props.options.resourceNameFilter) {
+    const onClearClick = () => {
+      incr(resourceNameFilterEventName, { action: "clear" })
+      setResourceNameFilter("", props)
+    }
+
     inputProps.endAdornment = (
       <InputAdornment position="end">
-        <CloseSvg
-          style={{ fill: Color.grayLightest, cursor: "pointer" }}
-          onClick={() => setResourceNameFilter("", props)}
-        />
+        <ClearResourceNameFilterButton onClick={onClearClick}>
+          <CloseSvg fill={Color.grayLightest} />
+        </ClearResourceNameFilterButton>
       </InputAdornment>
     )
   }
 
+  const onChange = (e: any) => {
+    incrResourceNameFilterEdit()
+    setResourceNameFilter(e.target.value, props)
+  }
+
   return (
     <ResourceNameFilterTextField
       value={props.options.resourceNameFilter ?? ""}
-      onChange={(e) => setResourceNameFilter(e.target.value, props)}
+      onChange={onChange}
       placeholder="Filter resources by name"
       InputProps={inputProps}
       variant="outlined"

web/src/analytics_test_helpers.ts

@@ -16,3 +16,17 @@ export function expectIncr(fetchMockIndex: number, name: string, tags: Tags) {
     ])
   )
 }
+
+export function expectIncrs(...incrs: { name: string; tags: Tags }[]) {
+  const expectedRequestBodies = incrs.map((i) =>
+    JSON.stringify([
+      {
+        verb: "incr",
+        name: i.name,
+        tags: i.tags,
+      },
+    ])
+  )
+  const actualRequestBodies = fetchMock.mock.calls.map((e) => e[1]?.body)
+  expect(actualRequestBodies).toEqual(expectedRequestBodies)
+}