sanity-plugin-media 4.3.5 → 5.0.0

package/src/components/DialogTagCreate/DialogTagCreate.test.tsx

@@ -1,121 +0,0 @@
-import {screen, waitFor} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import {describe, expect, it, vi} from 'vitest'
-
-import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
-import {createTestRootState} from '../../__tests__/fixtures/rootState'
-import {getDialogRoot, inputByName, withinDialog} from '../../__tests__/fixtures/withinDialog'
-import {tagsActions} from '../../modules/tags'
-import DialogTagCreate from './index'
-
-describe('DialogTagCreate', () => {
-  it('dispatches tag create flow when form is valid', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-    )
-
-    const dlg = withinDialog(/create tag/i, screen)
-    await user.type(inputByName(/create tag/i, screen, 'name'), 'my-tag')
-    await user.click(dlg.getByRole('button', {name: /save and close/i}))
-
-    expect(store.getState().tags.creating).toBe(true)
-  })
-
-  it('dispatches createRequest with a trimmed tag name', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-    )
-    const dispatchSpy = vi.spyOn(store, 'dispatch')
-    const dlg = withinDialog(/create tag/i, screen)
-
-    await user.type(inputByName(/create tag/i, screen, 'name'), '  spaced  ')
-    await user.click(dlg.getByRole('button', {name: /save and close/i}))
-
-    await waitFor(() => {
-      let createAction
-      for (const call of dispatchSpy.mock.calls) {
-        const action = call[0]
-        if (tagsActions.createRequest.match(action)) {
-          createAction = action
-          break
-        }
-      }
-      expect(createAction).toBeDefined()
-      expect(createAction?.payload).toEqual({name: 'spaced'})
-    })
-  })
-
-  it('keeps Save disabled until the name is non-empty and valid', async () => {
-    const user = userEvent.setup()
-    renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-    )
-
-    expect(
-      withinDialog(/create tag/i, screen).getByRole('button', {name: /save and close/i}),
-    ).toBeDisabled()
-
-    const nameInput = inputByName(/create tag/i, screen, 'name')
-    await user.type(nameInput, 'a')
-    await user.tab()
-    await waitFor(() => {
-      expect(
-        withinDialog(/create tag/i, screen).getByRole('button', {name: /save and close/i}),
-      ).not.toBeDisabled()
-    })
-  })
-
-  it('clears the entire dialog stack when the dialog close control is used', async () => {
-    const user = userEvent.setup()
-    const base = createTestRootState({
-      dialog: {
-        items: [
-          {id: 'dlg-1', type: 'tagCreate'},
-          {id: 'tags', type: 'tags'},
-        ],
-      },
-    })
-
-    const {store} = renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-      {preloaded: base},
-    )
-
-    const dlg = withinDialog(/create tag/i, screen)
-    await user.click(dlg.getByRole('button', {name: /close dialog/i}))
-
-    expect(store.getState().dialog.items).toEqual([])
-  })
-
-  it('shows an error indicator beside the name when tag creation failed on the server', async () => {
-    const base = createTestRootState({
-      tags: {
-        ...createTestRootState().tags,
-        creatingError: {message: 'Tag already exists', statusCode: 409},
-      },
-    })
-
-    renderWithProviders(
-      <DialogTagCreate dialog={{id: 'dlg-1', type: 'tagCreate'}}>
-        <span />
-      </DialogTagCreate>,
-      {preloaded: base},
-    )
-
-    await waitFor(() => {
-      expect(
-        getDialogRoot(/create tag/i, screen).querySelector('[data-sanity-icon="error-outline"]'),
-      ).toBeTruthy()
-    })
-  })
-})

package/src/components/DialogTagCreate/index.tsx

