From 88ccae7768a50283373589f7936b72ed8552191d Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 5 Sep 2022 09:35:24 +0100
Subject: [PATCH] put plugin details in a modal

---
 .../plugins/_components/AddPluginModal.svelte |  18 +---
 .../plugins/_components/PluginRow.svelte      | 100 +++++++++++++-----
 2 files changed, 81 insertions(+), 37 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/manage/plugins/_components/AddPluginModal.svelte b/packages/builder/src/pages/builder/portal/manage/plugins/_components/AddPluginModal.svelte
index 1fce6746ad..7149136dec 100644
--- a/packages/builder/src/pages/builder/portal/manage/plugins/_components/AddPluginModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/_components/AddPluginModal.svelte
@@ -14,13 +14,11 @@
     NPM: ["URL"],
     Github: ["Github Token", "URL"],
     URL: ["Headers", "URL"],
-    File: ["Path", "Headers"],
-    Upload: ["Upload"],
+    "File Upload": ["File Upload"],
   }
   let file
   let sourceValue = "NPM"
   let typeValue = "Datasource"
-  let nameValue
   let dynamicValues = {}
 
   let verificationSuccessful = false
@@ -30,7 +28,7 @@
     const url = dynamicValues["URL"]
 
     switch (source) {
-      case "upload":
+      case "file upload":
         if (file) {
           await plugins.uploadPlugin(file, sourceValue)
         }
@@ -39,7 +37,6 @@
         await plugins.createPlugin(
           typeValue,
           source,
-          nameValue,
           url,
           dynamicValues["Github Token"]
         )
@@ -48,13 +45,12 @@
         await plugins.createPlugin(
           typeValue,
           source,
-          nameValue,
           url,
           dynamicValues["Headers"]
         )
         break
       case "npm":
-        await plugins.createPlugin(typeValue, source, nameValue, url)
+        await plugins.createPlugin(typeValue, source, url)
         break
     }
   }
@@ -86,16 +82,12 @@
     <Select
       placeholder={null}
       bind:value={sourceValue}
-      options={["NPM", "Github", "URL", "File", "Upload"]}
+      options={["NPM", "Github", "URL", "File Upload"]}
     />
   </div>
 
-  <div class="form-row">
-    <Label size="M">Name</Label>
-    <Input bind:value={nameValue} />
-  </div>
   {#each authOptions[sourceValue] as option}
-    {#if option === "Upload"}
+    {#if option === "File Upload"}
       <div class="form-row">
         <Label size="M">{option}</Label>
 
diff --git a/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte b/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
index 3a92a699e6..4b990ed831 100644
--- a/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
@@ -1,14 +1,18 @@
 <script>
-  import { Icon, Body, ActionMenu, MenuItem, Detail } from "@budibase/bbui"
+  import {
+    Icon,
+    Body,
+    Modal,
+    ModalContent,
+    Button,
+    Label,
+    Input,
+  } from "@budibase/bbui"
   import { plugins } from "stores/portal"
 
   export let plugin
-  $: console.log(plugin)
-  let modal
 
-  function editGroup() {
-    modal.show()
-  }
+  let detailsModal
 </script>
 
 <div class="row">
@@ -25,36 +29,72 @@
         >
           {plugin.name}
         </Body>
-        <Detail size="S">
-          <div class="opacity">{plugin.schema.type}</div>
-        </Detail>
       </div>
     </div>
   </div>
-  <div class="desktop">{plugin.source || "-"}</div>
-  <div class="desktop">{plugin.author || "-"}</div>
   <div class="desktop">{plugin.version}</div>
+  <div class="desktop">
+    {plugin.schema.type.charAt(0).toUpperCase() + plugin.schema.type.slice(1)}
+  </div>
 
   <div>
-    <div>
-      <ActionMenu align="right">
-        <span slot="control">
-          <Icon hoverable name="More" />
-        </span>
-        <MenuItem
-          on:click={() => plugins.deletePlugin(plugin._id, plugin._rev)}
-          icon="Delete">Delete</MenuItem
-        >
-        <MenuItem on:click={() => editGroup(plugin)} icon="Edit">Edit</MenuItem>
-      </ActionMenu>
-    </div>
+    <Icon on:click={detailsModal.show()} hoverable name="ChevronRight" />
   </div>
 </div>
 
+<Modal bind:this={detailsModal}>
+  <ModalContent
+    title="Plugin details"
+    showConfirmButton={false}
+    showCancelButton={false}
+  >
+    <div class="form-row">
+      <Label size="M">Type</Label>
+      <Input
+        disabled
+        value={plugin.schema.type.charAt(0).toUpperCase() +
+          plugin.schema.type.slice(1)}
+      />
+    </div>
+    <div class="form-row">
+      <Label size="M">Source</Label>
+      <Input disabled value={plugin.source} />
+    </div>
+    <div class="form-row">
+      <Label size="M">Version</Label>
+      <Input disabled value={plugin.version} />
+    </div>
+    <div class="form-row">
+      <Label size="M">License</Label>
+      <Input disabled value={plugin.package.license} />
+    </div>
+    <div class="form-row">
+      <Label size="M">Author</Label>
+      <Input disabled value={plugin.package.author || "N/A"} />
+    </div>
+
+    <div class="footer" slot="footer">
+      <Button
+        newStyles
+        on:click={() => plugins.deletePlugin(plugin._id, plugin._rev)}
+        warning>Delete</Button
+      >
+
+      <Button
+        newStyles
+        on:click={() => plugins.deletePlugin(plugin._id, plugin._rev)}
+        >Update</Button
+      >
+
+      <Button cta newStyles on:click={detailsModal.hide()}>Done</Button>
+    </div>
+  </ModalContent>
+</Modal>
+
 <style>
   .row {
     display: grid;
-    grid-template-columns: 0.3fr auto auto auto auto;
+    grid-template-columns: 0.3fr auto auto auto;
     align-items: center;
     background: var(--background);
     height: 50px;
@@ -70,6 +110,13 @@
     display: flex;
   }
 
+  .form-row {
+    display: grid;
+    grid-template-columns: 60px 1fr;
+    grid-gap: var(--spacing-l) var(--spacing-l);
+    align-items: center;
+  }
+
   .opacity {
     opacity: 50%;
   }
@@ -78,4 +125,9 @@
       display: none !important;
     }
   }
+
+  .footer {
+    display: flex;
+    gap: var(--spacing-l);
+  }
 </style>