From 035c9eb147af60c808d11d4e82917c17334c5cdc Mon Sep 17 00:00:00 2001
From: Yi <yxiaoisme@gmail.com>
Date: Thu, 7 Nov 2024 15:31:11 +0800
Subject: [PATCH] fix: propagation from closing tag in filters

---
 web/app/components/plugins/install-plugin/hooks.ts | 14 ++------------
 .../install-from-github/steps/selectPackage.tsx    | 12 +++++++-----
 .../filter-management/category-filter.tsx          |  7 ++++++-
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/web/app/components/plugins/install-plugin/hooks.ts b/web/app/components/plugins/install-plugin/hooks.ts
index 9054933aa2..8ad26985cd 100644
--- a/web/app/components/plugins/install-plugin/hooks.ts
+++ b/web/app/components/plugins/install-plugin/hooks.ts
@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import Toast from '@/app/components/base/toast'
 import { uploadGitHub } from '@/service/plugins'
 import { Octokit } from '@octokit/core'
@@ -42,18 +41,12 @@ export const useGitHubReleases = () => {
 }
 
 export const useGitHubUpload = () => {
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
   const handleUpload = async (
     repoUrl: string,
     selectedVersion: string,
     selectedPackage: string,
     onSuccess?: (GitHubPackage: { manifest: any; unique_identifier: string }) => void,
   ) => {
-    setIsLoading(true)
-    setError(null)
-
     try {
       const response = await uploadGitHub(repoUrl, selectedVersion, selectedPackage)
       const GitHubPackage = {
@@ -64,16 +57,13 @@ export const useGitHubUpload = () => {
       return GitHubPackage
     }
     catch (error) {
-      setError('Error uploading package')
       Toast.notify({
         type: 'error',
         message: 'Error uploading package',
       })
-    }
-    finally {
-      setIsLoading(false)
+      throw error
     }
   }
 
-  return { handleUpload, isLoading, error }
+  return { handleUpload }
 }
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
index 00729e2d67..9b83c39867 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
@@ -8,6 +8,8 @@ import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
 import { useTranslation } from 'react-i18next'
 import { useGitHubUpload } from '../../hooks'
 
+const i18nPrefix = 'plugin.installFromGitHub'
+
 type SelectPackageProps = {
   updatePayload: UpdateFromGitHubPayload
   repoUrl: string
@@ -60,7 +62,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
       if (e.response?.message)
         onFailed(e.response?.message)
       else
-        onFailed(t('plugin.error.uploadFailed'))
+        onFailed(t(`${i18nPrefix}.uploadFailed`))
     }
     finally {
       setIsUploading(false)
@@ -73,28 +75,28 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
         htmlFor='version'
         className='flex flex-col justify-center items-start self-stretch text-text-secondary'
       >
-        <span className='system-sm-semibold'>{t('plugin.installFromGitHub.selectVersion')}</span>
+        <span className='system-sm-semibold'>{t(`${i18nPrefix}.selectVersion`)}</span>
       </label>
       <PortalSelect
         value={selectedVersion}
         onSelect={onSelectVersion}
         items={versions}
         installedValue={updatePayload?.originalPackageInfo.version}
-        placeholder={t('plugin.installFromGitHub.selectVersionPlaceholder') || ''}
+        placeholder={t(`${i18nPrefix}.selectVersionPlaceholder`) || ''}
         popupClassName='w-[512px] z-[1001]'
       />
       <label
         htmlFor='package'
         className='flex flex-col justify-center items-start self-stretch text-text-secondary'
       >
-        <span className='system-sm-semibold'>{t('plugin.installFromGitHub.selectPackage')}</span>
+        <span className='system-sm-semibold'>{t(`${i18nPrefix}.selectPackage`)}</span>
       </label>
       <PortalSelect
         value={selectedPackage}
         onSelect={onSelectPackage}
         items={packages}
         readonly={!selectedVersion}
-        placeholder={t('plugin.installFromGitHub.selectPackagePlaceholder') || ''}
+        placeholder={t(`${i18nPrefix}.selectPackagePlaceholder`) || ''}
         popupClassName='w-[512px] z-[1001]'
       />
       <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
diff --git a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
index b7a60a7e43..8544bef95c 100644
--- a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
@@ -87,7 +87,12 @@ const CategoriesFilter = ({
             !!selectedTagsLength && (
               <RiCloseCircleFill
                 className='w-4 h-4 text-text-quaternary cursor-pointer'
-                onClick={() => onChange([])}
+                onClick={
+                  (e) => {
+                    e.stopPropagation()
+                    onChange([])
+                  }
+                }
               />
             )
           }