gt-sanity 0.0.5 → 1.0.0

package/src/components/page/BatchProgress.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Flex, Text, Spinner } from '@sanity/ui';
+
+interface BatchProgressProps {
+  isActive: boolean;
+  current: number;
+  total: number;
+  operationName: string;
+}
+
+export const BatchProgress: React.FC<BatchProgressProps> = ({
+  isActive,
+  current,
+  total,
+  operationName,
+}) => {
+  if (!isActive) return null;
+
+  return (
+    <Flex justify='center' align='center' gap={3}>
+      <Spinner size={1} />
+      <Text size={1}>
+        {operationName} {current} of {total}...
+      </Text>
+    </Flex>
+  );
+};

package/src/components/page/ImportAllDialog.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Box, Button, Dialog, Flex, Stack, Text } from '@sanity/ui';
+import { useTranslations } from '../TranslationsProvider';
+
+interface ImportAllDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ImportAllDialog: React.FC<ImportAllDialogProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const { documents, handleImportAll } = useTranslations();
+
+  const handleConfirm = async () => {
+    onClose();
+    await handleImportAll();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      header='Confirm Import'
+      id='import-all-dialog'
+      onClose={onClose}
+      footer={
+        <Box padding={3}>
+          <Flex gap={2}>
+            <Button text='Cancel' mode='ghost' onClick={onClose} />
+            <Button text='Import All' tone='critical' onClick={handleConfirm} />
+          </Flex>
+        </Box>
+      }
+    >
+      <Box padding={4}>
+        <Stack space={3}>
+          <Text>
+            Are you sure you want to import translations for all{' '}
+            {documents.length} documents?
+          </Text>
+          <Text size={1} muted>
+            This will download and apply translated content to your documents.
+            Note that this will overwrite any existing translations!
+          </Text>
+        </Stack>
+      </Box>
+    </Dialog>
+  );
+};

package/src/components/page/ImportMissingDialog.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Box, Button, Dialog, Flex, Stack, Text } from '@sanity/ui';
+import { useTranslations } from '../TranslationsProvider';
+
+interface ImportMissingDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ImportMissingDialog: React.FC<ImportMissingDialogProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const { handleImportMissing } = useTranslations();
+
+  const handleConfirm = async () => {
+    onClose();
+    await handleImportMissing();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      header='Confirm Import Missing'
+      id='import-missing-dialog'
+      onClose={onClose}
+      footer={
+        <Box padding={3}>
+          <Flex gap={2}>
+            <Button text='Cancel' mode='ghost' onClick={onClose} />
+            <Button
+              text='Import Missing'
+              tone='primary'
+              onClick={handleConfirm}
+            />
+          </Flex>
+        </Box>
+      }
+    >
+      <Box padding={4}>
+        <Stack space={3}>
+          <Text>
+            Import only the missing translations (translations that are ready
+            but haven't been imported to Sanity yet)?
+          </Text>
+          <Text size={1} muted>
+            This will check existing translation metadata and only import
+            translations that don't already exist in your dataset.
+          </Text>
+        </Stack>
+      </Box>
+    </Dialog>
+  );
+};

package/src/components/page/TranslateAllDialog.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Box, Button, Dialog, Flex, Stack, Text } from '@sanity/ui';
+import { useTranslations } from '../TranslationsProvider';
+
+interface TranslateAllDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const TranslateAllDialog: React.FC<TranslateAllDialogProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const { documents, handleTranslateAll } = useTranslations();
+
+  const handleConfirm = async () => {
+    onClose();
+    await handleTranslateAll();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      header='Confirm Translation'
+      id='translate-all-dialog'
+      onClose={onClose}
+      footer={
+        <Box padding={3}>
+          <Flex gap={2}>
+            <Button text='Cancel' mode='ghost' onClick={onClose} />
+            <Button
+              text='Translate All'
+              tone='critical'
+              onClick={handleConfirm}
+            />
+          </Flex>
+        </Box>
+      }
+    >
+      <Box padding={4}>
+        <Stack space={3}>
+          <Text>
+            Are you sure you want to create translations for all{' '}
+            {documents.length} documents?
+          </Text>
+          <Text size={1} muted>
+            This will submit all documents to General Translation for
+            processing.
+          </Text>
+        </Stack>
+      </Box>
+    </Dialog>
+  );
+};

