sanity-plugin-media 4.1.0 → 4.2.0

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()
+    })
+  })
+})

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

@@ -0,0 +1,164 @@
+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 DialogTagEdit from './index'
+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'
+
+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/FormBuilderTool/FormBuilderTool.test.tsx

@@ -0,0 +1,62 @@
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+import {render, screen, waitFor} from '@testing-library/react'
+import {LayerProvider, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
+import {ColorSchemeProvider} from 'sanity'
+import {of} from 'rxjs'
+import FormBuilderTool from './index'
+import {createListenMock} from '../../__tests__/fixtures/listenMock'
+import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
+import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
+import useVersionedClient from '../../hooks/useVersionedClient'
+
+vi.mock('../../hooks/useVersionedClient', () => ({
+  default: vi.fn()
+}))
+
+vi.mock('sanity', async importOriginal => {
+  const mod = await importOriginal<typeof import('sanity')>()
+  return {
+    ...mod,
+    useFormValue: () => ({_id: 'doc-1', _type: 'article'})
+  }
+})
+
+describe('FormBuilderTool', () => {
+  beforeEach(() => {
+    const fetch = vi.fn().mockReturnValue(of({items: []}))
+    vi.mocked(useVersionedClient).mockReturnValue(
+      createMockSanityClient({
+        listen: createListenMock(),
+        observable: {fetch}
+      })
+    )
+  })
+
+  it('renders picker header for image asset type', async () => {
+    render(
+      <ColorSchemeProvider scheme="light">
+        <ThemeProvider theme={studioTheme}>
+          <ToastProvider>
+            <LayerProvider>
+              <ToolOptionsProvider options={{creditLine: {enabled: false}}}>
+                <FormBuilderTool
+                  {...({
+                    assetType: 'image',
+                    onClose: vi.fn(),
+                    onSelect: vi.fn(),
+                    schemaType: {},
+                    selectedAssets: undefined
+                  } as any)}
+                />
+              </ToolOptionsProvider>
+            </LayerProvider>
+          </ToastProvider>
+        </ThemeProvider>
+      </ColorSchemeProvider>
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText(/Insert image/i)).toBeInTheDocument()
+    })
+  })
+})

package/src/components/ReduxProvider/index.tsx

@@ -11,6 +11,7 @@ import {initialState as assetsInitialState} from '../../modules/assets'
 // import {uploadsActions} from '../../modules/uploads'
 import type {RootReducerState} from '../../modules/types'
 import getDocumentAssetIds from '../../utils/getDocumentAssetIds'
