install/uninstall plugin

packages/web/src/plugins/PluginIcon.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function PluginIcon({ plugin, className = undefined }) {
-  return (
-    <img src="https://raw.githubusercontent.com/dbshell/dbgate-plugin-csv/master/icon.svg" className={className} />
-  );
-}

packages/web/src/plugins/PluginsList.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import useTheme from '../theme/useTheme';
 import { openNewTab } from '../utility/common';
 import { useSetOpenedTabs } from '../utility/globalState';
-import PluginIcon from './PluginIcon';
+import { extractPluginIcon, extractPluginAuthor } from '../plugins/manifestExtractors';
 
 const Wrapper = styled.div`
   margin: 1px 3px 10px 5px;
@@ -26,7 +26,7 @@ const Line = styled.div`
   display: flex;
 `;
 
-const Icon = styled(PluginIcon)`
+const Icon = styled.img`
   width: 50px;
   height: 50px;
 `;
@@ -43,33 +43,33 @@ const Version = styled.div`
   margin-left: 5px;
 `;
 
-function openPlugin(setOpenedTabs, plugin) {
+function openPlugin(setOpenedTabs, packageManifest) {
   openNewTab(setOpenedTabs, {
-    title: plugin.package.name,
+    title: packageManifest.name,
     icon: 'icon plugin',
     tabComponent: 'PluginTab',
     props: {
-      plugin,
+      packageName: packageManifest.name,
     },
   });
 }
 
-function PluginsListItem({ plugin }) {
+function PluginsListItem({ packageManifest }) {
   const setOpenedTabs = useSetOpenedTabs();
   const theme = useTheme();
   return (
-    <Wrapper onClick={() => openPlugin(setOpenedTabs, plugin)} theme={theme}>
-      <Icon plugin={plugin} />
+    <Wrapper onClick={() => openPlugin(setOpenedTabs, packageManifest)} theme={theme}>
+      <Icon src={extractPluginIcon(packageManifest)} />
       <Texts>
         <Line>
-          <Name>{plugin.package.name}</Name>
-          <Version>{plugin.package.version}</Version>
+          <Name>{packageManifest.name}</Name>
+          <Version>{packageManifest.version}</Version>
         </Line>
         <Line>
-          <Description>{plugin.package.description}</Description>
+          <Description>{packageManifest.description}</Description>
         </Line>
         <Line>
-          <Author>{plugin.package.author && plugin.package.author.name}</Author>
+          <Author>{extractPluginAuthor(packageManifest)}</Author>
         </Line>
       </Texts>
     </Wrapper>
@@ -79,8 +79,8 @@ function PluginsListItem({ plugin }) {
 export default function PluginsList({ plugins }) {
   return (
     <>
-      {plugins.map((plugin) => (
-        <PluginsListItem plugin={plugin} key={plugin.package.name} />
+      {plugins.map((packageManifest) => (
+        <PluginsListItem packageManifest={packageManifest} key={packageManifest.name} />
       ))}
     </>
   );

packages/web/src/plugins/PluginsProvider.js

@@ -1,23 +1,40 @@
 import React from 'react';
+import _ from 'lodash';
 import axios from '../utility/axios';
+import { useInstalledPlugins } from '../utility/metadataLoaders';
 
 const PluginsContext = React.createContext(null);
 
 export default function PluginsProvider({ children }) {
-  const [plugins, setPlugins] = React.useState(null);
-  const handleLoadPlugin = async () => {
-    const resp = await axios.request({
-      method: 'get',
-      url: 'plugins/script',
-      params: {
-        plugin: 'csv',
-      },
-    });
-    const module = eval(resp.data);
-    console.log('MODULE', module);
+  const installedPlugins = useInstalledPlugins();
+  const [plugins, setPlugins] = React.useState({});
+  const handleLoadPlugins = async () => {
+    setPlugins((x) =>
+      _.pick(
+        x,
+        installedPlugins.map((y) => y.name)
+      )
+    );
+    for (const installed of installedPlugins) {
+      if (!_.keys(plugins).includes(installed.name)) {
+        console.log('Loading module', installed.name);
+        const resp = await axios.request({
+          method: 'get',
+          url: 'plugins/script',
+          params: {
+            packageName: installed.name,
+          },
+        });
+        const module = eval(resp.data);
+        setPlugins((v) => ({
+          ...v,
+          [installed.name]: module,
+        }));
+      }
+    }
   };
   React.useEffect(() => {
-    handleLoadPlugin();
-  }, []);
-  return <PluginsContext.Provider value={{ plugins, setPlugins }}>{children}</PluginsContext.Provider>;
+    handleLoadPlugins();
+  }, [installedPlugins]);
+  return <PluginsContext.Provider value={plugins}>{children}</PluginsContext.Provider>;
 }

packages/web/src/plugins/manifestExtractors.js

@@ -0,0 +1,20 @@
+import _ from 'lodash';
+
+export function extractPluginIcon(packageManifest) {
+  const { links } = packageManifest || {};
+  const { repository, homepage } = links || {};
+  const tested = repository || homepage || packageManifest.homepage;
+
+  if (tested) {
+    const match = tested.match(/https:\/\/github.com\/([^/]*)\/([^/]*)/);
+    if (match) {
+      return `https://raw.githubusercontent.com/${match[1]}/${match[2]}/master/icon.svg`;
+    }
+  }
+  // eslint-disable-next-line no-undef
+  return `${process.env.PUBLIC_URL}/unknown.svg`;
+}
+
+export function extractPluginAuthor(packageManifest) {
+  return _.isPlainObject(packageManifest.author) ? packageManifest.author.name : packageManifest.author;
+}