Have custom actions changed in v22?

[dwkns]

In the documentation for Actions & Buttons

V3
// sanity.config.ts
import {createConfig} from 'sanity'
import {MyPublishAction} from './actions/MyPublishAction'

export default createConfig({
  name: 'default',
  title: 'My Cool Project',
  projectId: 'my-project-id',
  dataset: 'production',
  document: {
    // no more need for `defaultResolve(props)`
    actions: (prev) =>
      prev.map((previousAction) =>
        previousAction.action === 'publish' ? MyPublishAction : previousAction
      ),
  },
})
// ./actions/MyPublishAction.ts
import {DocumentActionComponent, PublishAction, useAction} from 'sanity'

export const MyPublishAction: DocumentActionComponent = (props) => {
  // TODO: this will probably change in the next few days
  const {label, ...rest} = PublishAction(props)
  return {label: 'My Publish', ...rest}
}

actions: (prev) => ... would allow us to intercept the default actions and swap a custom one out based on its name.

prev now just returns an empty array [] so this approach no longer works. How do we do it instead? Or is this just broken?

Also PublishAction(props) has as the documentation suggests has changed. It is no longer exported from sanity. What is the replacement?

[AshhhBradley]

I managed to get my action working again by referring to this:
https://github.com/sanity-io/sanity/blob/v3-current/dev/test-studio/documentActions/index.ts

Hopefully the documentation gets updated soon.

[dwkns]

Thanks @AshhhBradley

My issues is that prev used to return an array of the built in document actions, and now it doesn't (at least for me). That means you can't intercept an existing action and modify it as per the documentation.

Is prev empty using the code you suggested for you?

[AshhhBradley]

I wasn't able to figure out how to get this working but I'm assuming it's redundant now with DocumentActionsResolver it returns fine using that.

prev.map((previousAction) =>
  previousAction.action === 'publish' ? MyPublishAction : previousAction
),

This is letting me intercept the publish action and modify it. Hope this helps.

// sanity.config.ts
import {createConfig} from 'sanity'
import {resolveDocumentActions as documentActions} from './actions/documentActions'

export default createConfig({
  ...
  document: {
    actions: documentActions,
  },
})

// ./actions/documentActions.ts
import {DocumentActionsResolver} from 'sanity'
import {MyPublishAction} from './MyPublishAction'

export const resolveDocumentActions: DocumentActionsResolver = (prev, {schemaType}) => {
  // replace article with whatever schema name you use
  if (schemaType === 'article') {    
    return [MyPublishAction, ...prev]
  }

  return prev
}

[dwkns]

Hmmm...

I can see this is adding MyPublishAction when you're on document type article but unless I'm missing something it wouldn't replace the built in Publish action. So you would get this...

Both MyPublishAction action AND the built in Publish action. You're not intercepting the existing publish action, you're adding a new one.

What do you get if you add a console.log in the resolveDocumentActions function? so...

// ./actions/documentActions.ts
import {DocumentActionsResolver} from 'sanity'
import {MyPublishAction} from './MyPublishAction'

export const resolveDocumentActions: DocumentActionsResolver = (prev, {schemaType}) => {
   console.log( 'prev is:', prev) // <- what does this output in the browser?

  if (schemaType === 'article') {    
    return [MyPublishAction, ...prev]
  }

  return prev
}

Before v22 this output an array of Document actions. Now (at least for me) it is an empty array,

[AshhhBradley]

Oh I see, it does appear to be empty yes.

// ./actions/MyPublishAction.ts
import {useState, useEffect} from 'react'
import {DocumentActionComponent, useDocumentOperation} from 'sanity'
import {PublishIcon, CheckmarkIcon} from '@sanity/icons'

export const MyPublishAction: DocumentActionComponent = (props) => {
  const {patch, publish}: any = useDocumentOperation(props.id, props.type)
  const [publishState, setPublishState] = useState<'publishing' | 'published' | null>(null)

  useEffect(() => {
    if (publishState && !props.draft) {
      setPublishState('publishing')
    }
  }, [props.draft])
  
  return {
    disabled: Boolean(publish.disabled),
    label: publishState ? 'Publishing...' : 'Publish',
    tone: 'positive',
    icon: publishState === 'published' ? CheckmarkIcon : PublishIcon,
    onHandle: () => {
      setPublishState('published')
      if (props.draft != null && props.draft.slug == undefined) {
        let slug: any = props.draft.headline
        patch.execute([{set: {slug: {_type: 'slug', current: slug.split(' ').join('-').toLowerCase() }}}])
      }
      publish.execute()
      props.onComplete() 
    }
  }
}

This is what my action looks like for context, it's based on this:
https://www.sanity.io/schemas/set-slug-on-publish-with-referenced-field-value-ZMcsmDfWFDUo5_BrLtVpY

[jcoryalvernaz]

I have this same issue when trying to implement a singleton type per this discussion as the recommended approach. The value for prev is always an empty array, giving me no way to filter out actions I don't want for a specific schema type.

[ehuelsda]

Unfortunately this still seems to be an issue in the new version (3.0.0-rc.0)

[geball]

Hi everyone. I've asked the v3 team whether the removal of document actions from the document.actions callback function in defineConfig() is intentional, and will follow up once I hear back. In the meantime, the array remains accessible inside of definePlugin(), so this has been suggested to me as a potential workaround (the following will change the label of the Publish button):

// sanity.config.ts

import { defineConfig, definePlugin } from 'sanity'
import { deskTool } from 'sanity/desk'
import { schemaTypes } from './schemas'

import { DocumentActionComponent, DocumentActionDescription, DocumentActionProps } from 'sanity'

const createWrappedPublishAction = (publishAction: DocumentActionComponent) => {
  const wrappedPublish = (props: DocumentActionProps): DocumentActionDescription | null => {
    const originalPublishDescription = publishAction(props);

    return (
      originalPublishDescription && {
        ...originalPublishDescription,
        label: 'Publish 2.0',
      }
    )
  }

  return wrappedPublish;
}

const myPlugin = definePlugin({
  name: 'change-publish',
  document: {
    actions: (prev) => {
      return prev.map((action) => {
        console.log(action)
        if (action.action === 'publish') {
          return createWrappedPublishAction(action);
        }
        return action;
      })
    }
  },
});

export default defineConfig({
  name: 'default',
  title: 'Playground v3',

  projectId: '<YOUR_PROJECT_ID>',
  dataset: 'production',

  plugins: [
    deskTool(),
    myPlugin(),
  ],
  schema: {
    types: schemaTypes,
  },

})

If this is not adequate for each of your use cases, please let us know so we can bring it to the v3 team. Thanks!

[mediabeastnz]

Without a simple way to remove actions from things like singletons it's hard to make a robust easy to use Content Editor for users...

[alexanderkalachev]

Still no clear explanation how to do simple things in V3, that worked perfectly with __experimental_actions:
– How to prevent creation of new singleton documents through "New document" button in a top bar?
– How to enable publication for changes in singleton, but preventing it for possible new documents of same type?