chore: install from local i18n

2024-10-22 18:11:47 +08:00 · 2024-10-22 18:11:47 +08:00 · 7751070da8
commit 7751070da8
parent fa8c3d0d7b
8 changed files with 59 additions and 15 deletions
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@ -1,14 +1,15 @@
 'use client'

 import React, { useCallback, useState } from 'react'
-import { useContext } from 'use-context-selector'
 import Modal from '@/app/components/base/modal'
-import I18n from '@/context/i18n'
 import type { PluginDeclaration } from '../../types'
 import { InstallStep } from '../../types'
 import Uploading from './steps/uploading'
 import Install from './steps/install'
 import Installed from './steps/installed'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'

 type InstallFromLocalPackageProps = {
  file: File
@ -18,12 +19,18 @@ type InstallFromLocalPackageProps = {

 const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
  file,
-  onClose
+  onClose,
 }) => {
+  const { t } = useTranslation()
  const [step, setStep] = useState<InstallStep>(InstallStep.uploading)
-  const { locale } = useContext(I18n)

  const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
+
+  const getTitle = useCallback(() => {
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [])
  const [manifest, setManifest] = useState<PluginDeclaration | null>({
    name: 'Notion Sync',
    description: 'Sync your Notion notes with Dify',
@ -51,7 +58,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
    >
      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
-          Install plugin
+          {getTitle()}
        </div>
      </div>
      {step === InstallStep.uploading && (
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@ -6,6 +6,9 @@ import Card from '../../../card'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import Button from '@/app/components/base/button'
 import { sleep } from '@/utils'
+import { Trans, useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'

 type Props = {
  payload: PluginDeclaration
@ -18,6 +21,7 @@ const Installed: FC<Props> = ({
  onCancel,
  onInstalled,
 }) => {
+  const { t } = useTranslation()
  const [isInstalling, setIsInstalling] = React.useState(false)

  const handleInstall = async () => {
@ -31,8 +35,13 @@ const Installed: FC<Props> = ({
    <>
      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
        <div className='text-text-secondary system-md-regular'>
-          <p>About to install the following plugin.</p>
-          <p>Please make sure that you only install plugins from a <span className='system-md-semibold'>trusted source</span>.</p>
+          <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
+          <p>
+            <Trans
+              i18nKey={`${i18nPrefix}.fromTrustSource`}
+              components={{ trustSource: <span className='system-md-semibold' /> }}
+            />
+          </p>
        </div>
        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
          <Card
@ -45,7 +54,7 @@ const Installed: FC<Props> = ({
      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
        {!isInstalling && (
          <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
-            Cancel
+            {t('common.operation.cancel')}
          </Button>
        )}
        <Button
@ -54,7 +63,7 @@ const Installed: FC<Props> = ({
          disabled={isInstalling}
          onClick={handleInstall}
        >
-          {isInstalling ? 'Installing...' : 'Install'}
+          {t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}
        </Button>
      </div>
    </>
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/installed.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/installed.tsx
@ -5,6 +5,7 @@ import type { PluginDeclaration } from '../../../types'
 import Card from '../../../card'
 import Button from '@/app/components/base/button'
 import { pluginManifestToCardPluginProps } from '../../utils'
+import { useTranslation } from 'react-i18next'

 type Props = {
  payload: PluginDeclaration
@ -14,8 +15,9 @@ type Props = {

 const Installed: FC<Props> = ({
  payload,
-  onCancel
+  onCancel,
 }) => {
+  const { t } = useTranslation()
  return (
    <>
      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
@ -35,7 +37,7 @@ const Installed: FC<Props> = ({
          className='min-w-[72px]'
          onClick={onCancel}
        >
-          close
+          {t('common.operation.close')}
        </Button>
      </div>
    </>
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
@ -6,6 +6,9 @@ import Card from '../../../card'
 import type { PluginDeclaration } from '../../../types'
 import Button from '@/app/components/base/button'
 import { sleep } from '@/utils'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'

 type Props = {
  file: File
@ -21,9 +24,10 @@ const Uploading: FC<Props> = ({
  onCancel,
  onUploaded,
 }) => {
+  const { t } = useTranslation()
  const fileName = file.name
  const handleUpload = async () => {
-    await sleep(1500)
+    await sleep(3000)
    onUploaded({
      uniqueIdentifier: 'yeuoly/neko:0.0.1@5395654da2c0b919b3d9b946a1a0545b737004380765e5f3b8c49976d3276c87',
      manifest: {
@ -42,7 +46,9 @@ const Uploading: FC<Props> = ({
        <div className='flex items-center gap-1 self-stretch'>
          <RiLoader2Line className='text-text-accent w-4 h-4' />
          <div className='text-text-secondary system-md-regular'>
-            Uploading {fileName}...
+            {t(`${i18nPrefix}.uploadingPackage`, {
+              packageName: fileName,
+            })}
          </div>
        </div>
        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
@ -59,14 +65,14 @@ const Uploading: FC<Props> = ({
      {/* Action Buttons */}
      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
        <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
-          Cancel
+          {t('common.operation.cancel')}
        </Button>
        <Button
          variant='primary'
          className='min-w-[72px]'
          disabled
        >
-          installing
+          {t(`${i18nPrefix}.install`)}
        </Button>
      </div>
    </>
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@ -39,6 +39,7 @@ const translation = {
    duplicate: 'Duplicate',
    rename: 'Rename',
    audioSourceUnavailable: 'AudioSource is unavailable',
+    close: 'Close',
  },
  errorMsg: {
    fieldRequired: '{{field}} is required',
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@ -59,6 +59,15 @@ const translation = {
    deleteContentRight: ' plugin?',
    usedInApps: 'This plugin is being used in {{num}} apps.',
  },
+  installModal: {
+    installPlugin: 'Install Plugin',
+    installedSuccessfully: 'Install successful',
+    install: 'Install',
+    installing: 'Installing...',
+    uploadingPackage: 'Uploading {{packageName}}...',
+    readyToInstall: 'About to install the following plugin.',
+    fromTrustSource: 'Please make sure that you only install plugins from a <trustSource>trusted source</trustSource>.',
+  },
  upgrade: {
    title: 'Upgrade Plugin',
    successfulTitle: 'Upgrade successful',
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@ -39,6 +39,7 @@ const translation = {
    duplicate: '复制',
    rename: '重命名',
    audioSourceUnavailable: '音源不可用',
+    close: '关闭',
  },
  errorMsg: {
    fieldRequired: '{{field}} 为必填项',
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@ -59,6 +59,15 @@ const translation = {
    deleteContentRight: ' 插件?',
    usedInApps: '此插件正在 {{num}} 个应用中使用。',
  },
+  installModal: {
+    installPlugin: '安装插件',
+    installedSuccessfully: '安装成功',
+    install: '安装',
+    installing: '安装中...',
+    uploadingPackage: '上传 {{packageName}} 中...',
+    readyToInstall: '即将安装以下插件。',
+    fromTrustSource: '请保证仅从<trustSource>可信源</trustSource>安装插件。',
+  },
  upgrade: {
    title: '升级插件',
    successfulTitle: '升级成功',