Fix a few Query Result bugs: (#18234)

* remove query result auto focus after tab switch

* fix multi result in one batch

* fix grid f font

* message styling

* fix grgird header styling

* improve placeholder msg styling

* add a button to reveal query result panel

* hide message line

* add config check altlthough not actually needed

* use focus command insttead of show()

localization/xliff/vscode-mssql.xlf

@@ -1682,6 +1682,9 @@
     <trans-unit id="mssql.removeAadAccount">
       <source xml:lang="en">Remove Microsoft Entra Account</source>
     </trans-unit>
+    <trans-unit id="mssql.revealQueryResultPanel">
+      <source xml:lang="en">Reveal Query Result Panel</source>
+    </trans-unit>
     <trans-unit id="mssql.runQueryHistory">
       <source xml:lang="en">Run Query</source>
     </trans-unit>

media/revealQueryResult.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#F6F6F6;} .icon-vs-bg{fill:#424242;} .icon-vs-fg{fill:#F0EFF1;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M16 15h-15v-14h15v14z" id="outline"/><path class="icon-vs-bg" d="M2 2v12h13v-12h-13zm4 11h-3v-2h3v2zm0-3h-3v-2h3v2zm0-3h-3v-2h3v2zm4 6h-3v-2h3v2zm0-3h-3v-2h3v2zm0-3h-3v-2h3v2zm4 6h-3v-2h3v2zm0-3h-3v-2h3v2zm0-3h-3v-2h3v2z" id="iconBg"/><path class="icon-vs-fg" d="M14 7h-3v-2h3v2zm0 1h-3v2h3v-2zm-4-3h-3v2h3v-2zm0 3h-3v2h3v-2zm-4-3h-3v2h3v-2zm0 3h-3v2h3v-2zm8 3h-3v2h3v-2zm-4 0h-3v2h3v-2zm-4 0h-3v2h3v-2z" id="iconFg"/></svg>

package.json

@@ -308,6 +308,11 @@
           "when": "editorLangId == sql && resourcePath in mssql.runningQueries",
           "group": "navigation@2"
         },
+        {
+          "command": "mssql.revealQueryResultPanel",
+          "when": "editorLangId == sql && config.mssql.enableRichExperiences && view.queryResult.visible == false",
+          "group": "navigation@2"
+        },
         {
           "command": "mssql.connect",
           "when": "editorLangId == sql && resource not in mssql.connections",
@@ -571,6 +576,12 @@
         "category": "MS SQL",
         "icon": "$(debug-stop)"
       },
+      {
+        "command": "mssql.revealQueryResultPanel",
+        "title": "%mssql.revealQueryResultPanel%",
+        "category": "MS SQL",
+        "icon": "media/revealQueryResult.svg"
+      },
       {
         "command": "mssql.connect",
         "title": "%mssql.connect%",

package.nls.json

@@ -2,6 +2,7 @@
 "mssql.runQuery":"Execute Query",
 "mssql.runCurrentStatement":"Execute Current Statement",
 "mssql.cancelQuery":"Cancel Query",
+"mssql.revealQueryResultPanel":"Reveal Query Result Panel",
 "mssql.changeDatabase":"Change Database",
 "mssql.addObjectExplorer":"Add Connection",
 "mssql.scriptSelect":"Select Top 1000",

src/constants/constants.ts

@@ -23,6 +23,7 @@ export const folderLabel = "Folder";
 export const cmdRunQuery = "mssql.runQuery";
 export const cmdRunCurrentStatement = "mssql.runCurrentStatement";
 export const cmdCancelQuery = "mssql.cancelQuery";
+export const cmdrevealQueryResultPanel = "mssql.revealQueryResultPanel";
 export const cmdConnect = "mssql.connect";
 export const cmdDisconnect = "mssql.disconnect";
 export const cmdChangeDatabase = "mssql.changeDatabase";

src/controllers/mainController.ts

@@ -1080,6 +1080,16 @@ export default class MainController implements vscode.Disposable {
                 },
             ),
         );
+
+        // Reveal Query Results command
+        this._context.subscriptions.push(
+            vscode.commands.registerCommand(
+                Constants.cmdrevealQueryResultPanel,
+                () => {
+                    vscode.commands.executeCommand("queryResult.focus");
+                },
+            ),
+        );
     }
 
     /**

src/controllers/reactWebviewViewController.ts

@@ -38,12 +38,17 @@ export class ReactWebviewViewController<State, Reducers>
     }
 
     /**
-     * Displays the webview in the foreground
-     * @param viewColumn The view column that the webview will be displayed in
+     * returns if the webview is visible
      */
