Add warning overlay when deleting grid layout

Author: BatJan

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

@@ -125,8 +125,29 @@ angular.module("umbraco")
                 editorService.open(layoutConfigOverlay);
             }
 
-            function deleteTemplate(index) {
-                $scope.model.value.templates.splice(index, 1);
+            function deleteTemplate(template, index, event) {
+
+                const dialog = {
+                    view: "views/propertyEditors/grid/overlays/layoutdeleteconfirm.html",
+                    layout: template,
+                    submitButtonLabelKey: "contentTypeEditor_yesDelete",
+                    submitButtonStyle: "danger",
+                    submit: function (model) {
+                        $scope.model.value.templates.splice(index, 1);
+                        overlayService.close();
+                    },
+                    close: function () {
+                        overlayService.close();
+                    }
+                };
+
+                localizationService.localize("general_delete").then(value => {
+                    dialog.title = value;
+                    overlayService.open(dialog);
+                });
+
+                event.preventDefault();
+                event.stopPropagation();
             }
 
             /****************

src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html

@@ -31,7 +31,7 @@ <h4>
 
                     <div>
                         <p>{{template.name}}</p>
-                        <button type="button" class="btn btn-small btn-link" ng-click="vm.deleteTemplate($index)">
+                        <button type="button" class="btn btn-small btn-link" ng-click="vm.deleteTemplate(template, $index, $event)">
                             <umb-icon icon="icon-delete" class="red"></umb-icon>
                             <localize key="general_delete">Delete</localize>
                         </button>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/overlays/layoutdeleteconfirm.html

@@ -0,0 +1,14 @@
+<div>
+    <div ng-if="model.layout" class="umb-alert umb-alert--warning mb2">
+        <localize key="grid_deleteLayout">You are deleting the layout</localize> <strong>{{model.layout.name}}</strong>.
+    </div>
+
+    <p>
+        <localize key="grid_deletingALayout">
+            Modifying layout will result in loss of data for any existing content that is based on this configuration.
+        </localize>
+    </p>
+
+    <localize key="defaultdialogs_confirmdelete">Are you sure you want to delete</localize>?
+
+</div>

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

@@ -1455,6 +1455,8 @@ Mange hilsner fra Umbraco robotten
     <key alias="warning">Advarsel</key>
     <key alias="youAreDeleting">Du sletter en rækkekonfiguration</key>
     <key alias="deletingARow">Sletning af et rækkekonfigurations navn vil resultere i et tab af data for alle eksiterende indhold som bruger dens konfiguration.</key>
+    <key alias="deleteLayout">Du sletter et layoutet</key>
+    <key alias="deletingALayout">Når du redigerer et layout vil data gå tabt de steder, hvor denne konfiguration bruges.</key>
     <key alias="maxItems">Maksimalt emner</key>
     <key alias="maxItemsDescription">Efterlad blank eller sæt til 0 for ubegrænset</key>
   </area>

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

@@ -1642,11 +1642,11 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="chooseExtra">Choose extra</key>
     <key alias="chooseDefault">Choose default</key>
     <key alias="areAdded">are added</key>
-        <key alias="warning">Warning</key>
-        <key alias="youAreDeleting">You are deleting the row configuration</key>
-        <key alias="deletingARow">
-            Deleting a row configuration name will result in loss of data for any existing content that is based on this configuration.
-        </key>
+    <key alias="warning">Warning</key>
+    <key alias="youAreDeleting">You are deleting the row configuration</key>
+    <key alias="deletingARow">Deleting a row configuration name will result in loss of data for any existing content that is based on this configuration.</key>
+    <key alias="deleteLayout">You are deleting the layout</key>
+    <key alias="deletingALayout">Modifying a layout will result in loss of data for any existing content that is based on this configuration.</key>
   </area>
   <area alias="contentTypeEditor">
     <key alias="compositions">Compositions</key>

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

@@ -1661,12 +1661,12 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="setAsDefault">Set as default</key>
     <key alias="chooseExtra">Choose extra</key>
     <key alias="chooseDefault">Choose default</key>
-      <key alias="areAdded">are added</key>
-        <key alias="warning">Warning</key>
-        <key alias="youAreDeleting">You are deleting the row configuration</key>
-        <key alias="deletingARow">
-            Deleting a row configuration name will result in loss of data for any existing content that is based on this configuration.
-        </key>
+    <key alias="areAdded">are added</key>
+    <key alias="warning">Warning</key>
+    <key alias="youAreDeleting">You are deleting the row configuration</key>
+    <key alias="deletingARow">Deleting a row configuration name will result in loss of data for any existing content that is based on this configuration.</key>
+    <key alias="deleteLayout">You are deleting the layout</key>
+    <key alias="deletingALayout">Modifying a layout will result in loss of data for any existing content that is based on this configuration.</key>
   </area>
   <area alias="contentTypeEditor">
     <key alias="compositions">Compositions</key>