download plugin, show readme

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>
   );
 }