Clear all applied filters on submit

cypress/integration/projectHealth/commits.ts

@@ -201,25 +201,40 @@ describe("commits page", () => {
   describe("search by git commit", () => {
     const revision = "aac24c894994e44a2dadc6db40b46eb82e41f2cc";
 
-    beforeEach(() => {
-      cy.visit("/commits/spruce");
+    const searchCommit = (commitHash: string) => {
       cy.dataCy("waterfall-menu").click();
       cy.dataCy("git-commit-search").click();
       cy.dataCy("git-commit-search-modal").should("be.visible");
-      cy.getInputByLabel("Git Commit Hash").type(revision);
+      cy.getInputByLabel("Git Commit Hash").type(commitHash);
       cy.contains("button", "Submit").click();
-      cy.location("search").should("contain", `revision=${revision}`);
+      cy.location("search").should("contain", `revision=${commitHash}`);
+    };
+
+    beforeEach(() => {
+      cy.visit("/commits/spruce");
     });
 
     it("should jump to the given commit", () => {
+      searchCommit(revision);
       cy.get("[data-selected='true']").should("be.visible");
       cy.get("[data-selected='true']").should(
         "contain.text",
         revision.substring(0, 7)
       );
     });
 
+    it("should clear any applied filters and skip numbers", () => {
+      cy.visit(
+        "/commits/spruce?buildVariants=ubuntu&skipOrderNumber=1231&taskNames=codegen&view=FAILED"
+      );
+      searchCommit(revision);
+      cy.location("search").should("not.contain", "buildVariants");
+      cy.location("search").should("not.contain", "taskNames");
+      cy.location("search").should("not.contain", "skipOrderNumber");
+    });
+
     it("should be possible to paginate from the given commit", () => {
+      searchCommit(revision);
       cy.get("[data-selected='true']").should("be.visible");
 
       cy.dataCy("next-page-button").click();
@@ -234,5 +249,10 @@ describe("commits page", () => {
 
       cy.get("[data-selected='true']").should("be.visible");
     });
+
+    it("should show an error toast if the commit could not be found", () => {
+      searchCommit(revision.slice(3, 12));
+      cy.validateToast("error");
+    });
   });
 });

src/pages/commits/CommitChart/index.tsx

@@ -26,14 +26,9 @@ const DEFAULT_OPEN_STATE = true;
 interface Props {
   versions?: Commits;
   hasTaskFilter?: boolean;
-  noData?: boolean;
 }
 
-export const CommitChart: React.FC<Props> = ({
-  hasTaskFilter,
-  noData = false,
-  versions,
-}) => {
+export const CommitChart: React.FC<Props> = ({ hasTaskFilter, versions }) => {
   const [chartOpen, setChartOpen] = useQueryParam(
     ChartToggleQueryParams.chartOpen,
     DEFAULT_OPEN_STATE
@@ -70,7 +65,7 @@ export const CommitChart: React.FC<Props> = ({
   const onToggleAccordion = ({ isVisible }) =>
     Cookies.set(COMMIT_CHART_TYPE_VIEW_OPTIONS_ACCORDION, isVisible.toString());
 
-  return noData ? (
+  return !versions ? (
     <ChartWrapper>
       <Grid numDashedLine={5} />
     </ChartWrapper>

src/pages/commits/CommitsWrapper.tsx

@@ -42,7 +42,7 @@ export const CommitsWrapper: React.FC<CommitsWrapperProps> = ({
     return <StyledSkeleton active title={false} paragraph={{ rows: 6 }} />;
   }
   if (!versions) {
-    return <CommitChart noData />;
+    return <CommitChart />;
   }
   if (versions) {
     return (

src/pages/commits/RenderCommit.tsx

@@ -112,15 +112,18 @@ const isCommitSelected = (commit: Commit, revision: string) => {
   if (revision.trim() === "") {
     return false;
   }
-  if (version && version.revision.includes(revision)) {
+
+  if (version?.revision.startsWith(revision)) {
     return true;
   }
+
   if (
     rolledUpVersions &&
-    rolledUpVersions.some((v) => v.revision.includes(revision))
+    rolledUpVersions.some((v) => v.revision.startsWith(revision))
   ) {
     return true;
   }
+
   return false;
 };
 

src/pages/commits/WaterfallMenu/GitCommitSearch.tsx

@@ -3,7 +3,7 @@ import TextInput from "@leafygreen-ui/text-input";
 import { useProjectHealthAnalytics } from "analytics/projectHealth/useProjectHealthAnalytics";
 import { DropdownItem } from "components/ButtonDropdown";
 import { ConfirmationModal } from "components/ConfirmationModal";
-import { useUpdateURLQueryParams } from "hooks/useUpdateURLQueryParams";
+import { useQueryParams } from "hooks/useQueryParam";
 import { MainlineCommitQueryParams } from "types/commits";
 
 interface GitCommitSearchProps {
@@ -14,16 +14,15 @@ export const GitCommitSearch: React.FC<GitCommitSearchProps> = ({
   setMenuOpen,
 }) => {
   const { sendEvent } = useProjectHealthAnalytics({ page: "Commit chart" });
-  const updateQueryParams = useUpdateURLQueryParams();
+  const [, setQueryParams] = useQueryParams();
 
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [commitHash, setCommitHash] = useState("");
 
   const onSubmit = () => {
     sendEvent({ name: "Search for commit", commit: commitHash });
-    updateQueryParams({
+    setQueryParams({
       [MainlineCommitQueryParams.Revision]: commitHash,
-      [MainlineCommitQueryParams.SkipOrderNumber]: undefined,
     });
     setIsModalVisible(false);
     setMenuOpen(false);
@@ -51,6 +50,7 @@ export const GitCommitSearch: React.FC<GitCommitSearchProps> = ({
         title="Search by Git Commit Hash"
       >
         <TextInput
+          description="Note: this is an experimental feature that works best with no task or build variant filters applied. Applying a git commit hash will clear all applied filters."
           label="Git Commit Hash"
           onChange={(e) => setCommitHash(e.target.value)}
           onKeyPress={(e) => e.key === "Enter" && onSubmit()}