Feat: manage without translations (#192)

* feat: create meta doc without a translation

* chore(docs): add readme info

README.md

@@ -148,7 +148,12 @@ export const createConfig({
       // Optional
       // Define API Version for all queries
       // https://www.sanity.io/docs/api-versioning
-      apiVersion: '2023-05-22'
+      apiVersion: '2023-05-22',
+
+      // Optional
+      // Enable "manage translations" button without creating a translated version. Helpful if you have
+      // pre-existing documents that you need to tie together through the metadata document
+      allowCreateMetaDoc: true // defaults to false
     })
   ]
 })

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}

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>

src/constants.ts

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

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

src/types.ts

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