Add type to the table

apps/studio/components/interfaces/Integrations/CronJobs/CronJobRunsDataGrid.tsx

@@ -1,6 +1,7 @@
 import { ChevronRight, List, Timer } from 'lucide-react'
 import { useRef } from 'react'
 import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
+import { motion } from 'framer-motion'
 
 import { SimpleCodeBlock } from '@ui/components/SimpleCodeBlock'
 import { useParams } from 'common'
@@ -62,7 +63,7 @@ const CronJobRunsDataGrid = ({ updateJobState }: CronJobsDataGridProps) => {
     {
       id: 'runid',
       name: 'RunID',
-      minWidth: 100,
+      minWidth: 60,
       value: (row: CronJobRun) => (
         <div className="flex items-center gap-1.5">
           <h3 className="text-xs">{row.runid}</h3>
@@ -179,10 +180,15 @@ const CronJobRunsDataGrid = ({ updateJobState }: CronJobsDataGridProps) => {
               {currentJobState && (
                 <>
                   <ChevronRight size={12} className="text-muted-foreground" />
-                  <span className="flex items-center gap-1">
+                  <motion.span
+                    initial={{ x: 10, opacity: 0 }}
+                    animate={{ x: 0, opacity: 1 }}
+                    transition={{ duration: 0.3, ease: 'easeOut' }}
+                    className="flex items-center gap-1"
+                  >
                     <Timer size={14} className="text-muted-foreground" />
                     {currentJobState?.jobname}
-                  </span>
+                  </motion.span>
                 </>
               )}
             </div>

apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.constants.tsx

@@ -11,26 +11,26 @@ export const CRONJOB_TYPES = [
 export const CRONJOB_DEFINITIONS = [
   {
     value: 'sql_snippet',
-    icon: <SqlEditor strokeWidth={1} />,
+    icon: <SqlEditor size={22} strokeWidth={1} />,
     label: 'SQL Snippet',
     description: 'Write a SQL snippet to run.',
   },
   {
     value: 'sql_function',
-    icon: <ScrollText strokeWidth={1} />,
+    icon: <ScrollText size={22} strokeWidth={1} />,
     label: 'Postgres SQL Function',
     description: 'Choose a Postgres SQL functions to run.',
   },
 
   {
     value: 'http_request',
-    icon: <RESTApi strokeWidth={1} />,
+    icon: <RESTApi size={22} strokeWidth={1} />,
     label: 'HTTP Request',
     description: 'Send an HTTP request to any URL.',
   },
   {
     value: 'edge_function',
-    icon: <EdgeFunctions strokeWidth={1} />,
+    icon: <EdgeFunctions size={22} strokeWidth={1} />,
     label: 'Supabase Edge Function',
     description: 'Choose a Supabase edge function to run.',
   },

apps/studio/components/interfaces/Integrations/CronJobs/CronJobsDataGrid.tsx

@@ -21,9 +21,10 @@ import {
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { CreateCronJobSheet } from './CreateCronJobSheet'
-import { computeNextRunFromCurrentTime } from './CronJobs.utils'
+import { computeNextRunFromCurrentTime, parseCronJobCommand } from './CronJobs.utils'
 import CronJobsEmptyState from './CronJobsEmptyState'
 import DeleteCronJob from './DeleteCronJob'
+import { CRONJOB_DEFINITIONS } from './CronJobs.constants'
 
 interface CronJobsDataGridProps {
   jobState: { jobId: string; selectedJob: CronJob | null }
@@ -83,15 +84,24 @@ const CronJobsDataGrid = ({ jobState, updateJobState }: CronJobsDataGridProps) =
       minWidth: 120,
       value: (row: CronJob) => <div className="text-xs">{row.schedule}</div>,
     },
-    {
-      id: 'next_run',
-      name: 'Next Run',
-      minWidth: 150,
-      value: (row: CronJob) => (
-        <div className="text-xs">{computeNextRunFromCurrentTime(row.schedule, currentTime)}</div>
-      ),
-    },
 
+    {
+      id: 'type',
+      name: 'Type',
+      minWidth: 70,
+      value: (row: CronJob) => {
+        const cronJobType = parseCronJobCommand(row.command).type
+        const definition = CRONJOB_DEFINITIONS.find((def) => def.value === cronJobType)
+        return (
+          <Tooltip_Shadcn_>
+            <TooltipTrigger_Shadcn_ asChild>
+              <div className="text-xs">{definition?.icon}</div>
+            </TooltipTrigger_Shadcn_>
+            <TooltipContent_Shadcn_>{definition?.label || cronJobType}</TooltipContent_Shadcn_>
+          </Tooltip_Shadcn_>
+        )
+      },
+    },
     {
       id: 'command',
       name: 'Command',
@@ -124,11 +134,20 @@ const CronJobsDataGrid = ({ jobState, updateJobState }: CronJobsDataGridProps) =
       name: 'Status',
       minWidth: 100,
       value: (row: CronJob) => (
-        <Badge variant={row.active ? 'default' : 'secondary'}>
+        <Badge variant={row.active ? 'success' : 'secondary'}>
           {row.active ? 'Active' : 'Inactive'}
         </Badge>
       ),
     },
+    {
+      id: 'next_run',
+      name: 'Next Run',
+      minWidth: 150,
+      value: (row: CronJob) => (
+        <div className="text-xs">{computeNextRunFromCurrentTime(row.schedule, currentTime)}</div>
+      ),
+    },
+
     {
       id: 'edit',
       name: '',