Add more menu button cron (supabase#37618)

* Add more menu button cron

* Shift edit column to last column instead

* Flip the alignment

Author: joshenlim

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

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import { Clipboard, Edit, Trash } from 'lucide-react'
+import { Clipboard, Edit, MoreVertical, Trash } from 'lucide-react'
 import { parseAsString, useQueryState } from 'nuqs'
 import { useState } from 'react'
 import { toast } from 'sonner'
@@ -26,6 +26,11 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -88,6 +93,46 @@ export const CronJobTableCell = ({
     })
   }
 
+  if (col.id === 'actions') {
+    return (
+      <div className="flex items-center">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="text"
+              className="h-6 w-6"
+              icon={<MoreVertical />}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-42">
+            <DropdownMenuItem
+              className="gap-x-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                onSelectEdit(row)
+              }}
+            >
+              <Edit size={12} />
+              Edit job
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="gap-x-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                onSelectDelete(row)
+              }}
+            >
+              <Trash size={12} />
+              Delete job
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    )
+  }
+
   if (col.id === 'active') {
     return (
       <Dialog open={showToggleModal} onOpenChange={setShowToggleModal}>

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

@@ -47,4 +47,5 @@ export const CRON_TABLE_COLUMNS = [
   { id: 'next_run', name: 'Next run', minWidth: 180 },
   { id: 'command', name: 'Command', minWidth: 320 },
   { id: 'active', name: 'Active', width: 70, minWidth: 70, maxWidth: 70 },
+  { id: 'actions', name: '', minWidth: 75, width: 75 },
 ]