Feat/admin react (#6211)

* Added vite react admin ui. * Added react i18next. * Added pads manager. * Fixed docker build. * Fixed windows build. * Fixed installOnWindows script. * Install only if path exists.
2025-04-20 15:36:16 -04:00 · 2024-03-09 23:07:09 +01:00 · 2024-03-09 23:07:09 +01:00 · db46ffb63b
commit db46ffb63b
parent d34b964cc2
112 changed files with 3327 additions and 946 deletions
--- a/admin/src/pages/HomePage.tsx
+++ b/admin/src/pages/HomePage.tsx
@ -0,0 +1,179 @@
+import {useStore} from "../store/store.ts";
+import {useEffect, useState} from "react";
+import {InstalledPlugin, PluginDef, SearchParams} from "./Plugin.ts";
+import {useDebounce} from "../utils/useDebounce.ts";
+import {Trans, useTranslation} from "react-i18next";
+
+
+export const HomePage = () => {
+    const pluginsSocket = useStore(state=>state.pluginsSocket)
+    const [plugins,setPlugins] = useState<PluginDef[]>([])
+    const [installedPlugins, setInstalledPlugins] = useState<InstalledPlugin[]>([])
+    const [searchParams, setSearchParams] = useState<SearchParams>({
+        offset: 0,
+        limit: 99999,
+        sortBy: 'name',
+        sortDir: 'asc',
+        searchTerm: ''
+    })
+    const [searchTerm, setSearchTerm] = useState<string>('')
+    const {t} = useTranslation()
+
+
+    useEffect(() => {
+        if(!pluginsSocket){
+            return
+        }
+
+        pluginsSocket.on('results:installed', (data:{
+            installed: InstalledPlugin[]
+        })=>{
+            setInstalledPlugins(data.installed)
+        })
+
+        pluginsSocket.on('results:updatable', (data) => {
+            data.updatable.forEach((pluginName: string) => {
+                setInstalledPlugins(installedPlugins.map(plugin => {
+                    if (plugin.name === pluginName) {
+                        return {
+                            ...plugin,
+                            updatable: true
+                        }
+                    }
+                    return plugin
+                }))
+            })
+        })
+
+        pluginsSocket.on('finished:install', () => {
+            pluginsSocket!.emit('getInstalled');
+        })
+
+        pluginsSocket.on('finished:uninstall', () => {
+            console.log("Finished uninstall")
+        })
+
+
+        // Reload on reconnect
+        pluginsSocket.on('connect', ()=>{
+            // Initial retrieval of installed plugins
+            pluginsSocket.emit('getInstalled');
+            pluginsSocket.emit('search', searchParams)
+        })
+
+        pluginsSocket.emit('getInstalled');
+
+        // check for updates every 5mins
+        const interval = setInterval(() => {
+            pluginsSocket.emit('checkUpdates');
+        }, 1000 * 60 * 5);
+
+        return ()=>{
+            clearInterval(interval)
+        }
+        }, [pluginsSocket]);
+
+
+    useEffect(() => {
+        if (!pluginsSocket) {
+            return
+        }
+
+        pluginsSocket?.emit('search', searchParams)
+
+
+        pluginsSocket!.on('results:search', (data: {
+            results: PluginDef[]
+        }) => {
+            setPlugins(data.results)
+        })
+
+
+    }, [searchParams, pluginsSocket]);
+
+    const uninstallPlugin  = (pluginName: string)=>{
+        pluginsSocket!.emit('uninstall', pluginName);
+        // Remove plugin
+        setInstalledPlugins(installedPlugins.filter(i=>i.name !== pluginName))
+    }
+
+    const installPlugin = (pluginName: string)=>{
+        pluginsSocket!.emit('install', pluginName);
+        setPlugins(plugins.filter(plugin=>plugin.name !== pluginName))
+    }
+
+
+    useDebounce(()=>{
+        setSearchParams({
+            ...searchParams,
+            offset: 0,
+            searchTerm: searchTerm
+        })
+    }, 500, [searchTerm])
+
+    return <div>
+        <h1><Trans i18nKey="admin_plugins"/></h1>
+
+        <h2><Trans i18nKey="admin_plugins.installed"/></h2>
+
+        <table>
+            <thead>
+            <tr>
+                <th><Trans i18nKey="admin_plugins.name"/></th>
+                <th><Trans i18nKey="admin_plugins.version"/></th>
+                <th></th>
+            </tr>
+            </thead>
+            <tbody style={{overflow: 'auto'}}>
+            {installedPlugins.map((plugin, index) => {
+                return <tr key={index}>
+                    <td>{plugin.name}</td>
+                    <td>{plugin.version}</td>
+                    <td>
+                    {
+                        plugin.updatable ?
+                            <button onClick={() => installPlugin(plugin.name)}>Update</button>
+                            : <button disabled={plugin.name == "ep_etherpad-lite"}
+                                      onClick={() => uninstallPlugin(plugin.name)}><Trans
+                            i18nKey="admin_plugins.installed_uninstall.value"/></button>
+
+                    }
+                    </td>
+                        </tr>
+                    })}
+                </tbody>
+            </table>
+
+
+                <h2><Trans i18nKey="admin_plugins.available"/></h2>
+
+                <input className="search-field" placeholder={t('admin_plugins.available_search.placeholder')} type="text" value={searchTerm} onChange={v=>{
+            setSearchTerm(v.target.value)
+        }}/>
+
+        <table>
+            <thead>
+            <tr>
+                <th><Trans i18nKey="admin_plugins.name"/></th>
+                <th style={{width: '30%'}}><Trans i18nKey="admin_plugins.description"/></th>
+                <th><Trans i18nKey="admin_plugins.version"/></th>
+                <th><Trans i18nKey="admin_plugins.last-update"/></th>
+                <th></th>
+            </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>
+                        <button onClick={() => installPlugin(plugin.name)}><Trans i18nKey="admin_plugins.available_install.value"/></button>
+                    </td>
+                </tr>
+            })}
+            </tbody>
+        </table>
+    </div>
+}