Example modal popup dialogs in Sanity Studio

export function PublishMicrositeAction(props) {
    if (props.type !== 'microsite') {
      return null
    }
    getMicrositeHook(props)
    return {
      label: "Publish Microsite",
      onHandle: () => {
      },
      dialog: {
          type: 'modal',
          onClose: (onClose function to go here),
          content: <div class="modal" style={{paddingBottom: 30 + 'px'}}>
          <h3>Publishing {siteName}</h3>
          <p>Please enter a brief description of what was changed.</p>
          <form action="${baseHookUrl}${hookId}"  method="POST" >
          <label for="trigger_title">Message: </label>
          <input type="text" name="trigger_title" id="trigger_title" />
          <button class="submit" type="button" style={{marginLeft: 10 + 'px'}}>Publish</button>
          </form>
          </div>

      }
    }

  }

import React, {useState, useEffect} from 'react'
import {client} from '../../../src/utils/sanityClient'
import {ComposeIcon} from '@sanity/icons'
import CreateTaskForm from './components/CreateTaskForm'
import {v4 as uuid} from 'uuid'

export function CreateTaskAction(props) {
  const [creating, setCreating] = useState(false)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [task, setTask] = useState({
    status: {
      isHighPriority: false,
      isBlocked: false,
      isComplete: false,
    },
    title: '',
    description: '',
    category: '',
    dueDate: new Date(),
    connections: [
      {
        _type: props.type,
        _ref: props.id,
      },
    ],
    contributors: false,
  })

  const handleClose = async () => {
    setCreating(true)

    const doc = {
      ...task,
      dueDate: task.dueDate?.toISOString(),
      contributors: task.contributors
        ? [
            {
              _type: 'contributor',
              _ref: task.createdBy._ref,
            },
          ]
        : [],
      _type: 'task',
      _id: uuid(),
    }

    await client
      .create(doc, {autoGenerateArrayKeys: true})
      .then((doc) => {
        setCreating(false)
        setTask({
          status: {
            isHighPriority: false,
            isBlocked: false,
            isComplete: false,
          },
          title: '',
          description: '',
          category: '',
          connections: [
            {
              _type: 'ticket',
              _ref: props.id,
            },
          ],
          contributors: false,
        })
        setIsDialogOpen(false)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  return {
    label: 'Create Task',
    icon: <ComposeIcon />,
    onHandle: () => setIsDialogOpen(true),
    dialog: isDialogOpen && {
      type: 'modal',
      onClose: () => setIsDialogOpen(false),
      header: 'Create Task',
      content: (
        <CreateTaskForm
          handleClose={handleClose}
          setTask={setTask}
          task={task}
          creating={creating}
          setCreating={setCreating}
        />
      ),
    },
  }
}