chore(webview): NoSQL Query History is persisted (#2640)

Author: bk201-

src/panels/QueryEditorTab.ts

@@ -5,10 +5,9 @@
 
 import { type PartitionKeyDefinition } from '@azure/cosmos';
 import { callWithTelemetryAndErrorHandling } from '@microsoft/vscode-azext-utils';
+import * as l10n from '@vscode/l10n';
 import * as crypto from 'crypto';
 import * as vscode from 'vscode';
-
-import * as l10n from '@vscode/l10n';
 import { getCosmosDBClientByConnection, getCosmosDBKeyCredential } from '../cosmosdb/getCosmosClient';
 import { type NoSqlQueryConnection } from '../cosmosdb/NoSqlCodeLensProvider';
 import { DocumentSession } from '../cosmosdb/session/DocumentSession';
@@ -19,13 +18,23 @@ import {
     type SerializedQueryResult,
 } from '../cosmosdb/types/queryResult';
 import { getNoSqlQueryConnection } from '../cosmosdb/utils/NoSqlQueryConnection';
+import { StorageNames, StorageService, type StorageItem } from '../services/storageService';
 import { queryMetricsToCsv, queryResultToCsv } from '../utils/csvConverter';
 import { getIsSurveyDisabledGlobally, openSurvey, promptAfterActionEventually } from '../utils/survey';
 import { ExperienceKind, UsageImpact } from '../utils/surveyTypes';
 import * as vscodeUtil from '../utils/vscodeUtils';
 import { BaseTab, type CommandPayload } from './BaseTab';
 import { DocumentTab } from './DocumentTab';
 
+const QUERY_HISTORY_SIZE = 10;
+const HISTORY_STORAGE_KEY = 'ms-azuretools.vscode-cosmosdb.history';
+
+type HistoryItem = StorageItem & {
+    properties: {
+        history: string[];
+    };
+};
+
 export class QueryEditorTab extends BaseTab {
     public static readonly title = 'Query Editor';
     public static readonly viewType = 'cosmosDbQuery';
@@ -98,6 +107,7 @@ export class QueryEditorTab extends BaseTab {
 
         this.channel.on<void>('ready', async () => {
             await this.updateConnection(this.connection);
+            await this.updateQueryHistory();
             if (this.query) {
                 await this.channel.postMessage({
                     type: 'event',
@@ -168,6 +178,8 @@ export class QueryEditorTab extends BaseTab {
                 );
             case 'copyMetricsCSVToClipboard':
                 return this.copyMetricsCSVToClipboard(payload.params[0] as SerializedQueryResult | null);
+            case 'updateQueryHistory':
+                return this.updateQueryHistory(payload.params[0] as string);
         }
 
         return super.getCommand(payload);
@@ -257,6 +269,50 @@ export class QueryEditorTab extends BaseTab {
         });
     }
 
+    private async updateQueryHistory(query?: string): Promise<void> {
+        await callWithTelemetryAndErrorHandling('cosmosDB.nosql.queryEditor.updateQueryHistory', async (context) => {
+            context.telemetry.suppressIfSuccessful = true;
+
+            if (!this.connection) {
+                throw new Error(l10n.t('No connection'));
+            }
+
+            const storage = StorageService.get(StorageNames.Default);
+            const containerId = `${this.connection.databaseId}/${this.connection.containerId}`;
+            const historyItems = (await storage.getItems(HISTORY_STORAGE_KEY)) as HistoryItem[];
+            const historyData = historyItems.find((item) => item.id === containerId) ?? {
+                id: containerId,
+                name: containerId,
+                properties: {
+                    history: [] as string[],
+                },
+            };
+
+            // First remove any existing occurrences of this query
+            const queryHistory = historyData.properties.history.filter((item) => item !== query);
+
+            // Add the new query to the beginning (most recent first)
+            if (query) {
+                queryHistory.unshift(query);
+            }
+
+            // Trim to max size if needed
+            if (queryHistory.length > QUERY_HISTORY_SIZE) {
+                queryHistory.length = QUERY_HISTORY_SIZE;
+            }
+
+            historyData.properties.history = queryHistory;
+            await storage.push(HISTORY_STORAGE_KEY, historyData);
+
+            // Update the webview with the new history
+            await this.channel.postMessage({
+                type: 'event',
+                name: 'updateQueryHistory',
+                params: [historyData.properties.history],
+            });
+        });
+    }
+
     private async duplicateTab(text: string): Promise<void> {
         await callWithTelemetryAndErrorHandling('cosmosDB.nosql.queryEditor.duplicateTab', () => {
             QueryEditorTab.render(this.connection, this.panel.viewColumn, false, text);

src/services/storageService.ts

@@ -26,7 +26,7 @@ export type StorageItem = {
     /**
      * Optional properties associated with the item.
      */
-    properties?: Record<string, string | boolean>;
+    properties?: Record<string, string[] | string | boolean>;
 
     /**
      * Optional array of secrets associated with the item.

src/webviews/cosmosdb/QueryEditor/state/QueryEditorContextProvider.tsx

@@ -31,7 +31,7 @@ export class QueryEditorContextProvider extends BaseContextProvider {
     }
 
     public async runQuery(query: string, options: ResultViewMetadata): Promise<void> {
-        this.dispatch({ type: 'appendQueryHistory', queryValue: query });
+        await this.sendCommand('updateQueryHistory', query);
         await this.sendCommand('runQuery', query, { ...DEFAULT_RESULT_VIEW_METADATA, ...options });
     }
     public async stopQuery(executionId: string): Promise<void> {
@@ -166,6 +166,10 @@ export class QueryEditorContextProvider extends BaseContextProvider {
             this.dispatch({ type: 'setIsSurveyCandidate', isSurveyCandidate: isSurveyCandidate });
         });
 
+        this.channel.on('updateQueryHistory', (queryHistory: string[]) => {
+            this.dispatch({ type: 'updateHistory', queryHistory });
+        });
+
         //TODO: there should be no queryError event that needs to show a toast,
         //      all errors should be handled by QuerySession and dispatched to host error handling.
         // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/webviews/cosmosdb/QueryEditor/state/QueryEditorState.tsx

@@ -36,8 +36,8 @@ export type DispatchAction =
           endExecutionTime: number;
       }
     | {
-          type: 'appendQueryHistory';
-          queryValue: string;
+          type: 'updateHistory';
+          queryHistory: string[];
       }
     | {
           type: 'setPageSize';
@@ -146,15 +146,8 @@ export function dispatch(state: QueryEditorState, action: DispatchAction): Query
             }
             return { ...state, isExecuting: false, endExecutionTime: action.endExecutionTime };
         }
-        case 'appendQueryHistory': {
-            const queryHistory = [...state.queryHistory, action.queryValue].filter(
-                (value, index, self) => self.indexOf(value) === index,
-            );
-            if (queryHistory.length > QUERY_HISTORY_SIZE) {
-                queryHistory.shift();
-            }
-            return { ...state, queryHistory };
-        }
+        case 'updateHistory':
+            return { ...state, queryHistory: action.queryHistory };
         case 'setPageSize':
             return { ...state, pageSize: action.pageSize };
         case 'updateQueryResult':