gui: Add dropdown menu to choose discovered devices to device modal (fixes #4157)

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/4186
LGTM: AudriusButkevicius, calmh

gui/default/syncthing/device/editDeviceModalView.html

@@ -5,9 +5,15 @@
         <label translate for="deviceID">Device ID</label>
         <input ng-if="!editingExisting" name="deviceID" id="deviceID" class="form-control text-monospace" type="text" ng-model="currentDevice.deviceID" required valid-deviceid list="discovery-list" />
         <datalist id="discovery-list" ng-if="!editingExisting">
-          <option ng-repeat="(id, data) in discovery" value="{{id}}" />
+          <option ng-repeat="id in discovery" value="{{id}}" />
         </datalist>
         <div ng-if="editingExisting" class="well well-sm text-monospace" select-on-click>{{currentDevice.deviceID}}</div>
+        <p class="help-block" ng-if="!editingExisting && discovery">
+          <span translate>You can also select one of these nearby devices:</span>
+          <ul>
+            <li ng-repeat="id in discovery"><a ng-click="currentDevice.deviceID = id">{{id}}</a>
+          </ul>
+        </p>
         <p class="help-block">
           <span translate ng-if="deviceEditor.deviceID.$valid || deviceEditor.deviceID.$pristine">The device ID to enter here can be found in the "Actions > Show ID" dialog on the other device. Spaces and dashes are optional (ignored).</span>
           <span translate ng-show="!editingExisting && (deviceEditor.deviceID.$valid || deviceEditor.deviceID.$pristine)">When adding a new device, keep in mind that this device must be added on the other side too.</span>