gt-sanity 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gt-sanity",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "General Translation integration with Sanity",
   "keywords": [
     "sanity",
@@ -39,20 +39,6 @@
     "src",
     "v2-incompatible.js"
   ],
-  "scripts": {
-    "release": "npm run build && npm publish --access public",
-    "release:alpha": "npm run build && npm publish --access public --tag alpha",
-    "release:beta": "npm run build && npm publish --access public --tag beta",
-    "release:latest": "npm run build && npm publish --access public --tag latest",
-    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "link-watch": "plugin-kit link-watch",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "prepublishOnly": "npm run build",
-    "test": "vitest run",
-    "watch": "pkg-utils watch --strict"
-  },
   "dependencies": {
     "@portabletext/block-tools": "^3.5.5",
     "@portabletext/to-html": "^2.0.14",
@@ -62,12 +48,13 @@
     "@sanity/schema": "^3.98.1",
     "@sanity/ui": "^2.16.4",
     "@sanity/util": "^3.98.1",
-    "generaltranslation": "^7.6.3",
     "jsonpath-plus": "^10.3.0",
     "jsonpointer": "^5.0.1",
-    "lodash.merge": "^4.6.2"
+    "lodash.merge": "^4.6.2",
+    "generaltranslation": "7.6.4"
   },
   "devDependencies": {
+    "@portabletext/types": "^2.0.15",
     "@sanity/pkg-utils": "^8.1.6",
     "@sanity/plugin-kit": "^4.0.19",
     "@types/lodash.merge": "^4.6.9",
@@ -95,5 +82,18 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "scripts": {
+    "release": "pnpm run build && pnpm publish --access public",
+    "release:alpha": "pnpm run build && pnpm publish --access public --tag alpha",
+    "release:beta": "pnpm run build && pnpm publish --access public --tag beta",
+    "release:latest": "pnpm run build && pnpm publish --access public --tag latest",
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "watch": "pkg-utils watch --strict"
   }
-}
+}

package/src/actions/translateAction.tsx

@@ -0,0 +1,24 @@
+import { DocumentActionComponent } from 'sanity';
+import { useRouter } from 'sanity/router';
+import { TranslateIcon } from '@sanity/icons';
+
+export const translateAction: DocumentActionComponent = (props) => {
+  const router = useRouter();
+
+  return {
+    label: 'Translate',
+    icon: TranslateIcon,
+    tone: 'primary',
+    onHandle: () => {
+      // Switch to the translation tab using the document ID and type
+      const { id, type } = props;
+
+      // Navigate to the translation view for this document
+      router.navigateIntent('edit', {
+        id,
+        type,
+        view: 'general-translation',
+      });
+    },
+  };
+};

package/src/components/TranslateButton.tsx

@@ -0,0 +1,29 @@
+import { Button } from '@sanity/ui';
+import { TranslateIcon } from '@sanity/icons';
+import { useRouter } from 'sanity/router';
+
+export function TranslateButton() {
+  const router = useRouter();
+
+  const handleClick = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const panes = router.state.panes as any[];
+    if (panes && panes.length > 0) {
+      const currentPane = panes[0];
+      router.navigateUrl({
+        ...currentPane,
+        view: 'general-translation',
+      });
+    }
+  };
+
+  return (
+    <Button
+      icon={TranslateIcon}
+      text='Translate'
+      onClick={handleClick}
+      mode='ghost'
+      tone='primary'
+    />
+  );
+}

package/src/components/TranslationsProvider.tsx

@@ -77,8 +77,8 @@ interface TranslationsContextType {
   handleImportMissing: () => Promise<void>;
   handleRefreshAll: () => Promise<void>;
   handleImportDocument: (documentId: string, localeId: string) => Promise<void>;
-  handlePatchDocumentReferences: () => Promise<void>;
-  handlePublishAllTranslations: () => Promise<void>;
+  handlePatchDocumentReferences: () => Promise<number>;
+  handlePublishAllTranslations: () => Promise<number>;
 }
 
 const TranslationsContext = createContext<TranslationsContextType | null>(null);
