VsCode SQL Projects publish dialog Initial user interface setup (#20179)

* intial changes to load empty dialog

* UI intial changes

* advanced options added

* basic UI final changes

* UI changes with formwebviewcontroller

* Basic UI final changes

* removed Advanced related changes from the current set

* converting const to static class

* localized files

* copilot comments adjusted

* using new webview provider

* updating the code

* Adding publish dialog basic test file

* addressing code review comments

* updating the variable name

* addressing code review comments

* updating LOC and fixing test

* addressing code review comments

* undo double wrapping

* adding main controller test to validate publish proj call

* addressing review comments

* updating profile name and path clearly to notify about publish profile

Author: ssreerama

localization/l10n/bundle.l10n.json

@@ -635,6 +635,8 @@
         "comment": ["{0} is the name of the entry"]
     },
     "Processing include or exclude all differences operation.": "Processing include or exclude all differences operation.",
+    "Select Profile": "Select Profile",
+    "Save As...": "Save As...",
     "Create New Connection Group": "Create New Connection Group",
     "Edit Connection Group: {0}/{0} is the name of the connection group being edited": {
         "message": "Edit Connection Group: {0}",
@@ -1419,6 +1421,15 @@
         "comment": ["{0} is the webview name"]
     },
     "General": "General",
+    "Publish Project": "Publish Project",
+    "Publish Profile": "Publish Profile",
+    "Select or enter a publish profile": "Select or enter a publish profile",
+    "Database name is required": "Database name is required",
+    "SQLCMD Variables": "SQLCMD Variables",
+    "Publish Target": "Publish Target",
+    "Existing SQL server": "Existing SQL server",
+    "Local development container": "Local development container",
+    "Save As": "Save As",
     "Schema Compare": "Schema Compare",
     "Options have changed. Recompare to see the comparison?": "Options have changed. Recompare to see the comparison?",
     "Failed to generate script: '{0}'/{0} is the error message returned from the generate script operation": {
@@ -1435,7 +1446,6 @@
     },
     "Loading Schema Designer Model...": "Loading Schema Designer Model...",
     "Schema Designer Model is ready. Changes can now be published.": "Schema Designer Model is ready. Changes can now be published.",
-    "Save As": "Save As",
     "Schema Designer": "Schema Designer",
     "Opening Publish Script. This may take a while...": "Opening Publish Script. This may take a while...",
     "Generating Report. This may take a while...": "Generating Report. This may take a while...",

localization/xliff/vscode-mssql.xlf

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

media/changePassword_dark.svg

@@ -51,6 +51,7 @@ export const cmdCommandPaletteQueryHistory = "mssql.commandPaletteQueryHistory";
 export const cmdNewQuery = "mssql.newQuery";
 export const cmdSchemaCompare = "mssql.schemaCompare";
 export const cmdSchemaCompareOpenFromCommandPalette = "mssql.schemaCompareOpenFromCommandPalette";
+export const cmdPublishDatabaseProject = "mssql.publishDatabaseProject";
 export const cmdManageConnectionProfiles = "mssql.manageProfiles";
 export const cmdClearPooledConnections = "mssql.clearPooledConnections";
 export const cmdRebuildIntelliSenseCache = "mssql.rebuildIntelliSenseCache";

media/changePassword_light.svg

@@ -1280,6 +1280,23 @@ export class TableDesigner {
     public static AdvancedOptions = l10n.t("Advanced Options");
 }
 
