Adding ability to increase script pane height and properties pane (#18056)

* Adding ability to increase script pane height and properties pane

* Adding loc files

* Also adding confirmation checkbox

* Fixing compile error

* remove console statement

Author: aasimkhan30

localization/l10n/bundle.l10n.json

@@ -91,8 +91,6 @@
   "Script As Create": "Script As Create",
   "Properties": "Properties",
   "No data": "No data",
-  "Severity": "Severity",
-  "Script as CREATE": "Script as CREATE",
   "1 issue": "1 issue",
   "{0} issues": "{0} issues",
   "Issues": "Issues",
@@ -101,9 +99,6 @@
   "Move Up": "Move Up",
   "Move Down": "Move Down",
   "Delete": "Delete",
-  "Error loading designer": "Error loading designer",
-  "Retry": "Retry",
-  "Loading table designer": "Loading table designer",
   "Results": "Results",
   "Messages": "Messages",
   "Timestamp": "Timestamp",
@@ -166,9 +161,13 @@
   "Continue Editing": "Continue Editing",
   "Loading Table Designer": "Loading Table Designer",
   "Error loading preview": "Error loading preview",
+  "Retry": "Retry",
   "Update Database": "Update Database",
   "Publish": "Publish",
   "Preview Database Updates": "Preview Database Updates",
+  "Error loading designer": "Error loading designer",
+  "Severity": "Severity",
+  "I have read the summary and understand the potential risks.": "I have read the summary and understand the potential risks.",
   "Connect": "Connect",
   "Advanced Connection Settings": "Advanced Connection Settings",
   "Advanced": "Advanced",

localization/xliff/vscode-mssql.xlf

@@ -548,6 +548,9 @@
     <trans-unit id="++CODE++881cda150f08bbb74d0fa62b161f8a953cf0e98bf734b60d0e059b408b75522b">
       <source xml:lang="en">Highlight Expensive Operation</source>
     </trans-unit>
+    <trans-unit id="++CODE++9638b09db2ce74e3d600f9a512a6116df9ba9b3a147569930a5d5b4682ac5a20">
+      <source xml:lang="en">I have read the summary and understand the potential risks.</source>
+    </trans-unit>
     <trans-unit id="++CODE++1d59e3e131d04ce9ba04c0f297dbd4eddb83c0bfe977b2a6bf19bdeb73f2d5c3">
       <source xml:lang="en">Ignore Tenant</source>
     </trans-unit>
@@ -603,9 +606,6 @@
     <trans-unit id="++CODE++10a371b8dc47cdf83c4cd7f926daf76305a6b52311a69b3087d744151dc53501">
       <source xml:lang="en">Loading Table Designer</source>
     </trans-unit>
-    <trans-unit id="++CODE++c47aaf844e09d0c6bd516bf7b71a31e66eac808241c7ec609c6c74c54908daa4">
-      <source xml:lang="en">Loading table designer</source>
-    </trans-unit>
     <trans-unit id="++CODE++aaaeb8d7872b0c49ed19d951314516d2dcd84ca23411320f05fac3d87bac8a32">
       <source xml:lang="en">MSSQL</source>
     </trans-unit>
@@ -913,9 +913,6 @@
     <trans-unit id="++CODE++cce7c24ebb0a14bc98b7d6a3f18ddfe9c893e65adb1a599321b3e0eca3515490">
       <source xml:lang="en">Script As Create</source>
     </trans-unit>
-    <trans-unit id="++CODE++3a4a2e94c1227e991b2d55800b114ce9ef01970894efa5dade81ab8f14adda8b">
-      <source xml:lang="en">Script as CREATE</source>
-    </trans-unit>
     <trans-unit id="++CODE++ebe0dbee443b4562c7925a01e3bc69a3d5d0a3b0e8b3e11041c69fa067b65ef7">
       <source xml:lang="en">Select a tenant</source>
     </trans-unit>

src/reactviews/common/locConstants.ts

@@ -102,6 +102,13 @@ export class LocConstants {
             publish: l10n.t("Publish"),
             previewDatabaseUpdates: l10n.t("Preview Database Updates"),
             close: l10n.t("Close"),
+            errorLoadingDesigner: l10n.t("Error loading designer"),
+            severity: l10n.t("Severity"),
+            description: l10n.t("Description"),
+            scriptAsCreate: l10n.t("Script As Create"),
+            designerPreviewConfirmation: l10n.t(
+                "I have read the summary and understand the potential risks.",
+            ),
         };
     }
 

src/reactviews/pages/TableDesigner/designerChangesPreviewButton.tsx

@@ -18,9 +18,9 @@ import {
     ErrorCircleRegular,
 } from "@fluentui/react-icons";
 import { Button } from "@fluentui/react-button";
-import { Spinner, makeStyles } from "@fluentui/react-components";
+import { Checkbox, Spinner, makeStyles } from "@fluentui/react-components";
 import ReactMarkdown from "react-markdown";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { TableDesignerContext } from "./tableDesignerStateProvider";
 import { LoadState } from "../../../sharedInterfaces/tableDesigner";
 import { locConstants } from "../../common/locConstants";
@@ -57,6 +57,8 @@ export const DesignerChangesPreviewButton = () => {
         return null;
     }
 
