chore: run formatter

unkeyed · Jan 10, 2025 · 6a23f19 · 6a23f19
1 parent fd61aff
commit 6a23f19
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 109 deletions.
diff --git a/apps/dashboard/app/(app)/logs-v2/components/charts/index.tsx b/apps/dashboard/app/(app)/logs-v2/components/charts/index.tsx
@@ -85,17 +85,9 @@ export function LogsChart({
           </div>
         ))}
       </div>
-      <ResponsiveContainer
-        width="100%"
-        height={50}
-        className="border-b border-gray-4"
-      >
+      <ResponsiveContainer width="100%" height={50} className="border-b border-gray-4">
         <ChartContainer config={chartConfig}>
-          <BarChart
-            data={timeseries}
-            barGap={2}
-            margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
-          >
+          <BarChart data={timeseries} barGap={2} margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
             <YAxis domain={[0, (dataMax: number) => dataMax * 1.5]} hide />
             <ChartTooltip
               position={{ y: 50 }}
@@ -126,9 +118,7 @@ export function LogsChart({
                               <span className="capitalize text-accent-9 text-xs w-[2ch] inline-block">
                                 All
                               </span>
-                              <span className="capitalize text-accent-12 text-xs">
-                                Total
-                              </span>
+                              <span className="capitalize text-accent-12 text-xs">Total</span>
                             </div>
                             <div className="ml-auto">
                               <span className="font-mono tabular-nums text-accent-12">
@@ -141,8 +131,7 @@ export function LogsChart({
                     }
                     className="rounded-lg shadow-lg border border-gray-4"
                     labelFormatter={(_, tooltipPayload) => {
-                      const originalTimestamp =
-                        tooltipPayload[0]?.payload?.originalTimestamp;
+                      const originalTimestamp = tooltipPayload[0]?.payload?.originalTimestamp;
                       return originalTimestamp ? (
                         <div>
                           <span className="font-mono text-accent-9 text-xs px-4">
@@ -158,12 +147,7 @@ export function LogsChart({
               }}
             />
             {["success", "error", "warning"].map((key) => (
-              <Bar
-                key={key}
-                dataKey={key}
-                stackId="a"
-                fill={`var(--color-${key})`}
-              />
+              <Bar key={key} dataKey={key} stackId="a" fill={`var(--color-${key})`} />
             ))}
           </BarChart>
         </ChartContainer>

diff --git a/.../(app)/logs-v2/components/controls/components/logs-filters/components/filters-popover.tsx b/.../(app)/logs-v2/components/controls/components/logs-filters/components/filters-popover.tsx
@@ -1,4 +1,5 @@
 import { useKeyboardShortcut } from "@/app/(app)/logs-v2/hooks/use-keyboard-shortcut";
+import { KeyboardButton } from "@/components/keyboard-button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { CaretRight } from "@unkey/icons";
 import { Button } from "@unkey/ui";
@@ -64,14 +65,7 @@ const PopoverHeader = () => {
   return (
     <div className="flex w-full justify-between items-center px-2 py-1">
       <span className="text-gray-9 text-[13px]">Filters...</span>
-      <Button
-        variant="ghost"
-        size="icon"
-        tabIndex={-1}
-        className="text-xs h-5 px-1.5 min-w-[24px] rounded bg-gray-3 text-gray-9 border-gray-8 border"
-      >
-        F
-      </Button>
+      <KeyboardButton shortcut="F" />
     </div>
   );
 };
@@ -98,18 +92,7 @@ export const FilterItem = ({ label, shortcut, component }: FilterItemConfig) =>
             aria-haspopup="true"
             title={`Press '⌘${shortcut?.toUpperCase()}' to toggle ${label} filters`}
           >
-            {shortcut && (
-              <Button
-                variant="ghost"
-                tabIndex={-1}
-                className="h-5 px-1.5 min-w-[24px] rounded bg-gray-3 text-gray-9 border-gray-8 border text-xs"
-              >
-                <div>
-                  ⌘<span className="font-mono">{shortcut.toUpperCase()}</span>
-                </div>
-              </Button>
-            )}
-
+            {shortcut && <KeyboardButton shortcut={shortcut} modifierKey="⌘" />}
             <span className="text-[13px] text-accent-12 font-medium">{label}</span>
           </div>
           <div className="flex items-center gap-1.5">

diff --git a/...p/(app)/logs-v2/components/controls/components/logs-filters/components/methods-filter.tsx b/...p/(app)/logs-v2/components/controls/components/logs-filters/components/methods-filter.tsx
@@ -72,10 +72,7 @@ export const MethodsFilter = () => {
           <span className="text-xs text-accent-12 ml-2">Select All</span>
         </label>
         {checkboxes.map((checkbox, index) => (
-          <label
-            key={checkbox.id}
-            className="flex gap-4 items-center py-1 cursor-pointer"
-          >
+          <label key={checkbox.id} className="flex gap-4 items-center py-1 cursor-pointer">
             <Checkbox
               checked={checkbox.checked}
               className="size-[14px] rounded border-gray-4 [&_svg]:size-3"

diff --git a/...app/(app)/logs-v2/components/controls/components/logs-filters/components/paths-filter.tsx b/...app/(app)/logs-v2/components/controls/components/logs-filters/components/paths-filter.tsx
@@ -93,8 +93,7 @@ export const PathsFilter = () => {
 
   const handleScroll = useCallback(() => {
     if (scrollContainerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } =
-        scrollContainerRef.current;
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
       const isBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
       setIsAtBottom(isBottom);
     }
@@ -150,18 +149,13 @@ export const PathsFilter = () => {
           className="flex flex-col gap-2 font-mono px-2 pb-2 max-h-64 overflow-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
         >
           {checkboxes.map((checkbox, index) => (
-            <label
-              key={checkbox.id}
-              className="flex gap-4 items-center py-1 cursor-pointer"
-            >
+            <label key={checkbox.id} className="flex gap-4 items-center py-1 cursor-pointer">
               <Checkbox
                 checked={checkbox.checked}
                 className="size-[14px] rounded border-gray-4 [&_svg]:size-3"
                 onClick={() => handleCheckboxChange(index)}
               />
-              <div className="text-accent-12 text-xs truncate">
-                {checkbox.path}
-              </div>
+              <div className="text-accent-12 text-xs truncate">{checkbox.path}</div>
             </label>
           ))}
         </div>

diff --git a/...pp/(app)/logs-v2/components/controls/components/logs-filters/components/status-filter.tsx b/...pp/(app)/logs-v2/components/controls/components/logs-filters/components/status-filter.tsx
@@ -1,6 +1,5 @@
 import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@unkey/ui";
-import { CheckIcon } from "lucide-react";
 import { useState } from "react";
 
 interface CheckboxOption {
@@ -73,10 +72,7 @@ export const StatusFilter = () => {
         </label>
 
         {checkboxes.map((checkbox, index) => (
-          <label
-            key={checkbox.id}
-            className="flex gap-4 items-center py-1 cursor-pointer"
-          >
+          <label key={checkbox.id} className="flex gap-4 items-center py-1 cursor-pointer">
             <Checkbox
               id={`checkbox-${checkbox.id}`}
               checked={checkbox.checked}

diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-footer.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/log-details/components/log-footer.tsx
@@ -1,15 +1,11 @@
 "use client";
 import { RED_STATES, YELLOW_STATES } from "@/app/(app)/logs-v2/constants";
-import {
-  extractResponseField,
-  getRequestHeader,
-} from "@/app/(app)/logs-v2/utils";
+import { extractResponseField, getRequestHeader } from "@/app/(app)/logs-v2/utils";
+import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import type { Log } from "@unkey/clickhouse/src/logs";
-import { format } from "date-fns";
 import { RequestResponseDetails } from "./request-response-details";
-import { TimestampInfo } from "@/components/timestamp-info";
 
 type Props = {
   log: Log;
@@ -23,10 +19,7 @@ export const LogFooter = ({ log }: Props) => {
         {
           label: "Time",
           description: (content) => (
-            <TimestampInfo
-              value={content}
-              className="underline decoration-dotted"
-            />
+            <TimestampInfo value={content} className="underline decoration-dotted" />
           ),
           content: log.time,
           tooltipContent: "Copy Time",
@@ -35,36 +28,28 @@ export const LogFooter = ({ log }: Props) => {
         },
         {
           label: "Host",
-          description: (content) => (
-            <span className="text-xs font-mono">{content}</span>
-          ),
+          description: (content) => <span className="text-xs font-mono">{content}</span>,
           content: log.host,
           tooltipContent: "Copy Host",
           tooltipSuccessMessage: "Host copied to clipboard",
         },
         {
           label: "Request Path",
-          description: (content) => (
-            <span className="text-xs font-mono">{content}</span>
-          ),
+          description: (content) => <span className="text-xs 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-xs font-mono">{content}</span>
-          ),
+          description: (content) => <span className="text-xs 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-xs font-mono">{content}</span>
-          ),
+          description: (content) => <span className="text-xs font-mono">{content}</span>,
           content: getRequestHeader(log, "user-agent") ?? "",
           tooltipContent: "Copy Request User Agent",
           tooltipSuccessMessage: "Request user agent copied to clipboard",
@@ -85,7 +70,7 @@ export const LogFooter = ({ log }: Props) => {
                     "text-red-11 bg-red-3 hover:bg-red-3 font-medium":
                       RED_STATES.includes(contentCopy),
                   },
-                  "uppercase"
+                  "uppercase",
                 )}
               >
                 {content}

diff --git a/apps/dashboard/app/(app)/logs-v2/components/table/logs-table.tsx b/apps/dashboard/app/(app)/logs-v2/components/table/logs-table.tsx
@@ -106,10 +106,11 @@ export const LogsTable = ({ onLogSelect, selectedLog }: Props) => {
       selectedLog && {
         "opacity-50 z-0": !isSelected,
         "opacity-100 z-10": isSelected,
-      }
+      },
     );
   };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: it's okay
   const columns: Column<Log>[] = useMemo(
     () => [
       {
@@ -126,16 +127,14 @@ export const LogsTable = ({ onLogSelect, selectedLog }: Props) => {
                 log.response_status >= 400 &&
                   log.response_status < 500 &&
                   WARNING_ICON_STYLES.warning,
-                log.response_status >= 500 && WARNING_ICON_STYLES.error
+                log.response_status >= 500 && WARNING_ICON_STYLES.error,
               )}
             />
             <TimestampInfo
               value={log.time}
               className={cn(
                 "font-mono group-hover:underline decoration-dotted",
-                selectedLog &&
-                  selectedLog.request_id != log.request_id &&
-                  "pointer-events-none"
+                selectedLog && selectedLog.request_id !== log.request_id && "pointer-events-none",
               )}
             />
           </div>
@@ -152,7 +151,7 @@ export const LogsTable = ({ onLogSelect, selectedLog }: Props) => {
             <Badge
               className={cn(
                 "uppercase px-[6px] rounded-md font-mono",
-                isSelected ? style.badge.selected : style.badge.default
+                isSelected ? style.badge.selected : style.badge.default,
               )}
             >
               {log.response_status}
@@ -167,12 +166,7 @@ export const LogsTable = ({ onLogSelect, selectedLog }: Props) => {
         render: (log) => {
           const isSelected = selectedLog?.request_id === log.request_id;
           return (
-            <Badge
-              className={cn(
-                METHOD_BADGE.base,
-                isSelected && METHOD_BADGE.selected
-              )}
-            >
+            <Badge className={cn(METHOD_BADGE.base, isSelected && METHOD_BADGE.selected)}>
               {log.method}
             </Badge>
           );
@@ -183,21 +177,17 @@ export const LogsTable = ({ onLogSelect, selectedLog }: Props) => {
         header: "Path",
         width: "15%",
         render: (log) => (
-          <div className="flex items-center gap-2 font-mono truncate">
-            {log.path}
-          </div>
+          <div className="flex items-center gap-2 font-mono truncate">{log.path}</div>
         ),
       },
       {
         key: "response",
         header: "Response Body",
         width: "1fr",
-        render: (log) => (
-          <span className="truncate font-mono">{log.response_body}</span>
-        ),
+        render: (log) => <span className="truncate font-mono">{log.response_body}</span>,
       },
     ],
-    [selectedLog?.request_id]
+    [selectedLog?.request_id],
   );
 
   return (

diff --git a/apps/dashboard/components/keyboard-button.tsx b/apps/dashboard/components/keyboard-button.tsx
@@ -0,0 +1,30 @@
+import { Button } from "@unkey/ui";
+import type { ComponentProps } from "react";
+
+type ModifierKey = "⌘" | "⇧" | "⌃" | "⌥";
+
+interface KeyboardButtonProps extends ComponentProps<typeof Button> {
+  shortcut: string;
+  modifierKey?: ModifierKey | null;
+}
+
+export const KeyboardButton = ({
+  shortcut,
+  modifierKey,
+  className = "",
+  ...props
+}: KeyboardButtonProps) => {
+  return (
+    <Button
+      variant="ghost"
+      tabIndex={-1}
+      className={`h-5 px-1.5 min-w-[24px] rounded bg-gray-3 text-gray-9 dark:text-gray-10 border-gray-8 dark:border-gray-9 border text-xs ${className}`}
+      {...props}
+    >
+      <div>
+        {modifierKey}
+        {<span className="font-mono">{shortcut.toUpperCase()}</span>}
+      </div>
+    </Button>
+  );
+};
diff --git a/apps/dashboard/components/timestamp-info.tsx b/apps/dashboard/components/timestamp-info.tsx
@@ -1,11 +1,7 @@
 //https://github.com/supabase/supabase/blob/master/packages/ui-patterns/TimestampInfo/index.tsx
 "use client";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { format, fromUnixTime } from "date-fns";
 import ms from "ms";
@@ -86,9 +82,7 @@ export const TimestampInfo = ({
       >
         <span className="w-32 text-left truncate text-accent-9">{label}</span>
         <span
-          className={`ml-2 text-xs text-accent-12 ${
-            copied ? "text-success-11" : "capitalize"
-          }`}
+          className={`ml-2 text-xs text-accent-12 ${copied ? "text-success-11" : "capitalize"}`}
         >
           {copied ? "Copied!" : value}
         </span>