@@ -1,103 +0,0 @@
-import {Box, Flex} from '@sanity/ui'
-import {type ReactNode, useEffect} from 'react'
-import {type SubmitHandler, useForm} from 'react-hook-form'
-import {useDispatch} from 'react-redux'
-
-import {tagFormSchema} from '../../formSchema'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {dialogActions} from '../../modules/dialog'
-import {tagsActions} from '../../modules/tags'
-import type {DialogTagCreateProps, TagFormData} from '../../types'
-import sanitizeFormData from '../../utils/sanitizeFormData'
-import zodFormResolver from '../../utils/zodFormResolver'
-import Dialog from '../Dialog'
-import FormFieldInputText from '../FormFieldInputText'
-import FormSubmitButton from '../FormSubmitButton'
-
-type Props = {
-  children: ReactNode
-  dialog: DialogTagCreateProps
-}
-
-const DialogTagCreate = (props: Props) => {
-  const {
-    children,
-    dialog: {id},
-  } = props
-
-  const dispatch = useDispatch()
-
-  const creating = useTypedSelector((state) => state.tags.creating)
-  const creatingError = useTypedSelector((state) => state.tags.creatingError)
-
-  const {
-    // Read the formState before render to subscribe the form state through Proxy
-    formState: {errors, isDirty, isValid},
-    handleSubmit,
-    register,
-    setError,
-  } = useForm<TagFormData>({
-    defaultValues: {
-      name: '',
-    },
-    mode: 'onChange',
-    resolver: zodFormResolver<TagFormData>(tagFormSchema),
-  })
-
-  const formUpdating = creating
-
-  const handleClose = () => {
-    dispatch(dialogActions.clear())
-  }
-
-  // - submit react-hook-form
-  const onSubmit: SubmitHandler<TagFormData> = (formData) => {
-    const sanitizedFormData = sanitizeFormData(formData)
-
-    dispatch(tagsActions.createRequest({name: sanitizedFormData.name}))
-  }
-
-  useEffect(() => {
-    if (creatingError) {
-      setError('name', {
-        message: creatingError?.message,
-      })
-    }
-  }, [creatingError, setError])
-
-  const Footer = () => (
-    <Box padding={3}>
-      <Flex justify="flex-end">
-        {/* Submit button */}
-        <FormSubmitButton
-          disabled={formUpdating || !isDirty || !isValid}
-          isValid={isValid}
-          onClick={handleSubmit(onSubmit)}
-        />
-      </Flex>
-    </Box>
-  )
-
-  return (
-    <Dialog animate footer={<Footer />} header="Create Tag" id={id} onClose={handleClose} width={1}>
-      {/* Form fields */}
-      <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
-        {/* Hidden button to enable enter key submissions */}
-        <button style={{display: 'none'}} tabIndex={-1} type="submit" />
-
-        {/* Title */}
-        <FormFieldInputText
-          {...register('name')}
-          disabled={formUpdating}
-          error={errors?.name?.message}
-          label="Name"
-          name="name"
-        />
-      </Box>
-
-      {children}
-    </Dialog>
-  )
-}
-
-export default DialogTagCreate

package/src/components/DialogTagEdit/DialogTagEdit.test.tsx

