Moving connection dialog to dialog shell.#21644
Merged
aasimkhan30 merged 5 commits intomainfrom Mar 18, 2026
Merged
Conversation
added 3 commits
March 16, 2026 22:13
aasimkhan30
requested review from
Benjin,
allancascante,
caohai,
kburtram,
laurenastrid1,
lewis-sanchez,
manujoseph85 and
ssreerama
as code owners
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the Connection Dialog webview to the shared DialogPageShell layout so it matches the newer standardized dialog UI patterns across the extension.
Changes:
- Wrap the Connection Dialog in
DialogPageShell, moving the primary “Connect” action and “Advanced settings” action into the shell footer. - Centralize the
AdvancedOptionsDrawerand remove per-page footer trays/buttons from the parameter/Azure/Fabric connection pages. - Apply minor spacing tweaks to the MRU connections list UI and remove the now-redundant
ConnectionHeadercomponent.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| extensions/mssql/src/reactviews/pages/ConnectionDialog/connectionPage.tsx | Adopts DialogPageShell with footer actions and hosts AdvancedOptionsDrawer at the page level. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/connectionPageContainer.tsx | Refactors form structure (adds form id) so the connect action can submit from the shell footer; reorganizes message/dialog rendering. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx | Adds optional form prop to support submitting a form from outside its DOM subtree. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/azureBrowsePage.tsx | Removes the per-page advanced drawer + connect footer tray (now handled by the shell). |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/fabricBrowsePage.tsx | Removes the per-page advanced drawer + connect footer tray (now handled by the shell). |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/connectionFormPage.tsx | Removes the per-page advanced drawer + connect footer tray (now handled by the shell). |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/connectionsListContainer.tsx | Tweaks styling/spacing and sets connection cards to a smaller visual density. |
| extensions/mssql/src/reactviews/common/dialogPageShell.tsx | Updates header sizing/styling and footer padding as part of the dialog-shell adoption. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/components/connectionHeader.component.tsx | Deletes the old header component in favor of the dialog shell header. |
| borderTop: "1px solid var(--vscode-editorGroup-border)", | ||
| backgroundColor: "var(--vscode-editorWidget-background, var(--vscode-editor-background))", | ||
| padding: "12px 0", | ||
| padding: "12px 16px", |
Contributor
Author
There was a problem hiding this comment.
Yeah, intentional as we don't want footer buttons to stick to sides and also be a little broader than the content
| value: option.value, | ||
| }); | ||
| <div className={formStyles.formComponentDiv}> | ||
| <Field label="Input type" orientation="horizontal"> |
Contributor
There was a problem hiding this comment.
@aasimkhan30 can you fix this while you're poking this file?
PR Changes
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #21644 +/- ##
=======================================
Coverage 72.95% 72.95%
=======================================
Files 331 331
Lines 99209 99209
Branches 5582 5582
=======================================
Hits 72374 72374
Misses 26835 26835 🚀 New features to boost your workflow:
|
lewis-sanchez
previously approved these changes
Mar 17, 2026
Benjin
previously approved these changes
Mar 17, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Moves the Connection Dialog UI onto the shared DialogPageShell layout to standardize header/content/footer behavior and consolidate the Connect/Advanced Settings actions into the shell footer.
Changes:
- Wrap the main connection form in
DialogPageShelland relocate Connect + Advanced Settings controls into the dialog footer. - Remove per-page nav trays (Connect/Advanced) from the Parameters/Azure/Fabric pages and delete the legacy
ConnectionHeadercomponent. - Update shared shell styling (header/footer layout) and tweak connection list spacing/card sizing.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| extensions/mssql/src/reactviews/pages/ConnectionDialog/connectionPage.tsx | Hosts the connection dialog content in DialogPageShell and adds footer actions + advanced drawer state. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/connectionPageContainer.tsx | Adds a stable form id for external submit and adjusts padding/layout for shell-based rendering. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx | Adds optional form support to enable footer-based form submission with the existing split-button UX. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/connectionFormPage.tsx | Removes inline nav tray (Connect/Advanced) now handled by the shell footer. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/azureBrowsePage.tsx | Removes inline Connect/Advanced controls to rely on shell footer actions. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/fabricBrowsePage.tsx | Removes inline Connect/Advanced controls to rely on shell footer actions. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/connectionsListContainer.tsx | Adjusts spacing and card sizing for better alignment with the updated dialog layout. |
| extensions/mssql/src/reactviews/common/dialogPageShell.tsx | Updates shell header/footer styling and increases header icon sizing. |
| extensions/mssql/src/reactviews/pages/ConnectionDialog/components/connectionHeader.component.tsx | Removes legacy header component superseded by DialogPageShell. |
Comment on lines
+88
to
+90
| <form id="connectionForm" onSubmit={handleConnect}> | ||
| <button type="submit" style={{ display: "none" }} aria-hidden="true" tabIndex={-1} /> | ||
| <ConnectionHeader /> | ||
|
|
||
| <div className={formStyles.formDiv} style={{ overflow: "auto" }}> | ||
| <div className={styles.formContent}> |
extensions/mssql/src/reactviews/pages/ConnectionDialog/connectionPage.tsx
Show resolved
Hide resolved
extensions/mssql/src/reactviews/pages/ConnectionDialog/components/connectButton.component.tsx
Show resolved
Hide resolved
caohai
approved these changes
Mar 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Code Changes Checklist
npm run test)Reviewers: Please read our reviewer guidelines