DEVPROD-6523: Patch Submission Filter (#130)

apps/spruce/cypress/integration/myPatches/my_patches.ts

@@ -71,7 +71,37 @@ describe("My Patches Page", () => {
         "/version/5ecedafb562343215a7ff297/tasks?statuses=success",
       );
   });
-
+  describe("Patch submission selctor", () => {
+    it("Clicking the patch submission selector updates the URL, and renders patches", () => {
+      cy.visit(MY_PATCHES_ROUTE);
+      cy.dataCy("requester-selector").click();
+      const cliPatchTitle = "main: EVG-7823 add a commit queue message (#4048)";
+      const prPatchTitle =
+        "evergreen-ci/evergreen' pull request #3186 by bsamek: EVG-7425 Don't send ShouldExit to unprovisioned hosts (https://github.com/evergreen-ci/evergreen/pull/3186)";
+      cy.dataCy("patch-card").first().contains(cliPatchTitle);
+      cy.dataCy("github_pull_request-option").click();
+      urlSearchParamsAreUpdated({
+        pathname: MY_PATCHES_ROUTE,
+        paramName: "requesters",
+        search: "github_pull_request",
+      });
+      cy.dataCy("patch-card").first().contains(prPatchTitle);
+      cy.dataCy("patch_request-option").click();
+      urlSearchParamsAreUpdated({
+        pathname: MY_PATCHES_ROUTE,
+        paramName: "requesters",
+        search: "github_pull_request,patch_request",
+      });
+      cy.dataCy("patch-card").first().contains(cliPatchTitle);
+      cy.dataCy("github_pull_request-option").click();
+      urlSearchParamsAreUpdated({
+        pathname: MY_PATCHES_ROUTE,
+        paramName: "requesters",
+        search: "patch_request",
+      });
+      cy.dataCy("patch-card").first().contains(cliPatchTitle);
+    });
+  });
   describe("Commit queue checkbox", () => {
     it("Clicking the commit queue checkbox updates the URL, requests patches and renders patches", () => {
       cy.visit(MY_PATCHES_ROUTE);

apps/spruce/src/components/PatchesPage/RequesterSelector.tsx

@@ -0,0 +1,44 @@
+import { Combobox, ComboboxOption } from "@leafygreen-ui/combobox";
+import { githubPRRequester, patchRequester } from "constants/patch";
+import { requesterSubscriberOptions } from "constants/triggers";
+import { useStatusesFilter } from "hooks";
+import { PatchPageQueryParams } from "types/patch";
+
+export const RequesterSelector: React.FC = () => {
+  const { inputValue: statusVal, setAndSubmitInputValue: statusValOnChange } =
+    useStatusesFilter({ urlParam: PatchPageQueryParams.Requesters });
+
+  return (
+    <Combobox
+      label=""
+      data-cy="requester-selector"
+      placeholder="Patch submission"
+      value={statusVal}
+      multiselect
+      onChange={statusValOnChange}
+      overflow="scroll-x"
+    >
+      {options.map(({ displayName, key, value }) => (
+        <ComboboxOption
+          key={key}
+          value={value}
+          displayName={displayName}
+          data-cy={`${value}-option`}
+        />
+      ))}
+    </Combobox>
+  );
+};
+
+const options = [
+  {
+    displayName: requesterSubscriberOptions[githubPRRequester],
+    value: githubPRRequester,
+    key: githubPRRequester,
+  },
+  {
+    displayName: requesterSubscriberOptions[patchRequester],
+    value: patchRequester,
+    key: patchRequester,
+  },
+];

apps/spruce/src/components/PatchesPage/usePatchesQueryParams.ts

@@ -13,13 +13,17 @@ import { PatchPageQueryParams, ALL_PATCH_STATUS } from "types/patch";
  */
 export const usePatchesQueryParams = (): Omit<
   Required<PatchesInput>,
-  "includeCommitQueue" | "onlyCommitQueue" | "requesters"
+  "includeCommitQueue" | "onlyCommitQueue"
 > => {
   const [patchName] = useQueryParam<string>(PatchPageQueryParams.PatchName, "");
   const [rawStatuses] = useQueryParam<string[]>(
     PatchPageQueryParams.Statuses,
     [],
   );
+  const [requesters] = useQueryParam<string[]>(
+    PatchPageQueryParams.Requesters,
+    [],
+  );
   const [hidden] = useQueryParam(PatchPageQueryParams.Hidden, false);
   const { limit, page } = usePagination();
   const statuses = rawStatuses.filter((v) => v && v !== ALL_PATCH_STATUS);
@@ -28,6 +32,7 @@ export const usePatchesQueryParams = (): Omit<
     includeHidden: hidden || Cookies.get(INCLUDE_HIDDEN_PATCHES) === "true",
     page,
     patchName: `${patchName}`,
+    requesters,
     statuses,
   };
 };

apps/spruce/src/constants/patch.ts

@@ -1,4 +1,6 @@
 export const commitQueueAlias = "__commit_queue";
 export const commitQueueRequester = "merge_test";
 export const githubMergeRequester = "github_merge_request";
+export const githubPRRequester = "github_pull_request";
+export const patchRequester = "patch_request";
 export const unlinkedPRUsers = new Set(["github_pull_request", "parent_patch"]);

apps/spruce/src/pages/UserPatches.tsx

@@ -3,6 +3,7 @@ import Cookies from "js-cookie";
 import { useParams } from "react-router-dom";
 import { useUserPatchesAnalytics } from "analytics";
 import { PatchesPage } from "components/PatchesPage";
+import { RequesterSelector } from "components/PatchesPage/RequesterSelector";
 import { usePatchesQueryParams } from "components/PatchesPage/usePatchesQueryParams";
 import { INCLUDE_COMMIT_QUEUE_USER_PATCHES } from "constants/cookies";
 import { DEFAULT_POLL_INTERVAL } from "constants/index";
@@ -52,6 +53,7 @@ export const UserPatches = () => {
   return (
     <PatchesPage
       analyticsObject={analyticsObject}
+      filterComp={<RequesterSelector />}
       pageTitle={pageTitle}
       loading={loading && !data?.user.patches}
       pageType="user"

apps/spruce/src/types/patch.ts

@@ -5,6 +5,7 @@ export enum PatchPageQueryParams {
   Page = "page",
   Limit = "limit",
   Hidden = "hidden",
+  Requesters = "requesters",
 }
 
 export enum PatchStatus {