From 0f23d5321944bbd2560da082a3c0ea5006e85e09 Mon Sep 17 00:00:00 2001
From: Benjin Dubishar <benjind@microsoft.com>
Date: Tue, 17 Dec 2024 14:59:57 -0800
Subject: [PATCH 1/3] Adding <enter> button triggering for connection button

---
 .../components/connectButton.component.tsx             |  4 ++++
 .../pages/ConnectionDialog/connectionPageContainer.tsx | 10 ++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx b/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
index 7cea42bbb1..53365feeb8 100644
--- a/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
+++ b/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
@@ -9,6 +9,8 @@ import { ConnectionDialogContext } from "./../connectionDialogStateProvider";
 import { ApiStatus } from "../../../../sharedInterfaces/webview";
 import { locConstants } from "../../../common/locConstants";
 
+export const ConnectButtonId = "connectButton";
+
 export const ConnectButton = ({
     style,
     className,
@@ -24,6 +26,8 @@ export const ConnectButton = ({
 
     return (
         <Button
+            id={ConnectButtonId}
+            type="submit"
             appearance="primary"
             disabled={
                 connectionDialogContext.state.connectionStatus ===
diff --git a/src/reactviews/pages/ConnectionDialog/connectionPageContainer.tsx b/src/reactviews/pages/ConnectionDialog/connectionPageContainer.tsx
index 582fd64416..0926e795f5 100644
--- a/src/reactviews/pages/ConnectionDialog/connectionPageContainer.tsx
+++ b/src/reactviews/pages/ConnectionDialog/connectionPageContainer.tsx
@@ -34,6 +34,7 @@ import { TrustServerCertificateDialog } from "./components/trustServerCertificat
 import { locConstants } from "../../common/locConstants";
 import { themeType } from "../../common/utils";
 import { AddFirewallRuleDialog } from "./components/addFirewallRule.component";
+import { ConnectButtonId } from "./components/connectButton.component";
 
 function renderContent(
     connectionDialogContext: ConnectionDialogContextProps,
@@ -61,8 +62,13 @@ export const ConnectionInfoFormContainer = () => {
         return saveIcon;
     }
 
+    function handleSubmit(event: React.FormEvent) {
+        event.preventDefault();
+        document.getElementById(ConnectButtonId)?.click();
+    }
+
     return (
-        <div className={formStyles.formRoot}>
+        <form onSubmit={handleSubmit} className={formStyles.formRoot}>
             <ConnectionHeader />
 
             <div className={formStyles.formDiv} style={{ overflow: "auto" }}>
@@ -177,6 +183,6 @@ export const ConnectionInfoFormContainer = () => {
                 </div>
                 {renderContent(context)}
             </div>
-        </div>
+        </form>
     );
 };

From 6b161d300d4e40c57ae0a81e82c923a24c58eb2e Mon Sep 17 00:00:00 2001
From: Benjin Dubishar <benjind@microsoft.com>
Date: Tue, 17 Dec 2024 17:12:50 -0800
Subject: [PATCH 2/3] some light refactoring to expose connect button readiness

---
 .../connectionDialogWebviewController.ts      | 96 +++++++++----------
 .../components/connectButton.component.tsx    | 13 ++-
 src/sharedInterfaces/connectionDialog.ts      | 77 ++++++---------
 3 files changed, 77 insertions(+), 109 deletions(-)

diff --git a/src/connectionconfig/connectionDialogWebviewController.ts b/src/connectionconfig/connectionDialogWebviewController.ts
index 439acb39e8..e9b59f2bd0 100644
--- a/src/connectionconfig/connectionDialogWebviewController.ts
+++ b/src/connectionconfig/connectionDialogWebviewController.ts
@@ -91,46 +91,22 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
         private _objectExplorerProvider: ObjectExplorerProvider,
         private _connectionToEdit?: IConnectionInfo,
     ) {
-        super(
-            context,
-            "connectionDialog",
-            new ConnectionDialogWebviewState({
-                connectionProfile: {} as IConnectionDialogProfile,
-                savedConnections: [],
-                recentConnections: [],
-                selectedInputMode: ConnectionInputMode.Parameters,
-                connectionComponents: {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    components: {} as any, // force empty record for intial blank state
-                    mainOptions: [],
-                    topAdvancedOptions: [],
-                    groupedAdvancedOptions: [],
-                },
-                azureSubscriptions: [],
-                azureServers: [],
-                connectionStatus: ApiStatus.NotStarted,
-                formError: "",
-                loadingAzureSubscriptionsStatus: ApiStatus.NotStarted,
-                loadingAzureServersStatus: ApiStatus.NotStarted,
-                dialog: undefined,
-            }),
-            {
-                title: Loc.connectionDialog,
-                viewColumn: vscode.ViewColumn.Active,
-                iconPath: {
-                    dark: vscode.Uri.joinPath(
-                        context.extensionUri,
-                        "media",
-                        "connectionDialogEditor_dark.svg",
-                    ),
-                    light: vscode.Uri.joinPath(
-                        context.extensionUri,
-                        "media",
-                        "connectionDialogEditor_light.svg",
-                    ),
-                },
+        super(context, "connectionDialog", new ConnectionDialogWebviewState(), {
+            title: Loc.connectionDialog,
+            viewColumn: vscode.ViewColumn.Active,
+            iconPath: {
+                dark: vscode.Uri.joinPath(
+                    context.extensionUri,
+                    "media",
+                    "connectionDialogEditor_dark.svg",
+                ),
+                light: vscode.Uri.joinPath(
+                    context.extensionUri,
+                    "media",
+                    "connectionDialogEditor_light.svg",
+                ),
             },
-        );
+        });
 
         if (!ConnectionDialogWebviewController._logger) {
             const vscodeWrapper = new VscodeWrapper();
@@ -1168,6 +1144,19 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
 
     //#region Connection helpers
 
+    private async validateProfile(
+        connectionProfile?: IConnectionDialogProfile,
+    ): Promise<string[]> {
+        if (!connectionProfile) {
+            connectionProfile = this.state.connectionProfile;
+        }
+
+        // clean the connection by clearing the options that aren't being used
+        const cleanedConnection = this.cleanConnection(connectionProfile);
+
+        return await this.validateConnectionProfile(cleanedConnection);
+    }
+
     private async connectHelper(
         state: ConnectionDialogWebviewState,
     ): Promise<ConnectionDialogWebviewState> {
@@ -1175,14 +1164,11 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
         this.state.connectionStatus = ApiStatus.Loading;
         this.updateState();
 
-        const cleanedConnection: IConnectionDialogProfile = structuredClone(
-            this.state.connectionProfile,
-        );
-        this.cleanConnection(cleanedConnection); // clean the connection by clearing the options that aren't being used
+        const cleanedConnection: IConnectionDialogProfile =
+            this.cleanConnection(this.state.connectionProfile);
+
+        const erroredInputs = await this.validateProfile(cleanedConnection);
 
-        // Perform final validation of all inputs
-        const erroredInputs =
-            await this.validateConnectionProfile(cleanedConnection);
         if (erroredInputs.length > 0) {
             this.state.connectionStatus = ApiStatus.Error;
             console.warn(
@@ -1611,15 +1597,19 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
         }, new Map<K, V[]>());
     }
 
-    /** Cleans up a connection profile by clearing the properties that aren't being used
+    /** Returns a copy of `connection` that's been cleaned up by clearing the properties that aren't being used
      * (e.g. due to form selections, like authType and inputMode) */
-    private cleanConnection(connection: IConnectionDialogProfile) {
+    private cleanConnection(
+        connection: IConnectionDialogProfile,
+    ): IConnectionDialogProfile {
+        const cleanedConnection = structuredClone(connection);
+
         // Clear values for inputs that are hidden due to form selections
         for (const option of Object.values(
             this.state.connectionComponents.components,
         )) {
             if (option.hidden) {
-                (connection[
+                (cleanedConnection[
                     option.propertyName as keyof IConnectionDialogProfile
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 ] as any) = undefined;
@@ -1631,17 +1621,19 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
             this.state.selectedInputMode === ConnectionInputMode.Parameters ||
             this.state.selectedInputMode === ConnectionInputMode.AzureBrowse
         ) {
-            connection.connectionString = undefined;
+            cleanedConnection.connectionString = undefined;
         } else if (
             this.state.selectedInputMode ===
             ConnectionInputMode.ConnectionString
         ) {
-            Object.keys(connection).forEach((key) => {
+            Object.keys(cleanedConnection).forEach((key) => {
                 if (key !== "connectionString" && key !== "profileName") {
-                    connection[key] = undefined;
+                    cleanedConnection[key] = undefined;
                 }
             });
         }
+
+        return cleanedConnection;
     }
 
     private async loadConnections(): Promise<{
diff --git a/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx b/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
index 53365feeb8..48e2a7d6bd 100644
--- a/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
+++ b/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
@@ -18,9 +18,9 @@ export const ConnectButton = ({
     style?: CSSProperties;
     className?: string;
 }) => {
-    const connectionDialogContext = useContext(ConnectionDialogContext);
+    const context = useContext(ConnectionDialogContext);
 
-    if (!connectionDialogContext) {
+    if (!context) {
         return undefined;
     }
 
@@ -30,18 +30,17 @@ export const ConnectButton = ({
             type="submit"
             appearance="primary"
             disabled={
-                connectionDialogContext.state.connectionStatus ===
-                ApiStatus.Loading
+                context.state.connectionStatus === ApiStatus.Loading ||
+                context.state.connectButtonReady === false
             }
             onClick={(_event) => {
-                connectionDialogContext.connect();
+                context.connect();
             }}
             className={className}
             style={style}
             iconPosition="after"
             icon={
-                connectionDialogContext.state.connectionStatus ===
-                ApiStatus.Loading ? (
+                context.state.connectionStatus === ApiStatus.Loading ? (
                     <Spinner size="tiny" />
                 ) : undefined
             }
diff --git a/src/sharedInterfaces/connectionDialog.ts b/src/sharedInterfaces/connectionDialog.ts
index 4484bdf55e..439ebaeb61 100644
--- a/src/sharedInterfaces/connectionDialog.ts
+++ b/src/sharedInterfaces/connectionDialog.ts
@@ -16,7 +16,7 @@ export class ConnectionDialogWebviewState
     implements FormState<IConnectionDialogProfile>
 {
     /** the underlying connection profile for the form target; same as `connectionProfile` */
-    formState: IConnectionDialogProfile;
+    formState: IConnectionDialogProfile = {} as IConnectionDialogProfile;
     /** The underlying connection profile for the form target; a more intuitively-named alias for `formState` */
     get connectionProfile(): IConnectionDialogProfile {
         return this.formState;
@@ -24,57 +24,34 @@ export class ConnectionDialogWebviewState
     set connectionProfile(value: IConnectionDialogProfile) {
         this.formState = value;
     }
-    public selectedInputMode: ConnectionInputMode;
-    public connectionComponents: ConnectionComponentsInfo;
-    public azureSubscriptions: AzureSubscriptionInfo[];
-    public azureServers: AzureSqlServerInfo[];
-    public savedConnections: IConnectionDialogProfile[];
-    public recentConnections: IConnectionDialogProfile[];
-    public connectionStatus: ApiStatus;
-    public formError: string;
-    public loadingAzureSubscriptionsStatus: ApiStatus;
-    public loadingAzureServersStatus: ApiStatus;
+    public selectedInputMode: ConnectionInputMode =
+        ConnectionInputMode.Parameters;
+    public connectionComponents: ConnectionComponentsInfo = {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        components: {} as any, // force empty record for intial blank state
+        mainOptions: [],
+        topAdvancedOptions: [],
+        groupedAdvancedOptions: [],
+    };
+    public azureSubscriptions: AzureSubscriptionInfo[] = [];
+    public azureServers: AzureSqlServerInfo[] = [];
+    public savedConnections: IConnectionDialogProfile[] = [];
+    public recentConnections: IConnectionDialogProfile[] = [];
+    public connectionStatus: ApiStatus = ApiStatus.NotStarted;
+    public connectButtonReady: boolean = false;
+    public formError: string = "";
+    public loadingAzureSubscriptionsStatus: ApiStatus = ApiStatus.NotStarted;
+    public loadingAzureServersStatus: ApiStatus = ApiStatus.NotStarted;
     public dialog: IDialogProps | undefined;
 
-    constructor({
-        connectionProfile,
-        selectedInputMode,
-        connectionComponents,
-        azureSubscriptions,
-        azureServers,
-        savedConnections,
-        recentConnections,
-        connectionStatus,
-        formError,
-        loadingAzureSubscriptionsStatus,
-        loadingAzureServersStatus,
-        dialog,
-    }: {
-        connectionProfile: IConnectionDialogProfile;
-        selectedInputMode: ConnectionInputMode;
-        connectionComponents: ConnectionComponentsInfo;
-        azureServers: AzureSqlServerInfo[];
-        azureSubscriptions: AzureSubscriptionInfo[];
-        savedConnections: IConnectionDialogProfile[];
-        recentConnections: IConnectionDialogProfile[];
-        connectionStatus: ApiStatus;
-        formError: string;
-        loadingAzureSubscriptionsStatus: ApiStatus;
-        loadingAzureServersStatus: ApiStatus;
-        dialog: IDialogProps | undefined;
-    }) {
-        this.formState = connectionProfile;
-        this.selectedInputMode = selectedInputMode;
-        this.connectionComponents = connectionComponents;
-        this.azureSubscriptions = azureSubscriptions;
-        this.azureServers = azureServers;
-        this.savedConnections = savedConnections;
-        this.recentConnections = recentConnections;
-        this.connectionStatus = connectionStatus;
-        this.formError = formError;
-        this.loadingAzureSubscriptionsStatus = loadingAzureSubscriptionsStatus;
-        this.loadingAzureServersStatus = loadingAzureServersStatus;
-        this.dialog = dialog;
+    constructor(params?: Partial<ConnectionDialogWebviewState>) {
+        for (const key in params) {
+            if (key in this) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- safe due to key in this check being a Partial of the class
+                (this as any)[key as keyof ConnectionDialogWebviewState] =
+                    params[key as keyof ConnectionDialogWebviewState]!;
+            }
+        }
     }
 }
 

From 0c49c3f42233a86520403c28dd9fa5fb240477d0 Mon Sep 17 00:00:00 2001
From: "Benjin Dubishar (from Dev Box)" <benjind@microsoft.com>
Date: Wed, 18 Dec 2024 12:43:10 -0800
Subject: [PATCH 3/3] Revert "some light refactoring to expose connect button
 readiness"

This reverts commit 6b161d300d4e40c57ae0a81e82c923a24c58eb2e.
---
 .../connectionDialogWebviewController.ts      | 96 ++++++++++---------
 .../components/connectButton.component.tsx    | 13 +--
 src/sharedInterfaces/connectionDialog.ts      | 77 +++++++++------
 3 files changed, 109 insertions(+), 77 deletions(-)

diff --git a/src/connectionconfig/connectionDialogWebviewController.ts b/src/connectionconfig/connectionDialogWebviewController.ts
index e9b59f2bd0..439acb39e8 100644
--- a/src/connectionconfig/connectionDialogWebviewController.ts
+++ b/src/connectionconfig/connectionDialogWebviewController.ts
@@ -91,22 +91,46 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
         private _objectExplorerProvider: ObjectExplorerProvider,
         private _connectionToEdit?: IConnectionInfo,
     ) {
-        super(context, "connectionDialog", new ConnectionDialogWebviewState(), {
-            title: Loc.connectionDialog,
-            viewColumn: vscode.ViewColumn.Active,
-            iconPath: {
-                dark: vscode.Uri.joinPath(
-                    context.extensionUri,
-                    "media",
-                    "connectionDialogEditor_dark.svg",
-                ),
-                light: vscode.Uri.joinPath(
-                    context.extensionUri,
-                    "media",
-                    "connectionDialogEditor_light.svg",
-                ),
+        super(
+            context,
+            "connectionDialog",
+            new ConnectionDialogWebviewState({
+                connectionProfile: {} as IConnectionDialogProfile,
+                savedConnections: [],
+                recentConnections: [],
+                selectedInputMode: ConnectionInputMode.Parameters,
+                connectionComponents: {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    components: {} as any, // force empty record for intial blank state
+                    mainOptions: [],
+                    topAdvancedOptions: [],
+                    groupedAdvancedOptions: [],
+                },
+                azureSubscriptions: [],
+                azureServers: [],
+                connectionStatus: ApiStatus.NotStarted,
+                formError: "",
+                loadingAzureSubscriptionsStatus: ApiStatus.NotStarted,
+                loadingAzureServersStatus: ApiStatus.NotStarted,
+                dialog: undefined,
+            }),
+            {
+                title: Loc.connectionDialog,
+                viewColumn: vscode.ViewColumn.Active,
+                iconPath: {
+                    dark: vscode.Uri.joinPath(
+                        context.extensionUri,
+                        "media",
+                        "connectionDialogEditor_dark.svg",
+                    ),
+                    light: vscode.Uri.joinPath(
+                        context.extensionUri,
+                        "media",
+                        "connectionDialogEditor_light.svg",
+                    ),
+                },
             },
-        });
+        );
 
         if (!ConnectionDialogWebviewController._logger) {
             const vscodeWrapper = new VscodeWrapper();
@@ -1144,19 +1168,6 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
 
     //#region Connection helpers
 
-    private async validateProfile(
-        connectionProfile?: IConnectionDialogProfile,
-    ): Promise<string[]> {
-        if (!connectionProfile) {
-            connectionProfile = this.state.connectionProfile;
-        }
-
-        // clean the connection by clearing the options that aren't being used
-        const cleanedConnection = this.cleanConnection(connectionProfile);
-
-        return await this.validateConnectionProfile(cleanedConnection);
-    }
-
     private async connectHelper(
         state: ConnectionDialogWebviewState,
     ): Promise<ConnectionDialogWebviewState> {
@@ -1164,11 +1175,14 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
         this.state.connectionStatus = ApiStatus.Loading;
         this.updateState();
 
-        const cleanedConnection: IConnectionDialogProfile =
-            this.cleanConnection(this.state.connectionProfile);
-
-        const erroredInputs = await this.validateProfile(cleanedConnection);
+        const cleanedConnection: IConnectionDialogProfile = structuredClone(
+            this.state.connectionProfile,
+        );
+        this.cleanConnection(cleanedConnection); // clean the connection by clearing the options that aren't being used
 
+        // Perform final validation of all inputs
+        const erroredInputs =
+            await this.validateConnectionProfile(cleanedConnection);
         if (erroredInputs.length > 0) {
             this.state.connectionStatus = ApiStatus.Error;
             console.warn(
@@ -1597,19 +1611,15 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
         }, new Map<K, V[]>());
     }
 
-    /** Returns a copy of `connection` that's been cleaned up by clearing the properties that aren't being used
+    /** Cleans up a connection profile by clearing the properties that aren't being used
      * (e.g. due to form selections, like authType and inputMode) */
-    private cleanConnection(
-        connection: IConnectionDialogProfile,
-    ): IConnectionDialogProfile {
-        const cleanedConnection = structuredClone(connection);
-
+    private cleanConnection(connection: IConnectionDialogProfile) {
         // Clear values for inputs that are hidden due to form selections
         for (const option of Object.values(
             this.state.connectionComponents.components,
         )) {
             if (option.hidden) {
-                (cleanedConnection[
+                (connection[
                     option.propertyName as keyof IConnectionDialogProfile
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 ] as any) = undefined;
@@ -1621,19 +1631,17 @@ export class ConnectionDialogWebviewController extends ReactWebviewPanelControll
             this.state.selectedInputMode === ConnectionInputMode.Parameters ||
             this.state.selectedInputMode === ConnectionInputMode.AzureBrowse
         ) {
-            cleanedConnection.connectionString = undefined;
+            connection.connectionString = undefined;
         } else if (
             this.state.selectedInputMode ===
             ConnectionInputMode.ConnectionString
         ) {
-            Object.keys(cleanedConnection).forEach((key) => {
+            Object.keys(connection).forEach((key) => {
                 if (key !== "connectionString" && key !== "profileName") {
-                    cleanedConnection[key] = undefined;
+                    connection[key] = undefined;
                 }
             });
         }
-
-        return cleanedConnection;
     }
 
     private async loadConnections(): Promise<{
diff --git a/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx b/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
index 48e2a7d6bd..53365feeb8 100644
--- a/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
+++ b/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
@@ -18,9 +18,9 @@ export const ConnectButton = ({
     style?: CSSProperties;
     className?: string;
 }) => {
-    const context = useContext(ConnectionDialogContext);
+    const connectionDialogContext = useContext(ConnectionDialogContext);
 
-    if (!context) {
+    if (!connectionDialogContext) {
         return undefined;
     }
 
@@ -30,17 +30,18 @@ export const ConnectButton = ({
             type="submit"
             appearance="primary"
             disabled={
-                context.state.connectionStatus === ApiStatus.Loading ||
-                context.state.connectButtonReady === false
+                connectionDialogContext.state.connectionStatus ===
+                ApiStatus.Loading
             }
             onClick={(_event) => {
-                context.connect();
+                connectionDialogContext.connect();
             }}
             className={className}
             style={style}
             iconPosition="after"
             icon={
-                context.state.connectionStatus === ApiStatus.Loading ? (
+                connectionDialogContext.state.connectionStatus ===
+                ApiStatus.Loading ? (
                     <Spinner size="tiny" />
                 ) : undefined
             }
diff --git a/src/sharedInterfaces/connectionDialog.ts b/src/sharedInterfaces/connectionDialog.ts
index 439ebaeb61..4484bdf55e 100644
--- a/src/sharedInterfaces/connectionDialog.ts
+++ b/src/sharedInterfaces/connectionDialog.ts
@@ -16,7 +16,7 @@ export class ConnectionDialogWebviewState
     implements FormState<IConnectionDialogProfile>
 {
     /** the underlying connection profile for the form target; same as `connectionProfile` */
-    formState: IConnectionDialogProfile = {} as IConnectionDialogProfile;
+    formState: IConnectionDialogProfile;
     /** The underlying connection profile for the form target; a more intuitively-named alias for `formState` */
     get connectionProfile(): IConnectionDialogProfile {
         return this.formState;
@@ -24,34 +24,57 @@ export class ConnectionDialogWebviewState
     set connectionProfile(value: IConnectionDialogProfile) {
         this.formState = value;
     }
-    public selectedInputMode: ConnectionInputMode =
-        ConnectionInputMode.Parameters;
-    public connectionComponents: ConnectionComponentsInfo = {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        components: {} as any, // force empty record for intial blank state
-        mainOptions: [],
-        topAdvancedOptions: [],
-        groupedAdvancedOptions: [],
-    };
-    public azureSubscriptions: AzureSubscriptionInfo[] = [];
-    public azureServers: AzureSqlServerInfo[] = [];
-    public savedConnections: IConnectionDialogProfile[] = [];
-    public recentConnections: IConnectionDialogProfile[] = [];
-    public connectionStatus: ApiStatus = ApiStatus.NotStarted;
-    public connectButtonReady: boolean = false;
-    public formError: string = "";
-    public loadingAzureSubscriptionsStatus: ApiStatus = ApiStatus.NotStarted;
-    public loadingAzureServersStatus: ApiStatus = ApiStatus.NotStarted;
+    public selectedInputMode: ConnectionInputMode;
+    public connectionComponents: ConnectionComponentsInfo;
+    public azureSubscriptions: AzureSubscriptionInfo[];
+    public azureServers: AzureSqlServerInfo[];
+    public savedConnections: IConnectionDialogProfile[];
+    public recentConnections: IConnectionDialogProfile[];
+    public connectionStatus: ApiStatus;
+    public formError: string;
+    public loadingAzureSubscriptionsStatus: ApiStatus;
+    public loadingAzureServersStatus: ApiStatus;
     public dialog: IDialogProps | undefined;
 
-    constructor(params?: Partial<ConnectionDialogWebviewState>) {
-        for (const key in params) {
-            if (key in this) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- safe due to key in this check being a Partial of the class
-                (this as any)[key as keyof ConnectionDialogWebviewState] =
-                    params[key as keyof ConnectionDialogWebviewState]!;
-            }
-        }
+    constructor({
+        connectionProfile,
+        selectedInputMode,
+        connectionComponents,
+        azureSubscriptions,
+        azureServers,
+        savedConnections,
+        recentConnections,
+        connectionStatus,
+        formError,
+        loadingAzureSubscriptionsStatus,
+        loadingAzureServersStatus,
+        dialog,
+    }: {
+        connectionProfile: IConnectionDialogProfile;
+        selectedInputMode: ConnectionInputMode;
+        connectionComponents: ConnectionComponentsInfo;
+        azureServers: AzureSqlServerInfo[];
+        azureSubscriptions: AzureSubscriptionInfo[];
+        savedConnections: IConnectionDialogProfile[];
+        recentConnections: IConnectionDialogProfile[];
+        connectionStatus: ApiStatus;
+        formError: string;
+        loadingAzureSubscriptionsStatus: ApiStatus;
+        loadingAzureServersStatus: ApiStatus;
+        dialog: IDialogProps | undefined;
+    }) {
+        this.formState = connectionProfile;
+        this.selectedInputMode = selectedInputMode;
+        this.connectionComponents = connectionComponents;
+        this.azureSubscriptions = azureSubscriptions;
+        this.azureServers = azureServers;
+        this.savedConnections = savedConnections;
+        this.recentConnections = recentConnections;
+        this.connectionStatus = connectionStatus;
+        this.formError = formError;
+        this.loadingAzureSubscriptionsStatus = loadingAzureSubscriptionsStatus;
+        this.loadingAzureServersStatus = loadingAzureServersStatus;
+        this.dialog = dialog;
     }
 }