From 4c3b4752dbfa4d0041523d930ded3160a6cb33f9 Mon Sep 17 00:00:00 2001
From: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com>
Date: Tue, 21 Nov 2023 13:55:52 +0100
Subject: [PATCH] V13: Change WebhookLog status for clarity (#15247)

* Refactor to show icon and status code to make status more clear

* Fix up migration

* Add change log status migration

* Fix up frontend to display cross when fail

---------

Co-authored-by: Zeegaan <nge@umbraco.dk>
---
 .../Services/WebhookLogFactory.cs             |  7 ++-
 .../Migrations/Upgrade/UmbracoPlan.cs         |  1 +
 .../Upgrade/V_13_0_0/ChangeLogStatusCode.cs   | 45 +++++++++++++++++++
 .../src/views/webhooks/logs.controller.js     |  2 +-
 .../src/views/webhooks/logs.html              |  3 +-
 .../src/views/webhooks/overlays/details.html  | 14 +++---
 6 files changed, 59 insertions(+), 13 deletions(-)
 create mode 100644 src/Umbraco.Infrastructure/Migrations/Upgrade/V_13_0_0/ChangeLogStatusCode.cs

diff --git a/src/Umbraco.Core/Services/WebhookLogFactory.cs b/src/Umbraco.Core/Services/WebhookLogFactory.cs
index 455bc45e27..e798b2b2aa 100644
--- a/src/Umbraco.Core/Services/WebhookLogFactory.cs
+++ b/src/Umbraco.Core/Services/WebhookLogFactory.cs
@@ -1,4 +1,5 @@
-using Umbraco.Cms.Core.Models;
+using System.Net;
+using Umbraco.Cms.Core.Models;
 using Umbraco.Cms.Core.Webhooks;
 
 namespace Umbraco.Cms.Core.Services;
@@ -20,7 +21,7 @@ public class WebhookLogFactory : IWebhookLogFactory
         {
             log.RequestBody = await responseModel.HttpResponseMessage!.RequestMessage!.Content!.ReadAsStringAsync(cancellationToken);
             log.ResponseBody = await responseModel.HttpResponseMessage.Content.ReadAsStringAsync(cancellationToken);
-            log.StatusCode = responseModel.HttpResponseMessage.StatusCode.ToString();
+            log.StatusCode = MapStatusCodeToMessage(responseModel.HttpResponseMessage.StatusCode);
             log.RetryCount = responseModel.RetryCount;
             log.ResponseHeaders = responseModel.HttpResponseMessage.Headers.ToString();
             log.RequestHeaders = responseModel.HttpResponseMessage.RequestMessage.Headers.ToString();
@@ -28,4 +29,6 @@ public class WebhookLogFactory : IWebhookLogFactory
 
         return log;
     }
+
+    private string MapStatusCodeToMessage(HttpStatusCode statusCode) => $"{statusCode.ToString()} ({(int)statusCode})";
 }
diff --git a/src/Umbraco.Infrastructure/Migrations/Upgrade/UmbracoPlan.cs b/src/Umbraco.Infrastructure/Migrations/Upgrade/UmbracoPlan.cs
index 24d82710d6..06ed5ba957 100644
--- a/src/Umbraco.Infrastructure/Migrations/Upgrade/UmbracoPlan.cs
+++ b/src/Umbraco.Infrastructure/Migrations/Upgrade/UmbracoPlan.cs
@@ -101,5 +101,6 @@ public class UmbracoPlan : MigrationPlan
         To<V_13_0_0.AddWebhookRequest>("{4E652F18-9A29-4656-A899-E3F39069C47E}");
         To<V_13_0_0.RenameWebhookIdToKey>("{148714C8-FE0D-4553-B034-439D91468761}");
         To<V_13_0_0.AddWebhookDatabaseLock>("{23BA95A4-FCCE-49B0-8AA1-45312B103A9B}");
+        To<V_13_0_0.ChangeLogStatusCode>("{7DDCE198-9CA4-430C-8BBC-A66D80CA209F}");
     }
 }
