feat: better formatting for text warnings

package.json

@@ -51,7 +51,7 @@
   "dependencies": {
     "@sanity/icons": "^2.2.2",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.3.1",
+    "@sanity/ui": "^1.2.2",
     "@sanity/uuid": "^3.0.1",
     "sanity-plugin-internationalized-array": "^1.6.0",
     "sanity-plugin-utils": "^1.5.0"
@@ -63,6 +63,7 @@
     "@sanity/plugin-kit": "^3.1.4",
     "@sanity/semantic-release-preset": "^4.0.1",
     "@types/react": "^18.0.27",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
     "eslint": "^8.33.0",

src/components/ConstrainedBox.tsx

@@ -0,0 +1,6 @@
+import {Box} from '@sanity/ui'
+import styled from 'styled-components'
+
+export default styled(Box)`
+  max-width: 280px;
+`

src/components/LanguageOption.tsx

@@ -129,7 +129,9 @@ export default function LanguageOption(props: LanguageOptionProps) {
     }
 
     transaction
-      .commit()
+      .commit
+      // {visibility: `async`}
+      ()
       .then(() => {
         // openDocumentInSidePane(metadataId, `translation.metadata`)
         return toast.push({

src/components/MenuButton.tsx

@@ -15,9 +15,11 @@ import {suspend} from 'suspend-react'
 import {API_VERSION} from '../constants'
 import {useTranslationMetadata} from '../hooks/useLanguageMetadata'
 import {SupportedLanguages} from '../types'
+import ConstrainedBox from './ConstrainedBox'
 import LanguageManage from './LanguageManage'
 import LanguageOption from './LanguageOption'
 import LanguagePatch from './LanguagePatch'
+import Warning from './Warning'
 
 type MenuButtonProps = {
   supportedLanguages: SupportedLanguages
@@ -52,14 +54,15 @@ 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, loading, error} = useTranslationMetadata(documentId)
+  console.log(data, documentId)
+  const metadata = Array.isArray(data) && data.length ? data[0] : null
   const {draft, published} = useEditState(documentId, schemaType)
   const source = draft || published
 
+  const documentIsInOneMetadataDocument = React.useMemo(() => {
+    return Array.isArray(data) && data.length === 1
+  }, [data])
   const sourceLanguageId = source?.[languageField] as string | undefined
   const sourceLanguageIsValid = supportedLanguages.some(
     (l) => l.id === sourceLanguageId
@@ -90,32 +93,33 @@ export default function MenuButton(props: MenuButtonProps) {
               {/* Once metadata is loaded, there may be issues */}
               {loading ? null : (
                 <>
+                  {/* Not all languages are valid */}
+                  {documentIsInOneMetadataDocument ? null : (
+                    <Warning>
+                      {/* TODO: Surface these documents to the user */}
+                      This document has been found in more than one Translations
+                      Metadata documents
+                    </Warning>
+                  )}
                   {/* 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>
+                    <Warning>
+                      Not all language objects are valid. See the console.
+                    </Warning>
                   )}
                   {/* 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>
+                    <Warning>
+                      Choose a language to apply to{' '}
+                      <strong>this Document</strong>
+                    </Warning>
                   )}
                   {/* 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>
+                    <Warning>
+                      Select a supported language. Current language value:{' '}
+                      <code>{sourceLanguageId}</code>
+                    </Warning>
                   ) : null}
                 </>
               )}

src/components/Warning.tsx

@@ -0,0 +1,18 @@
+import {Card, Flex, Text} from '@sanity/ui'
+import {PropsWithChildren} from 'react'
+
+import ConstrainedBox from './ConstrainedBox'
+
+export default function Warning({children}: PropsWithChildren) {
+  return (
+    <Card tone="caution" padding={3}>
+      <Flex justify="center">
+        <ConstrainedBox>
+          <Text size={1} align="center">
+            {children}
+          </Text>
+        </ConstrainedBox>
+      </Flex>
+    </Card>
+  )
+}

src/hooks/useLanguageMetadata.tsx

@@ -1,19 +1,16 @@
-import React from 'react'
 import {useListeningQuery} from 'sanity-plugin-utils'
-import {METADATA_SCHEMA_NAME} from '../constants'
 
+import {METADATA_SCHEMA_NAME} from '../constants'
 import {Metadata} from '../types'
 
-export function useTranslationMetadata(
-  id: string,
-  schemaType: string
-): {
-  data: Metadata | null
+const query = `*[_type == $translationSchema && references($id)]`
+
+export function useTranslationMetadata(id: string): {
+  data: Metadata[] | null
   loading: boolean
   error: boolean
 } {
-  const query = `*[_type == $translationSchema && $id in translations[].value._ref][0]`
-  const {data, loading, error} = useListeningQuery<Metadata>(query, {
+  const {data, loading, error} = useListeningQuery<Metadata[]>(query, {
     params: {id, translationSchema: METADATA_SCHEMA_NAME},
   })