gui: Keep short deviceID length consistent + xrefs (fixes #9313) (#9314)

Making short deviceID length consistent and referencing to protocol file
for future-proof edits. Closes #9313.

gui/default/index.html

@@ -910,7 +910,7 @@
                       </tr>
                       <tr ng-if="deviceCfg.introducedBy">
                         <th><span class="far fa-fw fa-handshake-o"></span>&nbsp;<span translate>Introduced By</span></th>
-                        <td class="text-right">{{ deviceName(devices[deviceCfg.introducedBy]) || deviceCfg.introducedBy.substring(0, 5) }}</td>
+                        <td class="text-right">{{ deviceName(devices[deviceCfg.introducedBy]) || deviceShortID(deviceCfg.introducedBy) }}</td>
                       </tr>
                       <tr ng-if="deviceCfg.autoAcceptFolders">
                         <th><span class="fa fa-fw fa-level-down"></span>&nbsp;<span translate>Auto Accept</span></th>

gui/default/syncthing/app.js

@@ -18,6 +18,9 @@ var syncthing = angular.module('syncthing', [
 var urlbase = 'rest';
 var authUrlbase = urlbase + '/noauth/auth';
 
+// keep consistent with ShortIDStringLength in lib/protocol/deviceid.go
+var shortIDStringLength = 7;
+
 syncthing.config(function ($httpProvider, $translateProvider, LocaleServiceProvider) {
     // language and localisation
 

gui/default/syncthing/core/syncthingController.js

@@ -1460,7 +1460,7 @@ angular.module('syncthing.core')
 
         $scope.friendlyNameFromShort = function (shortID) {
             var matches = Object.keys($scope.devices).filter(function (id) {
-                return id.substr(0, 7) === shortID;
+                return id.substr(0, shortIDStringLength) === shortID;
             });
             if (matches.length !== 1) {
                 return shortID;
@@ -1473,7 +1473,7 @@ angular.module('syncthing.core')
             if (match) {
                 return $scope.deviceName(match);
             }
-            return deviceID.substr(0, 6);
+            return deviceID.substr(0, shortIDStringLength);
         };
 
         $scope.deviceName = function (deviceCfg) {
@@ -1490,7 +1490,7 @@ angular.module('syncthing.core')
             if (typeof deviceID === 'undefined') {
                 return "";
             }
-            return deviceID.substr(0, 6);
+            return deviceID.substr(0, shortIDStringLength);
         };
 
         $scope.thisDeviceName = function () {
@@ -1501,7 +1501,7 @@ angular.module('syncthing.core')
             if (device.name) {
                 return device.name;
             }
-            return device.deviceID.substr(0, 6);
+            return device.deviceID.substr(0, shortIDStringLength);
         };
 
         $scope.showDeviceIdentification = function (deviceCfg) {

lib/protocol/deviceid.go

@@ -14,7 +14,8 @@ import (
 )
 
 const (
-	DeviceIDLength      = 32
+	DeviceIDLength = 32
+	// keep consistent with shortIDStringLength in gui/default/syncthing/app.js
 	ShortIDStringLength = 7
 )
 

lib/protocol/deviceid_test.go

@@ -84,6 +84,7 @@ func TestShortIDString(t *testing.T) {
 	id, _ := DeviceIDFromString(formatted)
 
 	sid := id.Short().String()
+	// keep consistent with ShortIDStringLength in lib/protocol/deviceid.go
 	if len(sid) != 7 {
 		t.Errorf("Wrong length for short ID: got %d, want 7", len(sid))
 	}

next-gen-gui/src/app/api-utils.ts

@@ -1,6 +1,7 @@
 import { environment } from '../environments/environment'
 
 export const deviceID = (): String => {
+    // keep consistent with ShortIDStringLength in lib/protocol/deviceid.go
     return environment.production ? globalThis.metadata['deviceIDShort'] : '1234567';
 }