@@ -1,165 +0,0 @@
-import {fireEvent, screen, waitFor} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import {Subject} from 'rxjs'
-import {describe, expect, it, vi} from 'vitest'
-
-import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
-import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
-import {createTestRootState} from '../../__tests__/fixtures/rootState'
-import {inputByName, withinDialog} from '../../__tests__/fixtures/withinDialog'
-import {tagsActions} from '../../modules/tags'
-import type {Tag} from '../../types'
-import DialogTagEdit from './index'
-
-const tag: Tag = {
-  _id: 't1',
-  _type: 'media.tag',
-  _createdAt: '',
-  _updatedAt: '',
-  _rev: 'r1',
-  name: {_type: 'slug', current: 'alpha'},
-}
-
-const tagsPreloaded = {
-  allIds: ['t1'],
-  byIds: {
-    t1: {_type: 'tag' as const, tag, picked: false, updating: false},
-  },
-  creating: false,
-  fetchCount: -1,
-  fetching: false,
-  panelVisible: true,
-}
-
-vi.mock('../../hooks/useVersionedClient', () => ({
-  default: () =>
-    createMockSanityClient({
-      listen: vi.fn(() => new Subject()),
-    }),
-}))
-
-describe('DialogTagEdit', () => {
-  it('dispatches updateRequest when name changes and form submits', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {
-        preloaded: {
-          tags: tagsPreloaded,
-        },
-      },
-    )
-
-    const dlg = withinDialog(/edit tag/i, screen)
-    const input = inputByName(/edit tag/i, screen, 'name')
-    await user.clear(input)
-    await user.type(input, 'beta')
-    await user.click(dlg.getByRole('button', {name: /save and close/i}))
-
-    expect(store.getState().tags.byIds.t1.updating).toBe(true)
-  })
-
-  it('dispatches updateRequest with slug-shaped form data', async () => {
-    const user = userEvent.setup()
-    const {store} = renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {
-        preloaded: {
-          tags: tagsPreloaded,
-        },
-      },
-    )
-    const dispatchSpy = vi.spyOn(store, 'dispatch')
-    const dlg = withinDialog(/edit tag/i, screen)
-
-    const input = inputByName(/edit tag/i, screen, 'name')
-    await user.clear(input)
-    await user.type(input, 'gamma')
-    await user.click(dlg.getByRole('button', {name: /save and close/i}))
-
-    await waitFor(() => {
-      let updateAction
-      for (const call of dispatchSpy.mock.calls) {
-        const action = call[0]
-        if (tagsActions.updateRequest.match(action)) {
-          updateAction = action
-          break
-        }
-      }
-      expect(updateAction).toBeDefined()
-      expect(updateAction?.payload).toMatchObject({
-        closeDialogId: 't1',
-        formData: {
-          name: {_type: 'slug', current: 'gamma'},
-        },
-        tag,
-      })
-    })
-  })
-
-  it('does not enable Save until the name is edited', () => {
-    renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {
-        preloaded: {
-          tags: tagsPreloaded,
-        },
-      },
-    )
-
-    const dlg = withinDialog(/edit tag/i, screen)
-    expect(dlg.getByRole('button', {name: /save and close/i})).toBeDisabled()
-  })
-
-  it('removes only this dialog when closed', async () => {
-    const user = userEvent.setup()
-    const base = createTestRootState({
-      dialog: {
-        items: [
-          {id: 'dlg-1', type: 'tagEdit', tagId: 't1'},
-          {id: 'tags', type: 'tags'},
-        ],
-      },
-      tags: tagsPreloaded,
-    })
-
-    const {store} = renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {preloaded: base},
-    )
-
-    const dlg = withinDialog(/edit tag/i, screen)
-    await user.click(dlg.getByRole('button', {name: /close dialog/i}))
-
-    expect(store.getState().dialog.items).toEqual([{id: 'tags', type: 'tags'}])
-  })
-
-  it('opens the delete confirmation dialog when Delete is clicked', async () => {
-    const {store} = renderWithProviders(
-      <DialogTagEdit dialog={{id: 'dlg-1', type: 'tagEdit', tagId: 't1'}}>
-        <span />
-      </DialogTagEdit>,
-      {
-        preloaded: {
-          tags: tagsPreloaded,
-        },
-      },
-    )
-
-    const dlg = withinDialog(/edit tag/i, screen)
-    fireEvent.click(dlg.getByRole('button', {name: /^delete$/i}))
-
-    const confirm = store.getState().dialog.items.find((d) => d.type === 'confirm')
-    expect(confirm).toBeDefined()
-    expect(confirm?.title).toMatch(/permanently delete/i)
-    expect(confirm?.headerTitle).toBe('Confirm deletion')
-  })
-})

package/src/components/DialogTagEdit/index.tsx