@@ -594,32 +594,32 @@ export const TranslationsProvider: React.FC<TranslationsProviderProps> = ({
     async (documentId: string, localeId: string) => {
       if (!secrets) return;
 
-      try {
-        const key = `${documentId}:${localeId}`;
-        const status = translationStatuses.get(key);
+      const key = `${documentId}:${localeId}`;
+      const status = translationStatuses.get(key);
 
-        if (!status?.isReady || !status.translationId) {
-          toast.push({
-            title: `Translation not ready for ${documentId} (${localeId})`,
-            status: 'warning',
-            closable: true,
-          });
-          return;
-        }
+      if (!status?.isReady || !status.translationId) {
+        toast.push({
+          title: `Translation not ready for ${documentId} (${localeId})`,
+          status: 'warning',
+          closable: true,
+        });
+        return;
+      }
 
-        const document = documents.find(
-          (doc) => (doc._id?.replace('drafts.', '') || doc._id) === documentId
-        );
+      const document = documents.find(
+        (doc) => (doc._id?.replace('drafts.', '') || doc._id) === documentId
+      );
 
-        if (!document) {
-          toast.push({
-            title: `Document ${documentId} not found`,
-            status: 'error',
-            closable: true,
-          });
-          return;
-        }
+      if (!document) {
+        toast.push({
+          title: `Document ${documentId} not found`,
+          status: 'error',
+          closable: true,
+        });
+        return;
+      }
 
+      try {
         const downloadedFiles = await downloadTranslations(
           [
             {
@@ -682,11 +682,11 @@ export const TranslationsProvider: React.FC<TranslationsProviderProps> = ({
         });
       }
     },
-    [secrets, documents, translationContext]
+    [secrets, documents, translationContext, translationStatuses]
   );
 
   const handlePatchDocumentReferences = useCallback(async () => {
-    if (!secrets || documents.length === 0) return;
+    if (!secrets || documents.length === 0) return 0;
 
     setIsBusy(true);
 
@@ -775,6 +775,8 @@ export const TranslationsProvider: React.FC<TranslationsProviderProps> = ({
           patchedCount > 0 || result.failureCount === 0 ? 'success' : 'error',
         closable: true,
       });
+
+      return patchedCount;
     } catch (error) {
       console.error('Error patching document references:', error);
       toast.push({
@@ -782,6 +784,7 @@ export const TranslationsProvider: React.FC<TranslationsProviderProps> = ({
         status: 'error',
         closable: true,
       });
+      return 0;
     } finally {
       setIsBusy(false);
       setImportProgress({ current: 0, total: 0, isImporting: false });
@@ -789,7 +792,7 @@ export const TranslationsProvider: React.FC<TranslationsProviderProps> = ({
   }, [secrets, documents, locales, client]);
 
   const handlePublishAllTranslations = useCallback(async () => {
-    if (!secrets || documents.length === 0) return;
+    if (!secrets || documents.length === 0) return 0;
 
     setIsBusy(true);
 
@@ -806,7 +809,7 @@ export const TranslationsProvider: React.FC<TranslationsProviderProps> = ({
           status: 'warning',
           closable: true,
         });
-        return;
+        return 0;
       }
 
       const query = `*[
@@ -840,7 +843,7 @@ export const TranslationsProvider: React.FC<TranslationsProviderProps> = ({
           status: 'warning',
           closable: true,
         });
-        return;
+        return 0;
       }
 
       const translatedDocumentIds = await publishTranslations(
@@ -853,6 +856,8 @@ export const TranslationsProvider: React.FC<TranslationsProviderProps> = ({
         status: 'success',
         closable: true,
       });
+
+      return translatedDocumentIds.length;
     } catch (error) {
       console.error('Error publishing translations:', error);
       toast.push({
@@ -860,6 +865,7 @@ export const TranslationsProvider: React.FC<TranslationsProviderProps> = ({
         status: 'error',
         closable: true,
       });
+      return 0;
     } finally {
       setIsBusy(false);
     }

package/src/components/tab/TranslationView.tsx

@@ -15,12 +15,13 @@ import {
   Flex,
   Switch,
   Tooltip,
+  useToast,
 } from '@sanity/ui';
 import { pluginConfig } from '../../adapter/core';
 import { useTranslations } from '../TranslationsProvider';
 import { LanguageStatus } from '../shared/LanguageStatus';
 import { LocaleCheckbox } from '../shared/LocaleCheckbox';
-import { DownloadIcon, LinkIcon } from '@sanity/icons';
+import { DownloadIcon, LinkIcon, PublishIcon } from '@sanity/icons';
 
 export const TranslationView = () => {
   const {
@@ -35,11 +36,17 @@ export const TranslationView = () => {
     importedTranslations,
     setLocales,
     handlePatchDocumentReferences,
+    handlePublishAllTranslations,
   } = useTranslations();
 
   const [autoImport, setAutoImport] = useState(false);
   const [isImporting, setIsImporting] = useState(false);
   const [autoRefresh, setAutoRefresh] = useState(true);
+  const [autoPatchReferences, setAutoPatchReferences] = useState(true);
+  const [autoPublish, setAutoPublish] = useState(true);
+  const [isPublishing, setIsPublishing] = useState(false);
+
+  const toast = useToast();
 
   // Get the single document (first document in single document mode)
   const document = documents[0];
@@ -76,70 +83,66 @@ export const TranslationView = () => {
     return document._id?.replace('drafts.', '') || document._id;
   }, [document]);
 
-  // Auto import functionality
-  const checkAndImportCompletedTranslations = useCallback(async () => {
-    if (!autoImport || isImporting || !documentId) return;
-
-    const completedTranslations = availableLocales.filter((locale) => {
-      const key = `${documentId}:${locale.localeId}`;
-      const status = translationStatuses.get(key);
-      return (
-        (status?.progress || 0) >= 100 &&
-        status?.isReady &&
-        !importedTranslations.has(key)
-      );
-    });
-
-    if (completedTranslations.length === 0) return;
-
-    setIsImporting(true);
-    try {
-      for (const locale of completedTranslations) {
-        await handleImportDocument(documentId, locale.localeId);
-      }
-    } finally {
-      setIsImporting(false);
-    }
-  }, [
-    autoImport,
-    isImporting,
-    documentId,
-    availableLocales,
-    translationStatuses,
-    importedTranslations,
-    handleImportDocument,
-  ]);
+  // Unified import functionality
+  const handleImportTranslations = useCallback(
+    async (options: { autoOnly?: boolean } = {}) => {
+      const { autoOnly = false } = options;
 
-  const handleImportAll = useCallback(async () => {
-    if (isImporting || !documentId) return;
+      // Check preconditions
+      if (isImporting || !documentId) return;
+      if (autoOnly && !autoImport) return;
 
-    setIsImporting(true);
-    try {
+      // Find translations ready to import
       const readyTranslations = availableLocales.filter((locale) => {
         const key = `${documentId}:${locale.localeId}`;
         const status = translationStatuses.get(key);
         return status?.isReady && !importedTranslations.has(key);
       });
 
-      for (const locale of readyTranslations) {
-        await handleImportDocument(documentId, locale.localeId);
+      if (readyTranslations.length === 0) return;
+
+      setIsImporting(true);
+      try {
+        // Import all ready translations
+        await Promise.all(
+          readyTranslations.map((locale) =>
+            handleImportDocument(documentId, locale.localeId)
+          )
+        );
+
+        // Auto patch document references if enabled
+        if (autoPatchReferences) {
+          await handlePatchDocumentReferences();
+        }
+
+        // Auto publish translations if enabled
+        if (autoPublish) {
+          await handlePublishAllTranslations();
+        }
+      } finally {
+        setIsImporting(false);
       }
-    } finally {
-      setIsImporting(false);
-    }
-  }, [
-    isImporting,
-    documentId,
-    availableLocales,
-    translationStatuses,
-    importedTranslations,
-    handleImportDocument,
-  ]);
+    },
+    [
+      autoImport,
+      isImporting,
+      documentId,
+      availableLocales,
+      translationStatuses,
+      importedTranslations,
+      handleImportDocument,
+      autoPatchReferences,
+      handlePatchDocumentReferences,
+      autoPublish,
+      handlePublishAllTranslations,
+      toast,
+    ]
+  );
 
-  // Check for completed translations on status updates
+  // Check for completed translations on status updates (auto-import)
   useEffect(() => {
-    checkAndImportCompletedTranslations();
-  }, [checkAndImportCompletedTranslations]);
+    handleImportTranslations({ autoOnly: true });
+  }, [handleImportTranslations]);
 
   // Auto refresh functionality
   useEffect(() => {
@@ -147,7 +150,7 @@ export const TranslationView = () => {
 
     const interval = setInterval(async () => {
       await handleRefreshAll();
-      await checkAndImportCompletedTranslations();
+      await handleImportTranslations({ autoOnly: true });
     }, 10000);
 
     return () => clearInterval(interval);
@@ -156,13 +159,13 @@ export const TranslationView = () => {
     documentId,
     availableLocales.length,
     handleRefreshAll,
-    checkAndImportCompletedTranslations,
+    handleImportTranslations,
   ]);
 
   useEffect(() => {
     const initialRefresh = async () => {
       await handleRefreshAll();
-      await checkAndImportCompletedTranslations();
+      await handleImportTranslations({ autoOnly: true });
     };
     initialRefresh();
   }, []);
@@ -316,7 +319,8 @@ export const TranslationView = () => {
               <Flex gap={2} align='center'>
                 <Button
                   mode='ghost'
-                  onClick={handleImportAll}
+                  tone='primary'
+                  onClick={() => handleImportTranslations()}
                   text={isImporting ? 'Importing...' : 'Import All'}
                   icon={DownloadIcon}
                   disabled={
@@ -327,36 +331,37 @@ export const TranslationView = () => {
                       return !status?.isReady || importedTranslations.has(key);
                     })
                   }
+                  style={{ minWidth: '180px' }}
                 />
-                <Text size={1} muted>
-                  Imported{' '}
-                  {
-                    availableLocales.filter((locale) => {
-                      const key = `${documentId}:${locale.localeId}`;
-                      return importedTranslations.has(key);
-                    }).length
-                  }
-                  /
-                  {
-                    availableLocales.filter((locale) => {
-                      const key = `${documentId}:${locale.localeId}`;
-                      const status = translationStatuses.get(key);
-                      return status?.isReady;
-                    }).length
-                  }
-                </Text>
-              </Flex>
-              <Flex gap={2} align='center' style={{ whiteSpace: 'nowrap' }}>
-                <Text size={1}>Auto-import when complete</Text>
-                <Switch
-                  checked={autoImport}
-                  onChange={() => setAutoImport(!autoImport)}
-                  disabled={isImporting}
-                />
+                <Flex gap={2} align='center'>
+                  <Switch
+                    checked={autoImport}
+                    onChange={() => setAutoImport(!autoImport)}
+                    disabled={isImporting}
+                  />
+                  <Text size={1}>Auto-import when complete</Text>
+                </Flex>
               </Flex>
+              <Text size={1} muted>
+                Imported{' '}
+                {
+                  availableLocales.filter((locale) => {
+                    const key = `${documentId}:${locale.localeId}`;
+                    return importedTranslations.has(key);
+                  }).length
+                }
+                /
+                {
+                  availableLocales.filter((locale) => {
+                    const key = `${documentId}:${locale.localeId}`;
+                    const status = translationStatuses.get(key);
+                    return status?.isReady;
+                  }).length
+                }
+              </Text>
             </Flex>
 
-            <Flex justify='flex-start'>
+            <Flex gap={2} align='center' justify='flex-start'>
               <Tooltip
                 placement='top'
                 content={`Replaces references to ${pluginConfig.getSourceLocale()} documents in this document with the corresponding translated document reference`}
@@ -364,12 +369,55 @@ export const TranslationView = () => {
                 <Button
                   mode='ghost'
                   tone='caution'
-                  onClick={handlePatchDocumentReferences}
-                  text={isBusy ? 'Patching...' : 'Patch Document References'}
+                  onClick={async () => {
+                    await handlePatchDocumentReferences();
+                  }}
+                  text={isBusy ? 'Patching...' : 'Patch References'}
                   icon={isBusy ? null : LinkIcon}
-                  disabled={isBusy}
+                  disabled={isBusy || isImporting}
+                  style={{ minWidth: '180px' }}
                 />
               </Tooltip>
+              <Flex gap={2} align='center'>
+                <Switch
+                  checked={autoPatchReferences}
+                  onChange={() => setAutoPatchReferences(!autoPatchReferences)}
+                  disabled={isImporting || isBusy}
+                />
+                <Text size={1}>Auto-patch after import</Text>
+              </Flex>
+            </Flex>
+
+            <Flex gap={2} align='center' justify='flex-start'>
+              <Tooltip
+                placement='top'
+                content='Publishes all translations (if the source document is published)'
+              >
+                <Button
+                  mode='ghost'
+                  tone='positive'
+                  onClick={async () => {
+                    setIsPublishing(true);
+                    try {
+                      await handlePublishAllTranslations();
+                    } finally {
+                      setIsPublishing(false);
+                    }
+                  }}
+                  text={isPublishing ? 'Publishing...' : 'Publish Translations'}
+                  icon={isPublishing ? null : PublishIcon}
+                  disabled={isBusy || isPublishing || isImporting}
+                  style={{ minWidth: '180px' }}
+                />
+              </Tooltip>
+              <Flex gap={2} align='center'>
+                <Switch
+                  checked={autoPublish}
+                  onChange={() => setAutoPublish(!autoPublish)}
+                  disabled={isPublishing || isImporting || isBusy}
+                />
+                <Text size={1}>Auto-publish after import</Text>
+              </Flex>
             </Flex>
           </Stack>
         </Stack>

package/src/index.ts

@@ -16,6 +16,7 @@ import {
   customSerializers,
   SerializedDocument,
 } from './serialization';
+import { translateAction } from './actions/translateAction';
 
 export type {
   Secrets,
@@ -28,6 +29,7 @@ export type {
 };
 export {
   TranslationsTab,
+  translateAction,
   //helpers for end developers who may need to customize serialization
   findLatestDraft,
   BaseDocumentSerializer,
@@ -139,6 +141,19 @@ export const gtPlugin = definePlugin<GTPluginConfig>(
           router: route.create('/*'),
         },
       ],
+      document: {
+        views: [
+          {
+            id: 'general-translation',
+            title: 'Translations',
+            component: TranslationsTab,
+          },
+        ],
+        actions: (prev) => {
+          // Move translateAction to the beginning so it appears as a prominent button
+          return [...prev, translateAction];
+        },
+      },
     };
   }
 );

package/src/serialization/BaseSerializationConfig.ts

@@ -1,6 +1,6 @@
 // Adapted from https://github.com/sanity-io/sanity-naive-html-serializer
 
-import { PortableTextBlockStyle } from '@portabletext/types';
+import type { PortableTextBlockStyle } from '@portabletext/types';
 
 import {
   PortableTextBlockComponent,

package/src/utils/serialize.ts

@@ -8,7 +8,7 @@ import {
 } from '../serialization/';
 import { PortableTextHtmlComponents } from '@portabletext/to-html';
 import { pluginConfig } from '../adapter/core';
-import { merge } from 'lodash';
+import merge from 'lodash.merge';
 
 export function deserializeDocument(document: string) {
   const deserializers = merge(