remove unused components in builder settings
This commit is contained in:
Keviin Åberg Kultalahti
parent
1ebaac26ba
commit
49510dff1f
|
|
@ -1,54 +0,0 @@
|
||||||
<script>
|
|
||||||
import { Button } from "@budibase/bbui"
|
|
||||||
export let remove = false
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="content">
|
|
||||||
<div class="img"><img src="https://picsum.photos/60/60" alt="zoom" /></div>
|
|
||||||
<div class="body">
|
|
||||||
<div class="title">Zoom</div>
|
|
||||||
<div class="description">
|
|
||||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
<Button wide error={remove} secondary={!remove} on:click>
|
|
||||||
<span>{remove ? "Remove" : "Add"}</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
padding: 12px;
|
|
||||||
background: var(--light-grey);
|
|
||||||
grid-gap: 20px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: 12px;
|
|
||||||
grid-template-columns: 60px auto;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.description {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.img {
|
|
||||||
border-radius: 3px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
height: 60px;
|
|
||||||
width: 60px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
<script>
|
|
||||||
import SettingsModal from "./SettingsModal.svelte"
|
|
||||||
import { Modal, Icon } from "@budibase/bbui"
|
|
||||||
|
|
||||||
let modal
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="topnavitemright settings"
|
|
||||||
data-cy="settings-icon"
|
|
||||||
on:click={modal.show}
|
|
||||||
>
|
|
||||||
<Icon hoverable name="Settings" />
|
|
||||||
</div>
|
|
||||||
<Modal bind:this={modal} width="600px">
|
|
||||||
<SettingsModal />
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
i {
|
|
||||||
font-size: 18px;
|
|
||||||
color: var(--grey-7);
|
|
||||||
}
|
|
||||||
.topnavitemright {
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--grey-7);
|
|
||||||
margin: 0 12px 0 0;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 24px;
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
.topnavitemright:hover i {
|
|
||||||
color: var(--ink);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
<script>
|
|
||||||
import { General, DangerZone } from "./tabs"
|
|
||||||
import { ModalContent, Tab, Tabs } from "@budibase/bbui"
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<ModalContent
|
|
||||||
title="Settings"
|
|
||||||
showConfirmButton={false}
|
|
||||||
showCancelButton={false}
|
|
||||||
>
|
|
||||||
<div class="container">
|
|
||||||
<Tabs selected="General">
|
|
||||||
<Tab title="General">
|
|
||||||
<General />
|
|
||||||
</Tab>
|
|
||||||
<!-- <Tab title="API Keys">
|
|
||||||
<APIKeys />
|
|
||||||
</Tab> -->
|
|
||||||
<Tab title="Danger Zone">
|
|
||||||
<DangerZone />
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
</ModalContent>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container :global(section > header) {
|
|
||||||
/* Fix margin defined in BBUI as L rather than XL */
|
|
||||||
margin-bottom: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
.container :global(textarea) {
|
|
||||||
min-height: 60px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
<script>
|
|
||||||
import { Input, Label, Link } from "@budibase/bbui"
|
|
||||||
import api from "builderStore/api"
|
|
||||||
import { notifications } from "@budibase/bbui"
|
|
||||||
import { database } from "stores/backend"
|
|
||||||
import analytics from "analytics"
|
|
||||||
|
|
||||||
let keys = { budibase: "" }
|
|
||||||
|
|
||||||
async function updateKey([key, value]) {
|
|
||||||
if (key === "budibase") {
|
|
||||||
const isValid = await analytics.identifyByApiKey(value)
|
|
||||||
if (!isValid) {
|
|
||||||
notifications.error("Your API Key is invalid.")
|
|
||||||
keys = { ...keys }
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const response = await api.put(`/api/keys/${key}`, { value })
|
|
||||||
const res = await response.json()
|
|
||||||
keys = { ...keys, ...res }
|
|
||||||
notifications.success("API Key saved.")
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get Keys
|
|
||||||
async function fetchKeys() {
|
|
||||||
const response = await api.get(`/api/keys/`)
|
|
||||||
const res = await response.json()
|
|
||||||
// dont want this to ever be editable, as its fetched based on Api Key
|
|
||||||
if (res.userId) delete res.userId
|
|
||||||
keys = res
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchKeys()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<Input
|
|
||||||
on:change={e => updateKey(["budibase", e.detail])}
|
|
||||||
value={keys.budibase}
|
|
||||||
label="Budibase Cloud API Key"
|
|
||||||
/>
|
|
||||||
<Link primary href="https://portal.budi.live">
|
|
||||||
Log in to the Budibase Hosting Portal to get your API Key. →
|
|
||||||
</Link>
|
|
||||||
<div>
|
|
||||||
<Label extraSmall grey>Instance ID (Webhooks)</Label>
|
|
||||||
<span>{$database._id}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<script>
|
|
||||||
import { params, goto } from "@roxi/routify"
|
|
||||||
import { Input, Button, Body } from "@budibase/bbui"
|
|
||||||
import { del } from "builderStore/api"
|
|
||||||
|
|
||||||
let value = ""
|
|
||||||
let loading = false
|
|
||||||
|
|
||||||
async function deleteApp() {
|
|
||||||
loading = true
|
|
||||||
const id = $params.application
|
|
||||||
await del(`/api/applications/${id}`)
|
|
||||||
loading = false
|
|
||||||
$goto("/builder")
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="background">
|
|
||||||
<Body>
|
|
||||||
Type
|
|
||||||
<b>DELETE</b>
|
|
||||||
into the textbox, then click the following button to delete your entire web app.
|
|
||||||
</Body>
|
|
||||||
<Input
|
|
||||||
on:change={e => (value = e.detail)}
|
|
||||||
disabled={loading}
|
|
||||||
placeholder=""
|
|
||||||
/>
|
|
||||||
<div class="buttons">
|
|
||||||
<Button
|
|
||||||
warning
|
|
||||||
disabled={value !== "DELETE" || loading}
|
|
||||||
on:click={deleteApp}
|
|
||||||
>
|
|
||||||
Delete Entire App
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.background {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
.background :global(p) {
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
<script>
|
|
||||||
import { Input, TextArea } from "@budibase/bbui"
|
|
||||||
import { store, hostingStore } from "builderStore"
|
|
||||||
import api from "builderStore/api"
|
|
||||||
import { object, string } from "yup"
|
|
||||||
import { onMount } from "svelte"
|
|
||||||
import { get } from "svelte/store"
|
|
||||||
|
|
||||||
let nameValidation, nameError
|
|
||||||
let urlValidation, urlError
|
|
||||||
|
|
||||||
$: checkName($store.name)
|
|
||||||
$: checkUrl($store.url)
|
|
||||||
|
|
||||||
async function updateApplication(data) {
|
|
||||||
const response = await api.put(`/api/applications/${$store.appId}`, data)
|
|
||||||
await response.json()
|
|
||||||
store.update(state => {
|
|
||||||
state = {
|
|
||||||
...state,
|
|
||||||
...data,
|
|
||||||
}
|
|
||||||
return state
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function checkValidation(input, validation) {
|
|
||||||
if (!input || !validation) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
await object(validation).validate(input, { abortEarly: false })
|
|
||||||
} catch (error) {
|
|
||||||
if (!error || !error.inner) return ""
|
|
||||||
return error.inner.reduce((acc, err) => {
|
|
||||||
return acc + err.message
|
|
||||||
}, "")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function checkName(name) {
|
|
||||||
nameError = await checkValidation({ name }, nameValidation)
|
|
||||||
}
|
|
||||||
|
|
||||||
async function checkUrl(url) {
|
|
||||||
urlError = await checkValidation({ url: url.toLowerCase() }, urlValidation)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
const nameError = "Your application must have a name.",
|
|
||||||
urlError = "Your application must have a URL."
|
|
||||||
await hostingStore.actions.fetchDeployedApps()
|
|
||||||
const existingAppNames = get(hostingStore).deployedAppNames
|
|
||||||
const existingAppUrls = get(hostingStore).deployedAppUrls
|
|
||||||
const nameIdx = existingAppNames.indexOf(get(store).name)
|
|
||||||
const urlIdx = existingAppUrls.indexOf(get(store).url)
|
|
||||||
if (nameIdx !== -1) {
|
|
||||||
existingAppNames.splice(nameIdx, 1)
|
|
||||||
}
|
|
||||||
if (urlIdx !== -1) {
|
|
||||||
existingAppUrls.splice(urlIdx, 1)
|
|
||||||
}
|
|
||||||
nameValidation = {
|
|
||||||
name: string().required(nameError).notOneOf(existingAppNames),
|
|
||||||
}
|
|
||||||
urlValidation = {
|
|
||||||
url: string().required(urlError).notOneOf(existingAppUrls),
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<Input
|
|
||||||
on:change={e => updateApplication({ name: e.detail })}
|
|
||||||
value={$store.name}
|
|
||||||
error={nameError}
|
|
||||||
label="App Name"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
on:change={e => updateApplication({ url: e.detail })}
|
|
||||||
value={$store.url}
|
|
||||||
error={urlError}
|
|
||||||
label="App URL"
|
|
||||||
/>
|
|
||||||
<TextArea
|
|
||||||
on:change={e => updateApplication({ description: e.detail })}
|
|
||||||
value={$store.description}
|
|
||||||
label="App Description"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<script>
|
|
||||||
import Integration from "../Integration.svelte"
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="title">Your Integrations</div>
|
|
||||||
<div class="integrations">
|
|
||||||
<Integration remove />
|
|
||||||
<Integration remove />
|
|
||||||
<Integration remove />
|
|
||||||
<Integration remove />
|
|
||||||
</div>
|
|
||||||
<div class="apps">Recommended apps</div>
|
|
||||||
<div class="integrations">
|
|
||||||
<Integration />
|
|
||||||
<Integration />
|
|
||||||
<Integration />
|
|
||||||
<Integration />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
grid-gap: 16px;
|
|
||||||
}
|
|
||||||
.integrations {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-gap: 20px;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.apps {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.background {
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: var(--light-grey);
|
|
||||||
padding: 12px 12px 18px 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Permissions
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export { default as General } from "./General.svelte"
|
|
||||||
export { default as Integrations } from "./Integrations.svelte"
|
|
||||||
export { default as Permissions } from "./Permissions.svelte"
|
|
||||||
export { default as APIKeys } from "./APIKeys.svelte"
|
|
||||||
export { default as DangerZone } from "./DangerZone.svelte"
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -9,6 +9,7 @@
|
||||||
|
|
||||||
export let logoUrl
|
export let logoUrl
|
||||||
export let hideLogo
|
export let hideLogo
|
||||||
|
export let type = "Horizontal"
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="nav" use:styleable={$component.styles}>
|
<div class="nav" use:styleable={$component.styles}>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue