Content picker: Remove multi-node content picker entries by UDI to account for index not aligning with stored values (#20950)

* Remove multi-node content picker entries by udi to account for index not aligning with stored values.

* Handled issues raised in code review.

Author: AndyButland

src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js

@@ -1,4 +1,3 @@
-
 /**
  * The controller that is used for a couple different Property Editors: Multi Node Tree Picker, Content Picker,
  * since this is used by MNTP and it supports content, media and members, there is code to deal with all 3 of those types
@@ -345,17 +344,24 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
 
     };
 
-    $scope.remove = function (index) {
+    $scope.remove = function (id) {
         if (!$scope.allowRemove) return;
 
-        var currIds = $scope.model.value ? $scope.model.value.split(',') : [];
-        if (currIds.length > 0) {
-            currIds.splice(index, 1);
-            setDirty();
-            $scope.model.value = currIds.join();
+        var currUdis = $scope.model.value ? $scope.model.value.split(',') : [];
+        if (currUdis.length > 0) {
+
+            // Remove the node with the provided UDI.
+            var index = currUdis.indexOf(id.toString());  // id may be an integer ID or a UDI string, split() always returns strings.
+            if (index >= 0) {
+                currUdis.splice(index, 1);
+                setDirty();
+
+                // If no ids left, set value to null to match `clear()` behavior.
+                $scope.model.value = currUdis.length > 0 ? currUdis.join() : null;
+            }
         }
 
-        removeAllEntriesAction.isDisabled = currIds.length === 0;
+        removeAllEntriesAction.isDisabled = currUdis.length === 0;
     };
 
     $scope.showNode = function (index) {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html

@@ -14,7 +14,7 @@
                               sortable="!sortableOptions.disabled"
                               allow-remove="allowRemove"
                               allow-open="model.config.showOpenButton && allowOpen && !dialogEditor"
-                              on-remove="remove($index)"
+                              on-remove="remove(model.config.idType === 'udi' ? node.udi : node.id)"
                               on-open="openEditor(node)">
             </umb-node-preview>
         </div>

src/Umbraco.Web.UI.Client/test/unit/app/propertyeditors/content-picker-controller.spec.js

@@ -81,7 +81,7 @@ describe('Content picker controller tests', function () {
         });
 
         it("Removing an item should update renderModel, ids and model.value", function(){
-            scope.remove(1);
+            scope.remove(1231);
             scope.$apply();
             expect(scope.renderModel.length).toBe(2);
             expect(scope.model.value).toBe("1233,23121");