sanity-plugin-media 4.1.1 → 4.3.0

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

@@ -0,0 +1,215 @@
+import userEvent from '@testing-library/user-event'
+import {fireEvent, screen, waitFor} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+import {Subject} from 'rxjs'
+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 type {RootReducerState} from '../../modules/types'
+import {assetsActions, initialState as assetsInitialState} from '../../modules/assets'
+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,13 +1,13 @@
 import {zodResolver} from '@hookform/resolvers/zod'
 import type {MutationEvent} from '@sanity/client'
-import {Box, Button, Card, Flex, Tab, TabList, TabPanel, Text} from '@sanity/ui'
+import {Box, Button, Card, Flex, Stack, Tab, TabList, TabPanel, Text} from '@sanity/ui'
 import type {Asset, AssetFormData, DialogAssetEditProps, TagSelectOption} from '../../types'
 import groq from 'groq'
-import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+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 {assetFormSchema} from '../../formSchema'
+import {getAssetFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import useVersionedClient from '../../hooks/useVersionedClient'
 import {assetsActions, selectAssetById} from '../../modules/assets'
@@ -63,20 +63,55 @@ const DialogAssetEdit = (props: Props) => {
   const assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset))
 
   // Check if credit line options are configured
-  const {creditLine, components: {details: CustomDetails} = {}} = useToolOptions()
+  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: asset?.altText || '',
-        creditLine: asset?.creditLine || '',
-        description: asset?.description || '',
+        altText: flattenField(asset?.altText),
+        creditLine: flattenField(asset?.creditLine),
+        description: flattenField(asset?.description),
         originalFilename: asset?.originalFilename || '',
         opt: {media: {tags: assetTagOptions}},
-        title: asset?.title || ''
+        title: flattenField(asset?.title)
       }
     },
-    [assetTagOptions]
+    [assetTagOptions, locales]
   )
 
   const {
@@ -91,7 +126,7 @@ const DialogAssetEdit = (props: Props) => {
   } = useForm<AssetFormData>({
     defaultValues: generateDefaultValues(assetItem?.asset),
     mode: 'onChange',
-    resolver: zodResolver(assetFormSchema)
+    resolver: zodResolver(getAssetFormSchema(locales))
   })
 
   const formUpdating = !assetItem || assetItem?.updating
@@ -134,6 +169,59 @@ const DialogAssetEdit = (props: Props) => {
     [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 => {
@@ -215,25 +303,44 @@ const DialogAssetEdit = (props: Props) => {
 
   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={currentAsset?._updatedAt}
-          onClick={handleSubmit(onSubmit)}
-        />
-      </Flex>
+      <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>
   )
 
@@ -251,7 +358,8 @@ const DialogAssetEdit = (props: Props) => {
     allTagOptions,
     handleCreateTag,
     currentAsset,
-    creditLine
+    creditLine,
+    locales
   }
 
   return (

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

@@ -0,0 +1,120 @@
+import userEvent from '@testing-library/user-event'
+import {screen, waitFor} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
+import DialogTagCreate from './index'
+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'
+
+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()
+    })
+  })
+})