refactor(dashboard): lint

littlehorse-enterprises · Dec 18, 2024 · e6a0aa4 · e6a0aa4
1 parent f987030
commit e6a0aa4
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 102 deletions.
diff --git a/dashboard/src/app/[tenantId]/(diagram)/wfRun/[...ids]/components/Variables.tsx b/dashboard/src/app/[tenantId]/(diagram)/wfRun/[...ids]/components/Variables.tsx
@@ -33,7 +33,9 @@ export const Variables: FC<VariablesProps> = ({ variableDefs, variables }) => {
           <span className="truncate">
             <OverflowText
               className="max-w-64"
-              text={getVariableValue(variables.find(v => v.id?.name === variable.varDef?.name)?.value)?.toString() ?? ''}
+              text={
+                getVariableValue(variables.find(v => v.id?.name === variable.varDef?.name)?.value)?.toString() ?? ''
+              }
             />
           </span>
         </div>

diff --git a/dashboard/src/app/[tenantId]/components/CopyButton.tsx b/dashboard/src/app/[tenantId]/components/CopyButton.tsx
@@ -5,29 +5,25 @@ import { Check, Copy } from 'lucide-react'
 import { cn } from '@/components/utils'
 
 interface CopyButtonProps {
-    value: string
-    className?: string
+  value: string
+  className?: string
 }
 
 export const CopyButton: FC<CopyButtonProps> = ({ value, className }) => {
-    const [copied, setCopied] = useState(false)
+  const [copied, setCopied] = useState(false)
 
-    return (
-        <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => {
-                navigator.clipboard.writeText(value)
-                setCopied(true)
-                setTimeout(() => setCopied(false), 1000)
-            }}
-            className={cn(className)}
-        >
-            {copied ? (
-                <Check className="h-4 w-4 text-green-500" />
-            ) : (
-                <Copy className="h-4 w-4" />
-            )}
-        </Button>
-    )
-} 
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => {
+        navigator.clipboard.writeText(value)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 1000)
+      }}
+      className={cn(className)}
+    >
+      {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+    </Button>
+  )
+}
diff --git a/dashboard/src/app/[tenantId]/components/OverflowText.tsx b/dashboard/src/app/[tenantId]/components/OverflowText.tsx
@@ -3,71 +3,58 @@ import { FC, useEffect, useRef, useState } from 'react'
 import { cn } from '@/components/utils'
 import { Button } from '@/components/ui/button'
 import { ChevronRight } from 'lucide-react'
-import {
-    Dialog,
-    DialogContent,
-    DialogTrigger,
-} from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import { CopyButton } from './CopyButton'
 import { tryFormatAsJson } from '@/app/utils/tryFormatAsJson'
 
 type OverflowTextProps = {
-    text: string
-    className?: string
+  text: string
+  className?: string
 }
 
-
-
 export const OverflowText: FC<OverflowTextProps> = ({ text, className }) => {
-    const textRef = useRef<HTMLDivElement>(null)
-    const [isOverflowing, setIsOverflowing] = useState(false)
+  const textRef = useRef<HTMLDivElement>(null)
+  const [isOverflowing, setIsOverflowing] = useState(false)
 
-    useEffect(() => {
-        const element = textRef.current
-        if (element) {
-            setIsOverflowing(element.scrollWidth > element.clientWidth)
-        }
-    }, [text])
+  useEffect(() => {
+    const element = textRef.current
+    if (element) {
+      setIsOverflowing(element.scrollWidth > element.clientWidth)
+    }
+  }, [text])
 
-    const formattedText = tryFormatAsJson(text)
+  const formattedText = tryFormatAsJson(text)
 
-    if (isOverflowing) {
-        return (
-            <Dialog>
-                <DialogTrigger asChild>
-                    <Button
-                        variant="ghost"
-                        className={cn("w-full truncate flex justify-between items-center p-1 h-auto font-normal hover:no-underline", className)}
-                    >
-                        <span className="truncate">
-                            {formattedText}
-                        </span>
-                        <div className="flex items-center gap-1 flex-shrink-0 text-xs text-muted-foreground">
-                            View More
-                            <ChevronRight className="h-4 w-4 opacity-50" />
-                        </div>
-                    </Button>
-                </DialogTrigger>
-                <DialogContent className="max-w-2xl overflow-visible gap-2">
-                    <CopyButton
-                        value={formattedText}
-                        className="h-8 w-8 rounded-full"
-                    />
-                    <div className="h-96 overflow-auto bg-gray-100 rounded-lg">
-                        <div className="max-w-full break-words whitespace-pre-wrap p-4">
-                            {formattedText}
-                        </div>
-                    </div>
-                </DialogContent>
-            </Dialog>
-        )
-    }
+  if (isOverflowing) {
     return (
-        <div
-            ref={textRef}
-            className={className}
-        >
-            {formattedText}
-        </div >
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button
+            variant="ghost"
+            className={cn(
+              'flex h-auto w-full items-center justify-between truncate p-1 font-normal hover:no-underline',
+              className
+            )}
+          >
+            <span className="truncate">{formattedText}</span>
+            <div className="flex flex-shrink-0 items-center gap-1 text-xs text-muted-foreground">
+              View More
+              <ChevronRight className="h-4 w-4 opacity-50" />
+            </div>
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-2xl gap-2 overflow-visible">
+          <CopyButton value={formattedText} className="h-8 w-8 rounded-full" />
+          <div className="h-96 overflow-auto rounded-lg bg-gray-100">
+            <div className="max-w-full whitespace-pre-wrap break-words p-4">{formattedText}</div>
+          </div>
+        </DialogContent>
+      </Dialog>
     )
-}
+  }
+  return (
+    <div ref={textRef} className={className}>
+      {formattedText}
+    </div>
+  )
+}
diff --git a/dashboard/src/components/ui/scroll-area.tsx b/dashboard/src/components/ui/scroll-area.tsx
@@ -1,22 +1,16 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
 
-import { cn } from "@/components/utils"
+import { cn } from '@/components/utils'
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
+  <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
@@ -26,16 +20,14 @@ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
+>(({ className, orientation = 'vertical', ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
       className
     )}
     {...props}

diff --git a/dashboard/src/components/ui/tooltip.tsx b/dashboard/src/components/ui/tooltip.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
-import { cn } from "@/components/utils"
+import { cn } from '@/components/utils'
 
 const TooltipProvider = TooltipPrimitive.Provider
 
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}