From 3cfea834f4534b355fc42f145b4a4bee2a2e21dc Mon Sep 17 00:00:00 2001
From: Dan Ribbens <dan.ribbens@gmail.com>
Date: Fri, 10 Jan 2025 17:37:51 -0500
Subject: [PATCH 1/4] feat: delete scheduled published events

---
 .../payload/src/versions/schedule/types.ts    |   2 +-
 .../ScheduleDrawer/buildUpcomingColumns.tsx   |  27 +++++
 .../PublishButton/ScheduleDrawer/index.scss   |   4 +
 .../PublishButton/ScheduleDrawer/index.tsx    |  37 +++++-
 .../src/utilities/schedulePublishHandler.ts   |  26 +++-
 test/versions/int.spec.ts                     | 113 +++++++++++++++++-
 6 files changed, 197 insertions(+), 12 deletions(-)

diff --git a/packages/payload/src/versions/schedule/types.ts b/packages/payload/src/versions/schedule/types.ts
index 3e16c10d995..4f747c8288f 100644
--- a/packages/payload/src/versions/schedule/types.ts
+++ b/packages/payload/src/versions/schedule/types.ts
@@ -7,6 +7,6 @@ export type SchedulePublishTaskInput = {
   }
   global?: GlobalSlug
   locale?: string
-  type: string
+  type?: string
   user?: number | string
 }
diff --git a/packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx b/packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx
index a808f37e05f..8f4d477a179 100644
--- a/packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx
+++ b/packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx
@@ -1,15 +1,18 @@
 import type { ClientConfig } from 'payload'
 
 import { getTranslation, type I18nClient, type TFunction } from '@payloadcms/translations'
+import React from 'react'
 
 import type { Column } from '../../Table/index.js'
 import type { UpcomingEvent } from './types.js'
 
 import { formatDate } from '../../../utilities/formatDate.js'
+import { Button } from '../../Button/index.js'
 import { Pill } from '../../Pill/index.js'
 
 type Args = {
   dateFormat: string
+  deleteHandler: (id: number | string) => void
   docs: UpcomingEvent[]
   i18n: I18nClient
   localization: ClientConfig['localization']
@@ -18,6 +21,7 @@ type Args = {
 
 export const buildUpcomingColumns = ({
   dateFormat,
+  deleteHandler,
   docs,
   i18n,
   localization,
@@ -81,5 +85,28 @@ export const buildUpcomingColumns = ({
     })
   }
 
+  columns.push({
+    accessor: 'delete',
+    active: true,
+    field: {
+      name: 'delete',
+      type: 'text',
+    },
+    Heading: <span>{t('general:delete')}</span>,
+    renderedCells: docs.map((doc) => (
+      <Button
+        buttonStyle="icon-label"
+        className="schedule-publish__delete"
+        icon="x"
+        key={doc.id}
+        onClick={(e) => {
+          e.preventDefault()
+          deleteHandler(doc.id)
+        }}
+        tooltip={t('general:delete')}
+      />
+    )),
+  })
+
   return columns
 }
diff --git a/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.scss b/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.scss
index 88dedf9d094..0d179816379 100644
--- a/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.scss
+++ b/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.scss
@@ -44,5 +44,9 @@
         margin-bottom: var(--base);
       }
     }
+
+    &__delete {
+      margin: 0;
+    }
   }
 }
