From a63792116007a941eabe735bd843555cc95a1299 Mon Sep 17 00:00:00 2001
From: Helder Sepulveda <heldersepu@gmail.com>
Date: Mon, 10 Jun 2024 13:00:58 -0400
Subject: [PATCH] Move away from using toast in the plugin search (#6441)

---
 admin/src/pages/HomePage.tsx           | 58 +++++++++++++-------------
 src/node/hooks/express/adminplugins.ts | 10 +++--
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/admin/src/pages/HomePage.tsx b/admin/src/pages/HomePage.tsx
index 889432487..c96b03424 100644
--- a/admin/src/pages/HomePage.tsx
+++ b/admin/src/pages/HomePage.tsx
@@ -93,25 +93,20 @@ export const HomePage = () => {
         if (!pluginsSocket) {
             return
         }
-
         pluginsSocket?.emit('search', searchParams)
-
-
         pluginsSocket!.on('results:search', (data: {
             results: PluginDef[]
         }) => {
-            if (Array.isArray(data.results) && data.results.length > 0) {
-                setPlugins(data.results)
-            } else {
-                useStore.getState().setToastState({
-                    open: true,
-                    title: "Error retrieving plugins",
-                    success: false
-                })
-            }
+            setPlugins(data.results)
+        })
+        pluginsSocket!.on('results:searcherror', (data: {error: string}) => {
+            console.log(data.error)
+            useStore.getState().setToastState({
+                open: true,
+                title: "Error retrieving plugins",
+                success: false
+            })
         })
-
-
     }, [searchParams, pluginsSocket]);
 
     const uninstallPlugin  = (pluginName: string)=>{
@@ -125,7 +120,6 @@ export const HomePage = () => {
         setPlugins(plugins.filter(plugin=>plugin.name !== pluginName))
     }
 
-
     useDebounce(()=>{
         setSearchParams({
             ...searchParams,
@@ -161,12 +155,12 @@ export const HomePage = () => {
                     </td>
                         </tr>
                     })}
-                </tbody>
-            </table>
+            </tbody>
+        </table>
 
 
-                <h2><Trans i18nKey="admin_plugins.available"/></h2>
-                <SearchField onChange={v=>{setSearchTerm(v.target.value)}} placeholder={t('admin_plugins.available_search.placeholder')} value={searchTerm}/>
+        <h2><Trans i18nKey="admin_plugins.available"/></h2>
+        <SearchField onChange={v=>{setSearchTerm(v.target.value)}} placeholder={t('admin_plugins.available_search.placeholder')} value={searchTerm}/>
 
         <table id="available-plugins">
             <thead>
@@ -179,17 +173,21 @@ export const HomePage = () => {
             </tr>
             </thead>
             <tbody style={{overflow: 'auto'}}>
-            {plugins.map((plugin) => {
-                return <tr key={plugin.name}>
-                    <td><a rel="noopener noreferrer" href={`https://npmjs.com/${plugin.name}`} target="_blank">{plugin.name}</a></td>
-                    <td>{plugin.description}</td>
-                    <td>{plugin.version}</td>
-                    <td>{plugin.time}</td>
-                    <td>
-                        <IconButton icon={<Download/>} onClick={() => installPlugin(plugin.name)} title={<Trans i18nKey="admin_plugins.available_install.value"/>}/>
-                    </td>
-                </tr>
-            })}
+            {(plugins.length > 0) ?
+                    plugins.map((plugin) => {
+                        return <tr key={plugin.name}>
+                            <td><a rel="noopener noreferrer" href={`https://npmjs.com/${plugin.name}`} target="_blank">{plugin.name}</a></td>
+                            <td>{plugin.description}</td>
+                            <td>{plugin.version}</td>
+                            <td>{plugin.time}</td>
+                            <td>
+                                <IconButton icon={<Download/>} onClick={() => installPlugin(plugin.name)} title={<Trans i18nKey="admin_plugins.available_install.value"/>}/>
+                            </td>
+                        </tr>
+                    })
+                :
+                <tr><td colSpan={5}>{searchTerm == '' ? <Trans i18nKey="pad.loading"/>: <Trans i18nKey="admin_plugins.available_not-found"/>}</td></tr>
+            }
             </tbody>
         </table>
     </div>
diff --git a/src/node/hooks/express/adminplugins.ts b/src/node/hooks/express/adminplugins.ts
index 5272719f5..b5049a6e1 100644
--- a/src/node/hooks/express/adminplugins.ts
+++ b/src/node/hooks/express/adminplugins.ts
@@ -9,6 +9,8 @@ import {PackageData} from "../../types/PackageInfo";
 
 const pluginDefs = require('../../../static/js/pluginfw/plugin_defs');
 import semver from 'semver';
+import log4js from 'log4js';
+const logger = log4js.getLogger('adminPlugins');
 
 
 exports.socketio = (hookName:string, args:ArgsExpressType, cb:Function) => {
@@ -61,6 +63,7 @@ exports.socketio = (hookName:string, args:ArgsExpressType, cb:Function) => {
 
     socket.on('search', async (query: QueryType) => {
       try {
+        if (query.searchTerm) logger.info(`Plugin search: ${query.searchTerm}'`);
         const results = await search(query.searchTerm, /* maxCacheAge:*/ 60 * 10);
         let res = Object.keys(results)
             .map((pluginName) => results[pluginName])
@@ -68,10 +71,9 @@ exports.socketio = (hookName:string, args:ArgsExpressType, cb:Function) => {
         res = sortPluginList(res, query.sortBy, query.sortDir)
             .slice(query.offset, query.offset + query.limit);
         socket.emit('results:search', {results: res, query});
-      } catch (er) {
-        console.error(er);
-
-        socket.emit('results:search', {results: {}, query});
+      } catch (err: any) {
+        logger.error(`Error searching plugins: ${err}`);
+        socket.emit('results:searcherror', {error: err.message, query});
       }
     });