add update modal

packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte

@@ -7,18 +7,27 @@
     Button,
     Label,
     Input,
+    Dropzone,
   } from "@budibase/bbui"
   import DeletePluginModal from "../_components/DeletePluginModal.svelte"
+  import { plugins } from "stores/portal"
 
   export let plugin
 
   let detailsModal
   let deleteModal
+  let updateModal
 
+  let file
   let icon =
     plugin.schema.type === "component"
       ? plugin.schema.schema.icon || "Book"
       : plugin.schema.schema.icon || "Beaker"
+
+  async function save() {
+    let update = true
+    await plugins.uploadPlugin(file, plugin.source, update)
+  }
 </script>
 
 <div class="row">
@@ -88,9 +97,13 @@
     <div class="footer" slot="footer">
       <Button newStyles on:click={deleteModal.show()} warning>Delete</Button>
 
-      <Button newStyles>Update</Button>
-
-      <Button cta newStyles on:click={detailsModal.hide()}>Done</Button>
+      <Button
+        on:click={() => {
+          detailsModal.hide()
+          updateModal.show()
+        }}
+        newStyles>Update</Button
+      >
     </div>
   </ModalContent>
 
@@ -99,6 +112,38 @@
   </Modal>
 </Modal>
 
+<Modal bind:this={updateModal}>
+  <ModalContent
+    size="M"
+    title="Update Plugin"
+    showConfirmButton={true}
+    showCancelButton={true}
+    cancelText="Back"
+    onConfirm={() => save()}
+    onCancel={() => {
+      updateModal.hide()
+      detailsModal.show()
+    }}
+  >
+    {#if plugin.source === "File Upload"}
+      <div class="form-row">
+        <Label size="M">File Upload</Label>
+      </div>
+      <Dropzone
+        gallery={false}
+        value={[file]}
+        on:change={e => {
+          if (!e.detail || e.detail.length === 0) {
+            file = null
+          } else {
+            file = e.detail[0]
+          }
+        }}
+      />
+    {/if}
+  </ModalContent>
+</Modal>
+
 <style>
   .row {
     display: grid;
@@ -135,4 +180,11 @@
     display: flex;
     gap: var(--spacing-l);
   }
+
+  .form-row {
+    display: grid;
+    grid-template-columns: 60px 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
 </style>

packages/builder/src/stores/portal/plugins.js

@@ -50,11 +50,11 @@ export function createPluginsStore() {
     })
   }
 
-  async function uploadPlugin(file, source) {
+  async function uploadPlugin(file, source, updatePlugin) {
     let data = new FormData()
     data.append("file", file)
     data.append("source", source)
-
+    data.append("update", updatePlugin)
     let resp = await API.uploadPlugin(data)
     let newPlugin = resp.plugins[0]
     update(state => {

packages/server/src/api/controllers/plugin.ts

@@ -39,7 +39,11 @@ export async function upload(ctx: any) {
     let docs = []
     // can do single or multiple plugins
     for (let plugin of plugins) {
-      const doc = await processPlugin(plugin, ctx.request.body.source)
+      const doc = await processPlugin(
+        plugin,
+        ctx.request.body.source,
+        ctx.request.body.update
+      )
       docs.push(doc)
     }
     ctx.body = {
@@ -128,7 +132,8 @@ export async function destroy(ctx: any) {
 export async function storePlugin(
   metadata: any,
   directory: any,
-  source?: string
+  source?: string,
+  update?: boolean
 ) {
   const db = getGlobalDB()
   const version = metadata.package.version,
@@ -167,6 +172,9 @@ export async function storePlugin(
     const existing = await db.get(pluginId)
     rev = existing._rev
   } catch (err) {
+    if (update) {
+      throw new Error("Unable to update. Plugin does not exist")
+    }
     rev = undefined
   }
   let doc = {
@@ -185,6 +193,7 @@ export async function storePlugin(
       source,
     }
   }
+
   const response = await db.put(doc)
   return {
     ...doc,
@@ -192,11 +201,15 @@ export async function storePlugin(
   }
 }
 
-export async function processPlugin(plugin: FileType, source?: string) {
+export async function processPlugin(
+  plugin: FileType,
+  source?: string,
+  update?: boolean
+) {
   if (!env.SELF_HOSTED) {
     throw new Error("Plugins not supported outside of self-host.")
   }
 
   const { metadata, directory } = await uploadedFilePlugin(plugin)
-  return await storePlugin(metadata, directory, source)
+  return await storePlugin(metadata, directory, source, update)
 }