Add component for form header

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

@@ -1,5 +1,5 @@
 import { ChevronRight, Eye, Timer } from 'lucide-react'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
@@ -16,10 +16,13 @@ import {
   HoverCard_Shadcn_,
   HoverCardTrigger_Shadcn_,
   HoverCardContent_Shadcn_,
+  Separator,
 } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { calculateDuration } from './CronJobs.utils'
 import { formatDate } from './CronJobs.utils'
+import { DocsButton } from 'components/ui/DocsButton'
+import { CronJobsFormHeader } from './CronJobsFormHeader'
 
 type CronJobRun = {
   jobid: number
@@ -42,6 +45,9 @@ interface CronJobsDataGridProps {
 
 const CronJobRunsDataGrid = ({ jobId, jobState, updateJobState }: CronJobsDataGridProps) => {
   const { project } = useProjectContext()
+  const router = useRouter()
+
+  const gridRef = useRef<DataGridHandle>(null)
 
   const { data: cronJobs, isLoading } = useCronJobRunsQuery({
     projectRef: project?.ref,
@@ -49,8 +55,9 @@ const CronJobRunsDataGrid = ({ jobId, jobState, updateJobState }: CronJobsDataGr
     jobId,
   })
 
-  const gridRef = useRef<DataGridHandle>(null)
-  const router = useRouter()
+  const [createCronJobSheetShown, setCreateCronJobSheetShown] = useState<
+    Pick<CronJob, 'jobname' | 'schedule' | 'active' | 'command'> | undefined
+  >()
 
   const cronJobColumns = [
     {
@@ -153,9 +160,9 @@ const CronJobRunsDataGrid = ({ jobId, jobState, updateJobState }: CronJobsDataGr
         autoSaveId="cron-jobs-layout"
       >
         <div className="h-full flex flex-col w-full">
-          <FormHeader className="py-4 px-6 !mb-0" title="Cron Jobs" />
+          <CronJobsFormHeader />
           {/* turn this into some kind of proper tabs?  */}
-          <div className="flex items-end px-6 justify-between">
+          <div className="flex items-center px-6">
             <div className="flex items-center gap-2">
               <button onClick={() => updateJobState('', null)}>Jobs</button>
               {jobState.selectedJob && (
@@ -168,15 +175,21 @@ const CronJobRunsDataGrid = ({ jobId, jobState, updateJobState }: CronJobsDataGr
                 </>
               )}
             </div>
-            <div className="flex items-center gap-6">
-              <div className="grid gap-1">
-                <span className="uppercase text-xs text-foreground-lighter">Command</span>
-
-                <HoverCard_Shadcn_>
+            <Separator orientation="vertical" className="ml-6 h-6" />
+            <div className="flex items-center gap-6 ml-6">
+              <div className="flex items-center gap-1">
+                <span className="text-foreground-light text-sm">
+                  {jobState.selectedJob?.schedule}
+                </span>
+              </div>
+              <div className="flex items-center gap-1">
+                <HoverCard_Shadcn_ openDelay={200}>
                   <HoverCardTrigger_Shadcn_ asChild className="cursor-pointer">
-                    <span className="font-mono p-2 bg-200 rounded-md text-sm flex items-center gap-2">
+                    <span className="font-mono p-1 bg-200 rounded-md text-sm flex items-center gap-2">
                       <Eye size={12} className="text-foreground-lighter" />
-                      <span className="truncate max-w-36">{jobState.selectedJob?.command}</span>
+                      <span className="text-foreground-light text-sm truncate max-w-36">
+                        {jobState.selectedJob?.command}
+                      </span>
                     </span>
                   </HoverCardTrigger_Shadcn_>
                   <HoverCardContent_Shadcn_>
@@ -186,12 +199,6 @@ const CronJobRunsDataGrid = ({ jobId, jobState, updateJobState }: CronJobsDataGr
                   </HoverCardContent_Shadcn_>
                 </HoverCard_Shadcn_>
               </div>
-              <div className="grid gap-1">
-                <span className="uppercase text-xs text-foreground-lighter">Schedule</span>
-                <span className="text-lg text-foreground-light">
-                  {jobState.selectedJob?.schedule}
-                </span>
-              </div>
             </div>
           </div>
           <ResizablePanel defaultSize={1}>

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

@@ -23,6 +23,8 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { CreateCronJobSheet } from './CreateCronJobSheet'
 import DeleteCronJob from './DeleteCronJob'
 import { Jobs } from 'openai/resources/fine-tuning/jobs'
+import { DocsButton } from 'components/ui/DocsButton'
+import { CronJobsFormHeader } from './CronJobsFormHeader'
 
 interface CronJobsDataGridProps {
   jobState: { jobId: string; selectedJob: CronJob | null }
@@ -171,7 +173,7 @@ const CronJobsDataGrid = ({ jobState, updateJobState }: CronJobsDataGridProps) =
         autoSaveId="cron-jobs-layout"
       >
         <div className="h-full flex flex-col w-full">
-          <FormHeader className="py-4 px-6 !mb-0" title="Cron Jobs" />
+          <CronJobsFormHeader />
           {/* turn this into tabs  */}
           <div className="flex items-center gap-2 px-6">
             Jobs

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

@@ -0,0 +1,58 @@
+import { Button, Sheet, SheetContent } from 'ui'
+import { DocsButton } from 'components/ui/DocsButton'
+import { useState } from 'react'
+import { CronJob } from 'data/database-cron-jobs/database-cron-jobs-query'
+import { FormHeader } from 'components/ui/Forms/FormHeader'
+import { CreateCronJobSheet } from './CreateCronJobSheet'
+
+export const CronJobsFormHeader = () => {
+  const [createCronJobSheetShown, setCreateCronJobSheetShown] = useState<
+    Pick<CronJob, 'jobname' | 'schedule' | 'active' | 'command'> | undefined
+  >()
+
+  const [isClosingCreateCronJobSheet, setIsClosingCreateCronJobSheet] = useState(false)
+
+  return (
+    <>
+      <FormHeader
+        title="Cron jobs"
+        description="Schedule and automate tasks like running queries or maintenance routines at specified intervals"
+        className="pt-6 px-6"
+        actions={
+          <>
+            <DocsButton href="https://supabase.com/docs/guides/database/extensions/pg_cron" />
+            <Button
+              type="primary"
+              onClick={() =>
+                setCreateCronJobSheetShown({
+                  jobname: '',
+                  schedule: '',
+                  command: '',
+                  active: true,
+                })
+              }
+            >
+              Create a new cron job
+            </Button>
+          </>
+        }
+      />
+      <Sheet
+        open={!!createCronJobSheetShown}
+        onOpenChange={() => setIsClosingCreateCronJobSheet(true)}
+      >
+        <SheetContent size="default" tabIndex={undefined}>
+          <CreateCronJobSheet
+            selectedCronJob={createCronJobSheetShown}
+            onClose={() => {
+              setIsClosingCreateCronJobSheet(false)
+              setCreateCronJobSheetShown(undefined)
+            }}
+            isClosing={isClosingCreateCronJobSheet}
+            setIsClosing={setIsClosingCreateCronJobSheet}
+          />
+        </SheetContent>
+      </Sheet>
+    </>
+  )
+}