2022-08-30 21:49:19 +12:00
< script >
2022-09-13 04:43:13 +12:00
import {
ModalContent,
Label,
Input,
Select,
Dropzone,
2022-09-13 06:12:05 +12:00
Body,
2022-09-13 04:43:13 +12:00
notifications,
} from "@budibase/bbui"
2022-09-13 06:12:05 +12:00
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
2022-08-30 21:49:19 +12:00
import { plugins } from "stores/portal"
2022-09-13 06:12:05 +12:00
import { PluginSource } from "constants"
2022-08-30 21:49:19 +12:00
2022-09-13 06:12:05 +12:00
function opt(name, optional) {
if (optional) {
return { name , optional }
}
return { name }
2022-09-13 04:04:27 +12:00
}
2022-08-30 21:49:19 +12:00
let authOptions = {
2022-09-13 06:12:05 +12:00
[PluginSource.URL]: [opt("URL"), opt("Headers", true)],
[PluginSource.NPM]: [opt("URL")],
[PluginSource.GITHUB]: [opt("URL"), opt("Github Token", true)],
[PluginSource.FILE]: [opt("File Upload")],
2022-08-30 21:49:19 +12:00
}
let file
2022-09-13 06:12:05 +12:00
let source = PluginSource.URL
2022-08-31 08:37:08 +12:00
let dynamicValues = {}
2022-08-30 21:49:19 +12:00
2022-09-08 03:08:29 +12:00
let validation
2022-09-13 04:04:27 +12:00
$: validation = source === "File Upload" ? file : dynamicValues["URL"]
2022-08-30 21:49:19 +12:00
2022-09-13 06:12:05 +12:00
function infoMessage(optionName) {
switch (optionName) {
case PluginSource.URL:
2022-09-13 06:47:27 +12:00
return "Please specify a URL which directs to a built plugin TAR archive. You can provide headers if authentication is required."
2022-09-13 06:12:05 +12:00
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:
2022-09-13 06:47:27 +12:00
return "Please provide a built plugin TAR archive. You can build a plugin locally using the Budibase CLI."
2022-09-13 06:12:05 +12:00
}
}
2022-08-30 21:49:19 +12:00
async function save() {
2022-09-13 04:43:13 +12:00
try {
2022-09-13 06:12:05 +12:00
if (source === PluginSource.FILE) {
2022-09-13 04:43:13 +12:00
await plugins.uploadPlugin(file)
} else {
const url = dynamicValues["URL"]
let auth =
2022-09-13 06:12:05 +12:00
source === PluginSource.GITHUB
2022-09-13 04:43:13 +12:00
? dynamicValues["Github Token"]
2022-09-13 06:12:05 +12:00
: source === PluginSource.URL
2022-09-13 04:43:13 +12:00
? dynamicValues["Headers"]
: undefined
await plugins.createPlugin(source, url, auth)
}
notifications.success("Plugin added successfully.")
} catch (err) {
const msg = err?.message ? err.message : JSON.stringify(err)
notifications.error(`Failed to add plugin: ${ msg } `)
2022-08-30 21:49:19 +12:00
}
}
< / script >
< ModalContent
2022-09-08 03:08:29 +12:00
confirmText={ "Save" }
onConfirm={ save }
disabled={ ! validation }
2022-08-30 21:49:19 +12:00
size="M"
title="Add new plugin"
>
< div class = "form-row" >
< Label size = "M" > Source< / Label >
< Select
placeholder={ null }
2022-09-13 04:04:27 +12:00
bind:value={ source }
2022-09-13 06:12:05 +12:00
options={ Object . values ( PluginSource )}
2022-08-30 21:49:19 +12:00
/>
< / div >
2022-09-13 06:12:05 +12:00
< Body size = "S" > { infoMessage ( source )} </ Body >
2022-09-13 04:04:27 +12:00
{ #each authOptions [ source ] as option }
2022-09-13 06:12:05 +12:00
{ #if option . name === PluginSource . FILE }
2022-08-30 21:49:19 +12:00
< div class = "form-row" >
2022-09-13 06:12:05 +12:00
< Label size = "M" > { option . name } </ Label >
2022-08-30 21:49:19 +12:00
< Dropzone
2022-09-05 22:27:43 +12:00
gallery={ false }
2022-08-30 21:49:19 +12:00
value={[ file ]}
on:change={ e => {
if (!e.detail || e.detail.length === 0) {
file = null
} else {
file = e.detail[0]
}
}}
/>
< / div >
{ : else }
< div class = "form-row" >
2022-09-13 06:12:05 +12:00
< div >
< Label size = "M" > { option . name } </ Label >
{ #if option . optional }
< Label size = "S" muted > < i > Optional< / i > < / Label >
{ /if }
< / div >
{ #if option . name === "Headers" }
< KeyValueBuilder bind:object = { dynamicValues [ option . name ]} / >
{ : else }
< Input bind:value = { dynamicValues [ option . name ]} / >
{ /if }
2022-08-30 21:49:19 +12:00
< / div >
{ /if }
{ /each }
< / ModalContent >
< style >
.form-row {
display: grid;
grid-template-columns: 60px 1fr;
grid-gap: var(--spacing-l);
align-items: center;
}
< / style >