Fixed DSR difference for DS required capability

CHANGELOG.md

@@ -51,6 +51,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 - [#7386](https://github.com/apache/trafficcontrol/pull/7386) *Traffic Portal* Increased the number of events that are logged to the TP access log.
 
 ### Fixed
+- [#7414](https://github.com/apache/trafficcontrol/pull/7414) * Traffic Portal* Fixed DSR difference for DS required capability.
 - [#7130](https://github.com/apache/trafficcontrol/issues/7130) *Traffic Ops* Fixes service_categories response to POST API.
 - [#7340](https://github.com/apache/trafficcontrol/pull/7340) *Traffic Router* Fixed TR logging for the `cqhv` field when absent.
 - [#5557](https://github.com/apache/trafficcontrol/issues/5557) *Traffic Portal* Moved `Fair Queueing Pacing Rate Bps` DS field to `Cache Configuration Settings` section.

traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js

@@ -113,6 +113,25 @@ var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin,
 		deliveryService.tlsVersions?.splice(index+1, 0, "");
 	};
 
+	/** Compare Arrays
+	 *
+	 * @template T extends number[] | boolean[] | bigint[] | string[]
+	 *
+	 * @param {T} a
+	 * @param {T} b
+	 * @returns `false` if the arrays are equal, `true` otherwise.
+	 */
+	function arrayCompare (a, b) {
+		if (a === b) return false;
+		if (a.length !== b.length) return true;
+
+		for (let i = 0; i < a.length; i++) {
+			if (a[i] !== b[i]) return true;
+		}
+		return false;
+	};
+	$scope.arrayCompare = arrayCompare;
+
 	/**
 	 * This function is called on 'change' events for any and all TLS Version
 	 * inputs, and sets validity states of duplicates.

traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html

@@ -365,7 +365,7 @@ <h3 ng-if="!open()">Previous Value</h3>
                                     <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
                                 </div>
                             </div>
-                            <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.requiredCapabilities !== dsCurrent.requiredCapabilities">
+                            <aside class="current-value" ng-if="settings.isRequest" ng-show="{{arrayCompare(deliveryService.requiredCapabilities, dsCurrent.requiredCapabilities)}}">
                                 <h3 ng-if="open()">Current Value</h3>
                                 <h3 ng-if="!open()">Previous Value</h3>
                                 <pre>{{::dsCurrent.requiredCapabilities}}</pre>

traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html

@@ -365,7 +365,7 @@ <h3 ng-if="!open()">Previous Value</h3>
                                     <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank">{{capability.name}}</a>
                                 </div>
                             </div>
-                            <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.requiredCapabilities !== dsCurrent.requiredCapabilities">
+                            <aside class="current-value" ng-if="settings.isRequest" ng-show="{{arrayCompare(deliveryService.requiredCapabilities, dsCurrent.requiredCapabilities)}}">
                                 <h3 ng-if="open()">Current Value</h3>
                                 <h3 ng-if="!open()">Previous Value</h3>
                                 <pre>{{::dsCurrent.requiredCapabilities}}</pre>