remove unused components in builder settings

packages/builder/src/components/settings/Integration.svelte

@@ -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>

packages/builder/src/components/settings/Link.svelte

@@ -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>

packages/builder/src/components/settings/SettingsModal.svelte

@@ -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>

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -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>

packages/builder/src/components/settings/tabs/DangerZone.svelte

@@ -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>

packages/builder/src/components/settings/tabs/General.svelte

@@ -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>

packages/builder/src/components/settings/tabs/Integrations.svelte

@@ -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>

packages/builder/src/components/settings/tabs/Permissions.svelte

@@ -1 +0,0 @@
-Permissions

packages/builder/src/components/settings/tabs/index.js

@@ -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"

packages/standard-components/src/Navigation.svelte

@@ -9,6 +9,7 @@
 
   export let logoUrl
   export let hideLogo
+  export let type = "Horizontal"
 </script>
 
 <div class="nav" use:styleable={$component.styles}>