From 42e481d049762212f397c6e868d1479c430da5b0 Mon Sep 17 00:00:00 2001
From: ogzhanolguncu <ogzhan11@gmail.com>
Date: Sat, 28 Sep 2024 17:21:20 +0300
Subject: [PATCH] refactor: log details section

---
 .../logs/log-details/components/log-body.tsx  |  46 +++
 .../log-details/components/log-footer.tsx     | 132 +++++++++
 .../log-details/components/log-header.tsx     |  40 +++
 .../components/request-response-details.tsx   |  74 +++++
 .../app/(app)/logs/log-details/index.tsx      | 267 +-----------------
 apps/dashboard/app/(app)/logs/page.tsx        |   2 +-
 6 files changed, 303 insertions(+), 258 deletions(-)
 create mode 100644 apps/dashboard/app/(app)/logs/log-details/components/log-body.tsx
 create mode 100644 apps/dashboard/app/(app)/logs/log-details/components/log-footer.tsx
 create mode 100644 apps/dashboard/app/(app)/logs/log-details/components/log-header.tsx
 create mode 100644 apps/dashboard/app/(app)/logs/log-details/components/request-response-details.tsx

diff --git a/apps/dashboard/app/(app)/logs/log-details/components/log-body.tsx b/apps/dashboard/app/(app)/logs/log-details/components/log-body.tsx
new file mode 100644
index 0000000000..2e6a5c875d
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/log-details/components/log-body.tsx
@@ -0,0 +1,46 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { toast } from "@/components/ui/toaster";
+import { Copy } from "lucide-react";
+import { highlighter } from "..";
+import type { Log } from "../../data";
+import { getObjectsFromLogs } from "../../utils";
+
+type Props = {
+  log: Log;
+};
+
+export const LogBody = ({ log }: Props) => {
+  return (
+    <div className="p-2">
+      <Card className="rounded-[5px] relative">
+        <CardContent
+          className="whitespace-pre-wrap text-[12px]"
+          dangerouslySetInnerHTML={{
+            __html: highlighter.codeToHtml(getObjectsFromLogs(log), {
+              lang: "json",
+              themes: {
+                dark: "github-dark",
+                light: "github-light",
+              },
+              mergeWhitespaces: true,
+            }),
+          }}
+        />
+        <div className="absolute bottom-2 right-3">
+          <Button
+            size="block"
+            variant="primary"
+            className="bg-background border-border text-current"
+            onClick={() => {
+              navigator.clipboard.writeText(getObjectsFromLogs(log));
+              toast.success("Copied to clipboard");
+            }}
+          >
+            <Copy className="w-4 h-4" />
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/log-details/components/log-footer.tsx b/apps/dashboard/app/(app)/logs/log-details/components/log-footer.tsx
new file mode 100644
index 0000000000..2617bec40e
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/log-details/components/log-footer.tsx
@@ -0,0 +1,132 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { highlighter } from "..";
+import { RED_STATES, YELLOW_STATES } from "../../constants";
+import type { Log } from "../../data";
+import { getRequestHeader, getResponseBodyFieldOutcome } from "../../utils";
+import { RequestResponseDetails } from "./request-response-details";
+
+type Props = {
+  log: Log;
+};
+export const LogFooter = ({ log }: Props) => {
+  return (
+    <RequestResponseDetails
+      className="pl-3"
+      fields={[
+        {
+          label: "Time",
+          description: (content) => (
+            <span className="text-[13px] font-mono">{content}</span>
+          ),
+          content: format(log.time, "MMM dd HH:mm:ss.SS"),
+          tooltipContent: "Copy Time",
+          tooltipSuccessMessage: "Time copied to clipboard",
+        },
+        {
+          label: "Host",
+          description: (content) => (
+            <span className="text-[13px] font-mono">{content}</span>
+          ),
+          content: log.host,
+          tooltipContent: "Copy Host",
+          tooltipSuccessMessage: "Host copied to clipboard",
+        },
+        {
+          label: "Request Path",
+          description: (content) => (
+            <span className="text-[13px] font-mono">{content}</span>
+          ),
+          content: log.path,
+          tooltipContent: "Copy Request Path",
+          tooltipSuccessMessage: "Request path copied to clipboard",
+        },
+        {
+          label: "Request ID",
+          description: (content) => (
+            <span className="text-[13px] font-mono">{content}</span>
+          ),
+          content: log.request_id,
+          tooltipContent: "Copy Request ID",
+          tooltipSuccessMessage: "Request ID copied to clipboard",
+        },
+        {
+          label: "Request User Agent",
+          description: (content) => (
+            <span className="text-[13px] font-mono">{content}</span>
+          ),
+          content: getRequestHeader(log, "user-agent") ?? "",
+          tooltipContent: "Copy Request User Agent",
+          tooltipSuccessMessage: "Request user agent copied to clipboard",
+        },
+        {
+          label: "Outcome",
+          description: (content) => {
+            let contentCopy = content;
+            if (contentCopy == null) {
+              contentCopy = "VALID";
+            }
+            return (
+              <Badge
+                className={cn(
+                  {
+                    "bg-amber-2 text-amber-11  hover:bg-amber-3":
+                      YELLOW_STATES.includes(contentCopy),
+                    "bg-red-2 text-red-11  hover:bg-red-3":
+                      RED_STATES.includes(contentCopy),
+                  },
+                  "uppercase"
+                )}
+              >
+                {content}
+              </Badge>
+            );
+          },
+          content: getResponseBodyFieldOutcome(log, "code"),
+          tooltipContent: "Copy Outcome",
+          tooltipSuccessMessage: "Outcome copied to clipboard",
+        },
+        {
+          label: "Permissions",
+          description: (content) => (
+            <span className="text-[13px] font-mono flex gap-1">
+              {content.map((permission) => (
+                <Badge key={permission} variant="secondary">
+                  {permission}
+                </Badge>
+              ))}
+            </span>
+          ),
+          content: getResponseBodyFieldOutcome(log, "permissions"),
+          tooltipContent: "Copy Permissions",
+          tooltipSuccessMessage: "Permissions copied to clipboard",
+        },
+        {
+          label: "Meta",
+          description: (content) => (
+            <Card className="rounded-[5px]">
+              <CardContent
+                className="whitespace-pre-wrap text-[12px] w-[300px]"
+                dangerouslySetInnerHTML={{
+                  __html: highlighter.codeToHtml(JSON.stringify(content), {
+                    lang: "json",
+                    themes: {
+                      dark: "github-dark",
+                      light: "github-light",
+                    },
+                    mergeWhitespaces: true,
+                  }),
+                }}
+              />
+            </Card>
+          ),
+          content: getResponseBodyFieldOutcome(log, "meta"),
+          tooltipContent: "Copy Meta",
+          tooltipSuccessMessage: "Meta copied to clipboard",
+        },
+      ]}
+    />
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/log-details/components/log-header.tsx b/apps/dashboard/app/(app)/logs/log-details/components/log-header.tsx
new file mode 100644
index 0000000000..41df38bb13
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/log-details/components/log-header.tsx
@@ -0,0 +1,40 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { X } from "lucide-react";
+import type { Log } from "../../data";
+
+type Props = {
+  log: Log;
+  onClose: () => void;
+};
+export const LogHeader = ({ onClose, log }: Props) => {
+  return (
+    <div className="border-b-[1px] px-3 py-4 flex justify-between border-border items-center">
+      <div className="flex gap-2">
+        <Badge variant="secondary" className="bg-transparent">
+          POST
+        </Badge>
+        <p className="text-[13px] text-content/65">{log.path}</p>
+      </div>
+
+      <div className="flex gap-1 items-center">
+        <Badge
+          className={cn(
+            "bg-background border border-solid border-border text-current hover:bg-transparent",
+            log.response_status >= 400 && "border-red-6 text-red-11"
+          )}
+        >
+          {log.response_status}
+        </Badge>
+
+        <span className="text-content/65">|</span>
+        <X
+          onClick={onClose}
+          size="22"
+          strokeWidth="1.5"
+          className="text-content/65 cursor-pointer"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/log-details/components/request-response-details.tsx b/apps/dashboard/app/(app)/logs/log-details/components/request-response-details.tsx
new file mode 100644
index 0000000000..cee13e0548
--- /dev/null
+++ b/apps/dashboard/app/(app)/logs/log-details/components/request-response-details.tsx
@@ -0,0 +1,74 @@
+import { toast } from "@/components/ui/toaster";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+type Field<T> = {
+  label: string;
+  description: (content: NonNullable<T>) => ReactNode;
+  content: T | null;
+  tooltipContent: ReactNode;
+  tooltipSuccessMessage: string;
+  className?: string;
+};
+
+type Props<T extends unknown[]> = {
+  fields: { [K in keyof T]: Field<T[K]> };
+  className?: string;
+};
+//This function ensures that content is not nil, and if it's an object or array, it has some content.
+const isNonEmpty = (content: unknown): boolean => {
+  if (Array.isArray(content)) {
+    return content.length > 0;
+  }
+  if (typeof content === "object" && content !== null) {
+    return Object.keys(content).length > 0;
+  }
+  return Boolean(content);
+};
+
+export const RequestResponseDetails = <T extends unknown[]>({
+  fields,
+  className,
+}: Props<T>) => {
+  return (
+    <div className={cn("font-sans", className)}>
+      {fields.map(
+        (field, index) =>
+          isNonEmpty(field.content) && (
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            <TooltipProvider key={index}>
+              <Tooltip>
+                <TooltipTrigger
+                  className={cn(
+                    "flex w-full justify-between border-border border-solid pr-3 py-[10px] items-center",
+                    index !== fields.length - 1 && "border-b",
+                    field.className
+                  )}
+                  onClick={() => {
+                    navigator.clipboard.writeText(
+                      typeof field.content === "object"
+                        ? JSON.stringify(field.content)
+                        : String(field.content)
+                    );
+                    toast.success(field.tooltipSuccessMessage);
+                  }}
+                >
+                  <span className="text-sm text-content/65">{field.label}</span>
+                  {field.description(field.content as NonNullable<T[number]>)}
+                </TooltipTrigger>
+                <TooltipContent side="left">
+                  {field.tooltipContent}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )
+      )}
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/logs/log-details/index.tsx b/apps/dashboard/app/(app)/logs/log-details/index.tsx
index 22eafc5bdd..89cc9cf879 100644
--- a/apps/dashboard/app/(app)/logs/log-details/index.tsx
+++ b/apps/dashboard/app/(app)/logs/log-details/index.tsx
@@ -1,34 +1,14 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { format } from "date-fns";
-import { Copy, X } from "lucide-react";
 import { useState } from "react";
 import { createHighlighter } from "shiki";
-import { toast } from "sonner";
 import { useDebounceCallback } from "usehooks-ts";
-import {
-  DEFAULT_DRAGGABLE_WIDTH,
-  RED_STATES,
-  YELLOW_STATES,
-} from "../constants";
+import { DEFAULT_DRAGGABLE_WIDTH } from "../constants";
 import type { Log } from "../data";
-import {
-  getObjectsFromLogs,
-  getOutcomeIfValid,
-  getRequestHeader,
-  getResponseBodyFieldOutcome,
-} from "../utils";
+import { LogBody } from "./components/log-body";
+import { LogFooter } from "./components/log-footer";
+import { LogHeader } from "./components/log-header";
 import ResizablePanel from "./resizable-panel";
 
-const highlighter = await createHighlighter({
+export const highlighter = await createHighlighter({
   themes: ["github-light", "github-dark"],
   langs: ["json"],
 });
@@ -48,246 +28,19 @@ export const LogDetails = ({ log, onClose }: Props) => {
     return null;
   }
 
-  const outcome = getOutcomeIfValid(log);
-
   return (
     <ResizablePanel
       onResize={debouncedSetPanelWidth}
-      className="fixed top-[245px] right-0 bg-background border-l border-t border-solid font-mono border-border shadow-md"
+      className="fixed top-[245px] right-0 bg-background border-l border-t border-solid font-mono border-border shadow-md overflow-y-auto"
       style={{
         width: `${panelWidth}px`,
         height: "calc(100vh - 245px)",
+        paddingBottom: "1rem",
       }}
     >
-      <div className="border-b-[1px] px-3 py-4 flex justify-between border-border items-center">
-        <div className="flex gap-1">
-          <Badge variant="secondary" className="bg-transparent">
-            POST
-          </Badge>
-          <p className="text-[13px] text-content/65">/api/simple-test</p>
-        </div>
-
-        <div className="flex gap-1 items-center">
-          <Badge className="bg-background border border-solid border-red-6 text-red-11 hover:bg-transparent">
-            400
-          </Badge>
-          <span className="text-content/65">|</span>
-          <X
-            onClick={onClose}
-            size="22"
-            strokeWidth="1.5"
-            className="text-content/65 cursor-pointer"
-          />
-        </div>
-      </div>
-      <div className="p-2">
-        <Card className="rounded-[5px] relative">
-          <CardContent
-            className="whitespace-pre-wrap text-[12px]"
-            dangerouslySetInnerHTML={{
-              __html: highlighter.codeToHtml(getObjectsFromLogs(log), {
-                lang: "json",
-                themes: {
-                  dark: "github-dark",
-                  light: "github-light",
-                },
-                mergeWhitespaces: true,
-              }),
-            }}
-          />
-          <div className="absolute bottom-2 right-3">
-            <Button
-              size="block"
-              variant="primary"
-              className="bg-background border-border text-current"
-              onClick={() => {
-                navigator.clipboard.writeText(getObjectsFromLogs(log));
-                toast.success("Copied to clipboard");
-              }}
-            >
-              <Copy className="w-4 h-4" />
-            </Button>
-          </div>
-        </Card>
-      </div>
-      <div className="font-sans pl-3">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger
-              className="flex w-full justify-between border-border border-b border-solid pr-3 py-[10px] items-center"
-              onClick={() => {
-                navigator.clipboard.writeText(String(log.time));
-                toast.success("Time copied to clipboard");
-              }}
-            >
-              <span className="text-sm text-content/65">Time</span>
-              <span className="text-[13px] font-mono ">
-                {format(log.time, "MMM dd HH:mm:ss.SS")}
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="left">Copy Time</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger
-              className="flex w-full justify-between border-border border-b border-solid pr-3 py-[10px] items-center"
-              onClick={() => {
-                navigator.clipboard.writeText(String(log.host));
-                toast.success("Host copied to clipboard");
-              }}
-            >
-              <span className="text-sm  text-content/65">Host</span>
-              <span className="text-[13px] font-mono ">{log.host}</span>
-            </TooltipTrigger>
-            <TooltipContent side="left">Copy Host</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger
-              className="flex w-full justify-between border-border border-b border-solid pr-3 py-[10px] items-center"
-              onClick={() => {
-                navigator.clipboard.writeText(log.path);
-                toast.success("Request path copied to clipboard");
-              }}
-            >
-              <span className="text-sm  text-content/65">Request Path</span>
-              <span className="text-[13px] font-mono ">{log.path}</span>
-            </TooltipTrigger>
-            <TooltipContent side="left">Copy Request Path</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger
-              className="flex w-full justify-between border-border border-b border-solid pr-3 py-[10px] items-center"
-              onClick={() => {
-                navigator.clipboard.writeText(log.request_id);
-                toast.success("Request ID copied to clipboard");
-              }}
-            >
-              <span className="text-sm  text-content/65">Request ID</span>
-              <span className="text-[13px] font-mono">{log.request_id}</span>
-            </TooltipTrigger>
-            <TooltipContent side="left">Copy Request ID</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger
-              className="flex w-full justify-between border-border border-b border-solid pr-3 py-[10px] items-center"
-              onClick={() => {
-                navigator.clipboard.writeText(
-                  getRequestHeader(log, "user-agent") ?? ""
-                );
-                toast.success("Request user agent copied to clipboard");
-              }}
-            >
-              <span className="text-sm text-content/65">
-                Request User Agent
-              </span>
-              <span className="text-[13px] font-mono">
-                {log.request_headers.at(-1)}
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="left">Copy Request User Agent</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger
-              className="flex w-full justify-between border-border border-b border-solid pr-3 py-[10px] items-center"
-              onClick={() => {
-                navigator.clipboard.writeText(
-                  JSON.stringify(getResponseBodyFieldOutcome(log, "code"))
-                );
-                toast.success("Request user agent copied to clipboard");
-              }}
-            >
-              <span className="text-sm text-content/65">Outcome</span>
-              <span className="text-[13px] font-mono">
-                <Badge
-                  className={cn({
-                    "bg-amber-2 text-amber-11  hover:bg-amber-3":
-                      YELLOW_STATES.includes(outcome),
-                    "bg-red-2 text-red-11  hover:bg-red-3":
-                      RED_STATES.includes(outcome),
-                  })}
-                >
-                  {getResponseBodyFieldOutcome(log, "code")}
-                </Badge>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="left">Copy Outcome</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger
-              className="flex w-full justify-between border-border border-b border-solid pr-3 py-[10px] items-center"
-              onClick={() => {
-                navigator.clipboard.writeText(
-                  JSON.stringify(
-                    getResponseBodyFieldOutcome(log, "permissions")
-                  )
-                );
-                toast.success("Request user agent copied to clipboard");
-              }}
-            >
-              <span className="text-sm text-content/65">Permissions</span>
-              <span className="text-[13px] font-mono flex gap-1">
-                {(
-                  getResponseBodyFieldOutcome(log, "permissions") as string[]
-                ).map((permission) => (
-                  <Badge variant="secondary">{permission}</Badge>
-                ))}
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="left">Copy Permissions</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger
-              className="flex w-full justify-between pr-3 py-[10px] items-center"
-              onClick={() => {
-                navigator.clipboard.writeText(
-                  JSON.stringify(getResponseBodyFieldOutcome(log, "meta"))
-                );
-                toast.success("Request user agent copied to clipboard");
-              }}
-            >
-              <span className="text-sm text-content/65">Meta</span>
-              <span className="text-[13px] font-mono">
-                <Card className="rounded-[5px]">
-                  <CardContent
-                    className="whitespace-pre-wrap text-[12px] w-[300px]"
-                    dangerouslySetInnerHTML={{
-                      __html: highlighter.codeToHtml(
-                        JSON.stringify(
-                          getResponseBodyFieldOutcome(log, "meta")
-                        ),
-                        {
-                          lang: "json",
-                          themes: {
-                            dark: "github-dark",
-                            light: "github-light",
-                          },
-                          mergeWhitespaces: true,
-                        }
-                      ),
-                    }}
-                  />
-                </Card>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent side="left">Copy Meta</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
+      <LogHeader log={log} onClose={onClose} />
+      <LogBody log={log} />
+      <LogFooter log={log} />
     </ResizablePanel>
   );
 };
diff --git a/apps/dashboard/app/(app)/logs/page.tsx b/apps/dashboard/app/(app)/logs/page.tsx
index 10e6561b6b..6d675a84db 100644
--- a/apps/dashboard/app/(app)/logs/page.tsx
+++ b/apps/dashboard/app/(app)/logs/page.tsx
@@ -83,7 +83,7 @@ export default function Page() {
                 </div>
                 <div className="px-[2px] flex items-center">{log.host}</div>
                 <div className="px-[2px] flex items-center">{log.path}</div>
-                <div className="px-[2px] flex items-center  w-[700px]">
+                <div className="px-[2px] flex items-center  w-[600px]">
                   <span className="truncate">{log.response_body}</span>
                 </div>
               </div>