@sanity/document-internationalization 3.0.1 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/document-internationalization",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "Create unique translations of a document based on its language, joined by a shared reference document.",
   "keywords": [
     "sanity",

package/src/actions/DuplicateWithTranslationsAction.tsx

@@ -0,0 +1,252 @@
+import {CopyIcon} from '@sanity/icons'
+import {useToast} from '@sanity/ui'
+import {uuid} from '@sanity/uuid'
+import {useCallback, useMemo, useState} from 'react'
+import {filter, firstValueFrom} from 'rxjs'
+import {
+  DEFAULT_STUDIO_CLIENT_OPTIONS,
+  type DocumentActionComponent,
+  type Id,
+  InsufficientPermissionsMessage,
+  type PatchOperations,
+  useClient,
+  useCurrentUser,
+  useDocumentOperation,
+  useDocumentPairPermissions,
+  useDocumentStore,
+  useTranslation,
+} from 'sanity'
+import {useRouter} from 'sanity/router'
+import {structureLocaleNamespace} from 'sanity/structure'
+
+import {METADATA_SCHEMA_NAME, TRANSLATIONS_ARRAY_NAME} from '../constants'
+import {useTranslationMetadata} from '../hooks/useLanguageMetadata'
+import {documenti18nLocaleNamespace} from '../i18n'
+
+const DISABLED_REASON_KEY = {
+  METADATA_NOT_FOUND: 'action.duplicate.disabled.missing-metadata',
+  MULTIPLE_METADATA: 'action.duplicate.disabled.multiple-metadata',
+  NOTHING_TO_DUPLICATE: 'action.duplicate.disabled.nothing-to-duplicate',
+  NOT_READY: 'action.duplicate.disabled.not-ready',
+}
+
+export const DuplicateWithTranslationsAction: DocumentActionComponent = ({
+  id,
+  type,
+  onComplete,
+}) => {
+  const documentStore = useDocumentStore()
+  const {duplicate} = useDocumentOperation(id, type)
+  const {navigateIntent} = useRouter()
+  const [isDuplicating, setDuplicating] = useState(false)
+  const [permissions, isPermissionsLoading] = useDocumentPairPermissions({
+    id,
+    type,
+    permission: 'duplicate',
+  })
+  const {data, loading: isMetadataDocumentLoading} = useTranslationMetadata(id)
+  const hasOneMetadataDocument = useMemo(() => {
+    return Array.isArray(data) && data.length <= 1
+  }, [data])
+  const metadataDocument = Array.isArray(data) && data.length ? data[0] : null
+  const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
+  const toast = useToast()
+  const {t: s} = useTranslation(structureLocaleNamespace)
+  const {t: d} = useTranslation(documenti18nLocaleNamespace)
+  const currentUser = useCurrentUser()
+
+  const handle = useCallback(async () => {
+    setDuplicating(true)
+
+    try {
+      if (!metadataDocument) {
+        throw new Error('Metadata document not found')
+      }
+
+      // 1. Duplicate the document and its localized versions
+      const translations = new Map<string, Id>()
+      await Promise.all(
+        metadataDocument[TRANSLATIONS_ARRAY_NAME].map(async (translation) => {
+          const dupeId = uuid()
+          const locale = translation._key
+          const docId = translation.value?._ref
+
+          if (!docId) {
+            throw new Error('Translation document not found')
+          }
+
+          const {duplicate: duplicateTranslation} = await firstValueFrom(
+            documentStore.pair
+              .editOperations(docId, type)
+              .pipe(filter((op) => op.duplicate.disabled !== 'NOT_READY'))
+          )
+
+          if (duplicateTranslation.disabled) {
+            throw new Error('Cannot duplicate document')
+          }
+
+          const duplicateTranslationSuccess = firstValueFrom(
+            documentStore.pair
+              .operationEvents(docId, type)
+              .pipe(filter((e) => e.op === 'duplicate' && e.type === 'success'))
+          )
+          duplicateTranslation.execute(dupeId)
+          await duplicateTranslationSuccess
+
+          translations.set(locale, dupeId)
+        })
+      )
+
+      // 2. Duplicate the metadata document
+      const {duplicate: duplicateMetadata} = await firstValueFrom(
+        documentStore.pair
+          .editOperations(metadataDocument._id, METADATA_SCHEMA_NAME)
+          .pipe(filter((op) => op.duplicate.disabled !== 'NOT_READY'))
+      )
+
+      if (duplicateMetadata.disabled) {
+        throw new Error('Cannot duplicate document')
+      }
+
+      const duplicateMetadataSuccess = firstValueFrom(
+        documentStore.pair
+          .operationEvents(metadataDocument._id, METADATA_SCHEMA_NAME)
+          .pipe(filter((e) => e.op === 'duplicate' && e.type === 'success'))
+      )
+      const dupeId = uuid()
+      duplicateMetadata.execute(dupeId)
+      await duplicateMetadataSuccess
+
+      // 3. Patch the duplicated metadata document to update the references
+      // TODO: use document store
+      // const {patch: patchMetadata} = await firstValueFrom(
+      //   documentStore.pair
+      //     .editOperations(dupeId, METADATA_SCHEMA_NAME)
+      //     .pipe(filter((op) => op.patch.disabled !== 'NOT_READY'))
+      // )
+
+      // if (patchMetadata.disabled) {
+      //   throw new Error('Cannot patch document')
+      // }
+
+      // await firstValueFrom(
+      //   documentStore.pair
+      //     .consistencyStatus(dupeId, METADATA_SCHEMA_NAME)
+      //     .pipe(filter((isConsistant) => isConsistant))
+      // )
+
+      // const patchMetadataSuccess = firstValueFrom(
+      //   documentStore.pair
+      //     .operationEvents(dupeId, METADATA_SCHEMA_NAME)
+      //     .pipe(filter((e) => e.op === 'patch' && e.type === 'success'))
+      // )
+
+      const patch: PatchOperations = {
+        set: Object.fromEntries(
+          Array.from(translations.entries()).map(([locale, documentId]) => [
+            `${TRANSLATIONS_ARRAY_NAME}[_key == "${locale}"].value._ref`,
+            documentId,
+          ])
+        ),
+      }
+
+      // patchMetadata.execute([patch])
+      // await patchMetadataSuccess
+      await client.transaction().patch(dupeId, patch).commit()
+
+      // 4. Navigate to the duplicated document
+      navigateIntent('edit', {
+        id: Array.from(translations.values()).at(0),
+        type,
+      })
+
+      onComplete()
+    } catch (error) {
+      console.error(error)
+      toast.push({
+        status: 'error',
+        title: 'Error duplicating document',
+        description:
+          error instanceof Error
+            ? error.message
+            : 'Failed to duplicate document',
+      })
+    } finally {
+      setDuplicating(false)
+    }
+  }, [
+    client,
+    documentStore.pair,
+    metadataDocument,
+    navigateIntent,
+    onComplete,
+    toast,
+    type,
+  ])
+
+  return useMemo(() => {
+    if (!isPermissionsLoading && !permissions?.granted) {
+      return {
+        icon: CopyIcon,
+        disabled: true,
+        label: d('action.duplicate.label'),
+        title: (
+          <InsufficientPermissionsMessage
+            context="duplicate-document"
+            currentUser={currentUser}
+          />
+        ),
+      }
+    }
+
+    if (!isMetadataDocumentLoading && !metadataDocument) {
+      return {
+        icon: CopyIcon,
+        disabled: true,
+        label: d('action.duplicate.label'),
+        title: d(DISABLED_REASON_KEY.METADATA_NOT_FOUND),
+      }
+    }
+
+    if (!hasOneMetadataDocument) {
+      return {
+        icon: CopyIcon,
+        disabled: true,
+        label: d('action.duplicate.label'),
+        title: d(DISABLED_REASON_KEY.MULTIPLE_METADATA),
+      }
+    }
+
+    return {
+      icon: CopyIcon,
+      disabled:
+        isDuplicating ||
+        Boolean(duplicate.disabled) ||
+        isPermissionsLoading ||
+        isMetadataDocumentLoading,
+      label: isDuplicating
+        ? s('action.duplicate.running.label')
+        : d('action.duplicate.label'),
+      title: duplicate.disabled
+        ? s(DISABLED_REASON_KEY[duplicate.disabled])
+        : '',
+      onHandle: handle,
+    }
+  }, [
+    currentUser,
+    duplicate.disabled,
+    handle,
+    hasOneMetadataDocument,
+    isDuplicating,
+    isMetadataDocumentLoading,
+    isPermissionsLoading,
+    metadataDocument,
+    permissions?.granted,
+    s,
+    d,
+  ])
+}
+
+DuplicateWithTranslationsAction.action = 'duplicate'
+// @ts-expect-error `displayName` is used by React DevTools
+DuplicateWithTranslationsAction.displayName = 'DuplicateWithTranslationsAction'

package/src/components/DocumentInternationalizationMenu.tsx

@@ -95,7 +95,13 @@ export function DocumentInternationalizationMenu(
         </Card>
       ) : (
         <Stack space={1}>
-          <LanguageManage id={metadata?._id} />
+          <LanguageManage
+            id={metadata?._id}
+            documentId={documentId}
+            metadataId={metadataId}
+            schemaType={schemaType}
+            sourceLanguageId={sourceLanguageId}
+          />
           {supportedLanguages.length > 4 ? (
             <TextInput
               onChange={handleQuery}

package/src/components/LanguageManage.tsx

@@ -1,40 +1,106 @@
 import {CogIcon} from '@sanity/icons'
 import {Box, Button, Stack, Text, Tooltip} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+import {type ObjectSchemaType, useClient} from 'sanity'
 
 import {METADATA_SCHEMA_NAME} from '../constants'
 import {useOpenInNewPane} from '../hooks/useOpenInNewPane'
+import {createReference} from '../utils/createReference'
+import {useDocumentInternationalizationContext} from './DocumentInternationalizationContext'
 
 type LanguageManageProps = {
   id?: string
+  metadataId?: string | null
+  schemaType: ObjectSchemaType
+  documentId: string
+  sourceLanguageId?: string
 }
 
 export default function LanguageManage(props: LanguageManageProps) {
-  const {id} = props
+  const {id, metadataId, schemaType, documentId, sourceLanguageId} = props
   const open = useOpenInNewPane(id, METADATA_SCHEMA_NAME)
+  const openCreated = useOpenInNewPane(metadataId, METADATA_SCHEMA_NAME)
+  const {allowCreateMetaDoc, apiVersion, weakReferences} =
+    useDocumentInternationalizationContext()
+  const client = useClient({apiVersion})
+  const [userHasClicked, setUserHasClicked] = useState(false)
+
+  const canCreate = !id && Boolean(metadataId) && allowCreateMetaDoc
+
+  const handleClick = useCallback(() => {
+    if (!id && metadataId && sourceLanguageId) {
+      /* Disable button while this request is pending */
+      setUserHasClicked(true)
+
+      // handle creation of meta document
+      const transaction = client.transaction()
+
+      const sourceReference = createReference(
+        sourceLanguageId,
+        documentId,
+        schemaType.name,
+        !weakReferences
+      )
+      const newMetadataDocument = {
+        _id: metadataId,
+        _type: METADATA_SCHEMA_NAME,
+        schemaTypes: [schemaType.name],
+        translations: [sourceReference],
+      }
+
+      transaction.createIfNotExists(newMetadataDocument)
+
+      transaction
+        .commit()
+        .then(() => {
+          setUserHasClicked(false)
+          openCreated()
+        })
+        .catch((err) => {
+          console.error(err)
+          setUserHasClicked(false)
+        })
+    } else {
+      open()
+    }
+  }, [
+    id,
+    metadataId,
+    sourceLanguageId,
+    client,
+    documentId,
+    schemaType.name,
+    weakReferences,
+    openCreated,
+    open,
+  ])
+
+  const disabled =
+    (!id && !canCreate) || (canCreate && !sourceLanguageId) || userHasClicked
 
   return (
     <Tooltip
       animate
       content={
-        id ? null : (
-          <Box padding={2}>
-            <Text muted size={1}>
-              Document has no other translations
-            </Text>
-          </Box>
-        )
+        <Box padding={2}>
+          <Text muted size={1}>
+            Document has no other translations
+          </Text>
+        </Box>
       }
       fallbackPlacements={['right', 'left']}
       placement="top"
       portal
+      disabled={Boolean(id) || canCreate}
     >
       <Stack>
         <Button
-          disabled={!id}
+          disabled={disabled}
           mode="ghost"
           text="Manage Translations"
           icon={CogIcon}
-          onClick={() => open()}
+          loading={userHasClicked}
+          onClick={handleClick}
         />
       </Stack>
     </Tooltip>

package/src/constants.ts

@@ -11,4 +11,5 @@ export const DEFAULT_CONFIG: PluginConfigContext = {
   bulkPublish: false,
   metadataFields: [],
   apiVersion: API_VERSION,
+  allowCreateMetaDoc: false,
 }

package/src/hooks/useOpenInNewPane.tsx

@@ -2,7 +2,7 @@ import {useCallback, useContext} from 'react'
 import {RouterContext} from 'sanity/router'
 import {usePaneRouter} from 'sanity/structure'
 
-export function useOpenInNewPane(id?: string, type?: string) {
+export function useOpenInNewPane(id?: string | null, type?: string) {
   const routerContext = useContext(RouterContext)
   const {routerPanesState, groupIndex} = usePaneRouter()
 

package/src/i18n/index.ts

@@ -0,0 +1,21 @@
+import {defineLocaleResourceBundle} from 'sanity'
+
+/**
+ * The locale namespace for the document internationalization plugin.
+ *
+ * @public
+ */
+export const documenti18nLocaleNamespace =
+  'document-internationalization' as const
+
+/**
+ * The default locale bundle for the document internationalization plugin, which is US English.
+ *
+ * @internal
+ */
+export const documentInternationalizationUsEnglishLocaleBundle =
+  defineLocaleResourceBundle({
+    locale: 'en-US',
+    namespace: documenti18nLocaleNamespace,
+    resources: () => import('./resources'),
+  })

package/src/i18n/resources.ts

@@ -0,0 +1,7 @@
+export default {
+  'action.duplicate.label': 'Duplicate with translations',
+  'action.duplicate.disabled.missing-metadata':
+    'The document cannot be duplicated because the metadata document is missing',
+  'action.duplicate.disabled.multiple-metadata':
+    'The document cannot be duplicated because there are multiple metadata documents',
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export {DeleteTranslationAction} from './actions/DeleteTranslationAction'
+export {DuplicateWithTranslationsAction} from './actions/DuplicateWithTranslationsAction'
 export {useDocumentInternationalizationContext} from './components/DocumentInternationalizationContext'
 export {DocumentInternationalizationMenu} from './components/DocumentInternationalizationMenu'
 export {documentInternationalization} from './plugin'

package/src/plugin.tsx

@@ -9,6 +9,7 @@ import {DocumentInternationalizationProvider} from './components/DocumentInterna
 import {DocumentInternationalizationMenu} from './components/DocumentInternationalizationMenu'
 import OptimisticallyStrengthen from './components/OptimisticallyStrengthen'
 import {API_VERSION, DEFAULT_CONFIG, METADATA_SCHEMA_NAME} from './constants'
+import {documentInternationalizationUsEnglishLocaleBundle} from './i18n'
 import metadata from './schema/translation/metadata'
 import type {PluginConfig, TranslationReference} from './types'
 
@@ -39,6 +40,10 @@ export const documentInternationalization = definePlugin<PluginConfig>(
         },
       },
 
+      i18n: {
+        bundles: [documentInternationalizationUsEnglishLocaleBundle],
+      },
+
       // Adds:
       // - A bulk-publishing UI component to the form
       // - Will only work for projects on a compatible plan

package/src/types.ts

@@ -25,6 +25,7 @@ export type PluginConfig = {
   bulkPublish?: boolean
   metadataFields?: FieldDefinition[]
   apiVersion?: string
+  allowCreateMetaDoc?: boolean
 }
 
 // Context version of config