Select newly added keys (#601)

* Select newly added keys

* Add a comment about force rendering

* Use the newest types for express and remove a conflict between multiple
versions of express between the top level node modules and the
metrics_server node modules.  Also fix node typing at major version 12
to avoid issues with typing in node 13.

src/metrics_server/package.json

@@ -13,8 +13,8 @@
     "express": "^4.17.1"
   },
   "devDependencies": {
-    "@types/express": "^4.17.2",
-    "@google-cloud/storage": "^2.3.1"
+    "@google-cloud/storage": "^2.3.1",
+    "@types/express": "^4.17.3"
   },
   "scripts": {
     "start": "node ./index.js"

src/server_manager/package.json

@@ -29,14 +29,18 @@
     "request": "^2.87.0",
     "request-lite": "^2.40.1"
   },
+  "comments": [
+    "@types/node can't have a major version update due to typing changes in node 13.  Electron depends on ^12 and we get 13, which breaks us"
+  ],
   "devDependencies": {
     "@types/bytes": "^3.0.0",
     "@types/node-forge": "^0.6.9",
+    "@types/node": "~12.0.0",
     "@types/request": "^2.47.1",
     "@types/semver": "^5.5.0",
     "bower": "^1.8.0",
     "browserify": "^14.5.0",
-    "electron": "7.0.0",
+    "electron": "~7.0.0",
     "electron-builder": "^21.2.0",
     "electron-icon-maker": "^0.0.4",
     "electron-notarize": "^0.2.1",

src/server_manager/ui_components/outline-server-view.html

@@ -510,6 +510,7 @@
                     <input
                       type="text"
                       class="access-key-name"
+                      id$="access-key-[[item.id]]"
                       placeholder="{{item.placeholderName}}"
                       value="[[item.name]]"
                       on-blur="_handleNameInputBlur"
@@ -701,9 +702,11 @@
       addAccessKey: function(accessKey) {
         // TODO(fortuna): Restore loading animation.
         // TODO(fortuna): Restore highlighting.
-        // Push to array using Polymer in order to propagate changes. See
-        // https://www.polymer-project.org/1.0/docs/devguide/model-data#array-mutation
         this.push("accessKeyRows", accessKey);
+        // Force render the access key list so that the input is present in the DOM
+        this.$.accessKeysContainer.querySelector("dom-repeat").render();
+        const input = this.$$(`#access-key-${accessKey.id}`);
+        input.select();
       },
       removeAccessKey: function(accessKeyId) {
         for (let ui in this.accessKeyRows) {