download plugin, show readme

packages/api/package.json

@@ -47,6 +47,7 @@
     "mysql": "^2.17.1",
     "nedb-promises": "^4.0.1",
     "node-fetch": "^2.6.1",
+    "pacote": "^11.1.13",
     "pg": "^7.17.0",
     "pg-query-stream": "^3.1.1",
     "xlsx": "^0.16.8"

packages/api/src/controllers/plugins.js

@@ -1,9 +1,12 @@
 const fs = require('fs-extra');
 const fetch = require('node-fetch');
+const path = require('path');
+const pacote = require('pacote');
+const { pluginstmpdir } = require('../utility/directories');
 
 module.exports = {
   script_meta: 'get',
-  async script({ plugin }) {
+  async script({ packageName }) {
     const data = await fs.readFile('/home/jena/jenasoft/dbgate-plugin-csv/lib/frontend.js', {
       encoding: 'utf-8',
     });
@@ -12,11 +15,21 @@ module.exports = {
 
   search_meta: 'get',
   async search({ filter }) {
-    console.log(`https://api.npms.io/v2/search?q=keywords:dbgate ${encodeURIComponent(filter)}`);
     const response = await fetch(`https://api.npms.io/v2/search?q=keywords:dbgate ${encodeURIComponent(filter)}`);
     const json = await response.json();
     console.log(json);
     const { results } = json || {};
     return results || [];
   },
+
+  readme_meta: 'get',
+  async readme({ packageName }) {
+    const dir = path.join(pluginstmpdir(), packageName);
+    if (!(await fs.exists(dir))) {
+      await pacote.extract(packageName, dir);
+    }
+    const file = path.join(dir, 'README.md');
+    if (await fs.exists(file)) return await fs.readFile(file, { encoding: 'utf-8' });
+    return '';
+  },
 };

packages/web/package.json

@@ -4,9 +4,6 @@
   "private": true,
   "dependencies": {
     "@ant-design/colors": "^5.0.0",
-    "dbgate-datalib": "^1.0.0",
-    "dbgate-engines": "^1.0.0",
-    "dbgate-sqltree": "^1.0.0",
     "@mdi/font": "^5.8.55",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -14,6 +11,9 @@
     "ace-builds": "^1.4.8",
     "axios": "^0.19.0",
     "cross-env": "^6.0.3",
+    "dbgate-datalib": "^1.0.0",
+    "dbgate-engines": "^1.0.0",
+    "dbgate-sqltree": "^1.0.0",
     "eslint": "^6.8.0",
     "eslint-plugin-react": "^7.17.0",
     "formik": "^2.1.0",
@@ -24,6 +24,7 @@
     "react-dropzone": "^11.2.3",
     "react-helmet": "^6.1.0",
     "react-json-view": "^1.19.1",
+    "react-markdown": "^5.0.3",
     "react-modal": "^3.11.1",
     "react-scripts": "3.3.0",
     "react-select": "^3.1.0",
@@ -54,9 +55,9 @@
     ]
   },
   "devDependencies": {
-    "dbgate-types": "^1.0.0",
     "@types/react": "^16.9.17",
     "@types/styled-components": "^4.4.2",
+    "dbgate-types": "^1.0.0",
     "typescript": "^3.7.4"
   }
 }

packages/web/src/plugins/PluginIcon.js

@@ -0,0 +1,7 @@
+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,6 +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';
 
 const Wrapper = styled.div`
   margin: 1px 3px 10px 5px;
@@ -25,7 +26,7 @@ const Line = styled.div`
   display: flex;
 `;
 
-const Icon = styled.img`
+const Icon = styled(PluginIcon)`
   width: 50px;
   height: 50px;
 `;
@@ -58,7 +59,7 @@ function PluginsListItem({ plugin }) {
   const theme = useTheme();
   return (
     <Wrapper onClick={() => openPlugin(setOpenedTabs, plugin)} theme={theme}>
-      <Icon src="https://raw.githubusercontent.com/dbshell/dbgate-plugin-csv/master/icon.svg" />
+      <Icon plugin={plugin} />
       <Texts>
         <Line>
           <Name>{plugin.package.name}</Name>

packages/web/src/tabs/PluginTab.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
 import _ from 'lodash';
+import ReactMarkdown from 'react-markdown';
 import ObjectListControl from '../utility/ObjectListControl';
 import { TableColumn } from '../utility/TableControl';
 import columnAppObject from '../appobj/columnAppObject';
 import constraintAppObject from '../appobj/constraintAppObject';
 import { useTableInfo, useDbCore } from '../utility/metadataLoaders';
 import useTheme from '../theme/useTheme';
+import useFetch from '../utility/useFetch';
+import LoadingInfo from '../widgets/LoadingInfo';
 
 const WhitePage = styled.div`
   position: absolute;
@@ -16,13 +19,26 @@ const WhitePage = styled.div`
   bottom: 0;
   background-color: ${(props) => props.theme.main_background};
   overflow: auto;
+  padding: 10px;
+`;
+
+const Title = styled.div`
+  font-size: 20pt;
+  border-bottom: 1px solid ${(props) => props.theme.border};
 `;
 
 export default function PluginTab({ plugin }) {
   const theme = useTheme();
+  const packageName = plugin.package.name;
+  const readme = useFetch({
+    params: { packageName },
+    url: 'plugins/readme',
+    defaultValue: null,
+  });
   return (
     <WhitePage theme={theme}>
-      <div>{plugin.package.name}</div>
+      <Title theme={theme}>{packageName}</Title>
+      {readme == null ? <LoadingInfo message="Loading extension detail" /> : <ReactMarkdown>{readme}</ReactMarkdown>}
     </WhitePage>
   );
 }