@@ -1,190 +0,0 @@
-import type {MutationEvent} from '@sanity/client'
-import {Box, Button, Card, Flex, Text} from '@sanity/ui'
-import groq from 'groq'
-import {type ReactNode, useCallback, useEffect, useState} from 'react'
-import {type SubmitHandler, useForm} from 'react-hook-form'
-import {useDispatch} from 'react-redux'
-
-import {tagFormSchema} from '../../formSchema'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import useVersionedClient from '../../hooks/useVersionedClient'
-import {dialogActions} from '../../modules/dialog'
-import {selectTagById, tagsActions} from '../../modules/tags'
-import type {DialogTagEditProps, Tag, TagFormData} from '../../types'
-import sanitizeFormData from '../../utils/sanitizeFormData'
-import zodFormResolver from '../../utils/zodFormResolver'
-import Dialog from '../Dialog'
-import FormFieldInputText from '../FormFieldInputText'
-import FormSubmitButton from '../FormSubmitButton'
-
-type Props = {
-  children: ReactNode
-  dialog: DialogTagEditProps
-}
-
-const DialogTagEdit = (props: Props) => {
-  const {
-    children,
-    dialog: {id, tagId},
-  } = props
-
-  const client = useVersionedClient()
-
-  const dispatch = useDispatch()
-  const tagItem = useTypedSelector((state) => selectTagById(state, String(tagId))) // TODO: double check string cast
-
-  // - Generate a snapshot of the current tag
-  const [tagSnapshot, setTagSnapshot] = useState(tagItem?.tag)
-
-  const currentTag = tagItem ? tagItem?.tag : tagSnapshot
-  const generateDefaultValues = (tag?: Tag) => ({
-    name: tag?.name?.current || '',
-  })
-
-  const {
-    // Read the formState before render to subscribe the form state through Proxy
-    formState: {errors, isDirty, isValid},
-    handleSubmit,
-    register,
-    reset,
-    setError,
-  } = useForm<TagFormData>({
-    defaultValues: generateDefaultValues(tagItem?.tag),
-    mode: 'onChange',
-    resolver: zodFormResolver<TagFormData>(tagFormSchema),
-  })
-
-  const formUpdating = !tagItem || tagItem?.updating
-
-  const handleClose = () => {
-    dispatch(dialogActions.remove({id}))
-  }
-
-  // Submit react-hook-form
-  const onSubmit: SubmitHandler<TagFormData> = (formData) => {
-    if (!tagItem?.tag) {
-      return
-    }
-    const sanitizedFormData = sanitizeFormData(formData)
-    dispatch(
-      tagsActions.updateRequest({
-        closeDialogId: tagItem?.tag?._id,
-        formData: {
-          name: {
-            _type: 'slug',
-            current: sanitizedFormData.name,
-          },
-        },
-        tag: tagItem?.tag,
-      }),
-    )
-  }
-
-  const handleDelete = () => {
-    if (!tagItem?.tag) {
-      return
-    }
-
-    dispatch(
-      dialogActions.showConfirmDeleteTag({
-        closeDialogId: tagItem?.tag?._id,
-        tag: tagItem?.tag,
-      }),
-    )
-  }
-
-  const handleTagUpdate = useCallback(
-    (update: MutationEvent) => {
-      const {result, transition} = update
-      if (result && transition === 'update') {
-        // Regenerate snapshot
-        setTagSnapshot(result as Tag)
-        // Reset react-hook-form
-        reset(generateDefaultValues(result as Tag))
-      }
-    },
-    [reset],
-  )
-
-  useEffect(() => {
-    if (tagItem?.error) {
-      setError('name', {
-        message: tagItem.error?.message,
-      })
-    }
-  }, [setError, tagItem.error])
-
-  // - Listen for asset mutations and update snapshot
-  useEffect(() => {
-    if (!tagItem?.tag) {
-      return undefined
-    }
-
-    // Remember that Sanity listeners ignore joins, order clauses and projections
-    const subscriptionAsset = client
-      .listen(groq`*[_id == $id]`, {id: tagItem?.tag._id})
-      .subscribe(handleTagUpdate)
-
-    return () => {
-      subscriptionAsset?.unsubscribe()
-    }
-  }, [client, handleTagUpdate, tagItem?.tag])
-
-  const Footer = () => (
-    <Box padding={3}>
-      <Flex justify="space-between">
-        {/* Delete button */}
-        <Button
-          disabled={formUpdating}
-          fontSize={1}
-          mode="bleed"
-          onClick={handleDelete}
-          text="Delete"
-          tone="critical"
-        />
-
-        {/* Submit button */}
-        <FormSubmitButton
-          disabled={formUpdating || !isDirty || !isValid}
-          isValid={isValid}
-          lastUpdated={tagItem?.tag?._updatedAt}
-          onClick={handleSubmit(onSubmit)}
-        />
-      </Flex>
-    </Box>
-  )
-
-  if (!currentTag) {
-    return null
-  }
-
-  return (
-    <Dialog animate footer={<Footer />} header="Edit Tag" id={id} onClose={handleClose} width={1}>
-      {/* Form fields */}
-      <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
-        {/* Deleted notification */}
-        {!tagItem && (
-          <Card marginBottom={3} padding={3} radius={2} shadow={1} tone="critical">
-            <Text size={1}>This tag cannot be found – it may have been deleted.</Text>
-          </Card>
-        )}
-
-        {/* Hidden button to enable enter key submissions */}
-        <button style={{display: 'none'}} tabIndex={-1} type="submit" />
-
-        {/* Title */}
-        <FormFieldInputText
-          {...register('name')}
-          disabled={formUpdating}
-          error={errors?.name?.message}
-          label="Name"
-          name="name"
-        />
-      </Box>
-
-      {children}
-    </Dialog>
-  )
-}
-
-export default DialogTagEdit

