sanity-plugin-media 4.3.6 → 5.0.1

package/src/components/DialogAssetEdit/DialogAssetEdit.test.tsx

@@ -1,216 +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 DialogAssetEdit from './index'
-
-vi.mock('../Image', () => ({default: () => null}))
-vi.mock('../FileAssetPreview', () => ({default: () => null}))
-vi.mock('../DocumentList', () => ({default: () => null}))
-vi.mock('../AssetMetadata', () => ({default: () => null}))
-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 {assetsActions, initialState as assetsInitialState} from '../../modules/assets'
-import type {RootReducerState} from '../../modules/types'
-import type {AssetType, ImageAsset, MediaToolOptions} from '../../types'
-
-const asset = {
-  _id: 'a1',
-  _type: 'sanity.imageAsset',
-  _createdAt: '',
-  _updatedAt: '',
-  _rev: 'r1',
-  originalFilename: 'x.png',
-  size: 1,
-  mimeType: 'image/png',
-  url: 'https://example.com/x.png',
-  metadata: {dimensions: {width: 100, height: 100}, isOpaque: true},
-} as ImageAsset
-
-const assetsPreloaded = {
-  ...assetsInitialState,
-  assetTypes: ['image'] as AssetType[],
-  allIds: ['a1'],
-  byIds: {
-    a1: {_type: 'asset' as const, asset, picked: false, updating: false},
-  },
-}
-
-vi.mock('sanity', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('sanity')>()
-  return {
-    ...actual,
-    WithReferringDocuments: ({children}: {children: (args: unknown) => unknown}) =>
-      children({isLoading: false, referringDocuments: []}),
-    useDocumentStore: () => ({}),
-  }
-})
-
-vi.mock('../../hooks/useVersionedClient', () => ({
-  default: () =>
-    createMockSanityClient({
-      listen: vi.fn(() => new Subject()),
-    }),
-}))
-
-function renderAssetDialog(
-  dialog: {id: string; type: 'assetEdit'; assetId: string},
-  opts: {
-    preloaded?: Partial<RootReducerState>
-    toolOptions?: Partial<MediaToolOptions>
-  } = {},
-) {
-  const {preloaded: extraPreloaded, toolOptions} = opts
-  return renderWithProviders(
-    <DialogAssetEdit dialog={dialog}>
-      <span />
-    </DialogAssetEdit>,
-    {
-      preloaded: {
-        assets: assetsPreloaded,
-        ...extraPreloaded,
-      },
-      toolOptions: {creditLine: {enabled: true}, ...toolOptions},
-    },
-  )
-}
-
-describe('DialogAssetEdit', () => {
-  it('renders asset details header and details tab', () => {
-    renderAssetDialog({
-      id: 'dlg-1',
-      type: 'assetEdit',
-      assetId: 'a1',
-    })
-
-    const dlg = withinDialog(/asset details/i, screen)
-    expect(dlg.getByText('Asset details')).toBeInTheDocument()
-    expect(dlg.getByRole('tab', {name: 'Details'})).toBeInTheDocument()
-  })
-
-  it('keeps Save disabled until a field is edited', () => {
-    renderAssetDialog({
-      id: 'dlg-1',
-      type: 'assetEdit',
-      assetId: 'a1',
-    })
-
-    const dlg = withinDialog(/asset details/i, screen)
-    expect(dlg.getByRole('button', {name: /save and close/i})).toBeDisabled()
-  })
-
-  it('dispatches asset update when a field changes and the form is submitted', async () => {
-    const user = userEvent.setup()
-    const {store} = renderAssetDialog({
-      id: 'dlg-1',
-      type: 'assetEdit',
-      assetId: 'a1',
-    })
-    const dispatchSpy = vi.spyOn(store, 'dispatch')
-    const dlg = withinDialog(/asset details/i, screen)
-
-    await user.type(inputByName(/asset details/i, screen, 'title'), 'Hero image')
-    await user.click(dlg.getByRole('button', {name: /save and close/i}))
-
-    expect(store.getState().assets.byIds['a1']!.updating).toBe(true)
-
-    await waitFor(() => {
-      let updateAction
-      for (const call of dispatchSpy.mock.calls) {
-        const action = call[0]
-        if (assetsActions.updateRequest.match(action)) {
-          updateAction = action
-          break
-        }
-      }
-      expect(updateAction).toBeDefined()
-      expect(updateAction?.payload).toMatchObject({
-        asset,
-        closeDialogId: 'a1',
-        formData: expect.objectContaining({
-          title: 'Hero image',
-          originalFilename: 'x.png',
-        }),
-      })
-    })
-  })
-
-  it('removes only this dialog when closed', async () => {
-    const user = userEvent.setup()
-    const base = createTestRootState({
-      dialog: {
-        items: [
-          {id: 'dlg-1', type: 'assetEdit', assetId: 'a1'},
-          {id: 'tags', type: 'tags'},
-        ],
-      },
-      assets: assetsPreloaded,
-    })
-
-    const {store} = renderWithProviders(
-      <DialogAssetEdit
-        dialog={{
-          id: 'dlg-1',
-          type: 'assetEdit',
-          assetId: 'a1',
-        }}
-      >
-        <span />
-      </DialogAssetEdit>,
-      {
-        preloaded: base,
-        toolOptions: {creditLine: {enabled: true}},
-      },
-    )
-
-    const dlg = withinDialog(/asset details/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} = renderAssetDialog({
-      id: 'dlg-1',
-      type: 'assetEdit',
-      assetId: 'a1',
-    })
-
-    const dlg = withinDialog(/asset details/i, screen)
-    fireEvent.click(dlg.getByRole('button', {name: /^delete$/i}))
-
-    await waitFor(() => {
-      let confirm
-      for (const d of store.getState().dialog.items) {
-        if (d.type === 'confirm') {
-          confirm = d
-          break
-        }
-      }
-      expect(confirm).toBeDefined()
-      expect(confirm?.title).toMatch(/permanently delete/i)
-      expect(confirm?.headerTitle).toBe('Confirm deletion')
-    })
-  })
-
-  it('switches to the References tab when that tab is activated', async () => {
-    const user = userEvent.setup()
-    renderAssetDialog({
-      id: 'dlg-1',
-      type: 'assetEdit',
-      assetId: 'a1',
-    })
-
-    const dlg = withinDialog(/asset details/i, screen)
-    const referencesTab = dlg.getByRole('tab', {name: /references/i})
-    expect(referencesTab).toHaveAttribute('aria-selected', 'false')
-
-    await user.click(referencesTab)
-
-    expect(referencesTab).toHaveAttribute('aria-selected', 'true')
-    expect(dlg.getByRole('tab', {name: 'Details'})).toHaveAttribute('aria-selected', 'false')
-  })
-})