package/src/components/page/TranslationsTable.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Box, Card, Stack, Text, Flex, Spinner } from '@sanity/ui';
+import { LanguageStatus } from '../shared/LanguageStatus';
+import { useTranslations } from '../TranslationsProvider';
+
+export const TranslationsTable: React.FC = () => {
+  const {
+    documents,
+    locales,
+    loadingDocuments,
+    translationStatuses,
+    downloadStatus,
+    importedTranslations,
+    handleImportDocument,
+  } = useTranslations();
+
+  if (loadingDocuments) {
+    return (
+      <Flex align='center' justify='center' padding={4}>
+        <Spinner />
+      </Flex>
+    );
+  }
+
+  return (
+    <Box style={{ maxHeight: '60vh', overflowY: 'auto' }}>
+      <Stack space={2}>
+        {documents.map((document) => (
+          <Card key={document._id} shadow={1} padding={3}>
+            <Stack space={3}>
+              <Flex justify='space-between' align='flex-start'>
+                <Box flex={1}>
+                  <Text weight='semibold' size={1}>
+                    {document._id?.replace('drafts.', '') || document._id}
+                  </Text>
+                  <Text size={0} muted style={{ marginTop: '2px' }}>
+                    {document._type}
+                  </Text>
+                </Box>
+              </Flex>
+
+              <Stack space={2}>
+                {locales.length > 0 ? (
+                  locales
+                    .filter((locale) => locale.enabled !== false)
+                    .map((locale) => {
+                      const documentId =
+                        document._id?.replace('drafts.', '') || document._id;
+                      const key = `${documentId}:${locale.localeId}`;
+                      const status = translationStatuses.get(key);
+                      const isDownloaded = downloadStatus.downloaded.has(key);
+                      const isImported = importedTranslations.has(key);
+
+                      return (
+                        <LanguageStatus
+                          key={`${document._id}-${locale.localeId}`}
+                          title={locale.description || locale.localeId}
+                          progress={status?.progress || 0}
+                          isImported={isImported || isDownloaded}
+                          importFile={async () => {
+                            await handleImportDocument(
+                              documentId,
+                              locale.localeId
+                            );
+                          }}
+                        />
+                      );
+                    })
+                ) : (
+                  <Text size={1} muted>
+                    No locales configured
+                  </Text>
+                )}
+              </Stack>
+            </Stack>
+          </Card>
+        ))}
+      </Stack>
+    </Box>
+  );
+};

package/src/components/page/TranslationsTool.tsx