diff --git a/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx b/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx
index 8b1d5b7e202..09596383969 100644
--- a/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx
+++ b/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx
@@ -61,6 +61,7 @@ export const ScheduleDrawer: React.FC<Props> = ({ slug }) => {
   const modalTitle = t('general:schedulePublishFor', { title })
   const [upcoming, setUpcoming] = React.useState<UpcomingEvent[]>()
   const [upcomingColumns, setUpcomingColumns] = React.useState<Column[]>()
+  const deleteHandlerRef = React.useRef<((id: number | string) => Promise<void>) | null>(() => null)
 
   const localeOptions = React.useMemo(() => {
     if (localization) {
@@ -122,9 +123,41 @@ export const ScheduleDrawer: React.FC<Props> = ({ slug }) => {
       .get(`${serverURL}${api}/payload-jobs`, { params })
       .then((res) => res.json())
 
-    setUpcomingColumns(buildUpcomingColumns({ dateFormat, docs, i18n, localization, t }))
+    setUpcomingColumns(
+      buildUpcomingColumns({
+        dateFormat,
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        deleteHandler: deleteHandlerRef.current,
+        docs,
+        i18n,
+        localization,
+        t,
+      }),
+    )
     setUpcoming(docs)
-  }, [api, collectionSlug, dateFormat, globalSlug, i18n, id, serverURL, t, localization])
+  }, [collectionSlug, globalSlug, serverURL, api, dateFormat, id, t, i18n, localization])
+
+  const deleteHandler = React.useCallback(
+    async (id: number | string) => {
+      try {
+        await schedulePublish({
+          deleteID: id,
+        })
+        await fetchUpcoming()
+        toast.success(t('general:deletedSuccessfully'))
+      } catch (err) {
+        console.error(err)
+        toast.error(err.message)
+      }
+    },
+    [fetchUpcoming, schedulePublish, t],
+  )
+
+  React.useEffect(() => {
+    deleteHandlerRef.current = deleteHandler
+  }, [deleteHandler])
+
+  // deleteHandlerRef.current = deleteHandler
 
   const handleSave = React.useCallback(async () => {
     if (!date) {
diff --git a/packages/ui/src/utilities/schedulePublishHandler.ts b/packages/ui/src/utilities/schedulePublishHandler.ts
index 3dc0fc772a4..25cf6b65748 100644
--- a/packages/ui/src/utilities/schedulePublishHandler.ts
+++ b/packages/ui/src/utilities/schedulePublishHandler.ts
@@ -1,13 +1,18 @@
 import type { PayloadRequest, SchedulePublishTaskInput } from 'payload'
 
 export type SchedulePublishHandlerArgs = {
-  date: Date
+  date?: Date
+  /**
+   * The job id to delete to remove a scheduled publish event
+   */
+  deleteID?: number | string
   req: PayloadRequest
 } & SchedulePublishTaskInput
 
 export const schedulePublishHandler = async ({
   type,
   date,
+  deleteID,
   doc,
   global,
   locale,
@@ -38,6 +43,14 @@ export const schedulePublishHandler = async ({
   }
 
   try {
+    if (deleteID) {
+      await payload.db.deleteOne({
+        collection: 'payload-jobs',
+        req,
+        where: { id: { equals: deleteID } },
+      })
+    }
+
     await payload.jobs.queue({
       input: {
         type,
@@ -50,10 +63,15 @@ export const schedulePublishHandler = async ({
       waitUntil: date,
     })
   } catch (err) {
-    let error = `Error scheduling ${type} for `
+    let error
 
-    if (doc) {
-      error += `document with ID ${doc.value} in collection ${doc.relationTo}`
+    if (deleteID) {
+      error = `Error deleting scheduled publish event with ID ${deleteID}`
+    } else {
+      error = `Error scheduling ${type} for `
+      if (doc) {
+        error += `document with ID ${doc.value} in collection ${doc.relationTo}`
+      }
     }
 
     payload.logger.error(error)
diff --git a/test/versions/int.spec.ts b/test/versions/int.spec.ts
index 2464ab892ea..46a6377a136 100644
--- a/test/versions/int.spec.ts
+++ b/test/versions/int.spec.ts
@@ -1,4 +1,5 @@
-import type { Payload, PayloadRequest } from 'payload'
+import { createLocalReq, Payload } from 'payload'
+import { schedulePublishHandler } from '@payloadcms/ui/utilities/schedulePublishHandler'
 
 import path from 'path'
 import { ValidationError } from 'payload'
@@ -48,6 +49,7 @@ const formatGraphQLID = (id: number | string) =>
   payload.db.defaultIDType === 'number' ? id : `"${id}"`
 
 describe('Versions', () => {
+  let user
   beforeAll(async () => {
     process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit
     ;({ payload, restClient } = await initPayloadInt(dirname))
@@ -69,12 +71,16 @@ describe('Versions', () => {
           password: "${devUser.password}"
         ) {
           token
+          user {
+            id
+          }
         }
       }`
     const { data } = await restClient
       .GRAPHQL_POST({ body: JSON.stringify({ query: login }) })
       .then((res) => res.json())
 
+    user = { ...data.loginUser.user, collection: 'users' }
     token = data.loginUser.token
 
     // now: initialize
@@ -1807,10 +1813,6 @@ describe('Versions', () => {
 
       const currentDate = new Date()
 
-      const user = (
-        await payload.find({ collection: 'users', where: { email: { equals: devUser.email } } })
-      ).docs[0]
-
       await payload.jobs.queue({
         task: 'schedulePublish',
         waitUntil: new Date(currentDate.getTime() + 3000),
@@ -1943,6 +1945,107 @@ describe('Versions', () => {
       expect(retrieved._status).toStrictEqual('draft')
       expect(retrieved.title).toStrictEqual('i will be a draft')
     })
+
+    describe('server functions', () => {
+      let draftDoc
+      let event
+
+      beforeAll(async () => {
+        draftDoc = await payload.create({
+          collection: draftCollectionSlug,
+          data: {
+            title: 'my doc',
+            description: 'hello',
+            _status: 'draft',
+          },
+        })
+      })
+
+      it('should create using schedule-publish', async () => {
+        const currentDate = new Date()
+
+        const req = await createLocalReq({ user }, payload)
+
+        // use server action to create the event
+        await schedulePublishHandler({
+          req,
+          type: 'publish',
+          date: new Date(currentDate.getTime() + 3000),
+          doc: {
+            relationTo: draftCollectionSlug,
+            value: draftDoc.id,
+          },
+          user,
+          locale: 'all',
+        })
+
+        // fetch the job
+        ;[event] = (
+          await payload.find({
+            collection: 'payload-jobs',
+            where: {
+              'input.doc.value': {
+                equals: String(draftDoc.id),
+              },
+            },
+          })
+        ).docs
+
+        expect(event).toBeDefined()
+      })
+
+      it('should delete using schedule-publish', async () => {
+        const currentDate = new Date()
+
+        const req = await createLocalReq({ user }, payload)
+
+        // use server action to create the event
+        await schedulePublishHandler({
+          req,
+          type: 'publish',
+          date: new Date(currentDate.getTime() + 3000),
+          doc: {
+            relationTo: draftCollectionSlug,
+            value: draftDoc.id,
+          },
+          user,
+          locale: 'all',
+        })
+
+        // fetch the job
+        ;[event] = (
+          await payload.find({
+            collection: 'payload-jobs',
+            where: {
+              'input.doc.value': {
+                equals: String(draftDoc.id),
+              },
+            },
+          })
+        ).docs
+
+        // use server action to delete the event
+        await schedulePublishHandler({
+          req,
+          deleteID: event.id,
+          user,
+        })
+
+        // fetch the job
+        ;[event] = (
+          await payload.find({
+            collection: 'payload-jobs',
+            where: {
+              'input.doc.value': {
+                equals: String(draftDoc.id),
+              },
+            },
+          })
+        ).docs
+
+        expect(event).toBeUndefined()
+      })
+    })
   })
 
   describe('Publish Individual Locale', () => {

From 4b7430399f01894d05d723d1f97e9485e7e6d3db Mon Sep 17 00:00:00 2001
From: Dan Ribbens <dan.ribbens@gmail.com>
Date: Fri, 10 Jan 2025 17:45:52 -0500
Subject: [PATCH 2/4] chore: code cleanup

---
 packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx b/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx
index 09596383969..aea38fceacc 100644
--- a/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx
+++ b/packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx
@@ -157,8 +157,6 @@ export const ScheduleDrawer: React.FC<Props> = ({ slug }) => {
     deleteHandlerRef.current = deleteHandler
   }, [deleteHandler])
 
-  // deleteHandlerRef.current = deleteHandler
-
   const handleSave = React.useCallback(async () => {
     if (!date) {
       return toast.error(t('general:noDateSelected'))

From 2727d11e40f18e03f5989516ec38f2a17dcfceb5 Mon Sep 17 00:00:00 2001
From: Dan Ribbens <dan.ribbens@gmail.com>
Date: Fri, 10 Jan 2025 17:52:19 -0500
Subject: [PATCH 3/4] chore: change server function to call local api instead
 of db operation

---
 packages/ui/src/utilities/schedulePublishHandler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/utilities/schedulePublishHandler.ts b/packages/ui/src/utilities/schedulePublishHandler.ts
index 25cf6b65748..a44b5f2be73 100644
--- a/packages/ui/src/utilities/schedulePublishHandler.ts
+++ b/packages/ui/src/utilities/schedulePublishHandler.ts
@@ -44,7 +44,7 @@ export const schedulePublishHandler = async ({
 
   try {
     if (deleteID) {
-      await payload.db.deleteOne({
+      await payload.delete({
         collection: 'payload-jobs',
         req,
         where: { id: { equals: deleteID } },

From 2a8b504bce6732fed202e9c60e2381719d833f5e Mon Sep 17 00:00:00 2001
From: Dan Ribbens <dan.ribbens@gmail.com>
Date: Mon, 13 Jan 2025 13:08:26 -0500
Subject: [PATCH 4/4] chore: fix version int test

---
 test/versions/int.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/versions/int.spec.ts b/test/versions/int.spec.ts
index 4abb5cd43a4..63eeff6316d 100644
--- a/test/versions/int.spec.ts
+++ b/test/versions/int.spec.ts
@@ -2040,7 +2040,7 @@ describe('Versions', () => {
             collection: 'payload-jobs',
             where: {
               'input.doc.value': {
-                equals: String(draftDoc.id),
+                equals: draftDoc.id,
               },
             },
           })
@@ -2073,7 +2073,7 @@ describe('Versions', () => {
             collection: 'payload-jobs',
             where: {
               'input.doc.value': {
-                equals: String(draftDoc.id),
+                equals: draftDoc.id,
               },
             },
           })