From a5915d17cd334b51f989f80d3aa8697285ce0ec2 Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Thu, 27 May 2021 14:07:34 +0800
Subject: [PATCH] fix(debugapi): search endpoint name

---
 ui/lib/apps/DebugAPI/apilist/ApiList.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/lib/apps/DebugAPI/apilist/ApiList.tsx b/ui/lib/apps/DebugAPI/apilist/ApiList.tsx
index 05d2726bb6..ac7d8eefb9 100644
--- a/ui/lib/apps/DebugAPI/apilist/ApiList.tsx
+++ b/ui/lib/apps/DebugAPI/apilist/ApiList.tsx
@@ -15,23 +15,33 @@ import style from './ApiList.module.less'
 import ApiForm, { Topology } from './ApiForm'
 import { buildQueryString } from './widgets'
 
+const getEndpointTranslationKey = (endpoint: EndpointAPIModel) =>
+  `debug_api.${endpoint.component}.endpoints.${endpoint.id}`
+
 const useFilterEndpoints = (endpoints?: EndpointAPIModel[]) => {
   const [keywords, setKeywords] = useState('')
   const nonNullEndpoints = useMemo(() => endpoints || [], [endpoints])
   const [filteredEndpoints, setFilteredEndpoints] = useState<
     EndpointAPIModel[]
   >(nonNullEndpoints)
+  const { t } = useTranslation()
 
   useEffect(() => {
     const k = keywords.trim()
     if (!!k) {
       setFilteredEndpoints(
-        nonNullEndpoints.filter((e) => e.id?.includes(k) || e.path?.includes(k))
+        nonNullEndpoints.filter((e) => {
+          return (
+            e.id?.includes(k) ||
+            e.path?.includes(k) ||
+            t(getEndpointTranslationKey(e)).includes(k)
+          )
+        })
       )
     } else {
       setFilteredEndpoints(nonNullEndpoints)
     }
-  }, [nonNullEndpoints, keywords])
+  }, [nonNullEndpoints, keywords, t])
 
   return {
     endpoints: filteredEndpoints,
@@ -189,9 +199,7 @@ function CustomHeader({
     <div className={style.header}>
       <Space direction="vertical">
         <Space>
-          <h4>
-            {t(`debug_api.${endpoint.component}.endpoints.${endpoint.id}`)}
-          </h4>
+          <h4>{t(getEndpointTranslationKey(endpoint))}</h4>
         </Space>
         <Schema endpoint={endpoint} />
       </Space>