@@ -0,0 +1,338 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Stack,
+  Switch,
+  Text,
+  Spinner,
+  Tooltip,
+} from '@sanity/ui';
+import {
+  DownloadIcon,
+  CheckmarkCircleIcon,
+  LinkIcon,
+  PublishIcon,
+} from '@sanity/icons';
+import { Link } from 'sanity/router';
+import { BaseTranslationWrapper } from '../shared/BaseTranslationWrapper';
+import { TranslationsProvider, useTranslations } from '../TranslationsProvider';
+import { TranslationsTable } from './TranslationsTable';
+import { TranslateAllDialog } from './TranslateAllDialog';
+import { ImportAllDialog } from './ImportAllDialog';
+import { ImportMissingDialog } from './ImportMissingDialog';
+import { BatchProgress } from './BatchProgress';
+
+const TranslationsToolContent: React.FC = () => {
+  const [isTranslateAllDialogOpen, setIsTranslateAllDialogOpen] =
+    useState(false);
+  const [isImportAllDialogOpen, setIsImportAllDialogOpen] = useState(false);
+  const [isImportMissingDialogOpen, setIsImportMissingDialogOpen] =
+    useState(false);
+
+  const {
+    isBusy,
+    documents,
+    locales,
+    autoRefresh,
+    loadingDocuments,
+    importProgress,
+    importedTranslations,
+    isRefreshing,
+    setAutoRefresh,
+    handleRefreshAll,
+    handlePatchDocumentReferences,
+    handlePublishAllTranslations,
+  } = useTranslations();
+
+  // Track which specific operation is running
+  const [currentOperation, setCurrentOperation] = useState<string | null>(null);
+
+  const getOperationText = (
+    operationName: string | null,
+    isProcessing: boolean
+  ) => {
+    if (!isProcessing || !operationName) return operationName;
+
+    switch (operationName) {
+      case 'Translate All':
+        return 'Translating...';
+      case 'Import All':
+        return 'Importing...';
+      case 'Import Missing':
+        return 'Importing...';
+      case 'Patch Document References':
+        return 'Patching...';
+      case 'Publish Translations':
+        return 'Publishing...';
+      default:
+        return 'Processing...';
+    }
+  };
+
+  const getProgressOperationName = () => {
+    switch (currentOperation) {
+      case 'Import All':
+        return 'Importing';
+      case 'Import Missing':
+        return 'Importing missing';
+      case 'Patch Document References':
+        return 'Patching';
+      case 'Publish Translations':
+        return 'Publishing';
+      default:
+        return 'Processing';
+    }
+  };
+
+  // Reset current operation when operation completes
+  React.useEffect(() => {
+    if (!isBusy && !importProgress.isImporting) {
+      setCurrentOperation(null);
+    }
+  }, [isBusy, importProgress.isImporting]);
+
+  return (
+    <Container width={2}>
+      <Box padding={4} marginTop={5}>
+        <Stack space={4}>
+          <Flex align='center' justify='space-between'>
+            <Stack space={2}>
+              <Heading as='h2' size={3}>
+                Translations
+              </Heading>
+              <Text size={2}>
+                Manage your document translations from this centralized
+                location.
+              </Text>
+            </Stack>
+
+            <Flex gap={3} align='center'>
+              <Flex gap={2} align='center'>
+                <Text size={1}>Auto-refresh</Text>
+                <Switch
+                  checked={autoRefresh}
+                  onChange={() => setAutoRefresh(!autoRefresh)}
+                />
+              </Flex>
+              <Button
+                fontSize={1}
+                padding={2}
+                text={isRefreshing ? 'Refreshing...' : 'Refresh Status'}
+                onClick={handleRefreshAll}
+                disabled={
+                  isRefreshing ||
+                  isBusy ||
+                  loadingDocuments ||
+                  documents.length === 0
+                }
+              />
+            </Flex>
+          </Flex>
+
+          <Stack space={4}>
+            <Box>
+              <Text size={1} muted>
+                {loadingDocuments
+                  ? 'Loading documents...'
+                  : `Found ${documents.length} documents available for translation`}
+              </Text>
+            </Box>
+
+            <Flex justify='center'>
+              <Button
+                style={{ width: '200px' }}
+                tone='critical'
+                text={getOperationText(
+                  'Translate All',
+                  isBusy && currentOperation === 'Translate All'
+                )}
+                onClick={() => {
+                  setCurrentOperation('Translate All');
+                  setIsTranslateAllDialogOpen(true);
+                }}
+                disabled={isBusy || loadingDocuments || documents.length === 0}
+              />
+            </Flex>
+
+            <TranslationsTable />
+
+            <Stack space={3}>
+              <Flex gap={3} align='center' justify='space-between'>
+                <Flex gap={2} align='center'>
+                  <Tooltip
+                    placement='top'
+                    content='Imports and overrides all translations'
+                  >
+                    <Button
+                      mode='ghost'
+                      onClick={() => {
+                        setCurrentOperation('Import All');
+                        setIsImportAllDialogOpen(true);
+                      }}
+                      text={getOperationText(
+                        'Import All',
+                        isBusy && currentOperation === 'Import All'
+                      )}
+                      icon={
+                        isBusy && currentOperation === 'Import All'
+                          ? null
+                          : DownloadIcon
+                      }
+                      disabled={
+                        isBusy || loadingDocuments || documents.length === 0
+                      }
+                    />
+                  </Tooltip>
+                  <Tooltip
+                    placement='top'
+                    content="Imports all translations that are not yet imported (according to the source document's translation.metadata document)"
+                  >
+                    <Button
+                      mode='ghost'
+                      tone='primary'
+                      onClick={() => {
+                        setCurrentOperation('Import Missing');
+                        setIsImportMissingDialogOpen(true);
+                      }}
+                      text={getOperationText(
+                        'Import Missing',
+                        isBusy && currentOperation === 'Import Missing'
+                      )}
+                      icon={
+                        isBusy && currentOperation === 'Import Missing'
+                          ? null
+                          : DownloadIcon
+                      }
+                      disabled={
+                        isBusy || loadingDocuments || documents.length === 0
+                      }
+                    />
+                  </Tooltip>
+                  <Tooltip
+                    placement='top'
+                    content='Replaces references in documents with the corresponding translated document reference'
+                  >
+                    <Button
+                      mode='ghost'
+                      tone='caution'
+                      onClick={() => {
+                        setCurrentOperation('Patch Document References');
+                        handlePatchDocumentReferences();
+                      }}
+                      text={getOperationText(
+                        'Patch Document References',
+                        isBusy &&
+                          currentOperation === 'Patch Document References'
+                      )}
+                      icon={
+                        isBusy &&
+                        currentOperation === 'Patch Document References'
+                          ? null
+                          : LinkIcon
+                      }
+                      disabled={
+                        isBusy || loadingDocuments || documents.length === 0
+                      }
+                    />
+                  </Tooltip>
+                  <Tooltip
+                    placement='top'
+                    content='Publishes all translations whose source document is published'
+                  >
+                    <Button
+                      mode='ghost'
+                      tone='positive'
+                      onClick={() => {
+                        setCurrentOperation('Publish Translations');
+                        handlePublishAllTranslations();
+                      }}
+                      text={getOperationText(
+                        'Publish Translations',
+                        isBusy && currentOperation === 'Publish Translations'
+                      )}
+                      icon={
+                        isBusy && currentOperation === 'Publish Translations'
+                          ? null
+                          : PublishIcon
+                      }
+                      disabled={
+                        isBusy || loadingDocuments || documents.length === 0
+                      }
+                    />
+                  </Tooltip>
+                  {importedTranslations.size ===
+                    documents.length *
+                      locales.filter((l) => l.enabled !== false).length &&
+                    documents.length > 0 &&
+                    locales.length > 0 && (
+                      <Flex gap={2} align='center' style={{ color: 'green' }}>
+                        <CheckmarkCircleIcon />
+                        <Text size={1}>All translations imported</Text>
+                      </Flex>
+                    )}
+                  {importedTranslations.size > 0 &&
+                    importedTranslations.size <
+                      documents.length *
+                        locales.filter((l) => l.enabled !== false).length && (
+                      <Text size={1} style={{ color: '#666' }}>
+                        {importedTranslations.size}/
+                        {documents.length *
+                          locales.filter((l) => l.enabled !== false)
+                            .length}{' '}
+                        imported
+                      </Text>
+                    )}
+                </Flex>
+                <Box />
+              </Flex>
+
+              <BatchProgress
+                isActive={importProgress.isImporting}
+                current={importProgress.current}
+                total={importProgress.total}
+                operationName={getProgressOperationName()}
+              />
+            </Stack>
+          </Stack>
+
+          <Text size={2}>
+            For more information, see the{' '}
+            <Link href='https://dash.generaltranslation.com'>
+              General Translation Dashboard
+            </Link>
+            .
+          </Text>
+        </Stack>
+      </Box>
+
+      <TranslateAllDialog
+        isOpen={isTranslateAllDialogOpen}
+        onClose={() => setIsTranslateAllDialogOpen(false)}
+      />
+      <ImportAllDialog
+        isOpen={isImportAllDialogOpen}
+        onClose={() => setIsImportAllDialogOpen(false)}
+      />
+      <ImportMissingDialog
+        isOpen={isImportMissingDialogOpen}
+        onClose={() => setIsImportMissingDialogOpen(false)}
+      />
+    </Container>
+  );
+};
+
+const TranslationsTool: React.FC = () => {
+  return (
+    <BaseTranslationWrapper showContainer={false}>
+      <TranslationsProvider>
+        <TranslationsToolContent />
+      </TranslationsProvider>
+    </BaseTranslationWrapper>
+  );
+};
+
+export default TranslationsTool;

