chore(ui): Fix lint issues

TracecatHQ · Apr 29, 2024 · dcbde4b · dcbde4b
1 parent d4a4558
commit dcbde4b
Show file tree

Hide file tree

Showing 22 changed files with 33 additions and 134 deletions.
diff --git a/frontend/src/app/settings/layout.tsx b/frontend/src/app/settings/layout.tsx
@@ -33,7 +33,7 @@ export default async function SettingsLayout({
   return (
     <div className="no-scrollbar h-screen max-h-screen overflow-auto">
       <Navbar />
-      <div className="container space-y-6 p-10 pb-16 pt-16 md:block">
+      <div className="container space-y-6 p-10 py-16 md:block">
         <div className="space-y-0.5">
           <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
           <p className="text-muted-foreground">

diff --git a/frontend/src/app/workflows/[workflowId]/cases/page.tsx b/frontend/src/app/workflows/[workflowId]/cases/page.tsx
@@ -1,12 +1,6 @@
-"use client"
+import CasesProvider from "@/providers/cases"
 
-import { useEffect, useState } from "react"
-import CasesProvider, { useCasesContext } from "@/providers/cases"
-
-import { getDistributionData } from "@/lib/utils"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import CaseTable from "@/components/cases/table"
-import EventDistributionPlot, { PlotDataType } from "@/components/charts"
 import { AlertNotification } from "@/components/notifications"
 
 export default function CasesPage() {
@@ -26,73 +20,3 @@ export default function CasesPage() {
     </CasesProvider>
   )
 }
-
-function CasesStatsBanner() {
-  // X axis - the category
-  // Y axis - the number of elements
-  const { cases } = useCasesContext()
-  const [statusDistData, setStatusDistData] = useState<PlotDataType[]>([])
-  const [priorityDistData, setPriorityDistData] = useState<PlotDataType[]>([])
-  const [maliceDistData, setMaliceDistData] = useState<PlotDataType[]>([])
-  useEffect(() => {
-    const statuisDistro = getDistributionData(cases, "status")
-    const priorityDistro = getDistributionData(cases, "priority")
-    const maliceDistro = getDistributionData(cases, "malice")
-    setStatusDistData(
-      Object.entries(statuisDistro).map(([key, value]) => ({
-        x: key,
-        y: value,
-      }))
-    )
-    setPriorityDistData(
-      Object.entries(priorityDistro).map(([key, value]) => ({
-        x: key,
-        y: value,
-      }))
-    )
-    setMaliceDistData(
-      Object.entries(maliceDistro).map(([key, value]) => ({
-        x: key,
-        y: value,
-      }))
-    )
-  }, [cases])
-  return (
-    <>
-      <div className="flex-1 space-y-8 pt-6">
-        <div className="grid min-h-36 gap-16 md:grid-cols-3 lg:grid-cols-3">
-          <Card className="flex flex-col">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-semibold">
-                Status Distribution
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="h-full">
-              <EventDistributionPlot data={statusDistData} />
-            </CardContent>
-          </Card>
-          <Card className="flex flex-col">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-semibold">
-                Priority Distribution
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="h-full">
-              <EventDistributionPlot data={priorityDistData} />
-            </CardContent>
-          </Card>
-          <Card className="flex flex-col">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-semibold">
-                Malice Distribution
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="h-full">
-              <EventDistributionPlot data={maliceDistData} />
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/frontend/src/components/cases/columns.tsx b/frontend/src/components/cases/columns.tsx
@@ -194,7 +194,7 @@ export const columns: ColumnDef<Case>[] = [
         <div className="flex space-x-2">
           <span className="max-w-[300px] space-x-1 truncate text-xs text-muted-foreground">
             {caseContextFields.length > 0
-              ? caseContextFields.map(({ key, value }, idx) => (
+              ? caseContextFields.map(({ value }, idx) => (
                   <StatusBadge key={idx}>{value}</StatusBadge>
                 ))
               : "No context tags"}

diff --git a/frontend/src/components/console/control-panel.tsx b/frontend/src/components/console/control-panel.tsx
@@ -26,7 +26,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { ConfirmationDialog } from "@/components/confirmation-dialog"
-import { WorkflowControlsForm } from "@/components/console/console"
+import { type WorkflowControlsForm } from "@/components/console/console"
 import { tileIconMapping } from "@/components/workspace/canvas/action-node"
 import { DELETE_BUTTON_STYLE } from "@/styles/tailwind"
 

diff --git a/frontend/src/components/console/event-feed.tsx b/frontend/src/components/console/event-feed.tsx
@@ -20,7 +20,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { toast } from "@/components/ui/use-toast"
-import { WorkflowControlsForm } from "@/components/console/console"
+import { type WorkflowControlsForm } from "@/components/console/console"
 import { supportedInputTypes } from "@/components/console/control-panel"
 import { EventFeedItem } from "@/components/console/event-feed-item"
 

diff --git a/frontend/src/components/nav/dyn-nav.tsx b/frontend/src/components/nav/dyn-nav.tsx
@@ -8,8 +8,7 @@ import { useParams, usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
 import WorkflowsNav from "@/components/nav/workflows-nav"
 
-interface NavbarProps extends React.HTMLAttributes<HTMLDivElement> {}
-export default function DynamicNavbar(props: NavbarProps) {
+export default function DynamicNavbar() {
   const pathname = usePathname()
   const params = useParams()
   const DynNav = getNavBar(pathname, params)

diff --git a/frontend/src/components/nav/workflows-nav.tsx b/frontend/src/components/nav/workflows-nav.tsx
@@ -11,9 +11,7 @@ import { Switch } from "@/components/ui/switch"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import WorkflowSwitcher from "@/components/nav/workflow-switcher"
 
-interface NavbarProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export default function WorkflowsNavbar(props: NavbarProps) {
+export default function WorkflowsNavbar() {
   const { workflowId, isLoading, isOnline, setIsOnline } = useWorkflowMetadata()
 
   if (isLoading) {

diff --git a/frontend/src/components/new-credential-dialog.tsx b/frontend/src/components/new-credential-dialog.tsx
@@ -163,7 +163,7 @@ export function NewCredentialsDialog({
                 key={inputKey}
                 control={control}
                 name={typedKey}
-                render={({ field }) => (
+                render={() => (
                   <FormItem>
                     <FormLabel className="text-sm">Keys</FormLabel>
                     <div className="flex flex-col space-y-2">

diff --git a/frontend/src/components/table/table.tsx b/frontend/src/components/table/table.tsx
@@ -35,6 +35,7 @@ import { DataTablePagination, DataTableToolbar } from "@/components/table"
 import { DataTableToolbarProps } from "./toolbar"
 
 declare module "@tanstack/react-table" {
+  // @ts-ignore
   interface TableMeta<TData extends RowData> {
     isProcessing: boolean
   }

diff --git a/frontend/src/components/workspace/canvas/action-node.tsx b/frontend/src/components/workspace/canvas/action-node.tsx
@@ -27,7 +27,7 @@ import {
 } from "lucide-react"
 import { Handle, NodeProps, Position, useNodeId, type Node } from "reactflow"
 
-import { ActionType, IntegrationType, NodeType } from "@/types/schemas"
+import { type ActionType } from "@/types/schemas"
 import { cn, copyToClipboard, slugify } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
@@ -224,19 +224,8 @@ export default React.memo(function ActionNode({
         </div>
       </CardHeader>
 
-      <CardContent className="pb-4 pl-5 pr-5 pt-0">
+      <CardContent className="px-5 pb-4 pt-0">
         <div className="flex space-x-4 text-xs text-muted-foreground">
-          {/* <div className="flex items-center">
-            <CircleIcon
-              className={cn(
-                "mr-1 h-3 w-3",
-                status === "online"
-                  ? "fill-green-600 text-green-600"
-                  : "fill-gray-400 text-gray-400"
-              )}
-            />
-            <span className="capitalize">{status}</span>
-          </div> */}
           <div className="flex items-center">
             <CircleIcon
               className={cn(

diff --git a/frontend/src/components/workspace/canvas/integration-node.tsx b/frontend/src/components/workspace/canvas/integration-node.tsx
@@ -47,7 +47,7 @@ export default React.memo(function IntegrationNode({
   const id = useNodeId()
   const { workflowId, getNode, reactFlow } = useWorkflowBuilder()
   const { toast } = useToast()
-  const [_, platform, name] = type.split(".")
+  const [, platform, name] = type.split(".")
   const Icon = Integrations[platform as IntegrationPlatform]
   const isConfiguredMessage = isConfigured ? "ready" : "missing inputs"
 
@@ -132,7 +132,7 @@ export default React.memo(function IntegrationNode({
         </div>
       </CardHeader>
 
-      <CardContent className="pb-4 pl-5 pr-5 pt-0">
+      <CardContent className="px-5 pb-4 pt-0">
         <div className="flex space-x-4 text-xs text-muted-foreground">
           <div className="flex items-center">
             <CircleIcon

diff --git a/frontend/src/components/workspace/catalog/action-catalog.tsx b/frontend/src/components/workspace/catalog/action-catalog.tsx
@@ -94,7 +94,7 @@ export function ActionCatalog({ tiles, isCollapsed }: ActionTilesProps) {
   return (
     <div
       data-collapsed={isCollapsed}
-      className="group flex flex-col gap-4 p-2 py-2 data-[collapsed=true]:py-2"
+      className="group flex flex-col gap-4 p-2 data-[collapsed=true]:py-2"
     >
       <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
         {tiles.map((tile, index) => {

diff --git a/frontend/src/components/workspace/panel/action/form.tsx b/frontend/src/components/workspace/panel/action/form.tsx
@@ -8,7 +8,7 @@ import SyntaxHighlighter from "react-syntax-highlighter"
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
 import { z } from "zod"
 
-import { Action, ActionType } from "@/types/schemas"
+import { Action, type ActionType } from "@/types/schemas"
 import { getActionById, updateAction } from "@/lib/flow"
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
@@ -72,7 +72,7 @@ export function ActionForm({
   } = useQuery<Action, Error>({
     queryKey: ["selected_action", actionId, workflowId],
     queryFn: async ({ queryKey }) => {
-      const [_, actionId, workflowId] = queryKey as [string, string, string]
+      const [, actionId, workflowId] = queryKey as [string, string, string]
       return await getActionById(actionId, workflowId)
     },
   })

diff --git a/frontend/src/components/workspace/panel/common.tsx b/frontend/src/components/workspace/panel/common.tsx
@@ -4,7 +4,6 @@ import { PlusCircle, Trash2Icon } from "lucide-react"
 import {
   ArrayPath,
   FieldPath,
-  FieldPathValue,
   FieldValues,
   PathValue,
   useFieldArray,
@@ -65,7 +64,6 @@ export function processInputs(
 }
 
 type TDefaultValue<T extends FieldValues> = PathValue<T, FieldPath<T>>
-type TValue<T extends FieldValues> = FieldPathValue<T, FieldPath<T>>
 
 export function ActionFormLabel<T extends FieldValues>({
   inputKey,
@@ -239,7 +237,7 @@ export function ActionFormArray<T extends FieldValues>({
       key={inputKey}
       control={control}
       name={typedKey}
-      render={({ field }) => (
+      render={() => (
         <FormItem>
           <ActionFormLabel inputKey={inputKey} inputOption={inputOption} />
           <div className="flex flex-col space-y-2">
@@ -370,7 +368,7 @@ export function ActionFormFlatKVArray<T extends FieldValues>({
       key={inputKey}
       control={control}
       name={typedKey}
-      render={({ field }) => (
+      render={() => (
         <FormItem>
           <ActionFormLabel inputKey={inputKey} inputOption={inputOption} />
           <div className="flex flex-col space-y-2">

diff --git a/frontend/src/components/workspace/panel/integration/form.tsx b/frontend/src/components/workspace/panel/integration/form.tsx
@@ -71,7 +71,7 @@ export function IntegrationForm({
   } = useQuery<Action, Error>({
     queryKey: ["selected_action", actionId, workflowId],
     queryFn: async ({ queryKey }) => {
-      const [_, actionId, workflowId] = queryKey as [string, string, string]
+      const [, actionId, workflowId] = queryKey as [string, string, string]
       return await getActionById(actionId, workflowId)
     },
   })

diff --git a/frontend/src/components/workspace/panel/workflow/controls.tsx b/frontend/src/components/workspace/panel/workflow/controls.tsx
@@ -68,15 +68,15 @@ const workflowControlsFormSchema = z
       path: ["actionKey"], // Specify the path of the field being validated for targeted error messages.
     }
   )
-type WorkflowControlsForm = z.infer<typeof workflowControlsFormSchema>
+type TWorkflowControlsForm = z.infer<typeof workflowControlsFormSchema>
 
 export function WorkflowControlsForm({
   workflow,
 }: {
   workflow: Workflow
 }): React.JSX.Element {
   const [confirmationIsOpen, setConfirmationIsOpen] = useState(false)
-  const form = useForm<WorkflowControlsForm>({
+  const form = useForm<TWorkflowControlsForm>({
     resolver: zodResolver(workflowControlsFormSchema),
     defaultValues: {
       payload: "",
@@ -85,7 +85,7 @@ export function WorkflowControlsForm({
   })
   const [selectedAction, setSelectedAction] = useState<Action | null>(null)
 
-  const onSubmit = (values: WorkflowControlsForm) => {
+  const onSubmit = (values: TWorkflowControlsForm) => {
     // Make the API call to start the workflow
     if (!values.actionKey) {
       console.error("No action key provided")

diff --git a/frontend/src/components/workspace/panel/workflow/form.tsx b/frontend/src/components/workspace/panel/workflow/form.tsx
@@ -39,7 +39,7 @@ const workflowFormSchema = z.object({
   description: z.string(),
 })
 
-type WorkflowForm = z.infer<typeof workflowFormSchema>
+type TWorkflowForm = z.infer<typeof workflowFormSchema>
 
 interface WorkflowFormProps {
   workflow: Workflow
@@ -56,7 +56,7 @@ export function WorkflowForm({
     description: workflowDescription,
   } = workflow
   const queryClient = useQueryClient()
-  const form = useForm<WorkflowForm>({
+  const form = useForm<TWorkflowForm>({
     resolver: zodResolver(workflowFormSchema),
     defaultValues: {
       title: workflowTitle || "",
@@ -66,7 +66,7 @@ export function WorkflowForm({
 
   function useUpdateWorkflow(workflowId: string) {
     const mutation = useMutation({
-      mutationFn: (values: WorkflowForm) => updateWorkflow(workflowId, values),
+      mutationFn: (values: TWorkflowForm) => updateWorkflow(workflowId, values),
       onSuccess: (data) => {
         console.log("Workflow update successful", data)
         queryClient.invalidateQueries({ queryKey: ["workflow", workflowId] })
@@ -88,7 +88,7 @@ export function WorkflowForm({
   }
 
   const { mutate } = useUpdateWorkflow(workflowId)
-  function onSubmit(values: WorkflowForm) {
+  function onSubmit(values: TWorkflowForm) {
     mutate(values)
   }
 

diff --git a/frontend/src/components/workspace/panel/workflow/runs.tsx b/frontend/src/components/workspace/panel/workflow/runs.tsx
@@ -48,11 +48,7 @@ export function WorkflowRunsView({
   } = useQuery<WorkflowRun[], Error>({
     queryKey: ["workflow", workflowId, "runs"],
     queryFn: async ({ queryKey }) => {
-      const [_workflow, workflowId, _run] = queryKey as [
-        string?,
-        string?,
-        string?,
-      ]
+      const [, workflowId] = queryKey as [string?, string?, string?]
       if (!workflowId) {
         throw new Error("No workflow ID provided")
       }
@@ -80,11 +76,7 @@ export function WorkflowRunsView({
             {workflowRuns
               ?.sort((a, b) => b.created_at.getTime() - a.created_at.getTime())
               .map((props, index) => (
-                <WorkflowRunItem
-                  className="my-2 w-full"
-                  key={index}
-                  {...props}
-                />
+                <WorkflowRunItem key={index} {...props} />
               ))}
           </Accordion>
         ) : (
@@ -96,14 +88,12 @@ export function WorkflowRunsView({
 }
 
 function WorkflowRunItem({
-  className,
   status,
   id: workflowRunId,
   workflow_id: workflowId,
   created_at,
   updated_at,
-  ...props
-}: React.PropsWithoutRef<WorkflowRun> & React.HTMLAttributes<HTMLDivElement>) {
+}: React.PropsWithoutRef<WorkflowRun>) {
   const [open, setOpen] = useState(false)
   const [actionRuns, setActionRuns] = useState<ActionRun[]>([])
   const handleClick = () => setOpen(!open)

diff --git a/frontend/src/lib/hooks.ts b/frontend/src/lib/hooks.ts
@@ -48,7 +48,7 @@ export function useIntegrationFormSchema(integrationKey: IntegrationType): {
   const { data: integrationSpec, isLoading } = useQuery({
     queryKey: ["integration_field_config", integrationKey],
     queryFn: async ({ queryKey }) => {
-      const [_, integrationKey] = queryKey as [string, IntegrationType]
+      const [, integrationKey] = queryKey as [string, IntegrationType]
       return await fetchIntegration(integrationKey)
     },
   })