[Query Copilot] Add toggle on feedback buttons (#1512)

* Add toggle on feedback buttons, clear state when new query generated or deleted

* Update test

src/Explorer/QueryCopilot/Popup/DeletePopup.test.tsx

@@ -5,7 +5,15 @@ import { DeletePopup } from "./DeletePopup";
 
 describe("Delete Popup snapshot test", () => {
   it("should render when showDeletePopup is true", () => {
-    const wrapper = shallow(<DeletePopup showDeletePopup={true} setShowDeletePopup={() => any} setQuery={() => any} />);
+    const wrapper = shallow(
+      <DeletePopup
+        showDeletePopup={true}
+        setShowDeletePopup={() => any}
+        setQuery={() => any}
+        clearFeedback={() => any}
+        showFeedbackBar={() => any}
+      />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/QueryCopilot/Popup/DeletePopup.tsx

@@ -5,14 +5,20 @@ export const DeletePopup = ({
   showDeletePopup,
   setShowDeletePopup,
   setQuery,
+  clearFeedback,
+  showFeedbackBar,
 }: {
   showDeletePopup: boolean;
   setShowDeletePopup: Dispatch<SetStateAction<boolean>>;
   setQuery: Dispatch<SetStateAction<string>>;
+  clearFeedback: Dispatch<SetStateAction<void>>;
+  showFeedbackBar: Dispatch<SetStateAction<boolean>>;
 }): JSX.Element => {
   const deleteCode = () => {
     setQuery("");
     setShowDeletePopup(false);
+    clearFeedback();
+    showFeedbackBar(false);
   };
 
   return (

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -87,6 +87,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   const [isGeneratingQuery, setIsGeneratingQuery] = useState<boolean>(false);
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
   const [likeQuery, setLikeQuery] = useState<boolean>();
+  const [dislikeQuery, setDislikeQuery] = useState<boolean>();
   const [showCallout, setShowCallout] = useState<boolean>(false);
   const [showSamplePrompts, setShowSamplePrompts] = useState<boolean>(false);
   const [queryIterator, setQueryIterator] = useState<MinimalQueryIterator>();
@@ -263,6 +264,12 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
     return [executeQueryBtn, saveQueryBtn, samplePromptsBtn];
   };
 
+  const resetButtonState = () => {
+    setDislikeQuery(false);
+    setLikeQuery(false);
+    setShowCallout(false);
+  };
+
   React.useEffect(() => {
     useCommandBar.getState().setContextButtons(getCommandbarButtons());
   }, [query, selectedQuery]);
@@ -291,6 +298,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
           onClick={() => {
             updateHistories();
             generateSQLQuery();
+            resetButtonState();
           }}
         />
         {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
@@ -434,17 +442,23 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
             style={{ marginLeft: 20 }}
             iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
             onClick={() => {
-              setLikeQuery(true);
+              setShowCallout(!likeQuery);
-              setShowCallout(true);
+              setLikeQuery(!likeQuery);
+              if (dislikeQuery) {
+                setDislikeQuery(!dislikeQuery);
+              }
             }}
           />
           <IconButton
             style={{ margin: "0 10px" }}
-            iconProps={{ iconName: likeQuery === false ? "DislikeSolid" : "Dislike" }}
+            iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
             onClick={() => {
-              setLikeQuery(false);
+              if (!dislikeQuery) {
+                useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
+                setLikeQuery(false);
+              }
+              setDislikeQuery(!dislikeQuery);
               setShowCallout(false);
-              useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
             }}
           />
           <Separator vertical style={{ color: "#EDEBE9" }} />
@@ -456,7 +470,9 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
             Copy code
           </CommandBarButton>
           <CommandBarButton
-            onClick={() => setShowDeletePopup(true)}
+            onClick={() => {
+              setShowDeletePopup(true);
+            }}
             iconProps={{ iconName: "Delete" }}
             style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
           >
@@ -491,7 +507,13 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       <WelcomeModal visible={localStorage.getItem("hideWelcomeModal") !== "true"}></WelcomeModal>
       {isSamplePromptsOpen ? <SamplePrompts sampleProps={sampleProps} /> : <></>}
       {query !== "" && query.trim().length !== 0 ? (
-        <DeletePopup showDeletePopup={showDeletePopup} setShowDeletePopup={setShowDeletePopup} setQuery={setQuery} />
+        <DeletePopup
+          showDeletePopup={showDeletePopup}
+          setShowDeletePopup={setShowDeletePopup}
+          setQuery={setQuery}
+          clearFeedback={resetButtonState}
+          showFeedbackBar={setShowFeedbackBar}
+        />
       ) : (
         <></>
       )}