v8: Fix disappearing image cropper and grid content when using rollback (#5792)

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.controller.js

@@ -68,14 +68,20 @@
 
             if(version && version.versionId) {
 
+                vm.loading = true;
+
                 const culture = $scope.model.node.variants.length > 1 ? vm.currentVersion.language.culture : null;
 
                 contentResource.getRollbackVersion(version.versionId, culture)
-                    .then(function(data){
+                    .then(function(data) {
                         vm.previousVersion = data;
                         vm.previousVersion.versionId = version.versionId;
                         createDiff(vm.currentVersion, vm.previousVersion);
+
+                        vm.loading = false;
                         vm.rollbackButtonDisabled = false;
+                    }, function () {
+                        vm.loading = false;
                     });
 
             } else {
@@ -118,6 +124,10 @@
                 tab.properties.forEach((property, propertyIndex) => {
                     var oldProperty = previousVersion.tabs[tabIndex].properties[propertyIndex];
 
+                    // copy existing properties, so it doesn't manipulate existing properties on page
+                    oldProperty = angular.copy(oldProperty);
+                    property = angular.copy(property);
+
                     // we have to make properties storing values as object into strings (Grid, nested content, etc.)
                     if(property.value instanceof Object) {
                         property.value = JSON.stringify(property.value, null, 1);

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.html

@@ -31,8 +31,8 @@
 
                     <div>
 
-                        <h5><localize key="rollback_currentVersion"></localize></h5>
-                        <p>{{vm.currentVersion.name}} (Created: {{vm.currentVersion.createDate}})</p>
+                        <h5><localize key="rollback_currentVersion">Current version</localize></h5>
+                        <p>{{vm.currentVersion.name}} (<localize key="rollback_created">Created</localize>: {{vm.currentVersion.createDate}})</p>
 
                         <h5><localize key="rollback_rollbackTo"></localize></h5>
                         <select
@@ -44,9 +44,9 @@
                         </select>
                     </div>
 
-                    <div ng-if="vm.diff" class="diff" style="border-top: 1px solid #e9e9eb; margin-top: 30px;">
+                    <div ng-if="vm.diff && !vm.loading" class="diff" style="border-top: 1px solid #e9e9eb; margin-top: 30px;">
 
-                        <h5>Changes</h5>
+                        <h5><localize key="rollback_changes">Changes</localize></h5>
                         <small style="margin-bottom: 15px; display: block;"><localize key="rollback_diffHelp"></localize></small>
 
                         <table class="table table-condensed table-bordered">
@@ -54,7 +54,7 @@
                                 <tr>
                                     <td class="bold">Name</td>
                                     <td>
-                                        <span ng-repeat="part in vm.diff.name">
+                                        <span ng-repeat="part in vm.diff.name track by $id(part)">
                                             <ins ng-if="part.added">{{part.value}}</ins>
                                             <del ng-if="part.removed">{{part.value}}</del>
                                             <span ng-if="!part.added && !part.removed">{{part.value}}</span>
@@ -64,7 +64,7 @@
                                 <tr ng-repeat="property in vm.diff.properties track by property.alias">
                                     <td class="bold">{{property.label}}</td>
                                     <td ng-class="{'pre-line': property.isObject, 'word-wrap': !property.isObject}">
-                                        <span ng-repeat="part in property.diff">
+                                        <span ng-repeat="part in property.diff track by $id(part)">
                                             <ins ng-if="part.added">{{part.value}}</ins>
                                             <del ng-if="part.removed">{{part.value}}</del>
                                             <span ng-if="!part.added && !part.removed">{{part.value}}</span>

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

@@ -1094,10 +1094,13 @@ Mange hilsner fra Umbraco robotten
     <key alias="customCrop">Brugerdefineret</key>
   </area>
   <area alias="rollback">
+    <key alias="changes">Ændringer</key>
+    <key alias="created">Oprettet</key>
     <key alias="headline">Vælg en version at sammenligne med den nuværende version</key>
     <key alias="currentVersion">Nuværende version</key>
     <key alias="diffHelp"><![CDATA[Her vises forskellene mellem den nuværende version og den valgte version<br /><del>Rød</del> tekst vil ikke blive vist i den valgte version. <ins>Grøn betyder tilføjet</ins>]]></key>
     <key alias="documentRolledBack">Dokument tilbagerullet</key>
+    <key alias="headline">Vælg en version at sammenligne med den nuværende version</key>
     <key alias="htmlHelp">Her vises den valgte version som html. Hvis du ønsker at se forskellen mellem de 2 versioner på samme tid, brug 'diff'-oversigten</key>
     <key alias="rollbackTo">Tilbagerulning til</key>
     <key alias="selectVersion">Vælg version</key>

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

@@ -1336,10 +1336,12 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="customCrop">User defined</key>
   </area>
   <area alias="rollback">
-    <key alias="headline">Select a version to compare with the current version</key>
+    <key alias="changes">Changes</key>
+    <key alias="created">Created</key>
     <key alias="currentVersion">Current version</key>
     <key alias="diffHelp"><![CDATA[This shows the differences between the current version and the selected version<br /><del>Red</del> text will not be shown in the selected version. , <ins>green means added</ins>]]></key>
     <key alias="documentRolledBack">Document has been rolled back</key>
+    <key alias="headline">Select a version to compare with the current version</key>
     <key alias="htmlHelp">This displays the selected version as HTML, if you wish to see the difference between 2 versions at the same time, use the diff view</key>
     <key alias="rollbackTo">Rollback to</key>
     <key alias="selectVersion">Select version</key>

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

@@ -1345,10 +1345,13 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="customCrop">User defined</key>
   </area>
   <area alias="rollback">
+    <key alias="changes">Changes</key>
+    <key alias="created">Created</key>
     <key alias="headline">Select a version to compare with the current version</key>
     <key alias="currentVersion">Current version</key>
     <key alias="diffHelp"><![CDATA[This shows the differences between the current version and the selected version<br /><del>Red</del> text will not be shown in the selected version. , <ins>green means added</ins>]]></key>
     <key alias="documentRolledBack">Document has been rolled back</key>
+    <key alias="headline">Select a version to compare with the current version</key>
     <key alias="htmlHelp">This displays the selected version as HTML, if you wish to see the difference between 2 versions at the same time, use the diff view</key>
     <key alias="rollbackTo">Rollback to</key>
     <key alias="selectVersion">Select version</key>