plugin tab

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 axiosInstance from '../utility/axiosInstance';
-  import memberStore from '../utility/memberStore';
-  import socket from '../utility/socket';
-  import useEffect from '../utility/useEffect';
-import invalidateCommands from '../commands/invalidateCommands';
+  import { getActiveTabId } from '../stores';
+  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,