package/src/components/shared/BaseTranslationWrapper.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  ThemeProvider,
+  ToastProvider,
+  Box,
+  Card,
+  Flex,
+  Spinner,
+  Text,
+} from '@sanity/ui';
+import { buildTheme } from '@sanity/ui/theme';
+import { useSecrets } from '../../hooks/useSecrets';
+import { Secrets } from '../../types';
+import { pluginConfig } from '../../adapter/core';
+
+const theme = buildTheme();
+
+interface BaseTranslationWrapperProps {
+  children: React.ReactNode;
+  secretsNamespace?: string;
+  padding?: number;
+  showContainer?: boolean;
+}
+
+export const BaseTranslationWrapper: React.FC<BaseTranslationWrapperProps> = ({
+  children,
+  secretsNamespace = pluginConfig.getSecretsNamespace(),
+  padding = 4,
+  showContainer = true,
+}) => {
+  const { loading: loadingSecrets, secrets } =
+    useSecrets<Secrets>(secretsNamespace);
+
+  const content = (
+    <>
+      {loadingSecrets && (
+        <Flex padding={5} align='center' justify='center'>
+          <Spinner />
+        </Flex>
+      )}
+
+      {!loadingSecrets && !secrets && (
+        <Box padding={padding}>
+          <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>
+      )}
+
+      {!loadingSecrets && secrets && children}
+    </>
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <ToastProvider paddingY={7}>
+        {showContainer ? <Box padding={padding}>{content}</Box> : content}
+      </ToastProvider>
+    </ThemeProvider>
+  );
+};
+
+export interface UseTranslationSecretsResult {
+  loadingSecrets: boolean;
+  secrets: Secrets | null;
+}
+
+export const useTranslationSecrets = (
+  secretsNamespace?: string
+): UseTranslationSecretsResult => {
+  const { loading: loadingSecrets, secrets } = useSecrets<Secrets>(
+    secretsNamespace || 'translationService.secrets'
+  );
+
+  return {
+    loadingSecrets,
+    secrets,
+  };
+};

package/src/components/{LanguageStatus.tsx → shared/LanguageStatus.tsx}

@@ -1,3 +1,5 @@
+// adapted from https://github.com/sanity-io/sanity-translations-tab. See LICENSE.md for more details.
+
 import { useCallback, useState } from 'react';
 import { Flex, Card, Text, Grid, Box, Button } from '@sanity/ui';
 import { DownloadIcon, CheckmarkCircleIcon } from '@sanity/icons';