From bb2914652a1c522226c3990e71f0e7c291d97826 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 20 Nov 2024 13:56:32 +0800
Subject: [PATCH] feat: finsh loading error comp

---
 .../(commonLayout)/plugins/test/card/page.tsx | 14 +++---
 .../install-plugin/base/loading-error.tsx     | 47 ++++++++++++-------
 .../install-bundle/steps/install-multi.tsx    |  3 +-
 web/i18n/en-US/plugin.ts                      |  2 +
 web/i18n/zh-Hans/plugin.ts                    |  2 +
 5 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index d1c87e18be..ec2dc49018 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -13,7 +13,7 @@ const PluginList = () => {
   const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
   const [isShow, {
     setFalse: hide,
-  }] = useBoolean(false)
+  }] = useBoolean(true)
 
   return (
     <div className='pb-3 bg-white'>
@@ -22,12 +22,12 @@ const PluginList = () => {
         <InstallBundle
           onClose={hide}
           fromDSLPayload={[
-            // {
-            //   type: 'marketplace',
-            //   value: {
-            //     plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
-            //   },
-            // },
+            {
+              type: 'marketplace',
+              value: {
+                plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
+              },
+            },
             {
               type: 'github',
               value: {
diff --git a/web/app/components/plugins/install-plugin/base/loading-error.tsx b/web/app/components/plugins/install-plugin/base/loading-error.tsx
index 926bc1872f..eb698bb573 100644
--- a/web/app/components/plugins/install-plugin/base/loading-error.tsx
+++ b/web/app/components/plugins/install-plugin/base/loading-error.tsx
@@ -2,30 +2,43 @@
 import type { FC } from 'react'
 import React from 'react'
 import { Group } from '../../../base/icons/src/vender/other'
-import cn from '@/utils/classnames'
 import { LoadingPlaceholder } from '@/app/components/plugins/card/base/placeholder'
+import Checkbox from '@/app/components/base/checkbox'
+import { RiCloseLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 
 const LoadingError: FC = () => {
+  const { t } = useTranslation()
   return (
-    <div>
-      <div className="flex">
-        <div
-          className='flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
-              border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
-          <div className='flex w-5 h-5 justify-center items-center'>
-            <Group className='text-text-tertiary' />
-          </div>
-        </div>
-        <div className="ml-3 grow">
-          <div className="flex items-center h-5 system-md-semibold text-text-destructive">
-            Plugin load error
-          </div>
-          <div className={cn('flex items-center h-4 space-x-0.5')}>
-            This plugin will not be installed
+    <div className='flex items-center space-x-2'>
+      <Checkbox
+        className='shrink-0'
+        checked={false}
+        disabled
+      />
+      <div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
+        <div className="flex">
+          <div
+            className='relative flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
+              border-[0.5px] border-state-destructive-border bg-state-destructive-hover backdrop-blur-sm'>
+            <div className='flex w-5 h-5 justify-center items-center'>
+              <Group className='text-text-quaternary' />
+            </div>
+            <div className='absolute bottom-[-4px] right-[-4px] rounded-full border-[2px] border-components-panel-bg bg-state-destructive-solid'>
+              <RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
+            </div>
+          </div>
+          <div className="ml-3 grow">
+            <div className="flex items-center h-5 system-md-semibold text-text-destructive">
+              {t('plugin.installModal.pluginLoadError')}
+            </div>
+            <div className='mt-0.5 system-xs-regular text-text-tertiary'>
+              {t('plugin.installModal.pluginLoadErrorDesc')}
+            </div>
           </div>
         </div>
+        <LoadingPlaceholder className="mt-3 w-[420px]" />
       </div>
-      <LoadingPlaceholder className="mt-3 w-[420px]" />
     </div>
   )
 }
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
index 27e7cca7ad..49e5b27bd1 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
@@ -8,6 +8,7 @@ import { useFetchPluginsInMarketPlaceByIds } from '@/service/use-plugins'
 import produce from 'immer'
 import { useGetState } from 'ahooks'
 import PackageItem from '../item/package-item'
+import LoadingError from '../../base/loading-error'
 
 type Props = {
   allPlugins: Dependency[]
@@ -105,7 +106,7 @@ const InstallByDSLList: FC<Props> = ({
       {allPlugins.map((d, index) => {
         if (errorIndexes.includes(index)) {
           return (
-            <div key={index}>error</div>
+            <LoadingError key={index} />
           )
         }
         if (d.type === 'github') {
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 0e8e6dfccd..bcbb1648f4 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -116,6 +116,8 @@ const translation = {
     cancel: 'Cancel',
     back: 'Back',
     next: 'Next',
+    pluginLoadError: 'Plugin load error',
+    pluginLoadErrorDesc: 'This plugin will not be installed',
   },
   installFromGitHub: {
     installPlugin: 'Install plugin from GitHub',
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index c1ad4e0d67..b293f99f8f 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -116,6 +116,8 @@ const translation = {
     cancel: '取消',
     back: '返回',
     next: '下一步',
+    pluginLoadError: '插件加载错误',
+    pluginLoadErrorDesc: '此插件将不会被安装',
   },
   installFromGitHub: {
     installPlugin: '从 GitHub 安装插件',