reset states fixes

src/Explorer/Tabs/QueryTab/QueryResultSection.tsx

@@ -3,18 +3,21 @@ import QueryError from "Common/QueryError";
 import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
 import { MessageBanner } from "Explorer/Controls/MessageBanner";
 import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
+import useZoomLevel from "hooks/useZoomLevel";
 import React from "react";
+import { conditionalClass } from "Utils/StyleUtils";
 import RunQuery from "../../../../images/RunQuery.png";
 import { QueryResults } from "../../../Contracts/ViewModels";
 import { ErrorList } from "./ErrorList";
 import { ResultsView } from "./ResultsView";
-import useZoomLevel from "hooks/useZoomLevel";
-import { conditionalClass } from "Utils/StyleUtils";
 
 export interface ResultsViewProps {
   isMongoDB: boolean;
   queryResults: QueryResults;
   executeQueryDocumentsPage: (firstItemIndex: number) => Promise<void>;
+  queryText?: string;
+  databaseId?: string;
+  containerId?: string;
 }
 
 interface QueryResultProps extends ResultsViewProps {
@@ -49,6 +52,9 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
   queryResults,
   executeQueryDocumentsPage,
   isExecuting,
+  queryText,
+  databaseId,
+  containerId,
 }: QueryResultProps): JSX.Element => {
   const styles = useQueryTabStyles();
   const maybeSubQuery = queryEditorContent && /.*\(.*SELECT.*\)/i.test(queryEditorContent);
@@ -91,6 +97,9 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
           queryResults={queryResults}
           executeQueryDocumentsPage={executeQueryDocumentsPage}
           isMongoDB={isMongoDB}
+          queryText={queryText || queryEditorContent}
+          databaseId={databaseId}
+          containerId={containerId}
         />
       ) : (
         <ExecuteQueryCallToAction />

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -375,9 +375,9 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
       this._iterator = this.props.isPreferredApiMongoDB
         ? queryIterator(this.props.collection.databaseId, this.props.viewModelcollection, query)
         : queryDocuments(this.props.collection.databaseId, this.props.collection.id(), query, {
-            enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(),
-            abortSignal: this.queryAbortController.signal,
-          } as unknown as FeedOptions);
+          enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(),
+          abortSignal: this.queryAbortController.signal,
+        } as unknown as FeedOptions);
     }
 
     await this._queryDocumentsPage(firstItemIndex);
@@ -798,6 +798,8 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                       this.props.copilotStore,
                     )
                   }
+                  databaseId={this.props.collection.databaseId}
+                  containerId={this.props.collection.id()}
                 />
               ) : (
                 <QueryResultSection
@@ -809,6 +811,8 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                   executeQueryDocumentsPage={(firstItemIndex: number) =>
                     this._executeQueryDocumentsPage(firstItemIndex)
                   }
+                  databaseId={this.props.collection.databaseId}
+                  containerId={this.props.collection.id()}
                 />
               )}
             </Allotment.Pane>

src/Explorer/Tabs/QueryTab/ResultsView.tsx

@@ -29,7 +29,7 @@ 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";
@@ -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,9 +543,12 @@ 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 [showIncluded, setShowIncluded] = useState(true);
@@ -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)
@@ -582,10 +600,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 +845,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 +894,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>
   );