gt-sanity 0.0.5

package/src/components/TaskView.tsx

@@ -0,0 +1,255 @@
+import { useCallback, useContext, useState, useEffect } from 'react';
+import { Box, Button, Flex, Text, Stack, useToast, Switch } from '@sanity/ui';
+import {
+  ArrowTopRightIcon,
+  DownloadIcon,
+  CheckmarkCircleIcon,
+} from '@sanity/icons';
+
+import { TranslationContext } from './TranslationContext';
+import { TranslationLocale, TranslationTask } from '../types';
+import { LanguageStatus } from './LanguageStatus';
+
+type JobProps = {
+  task: TranslationTask;
+  locales: TranslationLocale[];
+  refreshTask: () => Promise<void>;
+};
+
+const getLocale = (
+  localeId: string,
+  locales: TranslationLocale[]
+): TranslationLocale | undefined =>
+  locales.find((l) => l.localeId === localeId);
+
+export const TaskView = ({ task, locales, refreshTask }: JobProps) => {
+  const context = useContext(TranslationContext);
+  const toast = useToast();
+
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [isBusy, setIsBusy] = useState(false);
+  const [autoImport, setAutoImport] = useState(true);
+  const [importedFiles, setImportedFiles] = useState<Set<string>>(new Set());
+
+  const importFile = useCallback(
+    async (localeId: string) => {
+      if (!context) {
+        toast.push({
+          title:
+            'Missing context, unable to import translation. Try refreshing or clicking away from this tab and back.',
+          status: 'error',
+          closable: true,
+        });
+        return;
+      }
+
+      const locale = getLocale(localeId, locales);
+      const localeTitle = locale?.description || localeId;
+
+      try {
+        const translation = await context.adapter.getTranslation(
+          task.document,
+          localeId,
+          context.secrets
+        );
+
+        const sanityId = context.localeIdAdapter
+          ? await context.localeIdAdapter(localeId)
+          : localeId;
+
+        await context.importTranslation(sanityId, translation);
+
+        setImportedFiles((prev) => new Set([...prev, localeId]));
+
+        toast.push({
+          title: `Imported ${localeTitle} translation`,
+          status: 'success',
+          closable: true,
+        });
+      } catch (err) {
+        let errorMsg;
+        if (err instanceof Error) {
+          errorMsg = err.message;
+        } else {
+          errorMsg = err ? String(err) : null;
+        }
+
+        toast.push({
+          title: `Error getting ${localeTitle} translation`,
+          description: errorMsg,
+          status: 'error',
+          closable: true,
+        });
+      }
+    },
+    [locales, context, task.document, toast]
+  );
+
+  const checkAndImportCompletedFiles = useCallback(async () => {
+    if (!autoImport || isBusy) return;
+
+    const completedFiles = task.locales.filter(
+      (locale) =>
+        (locale.progress || 0) >= 100 && !importedFiles.has(locale.localeId)
+    );
+
+    if (completedFiles.length === 0) return;
+
+    setIsBusy(true);
+    try {
+      for (const locale of completedFiles) {
+        await importFile(locale.localeId);
+      }
+    } finally {
+      setIsBusy(false);
+    }
+  }, [autoImport, isBusy, task.locales, importedFiles, importFile]);
+
+  const handleRefreshClick = useCallback(async () => {
+    if (isRefreshing) return;
+    setIsRefreshing(true);
+    await refreshTask();
+    await checkAndImportCompletedFiles();
+    setIsRefreshing(false);
+  }, [refreshTask, setIsRefreshing, checkAndImportCompletedFiles]);
+
+  const handleImportAll = useCallback(async () => {
+    if (isBusy) return;
+    setIsBusy(true);
+
+    try {
+      const filesToImport = task.locales.filter(
+        (locale) => !importedFiles.has(locale.localeId)
+      );
+      for (const locale of filesToImport) {
+        await importFile(locale.localeId);
+      }
+    } finally {
+      setIsBusy(false);
+    }
+  }, [task.locales, importFile, isBusy, importedFiles]);
+
+  useEffect(() => {
+    if (!autoRefresh || importedFiles.size === task.locales.length) return;
+
+    const interval = setInterval(async () => {
+      await handleRefreshClick();
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [
+    handleRefreshClick,
+    autoRefresh,
+    importedFiles.size,
+    task.locales.length,
+  ]);
+
+  useEffect(() => {
+    checkAndImportCompletedFiles();
+  }, [checkAndImportCompletedFiles, task.locales]);
+
+  useEffect(() => {
+    setImportedFiles((prev) => {
+      const newSet = new Set<string>();
+      for (const localeId of prev) {
+        if (task.locales.some((locale) => locale.localeId === localeId)) {
+          newSet.add(localeId);
+        }
+      }
+      return newSet;
+    });
+  }, [task.locales]);
+
+  return (
+    <Stack space={4}>
+      <Flex align='center' justify='space-between'>
+        <Text as='h2' weight='semibold' size={2}>
+          Translation Progress
+        </Text>
+
+        <Flex gap={3} align='center'>
+          <Flex gap={2} align='center'>
+            <Text size={1}>Auto-refresh</Text>
+            <Switch
+              checked={autoRefresh}
+              onChange={() => setAutoRefresh(!autoRefresh)}
+            />
+          </Flex>
+          {task.linkToVendorTask && (
+            <Button
+              as='a'
+              text='View Job'
+              iconRight={ArrowTopRightIcon}
+              href={task.linkToVendorTask}
+              target='_blank'
+              rel='noreferrer noopener'
+              fontSize={1}
+              padding={2}
+              mode='bleed'
+            />
+          )}
+          <Button
+            fontSize={1}
+            padding={2}
+            text='Refresh Status'
+            onClick={handleRefreshClick}
+            disabled={isRefreshing}
+          />
+        </Flex>
+      </Flex>
+
+      <Box>
+        {task.locales.map((localeTask) => {
+          const reportPercent = localeTask.progress || 0;
+          const locale = getLocale(localeTask.localeId, locales);
+          return (
+            <LanguageStatus
+              key={[task.document.documentId, localeTask.localeId].join('.')}
+              importFile={async () => {
+                await importFile(localeTask.localeId);
+              }}
+              title={locale?.description || localeTask.localeId}
+              progress={reportPercent}
+              isImported={importedFiles.has(localeTask.localeId)}
+            />
+          );
+        })}
+      </Box>
+      <Stack space={3}>
+        <Flex gap={3} align='center' justify='space-between'>
+          <Flex gap={2} align='center'>
+            <Button
+              mode='ghost'
+              onClick={handleImportAll}
+              text={isBusy ? 'Importing...' : 'Import All'}
+              icon={isBusy ? null : DownloadIcon}
+              disabled={isBusy || importedFiles.size === task.locales.length}
+            />
+            {importedFiles.size === task.locales.length &&
+              task.locales.length > 0 && (
+                <Flex gap={2} align='center' style={{ color: 'green' }}>
+                  <CheckmarkCircleIcon />
+                  <Text size={1}>All translations imported</Text>
+                </Flex>
+              )}
+            {importedFiles.size > 0 &&
+              importedFiles.size < task.locales.length && (
+                <Text size={1} style={{ color: '#666' }}>
+                  {importedFiles.size}/{task.locales.length} imported
+                </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={isBusy}
+            />
+          </Flex>
+        </Flex>
+      </Stack>
+    </Stack>
+  );
+};

package/src/components/TranslationContext.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { GTSerializedDocument } from '../types';
+import { Adapter, GTFile, Secrets, WorkflowIdentifiers } from '../types';
+
+export type ContextProps = {
+  documentInfo: GTFile;
+  adapter: Adapter;
+  importTranslation: (languageId: string, document: string) => Promise<void>;
+  exportForTranslation: (documentInfo: GTFile) => Promise<GTSerializedDocument>;
+  secrets: Secrets;
+  workflowOptions?: WorkflowIdentifiers[];
+  localeIdAdapter?: (id: string) => string | Promise<string>;
+  callbackUrl?: string;
+  mergeWithTargetLocale?: boolean;
+};
+
+export const TranslationContext = React.createContext<ContextProps | null>(
+  null
+);

package/src/components/TranslationView.tsx

@@ -0,0 +1,82 @@
+/**
+ * Add cleanup function to cancel async tasks
+ */
+
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { Stack, useToast } from '@sanity/ui';
+import { TranslationContext } from './TranslationContext';
+
+import { NewTask } from './NewTask';
+import { TaskView } from './TaskView';
+import { TranslationTask, TranslationLocale } from '../types';
+
+export const TranslationView = () => {
+  const [locales, setLocales] = useState<TranslationLocale[]>([]);
+  const [task, setTask] = useState<TranslationTask | null>(null);
+
+  const context = useContext(TranslationContext);
+  const toast = useToast();
+
+  useEffect(() => {
+    async function fetchData() {
+      if (!context) {
+        toast.push({
+          title: 'Unable to load translation data: missing context',
+          status: 'error',
+          closable: true,
+        });
+        return;
+      }
+
+      const locales = await context.adapter.getLocales(context.secrets);
+      setLocales(locales);
+      try {
+        const task = await context?.adapter.getTranslationTask(
+          context.documentInfo,
+          context.secrets
+        );
+        setTask(task);
+      } catch (err) {
+        let errorMsg;
+        if (err instanceof Error) {
+          errorMsg = err.message;
+        } else {
+          errorMsg = err ? String(err) : null;
+        }
+
+        // Hacky bypass for when a document is not yet translated and has never been uploaded
+        if (errorMsg?.toLowerCase().includes('no source file found')) {
+          return;
+        }
+
+        toast.push({
+          title: `Error creating translation job`,
+          description: errorMsg,
+          status: 'error',
+          closable: true,
+        });
+      }
+    }
+
+    fetchData();
+  }, [context, toast]);
+
+  const refreshTask = useCallback(async () => {
+    const task = await context?.adapter.getTranslationTask(
+      context.documentInfo,
+      context.secrets
+    );
+    if (task) {
+      setTask(task);
+    }
+  }, [context, setTask]);
+
+  return (
+    <Stack space={6}>
+      <NewTask locales={locales} refreshTask={refreshTask} />
+      {task && (
+        <TaskView task={task} locales={locales} refreshTask={refreshTask} />
+      )}
+    </Stack>
+  );
+};

package/src/components/TranslationsTab.tsx

@@ -0,0 +1,177 @@
+import { useMemo } from 'react';
+import { SanityDocument, useSchema } from 'sanity';
+import { randomKey } from '@sanity/util/content';
+import {
+  ThemeProvider,
+  ToastProvider,
+  Stack,
+  Text,
+  Layer,
+  Box,
+  Card,
+  Flex,
+  Spinner,
+} from '@sanity/ui';
+
+import { TranslationContext } from './TranslationContext';
+import { TranslationView } from './TranslationView';
+import { useClient } from '../hooks/useClient';
+import { useSecrets } from '../hooks/useSecrets';
+import { GTFile, Secrets, TranslationsTabConfigOptions } from '../types';
+
+type TranslationTabProps = {
+  document: {
+    displayed: SanityDocument;
+  };
+  options: TranslationsTabConfigOptions;
+};
+
+const TranslationTab = (props: TranslationTabProps) => {
+  const { displayed } = props.document;
+  const client = useClient();
+  const schema = useSchema();
+
+  const documentId =
+    displayed && displayed._id
+      ? (displayed._id.split('drafts.').pop() as string)
+      : '';
+
+  const revisionId = displayed && displayed._rev ? displayed._rev : undefined;
+
+  const { errors, importTranslation, exportForTranslation } = useMemo(() => {
+    const { serializationOptions, languageField, mergeWithTargetLocale } =
+      props.options;
+    const ctx = {
+      client,
+      schema,
+    };
+
+    const allErrors = [];
+
+    const importTranslationFunc = props.options.importTranslation;
+    if (!importTranslationFunc) {
+      allErrors.push({
+        key: randomKey(12),
+        text: (
+          <>
+            You need to provide an <code>importTranslation</code> function. See
+            documentation.
+          </>
+        ),
+      });
+    }
+
+    const contextImportTranslation = (localeId: string, doc: string) => {
+      return importTranslationFunc(
+        { documentId, versionId: revisionId },
+        localeId,
+        doc,
+        ctx,
+        serializationOptions,
+        languageField,
+        mergeWithTargetLocale
+      );
+    };
+
+    const exportTranslationFunc = props.options.exportForTranslation;
+    if (!exportTranslationFunc) {
+      allErrors.push({
+        key: randomKey(12),
+        text: (
+          <>
+            You need to provide an <code>exportForTranslation</code> function.
+            See documentation.
+          </>
+        ),
+      });
+    }
+
+    const contextExportForTranslation = (docInfo: GTFile) => {
+      return exportTranslationFunc(
+        docInfo,
+        ctx,
+        serializationOptions,
+        languageField
+      );
+    };
+
+    return {
+      errors: allErrors,
+      importTranslation: contextImportTranslation,
+      exportForTranslation: contextExportForTranslation,
+    };
+  }, [props.options, documentId, revisionId, client, schema]);
+
+  const { loading, secrets } = useSecrets<Secrets>(
+    `${props.options.secretsNamespace || 'translationService'}.secrets`
+  );
+
+  const hasErrors = errors.length > 0;
+
+  if (loading || !secrets) {
+    return (
+      <ThemeProvider>
+        <Flex padding={5} align='center' justify='center'>
+          <Spinner />
+        </Flex>
+      </ThemeProvider>
+    );
+  } else if (!secrets) {
+    return (
+      <ThemeProvider>
+        <Box padding={4}>
+          <Card tone='caution' padding={[2, 3, 4, 4]} shadow={1} radius={2}>
+            <Text>
+              Can't find secrets for your translation service. Did you load them
+              into this dataset?
+            </Text>
+          </Card>
+        </Box>
+      </ThemeProvider>
+    );
+  }
+  return (
+    <ThemeProvider>
+      <Box padding={4}>
+        <Layer>
+          <ToastProvider paddingY={7}>
+            {hasErrors && (
+              <Stack space={3}>
+                {errors.map((error) => (
+                  <Card
+                    key={error.key}
+                    tone='caution'
+                    padding={[2, 3, 4, 4]}
+                    shadow={1}
+                    radius={2}
+                  >
+                    <Text>{error.text}</Text>
+                  </Card>
+                ))}
+              </Stack>
+            )}
+            {!hasErrors && (
+              <TranslationContext.Provider
+                value={{
+                  documentInfo: { documentId, versionId: revisionId },
+                  secrets,
+                  importTranslation,
+                  exportForTranslation,
+                  adapter: props.options.adapter,
+                  workflowOptions: props.options.workflowOptions,
+                  localeIdAdapter: props.options.localeIdAdapter,
+                  callbackUrl: props.options.callbackUrl,
+                  mergeWithTargetLocale: props.options.mergeWithTargetLocale,
+                }}
+              >
+                <TranslationView />
+              </TranslationContext.Provider>
+            )}
+          </ToastProvider>
+        </Layer>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+export default TranslationTab;

package/src/configuration/README.md

@@ -0,0 +1,8 @@
+# Configuration
+
+This folder holds the default configurations to be provided as options to the Translations Tab, namely:
+
+- `exportForTranslation`: Process a Sanity document before sending it off to a TMS. By default, the documents will be serialized to HTML: content will be rendered in nested divs in the HTML `body`, and any relevant metadata will be in the HTML `head`.
+  For more information on this process, please refer to the [Sanity Naive HTML Serializer](https://github.com/sanity-io/sanity-naive-html-serializer)
+
+- `importTranslation`: Receive a translated document back from a TMS, parse it into a Sanity-readable format, and patch it back to the relevant Sanity document. Again, the [Sanity Naive HTML Serializer](https://github.com/sanity-io/sanity-naive-html-serializer) is used for parsing under the assumption that the file sent over was HTML, but any function could be used here.

package/src/configuration/baseDocumentLevelConfig/documentLevelPatch.ts

@@ -0,0 +1,108 @@
+import { SanityClient, SanityDocument, SanityDocumentLike } from 'sanity';
+import { BaseDocumentMerger } from 'sanity-naive-html-serializer';
+
+import { findLatestDraft, findDocumentAtRevision } from '../utils';
+import {
+  createI18nDocAndPatchMetadata,
+  getOrCreateTranslationMetadata,
+  patchI18nDoc,
+} from './helpers';
+import type { GTFile } from '../../types';
+import { gtConfig } from '../../adapter/core';
+
+export const documentLevelPatch = async (
+  docInfo: GTFile,
+  translatedFields: SanityDocument,
+  localeId: string,
+  client: SanityClient,
+  languageField: string = 'language',
+  mergeWithTargetLocale: boolean = false
+): Promise<void> => {
+  const baseLanguage = gtConfig.getSourceLocale();
+  //this is the document we use to merge with the translated fields
+  let baseDoc: SanityDocument | null = null;
+
+  //this is the document that will serve as the translated doc
+  let i18nDoc: SanityDocument | null = null;
+
+  /*
+   * we send over the _rev with our translation file so we can
+   * accurately coalesce the translations in case something has
+   * changed in the base document since translating
+   */
+  if (docInfo.documentId && docInfo.versionId) {
+    baseDoc = await findDocumentAtRevision(
+      docInfo.documentId,
+      docInfo.versionId,
+      client
+    );
+  }
+  if (!baseDoc) {
+    baseDoc = await findLatestDraft(docInfo.documentId, client);
+  }
+
+  /* first, check our metadata to see if a translated document exists
+   * if no metadata exists, we create it atomically
+   */
+  const translationMetadata = await getOrCreateTranslationMetadata(
+    docInfo.documentId,
+    baseDoc,
+    client,
+    baseLanguage
+  );
+
+  //the id of the translated document should be on the metadata if it exists
+  const i18nDocId = (
+    translationMetadata.translations as Array<Record<string, any>>
+  ).find((translation) => translation._key === localeId)?.value?._ref;
+
+  if (i18nDocId) {
+    //get draft or published
+    i18nDoc = await findLatestDraft(i18nDocId, client);
+  }
+
+  //if the user has chosen to merge with the target locale,
+  //any existing target document will serve as our base document
+  if (mergeWithTargetLocale && i18nDoc) {
+    baseDoc = i18nDoc;
+  } else if (docInfo.documentId && docInfo.versionId) {
+    /*
+     * we send over the _rev with our translation file so we can
+     * accurately coalesce the translations in case something has
+     * changed in the base document since translating
+     */
+    baseDoc = await findDocumentAtRevision(
+      docInfo.documentId,
+      docInfo.versionId,
+      client
+    );
+  }
+
+  if (!baseDoc) {
+    baseDoc = await findLatestDraft(docInfo.documentId, client);
+  }
+  /*
+   * we then merge the translation with the base document
+   * to create a document that contains the translation and everything
+   * that wasn't sent over for translation
+   */
+  const merged = BaseDocumentMerger.documentLevelMerge(
+    translatedFields,
+    baseDoc
+  ) as SanityDocumentLike;
+
+  if (i18nDoc) {
+    patchI18nDoc(docInfo.documentId, merged, translatedFields, client);
+  }
+  //otherwise, create a new document
+  //and add the document reference to the metadata document
+  else {
+    createI18nDocAndPatchMetadata(
+      merged,
+      localeId,
+      client,
+      translationMetadata,
+      languageField
+    );
+  }
+};

package/src/configuration/baseDocumentLevelConfig/helpers/createI18nDocAndPatchMetadata.ts

@@ -0,0 +1,47 @@
+import { SanityClient, SanityDocumentLike } from 'sanity';
+
+export const createI18nDocAndPatchMetadata = (
+  translatedDoc: SanityDocumentLike,
+  localeId: string,
+  client: SanityClient,
+  translationMetadata: SanityDocumentLike,
+  languageField: string = 'language'
+): void => {
+  translatedDoc[languageField] = localeId;
+  const translations = translationMetadata.translations as Record<
+    string,
+    any
+  >[];
+  const existingLocaleKey = translations.find(
+    (translation) => translation._key === localeId
+  );
+  const operation = existingLocaleKey ? 'replace' : 'after';
+  const location = existingLocaleKey
+    ? `translations[_key == "${localeId}"]`
+    : 'translations[-1]';
+
+  //remove system fields
+  const { _updatedAt, _createdAt, ...rest } = translatedDoc;
+  client.create({ ...rest, _id: 'drafts.' }).then((doc) => {
+    const _ref = doc._id.replace('drafts.', '');
+    client
+      .transaction()
+      .patch(translationMetadata._id, (p) =>
+        p.insert(operation, location, [
+          {
+            _key: localeId,
+            _type: 'internationalizedArrayReferenceValue',
+            value: {
+              _type: 'reference',
+              _ref,
+              _weak: true,
+              _strengthenOnPublish: {
+                type: doc._type,
+              },
+            },
+          },
+        ])
+      )
+      .commit();
+  });
+};