feat: enhance deprecation notice with improved messaging and localization support

web/app/components/plugins/base/deprecation-notice.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import type { FC } from 'react'
 import Link from 'next/link'
 import cn from '@/utils/classnames'
 import { RiAlertFill } from '@remixicon/react'
 import { Trans, useTranslation } from 'react-i18next'
+import { snakeCase2CamelCase } from '@/utils/format'
 
 type DeprecationNoticeProps = {
   status: 'deleted' | 'active'
@@ -16,6 +17,8 @@ type DeprecationNoticeProps = {
   textClassName?: string
 }
 
+const i18nPrefix = 'plugin.detailPanel.deprecation'
+
 const DeprecationNotice: FC<DeprecationNoticeProps> = ({
   status,
   deprecatedReason,
@@ -28,7 +31,12 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
 }) => {
   const { t } = useTranslation()
 
-  if (status !== 'deleted' || !deprecatedReason)
+  const deprecatedReasonKey = useMemo(() => {
+    if (!deprecatedReason) return ''
+    return snakeCase2CamelCase(deprecatedReason)
+  }, [deprecatedReason])
+
+  if (status !== 'deleted')
     return null
 
   return (
@@ -43,9 +51,9 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
         </div>
         <div className={cn('system-xs-regular grow py-1 text-text-primary', textClassName)}>
           {
-            alternativePluginId ? (
+            deprecatedReason && alternativePluginId && (
               <Trans
-                i18nKey={'plugin.detailPanel.deprecation.fullMessage'}
+                i18nKey={`${i18nPrefix}.fullMessage`}
                 components={{
                   CustomLink: (
                     <Link
@@ -57,16 +65,24 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
                   ),
                 }}
                 values={{
-                  deprecatedReason,
+                  deprecatedReason: t(`${i18nPrefix}.reason.${deprecatedReasonKey}`),
                   alternativePluginId,
                 }}
               />
-            ) : (
+            )
+          }
+          {
+            deprecatedReason && !alternativePluginId && (
               <span>
-                {t('plugin.detailPanel.deprecation.onlyReason', { deprecatedReason })}
+                {t(`${i18nPrefix}.onlyReason`, { deprecatedReason: t(`${i18nPrefix}.reason.${deprecatedReasonKey}`) })}
               </span>
             )
           }
+          {
+            !deprecatedReason && (
+              <span>{t(`${i18nPrefix}.noReason`)}</span>
+            )
+          }
         </div>
       </div>
     </div>

web/i18n/en-US/plugin.ts

@@ -101,8 +101,14 @@ const translation = {
     configureModel: 'Configure model',
     configureTool: 'Configure tool',
     deprecation: {
-      fullMessage: 'This plugin has been deprecated due to {{deprecatedReason}}, please use <CustomLink href=\'https://example.com/\'>{{-alternativePluginId}}</CustomLink> instead.',
+      fullMessage: 'This plugin has been deprecated due to {{deprecatedReason}}, and will no longer be updated. Please use <CustomLink href=\'https://example.com/\'>{{-alternativePluginId}}</CustomLink> instead.',
-      onlyReason: 'This plugin has been deprecated due to {{deprecatedReason}}.',
+      onlyReason: 'This plugin has been deprecated due to {{deprecatedReason}} and will no longer be updated.',
+      noReason: 'This plugin has been deprecated and will no longer be updated.',
+      reason: {
+        businessAdjustments: 'business adjustments',
+        ownershipTransferred: 'ownership transferred',
+        noMaintainer: 'no maintainer',
+      },
     },
   },
   install: '{{num}} installs',

web/i18n/ja-JP/plugin.ts

@@ -84,6 +84,16 @@ const translation = {
     actionNum: '{{num}} {{action}} が含まれています',
     endpointsDocLink: 'ドキュメントを表示する',
     switchVersion: 'バージョンの切り替え',
+    deprecation: {
+      fullMessage: 'このプラグインは{{deprecatedReason}}のため非推奨となり、新しいバージョンはリリースされません。代わりに<CustomLink href=\'https://example.com/\'>{{-alternativePluginId}}</CustomLink>をご利用ください。',
+      onlyReason: 'このプラグインは{{deprecatedReason}}のため非推奨となり、新しいバージョンはリリースされません。',
+      noReason: 'このプラグインは廃止されており、今後更新されることはありません。',
+      reason: {
+        businessAdjustments: '事業調整',
+        ownershipTransferred: '所有権移転',
+        noMaintainer: 'メンテナーの不足',
+      },
+    },
   },
   debugInfo: {
     title: 'デバッグ',
@@ -198,6 +208,7 @@ const translation = {
   install: '{{num}} インストール',
   installAction: 'インストール',
   installFrom: 'インストール元',
+  deprecated: '非推奨',
   searchPlugins: '検索プラグイン',
   search: '検索',
   endpointsEnabled: '{{num}} セットのエンドポイントが有効になりました',

web/i18n/zh-Hans/plugin.ts

@@ -101,8 +101,14 @@ const translation = {
     configureModel: '模型设置',
     configureTool: '工具设置',
     deprecation: {
-      fullMessage: '此插件已被弃用，原因是{{deprecatedReason}}，请使用 <CustomLink href=\'https://example.com/\'>{{-alternativePluginId}}</CustomLink> 替代。',
+      fullMessage: '由于{{deprecatedReason}}，此插件已被弃用，将不再发布新版本。请使用<CustomLink href=\'https://example.com/\'>{{-alternativePluginId}}</CustomLink>替代。',
-      onlyReason: '此插件已被弃用，原因是{{deprecatedReason}}。',
+      onlyReason: '由于{{deprecatedReason}}，此插件已被弃用，将不再发布新版本。',
+      noReason: '此插件已被弃用，将不再发布新版本。',
+      reason: {
+        businessAdjustments: '业务调整',
+        ownershipTransferred: '所有权转移',
+        noMaintainer: '无人维护',
+      },
     },
   },
   install: '{{num}} 次安装',

web/utils/format.ts

@@ -56,3 +56,7 @@ export const downloadFile = ({ data, fileName }: { data: Blob; fileName: string
   a.remove()
   window.URL.revokeObjectURL(url)
 }
+
+export const snakeCase2CamelCase = (input: string): string => {
+  return input.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
+}