reset states fixes (#2207)

* reset states fixes

* fixed sdk response

---------

Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>

src/Explorer/Tabs/QueryTab/ResultsView.tsx

@@ -28,8 +28,7 @@ import { HttpHeaders } from "Common/Constants";
 import MongoUtility from "Common/MongoUtility";
 import { QueryMetrics } from "Contracts/DataModels";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
-import { parseIndexMetrics, renderImpactDots } from "Explorer/Tabs/QueryTab/IndexAdvisorUtils";
-import { IDocument, useQueryMetadataStore } from "Explorer/Tabs/QueryTab/QueryTabComponent";
+import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
 import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
 import React, { useCallback, useEffect, useState } from "react";
 import { userContext } from "UserContext";
@@ -37,6 +36,7 @@ import { logConsoleProgress } from "Utils/NotificationConsoleUtils";
 import create from "zustand";
 import { client } from "../../../Common/CosmosClient";
 import { handleError } from "../../../Common/ErrorHandlingUtils";
+import { parseIndexMetrics, renderImpactDots, type IndexMetricsResponse } from "./IndexAdvisorUtils";
 import { ResultsViewProps } from "./QueryResultSection";
 import { useIndexAdvisorStyles } from "./StylesAdvisor";
 enum ResultsTabs {
@@ -394,9 +394,8 @@ const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ query
         },
         {
           metric: "User defined function execution time",
-          value: `${
-            aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0
-          } ms`,
+          value: `${aggregatedQueryMetrics.runtimeExecutionTimes?.userDefinedFunctionExecutionTime?.toString() || 0
+            } ms`,
           toolTip: "Total time spent executing user-defined functions",
         },
         {
@@ -544,11 +543,14 @@ export interface IIndexMetric {
   path?: string;
   composite?: { path: string; order: string }[];
 }
-export const IndexAdvisorTab: React.FC = () => {
+export const IndexAdvisorTab: React.FC<{
+  queryText?: string;
+  databaseId?: string;
+  containerId?: string;
+}> = ({ queryText, databaseId, containerId }) => {
   const style = useIndexAdvisorStyles();
-  const { userQuery, databaseId, containerId } = useQueryMetadataStore();
   const [loading, setLoading] = useState(true);
-  const [indexMetrics, setIndexMetrics] = useState<string | null>(null);
+  const [indexMetrics, setIndexMetrics] = useState<IndexMetricsResponse | null>(null);
   const [showIncluded, setShowIncluded] = useState(true);
   const [showNotIncluded, setShowNotIncluded] = useState(true);
   const [selectedIndexes, setSelectedIndexes] = useState<IIndexMetric[]>([]);
@@ -562,10 +564,26 @@ export const IndexAdvisorTab: React.FC = () => {
 
   useEffect(() => {
     const fetchIndexMetrics = async () => {
+      // Reset all states when query parameters change
+      setLoading(true);
+      setIndexMetrics(null);
+      setIncludedIndexes([]);
+      setNotIncludedIndexes([]);
+      setSelectedIndexes([]);
+      setSelectAll(false);
+      setUpdateMessageShown(false);
+      setIsUpdating(false);
+      setJustUpdatedPolicy(false);
+
+      if (!queryText || !databaseId || !containerId) {
+        setLoading(false);
+        return;
+      }
+
       const clearMessage = logConsoleProgress(`Querying items with IndexMetrics in container ${containerId}`);
       try {
         const querySpec = {
-          query: userQuery,
+          query: queryText,
         };
         const sdkResponse = await client()
           .database(databaseId)
@@ -574,7 +592,12 @@ export const IndexAdvisorTab: React.FC = () => {
             populateIndexMetrics: true,
           })
           .fetchAll();
-        setIndexMetrics(sdkResponse.indexMetrics);
+
+        const parsedIndexMetrics = typeof sdkResponse.indexMetrics === 'string'
+          ? JSON.parse(sdkResponse.indexMetrics)
+          : sdkResponse.indexMetrics;
+
+        setIndexMetrics(parsedIndexMetrics);
       } catch (error) {
         handleError(error, "queryItemsWithIndexMetrics", `Error querying items from ${containerId}`);
       } finally {
@@ -582,10 +605,9 @@ export const IndexAdvisorTab: React.FC = () => {
         setLoading(false);
       }
     };
-    if (userQuery && databaseId && containerId) {
-      fetchIndexMetrics();
-    }
-  }, [userQuery, databaseId, containerId]);
+
+    fetchIndexMetrics();
+  }, [queryText, databaseId, containerId]);
 
   useEffect(() => {
     if (!indexMetrics) {
@@ -828,13 +850,21 @@ export const IndexAdvisorTab: React.FC = () => {
     </div>
   );
 };
-export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResults, executeQueryDocumentsPage }) => {
+export const ResultsView: React.FC<ResultsViewProps> = ({
+  isMongoDB,
+  queryResults,
+  executeQueryDocumentsPage,
+  queryText,
+  databaseId,
+  containerId
+}) => {
   const styles = useQueryTabStyles();
   const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
 
   const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
     setActiveTab(data.value as ResultsTabs);
   }, []);
+
   return (
     <div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
       <TabList selectedValue={activeTab} onTabSelect={onTabSelect}>
@@ -869,7 +899,13 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
           />
         )}
         {activeTab === ResultsTabs.QueryStats && <QueryStatsTab queryResults={queryResults} />}
-        {activeTab === ResultsTabs.IndexAdvisor && <IndexAdvisorTab />}
+        {activeTab === ResultsTabs.IndexAdvisor && (
+          <IndexAdvisorTab
+            queryText={queryText}
+            databaseId={databaseId}
+            containerId={containerId}
+          />
+        )}
       </div>
     </div>
   );