DEVPROD-14677: Add menu button to clear all filters (#652)

apps/spruce/cypress/integration/waterfall/filters.ts

@@ -204,3 +204,19 @@ describe("revision filtering", () => {
       .invoke("attr", "data-highlighted", "true");
   });
 });
+
+describe("clear all filters button", () => {
+  it("clicking the clear filters button clears all parameters except for minOrder & maxOrder", () => {
+    cy.visit(
+      "/project/spruce/waterfall?buildVariants=ubuntu&maxOrder=1235&requesters=gitter_request&statuses=success&tasks=test",
+    );
+    cy.dataCy("waterfall-menu").click();
+    cy.dataCy("clear-all-filters").click();
+
+    cy.location("search").should("not.contain", "buildVariants");
+    cy.location("search").should("not.contain", "tasks");
+    cy.location("search").should("not.contain", "statuses");
+    cy.location("search").should("not.contain", "requesters");
+    cy.location("search").should("contain", "maxOrder=1235");
+  });
+});

apps/spruce/src/analytics/waterfall/useWaterfallAnalytics.ts

@@ -15,6 +15,7 @@ type Action =
   | { name: "Clicked variant label" }
   | { name: "Clicked task box"; "task.status": string }
   | { name: "Clicked jump to most recent commit button" }
