Better hint user when they fail to set IoT Hub connection string (#207)

* Basic version

* Better hint user when they fail to set IoT Hub connection string

* Add dispose

* Remove one br tag

package.json

@@ -7,7 +7,7 @@
   "aiKey": "0caaff90-cc1c-4def-b64c-3ef33615bc9b",
   "icon": "logo.png",
   "engines": {
-    "vscode": "^1.23.0"
+    "vscode": "^1.26.0"
   },
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository": {

resources/iot-hub-connection-string.md

@@ -0,0 +1,15 @@
+<br />
+<br />
+
+# How to retrieve connection string for IoT hub
+
+1. Log in to the [Azure portal](https://portal.azure.com). 
+
+1. Click on your hub to see the IoT Hub pane with Settings, and so on. Click **Shared access policies**.
+   
+1. In **Shared access policies**, select the **iothubowner** policy. 
+
+1. Under **Shared access keys**, copy the **Connection string -- primary key** to be used later.
+
+    ![Show how to retrieve the connection string](https://raw.githubusercontent.com/wiki/Microsoft/vscode-azure-iot-toolkit/images/iot-hub-get-connection-string.png)
+

src/constants.ts

@@ -26,6 +26,7 @@ enum TemplateType {
 }
 
 export class Constants {
+    public static ExtensionContext: vscode.ExtensionContext;
     public static ExtensionId = "vsciot-vscode.azure-iot-toolkit";
     public static CampaignID = "vsciottoolkit";
 
@@ -147,6 +148,7 @@ export class Constants {
     };
 
     public static initialize(context: vscode.ExtensionContext) {
+        Constants.ExtensionContext = context;
         const directory = context.storagePath ? context.storagePath : os.tmpdir();
         Constants.ModuleTwinJosnFilePath = path.join(directory, Constants.ModuleTwinJosnFileName);
         Constants.DeviceTwinJosnFilePath = path.join(directory, Constants.DeviceTwinJosnFileName);

src/utility.ts

@@ -31,43 +31,34 @@ export class Utility {
 
     public static async setConnectionString(id: string, name: string) {
         TelemetryClient.sendEvent("General.SetConfig.Popup");
-        return vscode.window.showInputBox({
-            prompt: `${name}`,
-            placeHolder: Constants.ConnectionStringFormat[id],
-            ignoreFocusOut: true,
-        }).then(async (value: string) => {
-            if (value !== undefined) {
+        return new Promise<string>((resolve, reject) => {
+            let value;
+            const input = vscode.window.createInputBox();
+            input.prompt = name;
+            input.placeholder = Constants.ConnectionStringFormat[id];
+            input.ignoreFocusOut = true;
+            input.onDidAccept(async () => {
+                value = input.value;
                 if (this.isValidConnectionString(id, value)) {
                     TelemetryClient.sendEvent("General.SetConfig.Done", { Result: "Success" });
                     let config = Utility.getConfiguration();
                     await config.update(id, value, true);
+                    resolve(value);
+                    input.dispose();
                 } else {
                     TelemetryClient.sendEvent("General.SetConfig.Done", { Result: "Fail" });
-                    value = null;
-                    const reset = "Reset";
-                    const GoToConnectionStringPage = "More info";
-                    await vscode.window.showErrorMessage(`The format should be "${Constants.ConnectionStringFormat[id]}". Please enter a valid ${name}.`,
-                        reset, GoToConnectionStringPage).then(async (selection) => {
-                            switch (selection) {
-                                case reset:
-                                    TelemetryClient.sendEvent("General.Reset.ConnectionString");
-                                    value = await this.setConnectionString(id, name);
-                                    break;
-                                case GoToConnectionStringPage:
-                                    vscode.commands.executeCommand("vscode.open",
-                                        vscode.Uri.parse(
-                                            `https://blogs.msdn.microsoft.com/iotdev/2017/05/09/understand-different-connection-strings-in-azure-iot-hub/?WT.mc_id=${Constants.CampaignID}`));
-                                    TelemetryClient.sendEvent("General.Open.ConnectionStringPage");
-                                    break;
-                                default:
-                            }
-                        });
+                    vscode.commands.executeCommand("markdown.showPreview", vscode.Uri.file(Constants.ExtensionContext.asAbsolutePath(path.join("resources", "iot-hub-connection-string.md"))));
+                    input.validationMessage = `The format should be "${Constants.ConnectionStringFormat[id]}"`;
                 }
-                return value;
-            } else {
-                this.showIoTHubInformationMessage();
-            }
-            return null;
+            });
+            input.onDidHide(() => {
+                resolve();
+                input.dispose();
+                if (!value) {
+                    this.showIoTHubInformationMessage();
+                }
+            });
+            input.show();
         });
     }