From c9e8f4aab087f85a0f675343c68e825753fe637b Mon Sep 17 00:00:00 2001
From: gillespi314 <73313222+gillespi314@users.noreply.github.com>
Date: Mon, 20 Dec 2021 10:24:52 -0800
Subject: [PATCH] Fix bug in target selector UI (#3419)

---
 changes/issue-3047-cancel-select-targets                   | 2 ++
 .../pages/policies/PolicyPage/screens/SelectTargets.tsx    | 7 ++++++-
 frontend/pages/queries/QueryPage/screens/SelectTargets.tsx | 7 ++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 changes/issue-3047-cancel-select-targets

diff --git a/changes/issue-3047-cancel-select-targets b/changes/issue-3047-cancel-select-targets
new file mode 100644
index 0000000000..403c80b468
--- /dev/null
+++ b/changes/issue-3047-cancel-select-targets
@@ -0,0 +1,2 @@
+* Fix UI bug in target selector for query editor and policy editor where cancel button did not reset
+selected targets
\ No newline at end of file
diff --git a/frontend/pages/policies/PolicyPage/screens/SelectTargets.tsx b/frontend/pages/policies/PolicyPage/screens/SelectTargets.tsx
index 478dd3e7af..6db0899a8e 100644
--- a/frontend/pages/policies/PolicyPage/screens/SelectTargets.tsx
+++ b/frontend/pages/policies/PolicyPage/screens/SelectTargets.tsx
@@ -182,6 +182,11 @@ const SelectTargets = ({
     }
   );
 
+  const handleClickCancel = () => {
+    setSelectedTargets([]);
+    goToQueryEditor();
+  };
+
   const handleSelectedLabels = (entity: ILabel | ITeam) => (
     e: React.MouseEvent<HTMLButtonElement>
   ): void => {
@@ -318,7 +323,7 @@ const SelectTargets = ({
       <div className={`${baseClass}__targets-button-wrap`}>
         <Button
           className={`${baseClass}__btn`}
-          onClick={goToQueryEditor}
+          onClick={handleClickCancel}
           variant="text-link"
         >
           Cancel
diff --git a/frontend/pages/queries/QueryPage/screens/SelectTargets.tsx b/frontend/pages/queries/QueryPage/screens/SelectTargets.tsx
index 2f4108393d..6a1469324b 100644
--- a/frontend/pages/queries/QueryPage/screens/SelectTargets.tsx
+++ b/frontend/pages/queries/QueryPage/screens/SelectTargets.tsx
@@ -190,6 +190,11 @@ const SelectTargets = ({
     }
   );
 
+  const handleClickCancel = () => {
+    setSelectedTargets([]);
+    goToQueryEditor();
+  };
+
   const handleSelectedLabels = (selectedLabel: ISelectTargetsEntity) => (
     e: React.MouseEvent<HTMLButtonElement>
   ): void => {
@@ -330,7 +335,7 @@ const SelectTargets = ({
       <div className={`${baseClass}__targets-button-wrap`}>
         <Button
           className={`${baseClass}__btn`}
-          onClick={goToQueryEditor}
+          onClick={handleClickCancel}
           variant="text-link"
         >
           Cancel