+  | { name: "Clicked clear all filters button" }
   | {
       name: "Clicked pin build variant";
       action: "pinned" | "unpinned";

apps/spruce/src/components/FilterChips/__snapshots__/FilterChips_Default.storyshot

@@ -44,7 +44,7 @@
       <button
         aria-disabled="false"
         class="lg-ui-button-0000 leafygreen-ui-168frnw"
-        data-cy="clear-all-filters"
+        data-cy="clear-filters"
         data-lgid="lg-button"
         type="button"
       >

apps/spruce/src/components/FilterChips/index.tsx

@@ -45,7 +45,7 @@ const FilterChips: React.FC<FilterChipsProps> = ({
       )}
       {chips.length > 0 && (
         <Button
-          data-cy="clear-all-filters"
+          data-cy="clear-filters"
           onClick={handleClearAll}
           size={Size.XSmall}
           variant={Variant.Default}

apps/spruce/src/components/FilterChips/useFilterChipQueryParams.test.tsx

@@ -115,7 +115,7 @@ describe("filterChips - queryParams", () => {
     let chips = screen.queryAllByDataCy("filter-chip");
     expect(chips).toHaveLength(4);
 
-    await user.click(screen.getByDataCy("clear-all-filters"));
+    await user.click(screen.getByDataCy("clear-filters"));
     chips = screen.queryAllByDataCy("filter-chip");
     expect(chips).toHaveLength(0);
 
@@ -133,7 +133,7 @@ describe("filterChips - queryParams", () => {
     let chips = screen.queryAllByDataCy("filter-chip");
     expect(chips).toHaveLength(4);
 
-    await user.click(screen.getByDataCy("clear-all-filters"));
+    await user.click(screen.getByDataCy("clear-filters"));
     chips = screen.queryAllByDataCy("filter-chip");
     expect(chips).toHaveLength(0);
 

apps/spruce/src/gql/generated/types.ts

@@ -3192,6 +3192,7 @@ export type UpdateVolumeInput = {
   expiration?: InputMaybe<Scalars["Time"]["input"]>;
   name?: InputMaybe<Scalars["String"]["input"]>;
   noExpiration?: InputMaybe<Scalars["Boolean"]["input"]>;
+  size?: InputMaybe<Scalars["Int"]["input"]>;
   volumeId: Scalars["String"]["input"];
 };
 

apps/spruce/src/pages/waterfall/RequesterFilter/index.tsx

@@ -31,14 +31,13 @@ export const RequesterFilter = () => {
   return (
     <Combobox
       data-cy="requester-filter"
-      // Use an uncontrolled component so that the transition does not affect combobox rendering
-      initialValue={requesters}
       label="Requesters"
       multiselect
       onChange={handleChange}
       overflow="scroll-x"
       placeholder="Displaying all requesters"
       popoverZIndex={zIndex.popover}
+      value={requesters}
     >
       {commitRequesters.map((requester) => (
         <ComboboxOption

apps/spruce/src/pages/waterfall/StatusFilter/index.tsx

@@ -25,14 +25,13 @@ export const StatusFilter = () => {
   return (
     <Combobox
       data-cy="status-filter"
-      // Use an uncontrolled component so that the transition does not affect combobox rendering
-      initialValue={statuses}
       label="Task Status"
       multiselect
       onChange={handleChange}
       overflow="scroll-x"
       placeholder="Displaying all statuses"
       popoverZIndex={zIndex.popover}
+      value={statuses}
     >
       {SortedTaskStatus.map((ts) => (
         <ComboboxOption

apps/spruce/src/pages/waterfall/WaterfallMenu/AddNotification.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useWaterfallAnalytics } from "analytics";
 import { DropdownItem } from "components/ButtonDropdown";
+import Icon from "components/Icon";
 import { NotificationModal } from "components/Notifications";
 import { waterfallTriggers } from "constants/triggers";
 import { subscriptionMethods } from "types/subscription";
@@ -20,6 +21,7 @@ export const AddNotification: React.FC<AddNotificationProps> = ({
     <>
       <DropdownItem
         data-cy="add-notification"
+        glyph={<Icon glyph="Bell" />}
         onClick={() => {
           setIsModalVisible(true);
         }}

apps/spruce/src/pages/waterfall/WaterfallMenu/ClearAllFilters.tsx

@@ -0,0 +1,40 @@
+import { useWaterfallAnalytics } from "analytics";
+import { DropdownItem } from "components/ButtonDropdown";
+import Icon from "components/Icon";
+import { useQueryParams } from "hooks/useQueryParam";
+import { WaterfallFilterOptions } from "../types";
+
+interface ClearAllFiltersProps {
+  setMenuOpen: (open: boolean) => void;
+}
+
+export const ClearAllFilters: React.FC<ClearAllFiltersProps> = ({
+  setMenuOpen,
+}) => {
+  const { sendEvent } = useWaterfallAnalytics();
+  const [queryParams, setQueryParams] = useQueryParams();
+
+  const handleClick = () => {
+    sendEvent({ name: "Clicked clear all filters button" });
+    setQueryParams({
+      ...queryParams,
+      [WaterfallFilterOptions.BuildVariant]: undefined,
+      [WaterfallFilterOptions.Task]: undefined,
+      [WaterfallFilterOptions.Statuses]: undefined,
+      [WaterfallFilterOptions.Requesters]: undefined,
+      [WaterfallFilterOptions.Date]: undefined,
+      [WaterfallFilterOptions.Revision]: undefined,
+    });
+    setMenuOpen(false);
+  };
+
+  return (
+    <DropdownItem
+      data-cy="clear-all-filters"
+      glyph={<Icon glyph="NoFilter" />}
+      onClick={handleClick}
+    >
+      Clear all filters
+    </DropdownItem>
+  );
+};

apps/spruce/src/pages/waterfall/WaterfallMenu/GitCommitSearch.tsx

@@ -6,6 +6,7 @@ import { size } from "@evg-ui/lib/constants/tokens";
 import { useWaterfallAnalytics } from "analytics/waterfall/useWaterfallAnalytics";
 import { DropdownItem } from "components/ButtonDropdown";
 import { ConfirmationModal } from "components/ConfirmationModal";
+import Icon from "components/Icon";
 import { useQueryParams } from "hooks/useQueryParam";
 import { WaterfallFilterOptions } from "../types";
 
@@ -39,6 +40,7 @@ export const GitCommitSearch: React.FC<GitCommitSearchProps> = ({
     <>
       <DropdownItem
         data-cy="git-commit-search"
+        glyph={<Icon glyph="Code" />}
         onClick={() => {
           setModalOpen(true);
         }}

apps/spruce/src/pages/waterfall/WaterfallMenu/JumpToMostRecent.tsx

@@ -1,5 +1,6 @@
 import { useWaterfallAnalytics } from "analytics";
 import { DropdownItem } from "components/ButtonDropdown";
+import Icon from "components/Icon";
 import { useQueryParams } from "hooks/useQueryParam";
 import { WaterfallFilterOptions } from "../types";
 
@@ -20,8 +21,13 @@ export const JumpToMostRecent: React.FC<Props> = ({ setMenuOpen }) => {
     });
     setMenuOpen(false);
   };
+
   return (
-    <DropdownItem data-cy="jump-to-most-recent" onClick={handleClick}>
+    <DropdownItem
+      data-cy="jump-to-most-recent"
+      glyph={<Icon glyph="ClockWithArrow" />}
+      onClick={handleClick}
+    >
       Jump to most recent commit
     </DropdownItem>
   );

apps/spruce/src/pages/waterfall/WaterfallMenu/index.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { ButtonDropdown } from "components/ButtonDropdown";
 import { walkthroughSteps, waterfallGuideId } from "../constants";
 import { AddNotification } from "./AddNotification";
+import { ClearAllFilters } from "./ClearAllFilters";
 import { GitCommitSearch } from "./GitCommitSearch";
 import { JumpToMostRecent } from "./JumpToMostRecent";
 
@@ -17,6 +18,7 @@ export const WaterfallMenu: React.FC<Props> = ({ projectIdentifier }) => {
   const dropdownItems = [
     <GitCommitSearch key="git-commit-search" setMenuOpen={setMenuOpen} />,
     <JumpToMostRecent key="jump-to-most-recent" setMenuOpen={setMenuOpen} />,
+    <ClearAllFilters key="clear-all-filters" setMenuOpen={setMenuOpen} />,
     <AddNotification
       key="add-notification"
       projectIdentifier={projectIdentifier}