-    public revealToForeground(
-        viewColumn: vscode.ViewColumn = vscode.ViewColumn.One,
-    ): void {}
+    public isVisible(): boolean {
+        return this._webviewView.visible;
+    }
+    /**
+     * Displays the webview in the foreground
+     */
+    public revealToForeground(): void {
+        this._webviewView.show(true);
+    }
 
     public resolveWebviewView(
         webviewView: vscode.WebviewView,

src/models/sqlOutputContentProvider.ts

@@ -425,9 +425,10 @@ export class SqlOutputContentProvider {
                             .get(uri)
                             .proxy.sendEvent("resultSet", resultSet);
                     } else {
-                        this._queryResultWebviewController.getQueryResultState(
+                        this._queryResultWebviewController.addResultSetSummary(
                             uri,
-                        ).resultSetSummaries[resultSet.batchId] = resultSet;
+                            resultSet,
+                        );
                     }
                 },
             );

src/queryResult/queryResultWebViewController.ts

@@ -48,7 +48,6 @@ export class QueryResultWebviewController extends ReactWebviewViewController<
             const uri = editor?.document?.uri?.toString(true);
             if (uri && this._queryResultStateMap.has(uri)) {
                 this.state = this.getQueryResultState(uri);
-                vscode.commands.executeCommand("queryResult.focus");
             } else {
                 this.state = {
                     resultSetSummaries: {},
@@ -259,6 +258,19 @@ export class QueryResultWebviewController extends ReactWebviewViewController<
         return res;
     }
 
+    public addResultSetSummary(
+        uri: string,
+        resultSetSummary: qr.ResultSetSummary,
+    ) {
+        let state = this.getQueryResultState(uri);
+        const batchId = resultSetSummary.batchId;
+        const resultId = resultSetSummary.id;
+        if (!state.resultSetSummaries[batchId]) {
+            state.resultSetSummaries[batchId] = {};
+        }
+        state.resultSetSummaries[batchId][resultId] = resultSetSummary;
+    }
+
     public setSqlOutputContentProvider(
         provider: SqlOutputContentProvider,
     ): void {

src/reactviews/pages/QueryResult/queryResultPane.tsx

@@ -62,6 +62,9 @@ const useStyles = makeStyles({
         width: "100%",
         position: "relative",
         display: "flex",
+        fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+        fontWeight: "normal",
+        fontSize: "12px",
     },
     queryResultPaneOpenButton: {
         position: "absolute",
@@ -77,11 +80,23 @@ const useStyles = makeStyles({
         },
     },
     messagesRows: {
+        height: "18px",
+        fontSize: "12px",
         flexDirection: "row",
         ...shorthands.padding("10px"),
         "> *": {
             marginRight: "10px",
         },
+        borderBottom: "none",
+    },
+    noResultMessage: {
+        fontSize: "14px",
+        margin: "10px 0 0 10px",
+    },
+    hidePanelLink: {
+        fontSize: "14px",
+        margin: "10px 0 0 10px",
+        cursor: "pointer",
     },
 });
 
@@ -178,23 +193,22 @@ export const QueryResultPane = () => {
 
     const gridRefs = useRef<ResultGridHandle[]>([]);
 
-    const renderGrid = (idx: number) => {
-        const divId = `grid-parent-${idx}`;
+    const renderGrid = (
+        batchId: number,
+        resultId: number,
+        gridCount: number,
+        totalResultCount: number,
+    ) => {
+        const divId = `grid-parent-${batchId}-${resultId}`;
         return (
             <div
                 id={divId}
                 className={classes.queryResultContainer}
                 style={{
                     height:
-                        Object.keys(metadata?.resultSetSummaries ?? [])
-                            .length === 1
+                        totalResultCount === 1
                             ? "100%"
-                            : (
-                                  100 /
-                                  Object.keys(
-                                      metadata?.resultSetSummaries ?? [],
-                                  ).length
-                              ).toString() + "%",
+                            : (100 / totalResultCount).toString() + "%",
                 }}
             >
                 <ResultGrid
@@ -205,9 +219,8 @@ export const QueryResultPane = () => {
                         return webViewState.extensionRpc
                             .call("getRows", {
                                 uri: metadata?.uri,
-                                batchId:
-                                    metadata?.resultSetSummaries[idx]?.batchId,
-                                resultId: metadata?.resultSetSummaries[idx]?.id,
+                                batchId: batchId,
+                                resultId: resultId,
                                 rowStart: offset,
                                 numberOfRows: count,
                             })
@@ -217,8 +230,9 @@ export const QueryResultPane = () => {
                                 }
                                 let r = response as qr.ResultSetSubset;
                                 var columnLength =
-                                    metadata?.resultSetSummaries[idx]
-                                        ?.columnInfo?.length;
+                                    metadata?.resultSetSummaries[batchId][
+                                        resultId
+                                    ]?.columnInfo?.length;
                                 // if the result is an execution plan xml,
                                 // get the execution plan graph from it
                                 if (metadata?.isExecutionPlan) {
@@ -251,15 +265,19 @@ export const QueryResultPane = () => {
                                 });
                             });
                     }}
-                    ref={(gridRef) => (gridRefs.current[idx] = gridRef!)}
-                    resultSetSummary={metadata?.resultSetSummaries[idx]}
+                    ref={(gridRef) => (gridRefs.current[gridCount] = gridRef!)}
+                    resultSetSummary={
+                        metadata?.resultSetSummaries[batchId][resultId]
+                    }
                     divId={divId}
                     uri={metadata?.uri}
                     webViewState={webViewState}
                 />
                 <CommandBar
                     uri={metadata?.uri}
-                    resultSetSummary={metadata?.resultSetSummaries[idx]}
+                    resultSetSummary={
+                        metadata?.resultSetSummaries[batchId][resultId]
+                    }
                 />
             </div>
         );
@@ -268,12 +286,22 @@ export const QueryResultPane = () => {
     const renderGridPanel = () => {
         const grids = [];
         gridRefs.current.forEach((r) => r?.refreshGrid());
+        let totalResultCount = 0;
+        Object.values(metadata?.resultSetSummaries ?? []).forEach((v) => {
+            totalResultCount += Object.keys(v).length;
+        });
+
+        let count = 0;
         for (
             let i = 0;
             i < Object.keys(metadata?.resultSetSummaries ?? []).length;
             i++
         ) {
-            grids.push(renderGrid(i));
+            var batch = metadata?.resultSetSummaries[i];
+            for (let j = 0; j < Object.keys(batch ?? []).length; j++) {
+                grids.push(renderGrid(i, j, count, totalResultCount));
+                count++;
+            }
         }
         return grids;
     };
@@ -304,9 +332,12 @@ export const QueryResultPane = () => {
 
     return !metadata || !hasResultsOrMessages(metadata) ? (
         <div>
-            <div>{locConstants.queryResult.noResultMessage}</div>
+            <div className={classes.noResultMessage}>
+                {locConstants.queryResult.noResultMessage}
+            </div>
             <div>
                 <Link
+                    className={classes.hidePanelLink}
                     onClick={async () => {
                         await webViewState.extensionRpc.call("executeCommand", {
                             command: "workbench.action.togglePanel",
@@ -391,7 +422,10 @@ export const QueryResultPane = () => {
                             <TableBody>
                                 {rows.map((row, index) => {
                                     return (
-                                        <TableRow key={index}>
+                                        <TableRow
+                                            key={index}
+                                            className={classes.messagesRows}
+                                        >
                                             <TableCell
                                                 {...columnSizing_unstable.getTableCellProps(
                                                     "time",

src/reactviews/pages/QueryResult/table/interfaces.ts

@@ -74,6 +74,6 @@ export const defaultTableStyles: ITableStyles = {
     listSelectionOutline: "var(--vscode-contrastActiveBorder)",
     listHoverOutline: "var(--vscode-contrastActiveBorder)",
     listInactiveFocusOutline: "var(--vscode-list-inactiveFocusOutline)",
-    tableHeaderBackground: "var(--vscode-table-headerBackground)",
+    tableHeaderBackground: "var(--vscode-badge-background)",
     tableHeaderForeground: "var(--vscode-table-headerForeground)",
 };

src/sharedInterfaces/queryResult.ts

@@ -44,7 +44,7 @@ export interface QueryResultTabStates {
 
 export interface QueryResultWebviewState extends ExecutionPlanWebviewState {
     uri?: string;
-    resultSetSummaries: { [key: number]: ResultSetSummary };
+    resultSetSummaries: Record<number, Record<number, ResultSetSummary>>;
     messages: IMessage[];
     tabStates?: QueryResultTabStates;
     isExecutionPlan?: boolean;