Add Edit Data to the MSSQL extension

localization/l10n/bundle.l10n.json

@@ -741,6 +741,31 @@
     "Show Confirm Password": "Show Confirm Password",
     "Hide Confirm Password": "Hide Confirm Password",
     "Passwords do not match": "Passwords do not match",
+    "Save Changes": "Save Changes",
+    "Add Row": "Add Row",
+    "Show Script": "Show Script",
+    "Hide Script": "Hide Script",
+    "Open in SQL Editor": "Open in SQL Editor",
+    "Copy Script": "Copy Script",
+    "Copy Script to Clipboard": "Copy Script to Clipboard",
+    "Maximize Panel Size": "Maximize Panel Size",
+    "Restore Panel Size": "Restore Panel Size",
+    "Update Script": "Update Script",
+    "Commands": "Commands",
+    "Delete Row": "Delete Row",
+    "Revert Cell": "Revert Cell",
+    "Revert Row": "Revert Row",
+    "Total rows to fetch:": "Total rows to fetch:",
+    "Rows per page": "Rows per page",
+    "Fetch rows": "Fetch rows",
+    "First Page": "First Page",
+    "Previous Page": "Previous Page",
+    "Next Page": "Next Page",
+    "Last Page": "Last Page",
+    "Loading table data...": "Loading table data...",
+    "No data available": "No data available",
+    "No pending changes. Make edits to generate a script.": "No pending changes. Make edits to generate a script.",
+    "Close Script Pane": "Close Script Pane",
     "Object Explorer Filter": "Object Explorer Filter",
     "Azure MFA": "Azure MFA",
     "Windows Authentication": "Windows Authentication",
@@ -1827,6 +1852,61 @@
         "message": "Edit Connection Group - {0}",
         "comment": ["{0} is the connection group name"]
     },
