diff --git a/packages/bbui/src/Label/Label.svelte b/packages/bbui/src/Label/Label.svelte
index 3395ab4179..6b3392ce2d 100644
--- a/packages/bbui/src/Label/Label.svelte
+++ b/packages/bbui/src/Label/Label.svelte
@@ -4,10 +4,15 @@
export let size = "M"
export let tooltip = ""
+ export let muted
-
@@ -17,4 +22,8 @@
padding: 0;
white-space: nowrap;
}
+
+ .muted {
+ opacity: 0.5;
+ }
diff --git a/packages/builder/src/constants/index.js b/packages/builder/src/constants/index.js
index 4e2ca37b9c..151a0cdf8d 100644
--- a/packages/builder/src/constants/index.js
+++ b/packages/builder/src/constants/index.js
@@ -57,3 +57,10 @@ export const DefaultAppTheme = {
navBackground: "var(--spectrum-global-color-gray-50)",
navTextColor: "var(--spectrum-global-color-gray-800)",
}
+
+export const PluginSource = {
+ URL: "URL",
+ NPM: "NPM",
+ GITHUB: "Github",
+ FILE: "File Upload",
+}
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 6c9dd509fa..7df0ca2a8d 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
@@ -5,40 +5,56 @@
Input,
Select,
Dropzone,
+ Body,
notifications,
} from "@budibase/bbui"
+ import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import { plugins } from "stores/portal"
+ import { PluginSource } from "constants"
- const Sources = {
- NPM: "NPM",
- GITHUB: "Github",
- URL: "URL",
- FILE: "File Upload",
+ function opt(name, optional) {
+ if (optional) {
+ return { name, optional }
+ }
+ return { name }
}
let authOptions = {
- [Sources.NPM]: ["URL"],
- [Sources.GITHUB]: ["Github Token", "URL"],
- [Sources.URL]: ["Headers", "URL"],
- [Sources.FILE]: ["File Upload"],
+ [PluginSource.URL]: [opt("URL"), opt("Headers", true)],
+ [PluginSource.NPM]: [opt("URL")],
+ [PluginSource.GITHUB]: [opt("URL"), opt("Github Token", true)],
+ [PluginSource.FILE]: [opt("File Upload")],
}
let file
- let source = Sources.URL
+ let source = PluginSource.URL
let dynamicValues = {}
let validation
$: validation = source === "File Upload" ? file : dynamicValues["URL"]
+ function infoMessage(optionName) {
+ switch (optionName) {
+ case PluginSource.URL:
+ return "Please specify a URL which directs to a built plugin TAR archive, you can provide headers if authentication is required."
+ case PluginSource.NPM:
+ return "Please specify the URL to a public NPM package which contains the built version of the plugin you wish to install."
+ case PluginSource.GITHUB:
+ return "Please specify the URL to a Github repository which contains built plugin releases. If this is a private repo you can provide a token to access it."
+ case PluginSource.FILE:
+ return "Please provide a built plugin TAR archive, you can build a plugin locally using the Budibase CLI."
+ }
+ }
+
async function save() {
try {
- if (source === Sources.FILE) {
+ if (source === PluginSource.FILE) {
await plugins.uploadPlugin(file)
} else {
const url = dynamicValues["URL"]
let auth =
- source === Sources.GITHUB
+ source === PluginSource.GITHUB
? dynamicValues["Github Token"]
- : source === Sources.URL
+ : source === PluginSource.URL
? dynamicValues["Headers"]
: undefined
await plugins.createPlugin(source, url, auth)
@@ -63,14 +79,14 @@
-
+
{infoMessage(source)}
{#each authOptions[source] as option}
- {#if option === "File Upload"}
+ {#if option.name === PluginSource.FILE}