fix container validation

Author: Lauren Nathan

localization/l10n/bundle.l10n.json

@@ -1227,7 +1227,7 @@
   "Please choose a unique name for the container": "Please choose a unique name for the container",
   "Port": "Port",
   "Choose a port to host the SQL Server Docker Container": "Choose a port to host the SQL Server Docker Container",
-  "Please choose a port that is not in use": "Please choose a port that is not in use",
+  "Please make sure the port is a number, and choose a port that is not in use": "Please make sure the port is a number, and choose a port that is not in use",
   "Hostname": "Hostname",
   "Choose a hostname for the container": "Choose a hostname for the container",
   "Terms & Conditions": "Terms & Conditions",

localization/xliff/vscode-mssql.xlf

@@ -1522,9 +1522,6 @@
     <trans-unit id="++CODE++955d464619712f47bd39bd4fa1eb8ca90d1415bd5da4d3dc80b13d8be23f281e">
       <source xml:lang="en">Please Accept the Docker EULA</source>
     </trans-unit>
-    <trans-unit id="++CODE++1df1c1ebdbd0d721e5aea0d9f620d42982a7dc22147a6493a7112fd70115b853">
-      <source xml:lang="en">Please choose a port that is not in use</source>
-    </trans-unit>
     <trans-unit id="++CODE++e9867ec277676c80767b62a3ccde695a9fd4b9927c6541f6bfb0be08bed55596">
       <source xml:lang="en">Please choose a unique name for the container</source>
     </trans-unit>
@@ -1534,6 +1531,9 @@
     <trans-unit id="++CODE++2048d236cea5afafe8b7e125d9b86eb44250c4ac6f382bc412dca8e4188292fa">
       <source xml:lang="en">Please make sure Rosetta Virtualization is enabled. You can do this within your Docker Desktop settings.</source>
     </trans-unit>
+    <trans-unit id="++CODE++759058121cf2833fdf5f3228c2d13019bf96166084c277f8fb23c117159cb3a7">
+      <source xml:lang="en">Please make sure the port is a number, and choose a port that is not in use</source>
+    </trans-unit>
     <trans-unit id="++CODE++768742aef46bbb43fdd36f568edeb182810dc96b84ad73db24565b95423f4829">
       <source xml:lang="en">Please make your password at least 8 characters long.</source>
     </trans-unit>

src/constants/locConstants.ts

@@ -797,7 +797,9 @@ export class ContainerDeployment {
     );
     public static port = l10n.t("Port");
     public static portTooltip = l10n.t("Choose a port to host the SQL Server Docker Container");
-    public static pleaseChooseUnusedPort = l10n.t("Please choose a port that is not in use");
+    public static pleaseChooseUnusedPort = l10n.t(
+        "Please make sure the port is a number, and choose a port that is not in use",
+    );
     public static hostname = l10n.t("Hostname");
     public static hostnameTooltip = l10n.t("Choose a hostname for the container");
     public static termsAndConditions = l10n.t("Terms & Conditions");

src/containerDeployment/containerDeploymentWebviewController.ts

@@ -88,11 +88,13 @@ export class ContainerDeploymentWebviewController extends FormWebviewController<
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             ] as any) = payload.event.value;
 
-            return await this.validateDockerConnectionProfile(
+            const newState = await this.validateDockerConnectionProfile(
                 state,
                 this.state.formState,
                 payload.event.propertyName,
             );
+            this.updateState(newState);
+            return newState;
         });
         this.registerReducer("completeDockerStep", async (state, payload) => {
             const currentStepNumber = payload.dockerStepNumber;
@@ -190,7 +192,11 @@ export class ContainerDeploymentWebviewController extends FormWebviewController<
                 );
                 state.isValidContainerName = validationResult !== "";
                 if (!state.isValidContainerName) {
+                    component.validation = dockerUtils.invalidContainerNameValidationResult;
                     erroredInputs.push(prop);
+                } else {
+                    // If the container name is valid, we can reset the validation message
+                    component.validation = { isValid: true, validationMessage: "" };
                 }
             }
             // Special validation for port, because docker commands
@@ -201,7 +207,10 @@ export class ContainerDeploymentWebviewController extends FormWebviewController<
                 );
                 state.isValidPortNumber = isValidPort;
                 if (!isValidPort) {
+                    component.validation = dockerUtils.invalidPortNumberValidationResult;
                     erroredInputs.push(prop);
+                } else {
+                    component.validation = { isValid: true, validationMessage: "" };
                 }
             }
             // Default validation logic
@@ -348,14 +357,8 @@ export class ContainerDeploymentWebviewController extends FormWebviewController<
                 label: ContainerDeployment.containerName,
                 isAdvancedOption: true,
                 tooltip: ContainerDeployment.containerNameTooltip,
-                validate(state, value) {
-                    return !value || value.toString() === "" || state.isValidContainerName
-                        ? { isValid: true, validationMessage: "" }
-                        : {
-                              isValid: false,
-                              validationMessage:
-                                  ContainerDeployment.pleaseChooseUniqueContainerName,
-                          };
+                validate(state, _) {
+                    return { isValid: state.isValidContainerName, validationMessage: "" };
                 },
             }),
 
@@ -365,13 +368,8 @@ export class ContainerDeploymentWebviewController extends FormWebviewController<
                 label: ContainerDeployment.port,
                 isAdvancedOption: true,
                 tooltip: ContainerDeployment.portTooltip,
-                validate(state, value) {
-                    return !value || value.toString() === "" || state.isValidPortNumber
-                        ? { isValid: true, validationMessage: "" }
-                        : {
-                              isValid: false,
-                              validationMessage: ContainerDeployment.pleaseChooseUnusedPort,
-                          };
+                validate(state, _) {
+                    return { isValid: state.isValidPortNumber, validationMessage: "" };
                 },
             }),
 

src/containerDeployment/dockerUtils.ts

@@ -25,8 +25,17 @@ import { ContainerDeployment } from "../constants/locConstants";
 import { TelemetryActions, TelemetryViews } from "../sharedInterfaces/telemetry";
 import { sendActionEvent } from "../telemetry/telemetry";
 import * as path from "path";
+import { FormItemValidationState } from "../sharedInterfaces/form";
 
 const MAX_ERROR_TEXT_LENGTH = 300;
+export const invalidContainerNameValidationResult: FormItemValidationState = {
+    isValid: false,
+    validationMessage: ContainerDeployment.pleaseChooseUniqueContainerName,
+};
+export const invalidPortNumberValidationResult: FormItemValidationState = {
+    isValid: false,
+    validationMessage: ContainerDeployment.pleaseChooseUnusedPort,
+};
 
 /**
  * Commands used to interact with Docker.
@@ -79,6 +88,8 @@ export function initializeDockerSteps(): DockerStep[] {
             bodyText: ContainerDeployment.dockerInstallBody,
             link: "https://docs.docker.com/engine/install/",
             linkText: ContainerDeployment.installDocker,
+            errorLink: "https://docs.docker.com/engine/install/",
+            errorLinkText: ContainerDeployment.installDocker,
             stepAction: checkDockerInstallation,
         },
         {