sanity-plugin-media 4.1.0 → 4.2.0

package/src/components/DialogAssetEdit/Details.tsx

@@ -1,11 +1,23 @@
-import {Stack} from '@sanity/ui'
-import type {Asset, AssetFormData, TagSelectOption} from '../../types'
+import {Card, Stack, Tab, TabList, TabPanel} from '@sanity/ui'
+import {useState} from 'react'
 import {type Control, type FieldErrors, type UseFormRegister} from 'react-hook-form'
-
+import type {Asset, AssetFormData, Locale, TagSelectOption} from '../../types'
 import FormFieldInputTags from '../FormFieldInputTags'
 import FormFieldInputText from '../FormFieldInputText'
 import FormFieldInputTextarea from '../FormFieldInputTextarea'
 
+type LocalizedErrors = Record<string, {message?: string} | undefined>
+
+// When locales are not configured, extract a plain string from a potentially localized field
+function toStringField(value: unknown): string | undefined {
+  if (typeof value === 'string') return value
+  if (typeof value === 'object' && value !== null) {
+    const found = Object.values(value as Record<string, string>).find(v => v)
+    return found || undefined
+  }
+  return undefined
+}
+
 export type DetailsProps = {
   formUpdating: boolean
   handleCreateTag: (title: string) => void
@@ -19,6 +31,7 @@ export type DetailsProps = {
     enabled: boolean
     excludeSources?: string | string[] | undefined
   }
+  locales?: Locale[]
 }
 
 export default function Details({
@@ -30,8 +43,11 @@ export default function Details({
   allTagOptions,
   assetTagOptions,
   currentAsset,
-  creditLine
+  creditLine,
+  locales
 }: DetailsProps) {
+  const hasLocales = locales && locales.length > 0
+  const [activeLocaleTab, setActiveLocaleTab] = useState(0)
   return (
     <Stack space={3}>
       {/* Tags */}
@@ -55,46 +71,109 @@ export default function Details({
         name="originalFilename"
         value={currentAsset?.originalFilename}
       />
-      {/* Title */}
-      <FormFieldInputText
-        {...register('title')}
-        disabled={formUpdating}
-        error={errors?.title?.message}
-        label="Title"
-        name="title"
-        value={currentAsset?.title}
-      />
-      {/* Alt text */}
-      <FormFieldInputText
-        {...register('altText')}
-        disabled={formUpdating}
-        error={errors?.altText?.message}
-        label="Alt Text"
-        name="altText"
-        value={currentAsset?.altText}
-      />
-      {/* Description */}
-      <FormFieldInputTextarea
-        {...register('description')}
-        disabled={formUpdating}
-        error={errors?.description?.message}
-        label="Description"
-        name="description"
-        rows={5}
-        value={currentAsset?.description}
-      />
-      {/* CreditLine */}
-      {creditLine?.enabled && (
-        <FormFieldInputText
-          {...register('creditLine')}
-          error={errors?.creditLine?.message}
-          label="Credit"
-          name="creditLine"
-          value={currentAsset?.creditLine}
-          disabled={
-            formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
-          }
-        />
+      {/* Localized fields grouped by language */}
+      {hasLocales ? (
+        <Card marginTop={2} shadow={1} padding={3} radius={1}>
+          <Stack space={2}>
+            <TabList space={2}>
+              {locales.map((locale, idx) => (
+                <Tab
+                  key={locale.id}
+                  id={`locale-tab-${locale.id}`}
+                  aria-controls={`locale-panel-${locale.id}`}
+                  selected={activeLocaleTab === idx}
+                  onClick={() => setActiveLocaleTab(idx)}
+                  label={locale.title}
+                />
+              ))}
+            </TabList>
+            {locales.map((locale, idx) => (
+              <TabPanel
+                key={locale.id}
+                id={`locale-panel-${locale.id}`}
+                aria-labelledby={`locale-tab-${locale.id}`}
+                hidden={activeLocaleTab !== idx}
+              >
+                <Stack space={3}>
+                  <FormFieldInputText
+                    {...register(`title.${locale.id}` as const)}
+                    disabled={formUpdating}
+                    error={(errors?.title as LocalizedErrors)?.[locale.id]?.message}
+                    label="Title"
+                    name={`title.${locale.id}`}
+                  />
+                  <FormFieldInputText
+                    {...register(`altText.${locale.id}` as const)}
+                    disabled={formUpdating}
+                    error={(errors?.altText as LocalizedErrors)?.[locale.id]?.message}
+                    label="Alt Text"
+                    name={`altText.${locale.id}`}
+                  />
+                  <FormFieldInputTextarea
+                    {...register(`description.${locale.id}` as const)}
+                    disabled={formUpdating}
+                    error={(errors?.description as LocalizedErrors)?.[locale.id]?.message}
+                    label="Description"
+                    name={`description.${locale.id}`}
+                    rows={5}
+                  />
+                  {creditLine?.enabled && (
+                    <FormFieldInputText
+                      {...register(`creditLine.${locale.id}` as const)}
+                      error={(errors?.creditLine as LocalizedErrors)?.[locale.id]?.message}
+                      label="Credit"
+                      name={`creditLine.${locale.id}`}
+                      disabled={
+                        formUpdating ||
+                        creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+                      }
+                    />
+                  )}
+                </Stack>
+              </TabPanel>
+            ))}
+          </Stack>
+        </Card>
+      ) : (
+        <>
+          <FormFieldInputText
+            {...register('title')}
+            disabled={formUpdating}
+            error={errors?.title?.message}
+            label="Title"
+            name="title"
+            value={toStringField(currentAsset?.title)}
+          />
+          <FormFieldInputText
+            {...register('altText')}
+            disabled={formUpdating}
+            error={errors?.altText?.message}
+            label="Alt Text"
+            name="altText"
+            value={toStringField(currentAsset?.altText)}
+          />
+          <FormFieldInputTextarea
+            {...register('description')}
+            disabled={formUpdating}
+            error={errors?.description?.message}
+            label="Description"
+            name="description"
+            rows={5}
+            value={toStringField(currentAsset?.description)}
+          />
+          {creditLine?.enabled && (
+            <FormFieldInputText
+              {...register('creditLine')}
+              error={errors?.creditLine?.message}
+              label="Credit"
+              name="creditLine"
+              value={toStringField(currentAsset?.creditLine)}
+              disabled={
+                formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+              }
+            />
+          )}
+        </>
       )}
     </Stack>
   )

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 (