sanity-plugin-dashboard-widget-vercel 3.1.1 → 3.1.3

package/src/components/DeployButton/index.tsx

@@ -1,10 +1,10 @@
 import {UploadIcon} from '@sanity/icons'
 import {Box, Button, useToast} from '@sanity/ui'
 import {useMachine} from '@xstate/react'
-import React, {useEffect, useMemo} from 'react'
+import React, {useEffect} from 'react'
 
 import {WIDGET_NAME} from '../../constants'
-import deployMachine from '../../machines/deploy'
+import {deployMachine} from '../../machines/deploy'
 import StateDebug from '../StateDebug'
 
 type Props = {
@@ -16,9 +16,9 @@ type Props = {
 const DeployButton = (props: Props) => {
   const {deployHook, onDeploySuccess, targetName} = props
 
-  const machine = useMemo(() => deployMachine(deployHook), [deployHook])
-
-  const [deployState, deployStateTransition, deployStateInterpreter] = useMachine(machine)
+  const [deployState, deployStateTransition, deployStateInterpreter] = useMachine(deployMachine, {
+    input: {deployHook},
+  })
 
   const toast = useToast()
 
@@ -54,18 +54,19 @@ const DeployButton = (props: Props) => {
   }, [isError, isSuccess, toast, targetName, deployState.context.error])
 
   useEffect(() => {
-    deployStateInterpreter.onTransition((state) => {
+    const subscription = deployStateInterpreter.subscribe((state) => {
       if (state.value === 'success') {
         if (onDeploySuccess) {
           onDeploySuccess()
         }
       }
     })
+
+    return () => subscription.unsubscribe()
   }, [deployStateInterpreter, onDeploySuccess])
 
   return (
     <Box padding={3} style={{position: 'relative'}}>
-      {/* xstate debug */}
       <StateDebug name="Deploy" state={deployState} />
 
       <Button

package/src/components/DialogForm/index.tsx

@@ -1,19 +1,17 @@
-// @ts-expect-error - fix typings later
 import {yupResolver} from '@hookform/resolvers/yup'
-import {Box, Button, Dialog, Flex, Stack} from '@sanity/ui'
-import {uuid} from '@sanity/uuid'
-import {useMachine} from '@xstate/react'
-import React, {FC} from 'react'
-// @ts-expect-error - fix typings later
+import {Box, Button, Dialog, Flex, Stack, useToast} from '@sanity/ui'
+import {useActor} from '@xstate/react'
+import React, {FC, useEffect} from 'react'
 import {useForm} from 'react-hook-form'
 import * as yup from 'yup'
 
-import {DEPLOYMENT_TARGET_DOCUMENT_TYPE, Z_INDEX_DIALOG} from '../../constants'
-import formMachine from '../../machines/form'
+import {Z_INDEX_DIALOG} from '../../constants'
+import {formMachine} from '../../machines/form'
 import sanitizeFormData from '../../utils/sanitizeFormData'
 import FormFieldInputText from '../FormFieldInputText'
 import {Sanity} from '../../types'
 import {useSanityClient} from '../../client'
+import {toPromise} from 'xstate'
 
 type Props = {
   deploymentTarget?: Sanity.DeploymentTarget
@@ -44,129 +42,111 @@ const formSchema = yup.object().shape({
 const DialogForm: FC<Props> = (props: Props) => {
   const {deploymentTarget, onClose, onCreate, onDelete, onUpdate} = props
   const client = useSanityClient()
+  const toast = useToast()
 
-  // xstate
-  const [formState, formStateTransition] = useMachine(formMachine, {
-    services: {
-      formSubmittedService: async () => {
-        onClose()
-      },
-      // TODO: refactor
-      createDocumentService: async (_context, event: any) => {
-        let document
-        try {
-          document = await client.create({
-            _id: `vercel.${uuid()}`,
-            _type: DEPLOYMENT_TARGET_DOCUMENT_TYPE,
-            ...event.formData,
-          })
-          if (onCreate) {
-            onCreate(document as Sanity.DeploymentTarget)
-          }
-          return Promise.resolve()
-        } catch (e) {
-          return Promise.reject(e)
-        }
-      },
-      // TODO: refactor
-      deleteDocumentService: async () => {
-        if (deploymentTarget) {
-          try {
-            await client.delete(deploymentTarget._id)
-            if (onDelete) {
-              onDelete(deploymentTarget._id)
-            }
-            return Promise.resolve()
-          } catch (e) {
-            return Promise.reject(e)
-          }
-        }
-        return Promise.resolve()
-      },
-      // TODO: refactor
-      updateDocumentService: async (_context, event: any) => {
-        let document
-        if (deploymentTarget) {
-          try {
-            document = await client.patch(deploymentTarget._id).set(event.formData).commit()
-            if (onUpdate) {
-              onUpdate(document as Sanity.DeploymentTarget)
-            }
-            return Promise.resolve()
-          } catch (e) {
-            return Promise.reject(e)
-          }
-        }
-        return Promise.resolve()
-      },
-    },
+  const [formState, formStateTransition, formStateActorRef] = useActor(formMachine, {
+    input: {client},
   })
 
-  const formUpdating =
-    formState.matches('creating') || formState.matches('deleting') || formState.matches('updating')
+  const formUpdating = formState.hasTag('busy')
 
-  // react-hook-form
+  // react-hook-form v7
   const {
-    // Read the formState before render to subscribe the form state through Proxy
     formState: {errors, isDirty, isValid},
     handleSubmit,
     register,
-  } = useForm({
+  } = useForm<FormData>({
+    // @ts-expect-error - fix typings later
     defaultValues: {
       deployHook: deploymentTarget?.deployHook || '',
       deployLimit: deploymentTarget?.deployLimit || 5,
-      name: deploymentTarget?.name,
-      projectId: deploymentTarget?.projectId,
+      name: deploymentTarget?.name || '',
+      projectId: deploymentTarget?.projectId || '',
       teamId: deploymentTarget?.teamId || '',
-      token: deploymentTarget?.token,
+      token: deploymentTarget?.token || '',
     },
     mode: 'onChange',
     resolver: yupResolver(formSchema),
   })
 
+  /**
+   * Handle errors and reaching the done state
+   */
+  useEffect(() => {
+    if (formState.matches('error')) {
+      toast.push({
+        status: 'error',
+        title: formState.context.message || 'An error occurred',
+      })
+    }
+    /**
+     * If the machine is done it means it reached updated, created, deleted or error state.
+     * We don't care which one, we just want to close the dialog
+     */
+    if (formState.status === 'done') {
+      onClose()
+    }
+  }, [formState, onClose, toast])
+
   // Callbacks
   // - submit react-hook-form
   const onSubmit = async (formData: FormData) => {
     const sanitizedFormData = sanitizeFormData(formData)
-    await formStateTransition(deploymentTarget ? 'UPDATE' : 'CREATE', {
-      formData: sanitizedFormData,
-    })
+    if (deploymentTarget) {
+      formStateTransition({type: 'UPDATE', id: deploymentTarget._id, formData: sanitizedFormData})
+    } else {
+      formStateTransition({type: 'CREATE', formData: sanitizedFormData})
+    }
+    await toPromise(formStateActorRef)
+    const snapshot = formStateActorRef.getSnapshot()
+    const {document} = snapshot.context
+    if (!document) return
+    if (snapshot.matches('created')) {
+      onCreate?.(document)
+    } else if (snapshot.matches('updated')) {
+      onUpdate?.(document)
+    }
   }
 
-  const handleDelete = () => {
-    formStateTransition('DELETE', {id: deploymentTarget?._id})
+  const handleDelete = async () => {
+    const id = deploymentTarget!._id
+    formStateTransition({type: 'DELETE', id})
+    await toPromise(formStateActorRef)
+    if (formStateActorRef.getSnapshot().matches('deleted')) {
+      onDelete?.(id)
+    }
   }
 
-  const Footer = () => (
-    <Box padding={3}>
-      <Flex justify={deploymentTarget ? 'space-between' : 'flex-end'}>
-        {/* Delete button */}
-        {deploymentTarget && (
-          <Button
-            disabled={formUpdating}
-            fontSize={1}
-            mode="bleed"
-            onClick={handleDelete}
-            text="Delete"
-            tone="critical"
-          />
-        )}
-
-        {/* Submit button */}
-        <Button
-          disabled={formUpdating || !isDirty || !isValid}
-          fontSize={1}
-          onClick={handleSubmit(onSubmit)}
-          text={deploymentTarget ? 'Update and close' : 'Create'}
-          tone="primary"
-        />
-      </Flex>
-    </Box>
-  )
-
   return (
     <Dialog
-      footer={<Footer />}
+      footer={
+        <Box padding={3}>
+          <Flex justify={deploymentTarget ? 'space-between' : 'flex-end'}>
+            {/* Delete button */}
+            {deploymentTarget && (
+              <Button
+                loading={formState.matches('deleting')}
+                disabled={formUpdating}
+                fontSize={1}
+                mode="bleed"
+                onClick={handleDelete}
+                text="Delete"
+                tone="critical"
+              />
+            )}
+
+            {/* Submit button */}
+            <Button
+              loading={formState.matches('creating') || formState.matches('updating')}
+              disabled={!isDirty || !isValid}
+              fontSize={1}
+              onClick={handleSubmit(onSubmit)}
+              text={deploymentTarget ? 'Update and close' : 'Create'}
+              tone="primary"
+            />
+          </Flex>
+        </Box>
+      }
       header={`${deploymentTarget ? 'Edit' : 'Create'} deployment target`}
       id="create"
       onClose={onClose}
@@ -186,24 +166,24 @@ const DialogForm: FC<Props> = (props: Props) => {
             description="Name displayed in this plugin (e.g. production, staging)"
             error={errors?.name}
             label="Name"
-            name="name"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('name')}
           />
 
           <FormFieldInputText
             disabled={formUpdating}
             error={errors?.token}
             label="Vercel Account Token"
-            name="token"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('token')}
           />
 
           <FormFieldInputText
             disabled={formUpdating}
             error={errors?.projectId}
             label="Vercel Project ID"
-            name="projectId"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('projectId')}
           />
 
           <FormFieldInputText
@@ -211,8 +191,8 @@ const DialogForm: FC<Props> = (props: Props) => {
             disabled={formUpdating}
             error={errors?.teamId}
             label="Vercel Team ID (optional)"
-            name="teamId"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('teamId')}
           />
 
           <FormFieldInputText
@@ -220,16 +200,16 @@ const DialogForm: FC<Props> = (props: Props) => {
             disabled={formUpdating}
             error={errors?.deployHook}
             label="Vercel Deploy Hook (optional)"
-            name="deployHook"
-            ref={register}
+            // @ts-expect-error - fix typings later
+            {...register('deployHook')}
           />
 
           <FormFieldInputText
             disabled={formUpdating}
             error={errors?.deployLimit}
             label="Number of deploys to display"
-            name="deployLimit"
-            ref={register({valueAsNumber: true})}
+            // @ts-expect-error - fix typings later
+            {...register('deployLimit', {valueAsNumber: true})}
           />
         </Stack>
       </Box>

package/src/components/FormFieldInputLabel/index.tsx

@@ -1,7 +1,6 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Inline, Text, Tooltip} from '@sanity/ui'
 import React, {FC} from 'react'
-// @ts-expect-error - fix typings later
 import {FieldError} from 'react-hook-form'
 import {styled} from 'styled-components'
 

package/src/components/FormFieldInputText/index.tsx

@@ -1,6 +1,5 @@
 import {Box, TextInput} from '@sanity/ui'
 import React, {forwardRef} from 'react'
-// @ts-expect-error - fix typings later
 import {FieldError} from 'react-hook-form'
 
 import FormFieldInputLabel from '../FormFieldInputLabel'
@@ -13,12 +12,12 @@ type Props = {
   name: string
   placeholder?: string
   value?: string
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onBlur?: React.FocusEventHandler<HTMLInputElement>
 }
 
-type Ref = HTMLInputElement
-
-const FormFieldInputText = forwardRef<Ref, Props>((props: Props, ref) => {
-  const {description, disabled, error, label, name, placeholder, value} = props
+const FormFieldInputText = forwardRef<HTMLInputElement, Props>((props: Props, ref) => {
+  const {description, disabled, error, label, name, placeholder, value, onChange, onBlur} = props
 
   return (
     <Box>
@@ -33,6 +32,8 @@ const FormFieldInputText = forwardRef<Ref, Props>((props: Props, ref) => {
         id={name}
         name={name}
         placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
         ref={ref}
       />
     </Box>

package/src/machines/deploy.ts

@@ -1,8 +1,8 @@
-import fetch from 'unfetch'
-import {assign, Machine} from 'xstate'
+import {assign, setup, fromPromise} from 'xstate'
 import {Vercel} from '../types'
 
 type Context = {
+  deployHook: string
   disabled: boolean
   feedback?: string
   label?: string
@@ -11,104 +11,107 @@ type Context = {
 
 type Event = {type: 'DEPLOY'}
 
-type Schema = {
-  states: {
-    idle: {}
-    deploying: {}
-    success: {}
-    error: {}
-  }
+interface DeployActorInput {
+  deployHook: string
 }
 
-const deployMachine = (deployHook: string) =>
-  Machine<Context, Schema, Event>(
-    // Machine
-    {
-      id: 'deploy',
-      initial: 'idle',
-      context: {
-        disabled: false,
-        feedback: undefined,
-        label: undefined,
-        error: undefined,
+export const deployMachine = setup({
+  types: {
+    context: {} as Context,
+    events: {} as Event,
+    input: {} as DeployActorInput,
+  },
+  actors: {
+    deploy: fromPromise(async ({input, signal}: {input: DeployActorInput; signal: AbortSignal}) => {
+      try {
+        if (!input.deployHook) {
+          throw new Error('No deployHook URL defined')
+        }
+        const res = await fetch(input.deployHook, {method: 'POST', signal})
+        const data = await res.json()
+        if (!res.ok) {
+          const errorMessage = (data?.error as Vercel.Error).message || res.statusText
+          throw errorMessage
+        }
+      } catch (err) {
+        if (typeof err === 'string') {
+          throw err
+        }
+        console.error('Unable to deploy with error:', err)
+        throw new Error('Please check the developer console for more information')
+      }
+    }),
+  },
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QTABwDYHsCeA6AlhOmAMQAiAogAoAyA8gJoDaADALqKiqaz4Au+TADtOIAB6IATCxa4AnADYAHAHYArArUslAZjksNAGhDZEARk3yVmhSxVyHC-QBYAvq+MoMOXF6zZ8ISgSCGEwAiEAN0wAa3C-HwSAoIRA6IBjAEMBYVY2PNFuXhyRJHFENTMzXElFJSUzNTVnWx0FY1MESXVcZzUdM2k1OTUVBoV3TzR-X2mcQOCwACclzCXcDGyAMzWAW1nvPCSF1KjMLJK8grKi-kFS0AkESura5QamlpY2jvMB+QcDkqLH0wxYEw8ICSuFgAFd0uk4LByNR6Mx2IUeHdhKIns1ZN9BtYQVpRnJfl1JM55P1BnY1Ep9CpGpMoXM8MtVksUbRGNcuFiSriKs4CQNurYRgZ7BSGr1ASNupIzEo+kp3JChJgUPAyklMcV7sKEABadomRAmtQAhW2wE6VnQwjEA3Yh7lBDOSQUsxeqyaPoWYbWFSO9kHfwLV1CspPHSSHQ1ZyA1UKJzJlQ+iz+5oKewKWrfNyQ6FwhFI6NG2OINOSXDiypKAxtMyZi1dEE1Qk6L0FpTSUMl8OctaVnHVhC1+uDRvNhStin6XDaHQ9liSXTJiUa1xAA */
+  id: 'deploy',
+  initial: 'idle',
+  context: ({input}) => ({
+    disabled: false,
+    feedback: undefined,
+    label: undefined,
+    error: undefined,
+    deployHook: input.deployHook,
+  }),
+  states: {
+    idle: {
+      entry: assign({
+        feedback: () => undefined,
+        label: () => 'Deploy',
+      }),
+      on: {
+        DEPLOY: {
+          target: 'deploying',
+        },
       },
-      states: {
-        idle: {
-          entry: assign({
-            feedback: () => undefined,
-            label: () => 'Deploy',
-          }),
-          on: {
-            DEPLOY: 'deploying',
-          },
+    },
+    deploying: {
+      entry: assign({
+        disabled: () => true,
+        label: () => 'Deploying',
+      }),
+      exit: assign({
+        disabled: () => false,
+        label: () => 'Deploy',
+      }),
+      invoke: {
+        src: 'deploy',
+        input: ({context}) => ({deployHook: context.deployHook}),
+        onDone: {
+          target: 'success',
         },
-        deploying: {
-          entry: assign({
-            disabled: () => true,
-            label: () => 'Deploying',
-          }),
-          exit: assign({
-            disabled: () => false,
-            label: () => 'Deploy',
-          }),
-          invoke: {
-            onDone: {
-              target: 'success',
-            },
-            onError: {
-              target: 'error',
-              actions: assign({
-                error: (_context, event) => {
-                  return event.data
-                },
-              }),
+        onError: {
+          target: 'error',
+          actions: assign({
+            error: ({event}) => {
+              if ('error' in event) {
+                return event.error as unknown as string
+              }
+              return 'Unknown error'
             },
-            src: 'deploy',
-          },
-        },
-        success: {
-          entry: [assign({feedback: () => 'Succesfully started!'})],
-          exit: assign({
-            feedback: () => undefined,
           }),
-          on: {
-            DEPLOY: 'deploying',
-          },
         },
-        error: {
-          on: {
-            DEPLOY: 'deploying',
-          },
+      },
+    },
+    success: {
+      entry: assign({
+        feedback: () => 'Successfully started!',
+      }),
+      exit: assign({
+        feedback: () => undefined,
+      }),
+      on: {
+        DEPLOY: {
+          target: 'deploying',
         },
       },
     },
-    // Config
-    {
-      services: {
-        deploy: (): Promise<void> => {
-          return new Promise(async (resolve, reject) => {
-            try {
-              if (!deployHook) {
-                return reject(new Error('No deployHook URL defined'))
-              }
-
-              const res = await fetch(deployHook, {method: 'POST'})
-              const data = await res.json()
-
-              if (!res.ok) {
-                const errorMessage = (data?.error as Vercel.Error).message || res.statusText
-                return reject(errorMessage)
-              }
-
-              return resolve()
-            } catch (err) {
-              console.error('Unable to deploy with error:', err)
-              return reject(new Error('Please check the developer console for more information'))
-            }
-          })
+    error: {
+      on: {
+        DEPLOY: {
+          target: 'deploying',
         },
       },
-    }
-  )
-
-export default deployMachine
+    },
+  },
+})