Userpicker: Add warning overlay when the "Remove" button is hit (#8739)

src/Umbraco.Web.UI.Client/src/views/users/group.controller.js

@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function UserGroupEditController($scope, $location, $routeParams, userGroupsResource, localizationService, contentEditingHelper, editorService) {
+    function UserGroupEditController($scope, $location, $routeParams, userGroupsResource, localizationService, contentEditingHelper, editorService, overlayService) {
 
         var infiniteMode = $scope.model && $scope.model.infiniteMode;
         var id = infiniteMode ? $scope.model.id : $routeParams.id;
@@ -283,7 +283,25 @@
 
         function removeSelectedItem(index, selection) {
             if (selection && selection.length > 0) {
-                selection.splice(index, 1);
+
+                const dialog = {
+                    view: "views/users/views/overlays/remove.html",
+                    username: selection[index].username,
+                    userGroupName: vm.userGroup.name.toLowerCase(),
+                    submitButtonLabelKey: "defaultdialogs_yesRemove",
+                    submitButtonStyle: "danger",
+
+                    submit: function () {
+                        selection.splice(index, 1);
+
+                        overlayService.close();
+                    },
+                    close: function () {
+                        overlayService.close();
+                    }
+                };
+
+                overlayService.open(dialog);
             }
         }
 

src/Umbraco.Web.UI.Client/src/views/users/views/overlays/remove.html

@@ -0,0 +1,9 @@
+<div>
+
+    <div class="umb-alert umb-alert--warning mb2">
+        <localize key="defaultdialogs_userremovewarning" tokens="[model.username, model.userGroupName]">This will remove the user <strong>{{ model.username }} from the {{ model.userGropName }} group</strong>.</localize>
+    </div>
+
+    <localize key="defaultdialogs_confirmremove">Yes, remove</localize>?
+
+</div>

src/Umbraco.Web.UI/Umbraco/config/lang/en.xml

@@ -514,6 +514,8 @@
     <key alias="selectEditor">Select editor</key>
     <key alias="selectSnippet">Select snippet</key>
     <key alias="variantdeletewarning">This will delete the node and all its languages. If you only want to delete one language, you should unpublish the node in that language instead.</key>
+    <key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
+    <key alias="yesRemove">Yes, remove</key>
   </area>
   <area alias="dictionary">
     <key alias="noItems">There are no dictionary items.</key>

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -519,6 +519,8 @@
     <key alias="selectEditorConfiguration">Select configuration</key>
     <key alias="selectSnippet">Select snippet</key>
     <key alias="variantdeletewarning">This will delete the node and all its languages. If you only want to delete one language, you should unpublish the node in that language instead.</key>
+    <key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
+    <key alias="yesRemove">Yes, remove</key>
   </area>
   <area alias="dictionary">
     <key alias="noItems">There are no dictionary items.</key>