Merge pull request #5010 from Budibase/cheeks-fixes

Miscellaneous fixes

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -68,6 +68,7 @@
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
     messagePassing: $store.clientFeatures.messagePassing,
+    isBudibaseEvent: true
   }
   $: json = JSON.stringify(previewData)
 

packages/builder/src/components/design/AppPreview/iframeTemplate.js

@@ -52,7 +52,7 @@ export default `
           console.error("Client received invalid JSON")
           // Ignore
         }
-        if (!parsed) {
+        if (!parsed || !parsed.isBudibaseEvent) {
           return
         }
 

packages/client/src/components/app/charts/ApexChart.svelte

@@ -36,4 +36,13 @@
   div :global(.apexcharts-datalabel) {
     fill: var(--spectrum-global-color-gray-800);
   }
+  div :global(.apexcharts-tooltip) {
+    background-color: var(--spectrum-global-color-gray-200) !important;
+    border-color: var(--spectrum-global-color-gray-300) !important;
+    box-shadow: 2px 2px 6px -4px rgba(0, 0, 0, 0.1) !important;
+  }
+  div :global(.apexcharts-tooltip-title) {
+    background-color: var(--spectrum-global-color-gray-100) !important;
+    border-color: var(--spectrum-global-color-gray-300) !important;
+  }
 </style>

packages/client/src/components/app/charts/BarChart.svelte

@@ -18,16 +18,53 @@
   export let palette
   export let horizontal
 
-  $: options = setUpChart(dataProvider)
+  $: options = setUpChart(
+    title,
+    dataProvider,
+    labelColumn,
+    valueColumns,
+    xAxisLabel,
+    yAxisLabel,
+    height,
+    width,
+    dataLabels,
+    animate,
+    legend,
+    stacked,
+    yAxisUnits,
+    palette,
+    horizontal
+  )
 
-  const setUpChart = provider => {
+  const setUpChart = (
+    title,
+    dataProvider,
+    labelColumn,
+    valueColumns,
+    xAxisLabel,
+    yAxisLabel,
+    height,
+    width,
+    dataLabels,
+    animate,
+    legend,
+    stacked,
+    yAxisUnits,
+    palette,
+    horizontal
+  ) => {
+    console.log("new chart")
     const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
+    if (
+      !dataProvider ||
+      !dataProvider.rows?.length ||
+      allCols.find(x => x == null)
+    ) {
       return null
     }
 
     // Fetch data
-    const { schema, rows } = provider
+    const { schema, rows } = dataProvider
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)

packages/client/src/components/app/charts/CandleStickChart.svelte

@@ -16,17 +16,48 @@
   export let animate
   export let yAxisUnits
 
-  $: options = setUpChart(dataProvider)
+  $: options = setUpChart(
+    title,
+    dataProvider,
+    dateColumn,
+    openColumn,
+    highColumn,
+    lowColumn,
+    closeColumn,
+    xAxisLabel,
+    yAxisLabel,
+    height,
+    width,
+    animate,
+    yAxisUnits
+  )
 
-  // Fetch data on mount
+  const setUpChart = (
-  const setUpChart = provider => {
+    title,
+    dataProvider,
+    dateColumn,
+    openColumn,
+    highColumn,
+    lowColumn,
+    closeColumn,
+    xAxisLabel,
+    yAxisLabel,
+    height,
+    width,
+    animate,
+    yAxisUnits
+  ) => {
     const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
-    if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
+    if (
+      !dataProvider ||
+      !dataProvider.rows?.length ||
+      allCols.find(x => x == null)
+    ) {
       return null
     }
 
     // Fetch data
-    const { schema, rows } = provider
+    const { schema, rows } = dataProvider
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = rows.filter(row => hasAllColumns(row))

packages/client/src/components/app/charts/LineChart.svelte

@@ -23,17 +23,56 @@
   export let stacked
   export let gradient
 
-  $: options = setUpChart(dataProvider)
+  $: options = setUpChart(
+    title,
+    dataProvider,
+    labelColumn,
+    valueColumns,
+    xAxisLabel,
+    yAxisLabel,
+    height,
+    width,
+    animate,
+    dataLabels,
+    curve,
+    legend,
+    yAxisUnits,
+    palette,
+    area,
+    stacked,
+    gradient
+  )
 
-  // Fetch data on mount
+  const setUpChart = (
-  const setUpChart = provider => {
+    title,
+    dataProvider,
+    labelColumn,
+    valueColumns,
+    xAxisLabel,
+    yAxisLabel,
+    height,
+    width,
+    animate,
+    dataLabels,
+    curve,
+    legend,
+    yAxisUnits,
+    palette,
+    area,
+    stacked,
+    gradient
+  ) => {
     const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
+    if (
+      !dataProvider ||
+      !dataProvider.rows?.length ||
+      allCols.find(x => x == null)
+    ) {
       return null
     }
 
     // Fetch, filter and sort data
-    const { schema, rows } = provider
+    const { schema, rows } = dataProvider
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = rows.filter(row => hasAllColumns(row))

packages/client/src/components/app/charts/PieChart.svelte

@@ -14,16 +14,44 @@
   export let donut
   export let palette
 
-  $: options = setUpChart(dataProvider)
+  $: options = setUpChart(
+    title,
+    dataProvider,
+    labelColumn,
+    valueColumn,
+    height,
+    width,
+    dataLabels,
+    animate,
+    legend,
+    donut,
+    palette
+  )
 
-  // Fetch data on mount
+  const setUpChart = (
-  const setUpChart = provider => {
+    title,
-    if (!provider || !provider.rows?.length || !labelColumn || !valueColumn) {
+    dataProvider,
+    labelColumn,
+    valueColumn,
+    height,
+    width,
+    dataLabels,
+    animate,
+    legend,
+    donut,
+    palette
+  ) => {
+    if (
+      !dataProvider ||
+      !dataProvider.rows?.length ||
+      !labelColumn ||
+      !valueColumn
+    ) {
       return null
     }
 
     // Fetch, filter and sort data
-    const { schema, rows } = provider
+    const { schema, rows } = dataProvider
     const data = rows
       .filter(row => row[labelColumn] != null && row[valueColumn] != null)
       .slice(0, 100)

packages/client/src/components/app/dynamic-filter/FilterModal.svelte

@@ -4,7 +4,6 @@
     Button,
     Combobox,
     DatePicker,
-    DrawerContent,
     Icon,
     Input,
     Layout,
@@ -12,10 +11,12 @@
   } from "@budibase/bbui"
   import { generate } from "shortid"
   import { LuceneUtils, Constants } from "@budibase/frontend-core"
+  import { getContext } from "svelte"
 
   export let schemaFields
   export let filters = []
 
+  const context = getContext("context")
   const BannedTypes = ["link", "attachment", "json"]
 
   $: fieldOptions = (schemaFields ?? [])
@@ -89,8 +90,7 @@
   }
 </script>
 
-<DrawerContent>
+<div class="container" class:mobile={$context.device.mobile}>
-  <div class="container">
   <Layout noPadding>
     <Body size="S">
       {#if !filters?.length}
@@ -138,6 +138,7 @@
           {:else}
             <Input disabled />
           {/if}
+          <div class="controls">
             <Icon
               name="Duplicate"
               hoverable
@@ -150,6 +151,7 @@
               size="S"
               on:click={() => removeFilter(filter.id)}
             />
+          </div>
         {/each}
       </div>
     {/if}
@@ -159,8 +161,7 @@
       </Button>
     </div>
   </Layout>
-  </div>
+</div>
-</DrawerContent>
 
 <style>
   .container {
@@ -175,4 +176,19 @@
     align-items: center;
     grid-template-columns: 1fr 120px 1fr auto auto;
   }
+  .controls {
+    display: contents;
+  }
+
+  .container.mobile .fields {
+    grid-template-columns: 1fr;
+  }
+  .container.mobile .controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: var(--spacing-s) 0;
+    gap: var(--spacing-s);
+  }
 </style>

packages/client/src/components/app/forms/InnerForm.svelte

@@ -157,13 +157,9 @@
         const { fieldState } = get(existingField)
         fieldId = fieldState.fieldId
 
-        // Use new default value if default value changed,
+        // Determine the initial value for this field, reusing the current
-        // otherwise use the current value if possible
+        // value if one exists
-        if (defaultValue !== fieldState.defaultValue) {
-          initialValue = defaultValue
-        } else {
         initialValue = fieldState.value ?? initialValue
-        }
 
         // If this field has already been registered and we previously had an
         // error set, then re-run the validator to see if we can unset it

packages/client/src/stores/auth.js

@@ -6,12 +6,26 @@ const createAuthStore = () => {
 
   // Fetches the user object if someone is logged in and has reloaded the page
   const fetchUser = async () => {
+    let globalSelf = null
+    let appSelf = null
+
+    // First try and get the global user, to see if we are logged in at all
     try {
-      const user = await API.fetchSelf()
+      globalSelf = await API.fetchBuilderSelf()
-      store.set(user)
     } catch (error) {
       store.set(null)
+      return
     }
+
+    // Then try and get the user for this app to provide via context
+    try {
+      appSelf = await API.fetchSelf()
+    } catch (error) {
+      // Swallow
+    }
+
+    // Use the app self if present, otherwise fallback to the global self
+    store.set(appSelf || globalSelf || null)
   }
 
   const logOut = async () => {