+import {isSupportedAssetType} from '../../utils/isSupportedAssetType'
 
 type Props = {
   assetType?: AssetSourceComponentProps['assetType']
@@ -53,7 +54,7 @@ class ReduxProvider extends Component<Props> {
       preloadedState: {
         assets: {
           ...assetsInitialState,
-          assetTypes: props?.assetType ? [props.assetType] : ['file', 'image']
+          assetTypes: isSupportedAssetType(props?.assetType) ? [props.assetType] : ['file', 'image']
         },
         debug: {
           badConnection: false,

package/src/components/UploadDropzone/UploadDropzone.test.tsx

@@ -0,0 +1,39 @@
+import {describe, expect, it} from 'vitest'
+import UploadDropzone from './index'
+import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
+import {initialState as assetsInitialState} from '../../modules/assets'
+
+describe('UploadDropzone', () => {
+  it('still renders file input when directUploads is false (dropzone in disabled mode)', () => {
+    const {container} = renderWithProviders(
+      <UploadDropzone>
+        <div />
+      </UploadDropzone>,
+      {
+        toolOptions: {creditLine: {enabled: false}, directUploads: false},
+        preloaded: {
+          assets: {...assetsInitialState, assetTypes: ['image', 'file']}
+        }
+      }
+    )
+
+    expect(container.querySelector('input[type="file"]')).toBeTruthy()
+  })
+
+  it('enables file input when directUploads is true', () => {
+    const {container} = renderWithProviders(
+      <UploadDropzone>
+        <div />
+      </UploadDropzone>,
+      {
+        toolOptions: {creditLine: {enabled: false}, directUploads: true},
+        preloaded: {
+          assets: {...assetsInitialState, assetTypes: ['image', 'file']}
+        }
+      }
+    )
+
+    const input = container.querySelector('input[type="file"]')
+    expect(input).not.toHaveAttribute('disabled')
+  })
+})

package/src/constants.ts

@@ -1,3 +1,4 @@
+import type {AssetSourceComponentProps} from 'sanity'
 import type {
   SearchFacetInputProps,
   SearchFacetDivider,
@@ -6,6 +7,11 @@ import type {
 } from './types'
 import {divider, inputs} from './config/searchFacets'
 
+export const SUPPORTED_ASSET_TYPES = [
+  'file',
+  'image'
+] as const satisfies AssetSourceComponentProps['assetType'][]
+
 // Sort order dropdown options
 // null values are represented as menu dividers
 export const ORDER_OPTIONS: ({direction: OrderDirection; field: string} | null)[] = [

package/src/contexts/ToolOptionsContext.tsx

@@ -1,4 +1,4 @@
-import type {MediaToolOptions} from '../types'
+import type {MediaToolOptions, Locale} from '../types'
 import {type PropsWithChildren, createContext, useContext, useMemo} from 'react'
 import type {DropzoneOptions} from 'react-dropzone'
 
@@ -7,6 +7,7 @@ type ContextProps = {
   components: MediaToolOptions['components']
   creditLine: MediaToolOptions['creditLine']
   directUploads: MediaToolOptions['directUploads']
+  locales?: Locale[]
 }
 
 const ToolOptionsContext = createContext<ContextProps | null>(null)
@@ -34,14 +35,16 @@ export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props
         enabled: options?.creditLine?.enabled || false,
         excludeSources: creditLineExcludeSources
       },
-      directUploads: options?.directUploads ?? true
+      directUploads: options?.directUploads ?? true,
+      locales: options?.locales
     }
   }, [
     options?.creditLine?.enabled,
     options?.components,
     options?.creditLine?.excludeSources,
     options?.maximumUploadSize,
-    options?.directUploads
+    options?.directUploads,
+    options?.locales
   ])
 
   return <ToolOptionsContext.Provider value={value}>{children}</ToolOptionsContext.Provider>

package/src/formSchema/index.test.ts

@@ -0,0 +1,55 @@
+// @vitest-environment node
+
+import {describe, expect, it} from 'vitest'
+import {assetFormSchema, tagFormSchema, tagOptionSchema} from './index'
+
+describe('tagOptionSchema', () => {
+  it('accepts trimmed non-empty label and value', () => {
+    expect(tagOptionSchema.safeParse({label: 'A', value: 'b'}).success).toBe(true)
+  })
+
+  it('rejects empty label or value after trim', () => {
+    expect(tagOptionSchema.safeParse({label: '  ', value: 'x'}).success).toBe(false)
+    expect(tagOptionSchema.safeParse({label: 'x', value: ''}).success).toBe(false)
+  })
+})
+
+describe('tagFormSchema', () => {
+  it('requires non-empty name', () => {
+    expect(tagFormSchema.safeParse({name: 'x'}).success).toBe(true)
+    expect(tagFormSchema.safeParse({name: ''}).success).toBe(false)
+  })
+})
+
+describe('assetFormSchema', () => {
+  const base = {
+    altText: '',
+    creditLine: '',
+    description: '',
+    opt: {media: {tags: null}},
+    originalFilename: 'file.png',
+    title: ''
+  }
+
+  it('accepts valid asset form payload', () => {
+    expect(assetFormSchema.safeParse(base).success).toBe(true)
+  })
+
+  it('rejects empty originalFilename', () => {
+    expect(
+      assetFormSchema.safeParse({
+        ...base,
+        originalFilename: '   '
+      }).success
+    ).toBe(false)
+  })
+
+  it('validates nested tag options', () => {
+    expect(
+      assetFormSchema.safeParse({
+        ...base,
+        opt: {media: {tags: [{label: '', value: 'v'}]}}
+      }).success
+    ).toBe(false)
+  })
+})

package/src/formSchema/index.ts

@@ -1,22 +1,38 @@
 import * as z from 'zod'
 
+// Helper to generate localized string schema
+export function localizedStringSchema(locales?: {id: string}[]) {
+  if (!locales || locales.length === 0) {
+    return z.string().trim().optional()
+  }
+  const shape: Record<string, z.ZodTypeAny> = {}
+  for (const locale of locales) {
+    shape[locale.id] = z.string().trim().optional()
+  }
+  return z.object(shape).passthrough()
+}
+
 export const tagOptionSchema = z.object({
   label: z.string().trim().min(1, {message: 'Label cannot be empty'}),
   value: z.string().trim().min(1, {message: 'Value cannot be empty'})
 })
 
-export const assetFormSchema = z.object({
-  altText: z.string().trim().optional(),
-  creditLine: z.string().trim().optional(),
-  description: z.string().trim().optional(),
-  opt: z.object({
-    media: z.object({
-      tags: z.array(tagOptionSchema).nullable()
-    })
-  }),
-  originalFilename: z.string().trim().min(1, {message: 'Filename cannot be empty'}),
-  title: z.string().trim().optional()
-})
+export function getAssetFormSchema(locales?: {id: string}[]) {
+  return z.object({
+    altText: localizedStringSchema(locales),
+    creditLine: localizedStringSchema(locales),
+    description: localizedStringSchema(locales),
+    opt: z.object({
+      media: z.object({
+        tags: z.array(tagOptionSchema).nullable()
+      })
+    }),
+    originalFilename: z.string().trim().min(1, {message: 'Filename cannot be empty'}),
+    title: localizedStringSchema(locales)
+  })
+}
+
+export const assetFormSchema = getAssetFormSchema()
 
 export const tagFormSchema = z.object({
   name: z.string().min(1, {message: 'Name cannot be empty'})

package/src/hooks/useVersionedClient.ts

@@ -1,6 +1,6 @@
 import type {SanityClient} from '@sanity/client'
 import {useClient} from 'sanity'
 
-const useVersionedClient = (): SanityClient => useClient({apiVersion: '2022-10-01'})
+const useVersionedClient = (): SanityClient => useClient({apiVersion: '2025-10-02'})
 
 export default useVersionedClient

package/src/modules/assets/deleteAndUpdateEpics.test.ts

@@ -0,0 +1,86 @@
+// @vitest-environment node
+
+import {describe, expect, it, vi} from 'vitest'
+import {of} from 'rxjs'
+import {
+  assetsActions,
+  assetsDeleteEpic,
+  assetsUpdateEpic,
+  initialState as assetsInitialState
+} from './index'
+import {createEpicTestStore} from '../../__tests__/fixtures/createEpicTestStore'
+import {createMockSanityClient, mockPatchChain} from '../../__tests__/fixtures/mockSanityClient'
+import type {ImageAsset} from '../../types'
+
+const sampleAsset = {
+  _id: 'a1',
+  _type: 'sanity.imageAsset',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r',
+  originalFilename: 'x.png',
+  size: 1,
+  mimeType: 'image/png',
+  url: ''
+} as ImageAsset
+
+describe('assetsDeleteEpic', () => {
+  it('dispatches deleteComplete when observable.delete succeeds', async () => {
+    const client = createMockSanityClient({
+      observable: {
+        delete: vi.fn(() => of({}))
+      }
+    })
+
+    const store = createEpicTestStore(assetsDeleteEpic, client, {
+      assets: {
+        ...assetsInitialState,
+        assetTypes: ['image'],
+        allIds: ['a1'],
+        byIds: {
+          a1: {_type: 'asset', asset: sampleAsset, picked: false, updating: false}
+        }
+      }
+    })
+
+    store.dispatch(assetsActions.deleteRequest({assets: [sampleAsset]}))
+
+    await vi.waitFor(() => {
+      expect(store.getState().assets.byIds.a1).toBeUndefined()
+      expect(client.observable.delete).toHaveBeenCalled()
+    })
+  })
+})
+
+describe('assetsUpdateEpic', () => {
+  it('commits patch and dispatches updateComplete', async () => {
+    const updated = {...sampleAsset, title: 'Updated'}
+    const chain = mockPatchChain(updated)
+    const client = createMockSanityClient({
+      patch: vi.fn(() => chain)
+    })
+
+    const store = createEpicTestStore(assetsUpdateEpic, client, {
+      assets: {
+        ...assetsInitialState,
+        assetTypes: ['image'],
+        allIds: ['a1'],
+        byIds: {
+          a1: {_type: 'asset', asset: sampleAsset, picked: false, updating: false}
+        }
+      }
+    })
+
+    store.dispatch(
+      assetsActions.updateRequest({
+        asset: sampleAsset,
+        formData: {title: 'Updated'}
+      })
+    )
+
+    await vi.waitFor(() => {
+      expect(chain.commit).toHaveBeenCalled()
+      expect(store.getState().assets.byIds.a1.asset.title).toBe('Updated')
+    })
+  })
+})