diff --git a/src/Umbraco.Infrastructure/Migrations/Upgrade/V_13_0_0/ChangeLogStatusCode.cs b/src/Umbraco.Infrastructure/Migrations/Upgrade/V_13_0_0/ChangeLogStatusCode.cs
new file mode 100644
index 0000000000..2df244be8c
--- /dev/null
+++ b/src/Umbraco.Infrastructure/Migrations/Upgrade/V_13_0_0/ChangeLogStatusCode.cs
@@ -0,0 +1,45 @@
+using System.Net;
+using NPoco;
+using Umbraco.Cms.Core;
+using Umbraco.Cms.Infrastructure.Persistence;
+using Umbraco.Cms.Infrastructure.Persistence.Dtos;
+using Umbraco.Extensions;
+
+namespace Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_13_0_0;
+
+public class ChangeLogStatusCode : MigrationBase
+{
+    public ChangeLogStatusCode(IMigrationContext context) : base(context)
+    {
+    }
+
+    protected override void Migrate()
+    {
+        if (!TableExists(Constants.DatabaseSchema.Tables.WebhookLog))
+        {
+            return;
+        }
+
+        Sql<ISqlContext> fetchQuery = Database.SqlContext.Sql()
+            .Select<WebhookLogDto>()
+            .From<WebhookLogDto>();
+
+        // Use a custom SQL query to prevent selecting explicit columns (sortOrder doesn't exist yet)
+        List<WebhookLogDto> webhookLogDtos = Database.Fetch<WebhookLogDto>(fetchQuery);
+
+        Sql<ISqlContext> deleteQuery = Database.SqlContext.Sql()
+            .Delete<WebhookLogDto>();
+
+        Database.Execute(deleteQuery);
+
+        foreach (WebhookLogDto webhookLogDto in webhookLogDtos)
+        {
+            if (Enum.TryParse(webhookLogDto.StatusCode, out HttpStatusCode statusCode))
+            {
+                webhookLogDto.StatusCode = $"{statusCode.ToString()} ({(int)statusCode})";
+            }
+        }
+
+        Database.InsertBatch(webhookLogDtos);
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js
index c6b45530d8..c4d032b806 100644
--- a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js
@@ -55,7 +55,7 @@
     }
 
     function isChecked(log) {
-      return log.statusCode === "OK";
+      return log.statusCode === "OK (200)";
     }
 
     init();
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html
index 9eec01ce05..9b1a59a0db 100644
--- a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html
+++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html
@@ -16,8 +16,9 @@
           <umb-checkmark
             ng-if="vm.isChecked(log)"
             checked="vm.isChecked(log)"
-            size="xs">
+            size="m">
           </umb-checkmark>
+          <umb-icon icon="icon-wrong" class="umb-checkmark umb-checkmark--m" style="cursor: default;" ng-if="!vm.isChecked(log)"></umb-icon>
         </td>
         <td>{{ log.webhookKey }}</td>
         <td>{{ log.formattedLogDate }}</td>
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html
index d1ce18477e..4e60ed2d63 100644
--- a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html
+++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html
@@ -15,17 +15,17 @@
        <umb-box>
           <umb-box-header title-key="general_general"></umb-box-header>
           <umb-box-content class="block-form">
-              
+
               <umb-control-group>
                 <div class="flex items-center">
                   <div class="flx-g0 flx-s0" style="flex-basis: 40px;">
-                    <umb-checkmark checked="true" size="m" style="cursor: default"></umb-checkmark>
-                    <umb-icon icon="icon-wrong" class="umb-checkmark umb-checkmark--m" style="cursor: default;" ng-if="model.webhookLogEntry.response.isSuccess === false"></umb-icon>
+                    <umb-checkmark checked="true" size="m" style="cursor: default" ng-if="model.log.statusCode === 'OK (200)'"></umb-checkmark>
+                    <umb-icon icon="icon-wrong" class="umb-checkmark umb-checkmark--m" style="cursor: default;" ng-if="model.log.statusCode !== 'OK (200)'"></umb-icon>
                   </div>
-                  <div class="flx-g1 flx-s1 flx-b2" ng-if="model.webhookLogEntry.responseStatus.description || model.webhookLogEntry.response.statusCode">{{model.webhookLogEntry.response.statusDescription}} ({{model.webhookLogEntry.response.statusCode}})</div>
+                  <div class="flx-g1 flx-s1 flx-b2">{{model.log.statusCode}}</div>
                 </div>
               </umb-control-group>
-              
+
               <umb-control-group label="@general_date">
                   <div>{{model.log.formattedLogDate}}</div>
               </umb-control-group>
@@ -34,10 +34,6 @@
                   <div>{{model.log.url}}</div>
               </umb-control-group>
 
-              <umb-control-group label="Status code">
-                <div>{{model.log.statusCode}}</div>
-              </umb-control-group>
-
               <umb-control-group label="Event">
                 <div>{{model.log.eventAlias}}</div>
               </umb-control-group>