search plugins, plugin tab

packages/web/src/plugins/PluginsList.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import styled from 'styled-components';
+import useTheme from '../theme/useTheme';
+import { openNewTab } from '../utility/common';
+import { useSetOpenedTabs } from '../utility/globalState';
+
+const Wrapper = styled.div`
+  margin: 1px 3px 10px 5px;
+  display: flex;
+  align-items: center;
+  &:hover {
+    background-color: ${(props) => props.theme.left_background_blue[1]};
+  }
+`;
+
+const Texts = styled.div`
+  margin-left: 10px;
+`;
+
+const Name = styled.div`
+  font-weight: bold;
+`;
+
+const Line = styled.div`
+  display: flex;
+`;
+
+const Icon = styled.img`
+  width: 50px;
+  height: 50px;
+`;
+
+const Description = styled.div`
+  font-style: italic;
+`;
+
+const Author = styled.div`
+  font-weight: bold;
+`;
+
+const Version = styled.div`
+  margin-left: 5px;
+`;
+
+function openPlugin(setOpenedTabs, plugin) {
+  openNewTab(setOpenedTabs, {
+    title: plugin.package.name,
+    icon: 'icon plugin',
+    tabComponent: 'PluginTab',
+    props: {
+      plugin,
+    },
+  });
+}
+
+function PluginsListItem({ plugin }) {
+  const setOpenedTabs = useSetOpenedTabs();
+  const theme = useTheme();
+  return (
+    <Wrapper onClick={() => openPlugin(setOpenedTabs, plugin)} theme={theme}>
+      <Icon src="https://raw.githubusercontent.com/dbshell/dbgate-plugin-csv/master/icon.svg" />
+      <Texts>
+        <Line>
+          <Name>{plugin.package.name}</Name>
+          <Version>{plugin.package.version}</Version>
+        </Line>
+        <Line>
+          <Description>{plugin.package.description}</Description>
+        </Line>
+        <Line>
+          <Author>{plugin.package.author && plugin.package.author.name}</Author>
+        </Line>
+      </Texts>
+    </Wrapper>
+  );
+}
+
+export default function PluginsList({ plugins }) {
+  return (
+    <>
+      {plugins.map((plugin) => (
+        <PluginsListItem plugin={plugin} key={plugin.package.name} />
+      ))}
+    </>
+  );
+}

packages/web/src/plugins/PluginsProvider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import axios from '../utility/axios';
+
+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);
+  };
+  React.useEffect(() => {
+    handleLoadPlugin();
+  }, []);
+  return <PluginsContext.Provider value={{ plugins, setPlugins }}>{children}</PluginsContext.Provider>;
+}