plugin tab

packages/web/package.json

@@ -42,6 +42,7 @@
     "@mdi/font": "^5.9.55",
     "file-selector": "^0.2.4",
     "sirv-cli": "^1.0.0",
+    "svelte-markdown": "^0.1.4",
     "svelte-select": "^3.17.0"
   }
 }

packages/web/src/elements/Markdown.svelte

@@ -0,0 +1,8 @@
+<script>
+  import SvelteMarkdown from 'svelte-markdown';
+  import Link from './Link.svelte';
+
+  export let source;
+</script>
+
+<SvelteMarkdown {source} renderers={{ link: Link }} />

packages/web/src/plugins/PluginsList.svelte

@@ -20,7 +20,7 @@
 {#each plugins as packageManifest (packageManifest.name)}
   <div class="wrapper" on:click={() => openPlugin(packageManifest)}>
     <img class="icon" src={extractPluginIcon(packageManifest)} />
-    <div class="ml-1">
+    <div class="ml-2">
       <div class="flex">
         <div class="bold">{packageManifest.name}</div>
         <div class="ml-1">{packageManifest.version}</div>

packages/web/src/tabs/MarkdownEditorTab.svelte

@@ -30,27 +30,18 @@
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
   import { getContext } from 'svelte';
-  import { get, derived, writable } from 'svelte/store';
   import registerCommand from '../commands/registerCommand';
   import { registerFileCommands } from '../commands/stdCommands';
 
-  import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import AceEditor from '../query/AceEditor.svelte';
-  import RunnerOutputPane from '../query/RunnerOutputPane.svelte';
   import useEditorData from '../query/useEditorData';
-  import { activeTabId, getActiveTabId, nullStore } from '../stores';
+  import { getActiveTabId } from '../stores';
-  import axiosInstance from '../utility/axiosInstance';
+  import invalidateCommands from '../commands/invalidateCommands';
-  import memberStore from '../utility/memberStore';
-  import socket from '../utility/socket';
-  import useEffect from '../utility/useEffect';
-import invalidateCommands from '../commands/invalidateCommands';
 
   export let tabid;
 
   const tabVisible: any = getContext('tabVisible');
 
-  let runnerId;
-
   const instance = get_current_component();
 
   let domEditor;

packages/web/src/tabs/PluginTab.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" context="module">
+  export const matchingProps = ['packageName'];
+</script>
+
+<script lang="ts">
+  import compareVersions from 'compare-versions';
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+import Markdown from '../elements/Markdown.svelte';
+  import { extractPluginAuthor, extractPluginIcon } from '../plugins/manifestExtractors';
+
+  import axiosInstance from '../utility/axiosInstance';
+  import hasPermission from '../utility/hasPermission';
+
+  import { useInstalledPlugins } from '../utility/metadataLoaders';
+  import useFetch from '../utility/useFetch';
+
+  export let packageName;
+
+  $: installed = useInstalledPlugins();
+  $: info = useFetch({
+    params: { packageName },
+    url: 'plugins/info',
+    defaultValue: null,
+  });
+  $: readme = $info?.readme;
+  $: manifest = $info?.manifest;
+
+  const handleInstall = async () => {
+    axiosInstance.post('plugins/install', { packageName });
+  };
+  const handleUninstall = async () => {
+    axiosInstance.post('plugins/uninstall', { packageName });
+  };
+  const handleUpgrade = async () => {
+    axiosInstance.post('plugins/upgrade', { packageName });
+  };
+
+  $: installedFound = $installed?.find(x => x.name == packageName);
+  $: onlineFound = manifest;
+
+  $: {
+    if (manifest == null) {
+      if (installedFound) {
+        manifest = installedFound;
+        readme = installedFound.readme;
+      }
+    }
+  }
+</script>
+
+{#if manifest}
+  <div class="white-page">
+    <div class="header">
+      <img src={extractPluginIcon(manifest)} class="icon" />
+      <div class="ml-2">
+        <div class="title">{packageName}</div>
+        <div class="mt-1">
+          <span class="bold">{extractPluginAuthor(manifest)}</span>
+          <span> | </span>
+          <span>{installedFound ? installedFound.version : manifest.version}</span>
+        </div>
+        <div class="mt-1">
+          {#if hasPermission('plugins/install') && !installedFound}
+            <FormStyledButton type="button" value="Install" on:click={handleInstall} />
+          {/if}
+          {#if hasPermission('plugins/install') && installedFound}
+            <FormStyledButton type="button" value="Uninstall" on:click={handleUninstall} />
+          {/if}
+          {#if hasPermission('plugins/install') && installedFound && onlineFound && compareVersions(onlineFound.version, installedFound.version) > 0}
+            <FormStyledButton type="button" value="Upgrade" on:click={handleUpgrade} />
+          {/if}
+        </div>
+      </div>
+    </div>
+    <Markdown source={readme} />
+  </div>
+{/if}
+
+<style>
+  .white-page {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--theme-bg-0);
+    overflow: auto;
+    padding: 10px;
+  }
+
+  .header {
+    display: flex;
+    border-bottom: 1px solid var(--theme-border);
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+  }
+
+  .title {
+    font-size: 20pt;
+  }
+
+  .icon {
+    width: 80px;
+    height: 80px;
+  }
+</style>

packages/web/src/tabs/index.js

@@ -5,7 +5,7 @@ import * as QueryTab from './QueryTab.svelte';
 import * as ShellTab from './ShellTab.svelte';
 import * as ArchiveFileTab from './ArchiveFileTab.svelte';
 import * as FreeTableTab from './FreeTableTab.svelte';
-// import PluginTab from './PluginTab';
+import * as PluginTab from './PluginTab.svelte';
 import * as ChartTab from './ChartTab.svelte';
 import * as MarkdownEditorTab from './MarkdownEditorTab.svelte';
 // import MarkdownViewTab from './MarkdownViewTab';
@@ -21,7 +21,7 @@ export default {
   ShellTab,
   ArchiveFileTab,
   FreeTableTab,
-  //   PluginTab,
+  PluginTab,
   ChartTab,
   MarkdownEditorTab,
   //   MarkdownViewTab,

yarn.lock

@@ -4685,6 +4685,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.1.tgz#5e7ed7009bfa5c95182e4eb696f85e948cefcee3"
+  integrity sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -6988,6 +6993,13 @@ svelte-check@^1.0.0:
     svelte-preprocess "^4.0.0"
     typescript "*"
 
+svelte-markdown@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/svelte-markdown/-/svelte-markdown-0.1.4.tgz#03bec6dcd8ff1c09126e7c62c8a5a481905881d7"
+  integrity sha512-PXr3R/EJ5cPpk/DZoLXG5dOsRoXqHO541KcH340UQojU5MdnFvfgGSif00WjAApuV1RpdkjujhzJ1Gy54r+5pg==
+  dependencies:
+    marked "^2.0.0"
+
 svelte-preprocess@^4.0.0:
   version "4.6.9"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.6.9.tgz#073d923eb351b98b6c6a454ba5feee981cd9dbf5"