Refactor dialog modes to use 'standalone' instead of 'shell' and introduce ConnectionSubDialogDisplayType for consistency across components

Author: Aasim Khan

extensions/mssql/src/reactviews/pages/AddFirewallRule/addFirewallRule.component.tsx

@@ -37,6 +37,7 @@ import { IMssqlAzureTenant } from "../../../sharedInterfaces/azureAccountManagem
 import { addNewMicrosoftAccount } from "../../common/constants";
 import { DialogPageShell } from "../../common/dialogPageShell";
 import { AddFirewallRuleIcon } from "../../common/icons/addFirewallRule";
+import { ConnectionSubDialogDisplayType } from "../../../sharedInterfaces/connectionDialog";
 
 enum IpSelectionMode {
     SpecificIp = "specificIp",
@@ -62,20 +63,18 @@ const useStyles = makeStyles({
     },
 });
 
-export type AddFirewallRuleDialogMode = "shell" | "modal";
-
 export const AddFirewallRuleDialog = ({
     state,
     addFirewallRule,
     closeDialog,
     signIntoAzure,
-    mode = "shell",
+    mode = "standalone",
 }: {
     state: AddFirewallRuleState;
     addFirewallRule: (firewallRuleSpec: FirewallRuleSpec) => void;
     closeDialog: () => void;
     signIntoAzure: () => void;
-    mode?: AddFirewallRuleDialogMode;
+    mode?: ConnectionSubDialogDisplayType;
 }) => {
     const styles = useStyles();
     const formStyles = useFormStyles();
@@ -328,7 +327,7 @@ export const AddFirewallRuleDialog = ({
         </div>
     );
 
-    if (mode === "shell") {
+    if (mode === "standalone") {
         return (
             <DialogPageShell
                 icon={<AddFirewallRuleIcon aria-label={dialogTitle} />}

extensions/mssql/src/reactviews/pages/AddFirewallRule/addFirewallRulePage.tsx

@@ -28,7 +28,7 @@ export const AddFirewallRulePage = () => {
 
     return (
         <AddFirewallRuleDialog
-            mode="shell"
+            mode="standalone"
             state={{
                 serverName,
                 message: message!,

extensions/mssql/src/reactviews/pages/ChangePassword/changePasswordDialog.tsx

@@ -23,6 +23,7 @@ import { ChangePasswordResult } from "../../../sharedInterfaces/changePassword";
 import { locConstants } from "../../common/locConstants";
 import { DialogPageShell } from "../../common/dialogPageShell";
 import { ChangePasswordIcon } from "../../common/icons/changePassword";
+import { ConnectionSubDialogDisplayType } from "../../../sharedInterfaces/connectionDialog";
 
 const useStyles = makeStyles({
     root: {
@@ -61,20 +62,18 @@ const useStyles = makeStyles({
     },
 });
 
-export type ChangePasswordDialogMode = "shell" | "modal";
-
 export const ChangePasswordDialog = ({
     onClose,
     onSubmit,
     serverName,
     userName,
-    mode = "shell",
+    mode = "standalone",
 }: {
     onClose?: () => void;
     onSubmit?: (password: string) => Promise<ChangePasswordResult | undefined>;
     serverName?: string;
     userName?: string;
-    mode?: ChangePasswordDialogMode;
+    mode?: ConnectionSubDialogDisplayType;
 }) => {
     const styles = useStyles();
     const [showPassword, setShowPassword] = useState(false);
@@ -218,7 +217,7 @@ export const ChangePasswordDialog = ({
         );
     };
 
-    if (mode === "shell") {
+    if (mode === "standalone") {
         return (
             <DialogPageShell
                 icon={<ChangePasswordIcon aria-label={locConstants.changePasswordDialog.title} />}

extensions/mssql/src/reactviews/pages/ConnectionGroup/connectionGroup.component.tsx

@@ -37,6 +37,7 @@ import {
 import { useState } from "react";
 import { KeyCode } from "../../common/keys";
 import { DialogPageShell } from "../../common/dialogPageShell";
+import { ConnectionSubDialogDisplayType } from "../../../sharedInterfaces/connectionDialog";
 
 const useStyles = makeStyles({
     previewColor: {
@@ -86,12 +87,12 @@ export const ConnectionGroupDialog = ({
     state,
     saveConnectionGroup,
     closeDialog,
-    mode = "shell",
+    mode = "standalone",
 }: {
     state: ConnectionGroupState;
     saveConnectionGroup: (connectionGroupSpec: ConnectionGroupSpec) => void;
     closeDialog: () => void;
-    mode?: ConnectionGroupDialogMode;
+    mode?: ConnectionSubDialogDisplayType;
 }) => {
     const formStyles = useFormStyles();
     const styles = useStyles();
@@ -250,7 +251,7 @@ export const ConnectionGroupDialog = ({
         </form>
     );
 
-    if (mode === "shell") {
+    if (mode === "standalone") {
         return (
             <DialogPageShell
                 icon={<FolderAdd24Regular aria-label={dialogTitle} />}
@@ -280,5 +281,3 @@ export const ConnectionGroupDialog = ({
         </Dialog>
     );
 };
-
-export type ConnectionGroupDialogMode = "shell" | "modal";

extensions/mssql/src/reactviews/pages/UserSurvey/userSurveyPage.tsx

@@ -57,6 +57,11 @@ const useStyles = makeStyles({
         gap: "10px",
         alignItems: "flex-start",
     },
+    privacyContent: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+    },
     privacyIcon: {
         color: "var(--vscode-descriptionForeground)",
         flexShrink: 0,
@@ -66,10 +71,6 @@ const useStyles = makeStyles({
         color: "var(--vscode-descriptionForeground)",
         lineHeight: "1.5",
     },
-    privacyDivider: {
-        marginTop: "12px",
-        marginBottom: "12px",
-    },
     privacyExpandedText: {
         color: "var(--vscode-descriptionForeground)",
         lineHeight: "1.5",
@@ -86,7 +87,6 @@ export const UserSurveyPage = () => {
     const cancelButtonText = useUserSurveySelector((s) => s?.cancelButtonText);
     const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
     const [userAnswers, setUserAnswers] = useState<Answers>({});
-    const [isPrivacyExpanded, setIsPrivacyExpanded] = useState(false);
 
     const updateSubmitButtonState = () => {
         for (let i = 0; i < questions!.length; i++) {
@@ -172,36 +172,23 @@ export const UserSurveyPage = () => {
                     <div className={classes.privacyNoticeCard}>
                         <div className={classes.privacyHeader}>
                             <Shield20Regular className={classes.privacyIcon} />
-                            <Text className={classes.privacySummary}>
-                                <Text weight="semibold">
-                                    {locConstants.userFeedback.privacyNotice}
-                                </Text>{" "}
-                                - {locConstants.userFeedback.feedbackStatementShort}{" "}
+                            <div className={classes.privacyContent}>
+                                <Text className={classes.privacySummary}>
+                                    <Text weight="semibold">
+                                        {locConstants.userFeedback.privacyNotice}
+                                    </Text>
+                                </Text>
+                                <Text className={classes.privacyExpandedText}>
+                                    {locConstants.userFeedback.feedbackStatementLong}
+                                </Text>
                                 <Link
                                     onClick={() => {
-                                        setIsPrivacyExpanded((current) => !current);
+                                        context.openPrivacyStatement();
                                     }}>
-                                    {isPrivacyExpanded
-                                        ? `${locConstants.userFeedback.hideFullStatement} \u2191`
-                                        : `${locConstants.userFeedback.readFullStatement} \u2193`}
+                                    {locConstants.userFeedback.privacyStatement}
                                 </Link>
-                            </Text>
+                            </div>
                         </div>
-
-                        {isPrivacyExpanded && (
-                            <>
-                                <Divider className={classes.privacyDivider} />
-                                <Text className={classes.privacyExpandedText}>
-                                    {locConstants.userFeedback.feedbackStatementLong}{" "}
-                                    <Link
-                                        onClick={() => {
-                                            context.openPrivacyStatement();
-                                        }}>
-                                        {locConstants.userFeedback.privacyStatement}
-                                    </Link>
-                                </Text>
-                            </>
-                        )}
                     </div>
                 </div>
             </div>

extensions/mssql/src/sharedInterfaces/connectionDialog.ts

@@ -301,3 +301,5 @@ export namespace GetSqlAnalyticsEndpointUriFromFabricRequest {
         "getSqlAnalyticsEndpointUriFromFabric",
     );
 }
+
+export type ConnectionSubDialogDisplayType = "standalone" | "modal";