+    "Unable to open Table Explorer: No target node provided.": "Unable to open Table Explorer: No target node provided.",
+    "Changes saved successfully.": "Changes saved successfully.",
+    "Row created.": "Row created.",
+    "Row removed.": "Row removed.",
+    "Table Explorer: {0} (Preview)/{0} is the table name": {
+        "message": "Table Explorer: {0} (Preview)",
+        "comment": ["{0} is the table name"]
+    },
+    "Failed to save changes: {0}/{0} is the error message": {
+        "message": "Failed to save changes: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "Failed to load data: {0}/{0} is the error message": {
+        "message": "Failed to load data: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "Failed to create a new row: {0}/{0} is the error message": {
+        "message": "Failed to create a new row: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "Failed to remove row: {0}/{0} is the error message": {
+        "message": "Failed to remove row: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "Failed to update cell: {0}/{0} is the error message": {
+        "message": "Failed to update cell: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "Failed to revert cell: {0}/{0} is the error message": {
+        "message": "Failed to revert cell: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "Failed to revert row: {0}/{0} is the error message": {
+        "message": "Failed to revert row: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "Failed to generate script: {0}/{0} is the error message": {
+        "message": "Failed to generate script: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "No script available. Make changes to the table data and generate a script first.": "No script available. Make changes to the table data and generate a script first.",
+    "Failed to open script: {0}/{0} is the error message": {
+        "message": "Failed to open script: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "Script copied to clipboard.": "Script copied to clipboard.",
+    "Failed to copy script: {0}/{0} is the error message": {
+        "message": "Failed to copy script: {0}",
+        "comment": ["{0} is the error message"]
+    },
+    "Table Explorer for '{0}' has unsaved changes. Do you want to save or discard them?/{0} is the table name": {
+        "message": "Table Explorer for '{0}' has unsaved changes. Do you want to save or discard them?",
+        "comment": ["{0} is the table name"]
+    },
+    "Discard": "Discard",
     "Azure sign in failed.": "Azure sign in failed.",
     "Select subscriptions": "Select subscriptions",
     "Error loading Azure subscriptions.": "Error loading Azure subscriptions.",

package.json

@@ -177,6 +177,7 @@
         "pretty-data": "^0.40.0",
         "semver": "https://registry.npmjs.org/semver/-/semver-5.0.3.tgz",
         "shallow-equal": "^3.1.0",
+        "slickgrid-react": "^9.8.0",
         "tar": "^7.4.3",
         "tmp": "^0.2.4",
         "tunnel": "0.0.6",
@@ -582,6 +583,11 @@
                     "when": "view == objectExplorer && viewItem =~ /\\btype=(Table)\\b/",
                     "group": "4_MSSQL_object@1"
                 },
+                {
+                    "command": "mssql.tableExplorer",
+                    "when": "view == objectExplorer && viewItem =~ /\\btype=(Table)\\b/ && config.mssql.enableRichExperiences",
+                    "group": "4_MSSQL_object@2"
+                },
                 {
                     "command": "mssql.filterNode",
                     "when": "view == objectExplorer && viewItem =~ /\\bfilterable=true\\b.*\\bhasFilters=false\\b/",
@@ -904,6 +910,11 @@
                 "title": "%mssql.schemaCompare%",
                 "category": "MS SQL"
             },
+            {
+                "command": "mssql.tableExplorer",
+                "title": "%mssql.tableExplorer%",
+                "category": "MS SQL"
+            },
             {
                 "command": "mssql.rebuildIntelliSenseCache",
                 "title": "%mssql.rebuildIntelliSenseCache%",

package.nls.json

@@ -45,6 +45,7 @@
     "mssql.copilot.rewriteQuery": "Rewrite Query (Preview)",
     "mssql.copilot.newQueryWithConnection": "Open New Query and Connect (Preview)",
     "mssql.schemaCompare": "Schema Compare",
+    "mssql.tableExplorer": "View Data (Preview)",
     "mssql.toggleSqlCmd": "Toggle SQLCMD Mode",
     "mssql.copyObjectName": "Copy Object Name",
     "mssql.addAadAccount": "Add Microsoft Entra Account",

scripts/bundle-reactviews.js

@@ -27,6 +27,7 @@ const config = {
         schemaCompare: "src/reactviews/pages/SchemaCompare/index.tsx",
         changePassword: "src/reactviews/pages/ChangePassword/index.tsx",
         publishProject: "src/reactviews/pages/PublishProject/index.tsx",
+        tableExplorer: "src/reactviews/pages/TableExplorer/index.tsx",
     },
     bundle: true,
     outdir: "dist/views",

src/constants/constants.ts

@@ -51,6 +51,8 @@ export const cmdCommandPaletteQueryHistory = "mssql.commandPaletteQueryHistory";
 export const cmdNewQuery = "mssql.newQuery";
 export const cmdCopilotNewQueryWithConnection = "mssql.copilot.newQueryWithConnection";
 export const cmdSchemaCompare = "mssql.schemaCompare";
+export const cmdTableExplorer = "mssql.tableExplorer";
+export const cmdTableNodeAction = "mssql.tableNodeAction";
 export const cmdSchemaCompareOpenFromCommandPalette = "mssql.schemaCompareOpenFromCommandPalette";
 export const cmdPublishDatabaseProject = "mssql.publishDatabaseProject";
 export const cmdManageConnectionProfiles = "mssql.manageProfiles";

src/constants/locConstants.ts

@@ -2070,3 +2070,111 @@ export class ConnectionGroup {
         });
     };
 }
+
+export class TableExplorer {
+    public static unableToOpenTableExplorer = l10n.t(
+        "Unable to open Table Explorer: No target node provided.",
+    );
+    public static changesSavedSuccessfully = l10n.t("Changes saved successfully.");
+    public static rowCreatedSuccessfully = l10n.t("Row created.");
+    public static rowRemoved = l10n.t("Row removed.");
+
+    public static title = (tableName: string) =>
+        l10n.t({
+            message: "Table Explorer: {0} (Preview)",
+            args: [tableName],
+            comment: ["{0} is the table name"],
+        });
+
+    public static failedToSaveChanges = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to save changes: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static failedToLoadData = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to load data: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static failedToCreateNewRow = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to create a new row: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static failedToRemoveRow = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to remove row: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static failedToUpdateCell = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to update cell: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static failedToRevertCell = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to revert cell: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static failedToRevertRow = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to revert row: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static failedToGenerateScript = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to generate script: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static noScriptToOpen = l10n.t(
+        "No script available. Make changes to the table data and generate a script first.",
+    );
+
+    public static failedToOpenScript = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to open script: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static scriptCopiedToClipboard = l10n.t("Script copied to clipboard.");
+
+    public static noScriptToCopy = l10n.t(
+        "No script available. Make changes to the table data and generate a script first.",
+    );
+
+    public static failedToCopyScript = (errorMessage: string) =>
+        l10n.t({
+            message: "Failed to copy script: {0}",
+            args: [errorMessage],
+            comment: ["{0} is the error message"],
+        });
+
+    public static unsavedChangesPrompt = (tableName: string) =>
+        l10n.t({
+            message:
+                "Table Explorer for '{0}' has unsaved changes. Do you want to save or discard them?",
+            args: [tableName],
+            comment: ["{0} is the table name"],
+        });
+
+    public static Save = l10n.t("Save");
+    public static Discard = l10n.t("Discard");
+    public static Cancel = l10n.t("Cancel");
+}

