Merge remote-tracking branch 'origin/cheeks-lab-day-portal-redesign' into feature/user-onboarding-overlays

packages/bbui/src/Button/Button.svelte

@@ -14,7 +14,7 @@
   export let active = false
   export let tooltip = undefined
   export let dataCy
-  export let newStyles = false
+  export let newStyles = true
 
   let showTooltip = false
 </script>
@@ -28,6 +28,7 @@
   class:spectrum-Button--quiet={quiet}
   class:new-styles={newStyles}
   class:active
+  class:disabled
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
   data-cy={dataCy}
@@ -108,7 +109,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:hover {
+  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
+  .spectrum-Button--secondary.new-styles.disabled {
+    color: var(--spectrum-global-color-gray-500);
+  }
 </style>

packages/bbui/src/Drawer/DrawerContent.svelte

@@ -34,7 +34,6 @@
     display: none;
   }
   .main {
-    font-family: var(--font-sans);
     padding: var(--spacing-xl);
   }
   .main :global(textarea) {

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -264,7 +264,7 @@
     max-height: 100%;
   }
   :global(.flatpickr-calendar) {
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: var(--font-sans);
   }
   .is-disabled {
     pointer-events: none !important;

packages/bbui/src/Form/Core/Picker.svelte

@@ -88,8 +88,8 @@
     on:click={onClick}
   >
     {#if fieldIcon}
-      <span class="option-extra">
+      <span class="option-extra icon">
-        <Icon name={fieldIcon} />
+        <Icon size="S" name={fieldIcon} />
       </span>
     {/if}
     {#if fieldColour}
@@ -168,8 +168,8 @@
               class:is-disabled={!isOptionEnabled(option)}
             >
               {#if getOptionIcon(option, idx)}
-                <span class="option-extra">
+                <span class="option-extra icon">
-                  <Icon name={getOptionIcon(option, idx)} />
+                  <Icon size="S" name={getOptionIcon(option, idx)} />
                 </span>
               {/if}
               {#if getOptionColour(option, idx)}
@@ -241,6 +241,9 @@
   .option-extra {
     padding-right: 8px;
   }
+  .option-extra.icon {
+    margin: 0 -1px;
+  }
 
   .spectrum-Popover :global(.spectrum-Search) {
     margin-top: -1px;

packages/bbui/src/Icon/IconAvatar.svelte

@@ -19,6 +19,7 @@
   .icon {
     width: 28px;
     height: 28px;
+    flex: 0 0 28px;
     display: grid;
     place-items: center;
     border-radius: 50%;
@@ -34,6 +35,7 @@
   .icon.size--S {
     width: 22px;
     height: 22px;
+    flex: 0 0 22px;
   }
   .icon.size--S :global(.spectrum-Icon) {
     width: 16px;
@@ -46,6 +48,7 @@
   .icon.size--L {
     width: 40px;
     height: 40px;
+    flex: 0 0 40px;
   }
   .icon.size--L :global(.spectrum-Icon) {
     width: 28px;

packages/bbui/src/InlineAlert/InlineAlert.svelte

@@ -56,5 +56,6 @@
     --spectrum-semantic-positive-icon-color: #2d9d78;
     --spectrum-semantic-negative-icon-color: #e34850;
     min-width: 100px;
+    margin: 0;
   }
 </style>

packages/bbui/src/Label/Label.svelte

@@ -21,6 +21,7 @@
   label {
     padding: 0;
     white-space: nowrap;
+    color: var(--spectrum-global-color-gray-600);
   }
 
   .muted {

packages/bbui/src/Layout/Page.svelte

@@ -1,32 +1,84 @@
 <script>
+  import { setContext } from "svelte"
+  import clickOutside from "../Actions/click_outside"
+
   export let wide = false
-  export let maxWidth = "80ch"
+  export let narrow = false
   export let noPadding = false
+
+  let sidePanelVisble = false
+
+  setContext("side-panel", {
+    open: () => (sidePanelVisble = true),
+    close: () => (sidePanelVisble = false),
+  })
 </script>
 
-<div style="--max-width: {maxWidth}" class:wide class:noPadding>
+<div class="page">
-  <slot />
+  <div class="main">
+    <div class="content" class:wide class:noPadding class:narrow>
+      <slot />
+    </div>
+  </div>
+  <div
+    id="side-panel"
+    class:visible={sidePanelVisble}
+    use:clickOutside={() => {
+      sidePanelVisble = false
+    }}
+  >
+    <slot name="side-panel" />
+  </div>
 </div>
 
 <style>
-  div {
+  .page {
+    position: relative;
+  }
+  .page,
+  .main {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+  }
+  .main {
+    overflow: auto;
+  }
+  .content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    max-width: var(--max-width);
+    max-width: 1080px;
     margin: 0 auto;
-    padding: calc(var(--spacing-xl) * 2);
+    flex: 1 1 auto;
-    min-height: calc(100% - var(--spacing-xl) * 4);
+    padding: 50px;
+    z-index: 1;
   }
-
   .wide {
     max-width: none;
-    margin: 0;
   }
-
+  .narrow {
-  .noPadding {
+    max-width: 840px;
-    padding: 0px;
+  }
-    margin: 0px;
+  #side-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 24px;
+    background: var(--background);
+    border-left: var(--border-light);
+    width: 320px;
+    overflow: auto;
+    overflow-x: hidden;
+    transform: translateX(100%);
+    transition: transform 130ms ease-out;
+    height: calc(100% - 48px);
+    z-index: 2;
+  }
+  #side-panel.visible {
+    transform: translateX(0);
   }
 </style>

packages/bbui/src/List/ListItem.svelte

@@ -30,9 +30,11 @@
       <Label>{subtitle}</Label>
     {/if}
   </div>
-  <div class="right">
+  {#if $$slots.default}
-    <slot />
+    <div class="right">
-  </div>
+      <slot />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -45,6 +47,7 @@
     justify-content: space-between;
     border: 1px solid var(--spectrum-global-color-gray-300);
     transition: background 130ms ease-out;
+    gap: var(--spacing-m);
   }
   .list-item:not(:first-child) {
     border-top: none;

packages/bbui/src/Modal/CustomContent.svelte

@@ -26,7 +26,6 @@
     padding: 40px;
     background-color: var(--purple);
     color: white;
-    font-family: var(--font-sans);
     font-weight: bold;
     text-align: center;
     user-select: none;

packages/bbui/src/Modal/Modal.svench

@@ -19,7 +19,6 @@
 
 <style>
   p, span {
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
 

packages/bbui/src/Modal/ModalContent.svelte

@@ -104,7 +104,7 @@
         {/if}
 
         {#if showCancelButton}
-          <Button group secondary newStyles on:click={close}>
+          <Button group secondary on:click={close}>
             {cancelText}
           </Button>
         {/if}
@@ -151,7 +151,8 @@
     overflow: visible;
   }
   .spectrum-Dialog-heading {
-    font-family: var(--font-sans);
+    font-family: var(--font-accent);
+    font-weight: 600;
   }
   .spectrum-Dialog-heading.noDivider {
     margin-bottom: 12px;

packages/bbui/src/Modal/QuizModal.svelte

@@ -42,7 +42,6 @@
 <style>
   p {
     margin: 0;
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
   p.error {

packages/bbui/src/Popover/Popover.svench

@@ -29,7 +29,6 @@
     font-size: var(--font-size-m);
     margin: 0 0 var(--spacing-l) 0;
     font-weight: 600;
-    font-family: var(--font-sans);
   }
 
   .input-group-column {

packages/bbui/src/Table/StringRenderer.svelte

@@ -1,8 +1,11 @@
 <script>
   export let value
+  export let schema
 </script>
 
-<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
+<div class:capitalise={schema?.capitalise}>
+  {typeof value === "object" ? JSON.stringify(value) : value}
+</div>
 
 <style>
   div {
@@ -10,5 +13,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: var(--max-cell-width);
+    width: 0;
+    flex: 1 1 auto;
+  }
+  div.capitalise {
+    text-transform: capitalize;
   }
 </style>

packages/bbui/src/Table/Table.svelte

@@ -21,6 +21,8 @@
    * template: a HBS or JS binding to use as the value
    * background: the background color
    * color: the text color
+   * borderLeft: show a left border
+   * borderRight: show a right border
    */
   export let data = []
   export let schema = {}
@@ -270,6 +272,14 @@
       if (schema[field].align === "Right") {
         styles[field] += "justify-content: flex-end; text-align: right;"
       }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-left: 1px solid var(--spectrum-global-color-gray-200);"
+      }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-right: 1px solid var(--spectrum-global-color-gray-200);"
+      }
     })
     return styles
   }
@@ -290,7 +300,11 @@
         </slot>
       </div>
     {:else}
-      <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
+      <div
+        class="spectrum-Table"
+        class:no-scroll={!rowCount}
+        style={`${heightStyle}${gridStyle}`}
+      >
         {#if fields.length}
           <div class="spectrum-Table-head">
             {#if showEditColumn}
@@ -433,7 +447,6 @@
   /* Wrapper */
   .wrapper {
     position: relative;
-    z-index: 0;
     --table-bg: var(--spectrum-global-color-gray-50);
     --table-border: 1px solid var(--spectrum-alias-border-color-mid);
     --cell-padding: var(--spectrum-global-dimension-size-250);
@@ -460,6 +473,9 @@
     display: grid;
     overflow: auto;
   }
+  .spectrum-Table.no-scroll {
+    overflow: visible;
+  }
 
   /* Header */
   .spectrum-Table-head {
@@ -548,10 +564,7 @@
     display: contents;
   }
   .spectrum-Table-row:hover .spectrum-Table-cell {
-    /*background-color: var(--hover-bg) !important;*/
+    background-color: var(--spectrum-global-color-gray-100);
-  }
-  .spectrum-Table-row:hover .spectrum-Table-cell:after {
-    background-color: var(--spectrum-alias-highlight-hover);
   }
   .wrapper--quiet .spectrum-Table-row {
     border-left: none;
@@ -584,24 +597,13 @@
     border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
     background-color: var(--table-bg);
     z-index: auto;
+    transition: background-color 130ms ease-out;
   }
   .spectrum-Table-cell--edit {
     position: sticky;
     left: 0;
     z-index: 2;
   }
-  .spectrum-Table-cell:after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    transition: background-color
-      var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
-  }
 
   /* Placeholder  */
   .placeholder {

packages/bbui/src/Tabs/Tab.svelte

@@ -82,7 +82,8 @@
   .spectrum-Tabs-item {
     color: var(--spectrum-global-color-gray-600);
   }
-  .spectrum-Tabs-item.is-selected {
+  .spectrum-Tabs-item.is-selected,
+  .spectrum-Tabs-item:hover {
     color: var(--spectrum-global-color-gray-900);
   }
 </style>

packages/bbui/src/Tags/Tag.svelte

@@ -37,7 +37,7 @@
 
 <style>
   .spectrum-Tags-item {
-    margin-top: 0;
     margin-bottom: 0;
+    margin-top: 0;
   }
 </style>

packages/bbui/src/Tags/Tags.svelte

@@ -5,3 +5,13 @@
 <div class="spectrum-Tags" role="list" aria-label="list">
   <slot />
 </div>
+
+<style>
+  .spectrum-Tags {
+    margin-top: -8px;
+    margin-left: -4px;
+  }
+  .spectrum-Tags :global(.spectrum-Tags-item) {
+    margin: 8px 0 0 4px !important;
+  }
+</style>

packages/bbui/src/Typography/Heading.svelte

@@ -15,3 +15,9 @@
 >
   <slot />
 </h1>
+
+<style>
+  h1 {
+    font-family: var(--font-accent);
+  }
+</style>

packages/bbui/src/bbui.css

@@ -40,12 +40,15 @@
   --rounded-medium: 8px;
   --rounded-large: 16px;
 
-  --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
   --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
+  --spectrum-alias-body-text-font-family: var(--font-sans);
 
   font-size: 16px;
   --font-size-xs: 0.75rem;

packages/builder/assets/bb-emblem.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#393C44;}
+	.st0{fill:#000000;}
 	.st1{fill:#FFFFFF;}
 	.st2{fill:#4285F4;}
 </style>

packages/builder/package.json

@@ -87,7 +87,7 @@
     "shortid": "2.2.15",
     "svelte-dnd-action": "^0.9.8",
     "svelte-loading-spinners": "^0.1.1",
-    "svelte-portal": "0.1.0",
+    "svelte-portal": "1.0.0",
     "uuid": "8.3.1",
     "yup": "0.29.2"
   },

packages/builder/src/App.svelte

@@ -11,11 +11,8 @@
 
 <div class="banner-container" />
 <BannerDisplay />
-
 <NotificationDisplay />
-
 <LicensingOverlays />
-
 <Router {routes} config={{ queryHandler }} />
 <div class="modal-container" />
 <HelpIcon />

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -218,7 +218,6 @@
   }
 
   label {
-    font-family: var(--font-sans);
     cursor: pointer;
     font-weight: 600;
     box-sizing: border-box;

packages/builder/src/components/common/AppLockModal.svelte

@@ -8,6 +8,7 @@
     ProgressCircle,
     Layout,
     Body,
+    Icon,
   } from "@budibase/bbui"
   import { auth, apps } from "stores/portal"
   import { processStringSync } from "@budibase/string-templates"
@@ -56,85 +57,76 @@
   }
 </script>
 
-<div class="lock-status">
+{#if lockedBy}
-  {#if lockedBy}
+  <div class="lock-status">
-    <Button
+    <Icon
-      quiet
+      name="LockClosed"
-      secondary
+      hoverable
-      icon="LockClosed"
       size={buttonSize}
       on:click={() => {
         appLockModal.show()
       }}
-    >
+    />
-      <span class="lock-status-text">
-        {lockedByHeading}
-      </span>
-    </Button>
-  {/if}
-</div>
-
-{#key app}
-  <div>
-    <Modal bind:this={appLockModal}>
-      <ModalContent
-        title={lockedByHeading}
-        dataCy={"app-lock-modal"}
-        showConfirmButton={false}
-        showCancelButton={false}
-      >
-        <Layout noPadding>
-          <Body size="S">
-            Apps are locked to prevent work from being lost from overlapping
-            changes between your team.
-          </Body>
-          {#if lockedByYou && getExpiryDuration(app) > 0}
-            <span class="lock-expiry-body">
-              {processStringSync(
-                "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
-                {
-                  time: getExpiryDuration(app),
-                }
-              )}
-            </span>
-          {/if}
-          <div class="lock-modal-actions">
-            <ButtonGroup>
-              <Button
-                secondary
-                quiet={lockedBy && lockedByYou}
-                disabled={processing}
-                on:click={() => {
-                  appLockModal.hide()
-                }}
-              >
-                <span class="cancel"
-                  >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
-                >
-              </Button>
-              {#if lockedByYou}
-                <Button
-                  secondary
-                  disabled={processing}
-                  on:click={() => {
-                    releaseLock()
-                    appLockModal.hide()
-                  }}
-                >
-                  {#if processing}
-                    <ProgressCircle overBackground={true} size="S" />
-                  {:else}
-                    <span class="unlock">Release Lock</span>
-                  {/if}
-                </Button>
-              {/if}
-            </ButtonGroup>
-          </div>
-        </Layout>
-      </ModalContent>
-    </Modal>
   </div>
-{/key}
+{/if}
+
+<Modal bind:this={appLockModal}>
+  <ModalContent
+    title={lockedByHeading}
+    dataCy={"app-lock-modal"}
+    showConfirmButton={false}
+    showCancelButton={false}
+  >
+    <Layout noPadding>
+      <Body size="S">
+        Apps are locked to prevent work being lost from overlapping changes
+        between your team.
+      </Body>
+      {#if lockedByYou && getExpiryDuration(app) > 0}
+        <span class="lock-expiry-body">
+          {processStringSync(
+            "This lock will expire in {{ duration time 'millisecond' }} from now.",
+            {
+              time: getExpiryDuration(app),
+            }
+          )}
+        </span>
+      {/if}
+      <div class="lock-modal-actions">
+        <ButtonGroup>
+          <Button
+            secondary
+            quiet={lockedBy && lockedByYou}
+            disabled={processing}
+            on:click={() => {
+              appLockModal.hide()
+            }}
+          >
+            <span class="cancel"
+              >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
+            >
+          </Button>
+          {#if lockedByYou}
+            <Button
+              cta
+              disabled={processing}
+              on:click={() => {
+                releaseLock()
+                appLockModal.hide()
+              }}
+            >
+              {#if processing}
+                <ProgressCircle overBackground={true} size="S" />
+              {:else}
+                <span class="unlock">Release Lock</span>
+              {/if}
+            </Button>
+          {/if}
+        </ButtonGroup>
+      </div>
+    </Layout>
+  </ModalContent>
+</Modal>
 
 <style>
   .lock-modal-actions {

packages/builder/src/components/common/CodeMirrorEditor.svelte

@@ -135,7 +135,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height);
     min-height: var(--code-mirror-height);
-    font-family: monospace;
+    font-family: var(--font-mono);
     line-height: 1.3;
     border: var(--spectrum-alias-border-size-thin) solid;
     border-color: var(--spectrum-alias-border-color);

packages/builder/src/components/common/ConfigChecklist.svelte

@@ -1,64 +0,0 @@
-<script>
-  import {
-    ActionMenu,
-    Checkbox,
-    MenuItem,
-    Heading,
-    ProgressCircle,
-  } from "@budibase/bbui"
-  import { admin } from "stores/portal"
-  import { goto } from "@roxi/routify"
-  import { onMount } from "svelte"
-
-  let width = window.innerWidth
-  $: side = width < 500 ? "right" : "left"
-
-  const resizeObserver = new ResizeObserver(entries => {
-    if (entries?.[0]) {
-      width = entries[0].contentRect?.width
-    }
-  })
-
-  onMount(() => {
-    const doc = document.documentElement
-    resizeObserver.observe(doc)
-
-    return () => {
-      resizeObserver.unobserve(doc)
-    }
-  })
-</script>
-
-<ActionMenu align={side}>
-  <div slot="control" class="icon">
-    <ProgressCircle size="S" value={$admin.onboardingProgress} />
-  </div>
-  <MenuItem disabled>
-    <header class="item">
-      <Heading size="XXS">Get Started Checklist</Heading>
-      <ProgressCircle size="S" value={$admin.onboardingProgress} />
-    </header>
-  </MenuItem>
-  {#each Object.keys($admin.checklist) as checklistItem, idx}
-    <MenuItem>
-      <div
-        class="item"
-        on:click={() => $goto($admin.checklist[checklistItem].link)}
-      >
-        <span>{idx + 1}. {$admin.checklist[checklistItem].label}</span>
-        <Checkbox value={$admin.checklist[checklistItem].checked} />
-      </div>
-    </MenuItem>
-  {/each}
-</ActionMenu>
-
-<style>
-  .item {
-    display: grid;
-    align-items: center;
-    grid-template-columns: 175px 20px;
-  }
-  .icon {
-    cursor: pointer;
-  }
-</style>

packages/builder/src/components/common/EditableIcon.svelte

@@ -1,47 +1,46 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Modal } from "@budibase/bbui"
   import ChooseIconModal from "components/start/ChooseIconModal.svelte"
 
   export let name
-  export let size
+  export let size = "M"
   export let app
+  export let color
+  export let autoSave = false
 
-  let iconModal
+  let modal
 </script>
 
 <div class="editable-icon">
-  <div
+  <div class="hover" on:click={modal.show}>
-    class="edit-hover"
+    <Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
-    on:click={() => {
-      iconModal.show()
-    }}
-  >
-    <Icon name={"Edit"} size={"L"} />
   </div>
-  <div class="app-icon">
+  <div class="normal">
-    <Icon {name} {size} />
+    <Icon {name} {size} {color} />
   </div>
 </div>
-<ChooseIconModal {app} bind:this={iconModal} />
+
+<Modal bind:this={modal}>
+  <ChooseIconModal {name} {color} {app} {autoSave} on:change />
+</Modal>
 
 <style>
-  .editable-icon:hover .app-icon {
-    opacity: 0;
-  }
   .editable-icon {
     position: relative;
+    display: flex;
+    justify-content: flex-start;
   }
-  .editable-icon:hover .edit-hover {
+  .normal {
-    opacity: 1;
+    display: block;
   }
-  .edit-hover {
+  .hover {
-    color: var(--spectrum-global-color-gray-600);
+    display: none;
     cursor: pointer;
-    z-index: 100;
+  }
-    width: 100%;
+  .editable-icon:hover .normal {
-    height: 100%;
+    display: none;
-    position: absolute;
+  }
-    opacity: 0;
+  .editable-icon:hover .hover {
-    /* transition: opacity var(--spectrum-global-animation-duration-100) ease; */
+    display: block;
   }
 </style>

packages/builder/src/components/common/RoleSelect.svelte

@@ -2,6 +2,7 @@
   import { Select } from "@budibase/bbui"
   import { roles } from "stores/backend"
   import { Constants, RoleUtils } from "@budibase/frontend-core"
+  import { createEventDispatcher } from "svelte"
 
   export let value
   export let error
@@ -9,26 +10,62 @@
   export let autoWidth = false
   export let quiet = false
   export let allowPublic = true
+  export let allowRemove = false
 
-  $: options = getOptions($roles, allowPublic)
+  const dispatch = createEventDispatcher()
+  const RemoveID = "remove"
+
+  $: options = getOptions($roles, allowPublic, allowRemove)
 
   const getOptions = (roles, allowPublic) => {
+    if (allowRemove) {
+      roles = [
+        ...roles,
+        {
+          _id: RemoveID,
+          name: "Remove",
+        },
+      ]
+    }
     if (allowPublic) {
       return roles
     }
     return roles.filter(role => role._id !== Constants.Roles.PUBLIC)
   }
+
+  const getColor = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return null
+    }
+    return RoleUtils.getRoleColour(role._id)
+  }
+
+  const getIcon = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return "Close"
+    }
+    return null
+  }
+
+  const onChange = e => {
+    if (allowRemove && e.detail === RemoveID) {
+      dispatch("remove")
+    } else {
+      dispatch("change", e.detail)
+    }
+  }
 </script>
 
 <Select
   {autoWidth}
   {quiet}
   bind:value
-  on:change
+  on:change={onChange}
   {options}
   getOptionLabel={role => role.name}
   getOptionValue={role => role._id}
-  getOptionColour={role => RoleUtils.getRoleColour(role._id)}
+  getOptionColour={getColor}
+  getOptionIcon={getIcon}
   {placeholder}
   {error}
 />

packages/builder/src/components/common/TemplateDisplay.svelte

@@ -1,128 +1,110 @@
 <script>
-  import {
+  import { Layout, Detail, Button, Modal } from "@budibase/bbui"
-    Layout,
-    Detail,
-    Heading,
-    Button,
-    Modal,
-    ActionGroup,
-    ActionButton,
-  } from "@budibase/bbui"
   import TemplateCard from "components/common/TemplateCard.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { licensing } from "stores/portal"
+  import { Content, SideNav, SideNavItem } from "components/portal/page"
 
   export let templates
 
-  let selectedTemplateCategory
+  let selectedCategory
   let creationModal
   let template
 
-  const groupTemplatesByCategory = (templates, categoryFilter) => {
+  $: categories = getCategories(templates)
-    let grouped = templates.reduce((acc, template) => {
+  $: filteredCategories = getFilteredCategories(categories, selectedCategory)
-      if (
+
-        typeof categoryFilter === "string" &&
+  const getCategories = templates => {
-        [categoryFilter].indexOf(template.category) < 0
+    let categories = {}
-      ) {
+    templates?.forEach(template => {
-        return acc
+      if (!categories[template.category]) {
+        categories[template.category] = []
       }
-
+      categories[template.category].push(template)
-      acc[template.category] = !acc[template.category]
+    })
-        ? []
+    categories = Object.entries(categories).map(
-        : acc[template.category]
+      ([category, categoryTemplates]) => {
-      acc[template.category].push(template)
+        return {
-
+          name: category,
-      return acc
+          templates: categoryTemplates,
-    }, {})
+        }
-    return grouped
+      }
+    )
+    categories.sort((a, b) => {
+      return a.name < b.name ? -1 : 1
+    })
+    return categories
   }
 
-  $: filteredTemplates = groupTemplatesByCategory(
+  const getFilteredCategories = (categories, selectedCategory) => {
-    templates,
+    if (!selectedCategory) {
-    selectedTemplateCategory
+      return categories
-  )
+    }
-
+    return categories.filter(x => x.name === selectedCategory)
-  $: filteredTemplateCategories = filteredTemplates
+  }
-    ? Object.keys(filteredTemplates).sort()
-    : []
-
-  $: templateCategories = templates
-    ? Object.keys(groupTemplatesByCategory(templates)).sort()
-    : []
 
   const stopAppCreation = () => {
     template = null
   }
 </script>
 
-<div class="template-header">
+<Content>
-  <Layout noPadding gap="S">
+  <div slot="side-nav">
-    <Heading size="S">Templates</Heading>
+    <SideNav>
-    <div class="template-category-filters spectrum-ActionGroup">
+      <SideNavItem
-      <ActionGroup>
+        on:click={() => (selectedCategory = null)}
-        <ActionButton
+        text="All"
-          selected={!selectedTemplateCategory}
+        active={selectedCategory == null}
-          on:click={() => {
+      />
-            selectedTemplateCategory = null
+      {#each categories as category}
-          }}
+        <SideNavItem
-        >
+          on:click={() => (selectedCategory = category.name)}
-          All
+          text={category.name}
-        </ActionButton>
+          active={selectedCategory === category.name}
-        {#each templateCategories as templateCategoryKey}
+        />
-          <ActionButton
+      {/each}
-            dataCy={templateCategoryKey}
+    </SideNav>
-            selected={templateCategoryKey == selectedTemplateCategory}
+  </div>
-            on:click={() => {
+  <div class="template-categories">
-              selectedTemplateCategory = templateCategoryKey
+    <Layout gap="XL" noPadding>
-            }}
+      {#each filteredCategories as category}
-          >
+        <div class="template-category" data-cy={category.name}>
-            {templateCategoryKey}
+          <Detail size="M">{category.name}</Detail>
-          </ActionButton>
+          <div class="template-grid">
-        {/each}
+            {#each category.templates as templateEntry}
-      </ActionGroup>
+              <TemplateCard
-    </div>
+                name={templateEntry.name}
-  </Layout>
+                imageSrc={templateEntry.image}
-</div>
+                backgroundColour={templateEntry.background}
-
+                icon={templateEntry.icon}
-<div class="template-categories">
-  <Layout gap="XL" noPadding>
-    {#each filteredTemplateCategories as templateCategoryKey}
-      <div class="template-category" data-cy={templateCategoryKey}>
-        <Detail size="M">{templateCategoryKey}</Detail>
-        <div class="template-grid">
-          {#each filteredTemplates[templateCategoryKey] as templateEntry}
-            <TemplateCard
-              name={templateEntry.name}
-              imageSrc={templateEntry.image}
-              backgroundColour={templateEntry.background}
-              icon={templateEntry.icon}
-            >
-              {#if !($licensing?.usageMetrics?.apps >= 100)}
-                <Button
-                  cta
-                  on:click={() => {
-                    template = templateEntry
-                    creationModal.show()
-                  }}
-                >
-                  Use template
-                </Button>
-              {/if}
-              <a
-                href={templateEntry.url}
-                target="_blank"
-                class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
-                on:click|stopPropagation
               >
-                Details
+                {#if !($licensing?.usageMetrics?.apps >= 100)}
-              </a>
+                  <Button
-            </TemplateCard>
+                    cta
-          {/each}
+                    on:click={() => {
+                      template = templateEntry
+                      creationModal.show()
+                    }}
+                  >
+                    Use template
+                  </Button>
+                {/if}
+                <a
+                  href={templateEntry.url}
+                  target="_blank"
+                  class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
+                  on:click|stopPropagation
+                >
+                  Details
+                </a>
+              </TemplateCard>
+            {/each}
+          </div>
         </div>
-      </div>
+      {/each}
-    {/each}
+    </Layout>
-  </Layout>
+  </div>
-</div>
+</Content>
 
 <Modal
   bind:this={creationModal}

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -469,7 +469,7 @@
   }
 
   .binding__type {
-    font-family: monospace;
+    font-family: var(--font-mono);
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: var(--border-radius-s);
     padding: 2px 4px;

packages/builder/src/components/common/inputs/CopyInput.svelte

@@ -12,7 +12,7 @@
     dummy.select()
     document.execCommand("copy")
     document.body.removeChild(dummy)
-    notifications.success(`URL copied to clipboard`)
+    notifications.success(`Copied to clipboard`)
   }
 </script>
 

packages/builder/src/components/deploy/DeployModal.svelte

@@ -57,15 +57,13 @@
 <Button cta on:click={publishModal.show}>Publish</Button>
 <Modal bind:this={publishModal}>
   <ModalContent
-    title="Publish to Production"
+    title="Publish to production"
     confirmText="Publish"
     onConfirm={publishApp}
     dataCy={"deploy-app-modal"}
   >
-    <span
+    The changes you have made will be published to the production version of the
-      >The changes you have made will be published to the production version of
+    application.
-      the application.</span
-    >
   </ModalContent>
 </Modal>
 

packages/builder/src/components/deploy/DeployNavigation.svelte

@@ -179,7 +179,7 @@
 </ConfirmDialog>
 
 <div class="buttons">
-  <Button on:click={previewApp} newStyles secondary>Preview</Button>
+  <Button on:click={previewApp} secondary>Preview</Button>
   <DeployModal onOk={completePublish} />
 </div>
 

packages/builder/src/components/integration/QueryEditor.svelte

@@ -185,7 +185,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height) !important;
     border-radius: var(--border-radius-s);
-    font-family: monospace !important;
+    font-family: var(--font-mono);
     line-height: 1.3;
   }
 </style>

packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte

@@ -1,106 +0,0 @@
-<script>
-  import { Layout, Icon, ActionButton, InlineAlert } from "@budibase/bbui"
-  import StatusRenderer from "./StatusRenderer.svelte"
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
-  import { goto } from "@roxi/routify"
-  import { automationStore } from "builderStore"
-
-  export let history
-  export let appId
-  export let close
-  const STOPPED_ERROR = "stopped_error"
-
-  $: exists = $automationStore.automations?.find(
-    auto => auto._id === history?.automationId
-  )
-</script>
-
-{#if history}
-  <div class="body">
-    <div class="top">
-      <div class="controls">
-        <StatusRenderer value={history.status} />
-        <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
-      </div>
-    </div>
-    <Layout paddingY="XL" paddingX="XL" gap="S">
-      <div class="icon">
-        <Icon name="Clock" />
-        <DateTimeRenderer value={history.createdAt} />
-      </div>
-      <div class="icon">
-        <Icon name="JourneyVoyager" />
-        <div>{history.automationName}</div>
-      </div>
-      {#if history.status === STOPPED_ERROR}
-        <div class="cron-error">
-          <InlineAlert
-            type="error"
-            header="CRON automation disabled"
-            message="Fix the error and re-publish your app to re-activate."
-          />
-        </div>
-      {/if}
-      <div>
-        {#if exists}
-          <ActionButton
-            icon="Edit"
-            fullWidth={false}
-            on:click={() =>
-              $goto(`../../../app/${appId}/automate/${history.automationId}`)}
-            >Edit automation</ActionButton
-          >
-        {/if}
-      </div>
-    </Layout>
-    <div class="bottom">
-      {#key history}
-        <TestDisplay testResults={history} width="100%" />
-      {/key}
-    </div>
-  </div>
-{:else}
-  <div>No details found</div>
-{/if}
-
-<style>
-  .body {
-    right: 0;
-    background-color: var(--background);
-    border-left: var(--border-light);
-    width: 420px;
-    height: calc(100vh - 240px);
-    position: fixed;
-    overflow: auto;
-  }
-
-  .top {
-    padding: var(--spacing-m) 0 var(--spacing-m) 0;
-    border-bottom: var(--border-light);
-  }
-
-  .bottom {
-    border-top: var(--border-light);
-    padding-top: calc(var(--spacing-xl) * 2);
-    padding-bottom: calc(var(--spacing-xl) * 2);
-  }
-
-  .icon {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-
-  .controls {
-    padding: 0 var(--spacing-l) 0 var(--spacing-l);
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: var(--spacing-s);
-  }
-
-  .cron-error {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-  }
-</style>

packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte

@@ -1,39 +0,0 @@
-<script>
-  import { Icon } from "@budibase/bbui"
-  export let value
-
-  $: isError = !value || value.toLowerCase() === "error"
-  $: isStoppedError = value?.toLowerCase() === "stopped_error"
-  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
-  $: status = getStatus(isError, isStopped)
-
-  function getStatus(error, stopped) {
-    if (error) {
-      return { color: "var(--red)", message: "Error", icon: "Alert" }
-    } else if (stopped) {
-      return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
-    } else {
-      return {
-        color: "var(--green)",
-        message: "Success",
-        icon: "CheckmarkCircle",
-      }
-    }
-  }
-</script>
-
-<div class="cell">
-  <Icon color={status.color} name={status.icon} />
-  <div style={`color: ${status.color};`}>
-    {status.message}
-  </div>
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-</style>

packages/builder/src/components/portal/page/Breadcrumb.svelte

@@ -0,0 +1,37 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let url
+  export let text
+</script>
+
+<div>
+  <a href={url}>
+    {text}
+  </a>
+  <Icon name="ChevronRight" />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: var(--spectrum-global-color-gray-700);
+    gap: var(--spacing-m);
+    font-size: 16px;
+    font-weight: 600;
+  }
+  div :global(.spectrum-Icon),
+  a {
+    color: inherit;
+    transition: color 130ms ease-out;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  a:hover {
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>

packages/builder/src/components/portal/page/Breadcrumbs.svelte

@@ -0,0 +1,22 @@
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  div :global(> *:last-child .spectrum-Icon) {
+    display: none;
+  }
+  div :global(> *:last-child) {
+    color: var(--spectrum-global-color-gray-900);
+    flex: 1 1 auto;
+    width: 0;
+  }
+</style>

packages/builder/src/components/portal/page/Content.svelte

@@ -0,0 +1,31 @@
+<script>
+  export let narrow = false
+</script>
+
+<div class="content">
+  <div class="side-nav">
+    <slot name="side-nav" />
+  </div>
+  <div class="main" class:narrow>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 40px;
+  }
+  .side-nav {
+    flex: 0 0 200px;
+  }
+  .main {
+    flex: 1 1 auto;
+  }
+  .main.narrow {
+    max-width: 600px;
+  }
+</style>

packages/builder/src/components/portal/page/Header.svelte

@@ -0,0 +1,37 @@
+<script>
+  import { Heading } from "@budibase/bbui"
+
+  export let title
+</script>
+
+<div class="header">
+  <slot name="icon" />
+  <Heading size="L">{title}</Heading>
+  <div class="buttons">
+    <slot name="buttons" />
+  </div>
+</div>
+
+<style>
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
+    margin-top: -2px;
+  }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .buttons :global(> div) {
+    display: contents;
+  }
+</style>

packages/builder/src/components/portal/page/SideNav.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let title
+</script>
+
+<div class="side-nav">
+  {#if title}
+    <div class="title">{title}</div>
+  {/if}
+  <slot />
+</div>
+
+<style>
+  .side-nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 4px;
+  }
+  .title {
+    margin-left: var(--spacing-m);
+    font-size: 12px;
+    color: var(--spectrum-global-color-gray-700);
+    margin-bottom: var(--spacing-m);
+  }
+</style>

packages/builder/src/components/portal/page/SideNavItem.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let text
+  export let url
+  export let active = false
+</script>
+
+<a on:click href={url} class:active>
+  {text}
+</a>
+
+<style>
+  a {
+    padding: var(--spacing-s) var(--spacing-m);
+    color: var(--spectrum-global-color-gray-900);
+    border-radius: 4px;
+    transition: background 130ms ease-out;
+  }
+  .active,
+  a:hover {
+    background-color: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>

packages/builder/src/components/portal/page/index.js

@@ -0,0 +1,6 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte"
+export { default as Breadcrumbs } from "./Breadcrumbs.svelte"
+export { default as Header } from "./Header.svelte"
+export { default as Content } from "./Content.svelte"
+export { default as SideNavItem } from "./SideNavItem.svelte"
+export { default as SideNav } from "./SideNav.svelte"

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

@@ -1,5 +1,6 @@
 <script>
-  import { ModalContent, Body, notifications } from "@budibase/bbui"
+  import { ModalContent } from "@budibase/bbui"
+  import { Body, notifications } from "@budibase/bbui"
   import { auth } from "stores/portal"
   import { onMount } from "svelte"
   import CopyInput from "components/common/inputs/CopyInput.svelte"
@@ -27,15 +28,13 @@
 </script>
 
 <ModalContent
-  title="Developer information"
+  title="API Key"
-  showConfirmButton={false}
+  showSecondaryButton
-  showSecondaryButton={true}
+  secondaryButtonText="Regenerate key"
-  secondaryButtonText="Re-generate key"
   secondaryAction={generateAPIKey}
+  showCancelButton={false}
+  confirmText="Close"
 >
-  <Body size="S">
+  <Body size="S">Your API key for accessing the Budibase public API:</Body>
-    You can find information about your developer account here, such as the API
+  <CopyInput bind:value={apiKey} />
-    key used to access the Budibase API.
-  </Body>
-  <CopyInput bind:value={apiKey} label="API key" />
 </ModalContent>

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

@@ -18,11 +18,7 @@
   }
 </script>
 
-<ModalContent
+<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
-  title="Update user information"
-  confirmText="Update information"
-  onConfirm={updateInfo}
->
   <Body size="S">
     Personalise the platform by adding your first name and last name.
   </Body>

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

@@ -0,0 +1,16 @@
+<script>
+  import { ModalContent } from "@budibase/bbui"
+  import { Label, Select } from "@budibase/bbui"
+  import { themeStore } from "builderStore"
+  import { Constants } from "@budibase/frontend-core"
+</script>
+
+<ModalContent title="Theme">
+  <Select
+    options={Constants.Themes}
+    bind:value={$themeStore.theme}
+    placeholder={null}
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.class}
+  />
+</ModalContent>

packages/builder/src/components/start/AppRow.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Heading, Button, Icon } from "@budibase/bbui"
+  import { Heading, Body, Button, Icon } from "@budibase/bbui"
   import AppLockModal from "../common/AppLockModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
 
@@ -8,78 +8,109 @@
   export let appOverview
 </script>
 
-<div class="title" data-cy={`${app.devId}`}>
+<div class="app-row">
-  <div>
+  <div class="header">
-    <div class="app-icon" style="color: {app.icon?.color || ''}">
+    <div class="title" data-cy={`${app.devId}`}>
-      <Icon size="XL" name={app.icon?.name || "Apps"} />
+      <div class="app-icon">
+        <Icon
+          size="L"
+          name={app.icon?.name || "Apps"}
+          color={app.icon?.color}
+        />
+      </div>
+      <div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
+        <Heading size="S">
+          {app.name}
+        </Heading>
+      </div>
     </div>
-    <div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
+
-      <Heading size="XS">
+    <div class="updated">
-        {app.name}
+      {#if app.updatedAt}
-      </Heading>
+        {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
+          time: new Date().getTime() - new Date(app.updatedAt).getTime(),
+        })}
+      {:else}
+        Never updated
+      {/if}
     </div>
   </div>
-</div>
+
-<div class="desktop">
+  <div class="title app-status" class:deployed={app.deployed}>
-  {#if app.updatedAt}
+    <Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
-    {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
+    <Body size="S">{`${window.origin}/app${app.url}`}</Body>
-      time: new Date().getTime() - new Date(app.updatedAt).getTime(),
-    })}
-  {:else}
-    Never updated
-  {/if}
-</div>
-<div class="desktop">
-  <span><AppLockModal {app} buttonSize="M" /></span>
-</div>
-<div class="desktop">
-  <div class="app-status">
-    {#if app.deployed}
-      <Icon name="Globe" disabled={false} />
-      Published
-    {:else}
-      <Icon name="GlobeStrike" disabled={true} />
-      <span class="disabled"> Unpublished </span>
-    {/if}
   </div>
-</div>
+
-<div data-cy={`row_actions_${app.appId}`}>
+  <div data-cy={`row_actions_${app.appId}`}>
-  <div class="app-row-actions">
+    <div class="app-row-actions">
-    <Button size="S" secondary newStyles on:click={() => appOverview(app)}>
+      <Button
-      Manage
+        size="S"
-    </Button>
+        primary
-    <Button
+        disabled={app.lockedOther}
-      size="S"
+        on:click={() => editApp(app)}
-      primary
+      >
-      newStyles
+        Edit
-      disabled={app.lockedOther}
+      </Button>
-      on:click={() => editApp(app)}
+      <Button size="S" secondary on:click={() => appOverview(app)}>
-    >
+        Manage
-      Edit
+      </Button>
-    </Button>
+      <AppLockModal {app} buttonSize="M" />
+    </div>
   </div>
 </div>
 
 <style>
-  div.title,
+  .app-row {
-  div.title > div {
+    background: var(--background);
+    padding: 24px 32px;
+    border-radius: 8px;
     display: flex;
-    max-width: 100%;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
   }
-  .app-row-actions {
+
-    grid-gap: var(--spacing-s);
+  .header {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
+    align-items: center;
   }
+
+  .updated {
+    color: var(--spectrum-global-color-gray-700);
+  }
+
+  .title,
   .app-status {
-    display: grid;
+    display: flex;
-    grid-gap: var(--spacing-s);
+    flex-direction: row;
-    grid-template-columns: 24px 100px;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
   }
-  .app-status span.disabled {
+
-    opacity: 0.3;
+  .title :global(.spectrum-Heading),
+  .title :global(.spectrum-Icon),
+  .title :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-900);
   }
+
+  .app-status:not(.deployed) :global(.spectrum-Icon),
+  .app-status:not(.deployed) :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .app-row-actions {
+    gap: var(--spacing-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: var(--spacing-m);
+  }
+
   .name {
     text-decoration: none;
     overflow: hidden;
@@ -88,7 +119,6 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    margin-left: calc(1.5 * var(--spacing-xl));
   }
   .title :global(h1:hover) {
     color: var(--spectrum-global-color-blue-600);

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -1,18 +1,20 @@
 <script>
   import {
     ModalContent,
-    Modal,
     Icon,
     ColorPicker,
     Label,
     notifications,
   } from "@budibase/bbui"
   import { apps } from "stores/portal"
+  import { createEventDispatcher } from "svelte"
 
   export let app
-  let modal
+  export let name
-  $: selectedIcon = app?.icon?.name || "Apps"
+  export let color
-  $: selectedColor = app?.icon?.color
+  export let autoSave = false
+
+  const dispatch = createEventDispatcher()
 
   let iconsList = [
     "Apps",
@@ -40,30 +42,15 @@
     "GraphBarHorizontal",
     "Demographic",
   ]
-  export const show = () => {
-    modal.show()
-  }
-  export const hide = () => {
-    modal.hide()
-  }
-
-  const onCancel = () => {
-    selectedIcon = ""
-    selectedColor = ""
-    hide()
-  }
-
-  const changeColor = val => {
-    selectedColor = val
-  }
 
   const save = async () => {
+    if (!autoSave) {
+      dispatch("change", { color, name })
+      return
+    }
     try {
       await apps.update(app.instance._id, {
-        icon: {
+        icon: { name, color },
-          name: selectedIcon,
-          color: selectedColor,
-        },
       })
     } catch (error) {
       notifications.error("Error updating app")
@@ -71,41 +58,32 @@
   }
 </script>
 
-<Modal bind:this={modal} on:hide={onCancel}>
+<ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
-  <ModalContent
+  <div class="scrollable-icons">
-    title={"Edit Icon"}
+    <div class="title-spacing">
-    confirmText={"Save"}
+      <Label>Select an icon</Label>
-    onConfirm={() => save()}
-  >
-    <div class="scrollable-icons">
-      <div class="title-spacing">
-        <Label>Select an icon</Label>
-      </div>
-      <div class="grid">
-        {#each iconsList as item}
-          <div
-            class="icon-item"
-            class:selected={item === selectedIcon}
-            on:click={() => (selectedIcon = item)}
-          >
-            <Icon name={item} />
-          </div>
-        {/each}
-      </div>
     </div>
-    <div class="color-selection">
+    <div class="grid">
-      <div>
+      {#each iconsList as item}
-        <Label>Select a color</Label>
+        <div
-      </div>
+          class="icon-item"
-      <div class="color-selection-item">
+          class:selected={item === name}
-        <ColorPicker
+          on:click={() => (name = item)}
-          bind:value={selectedColor}
+        >
-          on:change={e => changeColor(e.detail)}
+          <Icon name={item} />
-        />
+        </div>
-      </div>
+      {/each}
     </div>
-  </ModalContent>
+  </div>
-</Modal>
+  <div class="color-selection">
+    <div>
+      <Label>Select a color</Label>
+    </div>
+    <div class="color-selection-item">
+      <ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
+    </div>
+  </div>
+</ModalContent>
 
 <style>
   .scrollable-icons {

packages/builder/src/components/start/CreateAppModal.svelte

@@ -138,6 +138,7 @@
       }
 
       $goto(`/builder/app/${createdApp.instance._id}`)
+      // apps.load()
     } catch (error) {
       creating = false
       console.error(error)

packages/builder/src/components/start/UpdateAppModal.svelte

@@ -1,22 +1,29 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Input, ModalContent, Body } from "@budibase/bbui"
+  import {
+    notifications,
+    Input,
+    ModalContent,
+    Layout,
+    Label,
+  } from "@budibase/bbui"
   import { apps } from "stores/portal"
   import { onMount } from "svelte"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
+  import EditableIcon from "../common/EditableIcon.svelte"
 
   export let app
 
-  const values = writable({ name: "", url: null })
+  const values = writable({
-  const validation = createValidationStore()
+    name: app.name,
-  $: validation.check($values)
+    url: app.url,
-
+    iconName: app.icon?.name,
-  onMount(async () => {
+    iconColor: app.icon?.color,
-    $values.name = app.name
-    $values.url = app.url
-    setupValidation()
   })
+  const validation = createValidationStore()
+
+  $: validation.check($values)
 
   const setupValidation = async () => {
     const applications = svelteGet(apps)
@@ -28,14 +35,14 @@
 
   async function updateApp() {
     try {
-      // Update App
+      await apps.update(app.instance._id, {
-      const body = {
+        name: $values.name?.trim(),
-        name: $values.name.trim(),
+        url: $values.url?.trim(),
-      }
+        icon: {
-      if ($values.url) {
+          name: $values.iconName,
-        body.url = $values.url.trim()
+          color: $values.iconColor,
-      }
+        },
-      await apps.update(app.instance._id, body)
+      })
     } catch (error) {
       console.error(error)
       notifications.error("Error updating app")
@@ -68,15 +75,22 @@
     let resolvedUrl = resolveAppUrl(null, appName)
     tidyUrl(resolvedUrl)
   }
+
+  const updateIcon = e => {
+    const { name, color } = e.detail
+    $values.iconColor = color
+    $values.iconName = name
+  }
+
+  onMount(setupValidation)
 </script>
 
 <ModalContent
-  title={"Edit app"}
+  title="Edit name and URL"
-  confirmText={"Save"}
+  confirmText="Save"
   onConfirm={updateApp}
   disabled={!$validation.valid}
 >
-  <Body size="S">Update the name of your app.</Body>
   <Input
     bind:value={$values.name}
     error={$validation.touched.name && $validation.errors.name}
@@ -84,6 +98,16 @@
     on:change={nameToUrl($values.name)}
     label="Name"
   />
+  <Layout noPadding gap="XS">
+    <Label>Icon</Label>
+    <EditableIcon
+      {app}
+      size="XL"
+      name={$values.iconName}
+      color={$values.iconColor}
+      on:change={updateIcon}
+    />
+  </Layout>
   <Input
     bind:value={$values.url}
     error={$validation.touched.url && $validation.errors.url}

packages/builder/src/components/usage/UsageDashCard.svelte

@@ -47,7 +47,7 @@
     <div class="header-actions">
       {#if secondaryDefined}
         <div>
-          <Button newStyles secondary on:click={secondaryAction}
+          <Button secondary on:click={secondaryAction}
             >{secondaryActionText}</Button
           >
         </div>

packages/builder/src/global.css

@@ -23,7 +23,6 @@ body {
   --grey-8: var(--spectrum-global-color-gray-800);
   --grey-9: var(--spectrum-global-color-gray-900);
 
-  font-family: var(--font-sans);
   color: var(--ink);
   background-color: var(--background-alt);
 }

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -105,32 +105,34 @@
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Access`)}
+              $goto(`../../portal/overview/${application}/access`)}
           >
             Access
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(
+              $goto(`../../portal/overview/${application}/automation-history`)}
-                `../../portal/overview/${application}?tab=${encodeURIComponent(
-                  "Automation History"
-                )}`
-              )}
           >
             Automation history
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Backups`)}
+              $goto(`../../portal/overview/${application}/backups`)}
           >
             Backups
           </MenuItem>
 
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Settings`)}
+              $goto(`../../portal/overview/${application}/name-and-url`)}
           >
-            Settings
+            Name and URL
+          </MenuItem>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/version`)}
+          >
+            Version
           </MenuItem>
         </ActionMenu>
         <Heading size="XS">{$store.name || "App"}</Heading>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte

@@ -172,7 +172,7 @@
         {bindings}
       />
     {/each}
-    <Button secondary newStyles on:click={() => $goto("../components")}>
+    <Button secondary on:click={() => $goto("../components")}>
       View components
     </Button>
   </Layout>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte

@@ -17,7 +17,7 @@
 <div class="container">
   <Slider min={0} max={3} step={1} value={index} on:change={onChange} />
   <div class="button" style="--radius: {customTheme.buttonBorderRadius};">
-    <Button primary newStyles>Button</Button>
+    <Button primary>Button</Button>
   </div>
 </div>
 

packages/builder/src/pages/builder/apps/index.svelte

@@ -17,7 +17,7 @@
   import { goto } from "@roxi/routify"
   import { AppStatus } from "constants"
   import { gradient } from "actions"
-  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
+  import ProfileModal from "components/settings/ProfileModal.svelte"
   import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
   import Spaceman from "assets/bb-space-man.svg"
@@ -89,7 +89,7 @@
 
 {#if $auth.user && loaded}
   <div class="container">
-    <Page>
+    <Page narrow>
       <div class="content">
         <Layout noPadding>
           <div class="header">
@@ -185,7 +185,7 @@
     </Page>
   </div>
   <Modal bind:this={userInfoModal}>
-    <UpdateUserInfoModal />
+    <ProfileModal />
   </Modal>
   <Modal bind:this={changePasswordModal}>
     <ChangePasswordModal />
@@ -196,6 +196,11 @@
   .container {
     height: 100%;
     overflow: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 80px;
   }
   .content {
     width: 100%;

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -1,146 +1,93 @@
 <script>
-  import { isActive, redirect, goto } from "@roxi/routify"
+  import { isActive, redirect, goto, url } from "@roxi/routify"
   import {
     Icon,
     Avatar,
-    Layout,
-    SideNavigation as Navigation,
-    SideNavigationItem as Item,
     ActionMenu,
     MenuItem,
     Modal,
-    clickOutside,
     notifications,
+    Tabs,
+    Tab,
+    Button,
   } from "@budibase/bbui"
-  import ConfigChecklist from "components/common/ConfigChecklist.svelte"
   import { organisation, auth, admin as adminStore } from "stores/portal"
   import { onMount } from "svelte"
-  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
+  import ProfileModal from "components/settings/ProfileModal.svelte"
   import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
-  import UpdateAPIKeyModal from "components/settings/UpdateAPIKeyModal.svelte"
+  import ThemeModal from "components/settings/ThemeModal.svelte"
+  import APIKeyModal from "components/settings/APIKeyModal.svelte"
   import Logo from "assets/bb-emblem.svg"
   import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
 
   let loaded = false
-  let userInfoModal
+  let themeModal
-  let changePasswordModal
+  let profileModal
+  let updatePasswordModal
   let apiKeyModal
   let mobileMenuVisible = false
+  let activeTab = "Apps"
 
   $: menu = buildMenu($auth.isAdmin)
+  $: $url(), updateActiveTab()
+
+  const updateActiveTab = () => {
+    for (let entry of menu) {
+      if ($isActive(entry.href)) {
+        if (activeTab !== entry.title) {
+          activeTab = entry.title
+        }
+        break
+      }
+    }
+  }
 
   const buildMenu = admin => {
+    // Standard user and developer pages
     let menu = [
       {
         title: "Apps",
         href: "/builder/portal/apps",
       },
+      {
+        title: "Plugins",
+        href: "/builder/portal/plugins",
+      },
     ]
 
+    // Admin only pages
     if (admin) {
-      menu = menu.concat([
+      menu = [
+        {
+          title: "Apps",
+          href: "/builder/portal/apps",
+        },
         {
           title: "Users",
-          href: "/builder/portal/manage/users",
+          href: "/builder/portal/users/users",
-          heading: "Manage",
         },
-        isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)
-          ? {
-              title: "User Groups",
-              href: "/builder/portal/manage/groups",
-            }
-          : undefined,
-        { title: "Auth", href: "/builder/portal/manage/auth" },
-        { title: "Email", href: "/builder/portal/manage/email" },
         {
           title: "Plugins",
-          href: "/builder/portal/manage/plugins",
+          href: "/builder/portal/plugins",
-        },
-
-        {
-          title: "Organisation",
-          href: "/builder/portal/settings/organisation",
-          heading: "Settings",
         },
         {
-          title: "Theming",
+          title: "Settings",
-          href: "/builder/portal/settings/theming",
+          href: "/builder/portal/settings",
         },
-      ])
+      ]
-
-      if (!$adminStore.cloud) {
-        menu = menu.concat([
-          {
-            title: "Update",
-            href: "/builder/portal/settings/update",
-          },
-        ])
-      }
-    } else {
-      menu = menu.concat([
-        {
-          title: "Theming",
-          href: "/builder/portal/settings/theming",
-          heading: "Settings",
-        },
-      ])
     }
 
-    // add link to account portal if the user has access
+    // Check if allowed access to account section
-    let accountSectionAdded = false
+    if (
-
+      isEnabled(TENANT_FEATURE_FLAGS.LICENSING) &&
-    // link out to account-portal if account holder in cloud or always in self-host
+      ($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin))
-    if ($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin)) {
+    ) {
-      accountSectionAdded = true
+      menu.push({
-      menu = menu.concat([
+        title: "Account",
-        {
+        href: "/builder/portal/account",
-          title: "Account",
+      })
-          href: $adminStore.accountPortalUrl,
-          heading: "Account",
-        },
-      ])
     }
 
-    if (isEnabled(TENANT_FEATURE_FLAGS.LICENSING)) {
-      // always show usage in self-host or cloud if licensing enabled
-      menu = menu.concat([
-        {
-          title: "Usage",
-          href: "/builder/portal/settings/usage",
-          heading: accountSectionAdded ? "" : "Account",
-        },
-      ])
-
-      // show the relevant hosting upgrade page
-      if ($adminStore.cloud && $auth?.user?.accountPortalAccess) {
-        menu = menu.concat([
-          {
-            title: "Upgrade",
-            href: $adminStore.accountPortalUrl + "/portal/upgrade",
-          },
-        ])
-      } else if (!$adminStore.cloud && admin) {
-        menu = menu.concat({
-          title: "Upgrade",
-          href: "/builder/portal/settings/upgrade",
-        })
-      }
-
-      // show the billing page to licensed account holders in cloud
-      if (
-        $auth?.user?.accountPortalAccess &&
-        $auth.user.account.stripeCustomerId
-      ) {
-        menu = menu.concat([
-          {
-            title: "Billing",
-            href: $adminStore.accountPortalUrl + "/portal/billing",
-          },
-        ])
-      }
-    }
-
-    menu = menu.filter(item => !!item)
     return menu
   }
 
@@ -174,39 +121,15 @@
 
 {#if $auth.user && loaded}
   <div class="container">
-    <div
+    <div class="nav">
-      class="nav"
+      <div class="branding" on:click={() => $goto("./apps")}>
-      class:visible={mobileMenuVisible}
+        <img src={Logo} alt="Logotype" />
-      use:clickOutside={hideMobileMenu}
+      </div>
-    >
+      <Tabs selected={activeTab}>
-      <Layout paddingX="L" paddingY="L">
+        {#each menu as { title, href }}
-        <div class="branding">
+          <Tab {title} on:click={() => $goto(href)} />
-          <div class="name" on:click={() => $goto("./apps")}>
+        {/each}
-            <img src={$organisation?.logoUrl || Logo} alt="Logotype" />
+      </Tabs>
-            <span>{$organisation?.company || "Budibase"}</span>
-          </div>
-          <div class="onboarding">
-            {#if $auth.user?.admin?.global}
-              <ConfigChecklist />
-            {/if}
-          </div>
-        </div>
-        <div class="menu">
-          <Navigation>
-            {#each menu as { title, href, heading, badge }}
-              <Item
-                on:click={hideMobileMenu}
-                selected={$isActive(href)}
-                {href}
-                {badge}
-                {heading}>{title}</Item
-              >
-            {/each}
-          </Navigation>
-        </div>
-      </Layout>
-    </div>
-    <div class="main">
       <div class="toolbar">
         <div class="mobile-toggle">
           <Icon hoverable name="ShowMenu" on:click={showMobileMenu} />
@@ -217,56 +140,73 @@
             alt={$organisation?.company || "Budibase"}
           />
         </div>
+        {#if !$adminStore.cloud && $auth.isAdmin}
+          <Button cta on:click={() => $goto("/builder/portal/account/upgrade")}>
+            Upgrade
+          </Button>
+        {/if}
         <div class="user-dropdown">
           <ActionMenu align="right" dataCy="user-menu">
             <div slot="control" class="avatar">
               <Avatar
-                size="M"
+                size="L"
                 initials={$auth.initials}
                 url={$auth.user.pictureUrl}
               />
               <Icon size="XL" name="ChevronDown" />
             </div>
             <MenuItem
-              icon="UserEdit"
+              icon="Moon"
-              on:click={() => userInfoModal.show()}
+              on:click={() => themeModal.show()}
-              dataCy={"user-info"}
+              dataCy="theme"
             >
-              Update user information
+              Theme
+            </MenuItem>
+            <MenuItem
+              icon="UserEdit"
+              on:click={() => profileModal.show()}
+              dataCy="user-info"
+            >
+              My profile
             </MenuItem>
-            {#if $auth.isBuilder}
-              <MenuItem icon="Key" on:click={() => apiKeyModal.show()}>
-                View API key
-              </MenuItem>
-            {/if}
             <MenuItem
               icon="LockClosed"
-              on:click={() => changePasswordModal.show()}
+              on:click={() => updatePasswordModal.show()}
             >
               Update password
             </MenuItem>
+            <MenuItem
+              icon="Key"
+              on:click={() => apiKeyModal.show()}
+              dataCy="api-key"
+            >
+              View API key
+            </MenuItem>
             <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
               Close developer mode
             </MenuItem>
-            <MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}
+            <MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}>
-              >Log out
+              Log out
             </MenuItem>
           </ActionMenu>
         </div>
       </div>
-      <div class="content">
+    </div>
-        <slot />
+    <div class="main">
-      </div>
+      <slot />
     </div>
   </div>
-  <Modal bind:this={userInfoModal}>
+  <Modal bind:this={themeModal}>
-    <UpdateUserInfoModal />
+    <ThemeModal />
   </Modal>
-  <Modal bind:this={changePasswordModal}>
+  <Modal bind:this={profileModal}>
+    <ProfileModal />
+  </Modal>
+  <Modal bind:this={updatePasswordModal}>
     <ChangePasswordModal />
   </Modal>
   <Modal bind:this={apiKeyModal}>
-    <UpdateAPIKeyModal />
+    <APIKeyModal />
   </Modal>
 {/if}
 
@@ -274,78 +214,69 @@
   .container {
     height: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
   }
   .nav {
     background: var(--background);
-    border-right: var(--border-light);
+    display: flex;
-    overflow: auto;
+    flex-direction: row;
-    flex: 0 0 auto;
+    justify-content: flex-start;
-    width: 250px;
+    align-items: stretch;
+    border-bottom: var(--border-light);
+    padding: 0 20px;
+    gap: 24px;
   }
-  .main {
+  .nav :global(.spectrum-Tabs) {
-    flex: 1 1 auto;
+    margin-bottom: -2px;
-    display: grid;
+    padding: 7px 0;
-    grid-template-rows: auto 1fr;
+  }
-    overflow: hidden;
+  .nav :global(.spectrum-Tabs-itemLabel) {
+    font-weight: 600;
   }
   .branding {
     display: grid;
-    grid-gap: var(--spacing-s);
+    place-items: center;
-    grid-template-columns: auto auto;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .name {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-gap: var(--spacing-m);
-    align-items: center;
-  }
-  .name:hover {
-    cursor: pointer;
   }
   .avatar {
     display: grid;
     grid-template-columns: auto auto;
     place-items: center;
-    grid-gap: var(--spacing-xs);
+    grid-gap: var(--spacing-s);
   }
   .avatar:hover {
     cursor: pointer;
     filter: brightness(110%);
   }
   .toolbar {
-    background: var(--background);
+    flex: 1 1 auto;
-    border-bottom: var(--border-light);
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: flex-end;
     align-items: center;
-    padding: var(--spacing-m) calc(var(--spacing-xl) * 2);
+    gap: 24px;
   }
   .mobile-toggle,
   .mobile-logo {
     display: none;
   }
   .user-dropdown {
-    flex: 1 1 auto;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
   }
   img {
-    width: 28px;
+    width: 30px;
-    height: 28px;
+    height: 30px;
   }
-  span {
+
-    overflow: hidden;
+  .main {
-    text-overflow: ellipsis;
+    flex: 1 1 auto;
-    font-weight: 600;
+    display: flex;
-  }
+    flex-direction: row;
-  .content {
+    justify-content: center;
+    align-items: stretch;
     overflow: auto;
   }
 

packages/builder/src/pages/builder/portal/account/_layout.svelte

@@ -0,0 +1,42 @@
+<script>
+  import { url, isActive } from "@roxi/routify"
+  import { Page } from "@budibase/bbui"
+  import { Content, SideNav, SideNavItem } from "components/portal/page"
+  import { admin, auth } from "stores/portal"
+</script>
+
+<Page narrow>
+  <Content>
+    <div slot="side-nav">
+      <SideNav>
+        <!-- Always show usage in self-host or cloud if licensing enabled-->
+        <SideNavItem
+          text="Usage"
+          url={$url("./usage")}
+          active={$isActive("./usage")}
+        />
+        <!-- Show the relevant hosting upgrade page-->
+        {#if $admin.cloud && $auth?.user?.accountPortalAccess}
+          <SideNavItem
+            text="Upgrade"
+            url={$admin.accountPortalUrl + "/portal/upgrade"}
+          />
+        {:else if !$admin.cloud && admin}
+          <SideNavItem
+            text="Upgrade"
+            url={$url("./upgrade")}
+            active={$isActive("./upgrade")}
+          />
+        {/if}
+        <!-- Show the billing page to licensed account holders in cloud -->
+        {#if $auth?.user?.accountPortalAccess && $auth.user.account.stripeCustomerId}
+          <SideNavItem
+            text="Billing"
+            url={$admin.accountPortalUrl + "/portal/billing"}
+          />
+        {/if}
+      </SideNav>
+    </div>
+    <slot />
+  </Content>
+</Page>

packages/builder/src/pages/builder/portal/account/index.svelte

@@ -0,0 +1,4 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  $redirect("./usage")
+</script>

packages/builder/src/pages/builder/portal/account/upgrade.svelte

@@ -8,6 +8,7 @@
     Button,
     Input,
     Label,
+    ButtonGroup,
     notifications,
   } from "@budibase/bbui"
   import { auth, admin } from "stores/portal"
@@ -103,10 +104,10 @@
         {#if license.plan.type === "free"}
           Upgrade your Budibase installation to unlock additional features. To
           subscribe to a plan visit your
-          <Link size="L" href={upgradeUrl}>Account</Link>.
+          <Link size="L" href={upgradeUrl}>account</Link>.
         {:else}
           To manage your plan visit your
-          <Link size="L" href={upgradeUrl}>Account</Link>.
+          <Link size="L" href={upgradeUrl}>account</Link>
         {/if}
       </Body>
     </Layout>
@@ -127,44 +128,33 @@
           />
         </div>
       </div>
-      <div class="button-container">
+      <ButtonGroup>
-        <div class="action-button">
+        <Button cta on:click={activate} disabled={activateDisabled}>
-          <Button cta on:click={activate} disabled={activateDisabled}
+          Activate
-            >Activate</Button
+        </Button>
-          >
+        {#if licenseInfo?.licenseKey}
-        </div>
+          <Button warning on:click={() => deleteLicenseKeyModal.show()}>
-        <div class="action-button">
+            Delete
-          {#if licenseInfo?.licenseKey}
+          </Button>
-            <Button warning on:click={() => deleteLicenseKeyModal.show()}
+        {/if}
-              >Delete</Button
+      </ButtonGroup>
-            >
-          {/if}
-        </div>
-      </div>
     </Layout>
     <Divider />
-    <Layout gap="L" noPadding>
+    <Layout gap="XS" noPadding>
-      <Layout gap="S" noPadding>
+      <Heading size="S">Plan</Heading>
-        <Heading size="S">Plan</Heading>
+      <Layout noPadding gap="XXS">
-        <Layout noPadding gap="XXS">
+        <Body size="S">You are currently on the {license.plan.type} plan</Body>
-          <Body size="S">You are currently on the {license.plan.type} plan</Body
+        <Body size="XS">
-          >
+          {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
-          <Body size="XS">
+            time:
-            {processStringSync(
+              new Date().getTime() - new Date(license.refreshedAt).getTime(),
-              "Updated {{ duration time 'millisecond' }} ago",
+          })}
-              {
+        </Body>
-                time:
-                  new Date().getTime() -
-                  new Date(license.refreshedAt).getTime(),
-              }
-            )}
-          </Body>
-        </Layout>
       </Layout>
-      <div>
-        <Button secondary on:click={refresh}>Refresh</Button>
-      </div>
     </Layout>
+    <div>
+      <Button secondary on:click={refresh}>Refresh</Button>
+    </div>
   </Layout>
 {/if}
 
@@ -179,10 +169,4 @@
     grid-gap: var(--spacing-l);
     align-items: center;
   }
-  .action-button {
-    margin-right: 10px;
-  }
-  .button-container {
-    display: flex;
-  }
 </style>

packages/builder/src/pages/builder/portal/account/usage.svelte

@@ -8,6 +8,7 @@
     Detail,
     Link,
     TooltipWrapper,
+    Page,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
   import { admin, auth, licensing } from "../../../../stores/portal"
@@ -180,18 +181,14 @@
     <Layout noPadding gap="XS">
       <Heading>Usage</Heading>
       <Body>
-        Get information about your current usage within Budibase.
+        <div>Get information about your current usage within Budibase</div>
-        {#if accountPortalAccess}
-          To upgrade your plan and usage limits visit your <Link
-            on:click={goToAccountPortal}
-            size="L">Account</Link
-          >
-        {:else}
-          To upgrade your plan and usage limits contact your account holder.
-        {/if}
       </Body>
     </Layout>
     <Divider />
+    <Body>
+      To upgrade your plan and usage limits visit your
+      <Link size="L" on:click={goToAccountPortal}>account</Link>.
+    </Body>
     <DashCard
       description="YOUR CURRENT PLAN"
       title={planTitle()}
@@ -199,58 +196,60 @@
       primaryAction={accountPortalAccess ? goToAccountPortal : undefined}
       {textRows}
     >
-      <Layout gap="S" noPadding>
+      <div class="content">
-        <Layout gap="S">
+        <div class="column">
-          <div class="usages">
+          <Layout noPadding>
-            <Layout noPadding>
+            {#each staticUsage as usage}
-              {#each staticUsage as usage}
+              <div class="usage">
-                <div class="usage">
+                <Usage {usage} warnWhenFull={WARN_USAGE.includes(usage.name)} />
+              </div>
+            {/each}
+          </Layout>
+        </div>
+
+        {#if monthlyUsage.length}
+          <div class="column">
+            <Layout noPadding gap="M">
+              <Layout gap="XS" noPadding>
+                <Heading size="S">Monthly limits</Heading>
+                <div class="detail">
+                  <TooltipWrapper tooltip={new Date(quotaReset)}>
+                    <Detail size="M">
+                      Resets in {daysRemainingInMonth} days
+                    </Detail>
+                  </TooltipWrapper>
+                </div>
+              </Layout>
+              <Layout noPadding gap="M">
+                {#each monthlyUsage as usage}
                   <Usage
                     {usage}
                     warnWhenFull={WARN_USAGE.includes(usage.name)}
                   />
-                </div>
+                {/each}
-              {/each}
+              </Layout>
-            </Layout>
-          </div>
-        </Layout>
-        {#if monthlyUsage.length}
-          <div class="monthly-container">
-            <Layout gap="S">
-              <Heading size="S" weight="light">Monthly</Heading>
-              <div class="detail">
-                <TooltipWrapper tooltip={new Date(quotaReset)}>
-                  <Detail size="M">Resets in {daysRemainingInMonth} days</Detail
-                  >
-                </TooltipWrapper>
-              </div>
-              <div class="usages">
-                <Layout noPadding>
-                  {#each monthlyUsage as usage}
-                    <div class="usage">
-                      <Usage
-                        {usage}
-                        warnWhenFull={WARN_USAGE.includes(usage.name)}
-                      />
-                    </div>
-                  {/each}
-                </Layout>
-              </div>
             </Layout>
           </div>
         {/if}
-      </Layout>
+      </div>
     </DashCard>
   </Layout>
 {/if}
 
 <style>
-  .usages {
+  .content {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 40px;
+  }
+  .column {
+    flex: 1 1 0;
   }
   .detail :global(.spectrum-Detail) {
     color: var(--spectrum-global-color-gray-700);
+    margin-bottom: 5px;
   }
   .detail :global(.icon) {
     margin-bottom: 0;

packages/builder/src/pages/builder/portal/apps/_layout.svelte

@@ -0,0 +1,37 @@
+<script>
+  import { notifications } from "@budibase/bbui"
+  import { apps, templates, licensing, groups } from "stores/portal"
+  import { onMount } from "svelte"
+  import { goto } from "@roxi/routify"
+
+  let loaded = false
+
+  onMount(async () => {
+    try {
+      // Always load latest
+      await apps.load()
+      await licensing.init()
+      await templates.load()
+
+      if ($licensing.groupsEnabled) {
+        await groups.actions.init()
+      }
+
+      if ($templates?.length === 0) {
+        notifications.error("There was a problem loading quick start templates")
+      }
+
+      // Go to new app page if no apps exists
+      if (!$apps.length) {
+        $goto("./create")
+      }
+    } catch (error) {
+      notifications.error("Error loading apps and templates")
+    }
+    loaded = true
+  })
+</script>
+
+{#if loaded}
+  <slot />
+{/if}

packages/builder/src/pages/builder/portal/apps/create.svelte

@@ -1,49 +1,17 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { url } from "@roxi/routify"
-  import {
+  import { Layout, Page, Button, Modal } from "@budibase/bbui"
-    Layout,
-    Page,
-    notifications,
-    Button,
-    Heading,
-    Body,
-    Modal,
-    Divider,
-    ActionButton,
-  } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
-  import { onMount } from "svelte"
+  import { apps, templates, licensing } from "stores/portal"
-  import { templates, licensing } from "stores/portal"
+  import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
 
-  let loaded = $templates?.length
   let template
   let creationModal = false
   let appLimitModal
   let creatingApp = false
 
-  const welcomeBody =
-    "Start from scratch or get a head start with one of our templates"
-  const createAppTitle = "Create new app"
-  const createAppButtonText = "Start from scratch"
-
-  onMount(async () => {
-    try {
-      await templates.load()
-      // always load latest
-      await licensing.init()
-      if ($templates?.length === 0) {
-        notifications.error(
-          "There was a problem loading quick start templates."
-        )
-      }
-    } catch (error) {
-      notifications.error("Error loading apps and templates")
-    }
-    loaded = true
-  })
-
   const initiateAppCreation = () => {
     if ($licensing?.usageMetrics?.apps >= 100) {
       appLimitModal.show()
@@ -70,58 +38,33 @@
   }
 </script>
 
-<Page wide>
+<Page>
-  <Layout noPadding gap="XL">
+  <Layout noPadding gap="L">
-    <span>
+    <Breadcrumbs>
-      <ActionButton
+      <Breadcrumb url={$url("./")} text="Apps" />
-        secondary
+      <Breadcrumb text="Create new app" />
-        icon={"ArrowLeft"}
+    </Breadcrumbs>
-        on:click={() => {
+    <Header title={$apps.length ? "Create new app" : "Create your first app"}>
-          $goto("../")
+      <div slot="buttons">
-        }}
+        <Button
-      >
+          dataCy="import-app-btn"
-        Back
+          size="M"
-      </ActionButton>
+          secondary
-    </span>
+          on:click={initiateAppImport}
-
+        >
-    <div class="title">
+          Import app
-      <div class="welcome">
+        </Button>
-        <Layout noPadding gap="XS">
+        <Button
-          <Heading size="L">{createAppTitle}</Heading>
+          dataCy="create-app-btn"
-          <Body size="M">
+          size="M"
-            {welcomeBody}
+          cta
-          </Body>
+          on:click={initiateAppCreation}
-        </Layout>
+        >
-
+          Start from scratch
-        <div class="buttons">
+        </Button>
-          <Button
-            dataCy="create-app-btn"
-            size="M"
-            icon="Add"
-            cta
-            on:click={initiateAppCreation}
-          >
-            {createAppButtonText}
-          </Button>
-          <Button
-            dataCy="import-app-btn"
-            icon="Import"
-            size="M"
-            quiet
-            secondary
-            on:click={initiateAppImport}
-          >
-            Import app
-          </Button>
-        </div>
       </div>
-    </div>
+    </Header>
-
+    <TemplateDisplay templates={$templates} />
-    <Divider />
-
-    {#if loaded && $templates?.length}
-      <TemplateDisplay templates={$templates} />
-    {/if}
   </Layout>
 </Page>
 

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -9,60 +9,34 @@
     notifications,
     Notification,
     Body,
+    Icon,
     Search,
   } from "@budibase/bbui"
-  import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
   import AppLimitModal from "components/portal/licensing/AppLimitModal.svelte"
 
   import { store, automationStore } from "builderStore"
   import { API } from "api"
   import { onMount } from "svelte"
-  import {
+  import { apps, auth, admin, licensing } from "stores/portal"
-    apps,
-    auth,
-    admin,
-    templates,
-    licensing,
-    groups,
-  } from "stores/portal"
   import { goto } from "@roxi/routify"
   import AppRow from "components/start/AppRow.svelte"
   import { AppStatus } from "constants"
   import Logo from "assets/bb-space-man.svg"
-  import AccessFilter from "./_components/AcessFilter.svelte"
 
   let sortBy = "name"
   let template
-  let selectedApp
   let creationModal
-  let updatingModal
   let appLimitModal
   let creatingApp = false
-  let loaded = $apps?.length || $templates?.length
   let searchTerm = ""
   let cloud = $admin.cloud
   let creatingFromTemplate = false
   let automationErrors
   let accessFilterList = null
 
-  const resolveWelcomeMessage = (auth, apps) => {
+  $: welcomeHeader = `Welcome ${$auth?.user?.firstName || "back"}`
-    const userWelcome = auth?.user?.firstName
-      ? `Welcome ${auth?.user?.firstName}!`
-      : "Welcome back!"
-    return apps?.length ? userWelcome : "Let's create your first app!"
-  }
-  $: welcomeHeader = resolveWelcomeMessage($auth, $apps)
-  $: welcomeBody = $apps?.length
-    ? "Manage your apps and get a head start with templates"
-    : "Start from scratch or get a head start with one of our templates"
-
-  $: createAppButtonText = $apps?.length
-    ? "Create new app"
-    : "Start from scratch"
-
   $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
   $: filteredApps = enrichedApps.filter(
     app =>
@@ -121,10 +95,9 @@
 
   const goToAutomationError = appId => {
     const params = new URLSearchParams({
-      tab: "Automation History",
       open: "error",
     })
-    $goto(`../overview/${appId}?${params.toString()}`)
+    $goto(`../overview/${appId}/automation-history?${params.toString()}`)
   }
 
   const errorCount = errors => {
@@ -221,10 +194,6 @@
     $goto(`../../app/${app.devId}`)
   }
 
-  const accessFilterAction = accessFilter => {
-    accessFilterList = accessFilter.detail
-  }
-
   function createAppFromTemplateUrl(templateKey) {
     // validate the template key just to make sure
     const templateParts = templateKey.split("/")
@@ -240,37 +209,21 @@
 
   onMount(async () => {
     try {
-      await apps.load()
-      await templates.load()
-      // always load latest
-      await licensing.init()
-
-      if ($licensing.groupsEnabled) {
-        await groups.actions.init()
-      }
-
-      if ($templates?.length === 0) {
-        notifications.error(
-          "There was a problem loading quick start templates."
-        )
-      }
       // If the portal is loaded from an external URL with a template param
       const initInfo = await auth.getInitInfo()
       if (initInfo?.init_template) {
         creatingFromTemplate = true
         createAppFromTemplateUrl(initInfo.init_template)
-        return
       }
     } catch (error) {
-      notifications.error("Error loading apps and templates")
+      notifications.error("Error getting init info")
     }
-    loaded = true
   })
 </script>
 
-<Page wide>
+{#if $apps.length}
-  <Layout noPadding gap="M">
+  <Page>
-    {#if loaded}
+    <Layout noPadding gap="L">
       {#each Object.keys(automationErrors || {}) as appId}
         <Notification
           wide
@@ -290,42 +243,15 @@
       {/each}
       <div class="title">
         <div class="welcome">
-          <Layout noPadding gap="XS">
+          <Layout noPadding gap="S">
             <Heading size="L">{welcomeHeader}</Heading>
             <Body size="M">
-              {welcomeBody}
+              Manage your apps and get a head start with templates
             </Body>
           </Layout>
-          {#if !$apps?.length}
-            <div class="buttons">
-              <Button
-                dataCy="create-app-btn"
-                size="M"
-                icon="Add"
-                cta
-                on:click={initiateAppCreation}
-              >
-                {createAppButtonText}
-              </Button>
-              <Button
-                dataCy="import-app-btn"
-                icon="Import"
-                size="L"
-                quiet
-                secondary
-                on:click={initiateAppImport}
-              >
-                Import app
-              </Button>
-            </div>
-          {/if}
         </div>
       </div>
 
-      {#if !$apps?.length && $templates?.length}
-        <TemplateDisplay templates={$templates} />
-      {/if}
-
       {#if enrichedApps.length}
         <Layout noPadding gap="L">
           <div class="title">
@@ -333,27 +259,23 @@
               <Button
                 dataCy="create-app-btn"
                 size="M"
-                icon="Add"
                 cta
                 on:click={initiateAppCreation}
               >
-                {createAppButtonText}
+                Create new app
               </Button>
               {#if $apps?.length > 0}
                 <Button
-                  icon="Experience"
                   size="M"
-                  quiet
                   secondary
                   on:click={$goto("/builder/portal/apps/templates")}
                 >
-                  Templates
+                  View templates
                 </Button>
               {/if}
               {#if !$apps?.length}
                 <Button
                   dataCy="import-app-btn"
-                  icon="Import"
                   size="L"
                   quiet
                   secondary
@@ -366,33 +288,23 @@
             {#if enrichedApps.length > 1}
               <div class="app-actions">
                 {#if cloud}
-                  <Button
+                  <Icon
-                    size="M"
+                    name="Download"
-                    icon="Export"
+                    hoverable
-                    quiet
-                    secondary
                     on:click={initiateAppsExport}
-                  >
-                    Export apps
-                  </Button>
-                {/if}
-                <div class="filter">
-                  {#if $licensing.groupsEnabled}
-                    <AccessFilter on:change={accessFilterAction} />
-                  {/if}
-                  <Select
-                    quiet
-                    autoWidth
-                    bind:value={sortBy}
-                    placeholder={null}
-                    options={[
-                      { label: "Sort by name", value: "name" },
-                      { label: "Sort by recently updated", value: "updated" },
-                      { label: "Sort by status", value: "status" },
-                    ]}
                   />
-                  <Search placeholder="Search" bind:value={searchTerm} />
+                {/if}
-                </div>
+                <Select
+                  autoWidth
+                  bind:value={sortBy}
+                  placeholder={null}
+                  options={[
+                    { label: "Sort by name", value: "name" },
+                    { label: "Sort by recently updated", value: "updated" },
+                    { label: "Sort by status", value: "status" },
+                  ]}
+                />
+                <Search placeholder="Search" bind:value={searchTerm} />
               </div>
             {/if}
           </div>
@@ -404,17 +316,17 @@
           </div>
         </Layout>
       {/if}
-    {/if}
 
-    {#if creatingFromTemplate}
+      {#if creatingFromTemplate}
-      <div class="empty-wrapper">
+        <div class="empty-wrapper">
-        <img class="img-logo img-size" alt="logo" src={Logo} />
+          <img class="img-logo img-size" alt="logo" src={Logo} />
-        <p>Creating your Budibase app from your selected template...</p>
+          <p>Creating your Budibase app from your selected template...</p>
-        <Spinner size="10" />
+          <Spinner size="10" />
-      </div>
+        </div>
-    {/if}
+      {/if}
-  </Layout>
+    </Layout>
-</Page>
+  </Page>
+{/if}
 
 <Modal
   bind:this={creationModal}
@@ -425,25 +337,9 @@
   <CreateAppModal {template} />
 </Modal>
 
-<Modal bind:this={updatingModal} padding={false} width="600px">
-  <UpdateAppModal app={selectedApp} />
-</Modal>
-
 <AppLimitModal bind:this={appLimitModal} />
 
 <style>
-  .appTable {
-    border-top: var(--border-light);
-  }
-  .app-actions {
-    display: flex;
-  }
-  .app-actions :global(> button) {
-    margin-right: 10px;
-  }
-  .title .welcome > .buttons {
-    padding-top: var(--spacing-l);
-  }
   .title {
     display: flex;
     flex-direction: row;
@@ -465,34 +361,20 @@
       display: none;
     }
   }
-  .filter {
+  .app-actions {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-xl);
   }
+
   .appTable {
-    display: grid;
+    display: flex;
-    grid-template-rows: auto;
+    flex-direction: column;
-    grid-template-columns: 1fr 1fr 1fr 1fr auto;
+    justify-content: flex-start;
-    align-items: center;
+    align-items: stretch;
-  }
+    gap: 24px;
-
-  .appTable.unlocked {
-    grid-template-columns: 1fr 1fr auto 1fr auto;
-  }
-
-  .appTable :global(> div) {
-    height: 70px;
-    display: grid;
-    align-items: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .appTable :global(> div) {
-    border-bottom: var(--border-light);
   }
 
   @media (max-width: 640px) {

packages/builder/src/pages/builder/portal/apps/templates.svelte

@@ -1,42 +1,18 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { url } from "@roxi/routify"
-  import { Layout, Page, notifications, ActionButton } from "@budibase/bbui"
+  import { Layout, Page } from "@budibase/bbui"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
-  import { onMount } from "svelte"
   import { templates } from "stores/portal"
-
+  import { Breadcrumbs, Breadcrumb, Header } from "components/portal/page"
-  let loaded = $templates?.length
-
-  onMount(async () => {
-    try {
-      await templates.load()
-      if ($templates?.length === 0) {
-        notifications.error(
-          "There was a problem loading quick start templates."
-        )
-      }
-    } catch (error) {
-      notifications.error("Error loading apps and templates")
-    }
-    loaded = true
-  })
 </script>
 
-<Page wide>
+<Page>
-  <Layout noPadding gap="XL">
+  <Layout noPadding gap="L">
-    <span>
+    <Breadcrumbs>
-      <ActionButton
+      <Breadcrumb url={$url("./")} text="Apps" />
-        secondary
+      <Breadcrumb text="Templates" />
-        icon={"ArrowLeft"}
+    </Breadcrumbs>
-        on:click={() => {
+    <Header title="Templates" />
-          $goto("../")
+    <TemplateDisplay templates={$templates} />
-        }}
-      >
-        Back
-      </ActionButton>
-    </span>
-    {#if loaded && $templates?.length}
-      <TemplateDisplay templates={$templates} />
-    {/if}
   </Layout>
 </Page>

packages/builder/src/pages/builder/portal/manage/_layout.svelte

@@ -1,20 +0,0 @@
-<script>
-  import { Page } from "@budibase/bbui"
-  import { auth } from "stores/portal"
-  import { page, redirect } from "@roxi/routify"
-
-  // Only admins allowed here
-  $: {
-    if (!$auth.isAdmin) {
-      $redirect("../")
-    }
-  }
-
-  $: wide = $page.path.includes("email/:template")
-</script>
-
-{#if $auth.isAdmin}
-  <Page maxWidth="90ch" {wide}>
-    <slot />
-  </Page>
-{/if}

packages/builder/src/pages/builder/portal/manage/email/_components/TemplateBindings.svelte

@@ -1,15 +0,0 @@
-<script>
-  import { Body, Menu, MenuItem, Detail } from "@budibase/bbui"
-
-  export let bindings
-  export let onBindingClick = () => {}
-</script>
-
-<Menu>
-  {#each bindings as binding}
-    <MenuItem on:click={() => onBindingClick(binding)}>
-      <Detail size="M">{binding.name}</Detail>
-      <Body size="XS">{binding.description}</Body>
-    </MenuItem>
-  {/each}
-</Menu>

packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte

@@ -1,264 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-  import {
-    ActionButton,
-    Button,
-    Layout,
-    Heading,
-    Icon,
-    Popover,
-    notifications,
-    List,
-    ListItem,
-    StatusLight,
-    Divider,
-    ActionMenu,
-    MenuItem,
-    Modal,
-  } from "@budibase/bbui"
-  import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
-  import { createPaginationStore } from "helpers/pagination"
-  import { users, apps, groups } from "stores/portal"
-  import { onMount } from "svelte"
-  import { RoleUtils } from "@budibase/frontend-core"
-  import { roles } from "stores/backend"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
-  import GroupIcon from "./_components/GroupIcon.svelte"
-  import AppAddModal from "./_components/AppAddModal.svelte"
-
-  export let groupId
-
-  let popoverAnchor
-  let popover
-  let searchTerm = ""
-  let prevSearch = undefined
-  let pageInfo = createPaginationStore()
-  let loaded = false
-  let editModal, deleteModal, appAddModal
-
-  $: page = $pageInfo.page
-  $: fetchUsers(page, searchTerm)
-  $: group = $groups.find(x => x._id === groupId)
-  $: filtered = $users.data
-  $: groupApps = $apps.filter(app =>
-    groups.actions.getGroupAppIds(group).includes(apps.getProdAppID(app.devId))
-  )
-  $: {
-    if (loaded && !group?._id) {
-      $goto("./")
-    }
-  }
-
-  async function fetchUsers(page, search) {
-    if ($pageInfo.loading) {
-      return
-    }
-    // need to remove the page if they've started searching
-    if (search && !prevSearch) {
-      pageInfo.reset()
-      page = undefined
-    }
-    prevSearch = search
-    try {
-      pageInfo.loading()
-      await users.search({ page, email: search })
-      pageInfo.fetched($users.hasNextPage, $users.nextPage)
-    } catch (error) {
-      notifications.error("Error getting user list")
-    }
-  }
-
-  const getRoleLabel = appId => {
-    const roleId = group?.roles?.[apps.getProdAppID(appId)]
-    const role = $roles.find(x => x._id === roleId)
-    return role?.name || "Custom role"
-  }
-
-  async function deleteGroup() {
-    try {
-      await groups.actions.delete(group)
-      notifications.success("User group deleted successfully")
-      $goto("./")
-    } catch (error) {
-      notifications.error(`Failed to delete user group`)
-    }
-  }
-
-  async function saveGroup(group) {
-    try {
-      await groups.actions.save(group)
-    } catch (error) {
-      notifications.error(`Failed to save user group`)
-    }
-  }
-
-  onMount(async () => {
-    try {
-      await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
-      loaded = true
-    } catch (error) {
-      notifications.error("Error fetching user group data")
-    }
-  })
-</script>
-
-{#if loaded}
-  <Layout noPadding gap="XL">
-    <div>
-      <ActionButton on:click={() => $goto("../groups")} icon="ArrowLeft">
-        Back
-      </ActionButton>
-    </div>
-
-    <Layout noPadding gap="M">
-      <div class="header">
-        <div class="title">
-          <GroupIcon {group} size="L" />
-          <div class="text-padding">
-            <Heading>{group?.name}</Heading>
-          </div>
-        </div>
-        <div>
-          <ActionMenu align="right">
-            <span slot="control">
-              <Icon hoverable name="More" />
-            </span>
-            <MenuItem icon="Refresh" on:click={() => editModal.show()}>
-              Edit
-            </MenuItem>
-            <MenuItem icon="Delete" on:click={() => deleteModal.show()}>
-              Delete
-            </MenuItem>
-          </ActionMenu>
-        </div>
-      </div>
-
-      <Divider />
-
-      <Layout noPadding gap="S">
-        <div class="header">
-          <Heading size="S">Users</Heading>
-          <div bind:this={popoverAnchor}>
-            <Button on:click={popover.show()} icon="UserAdd" cta>
-              Add user
-            </Button>
-          </div>
-          <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
-            <UserGroupPicker
-              bind:searchTerm
-              labelKey="email"
-              selected={group.users?.map(user => user._id)}
-              list={$users.data}
-              on:select={e => groups.actions.addUser(groupId, e.detail)}
-              on:deselect={e => groups.actions.removeUser(groupId, e.detail)}
-            />
-          </Popover>
-        </div>
-        <List>
-          {#if group?.users.length}
-            {#each group.users as user}
-              <ListItem
-                title={user.email}
-                on:click={() => $goto(`../users/${user._id}`)}
-                hoverable
-              >
-                <Icon
-                  on:click={e => {
-                    groups.actions.removeUser(groupId, user._id)
-                    e.stopPropagation()
-                  }}
-                  hoverable
-                  size="S"
-                  name="Close"
-                />
-              </ListItem>
-            {/each}
-          {:else}
-            <ListItem icon="UserGroup" title="This user group has no users" />
-          {/if}
-        </List>
-      </Layout>
-    </Layout>
-
-    <Layout noPadding gap="S">
-      <div class="header">
-        <Heading size="S">Apps</Heading>
-        <div>
-          <Button on:click={appAddModal.show()} icon="ExperienceAdd" cta>
-            Add app
-          </Button>
-        </div>
-      </div>
-      <List>
-        {#if groupApps.length}
-          {#each groupApps as app}
-            <ListItem
-              title={app.name}
-              icon={app?.icon?.name || "Apps"}
-              iconColor={app?.icon?.color || ""}
-              on:click={() => $goto(`../../overview/${app.devId}`)}
-              hoverable
-            >
-              <div class="title ">
-                <StatusLight
-                  square
-                  color={RoleUtils.getRoleColour(
-                    group.roles[apps.getProdAppID(app.devId)]
-                  )}
-                >
-                  {getRoleLabel(app.devId)}
-                </StatusLight>
-              </div>
-              <Icon
-                on:click={e => {
-                  groups.actions.removeApp(
-                    groupId,
-                    apps.getProdAppID(app.devId)
-                  )
-                  e.stopPropagation()
-                }}
-                hoverable
-                size="S"
-                name="Close"
-              />
-            </ListItem>
-          {/each}
-        {:else}
-          <ListItem icon="Apps" title="This user group has access to no apps" />
-        {/if}
-      </List>
-    </Layout>
-  </Layout>
-{/if}
-
-<Modal bind:this={editModal}>
-  <CreateEditGroupModal {group} {saveGroup} />
-</Modal>
-
-<Modal bind:this={appAddModal}>
-  <AppAddModal {group} />
-</Modal>
-
-<ConfirmDialog
-  bind:this={deleteModal}
-  title="Delete user group"
-  okText="Delete user group"
-  onOk={deleteGroup}
->
-  Are you sure you wish to delete <b>{group?.name}?</b>
-</ConfirmDialog>
-
-<style>
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-  .title {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-</style>

packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte

@@ -1,3 +0,0 @@
-<div style="float: right;">
-  <slot />
-</div>

packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte

@@ -0,0 +1,239 @@
+<script>
+  import { url, isActive, params, goto } from "@roxi/routify"
+  import {
+    Page,
+    Layout,
+    Button,
+    Icon,
+    ActionMenu,
+    MenuItem,
+    Helpers,
+    Input,
+    Modal,
+    notifications,
+  } from "@budibase/bbui"
+  import {
+    Content,
+    SideNav,
+    SideNavItem,
+    Breadcrumbs,
+    Breadcrumb,
+    Header,
+  } from "components/portal/page"
+  import { apps, auth, groups, overview } from "stores/portal"
+  import { AppStatus } from "constants"
+  import analytics, { Events, EventSource } from "analytics"
+  import { store } from "builderStore"
+  import AppLockModal from "components/common/AppLockModal.svelte"
+  import EditableIcon from "components/common/EditableIcon.svelte"
+  import { API } from "api"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import ExportAppModal from "components/start/ExportAppModal.svelte"
+  import { syncURLToState } from "../../../../../helpers/urlStateSync"
+  import * as routify from "@roxi/routify"
+  import { onDestroy } from "svelte"
+
+  // Keep URL and state in sync for selected screen ID
+  const stopSyncing = syncURLToState({
+    urlParam: "appId",
+    stateKey: "selectedAppId",
+    validate: id => $apps.some(app => app.devId === id),
+    fallbackUrl: "../../",
+    store: overview,
+    routify,
+  })
+
+  let exportModal
+  let deletionModal
+  let exportPublishedVersion = false
+  let deletionConfirmationAppName
+
+  $: app = $overview.selectedApp
+  $: appId = $overview.selectedAppId
+  $: initialiseApp(appId)
+  $: isPublished = app?.status === AppStatus.DEPLOYED
+  $: appLocked = !!app?.lockedBy
+  $: lockedByYou = $auth.user.email === app?.lockedBy?.email
+
+  const initialiseApp = async appId => {
+    try {
+      const pkg = await API.fetchAppPackage(appId)
+      await store.actions.initialise(pkg)
+      await API.syncApp(appId)
+    } catch (error) {
+      notifications.error("Error initialising app overview")
+      $goto("../../")
+    }
+  }
+
+  const viewApp = () => {
+    if (isPublished) {
+      analytics.captureEvent(Events.APP_VIEW_PUBLISHED, {
+        appId: $store.appId,
+        eventSource: EventSource.PORTAL,
+      })
+      window.open(`/app${app?.url}`, "_blank")
+    }
+  }
+
+  const editApp = () => {
+    if (appLocked && !lockedByYou) {
+      const identifier = app?.lockedBy?.firstName || app?.lockedBy?.email
+      notifications.warning(
+        `App locked by ${identifier}. Please allow lock to expire or have them unlock this app.`
+      )
+      return
+    }
+    $goto(`../../../app/${app.devId}`)
+  }
+
+  const exportApp = opts => {
+    exportPublishedVersion = !!opts?.published
+    exportModal.show()
+  }
+
+  const copyAppId = async () => {
+    await Helpers.copyToClipboard(app.prodId)
+    notifications.success("App ID copied to clipboard")
+  }
+
+  const deleteApp = async () => {
+    try {
+      await API.deleteApp(app?.devId)
+      notifications.success("App deleted successfully")
+      $goto("../")
+    } catch (err) {
+      notifications.error("Error deleting app")
+    }
+  }
+
+  onDestroy(() => {
+    stopSyncing()
+    store.actions.reset()
+  })
+</script>
+
+{#key appId}
+  <Page>
+    <Layout noPadding gap="L">
+      <Breadcrumbs>
+        <Breadcrumb url={$url("../")} text="Apps" />
+        <Breadcrumb text={app?.name} />
+      </Breadcrumbs>
+      <Header title={app?.name}>
+        <div slot="icon">
+          <EditableIcon
+            {app}
+            autoSave
+            size="XL"
+            name={app?.icon?.name || "Apps"}
+            color={app?.icon?.color}
+          />
+        </div>
+        <div slot="buttons">
+          <AppLockModal {app} />
+          <Button
+            size="M"
+            quiet
+            secondary
+            disabled={!isPublished}
+            on:click={viewApp}
+            dataCy="view-app"
+          >
+            View
+          </Button>
+          <Button
+            size="M"
+            cta
+            disabled={appLocked && !lockedByYou}
+            on:click={editApp}
+          >
+            Edit
+          </Button>
+          <ActionMenu align="right" dataCy="app-overview-menu-popover">
+            <span slot="control" class="app-overview-actions-icon">
+              <Icon hoverable name="More" />
+            </span>
+            <MenuItem
+              on:click={() => exportApp({ published: false })}
+              icon="DownloadFromCloud"
+            >
+              Export latest
+            </MenuItem>
+            {#if isPublished}
+              <MenuItem
+                on:click={() => exportApp({ published: true })}
+                icon="DownloadFromCloudOutline"
+              >
+                Export published
+              </MenuItem>
+              <MenuItem on:click={copyAppId} icon="Copy">Copy app ID</MenuItem>
+            {/if}
+            {#if !isPublished}
+              <MenuItem on:click={deletionModal.show} icon="Delete">
+                Delete
+              </MenuItem>
+            {/if}
+          </ActionMenu>
+        </div>
+      </Header>
+      <Content>
+        <SideNav slot="side-nav">
+          <SideNavItem
+            text="Overview"
+            url={$url("./overview")}
+            active={$isActive("./overview")}
+          />
+          <SideNavItem
+            text="Access"
+            url={$url("./access")}
+            active={$isActive("./access")}
+          />
+          <SideNavItem
+            text="Automation History"
+            url={$url("./automation-history")}
+            active={$isActive("./automation-history")}
+          />
+          <SideNavItem
+            text="Backups"
+            url={$url("./backups")}
+            active={$isActive("./backups")}
+          />
+          <SideNavItem
+            text="Name and URL"
+            url={$url("./name-and-url")}
+            active={$isActive("./name-and-url")}
+          />
+          <SideNavItem
+            text="Version"
+            url={$url("./version")}
+            active={$isActive("./version")}
+          />
+        </SideNav>
+        <slot />
+      </Content>
+    </Layout>
+  </Page>
+
+  <Modal bind:this={exportModal} padding={false}>
+    <ExportAppModal {app} published={exportPublishedVersion} />
+  </Modal>
+  <ConfirmDialog
+    bind:this={deletionModal}
+    title="Delete app"
+    okText="Delete"
+    onOk={deleteApp}
+    onCancel={() => (deletionConfirmationAppName = null)}
+    disabled={deletionConfirmationAppName !== app?.name}
+  >
+    Are you sure you want to delete <b>{app?.name}</b>?
+    <br />
+    Please enter the app name below to confirm.
+    <br /><br />
+    <Input
+      bind:value={deletionConfirmationAppName}
+      data-cy="delete-app-confirmation"
+      placeholder={app?.name}
+    />
+  </ConfirmDialog>
+{/key}

packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/EditableRoleRenderer.svelte

@@ -0,0 +1,26 @@
+<script>
+  import RoleSelect from "components/common/RoleSelect.svelte"
+  import { getContext } from "svelte"
+
+  const rolesContext = getContext("roles")
+
+  export let value
+  export let row
+</script>
+
+<div>
+  <RoleSelect
+    {value}
+    quiet
+    allowRemove
+    allowPublic={false}
+    on:change={e => rolesContext.updateRole(e.detail, row._id)}
+    on:remove={() => rolesContext.removeRole(row._id)}
+  />
+</div>
+
+<style>
+  div {
+    width: 100%;
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte

@@ -0,0 +1,253 @@
+<script>
+  import {
+    Layout,
+    Heading,
+    Body,
+    Button,
+    Modal,
+    notifications,
+    Pagination,
+    Divider,
+    Table,
+  } from "@budibase/bbui"
+  import { onMount, setContext } from "svelte"
+  import { users, groups, apps, licensing, overview } from "stores/portal"
+  import AssignmentModal from "./_components/AssignmentModal.svelte"
+  import { roles } from "stores/backend"
+  import { API } from "api"
+  import { fetchData } from "@budibase/frontend-core"
+  import EditableRoleRenderer from "./_components/EditableRoleRenderer.svelte"
+
+  const userSchema = {
+    email: {
+      type: "string",
+      width: "1fr",
+    },
+    role: {
+      displayName: "Access",
+      width: "150px",
+      borderLeft: true,
+    },
+  }
+  const groupSchema = {
+    name: {
+      type: "string",
+      width: "1fr",
+    },
+    role: {
+      displayName: "Access",
+      width: "150px",
+      borderLeft: true,
+    },
+  }
+  const customRenderers = [
+    {
+      column: "role",
+      component: EditableRoleRenderer,
+    },
+  ]
+
+  let assignmentModal
+  let appGroups
+  let appUsers
+
+  $: app = $overview.selectedApp
+  $: devAppId = app.devId
+  $: prodAppId = apps.getProdAppID(app.devId)
+  $: usersFetch = fetchData({
+    API,
+    datasource: {
+      type: "user",
+    },
+    options: {
+      query: {
+        appId: apps.getProdAppID(devAppId),
+      },
+    },
+  })
+  $: appUsers = getAppUsers($usersFetch.rows, prodAppId)
+  $: appGroups = getAppGroups($groups, prodAppId)
+
+  const getAppUsers = (users, appId) => {
+    return users.map(user => ({
+      ...user,
+      role: user.roles[Object.keys(user.roles).find(x => x === appId)],
+    }))
+  }
+
+  const getAppGroups = (allGroups, appId) => {
+    return allGroups
+      .filter(group => {
+        if (!group.roles) {
+          return false
+        }
+        return groups.actions.getGroupAppIds(group).includes(appId)
+      })
+      .map(group => ({
+        ...group,
+        role: group.roles[
+          groups.actions.getGroupAppIds(group).find(x => x === appId)
+        ],
+      }))
+  }
+
+  const updateRole = async (role, id) => {
+    // Check if this is a user or a group
+    if ($usersFetch.rows.some(user => user._id === id)) {
+      await updateUserRole(role, id)
+    } else {
+      await updateGroupRole(role, id)
+    }
+  }
+
+  const removeRole = async id => {
+    // Check if this is a user or a group
+    if ($usersFetch.rows.some(user => user._id === id)) {
+      await removeUserRole(id)
+    } else {
+      await removeGroupRole(id)
+    }
+  }
+
+  const updateUserRole = async (role, userId) => {
+    const user = $usersFetch.rows.find(user => user._id === userId)
+    if (!user) {
+      return
+    }
+    user.roles[prodAppId] = role
+    await users.save(user)
+    await usersFetch.refresh()
+  }
+
+  const removeUserRole = async userId => {
+    const user = $usersFetch.rows.find(user => user._id === userId)
+    if (!user) {
+      return
+    }
+    const filteredRoles = { ...user.roles }
+    delete filteredRoles[prodAppId]
+    await users.save({
+      ...user,
+      roles: {
+        ...filteredRoles,
+      },
+    })
+    await usersFetch.refresh()
+  }
+
+  const updateGroupRole = async (role, groupId) => {
+    const group = $groups.find(group => group._id === groupId)
+    if (!group) {
+      return
+    }
+    await groups.actions.addApp(group._id, prodAppId, role)
+    await usersFetch.refresh()
+  }
+
+  const removeGroupRole = async groupId => {
+    const group = $groups.find(group => group._id === groupId)
+    if (!group) {
+      return
+    }
+    await groups.actions.removeApp(group._id, prodAppId)
+    await usersFetch.refresh()
+  }
+
+  setContext("roles", {
+    updateRole,
+    removeRole,
+  })
+
+  onMount(async () => {
+    try {
+      await roles.fetch()
+    } catch (error) {
+      notifications.error(error)
+    }
+  })
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Access</Heading>
+    <Body>Assign users to your app and set their access</Body>
+  </Layout>
+  <Divider />
+  <Layout noPadding gap="L">
+    {#if $usersFetch.loaded}
+      <Layout noPadding gap="S">
+        <div class="title">
+          <Heading size="S">Users</Heading>
+          <Button secondary on:click={assignmentModal.show}>Assign user</Button>
+        </div>
+        <Table
+          customPlaceholder
+          data={appUsers}
+          schema={userSchema}
+          allowEditRows={false}
+          {customRenderers}
+        >
+          <div class="placeholder" slot="placeholder">
+            <Heading size="S">You have no users assigned yet</Heading>
+          </div>
+        </Table>
+        <div class="pagination">
+          <Pagination
+            page={$usersFetch.pageNumber + 1}
+            hasPrevPage={$usersFetch.hasPrevPage}
+            hasNextPage={$usersFetch.hasNextPage}
+            goToPrevPage={$usersFetch.loading ? null : usersFetch.prevPage}
+            goToNextPage={$usersFetch.loading ? null : usersFetch.nextPage}
+          />
+        </div>
+      </Layout>
+    {/if}
+
+    {#if $usersFetch.loaded && $licensing.groupsEnabled && appGroups.length}
+      <Layout noPadding gap="S">
+        <div class="title">
+          <Heading size="S">Groups</Heading>
+          <Button secondary on:click={assignmentModal.show}>
+            Assign group
+          </Button>
+        </div>
+        <Table
+          customPlaceholder
+          data={appGroups}
+          schema={groupSchema}
+          allowEditRows={false}
+          {customRenderers}
+        >
+          <div class="placeholder" slot="placeholder">
+            <Heading size="S">You have no groups assigned yet</Heading>
+          </div>
+        </Table>
+      </Layout>
+    {/if}
+  </Layout>
+</Layout>
+
+<Modal bind:this={assignmentModal}>
+  <AssignmentModal {app} {appUsers} on:update={usersFetch.refresh} />
+</Modal>
+
+<style>
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+  .placeholder {
+    flex: 1 1 auto;
+    display: grid;
+    place-items: center;
+    text-align: center;
+  }
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: calc(-1 * var(--spacing-s));
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/HistoryDetailsPanel.svelte

@@ -0,0 +1,82 @@
+<script>
+  import {
+    Layout,
+    Body,
+    Button,
+    InlineAlert,
+    Heading,
+    Icon,
+  } from "@budibase/bbui"
+  import StatusRenderer from "./StatusRenderer.svelte"
+  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
+  import { goto } from "@roxi/routify"
+  import { automationStore } from "builderStore"
+
+  export let history
+  export let appId
+  export let close
+  const STOPPED_ERROR = "stopped_error"
+
+  $: exists = $automationStore.automations?.find(
+    auto => auto._id === history?.automationId
+  )
+</script>
+
+{#if history}
+  <Layout noPadding>
+    <div class="controls">
+      <StatusRenderer value={history.status} />
+      <Icon hoverable name="Close" on:click={close} />
+    </div>
+    <Layout noPadding gap="XS">
+      <Heading>{history.automationName}</Heading>
+      <DateTimeRenderer value={history.createdAt} />
+    </Layout>
+    {#if history.status === STOPPED_ERROR}
+      <div class="cron-error">
+        <InlineAlert
+          type="error"
+          header="CRON automation disabled"
+          message="Fix the error and re-publish your app to re-activate."
+        />
+      </div>
+    {/if}
+    {#if exists}
+      <div>
+        <Button
+          secondary
+          on:click={() => {
+            $goto(`../../../../app/${appId}/automate/${history.automationId}`)
+          }}
+        >
+          Edit automation
+        </Button>
+      </div>
+    {/if}
+    {#key history}
+      <div class="history">
+        <TestDisplay testResults={history} width="100%" />
+      </div>
+    {/key}
+  </Layout>
+{:else}
+  <Body>No details found</Body>
+{/if}
+
+<style>
+  .controls {
+    display: flex;
+    gap: var(--spacing-s);
+    justify-content: space-between;
+    align-items: center;
+  }
+  .cron-error {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+  .history {
+    margin: 0 -30px;
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { Badge } from "@budibase/bbui"
+  export let value
+
+  $: isError = !value || value.toLowerCase() === "error"
+  $: isStoppedError = value?.toLowerCase() === "stopped_error"
+  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
+  $: info = getInfo(isError, isStopped)
+
+  const getInfo = (error, stopped) => {
+    if (error) {
+      return { color: "red", message: "Error" }
+    } else if (stopped) {
+      return { color: "yellow", message: "Stopped" }
+    } else {
+      return { color: "green", message: "Success" }
+    }
+  }
+</script>
+
+<Badge
+  green={info.color === "green"}
+  red={info.color === "red"}
+  yellow={info.color === "yellow"}
+>
+  {info.message}
+</Badge>

packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte

@@ -1,21 +1,29 @@
 <script>
-  import { Layout, Table, Select, Pagination, Button } from "@budibase/bbui"
+  import {
+    Layout,
+    Table,
+    Select,
+    Pagination,
+    Button,
+    Body,
+    Heading,
+    Divider,
+  } from "@budibase/bbui"
   import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import StatusRenderer from "./StatusRenderer.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.svelte"
-  import HistoryDetailsPanel from "./HistoryDetailsPanel.svelte"
+  import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
   import { automationStore } from "builderStore"
   import { createPaginationStore } from "helpers/pagination"
-  import { onMount } from "svelte"
+  import { getContext, onDestroy, onMount } from "svelte"
   import dayjs from "dayjs"
-  import { auth, licensing, admin } from "stores/portal"
+  import { auth, licensing, admin, overview } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
+  import Portal from "svelte-portal"
 
   const ERROR = "error",
     SUCCESS = "success",
     STOPPED = "stopped"
-  export let app
+  const sidePanel = getContext("side-panel")
-
-  $: licensePlan = $auth.user?.license?.plan
 
   let pageInfo = createPaginationStore()
   let runHistory = null
@@ -25,7 +33,10 @@
   let automationId = null
   let status = null
   let timeRange = null
+  let loaded = false
 
+  $: licensePlan = $auth.user?.license?.plan
+  $: app = $overview.selectedApp
   $: page = $pageInfo.page
   $: fetchLogs(automationId, status, page, timeRange)
 
@@ -47,8 +58,8 @@
 
   const runHistorySchema = {
     status: { displayName: "Status" },
-    createdAt: { displayName: "Time" },
     automationName: { displayName: "Automation" },
+    createdAt: { displayName: "Time" },
   }
 
   const customRenderers = [
@@ -56,7 +67,16 @@
     { column: "status", component: StatusRenderer },
   ]
 
-  async function fetchLogs(automationId, status, page, timeRange) {
+  async function fetchLogs(
+    automationId,
+    status,
+    page,
+    timeRange,
+    force = false
+  ) {
+    if (!force && !loaded) {
+      return
+    }
     let startDate = null
     if (timeRange) {
       const [length, units] = timeRange.split("-")
@@ -101,159 +121,140 @@
 
   function viewDetails({ detail }) {
     selectedHistory = detail
-    showPanel = true
+    sidePanel.open()
   }
 
   onMount(async () => {
     await automationStore.actions.fetch()
     const params = new URLSearchParams(window.location.search)
     const shouldOpen = params.get("open") === ERROR
-    // open with errors, open panel for latest
     if (shouldOpen) {
       status = ERROR
     }
-    await automationStore.actions.fetch()
-    await fetchLogs(null, status)
-    if (shouldOpen) {
-      viewDetails({ detail: runHistory[0] })
-    }
     automationOptions = []
     for (let automation of $automationStore.automations) {
       automationOptions.push({ value: automation._id, label: automation.name })
     }
+    await fetchLogs(automationId, status, 0, timeRange, true)
+    // Open the first automation info if one exists
+    if (shouldOpen && runHistory?.[0]) {
+      viewDetails({ detail: runHistory[0] })
+    }
+    loaded = true
+  })
+
+  onDestroy(() => {
+    sidePanel.close()
   })
 </script>
 
-<div class="root" class:panelOpen={showPanel}>
+<Layout noPadding>
-  <Layout noPadding gap="M" alignContent="start">
+  <Layout gap="XS" noPadding>
-    <div class="search">
+    <Heading>Automation History</Heading>
-      <div class="select">
+    <Body>View the automations your app has executed</Body>
-        <Select
+  </Layout>
-          placeholder="All automations"
+  <Divider />
-          label="Automation"
+
-          bind:value={automationId}
+  <div class="search">
-          options={automationOptions}
+    <div class="select">
-        />
+      <Select
-      </div>
+        placeholder="All"
-      <div class="select">
+        label="Status"
-        <Select
+        bind:value={status}
-          placeholder="All"
+        options={statusOptions}
-          label="Date range"
+      />
-          bind:value={timeRange}
-          options={timeOptions}
-          isOptionEnabled={x => {
-            if (licensePlan?.type === Constants.PlanType.FREE) {
-              return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
-            } else if (licensePlan?.type === Constants.PlanType.TEAM) {
-              return ["90-d"].indexOf(x.value) < 0
-            } else if (licensePlan?.type === Constants.PlanType.PRO) {
-              return ["30-d", "90-d"].indexOf(x.value) < 0
-            }
-            return true
-          }}
-        />
-      </div>
-      <div class="select">
-        <Select
-          placeholder="All status"
-          label="Status"
-          bind:value={status}
-          options={statusOptions}
-        />
-      </div>
-      {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
-        <div class="pro-upgrade">
-          <div class="pro-copy">Expand your automation log history</div>
-          <Button primary newStyles on:click={$licensing.goToUpgradePage()}>
-            Upgrade
-          </Button>
-        </div>
-      {/if}
     </div>
-    {#if runHistory}
+    <div class="select">
-      <div>
+      <Select
-        <Table
+        placeholder="All"
-          on:click={viewDetails}
+        label="Automation"
-          schema={runHistorySchema}
+        bind:value={automationId}
-          allowSelectRows={false}
+        options={automationOptions}
-          allowEditColumns={false}
+      />
-          allowEditRows={false}
+    </div>
-          data={runHistory}
+    <div class="select">
-          {customRenderers}
+      <Select
-          placeholderText="No history found"
+        placeholder="All"
-          border={false}
+        label="Date range"
-        />
+        bind:value={timeRange}
-        <div class="pagination">
+        options={timeOptions}
-          <Pagination
+        isOptionEnabled={x => {
-            page={$pageInfo.pageNumber}
+          if (licensePlan?.type === Constants.PlanType.FREE) {
-            hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+            return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
-            hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+          } else if (licensePlan?.type === Constants.PlanType.TEAM) {
-            goToPrevPage={pageInfo.prevPage}
+            return ["90-d"].indexOf(x.value) < 0
-            goToNextPage={pageInfo.nextPage}
+          } else if (licensePlan?.type === Constants.PlanType.PRO) {
-          />
+            return ["30-d", "90-d"].indexOf(x.value) < 0
-        </div>
+          }
+          return true
+        }}
+      />
+    </div>
+    {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
+      <div class="pro-upgrade">
+        <Button secondary on:click={$licensing.goToUpgradePage()}>
+          Get more history
+        </Button>
       </div>
     {/if}
-  </Layout>
+  </div>
-  <div class="panel" class:panelShow={showPanel}>
+
+  {#if runHistory}
+    <div>
+      <Table
+        on:click={viewDetails}
+        schema={runHistorySchema}
+        allowSelectRows={false}
+        allowEditColumns={false}
+        allowEditRows={false}
+        data={runHistory}
+        {customRenderers}
+        placeholderText="No history found"
+        border={false}
+      />
+      <div class="pagination">
+        <Pagination
+          page={$pageInfo.pageNumber}
+          hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+          hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+          goToPrevPage={pageInfo.prevPage}
+          goToNextPage={pageInfo.nextPage}
+        />
+      </div>
+    </div>
+  {/if}
+</Layout>
+
+{#if selectedHistory}
+  <Portal target="#side-panel">
     <HistoryDetailsPanel
       appId={app.devId}
       bind:history={selectedHistory}
-      close={() => {
+      close={sidePanel.close}
-        showPanel = false
-      }}
     />
-  </div>
+  </Portal>
-</div>
+{/if}
 
 <style>
-  .root {
-    display: grid;
-    grid-template-columns: 1fr;
-    height: 100%;
-    padding: var(--spectrum-alias-grid-gutter-medium)
-      var(--spectrum-alias-grid-gutter-large);
-  }
-
   .search {
     display: flex;
     gap: var(--spacing-xl);
     width: 100%;
     align-items: flex-end;
   }
-
   .select {
     flex-basis: 150px;
   }
-
   .pagination {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     margin-top: var(--spacing-xl);
   }
-
-  .panel {
-    display: none;
-    margin-top: calc(-1 * var(--spectrum-alias-grid-gutter-medium));
-  }
-
-  .panelShow {
-    display: block;
-  }
-
-  .panelOpen {
-    grid-template-columns: auto 420px;
-  }
-
   .pro-upgrade {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     flex: 1;
   }
-
-  .pro-copy {
-    margin-right: var(--spacing-l);
-  }
 </style>

packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte

@@ -16,20 +16,19 @@
     Table,
     Page,
   } from "@budibase/bbui"
-  import { backups, licensing, auth, admin } from "stores/portal"
+  import { backups, licensing, auth, admin, overview } from "stores/portal"
   import { createPaginationStore } from "helpers/pagination"
-  import AppSizeRenderer from "./AppSizeRenderer.svelte"
-  import CreateBackupModal from "./CreateBackupModal.svelte"
-  import ActionsRenderer from "./ActionsRenderer.svelte"
   import DateRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import UserRenderer from "./UserRenderer.svelte"
+  import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
-  import StatusRenderer from "./StatusRenderer.svelte"
+  import CreateBackupModal from "./_components/CreateBackupModal.svelte"
-  import TypeRenderer from "./TypeRenderer.svelte"
+  import ActionsRenderer from "./_components/ActionsRenderer.svelte"
-  import NameRenderer from "./NameRenderer.svelte"
+  import UserRenderer from "./_components/UserRenderer.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.svelte"
+  import TypeRenderer from "./_components/TypeRenderer.svelte"
+  import NameRenderer from "./_components/NameRenderer.svelte"
   import BackupsDefault from "assets/backups-default.png"
   import { BackupTrigger, BackupType } from "constants/backend/backups"
   import { onMount } from "svelte"
-  export let app
 
   let backupData = null
   let modal
@@ -61,6 +60,7 @@
     },
   ]
 
+  $: app = $overview.selectedApp
   $: page = $pageInfo.page
   $: fetchBackups(filterOpt, page, startDate, endDate)
 
@@ -165,75 +165,62 @@
     }
   }
 
-  onMount(() => {
+  onMount(async () => {
-    fetchBackups(filterOpt, page, startDate, endDate)
+    await fetchBackups(filterOpt, page, startDate, endDate)
     loaded = true
   })
 </script>
 
-<div class="root">
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <div class="title">
+      <Heading>Backups</Heading>
+      {#if !$licensing.backupsEnabled}
+        <Tags>
+          <Tag icon="LockClosed">Pro plan</Tag>
+        </Tags>
+      {/if}
+    </div>
+    <Body>Back up your apps and restore them to their previous state</Body>
+  </Layout>
+  <Divider />
+
   {#if !$licensing.backupsEnabled}
-    <Page wide={false}>
+    {#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
-      <Layout gap="XS" noPadding>
+      <Body>Contact your account holder to upgrade your plan.</Body>
-        <div class="title">
+    {/if}
-          <Heading size="M">Backups</Heading>
+    <div class="pro-buttons">
-          <Tags>
+      {#if $auth.accountPortalAccess}
-            <Tag icon="LockClosed">Pro plan</Tag>
+        <Button
-          </Tags>
+          primary
-        </div>
+          disabled={!$auth.accountPortalAccess && $admin.cloud}
+          on:click={$licensing.goToUpgradePage()}
+        >
+          Upgrade
+        </Button>
+      {/if}
+      <Button
+        secondary
+        on:click={() => {
+          window.open("https://budibase.com/pricing/", "_blank")
+        }}
+      >
+        View plans
+      </Button>
+    </div>
+  {:else if !backupData?.length && loaded && !filterOpt && !startDate}
+    <div class="center">
+      <Layout noPadding gap="S" justifyItems="center">
+        <img height="130px" src={BackupsDefault} alt="BackupsDefault" />
+        <Layout noPadding gap="XS">
+          <Heading>You have no backups yet</Heading>
+          <Body>You can manually back up your app any time</Body>
+        </Layout>
         <div>
-          <Body>
+          <Button on:click={modal.show} cta>Create backup</Button>
-            Back up your apps and restore them to their previous state.
-            {#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
-              Contact your account holder to upgrade your plan.
-            {/if}
-          </Body>
-        </div>
-        <Divider />
-        <div class="pro-buttons">
-          {#if $auth.accountPortalAccess}
-            <Button
-              newStyles
-              primary
-              disabled={!$auth.accountPortalAccess && $admin.cloud}
-              on:click={$licensing.goToUpgradePage()}
-            >
-              Upgrade
-            </Button>
-          {/if}
-          <!--Show the view plans button-->
-          <Button
-            newStyles
-            secondary
-            on:click={() => {
-              window.open("https://budibase.com/pricing/", "_blank")
-            }}
-          >
-            View plans
-          </Button>
         </div>
       </Layout>
-    </Page>
+    </div>
-  {:else if backupData?.length === 0 && !loaded && !filterOpt && !startDate}
-    <Page wide={false}>
-      <div class="align">
-        <img
-          width="220px"
-          height="130px"
-          src={BackupsDefault}
-          alt="BackupsDefault"
-        />
-        <Layout gap="S">
-          <Heading>You have no backups yet</Heading>
-          <div class="opacity">
-            <Body size="S">You can manually backup your app any time</Body>
-          </div>
-          <div class="padding">
-            <Button on:click={modal.show} cta>Create Backup</Button>
-          </div>
-        </Layout>
-      </div>
-    </Page>
   {:else if loaded}
     <Layout noPadding gap="M" alignContent="start">
       <div class="search">
@@ -247,23 +234,21 @@
             bind:value={filterOpt}
           />
         </div>
-        <div>
+        <DatePicker
-          <DatePicker
+          range={true}
-            range={true}
+          label="Date Range"
-            label={"Filter Range"}
+          on:change={e => {
-            on:change={e => {
+            if (e.detail[0].length > 1) {
-              if (e.detail[0].length > 1) {
+              startDate = e.detail[0][0].toISOString()
-                startDate = e.detail[0][0].toISOString()
+              endDate = e.detail[0][1].toISOString()
-                endDate = e.detail[0][1].toISOString()
+            }
-              }
+          }}
-            }}
+        />
-          />
-        </div>
 
         <div class="split-buttons">
-          <ActionButton on:click={modal.show} icon="SaveAsFloppy"
+          <ActionButton on:click={modal.show} icon="SaveAsFloppy">
-            >Create new backup</ActionButton
+            Create new backup
-          >
+          </ActionButton>
         </div>
       </div>
       <div class="table">
@@ -291,19 +276,19 @@
       </div>
     </Layout>
   {/if}
-</div>
+</Layout>
 
 <Modal bind:this={modal}>
   <CreateBackupModal {createManualBackup} />
 </Modal>
 
 <style>
-  .root {
+  .title {
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr;
+    flex-direction: row;
-    height: 100%;
+    justify-content: flex-start;
-    padding: var(--spectrum-alias-grid-gutter-medium)
+    align-items: center;
-      var(--spectrum-alias-grid-gutter-large);
+    gap: var(--spacing-xl);
   }
 
   .search {
@@ -314,7 +299,7 @@
   }
 
   .select {
-    flex-basis: 100px;
+    flex-basis: 160px;
   }
 
   .pagination {
@@ -329,7 +314,6 @@
     align-items: center;
     justify-content: flex-end;
     flex: 1;
-    gap: var(--spacing-xl);
   }
 
   .title {
@@ -339,11 +323,6 @@
     gap: var(--spacing-m);
   }
 
-  .align {
-    margin-top: 5%;
-    text-align: center;
-  }
-
   .pro-buttons {
     display: flex;
     gap: var(--spacing-m);
@@ -352,4 +331,9 @@
   .table {
     overflow-x: scroll;
   }
+
+  .center {
+    text-align: center;
+    display: contents;
+  }
 </style>

packages/builder/src/pages/builder/portal/overview/[appId]/index.svelte

@@ -0,0 +1,4 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  $redirect("./overview")
+</script>

packages/builder/src/pages/builder/portal/overview/[appId]/name-and-url.svelte

@@ -0,0 +1,77 @@
+<script>
+  import {
+    Layout,
+    Divider,
+    Heading,
+    Body,
+    Button,
+    Label,
+    Modal,
+    Icon,
+  } from "@budibase/bbui"
+  import { AppStatus } from "constants"
+  import { overview } from "stores/portal"
+  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
+
+  let updatingModal
+
+  $: app = $overview.selectedApp
+  $: appUrl = `${window.origin}/app${app?.url}`
+  $: appDeployed = app?.status === AppStatus.DEPLOYED
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Name and URL</Heading>
+    <Body>Edit your app's name and URL</Body>
+  </Layout>
+  <Divider />
+
+  <Layout noPadding gap="XXS">
+    <Label size="L">Name</Label>
+    <Body>{app?.name}</Body>
+  </Layout>
+
+  <Layout noPadding gap="XS">
+    <Label size="L">Icon</Label>
+    <div class="icon">
+      <Icon
+        size="L"
+        name={app?.icon?.name || "Apps"}
+        color={app?.icon?.color}
+      />
+    </div>
+  </Layout>
+
+  <Layout noPadding gap="XXS">
+    <Label size="L">URL</Label>
+    <Body>{appUrl}</Body>
+  </Layout>
+
+  <div>
+    <Button
+      cta
+      on:click={() => {
+        updatingModal.show()
+      }}
+      disabled={appDeployed}
+      tooltip={appDeployed
+        ? "You must unpublish your app to make changes to these settings"
+        : null}
+      icon={appDeployed ? "HelpOutline" : null}
+    >
+      Edit
+    </Button>
+  </div>
+</Layout>
+
+<Modal bind:this={updatingModal} padding={false} width="600px">
+  <UpdateAppModal app={$overview.selectedApp} />
+</Modal>
+
+<style>
+  .icon {
+    display: flex;
+    justify-content: flex-start;
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte

@@ -1,47 +1,54 @@
 <script>
+  import { onMount } from "svelte"
   import DashCard from "components/common/DashCard.svelte"
   import { AppStatus } from "constants"
-  import { Icon, Heading, Link, Avatar, Layout, Body } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import {
+    Icon,
+    Heading,
+    Link,
+    Avatar,
+    Layout,
+    Body,
+    notifications,
+  } from "@budibase/bbui"
   import { store } from "builderStore"
   import clientPackage from "@budibase/client/package.json"
   import { processStringSync } from "@budibase/string-templates"
-  import { users, auth, apps, groups } from "stores/portal"
+  import { users, auth, apps, groups, overview } from "stores/portal"
   import { createEventDispatcher } from "svelte"
   import { fetchData } from "@budibase/frontend-core"
   import { API } from "api"
-  import GroupIcon from "../../manage/groups/_components/GroupIcon.svelte"
+  import GroupIcon from "../../users/groups/_components/GroupIcon.svelte"
-
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  export let app
+  import { checkIncomingDeploymentStatus } from "components/deploy/utils"
-  export let deployments
-  export let navigateTab
 
   const dispatch = createEventDispatcher()
-  const appUsersFetch = fetchData({
+
+  let appEditor
+  let unpublishModal
+  let deployments
+
+  $: app = $overview.selectedApp
+  $: devAppId = app.devId
+  $: prodAppId = apps.getProdAppID(devAppId)
+  $: appUsersFetch = fetchData({
     API,
     datasource: {
       type: "user",
     },
     options: {
       query: {
-        appId: apps.getProdAppID(app.devId),
+        appId: apps.getProdAppID(devAppId),
       },
     },
   })
-
-  let appEditor
-
   $: updateAvailable = clientPackage.version !== $store.version
   $: isPublished = app?.status === AppStatus.DEPLOYED
   $: appEditorId = !app?.updatedBy ? $auth.user._id : app?.updatedBy
   $: appEditorText = appEditor?.firstName || appEditor?.email
   $: fetchAppEditor(appEditorId)
   $: appUsers = $appUsersFetch.rows || []
-  $: appUsersFetch.update({
-    query: {
-      appId: apps.getProdAppID(app.devId),
-    },
-  })
-  $: prodAppId = apps.getProdAppID(app.devId)
   $: appGroups = $groups.filter(group => {
     if (!group.roles) {
       return false
@@ -49,10 +56,6 @@
     return groups.actions.getGroupAppIds(group).includes(prodAppId)
   })
 
-  const unpublishApp = () => {
-    dispatch("unpublish", app)
-  }
-
   async function fetchAppEditor(editorId) {
     appEditor = await users.get(editorId)
   }
@@ -64,10 +67,45 @@
 
     return initials === "" ? user.email[0] : initials
   }
+
+  const confirmUnpublishApp = async () => {
+    try {
+      await API.unpublishApp(app.prodId)
+      await apps.load()
+      notifications.success("App unpublished successfully")
+    } catch (err) {
+      notifications.error("Error unpublishing app")
+    }
+  }
+
+  const reviewPendingDeployments = (deployments, newDeployments) => {
+    if (deployments?.length > 0) {
+      const pending = checkIncomingDeploymentStatus(deployments, newDeployments)
+      if (pending.length) {
+        notifications.warning(
+          "Deployment has been queued and will be processed shortly"
+        )
+      }
+    }
+  }
+  async function fetchDeployments() {
+    try {
+      const newDeployments = await API.getAppDeployments()
+      reviewPendingDeployments(deployments, newDeployments)
+      return newDeployments
+    } catch (err) {
+      console.log(err)
+      notifications.error("Error fetching deployment history")
+    }
+  }
+
+  onMount(async () => {
+    deployments = await fetchDeployments()
+  })
 </script>
 
 <div class="overview-tab">
-  <Layout paddingX="XXL" paddingY="XXL" gap="XL">
+  <Layout noPadding gap="XL">
     <div class="top">
       <DashCard title={"App Status"} dataCy={"app-status"}>
         <div class="status-content">
@@ -77,7 +115,7 @@
               <span>Published</span>
             {:else}
               <Icon name="GlobeStrike" size="XL" disabled={true} />
-              <span class="disabled"> Unpublished </span>
+              <span class="disabled">Unpublished</span>
             {/if}
           </div>
 
@@ -92,7 +130,7 @@
                 }
               )}
               {#if isPublished}
-                - <Link on:click={unpublishApp}>Unpublish</Link>
+                - <Link on:click={unpublishModal.show}>Unpublish</Link>
               {/if}
             {/if}
             {#if !deployments?.length}
@@ -127,10 +165,10 @@
         </DashCard>
       {/if}
       <DashCard
-        title={"App Version"}
+        title={"Version"}
         showIcon={true}
         action={() => {
-          navigateTab("Settings")
+          $goto("./version")
         }}
         dataCy={"app-version"}
       >
@@ -142,9 +180,7 @@
               -
               <Link
                 on:click={() => {
-                  if (typeof navigateTab === "function") {
+                  $goto("../version")
-                    navigateTab("Settings")
-                  }
                 }}
               >
                 Update
@@ -160,7 +196,7 @@
           title={"Access"}
           showIcon={true}
           action={() => {
-            navigateTab("Access")
+            $goto("./access")
           }}
           dataCy={"access"}
         >
@@ -211,7 +247,7 @@
         <DashCard
           title={"Automation History"}
           action={() => {
-            navigateTab("Automation History")
+            $goto("../automation-history")
           }}
           dataCy={"automation-history"}
         >
@@ -237,7 +273,7 @@
         <DashCard
           title={"Backups"}
           action={() => {
-            navigateTab("Backups")
+            $goto("../backups")
           }}
           dataCy={"backups"}
         >
@@ -248,6 +284,16 @@
   </Layout>
 </div>
 
+<ConfirmDialog
+  bind:this={unpublishModal}
+  title="Confirm unpublish"
+  okText="Unpublish app"
+  onOk={confirmUnpublishApp}
+  dataCy={"unpublish-modal"}
+>
+  Are you sure you want to unpublish the app <b>{app?.name}</b>?
+</ConfirmDialog>
+
 <style>
   .overview-tab {
     display: grid;
@@ -256,7 +302,7 @@
   .overview-tab .top {
     display: grid;
     grid-gap: var(--spectrum-alias-grid-gutter-medium);
-    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   }
 
   .access-tab-content {

packages/builder/src/pages/builder/portal/overview/[appId]/version.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { Layout, Heading, Body, Divider, Button } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import clientPackage from "@budibase/client/package.json"
+  import VersionModal from "components/deploy/VersionModal.svelte"
+
+  let versionModal
+
+  $: updateAvailable = clientPackage.version !== $store.version
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading>Version</Heading>
+    <Body>See the current version of your app and check for updates</Body>
+  </Layout>
+  <Divider />
+  {#if updateAvailable}
+    <Body>
+      The app is currently using version <strong>{$store.version}</strong>
+      but version <strong>{clientPackage.version}</strong> is available.
+      <br />
+      Updates can contain new features, performance improvements and bug fixes.
+    </Body>
+    <div>
+      <Button cta on:click={versionModal.show}>Update app</Button>
+    </div>
+  {:else}
+    <Body>
+      The app is currently using version <strong>{$store.version}</strong>.
+      <br />
+      You're running the latest!
+    </Body>
+    <div>
+      <Button secondary on:click={versionModal.show}>Revert app</Button>
+    </div>
+  {/if}
+</Layout>
+
+<VersionModal bind:this={versionModal} hideIcon={true} />

packages/builder/src/pages/builder/portal/overview/[application]/index.svelte

@@ -1,417 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-  import {
-    Layout,
-    Page,
-    Button,
-    ActionButton,
-    ButtonGroup,
-    Heading,
-    Tab,
-    Tabs,
-    notifications,
-    ProgressCircle,
-    Input,
-    ActionMenu,
-    MenuItem,
-    Icon,
-    Helpers,
-    Modal,
-  } from "@budibase/bbui"
-  import OverviewTab from "../_components/OverviewTab.svelte"
-  import SettingsTab from "../_components/SettingsTab.svelte"
-  import AccessTab from "../_components/AccessTab.svelte"
-  import { API } from "api"
-  import { store } from "builderStore"
-  import { apps, auth, groups } from "stores/portal"
-  import analytics, { Events, EventSource } from "analytics"
-  import { AppStatus } from "constants"
-  import AppLockModal from "components/common/AppLockModal.svelte"
-  import EditableIcon from "components/common/EditableIcon.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import HistoryTab from "components/portal/overview/automation/HistoryTab.svelte"
-  import ExportAppModal from "components/start/ExportAppModal.svelte"
-  import { checkIncomingDeploymentStatus } from "components/deploy/utils"
-  import { onDestroy, onMount } from "svelte"
-  import BackupsTab from "components/portal/overview/backups/BackupsTab.svelte"
-
-  export let application
-
-  let loaded = false
-  let deletionModal
-  let unpublishModal
-  let exportModal
-  let appName = ""
-  let deployments = []
-  let published
-
-  // App
-  $: filteredApps = $apps.filter(app => app.devId === application)
-  $: selectedApp = filteredApps?.length ? filteredApps[0] : null
-  $: loaded && !selectedApp && backToAppList()
-  $: isPublished =
-    selectedApp?.status === AppStatus.DEPLOYED && latestDeployments?.length > 0
-  $: appUrl = `${window.origin}/app${selectedApp?.url}`
-
-  // Locking
-  $: lockedBy = selectedApp?.lockedBy
-  $: lockedByYou = $auth.user.email === lockedBy?.email
-  $: lockIdentifer = `${
-    lockedBy && Object.prototype.hasOwnProperty.call(lockedBy, "firstName")
-      ? lockedBy?.firstName
-      : lockedBy?.email
-  }`
-
-  // App deployments
-  $: latestDeployments = deployments
-    .filter(x => x.status === "SUCCESS" && application === x.appId)
-    .sort((a, b) => a.updatedAt > b.updatedAt)
-
-  // Tabs
-  $: tabs = ["Overview", "Automation History", "Backups", "Settings", "Access"]
-  $: selectedTab = "Overview"
-
-  const backToAppList = () => {
-    $goto(`../../../portal/`)
-  }
-
-  const handleTabChange = tabKey => {
-    if (tabKey === selectedTab) {
-      return
-    } else if (tabKey && tabs.indexOf(tabKey) > -1) {
-      selectedTab = tabKey
-    } else {
-      notifications.error("Invalid tab key")
-    }
-  }
-
-  const reviewPendingDeployments = (deployments, newDeployments) => {
-    if (deployments.length > 0) {
-      const pending = checkIncomingDeploymentStatus(deployments, newDeployments)
-      if (pending.length) {
-        notifications.warning(
-          "Deployment has been queued and will be processed shortly"
-        )
-      }
-    }
-  }
-
-  async function fetchDeployments() {
-    try {
-      const newDeployments = await API.getAppDeployments()
-      reviewPendingDeployments(deployments, newDeployments)
-      return newDeployments
-    } catch (err) {
-      notifications.error("Error fetching deployment history")
-    }
-  }
-
-  const viewApp = () => {
-    if (isPublished) {
-      analytics.captureEvent(Events.APP_VIEW_PUBLISHED, {
-        appId: $store.appId,
-        eventSource: EventSource.PORTAL,
-      })
-      window.open(appUrl, "_blank")
-    }
-  }
-
-  const editApp = app => {
-    if (lockedBy && !lockedByYou) {
-      notifications.warning(
-        `App locked by ${lockIdentifer}. Please allow lock to expire or have them unlock this app.`
-      )
-      return
-    }
-    $goto(`../../../app/${app.devId}`)
-  }
-
-  const copyAppId = async app => {
-    await Helpers.copyToClipboard(app.prodId)
-    notifications.success("App ID copied to clipboard.")
-  }
-
-  const exportApp = opts => {
-    published = opts.published
-    exportModal.show()
-  }
-
-  const unpublishApp = app => {
-    selectedApp = app
-    unpublishModal.show()
-  }
-
-  const confirmUnpublishApp = async () => {
-    if (!selectedApp) {
-      return
-    }
-    try {
-      await API.unpublishApp(selectedApp.prodId)
-      await apps.load()
-      notifications.success("App unpublished successfully")
-    } catch (err) {
-      notifications.error("Error unpublishing app")
-    }
-  }
-
-  const deleteApp = app => {
-    selectedApp = app
-    deletionModal.show()
-  }
-
-  const confirmDeleteApp = async () => {
-    if (!selectedApp) {
-      return
-    }
-    try {
-      await API.deleteApp(selectedApp?.devId)
-      backToAppList()
-      notifications.success("App deleted successfully")
-    } catch (err) {
-      notifications.error("Error deleting app")
-    }
-    selectedApp = null
-    appName = null
-  }
-
-  onMount(async () => {
-    const params = new URLSearchParams(window.location.search)
-    if (params.get("tab")) {
-      selectedTab = params.get("tab")
-    }
-
-    // Check app exists
-    try {
-      const pkg = await API.fetchAppPackage(application)
-      await store.actions.initialise(pkg)
-    } catch (error) {
-      // Swallow
-      backToAppList()
-    }
-
-    // Initialise application
-    try {
-      await API.syncApp(application)
-      deployments = await fetchDeployments()
-      await groups.actions.init()
-      if (!apps.length) {
-        await apps.load()
-      }
-    } catch (error) {
-      notifications.error("Error initialising app overview")
-    }
-    loaded = true
-  })
-
-  onDestroy(() => {
-    store.actions.reset()
-  })
-</script>
-
-<Modal bind:this={exportModal} padding={false} width="600px">
-  <ExportAppModal app={selectedApp} {published} />
-</Modal>
-
-<span class="overview-wrap">
-  <Page wide noPadding>
-    {#if !loaded || !selectedApp}
-      <div class="loading">
-        <ProgressCircle size="XL" />
-      </div>
-    {:else}
-      <Layout paddingX="XXL" paddingY="XL" gap="L">
-        <span class="page-header" class:loaded>
-          <ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
-            Back
-          </ActionButton>
-        </span>
-        <div class="overview-header">
-          <div class="app-title">
-            <div class="app-logo">
-              <div
-                class="app-icon"
-                style="color: {selectedApp?.icon?.color || ''}"
-              >
-                <EditableIcon
-                  app={selectedApp}
-                  size="XL"
-                  name={selectedApp?.icon?.name || "Apps"}
-                />
-              </div>
-            </div>
-            <div class="app-details">
-              <Heading size="M">{selectedApp?.name}</Heading>
-              <div class="app-url">{appUrl}</div>
-            </div>
-          </div>
-          <div class="header-right">
-            <AppLockModal app={selectedApp} />
-            <ButtonGroup gap="XS">
-              <Button
-                size="M"
-                quiet
-                secondary
-                icon="Globe"
-                disabled={!isPublished}
-                on:click={viewApp}
-                dataCy="view-app"
-              >
-                View app
-              </Button>
-              <Button
-                size="M"
-                cta
-                icon="Edit"
-                disabled={lockedBy && !lockedByYou}
-                on:click={() => {
-                  editApp(selectedApp)
-                }}
-              >
-                <span>Edit</span>
-              </Button>
-            </ButtonGroup>
-            <ActionMenu align="right" dataCy="app-overview-menu-popover">
-              <span slot="control" class="app-overview-actions-icon">
-                <Icon hoverable name="More" />
-              </span>
-              <MenuItem
-                on:click={() => exportApp({ published: false })}
-                icon="DownloadFromCloud"
-              >
-                Export latest
-              </MenuItem>
-              {#if isPublished}
-                <MenuItem
-                  on:click={() => exportApp({ published: true })}
-                  icon="DownloadFromCloudOutline"
-                >
-                  Export published
-                </MenuItem>
-                <MenuItem on:click={() => copyAppId(selectedApp)} icon="Copy">
-                  Copy app ID
-                </MenuItem>
-              {/if}
-              {#if !isPublished}
-                <MenuItem on:click={() => deleteApp(selectedApp)} icon="Delete">
-                  Delete
-                </MenuItem>
-              {/if}
-            </ActionMenu>
-          </div>
-        </div>
-      </Layout>
-      <div class="tab-wrap">
-        <Tabs
-          selected={selectedTab}
-          noPadding
-          on:select={e => {
-            selectedTab = e.detail
-          }}
-        >
-          <Tab title="Overview">
-            <OverviewTab
-              app={selectedApp}
-              deployments={latestDeployments}
-              navigateTab={handleTabChange}
-              on:unpublish={e => unpublishApp(e.detail)}
-            />
-          </Tab>
-          <Tab title="Access">
-            <AccessTab app={selectedApp} />
-          </Tab>
-          <Tab title="Automation History">
-            <HistoryTab app={selectedApp} />
-          </Tab>
-          <Tab title="Backups">
-            <BackupsTab app={selectedApp} />
-          </Tab>
-          <Tab title="Settings">
-            <SettingsTab app={selectedApp} />
-          </Tab>
-        </Tabs>
-      </div>
-      <ConfirmDialog
-        bind:this={deletionModal}
-        title="Confirm deletion"
-        okText="Delete app"
-        onOk={confirmDeleteApp}
-        onCancel={() => (appName = null)}
-        disabled={appName !== selectedApp?.name}
-      >
-        Are you sure you want to delete the app <b>{selectedApp?.name}</b>?
-
-        <p>Please enter the app name below to confirm.</p>
-        <Input
-          bind:value={appName}
-          data-cy="delete-app-confirmation"
-          placeholder={selectedApp?.name}
-        />
-      </ConfirmDialog>
-      <ConfirmDialog
-        bind:this={unpublishModal}
-        title="Confirm unpublish"
-        okText="Unpublish app"
-        onOk={confirmUnpublishApp}
-        dataCy={"unpublish-modal"}
-      >
-        Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
-      </ConfirmDialog>
-    {/if}
-  </Page>
-</span>
-
-<style>
-  .app-url {
-    color: var(--spectrum-global-color-gray-600);
-  }
-  .loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-  }
-  .overview-header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .page-header.loaded {
-    padding: 0px;
-  }
-
-  .overview-wrap :global(> div > .container),
-  .tab-wrap :global(.spectrum-Tabs) {
-    background-color: var(--background);
-    background-clip: padding-box;
-  }
-
-  @media (max-width: 1000px) {
-    .overview-header {
-      flex-direction: column;
-      gap: var(--spacing-l);
-    }
-  }
-
-  .app-title {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-  .header-right {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-xl);
-  }
-  .app-details :global(.spectrum-Heading) {
-    line-height: 1em;
-    margin-bottom: var(--spacing-s);
-  }
-  .tab-wrap :global(> .spectrum-Tabs) {
-    padding-left: var(--spectrum-alias-grid-gutter-large);
-    padding-right: var(--spectrum-alias-grid-gutter-large);
-  }
-  .page-header {
-    padding-left: var(--spectrum-alias-grid-gutter-large);
-    padding-right: var(--spectrum-alias-grid-gutter-large);
-    padding-top: var(--spectrum-alias-grid-gutter-large);
-  }
-</style>

packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte

@@ -1,223 +0,0 @@
-<script>
-  import {
-    Layout,
-    Heading,
-    Body,
-    Button,
-    List,
-    ListItem,
-    Modal,
-    notifications,
-    Pagination,
-    Icon,
-  } from "@budibase/bbui"
-  import { onMount } from "svelte"
-
-  import RoleSelect from "components/common/RoleSelect.svelte"
-  import { users, groups, apps, licensing } from "stores/portal"
-  import AssignmentModal from "./AssignmentModal.svelte"
-  import { roles } from "stores/backend"
-  import { API } from "api"
-  import { fetchData } from "@budibase/frontend-core"
-
-  export let app
-
-  const usersFetch = fetchData({
-    API,
-    datasource: {
-      type: "user",
-    },
-    options: {
-      query: {
-        appId: apps.getProdAppID(app.devId),
-      },
-    },
-  })
-
-  let assignmentModal
-  let appGroups
-  let appUsers
-
-  $: fixedAppId = apps.getProdAppID(app.devId)
-  $: appUsers = $usersFetch.rows
-  $: appGroups = $groups.filter(group => {
-    if (!group.roles) {
-      return false
-    }
-    return groups.actions.getGroupAppIds(group).includes(fixedAppId)
-  })
-
-  async function removeUser(user) {
-    // Remove the user role
-    const filteredRoles = { ...user.roles }
-    delete filteredRoles[fixedAppId]
-    await users.save({
-      ...user,
-      roles: {
-        ...filteredRoles,
-      },
-    })
-    await usersFetch.refresh()
-  }
-
-  async function removeGroup(group) {
-    await groups.actions.removeApp(group._id, fixedAppId)
-    await groups.actions.init()
-    await usersFetch.refresh()
-  }
-
-  async function updateUserRole(role, user) {
-    user.roles[fixedAppId] = role
-    await users.save(user)
-  }
-
-  async function updateGroupRole(role, group) {
-    await groups.actions.addApp(group._id, fixedAppId, role)
-    await usersFetch.refresh()
-  }
-
-  onMount(async () => {
-    try {
-      await roles.fetch()
-    } catch (error) {
-      notifications.error(error)
-    }
-  })
-</script>
-
-<div class="access-tab">
-  <Layout>
-    {#if appGroups.length || appUsers.length}
-      <div>
-        <Heading>Access</Heading>
-        <div class="subtitle">
-          <Body size="S">
-            Assign users and groups to your app and define their access here
-          </Body>
-          <Button on:click={assignmentModal.show} icon="User" cta>
-            Assign access
-          </Button>
-        </div>
-      </div>
-      {#if $licensing.groupsEnabled && appGroups.length}
-        <List title="User Groups">
-          {#each appGroups as group}
-            <ListItem
-              title={group.name}
-              icon={group.icon}
-              iconBackground={group.color}
-            >
-              <RoleSelect
-                on:change={e => updateGroupRole(e.detail, group)}
-                autoWidth
-                quiet
-                value={group.roles[
-                  groups.actions
-                    .getGroupAppIds(group)
-                    .find(x => x === fixedAppId)
-                ]}
-                allowPublic={false}
-              />
-              <Icon
-                on:click={() => removeGroup(group)}
-                hoverable
-                size="S"
-                name="Close"
-              />
-            </ListItem>
-          {/each}
-        </List>
-      {/if}
-      {#if appUsers.length}
-        <div>
-          <List title="Users">
-            {#each appUsers as user}
-              <ListItem title={user.email} avatar>
-                <RoleSelect
-                  on:change={e => updateUserRole(e.detail, user)}
-                  autoWidth
-                  quiet
-                  value={user.roles[
-                    Object.keys(user.roles).find(x => x === fixedAppId)
-                  ]}
-                  allowPublic={false}
-                />
-                <Icon
-                  on:click={() => removeUser(user)}
-                  hoverable
-                  size="S"
-                  name="Close"
-                />
-              </ListItem>
-            {/each}
-          </List>
-          <div class="pagination">
-            <Pagination
-              page={$usersFetch.pageNumber + 1}
-              hasPrevPage={$usersFetch.hasPrevPage}
-              hasNextPage={$usersFetch.hasNextPage}
-              goToPrevPage={$usersFetch.loading ? null : usersFetch.prevPage}
-              goToNextPage={$usersFetch.loading ? null : usersFetch.nextPage}
-            />
-          </div>
-        </div>
-      {/if}
-    {:else}
-      <div class="align">
-        <Layout gap="S">
-          <Heading>No users assigned</Heading>
-          <div class="opacity">
-            <Body size="S">
-              Assign users/groups to your app and set their access here
-            </Body>
-          </div>
-          <div class="padding">
-            <Button
-              on:click={() => assignmentModal.show()}
-              cta
-              icon="UserArrow"
-            >
-              Assign access
-            </Button>
-          </div>
-        </Layout>
-      </div>
-    {/if}
-  </Layout>
-</div>
-
-<Modal bind:this={assignmentModal}>
-  <AssignmentModal {app} {appUsers} on:update={usersFetch.refresh} />
-</Modal>
-
-<style>
-  .access-tab {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 40px;
-  }
-
-  .padding {
-    margin-top: var(--spacing-m);
-  }
-  .opacity {
-    opacity: 0.8;
-  }
-
-  .align {
-    text-align: center;
-  }
-  .subtitle {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .pagination {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin-top: var(--spacing-xl);
-  }
-</style>

packages/builder/src/pages/builder/portal/overview/_components/AutomationTab.svelte

@@ -1,11 +0,0 @@
-<script>
-  //export let app
-</script>
-
-<div class="automation-tab" />
-
-<style>
-  .automation-tab {
-    color: pink;
-  }
-</style>

packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte

@@ -1,116 +0,0 @@
-<script>
-  import {
-    Layout,
-    Divider,
-    Heading,
-    Body,
-    Page,
-    Button,
-    Modal,
-  } from "@budibase/bbui"
-  import { store } from "builderStore"
-  import clientPackage from "@budibase/client/package.json"
-  import VersionModal from "components/deploy/VersionModal.svelte"
-  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
-  import { AppStatus } from "constants"
-
-  export let app
-
-  let versionModal
-  let updatingModal
-
-  $: updateAvailable = clientPackage.version !== $store.version
-  $: appUrl = `${window.origin}/app${app?.url}`
-  $: appDeployed = app?.status === AppStatus.DEPLOYED
-</script>
-
-<div class="settings-tab">
-  <Page wide={false}>
-    <Layout gap="XL" paddingY="XXL" paddingX="">
-      <span class="details-section">
-        <Layout gap="XS" noPadding>
-          <Heading size="S">Name and URL</Heading>
-          <Divider />
-          <Body>
-            <div class="app-details">
-              <div class="app-name">
-                <div class="name-title detail-title">Name</div>
-                <div class="name">{app?.name}</div>
-              </div>
-              <div class="app-url">
-                <div class="url-title detail-title">Url Path</div>
-                <div class="url">{appUrl}</div>
-              </div>
-            </div>
-            <div class="page-action">
-              <Button
-                cta
-                secondary
-                on:click={() => {
-                  updatingModal.show()
-                }}
-                disabled={appDeployed}
-              >
-                Edit
-              </Button>
-            </div>
-          </Body>
-        </Layout>
-      </span>
-      <span class="version-section">
-        <Layout gap="XS" noPadding>
-          <Heading size="S">App version</Heading>
-          <Divider />
-          <Body>
-            {#if updateAvailable}
-              <Body>
-                The app is currently using version
-                <strong>{$store.version}</strong>
-                but version <strong>{clientPackage.version}</strong> is
-                available.
-                <br />
-                Updates can contain new features, performance improvements and bug
-                fixes.
-              </Body>
-              <div class="page-action">
-                <Button cta on:click={versionModal.show()}>Update app</Button>
-              </div>
-            {:else}
-              <div class="version-status">
-                The app is currently using version
-                <strong>{$store.version}</strong>. You're running the latest!
-              </div>
-              <div class="page-action">
-                <Button secondary on:click={versionModal.show()}>
-                  Revert app
-                </Button>
-              </div>
-            {/if}
-          </Body>
-        </Layout>
-      </span>
-    </Layout>
-    <VersionModal bind:this={versionModal} hideIcon={true} />
-    <Modal bind:this={updatingModal} padding={false} width="600px">
-      <UpdateAppModal {app} />
-    </Modal>
-  </Page>
-</div>
-
-<style>
-  .page-action {
-    padding-top: var(--spacing-xl);
-  }
-  .app-details {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-m);
-  }
-  .detail-title {
-    color: var(--spectrum-global-color-gray-600);
-    font-size: var(
-      --spectrum-alias-font-size-default,
-      var(--spectrum-global-dimension-font-size-100)
-    );
-  }
-</style>

packages/builder/src/pages/builder/portal/overview/_layout.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { apps, groups, licensing } from "stores/portal"
+  import { onMount } from "svelte"
+
+  let loaded = !!$apps?.length
+
+  onMount(async () => {
+    if (!loaded) {
+      await apps.load()
+      if ($licensing.groupsEnabled) {
+        await groups.actions.init()
+      }
+      loaded = true
+    }
+  })
+</script>
+
+{#if loaded}
+  <slot />
+{/if}

packages/builder/src/pages/builder/portal/overview/index.svelte

@@ -0,0 +1,4 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  $redirect("../")
+</script>

packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte

@@ -9,8 +9,9 @@
 
   async function deletePlugin() {
     try {
+      const name = plugin.name
       await plugins.deletePlugin(plugin._id)
-      notifications.success(`Plugin ${plugin?.name} deleted`)
+      notifications.success(`Plugin ${name} deleted successfully`)
       dispatch("deleted")
     } catch (error) {
       const msg = error?.message ? error.message : JSON.stringify(error)
@@ -28,6 +29,6 @@
   showCloseIcon={false}
 >
   <Body>
-    Are you sure you want to delete <strong>{plugin?.name}</strong>
+    Are you sure you want to delete <strong>{plugin?.name}</strong>?
   </Body>
 </ModalContent>