package/src/components/DialogAssetEdit/index.tsx

@@ -1,493 +0,0 @@
-import type {MutationEvent} from '@sanity/client'
-import {Box, Button, Card, Flex, Stack, Tab, TabList, TabPanel, Text} from '@sanity/ui'
-import groq from 'groq'
-import {type ReactNode, useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {type SubmitHandler, useForm} from 'react-hook-form'
-import {useDispatch} from 'react-redux'
-import {WithReferringDocuments, useColorSchemeValue, useDocumentStore} from 'sanity'
-
-import {useToolOptions} from '../../contexts/ToolOptionsContext'
-import {getAssetFormSchema} from '../../formSchema'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import useVersionedClient from '../../hooks/useVersionedClient'
-import {assetsActions, selectAssetById} from '../../modules/assets'
-import {dialogActions} from '../../modules/dialog'
-import {selectTags, selectTagSelectOptions, tagsActions} from '../../modules/tags'
-import type {Asset, AssetFormData, DialogAssetEditProps, TagSelectOption} from '../../types'
-import getTagSelectOptions from '../../utils/getTagSelectOptions'
-import {getUniqueDocuments} from '../../utils/getUniqueDocuments'
-import imageDprUrl from '../../utils/imageDprUrl'
-import sanitizeFormData from '../../utils/sanitizeFormData'
-import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
-import zodFormResolver from '../../utils/zodFormResolver'
-import AssetMetadata from '../AssetMetadata'
-import Dialog from '../Dialog'
-import DocumentList from '../DocumentList'
-import FileAssetPreview from '../FileAssetPreview'
-import FormSubmitButton from '../FormSubmitButton'
-import Image from '../Image'
-import Details, {type DetailsProps} from './Details'
-
-function renderDefaultDetails(props: DetailsProps) {
-  return <Details {...props} />
-}
-
-type Props = {
-  children: ReactNode
-  dialog: DialogAssetEditProps
-}
-
-const DialogAssetEdit = (props: Props) => {
-  const {
-    children,
-    dialog: {assetId, id, lastCreatedTag, lastRemovedTagIds},
-  } = props
-
-  const client = useVersionedClient()
-  const scheme = useColorSchemeValue()
-
-  const documentStore = useDocumentStore()
-
-  const dispatch = useDispatch()
-  const assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))) // TODO: check casting
-  const tags = useTypedSelector(selectTags)
-
-  const assetUpdatedPrev = useRef<string | undefined>(undefined)
-
-  // Generate a snapshot of the current asset
-  const [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset)
-  const [tabSection, setTabSection] = useState<'details' | 'references'>('details')
-
-  const currentAsset = assetItem ? assetItem?.asset : assetSnapshot
-  const allTagOptions = getTagSelectOptions(tags)
-
-  const assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset))
-
-  // Check if credit line options are configured
-  const {creditLine, components: {details: CustomDetails} = {}, locales} = useToolOptions()
-
-  const generateDefaultValues = useCallback(
-    (asset?: Asset): AssetFormData => {
-      if (locales && locales.length > 0) {
-        const makeLocaleObj = (field?: Record<string, string> | string) => {
-          const obj: Record<string, string> = {}
-          for (let i = 0; i < locales.length; i++) {
-            const locale = locales[i]!
-            if (typeof field === 'object' && field && field[locale.id]) {
-              obj[locale.id] = field[locale.id]!
-            } else if (typeof field === 'string') {
-              // Only populate the first locale to avoid spreading a legacy value
-              // across all languages; the user should fill in other translations manually
-              obj[locale.id] = i === 0 ? field : ''
-            } else {
-              obj[locale.id] = ''
-            }
-          }
-          return obj
-        }
-        return {
-          altText: makeLocaleObj(asset?.altText),
-          creditLine: makeLocaleObj(asset?.creditLine),
-          description: makeLocaleObj(asset?.description),
-          originalFilename: asset?.originalFilename || '',
-          opt: {media: {tags: assetTagOptions}},
-          title: makeLocaleObj(asset?.title),
-        }
-      }
-      // Normalize: if a field is a localized object but locales are disabled, pick first non-empty value
-      const flattenField = (field: unknown): string => {
-        if (typeof field === 'string') return field
-        if (typeof field === 'object' && field !== null) {
-          const values = Object.values(field as Record<string, string>)
-          return values.find((v) => v) || ''
-        }
-        return ''
-      }
-      return {
-        altText: flattenField(asset?.altText),
-        creditLine: flattenField(asset?.creditLine),
-        description: flattenField(asset?.description),
-        originalFilename: asset?.originalFilename || '',
-        opt: {media: {tags: assetTagOptions}},
-        title: flattenField(asset?.title),
-      }
-    },
-    [assetTagOptions, locales],
-  )
-
-  const {
-    control,
-    // Read the formState before render to subscribe the form state through Proxy
-    formState: {errors, isDirty, isValid},
-    getValues,
-    handleSubmit,
-    register,
-    reset,
-    setValue,
-  } = useForm<AssetFormData>({
-    defaultValues: generateDefaultValues(assetItem?.asset),
-    mode: 'onChange',
-    resolver: zodFormResolver<AssetFormData>(getAssetFormSchema(locales)),
-  })
-
-  const formUpdating = !assetItem || assetItem?.updating
-
-  const handleClose = useCallback(() => {
-    dispatch(dialogActions.remove({id}))
-  }, [dispatch, id])
-
-  const handleDelete = useCallback(() => {
-    if (!assetItem?.asset) {
-      return
-    }
-
-    dispatch(
-      dialogActions.showConfirmDeleteAssets({
-        assets: [assetItem],
-        closeDialogId: assetItem?.asset._id,
-      }),
-    )
-  }, [assetItem, dispatch])
-
-  const handleAssetUpdate = useCallback((update: MutationEvent) => {
-    const {result, transition} = update
-    if (result && transition === 'update') {
-      // Regenerate asset snapshot
-      setAssetSnapshot(result as Asset)
-    }
-  }, [])
-
-  const handleCreateTag = useCallback(
-    (tagName: string) => {
-      // Dispatch action to create new tag
-      dispatch(
-        tagsActions.createRequest({
-          assetId: currentAsset?._id,
-          name: tagName,
-        }),
-      )
-    },
-    [currentAsset?._id, dispatch],
-  )
-
-  // Detect if asset has localized fields (objects) with keys not in the configured locales
-  const hasOrphanedLocales = useMemo(() => {
-    if (!currentAsset) return false
-    const isLocaleObj = (v: unknown) => typeof v === 'object' && v !== null && !Array.isArray(v)
-    const fields = [
-      currentAsset.title,
-      currentAsset.altText,
-      currentAsset.description,
-      ...(currentAsset._type === 'sanity.imageAsset' ? [currentAsset.creditLine] : []),
-    ]
-    const anyLocalized = fields.some((f) => isLocaleObj(f))
-    if (!anyLocalized) return false
-    if (!locales || locales.length === 0) return true
-    const configuredIds = new Set(locales.map((l) => l.id))
-    return fields.some((f) => {
-      if (!isLocaleObj(f)) return false
-      return Object.keys(f as object).some((k) => !configuredIds.has(k))
-    })
-  }, [currentAsset, locales])
-
-  const handleCleanupLocales = useCallback(async () => {
-    if (!currentAsset) return
-
-    const cleanField = (field: unknown): unknown => {
-      if (typeof field !== 'object' || field === null || Array.isArray(field)) return field
-      const obj = field as Record<string, string>
-      if (!locales || locales.length === 0) {
-        // Pick the first non-empty value sorted by key for determinism
-        const sorted = Object.keys(obj).sort()
-        return sorted.map((k) => obj[k]).find((v) => v) || ''
-      }
-      const configuredIds = new Set(locales.map((l) => l.id))
-      const cleaned: Record<string, string> = {}
-      for (const [key, val] of Object.entries(obj)) {
-        if (configuredIds.has(key)) cleaned[key] = val
-      }
-      return cleaned
-    }
-
-    await client
-      .patch(currentAsset._id)
-      .set({
-        title: cleanField(currentAsset.title),
-        altText: cleanField(currentAsset.altText),
-        description: cleanField(currentAsset.description),
-        ...(currentAsset._type === 'sanity.imageAsset' && {
-          creditLine: cleanField(currentAsset.creditLine),
-        }),
-      })
-      .commit()
-  }, [client, currentAsset, locales])
-
-  // Submit react-hook-form
-  const onSubmit: SubmitHandler<AssetFormData> = useCallback(
-    (formData) => {
-      if (!assetItem?.asset) {
-        return
-      }
-
-      const sanitizedFormData = sanitizeFormData(formData)
-
-      dispatch(
-        assetsActions.updateRequest({
-          asset: assetItem?.asset,
-          closeDialogId: assetItem?.asset._id,
-          formData: {
-            ...sanitizedFormData,
-            // Map tags to sanity references
-            opt: {
-              media: {
-                ...sanitizedFormData['opt'].media,
-                tags:
-                  sanitizedFormData['opt'].media.tags?.map((tag: TagSelectOption) => ({
-                    _ref: tag.value,
-                    _type: 'reference',
-                    _weak: true,
-                  })) || null,
-              },
-            },
-          },
-        }),
-      )
-    },
-    [assetItem?.asset, dispatch],
-  )
-
-  // Listen for asset mutations and update snapshot
-  useEffect(() => {
-    if (!assetItem?.asset) {
-      return undefined
-    }
-
-    // Remember that Sanity listeners ignore joins, order clauses and projections
-    const subscriptionAsset = client
-      .listen(groq`*[_id == $id]`, {id: assetItem?.asset._id})
-      .subscribe(handleAssetUpdate)
-
-    return () => {
-      subscriptionAsset?.unsubscribe()
-    }
-  }, [assetItem?.asset, client, handleAssetUpdate])
-
-  // Update tags form field (react-select) when a new _inline_ tag has been created
-  useEffect(() => {
-    if (lastCreatedTag) {
-      const existingTags = (getValues('opt.media.tags') as TagSelectOption[]) || []
-      const updatedTags = existingTags.concat([lastCreatedTag])
-      setValue('opt.media.tags', updatedTags, {shouldDirty: true})
-    }
-  }, [getValues, lastCreatedTag, setValue])
-
-  // Update tags form field (react-select) when an _inline_ tag has been removed elsewhere
-  useEffect(() => {
-    if (lastRemovedTagIds) {
-      const existingTags = (getValues('opt.media.tags') as TagSelectOption[]) || []
-      const updatedTags = existingTags.filter((tag) => {
-        return !lastRemovedTagIds.includes(tag.value)
-      })
-
-      setValue('opt.media.tags', updatedTags, {shouldDirty: true})
-    }
-  }, [getValues, lastRemovedTagIds, setValue])
-
-  // Reset react-hook-form local state on mount and every time the asset has been updated elsewhere
-  useEffect(() => {
-    if (assetUpdatedPrev.current !== assetItem?.asset._updatedAt) {
-      reset(generateDefaultValues(assetItem?.asset))
-    }
-    assetUpdatedPrev.current = assetItem?.asset._updatedAt
-  }, [assetItem?.asset, generateDefaultValues, reset])
-
-  const Footer = () => (
-    <Box padding={3}>
-      <Stack space={3}>
-        {hasOrphanedLocales && (
-          <Card padding={3} radius={2} shadow={1} tone="caution">
-            <Flex align="center" justify="space-between" gap={3}>
-              <Text size={1}>
-                This asset has localized fields that are no longer configured. Clean them up to
-                avoid validation errors.
-              </Text>
-              <Button
-                fontSize={1}
-                mode="ghost"
-                onClick={handleCleanupLocales}
-                text="Cleanup localized fields"
-                tone="caution"
-              />
-            </Flex>
-          </Card>
-        )}
-        <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 || hasOrphanedLocales}
-            isValid={isValid}
-            lastUpdated={currentAsset?._updatedAt}
-            onClick={handleSubmit(onSubmit)}
-          />
-        </Flex>
-      </Stack>
-    </Box>
-  )
-
-  if (!currentAsset) {
-    return null
-  }
-
-  const detailsProps = {
-    control,
-    errors,
-    formUpdating,
-    register,
-    setValue,
-    assetTagOptions,
-    allTagOptions,
-    handleCreateTag,
-    currentAsset,
-    creditLine,
-    locales,
-  }
-
-  return (
-    <Dialog
-      animate
-      // oxlint-disable-next-line react/react-compiler
-      footer={<Footer />}
-      header="Asset details"
-      id={id}
-      onClose={handleClose}
-      width={3}
-    >
-      {/*
-        We reverse direction to ensure the download button doesn't appear (in the DOM) before other tabbable items.
-        This ensures that the dialog doesn't scroll down to the download button (which on smaller screens, can sometimes
-        be below the fold).
-      */}
-      <Flex direction={['column-reverse', 'column-reverse', 'row-reverse']}>
-        <Box flex={1} marginTop={[5, 5, 0]} padding={4}>
-          <WithReferringDocuments documentStore={documentStore} id={currentAsset._id}>
-            {({isLoading, referringDocuments}) => {
-              const uniqueReferringDocuments = getUniqueDocuments(referringDocuments)
-              return (
-                <>
-                  {/* Tabs */}
-                  <TabList space={2}>
-                    <Tab
-                      aria-controls="details-panel"
-                      disabled={formUpdating}
-                      id="details-tab"
-                      label="Details"
-                      onClick={() => setTabSection('details')}
-                      selected={tabSection === 'details'}
-                      size={2}
-                    />
-                    <Tab
-                      aria-controls="references-panel"
-                      disabled={formUpdating}
-                      id="references-tab"
-                      label={`References${
-                        !isLoading && Array.isArray(uniqueReferringDocuments)
-                          ? ` (${uniqueReferringDocuments.length})`
-                          : ''
-                      }`}
-                      onClick={() => setTabSection('references')}
-                      selected={tabSection === 'references'}
-                      size={2}
-                    />
-                  </TabList>
-
-                  {/* Form fields */}
-                  <Box as="form" marginTop={4} onSubmit={handleSubmit(onSubmit)}>
-                    {/* Deleted notification */}
-                    {!assetItem && (
-                      <Card marginBottom={3} padding={3} radius={2} shadow={1} tone="critical">
-                        <Text size={1}>This file 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" />
-
-                    {/* Panel: details */}
-                    <TabPanel
-                      aria-labelledby="details"
-                      hidden={tabSection !== 'details'}
-                      id="details-panel"
-                    >
-                      {CustomDetails ? (
-                        <CustomDetails
-                          {...detailsProps}
-                          renderDefaultDetails={renderDefaultDetails}
-                        />
-                      ) : (
-                        <Details {...detailsProps} />
-                      )}
-                    </TabPanel>
-
-                    {/* Panel: References */}
-                    <TabPanel
-                      aria-labelledby="references"
-                      hidden={tabSection !== 'references'}
-                      id="references-panel"
-                    >
-                      <Box marginTop={5}>
-                        {assetItem?.asset && (
-                          <DocumentList
-                            documents={uniqueReferringDocuments}
-                            isLoading={isLoading}
-                          />
-                        )}
-                      </Box>
-                    </TabPanel>
-                  </Box>
-                </>
-              )
-            }}
-          </WithReferringDocuments>
-        </Box>
-
-        <Box flex={1} padding={4}>
-          <Box style={{aspectRatio: '1'}}>
-            {/* File */}
-            {isFileAsset(currentAsset) && <FileAssetPreview asset={currentAsset} />}
-
-            {/* Image */}
-            {isImageAsset(currentAsset) && (
-              <Image
-                draggable={false}
-                $scheme={scheme}
-                $showCheckerboard={!currentAsset?.metadata?.isOpaque}
-                src={imageDprUrl(currentAsset, {height: 600, width: 600})}
-              />
-            )}
-          </Box>
-
-          {/* Metadata */}
-          {currentAsset && (
-            <Box marginTop={4}>
-              <AssetMetadata asset={currentAsset} item={assetItem} />
-            </Box>
-          )}
-        </Box>
-      </Flex>
-
-      {children}
-    </Dialog>
-  )
-}
-
-export default DialogAssetEdit