Add remove warning

Author: BatJan

src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js

@@ -118,18 +118,38 @@ Use this directive to render a ui component for selecting child items to a paren
 (function() {
     'use strict';
 
-    function ChildSelectorDirective() {
+    function ChildSelectorDirective(overlayService, localizationService) {
 
         function link(scope, el, attr, ctrl) {
 
             var eventBindings = [];
             scope.dialogModel = {};
             scope.showDialog = false;
 
-            scope.removeChild = (selectedChild, $index) => {
-               if (scope.onRemove) {
-                  scope.onRemove(selectedChild, $index);
-               }
+            scope.removeChild = (selectedChild, $index, event) => {
+               const dialog = {
+                    view: "views/components/overlays/umb-template-remove-confirm.html",
+                    layout: selectedChild,
+                    submitButtonLabelKey: "defaultdialogs_yesRemove",
+                    submitButtonStyle: "danger",
+                    submit: function () {
+                        if(scope.onRemove) {
+                            scope.onRemove(selectedChild, $index);
+                            overlayService.close();
+                        }
+                    },
+                    close: function () {
+                        overlayService.close();
+                    }
+                };
+
+                localizationService.localize("general_delete").then(value => {
+                    dialog.title = value;
+                    overlayService.open(dialog);
+                });
+
+                event.preventDefault();
+                event.stopPropagation();
             };
 
             scope.addChild = $event => {

src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-template-remove-confirm.html

@@ -0,0 +1,15 @@
+<div>
+
+    <div ng-if="model.layout" class="umb-alert umb-alert--warning mb2">
+        <localize key="contentTypeEditor_removeChildNode">You are removing the child node</localize> <strong>{{model.layout.name}}</strong>.
+    </div>
+
+    <p>
+        <localize key="contentTypeEditor_removeChildNodeWarning">
+            Removing a child node will limit the editors options to create different content types beneath a node.
+        </localize>
+    </p>
+
+    <localize key="defaultdialogs_confirmdelete">Are you sure you want to remove</localize>?
+
+</div>

src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html

@@ -24,7 +24,7 @@
                 <span class="umb-child-selector__child-name">{{selectedChild.name}}</span>
             </div>
             <div class="umb-child-selector__child-actions">
-                <button type="button" class="umb-node-preview__action umb-node-preview__action--red umb-child-selector__child-remove" ng-click="removeChild(selectedChild, $index)">
+                <button type="button" class="umb-node-preview__action umb-node-preview__action--red umb-child-selector__child-remove" ng-click="removeChild(selectedChild, $index, $event)">
                     <localize key="general_remove">Remove</localize>
                 </button>
             </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js

@@ -188,7 +188,6 @@ angular.module("umbraco")
             }
 
             function deleteLayout(layout, index, event) {
-
                 const dialog = {
                     view: "views/propertyEditors/grid/overlays/rowdeleteconfirm.html",
                     layout: layout,

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

@@ -1531,6 +1531,8 @@ Mange hilsner fra Umbraco robotten
     <key alias="propertyHasChanges">Du har lavet ændringer til denne egenskab. Er du sikker på at du vil kassere dem?</key>
     <key alias="displaySettingsHeadline">Visning</key>
     <key alias="displaySettingsLabelOnTop">Label hen over (fuld bredde)</key>
+    <key alias="removeChildNode">Du fjerner noden</key>
+    <key alias="removeChildNodeWarning">Fjernelse af noden, begrænser redaktørens muligheder for at oprette forskellige typer af underindhold.</key>
   </area>
   <area alias="languages">
     <key alias="addLanguage">Tilføj sprog</key>

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

@@ -1717,6 +1717,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="propertyHasChanges">You have made changes to this property. Are you sure you want to discard them?</key>
     <key alias="displaySettingsHeadline">Appearance</key>
     <key alias="displaySettingsLabelOnTop">Label above (full-width)</key>
+    <key alias="removeChildNode">You are removing the child node</key>
+    <key alias="removeChildNodeWarning">Removing a child node will limit the editors options to create different content types beneath a node.</key>
   </area>
   <area alias="languages">
     <key alias="addLanguage">Add language</key>

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

@@ -1748,6 +1748,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="addTab">Add tab</key>
     <key alias="convertToTab">Convert to tab</key>
     <key alias="tabDirectPropertiesDropZone">Drag properties here to place directly on the tab</key>
+    <key alias="removeChildNode">You are removing the child node</key>
+    <key alias="removeChildNodeWarning">Removing a child node will limit the editors options to create different content types beneath a node.</key>
   </area>
   <area alias="languages">
     <key alias="addLanguage">Add language</key>