From 02106a8fb3c82028b43420b971900babc85411dc Mon Sep 17 00:00:00 2001
From: Duyet Le <me@duyet.net>
Date: Wed, 25 Sep 2024 12:14:42 +0700
Subject: [PATCH] chore: CodeDialog format support custom className

---
 .../data-table/cells/code-dialog-format.tsx   | 27 ++++++++++++++-----
 lib/clickhouse-query.ts                       |  4 +--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/components/data-table/cells/code-dialog-format.tsx b/components/data-table/cells/code-dialog-format.tsx
index fd174ca7..b8a425c0 100644
--- a/components/data-table/cells/code-dialog-format.tsx
+++ b/components/data-table/cells/code-dialog-format.tsx
@@ -5,15 +5,18 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog'
 import { formatQuery } from '@/lib/format-readable'
+import { cn } from '@/lib/utils'
 import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog'
 import { SizeIcon } from '@radix-ui/react-icons'
 
 export interface CodeDialogOptions {
   dialog_title?: string
   dialog_description?: string
+  trigger_classname?: string
   max_truncate?: number
   hide_query_comment?: boolean
   json?: boolean
+  dialog_classname?: string
 }
 
 interface CodeDialogFormatProps {
@@ -54,13 +57,25 @@ export function CodeDialogFormat({ value, options }: CodeDialogFormatProps) {
 
   return (
     <Dialog>
-      <DialogTrigger className="flex flex-row items-center gap-1">
-        <code className="truncate break-words font-normal" role="shorten-code">
-          {formatted}
-        </code>
-        <SizeIcon className="size-4" role="open-dialog" />
+      <DialogTrigger asChild>
+        <div
+          className={cn(
+            'flex max-w-fit cursor-pointer flex-row items-center gap-1'
+          )}
+        >
+          <code
+            className={cn(
+              'break-words font-normal',
+              options?.trigger_classname
+            )}
+            role="shorten-code"
+          >
+            {formatted}
+          </code>
+          <SizeIcon className="size-4 flex-none" role="open-dialog" />
+        </div>
       </DialogTrigger>
-      <DialogContent className="max-w-fit">
+      <DialogContent className={cn('max-w-fit', options?.dialog_classname)}>
         {(options?.dialog_title || options?.dialog_description) && (
           <DialogHeader>
             <DialogTitle>{options.dialog_title}</DialogTitle>
diff --git a/lib/clickhouse-query.ts b/lib/clickhouse-query.ts
index d1d640dc..0ce48845 100644
--- a/lib/clickhouse-query.ts
+++ b/lib/clickhouse-query.ts
@@ -10,8 +10,8 @@ export function applyInterval(
     interval === 'toStartOfWeek' ||
     interval === 'toStartOfDay'
   ) {
-    return `toDate(${interval}(${column})) as ${alias || column}`
+    return `toDate(${interval}(${column})) AS ${alias || column}`
   }
 
-  return `${interval}(${column}) as ${alias || column}`
+  return `${interval}(${column}) AS ${alias || column}`
 }