Improve YSOD rendering in the client (#17940)

* Conditionally render error details and make sure something is rendered

* V13 QA updated locator for failing E2E test (#17825)

* Added timeouts

* Nullcheck user in Content permission handlers (#17846)

---------

Co-authored-by: Sven Geusens <sge@umbraco.dk>
Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>

---------

Co-authored-by: Andreas Zerbst <73799582+andr317c@users.noreply.github.com>
Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>

src/Umbraco.Web.UI.Client/src/views/common/overlays/ysod/ysod.controller.js

@@ -2,7 +2,6 @@ angular.module("umbraco")
     .controller("Umbraco.Overlays.YsodController", function ($scope, localizationService) {
 
         function onInit() {
-
             if(!$scope.model.title) {
                 localizationService.localize("errors_receivedErrorFromServer").then(function(value){
                     $scope.model.title = value;
@@ -14,7 +13,7 @@ angular.module("umbraco")
                 $scope.model.error.data.StackTrace = $scope.model.error.data.StackTrace.trim();
             }
 
-            if ($scope.model.error && $scope.model.error.data) {
+            if ($scope.model.error && $scope.model.error.data && $scope.model.error.data.InnerException) {
                 $scope.model.error.data.InnerExceptions = [];
                 var ex = $scope.model.error.data.InnerException;
                 while (ex) {
@@ -25,7 +24,13 @@ angular.module("umbraco")
                     ex = ex.InnerException;
                 }
             }
-
+            // in rare occasions, the error.data is not an object but contains a concatenated string of the type and stacktrace
+            // to avoid angular from crashing, we dump the whole thing in the stacktrace so it is at least readable by the user.
+            else if(typeof($scope.model.error.data) === "string"){
+              $scope.model.error.data = {
+                StackTrace: $scope.model.error.data.trim()
+              }
+            }
         }
 
         onInit();

src/Umbraco.Web.UI.Client/src/views/common/overlays/ysod/ysod.html

@@ -1,9 +1,8 @@
 <div ng-controller="Umbraco.Overlays.YsodController">
-
     <h4 class="heading red">{{model.error.errorMsg}}</h4>
     <p>{{model.error.data.ExceptionMessage || model.error.data.Message}}</p>
 
-    <div class="umb-control-group">
+    <div class="umb-control-group" ng-if="model.error.data.ExceptionType || model.error.data.ExceptionMessage">
         <h5>
             <localize key="defaultdialogs_exceptionDetail">Exception Details:</localize>
         </h5>

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/BlockGridEditor/Content/blockGridEditorContent.spec.ts

@@ -67,6 +67,7 @@ test.describe('BlockGridEditorContent', () => {
     await page.locator('[id="sub-view-0"]').locator('[id="title"]').fill(newContentValue);
     await umbracoUi.clickDataElementByElementName('sub-view-settings');
     // Adds text to the setting element
+    await page.waitForTimeout(500);
     await page.locator('[id="sub-view-1"]').locator('[id="title"]').fill(newSettingValue);
     await page.locator('[label="Submit"]').click();
     await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.saveAndPublish));
@@ -231,7 +232,7 @@ test.describe('BlockGridEditorContent', () => {
       const dragFromLocator = await page.locator('[data-content-element-type-key="' + element['key'] + '"]', {hasText: bottomBlock});
       const dragToLocator = await page.locator('[data-content-element-type-key="' + element['key'] + '"]', {hasText: topBlock});
       await umbracoUi.dragAndDrop(dragFromLocator, dragToLocator, 10, -5, 15);
-
+      await page.waitForTimeout(500);
       // Assert
       // Checks if the BottomBlock is moved to be under TopBlock
       await expect(page.locator('[data-content-element-type-key="' + element['key'] + '"]').nth(1)).toContainText(bottomBlock);
@@ -393,7 +394,6 @@ test.describe('BlockGridEditorContent', () => {
       await umbracoUi.isSuccessNotificationVisible();
       // Checks if there are two blocks in the area
       await expect(page.locator('[data-element="property-' + blockGridAlias + '"]').locator('umb-block-grid-entry')).toHaveCount(2);
-
     });
 
     test('can set a maximum of required blocks in content with a block grid editor', async ({page, umbracoApi, umbracoUi}) => {
@@ -458,8 +458,8 @@ test.describe('BlockGridEditorContent', () => {
       await page.locator('[title="Delete"]').nth(2).click();
       await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey('actions_delete'));
 
-      await page.waitForTimeout(2000);
-      await page.getByRole('button', { name: 'Save and publish' }).click();
+      await page.waitForTimeout(1000);
+      await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.saveAndPublish));
 
       // Assert
       await umbracoUi.isSuccessNotificationVisible();
@@ -477,7 +477,7 @@ test.describe('BlockGridEditorContent', () => {
       const dataTypeBlockGrid = new BlockGridDataTypeBuilder()
         .withName(blockGridName)
         .addBlock()
-          // We use the a label so we can see if the block is live updated when content is being written to the element
+          // We use the label so we can see if the block is live updated when content is being written to the element
           .withLabel('{{' + element.groups[0].properties[0].alias + '}}')
           .withContentElementTypeKey(element['key'])
           .withEditorSize('small')