package/src/components/DialogTags/index.tsx

@@ -1,45 +0,0 @@
-import {Box} from '@sanity/ui'
-import {type ReactNode, useCallback} from 'react'
-import {useDispatch} from 'react-redux'
-
-import {dialogActions} from '../../modules/dialog'
-import type {DialogTagsProps} from '../../types'
-import Dialog from '../Dialog'
-import TagView from '../TagView'
-
-type Props = {
-  children: ReactNode
-  dialog: DialogTagsProps
-}
-
-const DialogTags = (props: Props) => {
-  const {
-    children,
-    dialog: {id},
-  } = props
-
-  // Redux
-  const dispatch = useDispatch()
-
-  // Callbacks
-  const handleClose = useCallback(() => {
-    dispatch(dialogActions.clear())
-  }, [])
-
-  return (
-    <Dialog animate header="All Tags" id={id} onClose={handleClose} width={1}>
-      <Box
-        style={{
-          height: '100%',
-          minHeight: '420px', // explicit height required as <TagView> is virtualized
-        }}
-      >
-        <TagView />
-      </Box>
-
-      {children}
-    </Dialog>
-  )
-}
-
-export default DialogTags

package/src/components/Dialogs/index.tsx

@@ -1,76 +0,0 @@
-import useTypedSelector from '../../hooks/useTypedSelector'
-import type {Dialog} from '../../types'
-import DialogAssetEdit from '../DialogAssetEdit'
-import DialogConfirm from '../DialogConfirm'
-import DialogSearchFacets from '../DialogSearchFacets'
-import DialogTagCreate from '../DialogTagCreate'
-import DialogTagEdit from '../DialogTagEdit'
-import DialogTags from '../DialogTags'
-
-const Dialogs = () => {
-  // Redux
-  const currentDialogs = useTypedSelector((state) => state.dialog.items)
-
-  const renderDialogs = (dialogs: Dialog[], index: number) => {
-    if (dialogs.length === 0 || index >= dialogs.length) {
-      return null
-    }
-
-    const dialog = dialogs[index]
-    const childDialogs = renderDialogs(dialogs, index + 1)
-
-    if (dialog.type === 'assetEdit') {
-      return (
-        <DialogAssetEdit dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogAssetEdit>
-      )
-    }
-
-    if (dialog.type === 'confirm') {
-      return (
-        <DialogConfirm dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogConfirm>
-      )
-    }
-
-    if (dialog.type === 'searchFacets') {
-      return (
-        <DialogSearchFacets dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogSearchFacets>
-      )
-    }
-
-    if (dialog.type === 'tagCreate') {
-      return (
-        <DialogTagCreate dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogTagCreate>
-      )
-    }
-
-    if (dialog.type === 'tagEdit') {
-      return (
-        <DialogTagEdit dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogTagEdit>
-      )
-    }
-
-    if (dialog.type === 'tags') {
-      return (
-        <DialogTags dialog={dialog} key={index}>
-          {childDialogs}
-        </DialogTags>
-      )
-    }
-
-    return null
-  }
-
-  return renderDialogs(currentDialogs, 0)
-}
-
-export default Dialogs