Sets up tabbed modal for settings

packages/builder/package.json

@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.1.1",
+    "@budibase/bbui": "^1.5.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",

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

@@ -0,0 +1,48 @@
+<script>
+  import Modal from "./Modal.svelte"
+  import { SettingsIcon } from "components/common/Icons/"
+  import { getContext } from "svelte"
+  import { isActive, goto, layout } from "@sveltech/routify"
+
+  // Handle create app modal
+  const { open } = getContext("simple-modal")
+
+  const showSettingsModal = () => {
+    open(
+      Modal,
+      {
+        name: "Placeholder App Name",
+        description: "This is a hardcoded description that needs to change",
+      },
+      {
+        closeButton: false,
+        closeOnEsc: true,
+        styleContent: { padding: 0 },
+        closeOnOuterClick: true,
+      }
+    )
+  }
+</script>
+
+<span class="topnavitemright" on:click={showSettingsModal}>
+  <SettingsIcon />
+</span>
+
+<style>
+  span:first-letter {
+    text-transform: capitalize;
+  }
+  .topnavitemright {
+    cursor: pointer;
+    color: var(--ink-light);
+    margin: 0px 20px 0px 0px;
+    padding-top: 4px;
+    font-weight: 500;
+    font-size: 1rem;
+    height: 100%;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    box-sizing: border-box;
+  }
+</style>

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

@@ -0,0 +1,102 @@
+<script>
+  import { General, Permissions, Users, Integrations, DangerZone } from "./tabs"
+
+  import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
+  import { SettingsIcon, CloseIcon } from "components/common/Icons/"
+  import { getContext } from "svelte"
+  import { post } from "builderStore/api"
+
+  const { open, close } = getContext("simple-modal")
+  export let name = ""
+  export let description = ""
+  const tabs = [
+    {
+      title: "General",
+      key: "GENERAL",
+      component: General,
+    },
+    {
+      title: "Permissions",
+      key: "PERMISSIONS",
+      component: Permissions,
+    },
+    {
+      title: "Users",
+      key: "USERS",
+      component: Users,
+    },
+    {
+      title: "Integrations",
+      key: "INTEGRATIONS",
+      component: Integrations,
+    },
+    {
+      title: "Danger Zone",
+      key: "DANGERZONE",
+      component: DangerZone,
+    },
+  ]
+  let value = "GENERAL"
+  $: selectedTab = tabs.find(tab => tab.key === value).component
+</script>
+
+<div class="container">
+  <div class="body">
+    <div class="heading">
+      <span class="icon">
+        <SettingsIcon />
+      </span>
+      <h3>Settings</h3>
+    </div>
+    <Switcher headings={tabs} bind:value>
+      <svelte:component this={selectedTab} />
+    </Switcher>
+  </div>
+  <div class="close-button" on:click={close}>
+    <CloseIcon />
+  </div>
+</div>
+
+<style>
+  .container {
+    position: relative;
+  }
+
+  .close-button {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+  .close-button :global(svg) {
+    width: 24px;
+    height: 24px;
+  }
+  .heading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  h3 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .icon {
+    display: grid;
+    border-radius: 3px;
+    align-content: center;
+    justify-content: center;
+    margin-right: 12px;
+    height: 20px;
+    width: 20px;
+    padding: 10px;
+    background-color: var(--blue-light);
+  }
+  .body {
+    padding: 40px 40px 80px 40px;
+    display: grid;
+    grid-gap: 20px;
+  }
+</style>

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

@@ -0,0 +1 @@
+Danger

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

@@ -0,0 +1 @@
+General

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

@@ -0,0 +1 @@
+Integrations

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

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

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

@@ -0,0 +1 @@
+Users

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

@@ -0,0 +1,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 DangerZone } from './DangerZone.svelte';

packages/builder/src/pages/[application]/_reset.svelte

@@ -1,6 +1,7 @@
 <script>
   import Modal from "svelte-simple-modal"
   import { store } from "builderStore"
+  import { getContext } from "svelte"
   import { get } from "builderStore/api"
 
   import { fade } from "svelte/transition"
@@ -8,6 +9,7 @@
 
   import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
   import IconButton from "components/common/IconButton.svelte"
+  import SettingsLink from "components/settings/Link.svelte"
 
   // Get Package and set store
   export let application
@@ -29,7 +31,6 @@
 
 <Modal>
   <div class="root">
-
     <div class="top-nav">
       <div class="topleftnav">
         <button class="home-logo">
@@ -53,12 +54,7 @@
                       hoverColor="var(--secondary75)"/> -->
       </div>
       <div class="toprightnav">
-        <span
-          class:active={$isActive(`/settings`)}
-          class="topnavitemright"
-          on:click={() => $goto(`/settings`)}>
-          <SettingsIcon />
-        </span>
+        <SettingsLink />
         <span
           class:active={false}
           class="topnavitemright"