Add sidebar for portal and use it for automation history. Fix multiple overflow and scrolling issues

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/Layout/Page.svelte

@@ -1,15 +1,52 @@
 <script>
+  import { setContext } from "svelte"
+  import clickOutside from "../Actions/click_outside"
+
   export let wide = false
   export let narrow = false
   export let noPadding = false
+
+  let sidePanelVisble = false
+
+  setContext("side-panel", {
+    open: () => (sidePanelVisble = true),
+    close: () => (sidePanelVisble = false),
+  })
 </script>
 
-<div class:wide class:noPadding class:narrow>
+<div class="page">
+  <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;
@@ -17,15 +54,31 @@
     max-width: 1080px;
     margin: 0 auto;
     flex: 1 1 auto;
-    padding-bottom: 50px;
+    padding: 50px;
+    z-index: 1;
   }
-
   .wide {
     max-width: none;
   }
-
   .narrow {
     max-width: 840px;
-    margin: 0;
+  }
+  #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/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/pages/builder/portal/_layout.svelte

@@ -304,7 +304,6 @@
     justify-content: center;
     align-items: stretch;
     overflow: auto;
-    padding: 50px 50px 0 50px;
   }
 
   @media (max-width: 640px) {

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

@@ -177,7 +177,6 @@
 </script>
 
 {#if loaded}
-  <Page narrow>
   <Layout noPadding>
     <Layout noPadding gap="XS">
       <Heading>Usage</Heading>
@@ -202,10 +201,7 @@
           <Layout noPadding>
             {#each staticUsage as usage}
               <div class="usage">
-                  <Usage
+                <Usage {usage} warnWhenFull={WARN_USAGE.includes(usage.name)} />
-                    {usage}
-                    warnWhenFull={WARN_USAGE.includes(usage.name)}
-                  />
               </div>
             {/each}
           </Layout>
@@ -238,7 +234,6 @@
       </div>
     </DashCard>
   </Layout>
-  </Page>
 {/if}
 
 <style>

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

@@ -1,5 +1,12 @@
 <script>
-  import { Layout, Icon, ActionButton, InlineAlert } from "@budibase/bbui"
+  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"
@@ -17,22 +24,15 @@
 </script>
 
 {#if history}
-  <div class="body">
+  <Layout noPadding>
-    <div class="top">
     <div class="controls">
       <StatusRenderer value={history.status} />
-        <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
+      <Icon hoverable name="Close" on:click={close} />
     </div>
-    </div>
+    <Layout noPadding gap="XS">
-    <Layout paddingY="XL" paddingX="XL" gap="S">
+      <Heading>{history.automationName}</Heading>
-      <div class="icon">
-        <Icon name="Clock" />
       <DateTimeRenderer value={history.createdAt} />
-      </div>
+    </Layout>
-      <div class="icon">
-        <Icon name="JourneyVoyager" />
-        <div>{history.automationName}</div>
-      </div>
     {#if history.status === STOPPED_ERROR}
       <div class="cron-error">
         <InlineAlert
@@ -42,65 +42,41 @@
         />
       </div>
     {/if}
-      <div>
     {#if exists}
-          <ActionButton
+      <div>
-            icon="Edit"
+        <Button
-            fullWidth={false}
+          secondary
-            on:click={() =>
+          on:click={() => {
-              $goto(`../../../app/${appId}/automate/${history.automationId}`)}
+            $goto(`../../../../app/${appId}/automate/${history.automationId}`)
-            >Edit automation</ActionButton
+          }}
         >
+          Edit automation
+        </Button>
+      </div>
     {/if}
-      </div>
-    </Layout>
-    <div class="bottom">
     {#key history}
+      <div class="history">
         <TestDisplay testResults={history} width="100%" />
+      </div>
     {/key}
-    </div>
+  </Layout>
-  </div>
 {:else}
-  <div>No details found</div>
+  <Body>No details found</Body>
 {/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: flex;
-    display: grid;
-    grid-template-columns: 1fr auto;
     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/index.svelte

@@ -14,14 +14,16 @@
   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, overview } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
+  import Portal from "svelte-portal"
 
   const ERROR = "error",
     SUCCESS = "success",
     STOPPED = "stopped"
+  const sidePanel = getContext("side-panel")
 
   let pageInfo = createPaginationStore()
   let runHistory = null
@@ -109,7 +111,7 @@
 
   function viewDetails({ detail }) {
     selectedHistory = detail
-    showPanel = true
+    sidePanel.open()
   }
 
   onMount(async () => {
@@ -130,6 +132,10 @@
       automationOptions.push({ value: automation._id, label: automation.name })
     }
   })
+
+  onDestroy(() => {
+    sidePanel.close()
+  })
 </script>
 
 <Layout noPadding>
@@ -209,15 +215,15 @@
   {/if}
 </Layout>
 
-<div class="panel" class:panelShow={showPanel}>
+{#if selectedHistory}
+  <Portal target="#side-panel">
     <HistoryDetailsPanel
       appId={app.devId}
       bind:history={selectedHistory}
-    close={() => {
+      close={sidePanel.close}
-      showPanel = false
-    }}
     />
-</div>
+  </Portal>
+{/if}
 
 <style>
   .search {
@@ -226,39 +232,19 @@
     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/yarn.lock

@@ -5813,10 +5813,10 @@ svelte-loading-spinners@^0.1.1:
   resolved "https://registry.yarnpkg.com/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz#3fa6fa0ef67ab635773bf20b07d0b071debbadaa"
   integrity sha512-EKCId1DjVL2RSUVJJsvtNcqQHox03XIgh4xh/4p7r6ST7d8mut6INY9/LqK4A17PFU64+3quZmqiSfOlf480CA==
 
-svelte-portal@0.1.0:
+svelte-portal@1.0.0:
-  version "0.1.0"
+  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
+  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
-  integrity sha512-kef+ksXVKun224mRxat+DdO4C+cGHla+fEcZfnBAvoZocwiaceOfhf5azHYOPXSSB1igWVFTEOF3CDENPnuWxg==
+  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
 svelte@^3.48.0:
   version "3.49.0"