@sanity/document-internationalization 2.0.0-studio-v3-plugin-v2.7 → 2.0.0-studio-v3-plugin-v2.8

package/src/components/LanguageOption.tsx

@@ -1,12 +1,21 @@
-import React, {useCallback} from 'react'
-import {useClient} from 'sanity'
-import {Button, Badge, Box, Flex, Text, useToast, Spinner} from '@sanity/ui'
+import {AddIcon, CheckmarkIcon, SplitVerticalIcon} from '@sanity/icons'
+import {
+  Badge,
+  Box,
+  Button,
+  Flex,
+  Spinner,
+  Text,
+  Tooltip,
+  useToast,
+} from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
-import {SplitVerticalIcon, AddIcon, CheckmarkIcon} from '@sanity/icons'
+import {useCallback} from 'react'
+import {useClient} from 'sanity'
 
-import {Language, Metadata, TranslationReference} from '../types'
 import {API_VERSION, METADATA_SCHEMA_NAME} from '../constants'
 import {useOpenInNewPane} from '../hooks/useOpenInNewPane'
+import {Language, Metadata, TranslationReference} from '../types'
 
 type LanguageOptionProps = {
   language: Language
@@ -23,9 +32,14 @@ type LanguageOptionProps = {
   apiVersion?: string
 }
 
-function createReference(key: string, ref: string, type: string) {
+function createReference(
+  key: string,
+  ref: string,
+  type: string
+): TranslationReference {
   return {
     _key: key,
+    _type: 'internationalizedArrayReferenceValue',
     value: {
       _type: 'reference',
       _ref: ref,
@@ -68,9 +82,12 @@ export default function LanguageOption(props: LanguageOptionProps) {
     const documentIds = documentId.startsWith(`drafts.`)
       ? [documentId, documentId.replace(`drafts.`, ``)]
       : [documentId, `drafts.${documentId}`]
-    const latestDocument = await client.fetch(`*[_id in $ids]|order(_updatedAt desc)[0]`, {
-      ids: documentIds,
-    })
+    const latestDocument = await client.fetch(
+      `*[_id in $ids]|order(_updatedAt desc)[0]`,
+      {
+        ids: documentIds,
+      }
+    )
     const newTranslationDocument = {
       ...latestDocument,
       _id: `drafts.${uuid()}`,
@@ -105,7 +122,9 @@ export default function LanguageOption(props: LanguageOptionProps) {
         _id: metadataId,
         _type: METADATA_SCHEMA_NAME,
         schemaTypes: [schemaType],
-        translations: [newTranslationReference, sourceReference].filter(Boolean),
+        translations: [newTranslationReference, sourceReference].filter(
+          Boolean
+        ),
       })
     }
 
@@ -143,26 +162,57 @@ export default function LanguageOption(props: LanguageOptionProps) {
     toast,
   ])
 
+  let message
+
+  if (current) {
+    message = `Current document`
+  } else if (translation) {
+    message = `Open ${language.title} translation`
+  } else if (!translation) {
+    message = `Create new ${language.title} translation`
+  }
+
   return (
-    <Button
-      onClick={translation ? handleOpen : handleCreate}
-      mode={current ? `default` : `bleed`}
-      disabled={disabled || current}
-    >
-      <Flex gap={3} align="center">
-        {disabled ? (
-          <Spinner />
-        ) : (
-          <Text size={2}>
-            {/* eslint-disable-next-line no-nested-ternary */}
-            {translation ? <SplitVerticalIcon /> : current ? <CheckmarkIcon /> : <AddIcon />}
+    <Tooltip
+      content={
+        <Box padding={2}>
+          <Text muted size={1}>
+            {message}
           </Text>
-        )}
-        <Box flex={1}>
-          <Text>{language.title}</Text>
         </Box>
-        <Badge tone={disabled || current ? `default` : `primary`}>{language.id}</Badge>
-      </Flex>
-    </Button>
+      }
+      fallbackPlacements={['right', 'left']}
+      placement="top"
+      portal
+    >
+      <Button
+        onClick={translation ? handleOpen : handleCreate}
+        mode={current && disabled ? `default` : `bleed`}
+        disabled={disabled || current}
+      >
+        <Flex gap={3} align="center">
+          {disabled ? (
+            <Spinner />
+          ) : (
+            <Text size={2}>
+              {/* eslint-disable-next-line no-nested-ternary */}
+              {translation ? (
+                <SplitVerticalIcon />
+              ) : current ? (
+                <CheckmarkIcon />
+              ) : (
+                <AddIcon />
+              )}
+            </Text>
+          )}
+          <Box flex={1}>
+            <Text>{language.title}</Text>
+          </Box>
+          <Badge tone={disabled || current ? `default` : `primary`}>
+            {language.id}
+          </Badge>
+        </Flex>
+      </Button>
+    </Tooltip>
   )
 }

package/src/components/LanguagePatch.tsx

@@ -1,10 +1,10 @@
+import {EditIcon} from '@sanity/icons'
+import {Badge, Box, Button, Flex, Text, useToast} from '@sanity/ui'
 import React from 'react'
-import {ChevronRightIcon} from '@sanity/icons'
-import {Button, useToast} from '@sanity/ui'
 import {SanityDocument, useClient} from 'sanity'
 
-import {Language} from '../types'
 import {API_VERSION} from '../constants'
+import {Language} from '../types'
 
 type LanguagePatchProps = {
   language: Language
@@ -63,12 +63,20 @@ export default function LanguagePatch(props: LanguagePatchProps) {
 
   return (
     <Button
-      mode="ghost"
-      text={language.title}
-      icon={ChevronRightIcon}
-      onClick={() => handleClick()}
+      mode="bleed"
+      onClick={handleClick}
       disabled={disabled}
       justify="flex-start"
-    />
+    >
+      <Flex gap={3} align="center">
+        <Text size={2}>
+          <EditIcon />
+        </Text>
+        <Box flex={1}>
+          <Text>{language.title}</Text>
+        </Box>
+        <Badge>{language.id}</Badge>
+      </Flex>
+    </Button>
   )
 }

package/src/components/MenuButton.tsx

@@ -1,15 +1,23 @@
-import {suspend} from 'suspend-react'
-import React, {useCallback, useState} from 'react'
-import {Text, Card, useClickOutside, Stack, Popover, Button, Box} from '@sanity/ui'
 import {TranslateIcon} from '@sanity/icons'
-import {useClient, useEditState, useWorkspace} from 'sanity'
+import {
+  Box,
+  Button,
+  Card,
+  Popover,
+  Stack,
+  Text,
+  useClickOutside,
+} from '@sanity/ui'
+import React, {useCallback, useState} from 'react'
+import {useClient, useEditState} from 'sanity'
+import {suspend} from 'suspend-react'
 
-import {SupportedLanguages} from '../types'
-import LanguageOption from './LanguageOption'
+import {API_VERSION} from '../constants'
 import {useTranslationMetadata} from '../hooks/useLanguageMetadata'
+import {SupportedLanguages} from '../types'
 import LanguageManage from './LanguageManage'
+import LanguageOption from './LanguageOption'
 import LanguagePatch from './LanguagePatch'
-import {API_VERSION} from '../constants'
 
 type MenuButtonProps = {
   supportedLanguages: SupportedLanguages
@@ -20,7 +28,12 @@ type MenuButtonProps = {
 }
 
 export default function MenuButton(props: MenuButtonProps) {
-  const {apiVersion = API_VERSION, schemaType, documentId, languageField} = props
+  const {
+    apiVersion = API_VERSION,
+    schemaType,
+    documentId,
+    languageField,
+  } = props
 
   const client = useClient({apiVersion})
   const supportedLanguages = Array.isArray(props.supportedLanguages)
@@ -39,12 +52,18 @@ export default function MenuButton(props: MenuButtonProps) {
   const [popover, setPopover] = useState<HTMLElement | null>(null)
   const handleClickOutside = useCallback(() => setOpen(false), [])
   useClickOutside(handleClickOutside, [button, popover])
-  const {data: metadata, loading, error} = useTranslationMetadata(documentId, schemaType)
+  const {
+    data: metadata,
+    loading,
+    error,
+  } = useTranslationMetadata(documentId, schemaType)
   const {draft, published} = useEditState(documentId, schemaType)
   const source = draft || published
 
   const sourceLanguageId = source?.[languageField] as string | undefined
-  const sourceLanguageIsValid = supportedLanguages.some((l) => l.id === sourceLanguageId)
+  const sourceLanguageIsValid = supportedLanguages.some(
+    (l) => l.id === sourceLanguageId
+  )
   const allLanguagesAreValid = React.useMemo(() => {
     const valid = supportedLanguages.every((l) => l.id && l.title)
     if (!valid) {
@@ -67,6 +86,38 @@ export default function MenuButton(props: MenuButtonProps) {
         <Stack padding={1} space={1}>
           {supportedLanguages.length > 0 ? (
             <>
+              {/* Once metadata is loaded, there may be issues */}
+              {loading ? null : (
+                <>
+                  {/* Not all languages are valid */}
+                  {allLanguagesAreValid ? null : (
+                    <Card tone="caution" padding={3}>
+                      <Text size={1}>
+                        Not all language objects are valid. See the console.
+                      </Text>
+                    </Card>
+                  )}
+                  {/* Current document has no language field */}
+                  {sourceLanguageId ? null : (
+                    <Card tone="caution" padding={3}>
+                      <Text size={1}>
+                        Choose a language to <br />
+                        apply to <strong>this Document</strong>
+                      </Text>
+                    </Card>
+                  )}
+                  {/* Current document has an invalid language field */}
+                  {sourceLanguageId && !sourceLanguageIsValid ? (
+                    <Card tone="caution" padding={3}>
+                      <Text size={1}>
+                        Select a supported language.
+                        <br />
+                        Current language value: <code>{sourceLanguageId}</code>
+                      </Text>
+                    </Card>
+                  ) : null}
+                </>
+              )}
               {supportedLanguages.map((language, langIndex) =>
                 !loading && sourceLanguageId && sourceLanguageIsValid ? (
                   // Button to duplicate this document to a new translation
@@ -83,7 +134,9 @@ export default function MenuButton(props: MenuButtonProps) {
                     metadata={metadata}
                     sourceId={documentId}
                     sourceLanguageId={sourceLanguageId}
-                    translation={metadata?.translations.find((t) => t._key === language.id)}
+                    translation={metadata?.translations.find(
+                      (t) => t._key === language.id
+                    )}
                   />
                 ) : (
                   // Button to set a language field on *this* document
@@ -107,36 +160,6 @@ export default function MenuButton(props: MenuButtonProps) {
                   />
                 )
               )}
-              {/* Once metadata is loaded, there may be issues */}
-              {loading ? null : (
-                <>
-                  {/* Not all languages are valid */}
-                  {allLanguagesAreValid ? null : (
-                    <Card tone="caution" padding={3}>
-                      <Text size={1}>Not all language objects are valid. See the console.</Text>
-                    </Card>
-                  )}
-                  {/* Current document has no language field */}
-                  {sourceLanguageId ? null : (
-                    <Card tone="caution" padding={3}>
-                      <Text size={1}>
-                        Choose a language to <br />
-                        apply to <strong>this Document</strong>
-                      </Text>
-                    </Card>
-                  )}
-                  {/* Current document has an invalid language field */}
-                  {sourceLanguageId && !sourceLanguageIsValid ? (
-                    <Card tone="caution" padding={3}>
-                      <Text size={1}>
-                        Change the current language value <code>{sourceLanguageId}</code>
-                        <br />
-                        to one of the supported languages
-                      </Text>
-                    </Card>
-                  ) : null}
-                </>
-              )}
             </>
           ) : null}
           <LanguageManage id={metadata?._id} />
@@ -145,14 +168,24 @@ export default function MenuButton(props: MenuButtonProps) {
     </Box>
   )
 
+  const issueWithTranslations =
+    !loading && sourceLanguageId && !sourceLanguageIsValid
+
   return (
-    <Popover constrainSize content={content} open={open} portal ref={setPopover} overflow="auto">
+    <Popover
+      constrainSize
+      content={content}
+      open={open}
+      portal
+      ref={setPopover}
+      overflow="auto"
+    >
       <Button
         text="Translations"
         mode="bleed"
         disabled={!source}
         tone={
-          !source || (!loading && sourceLanguageId && sourceLanguageIsValid) ? undefined : `caution`
+          !source || loading || !issueWithTranslations ? undefined : `caution`
         }
         icon={TranslateIcon}
         onClick={handleClick}

package/src/components/OptimisticallyStrengthen/ReferencePatcher.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import {PatchEvent, unset, useClient, useEditState} from 'sanity'
+import {useDocumentPane} from 'sanity/desk'
+
+import {API_VERSION} from '../../constants'
+import {TranslationReference} from '../../types'
+
+type ReferencePatcherProps = {
+  translation: TranslationReference
+  documentType: string
+  metadataId: string
+}
+
+// For every reference, check if it is published, and if so, strengthen the reference
+export default function ReferencePatcher(props: ReferencePatcherProps) {
+  const {translation, documentType, metadataId} = props
+  const editState = useEditState(translation.value._ref, documentType)
+  const client = useClient({apiVersion: API_VERSION})
+  const {onChange} = useDocumentPane()
+
+  React.useEffect(() => {
+    if (
+      // We have a reference
+      translation.value._ref &&
+      // It's still weak and not-yet-strengthened
+      translation.value._weak &&
+      translation.value._strengthenOnPublish &&
+      // The referenced document has just been published
+      !editState.draft &&
+      editState.published &&
+      editState.ready
+    ) {
+      const referencePathBase = [
+        'translations',
+        {_key: translation._key},
+        'value',
+      ]
+
+      onChange(
+        new PatchEvent([
+          unset([...referencePathBase, '_weak']),
+          unset([...referencePathBase, '_strengthenOnPublish']),
+        ])
+      )
+    }
+  }, [translation, editState, metadataId, client, onChange])
+
+  return null
+}

package/src/components/OptimisticallyStrengthen/index.tsx

@@ -0,0 +1,34 @@
+import {TranslationReference} from '../../types'
+import ReferencePatcher from './ReferencePatcher'
+
+type OptimisticallyStrengthenProps = {
+  translations: TranslationReference[]
+  metadataId: string
+}
+
+// There's no good reason to leave published references as weak
+// So this component will run on every render and strengthen them
+export default function OptimisticallyStrengthen(
+  props: OptimisticallyStrengthenProps
+) {
+  const {translations = [], metadataId} = props
+
+  if (!translations.length) {
+    return null
+  }
+
+  return (
+    <>
+      {translations.map((translation) =>
+        translation.value._strengthenOnPublish?.type ? (
+          <ReferencePatcher
+            key={translation._key}
+            translation={translation}
+            documentType={translation.value._strengthenOnPublish.type}
+            metadataId={metadataId}
+          />
+        ) : null
+      )}
+    </>
+  )
+}