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.

6 files changed, 12 insertions, 6 deletions

diff --git a/gui/default/index.html b/gui/default/index.html
index 729e50580..6e26461ce 100644
--- a/gui/default/index.html
+++ b/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>
diff --git a/gui/default/syncthing/app.js b/gui/default/syncthing/app.js
index 0a961f508..2731445cd 100644
--- a/gui/default/syncthing/app.js
+++ b/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
 
diff --git a/gui/default/syncthing/core/syncthingController.js b/gui/default/syncthing/core/syncthingController.js
index 32fca420e..b31f94188 100755
--- a/gui/default/syncthing/core/syncthingController.js
+++ b/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) {
diff --git a/lib/protocol/deviceid.go b/lib/protocol/deviceid.go
index fee2f6d65..25ecbc1a3 100644
--- a/lib/protocol/deviceid.go
+++ b/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
 )
 
diff --git a/lib/protocol/deviceid_test.go b/lib/protocol/deviceid_test.go
index 90fa3e000..00d09e4a3 100644
--- a/lib/protocol/deviceid_test.go
+++ b/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))
 	}
diff --git a/next-gen-gui/src/app/api-utils.ts b/next-gen-gui/src/app/api-utils.ts
index 13d4137c7..a75e216ea 100644
--- a/next-gen-gui/src/app/api-utils.ts
+++ b/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';
 }