src/controllers/mainController.ts

@@ -93,6 +93,8 @@ import {
 import { ScriptOperation } from "../models/contracts/scripting/scriptingRequest";
 import { getCloudId } from "../azure/providerSettings";
 import { openExecutionPlanWebview } from "./sharedExecutionPlanUtils";
+import { ITableExplorerService, TableExplorerService } from "../services/tableExplorerService";
+import { TableExplorerWebViewController } from "../tableExplorer/tableExplorerWebViewController";
 
 /**
  * The main controller class that initializes the extension
@@ -115,6 +117,7 @@ export default class MainController implements vscode.Disposable {
     public sqlTasksService: SqlTasksService;
     public dacFxService: DacFxService;
     public schemaCompareService: SchemaCompareService;
+    public tableExplorerService: ITableExplorerService;
     public sqlProjectsService: SqlProjectsService;
     public azureAccountService: AzureAccountService;
     public azureResourceService: AzureResourceService;
@@ -547,6 +550,7 @@ export default class MainController implements vscode.Disposable {
             this.dacFxService = new DacFxService(SqlToolsServerClient.instance);
             this.sqlProjectsService = new SqlProjectsService(SqlToolsServerClient.instance);
             this.schemaCompareService = new SchemaCompareService(SqlToolsServerClient.instance);
+            this.tableExplorerService = new TableExplorerService(SqlToolsServerClient.instance);
             const azureResourceController = new AzureResourceController();
             this.azureAccountService = new AzureAccountService(
                 this._connectionMgr.azureController,
@@ -1373,6 +1377,33 @@ export default class MainController implements vscode.Disposable {
         });
         this._context.subscriptions.push(this.objectExplorerTree);
 
+        // Register command for table node double-click action
+        let lastTableClickTime = 0;
+        let lastTableNode: TreeNodeInfo | undefined;
+        const doubleClickThreshold = 500; // milliseconds
+
+        this._context.subscriptions.push(
+            vscode.commands.registerCommand(Constants.cmdTableNodeAction, (node: TreeNodeInfo) => {
+                const currentTime = Date.now();
+
+                // Check if this is a double-click on the same node
+                if (
+                    lastTableNode === node &&
+                    currentTime - lastTableClickTime < doubleClickThreshold
+                ) {
+                    // Double-click detected - open Table Explorer
+                    void this.onTableExplorer(node);
+                    // Reset to prevent triple-click
+                    lastTableNode = undefined;
+                    lastTableClickTime = 0;
+                } else {
+                    // Single click - just track it
+                    lastTableNode = node;
+                    lastTableClickTime = currentTime;
+                }
+            }),
+        );
+
         // Old style Add connection when experimental features are not enabled
 
         // Add Object Explorer Node
@@ -1599,6 +1630,12 @@ export default class MainController implements vscode.Disposable {
                 ),
             );
 
+            this._context.subscriptions.push(
+                vscode.commands.registerCommand(Constants.cmdTableExplorer, async (node: any) =>
+                    this.onTableExplorer(node),
+                ),
+            );
+
             this._context.subscriptions.push(
                 vscode.commands.registerCommand(
                     Constants.cmdSchemaCompareOpenFromCommandPalette,
@@ -2654,6 +2691,18 @@ export default class MainController implements vscode.Disposable {
         schemaCompareWebView.revealToForeground();
     }
 
+    public async onTableExplorer(node?: any): Promise<void> {
+        const tableExplorerWebView = new TableExplorerWebViewController(
+            this._context,
+            this._vscodeWrapper,
+            this.tableExplorerService,
+            this._connectionMgr,
+            node,
+        );
+
+        tableExplorerWebView.revealToForeground();
+    }
+
     /**
      * Handler for the Publish Database Project command.
      * Accepts the project file path as an argument.

src/controllers/reactWebviewPanelController.ts

@@ -104,7 +104,7 @@ export class ReactWebviewPanelController<
         this._panel.reveal(viewColumn, true);
     }
 
-    private async showRestorePrompt(): Promise<{
+    protected async showRestorePrompt(): Promise<{
         title: string;
         run: () => Promise<void>;
     }> {