Merge branch 'master' of https://github.com/Budibase/budibase into bugfix/md-reference-bb-apis

packages/builder/src/App.svelte

@@ -6,12 +6,26 @@
   import { onMount } from "svelte"
   import IconButton from "./common/IconButton.svelte"
   import Spinner from "./common/Spinner.svelte"
+  import AppNotification, { showAppNotification } from "./common/AppNotification.svelte"
 
   let init = initialise()
+
+  function showErrorBanner() {
+    showAppNotification({
+      status: "danger",
+      message:
+        "Whoops! Looks like we're having trouble. Please refresh the page.",
+    })
+  }
+
+  onMount(() => {
+    window.addEventListener("error", showErrorBanner)
+    window.addEventListener("unhandledrejection", showErrorBanner)
+  })
 </script>
 
 <main>
-
+  <AppNotification />
   {#await init}
     <div class="spinner-container">
       <Spinner />

packages/builder/src/builderStore/store/index.js

@@ -44,7 +44,7 @@ export const getStore = () => {
     currentNode: null,
     libraries: null,
     showSettings: false,
-    useAnalytics: true,
+    useAnalytics: true
   }
 
   const store = writable(initial)

packages/builder/src/common/AppNotification.svelte

@@ -0,0 +1,76 @@
+<script context="module">
+  import UIKit from "uikit"
+
+  export function showAppNotification({ message, status }) {
+    UIKit.notification({
+      message: `
+          <div class="message-container">
+            <i class="ri-information-fill information-icon"></i> 
+            <span class="notification-message"> 
+              ${message}
+            </span>
+            <button class="hoverable refresh-page-button" onclick="window.location.reload()">Refresh Page</button>
+          </div>
+        `,
+      status,
+      timeout: 100000
+    })
+  }
+</script>
+
+<style>
+  :global(.information-icon) {
+    font-size: 24px;
+  }
+
+  :global(.uk-nofi) {
+    display: grid;
+    grid-template-columns: 40px 1fr auto;
+    grid-gap: 5px;
+    align-items: center;
+  }
+
+  :global(.message-container) {
+    display: grid;
+    grid-template-columns: 40px 1fr auto;
+    grid-gap: 5px;
+    align-items: center;
+  }
+
+  :global(.uk-notification) {
+    width: 50% !important;
+    left: 0 !important;
+    right: 0 !important;
+    margin-right: auto !important;
+    margin-left: auto !important;
+    border-radius: 10px;
+    box-shadow: 0px 3px 6px #00000029;
+  }
+
+  :global(.uk-notification-message) {
+    border-radius: 5px;
+  }
+
+  :global(.uk-notification-message:hover .uk-notification-close) {
+    visibility: hidden;
+  }
+
+  :global(.uk-notification-message-danger) {
+    background: #f2545b !important;
+    color: #fff !important;
+    font-family: Roboto;
+    font-size: 14px !important;
+  }
+
+  :global(.refresh-page-button) {
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 5px;
+    border: none;
+    padding: 5px;
+    width: 91px;
+    height: 28px;
+    color: #f2545b;
+    background: #ffffff;
+  }
+</style>

packages/builder/src/database/ModelDataTable/ModelDataTable.svelte

@@ -11,6 +11,7 @@
     map,
     remove,
     keys,
+    takeRight
   } from "lodash/fp"
   import Select from "../../common/Select.svelte"
   import { getIndexSchema } from "../../common/core"
@@ -78,8 +79,8 @@
 
   function drillIntoRecord(record) {
     backendUiStore.update(state => {
+      state.breadcrumbs = [...state.breadcrumbs, record.type, record.id]
       state.selectedRecord = record
-      state.breadcrumbs = [state.selectedDatabase.name, record.id]
       state.selectedView = childViewsForRecord($store.hierarchy)[0]
       return state
     })
@@ -94,7 +95,7 @@
 
 <section>
   <div class="table-controls">
-    <h4 class="budibase__title--3">{last($backendUiStore.breadcrumbs)}</h4>
+    <h4 class="budibase__title--3">{takeRight(2, $backendUiStore.breadcrumbs).join(" / ")}</h4>
     <Select icon="ri-eye-line" bind:value={$backendUiStore.selectedView}>
       {#each views as view}
         <option value={view}>{view.name}</option>