From 09225a6e7cd51f091918d6e2f32eb04728474dca Mon Sep 17 00:00:00 2001
From: Diego Fernandes <diego.schell.f@gmail.com>
Date: Thu, 14 Mar 2024 08:35:48 -0300
Subject: [PATCH] chore: split webhook logs vertically due to lack of space

---
 .../settings/developers/logs/[logId]/page.tsx |  2 +-
 .../(app)/settings/developers/logs/layout.tsx |  6 ++---
 .../developers/logs/webhook-logs-list.tsx     | 27 ++++++++-----------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/app/(app)/settings/developers/logs/[logId]/page.tsx b/apps/web/src/app/(app)/settings/developers/logs/[logId]/page.tsx
index a726f61..0907aba 100644
--- a/apps/web/src/app/(app)/settings/developers/logs/[logId]/page.tsx
+++ b/apps/web/src/app/(app)/settings/developers/logs/[logId]/page.tsx
@@ -85,7 +85,7 @@ export default async function WebhookLogsDetails({
   const nextRetryDateFormatted = `(Next retry in ${formattedNextRetryDate.trim()})`
 
   return (
-    <div className="space-y-4 p-6">
+    <div className="space-y-4 py-6">
       <div className="flex items-center gap-2">
         <span className="truncate whitespace-nowrap text-xl font-bold tracking-tight">
           {webhookLog.httpMethod} {new URL(webhookLog.url).pathname}
diff --git a/apps/web/src/app/(app)/settings/developers/logs/layout.tsx b/apps/web/src/app/(app)/settings/developers/logs/layout.tsx
index 7ae186e..1d9831d 100644
--- a/apps/web/src/app/(app)/settings/developers/logs/layout.tsx
+++ b/apps/web/src/app/(app)/settings/developers/logs/layout.tsx
@@ -31,12 +31,12 @@ export default async function WebhookLogsLayout({
         <h2 className="text-2xl font-bold tracking-tight">Webhook logs</h2>
       </div>
       <WebhookLogsFilters />
-      <div className="grid grid-cols-[minmax(0,_1fr)_1px_minmax(0,_1fr)] border-t">
+      <div className="grid grid-rows-[35vh_1fr] border-t">
         <Suspense fallback={<WebhookLogsListLoading />}>
           <WebhookLogsList />
         </Suspense>
-        <Separator orientation="vertical" className="h-full" />
-        <div className="min-h-[400px]">{children}</div>
+        <Separator orientation="horizontal" />
+        <div>{children}</div>
       </div>
     </div>
   )
diff --git a/apps/web/src/app/(app)/settings/developers/logs/webhook-logs-list.tsx b/apps/web/src/app/(app)/settings/developers/logs/webhook-logs-list.tsx
index 79a7a6d..e8b76bf 100644
--- a/apps/web/src/app/(app)/settings/developers/logs/webhook-logs-list.tsx
+++ b/apps/web/src/app/(app)/settings/developers/logs/webhook-logs-list.tsx
@@ -8,7 +8,7 @@ export async function WebhookLogsList() {
   const { companyWebhookLogs } = await serverClient.getCompanyWebhookLogs()
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col overflow-auto">
       {companyWebhookLogs.map((webhookLog) => {
         const webhookUrl = new URL(webhookLog.url)
 
@@ -16,7 +16,7 @@ export async function WebhookLogsList() {
           <NavLink
             href={`/settings/developers/logs/${webhookLog.id}`}
             key={webhookLog.id}
-            className="flex items-center gap-4 border-b border-l-4 border-l-zinc-100 px-4 py-2.5 hover:bg-accent/50 data-[current=true]:border-l-teal-400 data-[current=true]:bg-accent dark:border-l-zinc-900 dark:data-[current=true]:border-l-teal-400"
+            className="flex items-center gap-3 border-b border-l-4 border-l-zinc-100 px-4 py-2.5 hover:bg-accent/50 data-[current=true]:border-l-teal-400 data-[current=true]:bg-accent dark:border-l-zinc-900 dark:data-[current=true]:border-l-teal-400"
           >
             {webhookLog.status === 'SUCCESS' && (
               <span className="size-2 shrink-0 rounded-full bg-teal-400" />
@@ -30,20 +30,11 @@ export async function WebhookLogsList() {
               <span className="size-2 shrink-0 rounded-full bg-amber-400" />
             )}
 
-            <Badge
-              variant="secondary"
-              className="w-12 justify-center border border-zinc-400 tabular-nums dark:border-zinc-700"
-            >
+            <span className="w-10 text-center text-xs font-medium tabular-nums">
               {webhookLog.httpCode ?? '-'}
-            </Badge>
-            <Badge
-              variant="secondary"
-              className="justify-center border border-zinc-400 tabular-nums dark:border-zinc-700"
-            >
-              {(webhookLog.trigger as string) ?? '-'}
-            </Badge>
+            </span>
 
-            <div className="flex items-baseline gap-2">
+            <div className="flex flex-1 items-baseline gap-2">
               <span className="font-mono text-sm font-semibold">
                 {webhookLog.httpMethod}
               </span>
@@ -51,8 +42,12 @@ export async function WebhookLogsList() {
                 {webhookUrl.hostname.concat(webhookUrl.pathname)}
               </span>
             </div>
-            <time className="ml-auto whitespace-nowrap text-sm text-muted-foreground">
-              {dayjs(webhookLog.createdAt).fromNow()}
+
+            <Badge variant="outline">
+              {(webhookLog.trigger as string) ?? '-'}
+            </Badge>
+            <time className="ml-auto whitespace-nowrap text-xs text-muted-foreground">
+              {dayjs(webhookLog.createdAt).fromNow(true)}
             </time>
           </NavLink>
         )