remove unused components in builder settings
This commit is contained in:
Keviin Åberg Kultalahti
parent
3c4a0f38f4
commit
76954b948d
|
|
@ -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 hideLogo
|
||||
export let type = "Horizontal"
|
||||
</script>
|
||||
|
||||
<div class="nav" use:styleable={$component.styles}>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue