Updating Table designer Publish dialog according to feedback. (#18259)

Author: aasimkhan30

localization/l10n/bundle.l10n.json

@@ -179,6 +179,7 @@
   "Schema": "Schema",
   "Back to preview": "Back to preview",
   "Copy": "Copy",
+  "You must review and accept the terms to proceed": "You must review and accept the terms to proceed",
   "Connect": "Connect",
   "Advanced Connection Settings": "Advanced Connection Settings",
   "Advanced": "Advanced",

localization/xliff/vscode-mssql.xlf

@@ -1326,6 +1326,9 @@
     <trans-unit id="++CODE++85a39ab345d672ff8ca9b9c6876f3adcacf45ee7c1e2dbd2408fd338bd55e07e">
       <source xml:lang="en">Yes</source>
     </trans-unit>
+    <trans-unit id="++CODE++72f5c8fcf386f50a0af8057b25cbd6d2cbfe99d41c859934b12e7592b60b2690">
+      <source xml:lang="en">You must review and accept the terms to proceed</source>
+    </trans-unit>
     <trans-unit id="++CODE++4d665ff14f7810a8d97b139336a650d9bf37854683886f2df4679232ec55bae4">
       <source xml:lang="en">Your account needs re-authentication to access {0} resources. Press Open to start the authentication process.</source>
       <note>{0} is the resource</note>

src/reactviews/common/locConstants.ts

@@ -136,6 +136,9 @@ export class LocConstants {
             schema: l10n.t("Schema"),
             backToPreview: l10n.t("Back to preview"),
             copy: l10n.t("Copy"),
+            youMustReviewAndAccept: l10n.t(
+                "You must review and accept the terms to proceed",
+            ),
         };
     }
 

src/reactviews/pages/TableDesigner/designerChangesPreviewButton.tsx

@@ -226,58 +226,83 @@ export const DesignerChangesPreviewButton = () => {
         </>
     );
 
-    const previewLoadedSuccessDialogContents = () => (
-        <>
-            <DialogContent>
-                <div className={classes.markdownContainer}>
-                    <ReactMarkdown>
-                        {metadata?.generatePreviewReportResult?.report}
-                    </ReactMarkdown>
-                </div>
-                <Checkbox
-                    label={
-                        locConstants.tableDesigner.designerPreviewConfirmation
-                    }
-                    checked={isConfirmationChecked}
-                    onChange={(_event, data) => {
-                        setIsConfirmationChecked(data.checked as boolean);
-                    }}
-                />
-            </DialogContent>
-            <DialogActions>
-                <Button
-                    className={classes.updateDatabase}
-                    disabled={
-                        !(
-                            isConfirmationChecked &&
-                            metadata.apiState?.previewState === LoadState.Loaded
-                        )
-                    }
-                    appearance="primary"
-                    onClick={() => {
-                        designerContext.provider.publishChanges();
-                    }}
-                >
-                    {locConstants.tableDesigner.updateDatabase}
-                </Button>
-                <DialogTrigger action="close">
+    const previewLoadedSuccessDialogContents = () => {
+        return (
+            <>
+                <DialogContent>
+                    <div className={classes.markdownContainer}>
+                        <ReactMarkdown>
+                            {metadata?.generatePreviewReportResult?.report}
+                        </ReactMarkdown>
+                    </div>
+                    <Checkbox
+                        label={
+                            locConstants.tableDesigner
+                                .designerPreviewConfirmation
+                        }
+                        required
+                        checked={isConfirmationChecked}
+                        onChange={(_event, data) => {
+                            setIsConfirmationChecked(data.checked as boolean);
+                        }}
+                        // Setting initial focus on the checkbox when it is rendered.
+                        autoFocus
+                        /**
+                         * The focus outline is not visible on the checkbox when it is focused programmatically.
+                         * This is a workaround to make the focus outline visible on the checkbox when it is focused programmatically.
+                         * This is most likely a bug in the browser.
+                         */
+                        onFocus={(event) => {
+                            if (event.target.parentElement) {
+                                event.target.parentElement.style.outlineStyle =
+                                    "solid";
+                            }
+                        }}
+                        onBlur={(event) => {
+                            if (event.target.parentElement) {
+                                event.target.parentElement.style.outline =
+                                    "none";
+                            }
+                        }}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    {getDialogCloseButton()}
+                    <DialogTrigger action="close">
+                        <Button
+                            icon={generateScriptIcon()}
+                            iconPosition="after"
+                            className={classes.openScript}
+                            disabled={
+                                metadata.apiState?.previewState !==
+                                LoadState.Loaded
+                            }
+                            appearance="secondary"
+                            onClick={designerContext.provider.generateScript}
+                        >
+                            {locConstants.tableDesigner.generateScript}
+                        </Button>
+                    </DialogTrigger>
                     <Button
-                        icon={generateScriptIcon()}
-                        iconPosition="after"
-                        className={classes.openScript}
-                        disabled={
-                            metadata.apiState?.previewState !== LoadState.Loaded
+                        className={classes.updateDatabase}
+                        disabled={!isConfirmationChecked}
+                        title={
+                            !isConfirmationChecked
+                                ? locConstants.tableDesigner
+                                      .youMustReviewAndAccept
+                                : locConstants.tableDesigner.updateDatabase
                         }
                         appearance="primary"
-                        onClick={designerContext.provider.generateScript}
+                        onClick={() => {
+                            designerContext.provider.publishChanges();
+                        }}
                     >
-                        {locConstants.tableDesigner.generateScript}
+                        {locConstants.tableDesigner.updateDatabase}
                     </Button>
-                </DialogTrigger>
-                {getDialogCloseButton()}
-            </DialogActions>
-        </>
-    );
+                </DialogActions>
+            </>
+        );
+    };
 
     const getDialogContent = () => {
         if (metadata?.apiState?.publishState === LoadState.Loading) {