+    const [isConfirmationChecked, setIsConfirmationChecked] = useState(false);
+
     const metadata = designerContext.state;
 
     const generateScriptIcon = () => {
@@ -158,7 +160,7 @@ export const DesignerChangesPreviewButton = () => {
                         <div
                             style={{
                                 width: "98%",
-                                height: "100%",
+                                height: "calc(100% - 40px)",
                                 alignItems: "center",
                                 justifyContent: "center",
                                 borderTop: "1px solid #e0e0e0",
@@ -170,13 +172,27 @@ export const DesignerChangesPreviewButton = () => {
                                 {metadata?.generatePreviewReportResult?.report}
                             </ReactMarkdown>
                         </div>
+                        <Checkbox
+                            label={
+                                locConstants.tableDesigner
+                                    .designerPreviewConfirmation
+                            }
+                            onChange={(_event, data) => {
+                                setIsConfirmationChecked(
+                                    data.checked as boolean,
+                                );
+                            }}
+                        />
                     </DialogContent>
                     <DialogActions>
                         <Button
                             className={classes.updateDatabase}
                             disabled={
-                                metadata.apiState?.previewState !==
-                                LoadState.Loaded
+                                !(
+                                    isConfirmationChecked &&
+                                    metadata.apiState?.previewState ===
+                                        LoadState.Loaded
+                                )
                             }
                             appearance="primary"
                             onClick={() => {

src/reactviews/pages/TableDesigner/designerResultPane.tsx

@@ -42,6 +42,7 @@ import {
     InputBoxProperties,
 } from "../../../sharedInterfaces/tableDesigner";
 import * as l10n from "@vscode/l10n";
+import { locConstants } from "../../common/locConstants";
 
 const useStyles = makeStyles({
     root: {
@@ -100,9 +101,6 @@ export const DesignerResultPane = () => {
     const state = useContext(TableDesignerContext);
     const metadata = state?.state;
 
-    const SEVERITY = l10n.t("Severity");
-    const DESCRIPTION = l10n.t("Description");
-    const SCRIPT_AS_CREATE = l10n.t("Script as CREATE");
     const getIssuesTabAriaLabel = (count: number) => {
         return count === 1 ? l10n.t("1 issue") : l10n.t("{0} issues", count);
     };
@@ -124,11 +122,13 @@ export const DesignerResultPane = () => {
     const columnsDef: TableColumnDefinition<DesignerIssue>[] = [
         createTableColumn({
             columnId: "severity",
-            renderHeaderCell: () => <>{SEVERITY}</>,
+            renderHeaderCell: () => <>{locConstants.tableDesigner.severity}</>,
         }),
         createTableColumn({
             columnId: "description",
-            renderHeaderCell: () => <>{DESCRIPTION}</>,
+            renderHeaderCell: () => (
+                <>{locConstants.tableDesigner.description}</>
+            ),
         }),
         createTableColumn({
             columnId: "propertyPath",
@@ -192,7 +192,7 @@ export const DesignerResultPane = () => {
                         value={DesignerResultPaneTabs.Script}
                         key={DesignerResultPaneTabs.Script}
                     >
-                        {SCRIPT_AS_CREATE}
+                        {locConstants.tableDesigner.scriptAsCreate}
                     </Tab>
                     <Tab
                         value={DesignerResultPaneTabs.Issues}

src/reactviews/pages/TableDesigner/tableDesignerPage.tsx

@@ -19,7 +19,7 @@ import { DesignerPageRibbon } from "./designerPageRibbon";
 import { DesignerMainPane } from "./designerMainPane";
 import { DesignerPropertiesPane } from "./designerPropertiesPane";
 import { DesignerResultPane } from "./designerResultPane";
-import * as l10n from "@vscode/l10n";
+import { locConstants } from "../../common/locConstants";
 
 const useStyles = makeStyles({
     root: {
@@ -109,17 +109,13 @@ export const TableDesigner = () => {
         return null;
     }
 
-    const ERROR_LOADING_DESIGNER = l10n.t("Error loading designer");
-    const RETRY = l10n.t("Retry");
-    const LOADING_TABLE_DESIGNER = l10n.t("Loading table designer");
-
     return (
         <div className={classes.root}>
             {tableDesignerState.apiState?.initializeState ===
                 designer.LoadState.Loading && (
                 <div className={classes.pageContext}>
                     <Spinner
-                        label={LOADING_TABLE_DESIGNER}
+                        label={locConstants.tableDesigner.loadingTableDesigner}
                         labelPosition="below"
                     />
                 </div>
@@ -128,8 +124,10 @@ export const TableDesigner = () => {
                 designer.LoadState.Error && (
                 <div className={classes.pageContext}>
                     <ErrorCircleRegular className={classes.errorIcon} />
-                    <div>{ERROR_LOADING_DESIGNER}</div>
-                    <Button className={classes.retryButton}>{RETRY}</Button>
+                    <div>{locConstants.tableDesigner.errorLoadingDesigner}</div>
+                    <Button className={classes.retryButton}>
+                        {locConstants.tableDesigner.retry}
+                    </Button>
                 </div>
             )}
             {tableDesignerState.apiState?.initializeState ===
@@ -150,10 +148,10 @@ export const TableDesigner = () => {
                         />
                         {state.state.propertiesPaneData && (
                             <ResizableBox
-                                width={350}
+                                width={500}
                                 height={Infinity}
-                                maxConstraints={[800, Infinity]}
-                                minConstraints={[300, Infinity]}
+                                maxConstraints={[Infinity, Infinity]}
+                                minConstraints={[10, Infinity]}
                                 resizeHandles={["w"]}
                                 handle={
                                     <div
@@ -169,8 +167,8 @@ export const TableDesigner = () => {
                     <ResizableBox
                         width={Infinity}
                         height={250}
-                        maxConstraints={[Infinity, 400]}
-                        minConstraints={[Infinity, 200]}
+                        maxConstraints={[Infinity, Infinity]}
+                        minConstraints={[Infinity, 10]}
                         resizeHandles={["n"]}
                         handle={<div className={classes.resultPaneHandle} />}
                         className={classes.resultPaneContainer}