adds tab to settings modal on front-end to display API Keys

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

@@ -1,5 +1,5 @@
 <script>
-  import { General, Users, DangerZone } from "./tabs"
+  import { General, Users, DangerZone, APIKeys } from "./tabs"
 
   import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
   import { SettingsIcon, CloseIcon } from "components/common/Icons/"
@@ -20,6 +20,11 @@
       key: "USERS",
       component: Users,
     },
+    {
+      title: "API Keys",
+      key: "API_KEYS",
+      component: APIKeys,
+    },
     {
       title: "Danger Zone",
       key: "DANGERZONE",

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

@@ -0,0 +1,55 @@
+<script>
+  import { Input, Button } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import api from "builderStore/api"
+  import Title from "../TabTitle.svelte"
+
+  let keys = { budibase: "", sendGrid: "" }
+
+  async function updateKey(e) {
+    console.log("Event Key: ", e.detail)
+    // Send to endpoint when it exists
+    // const response = await api.put(`/api/${$store.appId}`, data)
+    // const res = await response.json()
+  }
+
+  // Get Keys
+  async function fetchKeys() {
+    // fetch keys from endpoint
+    // return keys
+  }
+
+  let fetchKeysPromise = fetchKeys()
+</script>
+
+<Title>API Keys</Title>
+<div class="container">
+  <div class="background">
+    <Input
+      on:save={updateKey}
+      thin
+      edit
+      value={keys.budibase}
+      label="Budibase" />
+  </div>
+  <div class="background">
+    <Input
+      on:save={updateKey}
+      thin
+      edit
+      value={keys.sendgrid}
+      label="Sendgrid" />
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: var(--space);
+  }
+  .background {
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+</style>

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

@@ -2,4 +2,5 @@ export { default as General } from "./General.svelte"
 export { default as Integrations } from "./Integrations.svelte"
 export { default as Permissions } from "./Permissions.svelte"
 export { default as Users } from "./Users.svelte"
+export { default as APIKeys } from "./Api.svelte"
 export { default as DangerZone } from "./DangerZone.svelte"