+export class PublishProject {
+    public static Title = l10n.t("Publish Project");
+    public static PublishProfileLabel = l10n.t("Publish Profile");
+    public static PublishProfilePlaceholder = l10n.t("Select or enter a publish profile");
+    public static ServerLabel = l10n.t("Server");
+    public static DatabaseLabel = l10n.t("Database");
+    public static DatabaseRequiredMessage = l10n.t("Database name is required");
+    public static SqlCmdVariablesLabel = l10n.t("SQLCMD Variables");
+    public static PublishTargetLabel = l10n.t("Publish Target");
+    public static PublishTargetExisting = l10n.t("Existing SQL server");
+    public static PublishTargetContainer = l10n.t("Local development container");
+    public static SelectPublishProfile = l10n.t("Select Profile");
+    public static SaveAs = l10n.t("Save As");
+    public static GenerateScript = l10n.t("Generate Script");
+    public static Publish = l10n.t("Publish");
+}
+
 export class SchemaCompare {
     public static Title = l10n.t("Schema Compare");
     public static Open = l10n.t("Open");

scripts/bundle-reactviews.js

@@ -64,6 +64,7 @@ import store from "../queryResult/singletonStore";
 import { SchemaCompareWebViewController } from "../schemaCompare/schemaCompareWebViewController";
 import { SchemaCompare } from "../constants/locConstants";
 import { SchemaDesignerWebviewManager } from "../schemaDesigner/schemaDesignerWebviewManager";
+import { PublishProjectWebViewController } from "../publishProject/publishProjectWebViewController";
 import { ConnectionNode } from "../objectExplorer/nodes/connectionNode";
 import { CopilotService } from "../services/copilotService";
 import * as Prompts from "../copilot/prompts";
@@ -482,6 +483,16 @@ export default class MainController implements vscode.Disposable {
                 },
             );
 
+            // -- PUBLISH PROJECT --
+            this._context.subscriptions.push(
+                vscode.commands.registerCommand(
+                    Constants.cmdPublishDatabaseProject,
+                    async (projectFilePath: string) => {
+                        await this.onPublishDatabaseProject(projectFilePath);
+                    },
+                ),
+            );
+
             // -- EXPLAIN QUERY --
             this._context.subscriptions.push(
                 vscode.commands.registerCommand(Constants.cmdExplainQuery, async () => {
@@ -2587,6 +2598,22 @@ export default class MainController implements vscode.Disposable {
         schemaCompareWebView.revealToForeground();
     }
 
+    /**
+     * Handler for the Publish Database Project command.
+     * Accepts the project file path as an argument.
+     * This method launches the Publish Project UI for the specified database project.
+     * @param projectFilePath The file path of the database project to publish.
+     */
+    public onPublishDatabaseProject(projectFilePath: string): void {
+        const publishProjectWebView = new PublishProjectWebViewController(
+            this._context,
+            this._vscodeWrapper,
+            projectFilePath,
+        );
+
+        publishProjectWebView.revealToForeground();
+    }
+
     /**
      * Check if the extension launched file exists.
      * This is to detect when we are running in a clean install scenario.

src/constants/constants.ts

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { FormItemType } from "../sharedInterfaces/form";
+import {
+    IPublishForm,
+    PublishDialogFormItemSpec,
+    PublishDialogState,
+} from "../sharedInterfaces/publishDialog";
+import { PublishProject as Loc } from "../constants/locConstants";
+
+/**
+ * Generate publish form components.
+ */
+export function generatePublishFormComponents(): Record<
+    keyof IPublishForm,
+    PublishDialogFormItemSpec
+> {
+    const components: Record<keyof IPublishForm, PublishDialogFormItemSpec> = {
+        publishProfilePath: {
+            propertyName: "publishProfilePath",
+            label: Loc.PublishProfileLabel,
+            required: false,
+            type: FormItemType.Input,
+        },
+        serverName: {
+            propertyName: "serverName",
+            label: Loc.ServerLabel,
+            required: true,
+            type: FormItemType.Input,
+        },
+        databaseName: {
+            propertyName: "databaseName",
+            label: Loc.DatabaseLabel,
+            required: true,
+            type: FormItemType.Input,
+            validate: (_state: PublishDialogState, value: string) => {
+                const isValid = (value ?? "").trim().length > 0;
+                return { isValid, validationMessage: isValid ? "" : Loc.DatabaseRequiredMessage };
+            },
+        },
+        publishTarget: {
+            propertyName: "publishTarget",
+            label: Loc.PublishTargetLabel,
+            required: true,
+            type: FormItemType.Dropdown,
+            options: [
+                {
+                    displayName: Loc.PublishTargetExisting,
+                    value: "existingServer",
+                },
+                {
+                    displayName: Loc.PublishTargetContainer,
+                    value: "localContainer",
+                },
+            ],
+        },
+        sqlCmdVariables: {
+            propertyName: "sqlCmdVariables",
+            label: Loc.SqlCmdVariablesLabel,
+            required: false,
+            type: FormItemType.Input,
+            hidden: true,
+        },
+    };
+
+    return components;
+}