Merge pull request #8965 from Budibase/cheeks-fixes

Misc fixes

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

@@ -205,7 +205,10 @@
     width: 100%;
   }
   .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
+    max-width: 400px;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .spectrum-Picker {
     width: 100%;

packages/builder/src/builderStore/dataBinding.js

@@ -481,6 +481,7 @@ const getSelectedRowsBindings = asset => {
           block._id + "-table"
         )}.${makePropSafe("selectedRows")}`,
         readableBinding: `${block._instanceName}.Selected rows`,
+        category: "Selected rows",
       }))
     )
   }
@@ -1004,7 +1005,10 @@ const bindingReplacement = (
  * {{ literal [componentId] }}
  */
 const extractLiteralHandlebarsID = value => {
-  return value?.match(/{{\s*literal\s*\[+([^\]]+)].*}}/)?.[1]
+  if (!value || typeof value !== "string") {
+    return null
+  }
+  return value.match(/{{\s*literal\s*\[+([^\]]+)].*}}/)?.[1]
 }
 
 /**

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

@@ -1049,8 +1049,8 @@ export const getFrontendStore = () => {
           const updatedSetting = settings.find(setting => setting.key === name)
 
           if (
-            updatedSetting.type === "dataSource" ||
+            updatedSetting?.type === "dataSource" ||
-            updatedSetting.type === "table"
+            updatedSetting?.type === "table"
           ) {
             const { schema } = getSchemaForDatasource(null, value)
             const columnNames = Object.keys(schema || {})

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -38,13 +38,15 @@
   export let testData
   export let schemaProperties
   export let isTestModal = false
+
   let webhookModal
   let drawer
-  let tempFilters = lookForFilters(schemaProperties) || []
   let fillWidth = true
   let codeBindingOpen = false
   let inputData
 
+  $: filters = lookForFilters(schemaProperties) || []
+  $: tempFilters = filters
   $: stepId = block.stepId
   $: bindings = getAvailableBindings(
     block || $automationStore.selectedBlock,
@@ -222,16 +224,17 @@
       {:else if value.customType === "filters"}
         <ActionButton on:click={drawer.show}>Define filters</ActionButton>
         <Drawer bind:this={drawer} {fillWidth} title="Filtering">
-          <Button cta slot="buttons" on:click={() => saveFilters(key)}
+          <Button cta slot="buttons" on:click={() => saveFilters(key)}>
-            >Save</Button
+            Save
-          >
+          </Button>
           <FilterDrawer
             slot="body"
-            bind:filters={tempFilters}
+            {filters}
             {bindings}
             {schemaFields}
             panel={AutomationBindingPanel}
             fillWidth
+            on:change={e => (tempFilters = e.detail)}
           />
         </Drawer>
       {:else if value.customType === "password"}

packages/builder/src/components/backend/DataTable/DataTable.svelte

@@ -25,6 +25,7 @@
   import { API } from "api"
 
   let hideAutocolumns = true
+  let filters
 
   $: isUsersTable = $tables.selected?._id === TableNames.USERS
   $: type = $tables.selected?.type
@@ -102,8 +103,9 @@
 
   // Fetch data whenever filters change
   const onFilter = e => {
+    filters = e.detail
     fetch.update({
-      filter: e.detail,
+      filter: filters,
     })
   }
 
@@ -178,6 +180,7 @@
         {#key id}
           <TableFilterButton
             {schema}
+            {filters}
             on:change={onFilter}
             disabled={!hasCols}
           />

packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte

@@ -8,9 +8,10 @@
   export let disabled = false
 
   const dispatch = createEventDispatcher()
-  let modal
-  let tempValue = filters || []
 
+  let modal
+
+  $: tempValue = filters || []
   $: schemaFields = Object.values(schema || {})
 </script>
 
@@ -34,8 +35,9 @@
     <div class="wrapper">
       <FilterDrawer
         allowBindings={false}
-        bind:filters={tempValue}
+        {filters}
         {schemaFields}
+        on:change={e => (tempValue = e.detail)}
       />
     </div>
   </ModalContent>

packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte

@@ -17,22 +17,30 @@
   import { generate } from "shortid"
   import { LuceneUtils, Constants } from "@budibase/frontend-core"
   import { getFields } from "helpers/searchFields"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-  const { OperatorOptions } = Constants
-  const { getValidOperatorsForType } = LuceneUtils
 
   export let schemaFields
   export let filters = []
   export let bindings = []
   export let panel = ClientBindingPanel
   export let allowBindings = true
-  export let allOr = false
   export let fillWidth = false
   export let tableId
 
-  $: dispatch("change", filters)
+  const dispatch = createEventDispatcher()
+  const { OperatorOptions } = Constants
+  const { getValidOperatorsForType } = LuceneUtils
+  const KeyedFieldRegex = /\d[0-9]*:/g
+  const behaviourOptions = [
+    { value: "and", label: "Match all filters" },
+    { value: "or", label: "Match any filter" },
+  ]
+
+  let rawFilters
+  let matchAny = false
+
+  $: parseFilters(filters)
+  $: dispatch("change", enrichFilters(rawFilters, matchAny))
   $: enrichedSchemaFields = getFields(
     schemaFields || [],
     { allowLinks: true },
@@ -41,14 +49,41 @@
   $: fieldOptions = enrichedSchemaFields.map(field => field.name) || []
   $: valueTypeOptions = allowBindings ? ["Value", "Binding"] : ["Value"]
 
-  let behaviourValue
+  // Remove field key prefixes and determine whether to use the "match all"
-  const behaviourOptions = [
+  // or "match any" behaviour
-    { value: "and", label: "Match all of the following filters" },
+  const parseFilters = filters => {
-    { value: "or", label: "Match any of the following filters" },
+    matchAny = filters?.find(filter => filter.operator === "allOr") != null
-  ]
+    rawFilters = (filters || [])
+      .filter(filter => filter.operator !== "allOr")
+      .map(filter => {
+        const { field } = filter
+        let newFilter = { ...filter }
+        delete newFilter.allOr
+        if (typeof field === "string" && field.match(KeyedFieldRegex) != null) {
+          const parts = field.split(":")
+          parts.shift()
+          newFilter.field = parts.join(":")
+        }
+        return newFilter
+      })
+  }
+
+  // Add field key prefixes and a special metadata filter object to indicate
+  // whether to use the "match all" or "match any" behaviour
+  const enrichFilters = (rawFilters, matchAny) => {
+    let count = 1
+    return rawFilters
+      .filter(filter => filter.field)
+      .map(filter => ({
+        ...filter,
+        field: `${count++}:${filter.field}`,
+      }))
+      .concat(matchAny ? [{ operator: "allOr" }] : [])
+  }
+
   const addFilter = () => {
-    filters = [
+    rawFilters = [
-      ...filters,
+      ...rawFilters,
       {
         id: generate(),
         field: null,
@@ -60,13 +95,13 @@
   }
 
   const removeFilter = id => {
-    filters = filters.filter(field => field.id !== id)
+    rawFilters = rawFilters.filter(field => field.id !== id)
   }
 
   const duplicateFilter = id => {
-    const existingFilter = filters.find(filter => filter.id === id)
+    const existingFilter = rawFilters.find(filter => filter.id === id)
     const duplicate = { ...existingFilter, id: generate() }
-    filters = [...filters, duplicate]
+    rawFilters = [...rawFilters, duplicate]
   }
 
   const getSchema = filter => {
@@ -133,32 +168,22 @@
     const schema = enrichedSchemaFields.find(x => x.name === field)
     return schema?.constraints?.inclusion || []
   }
-
-  onMount(() => {
-    behaviourValue = allOr ? "or" : "and"
-  })
 </script>
 
 <DrawerContent>
   <div class="container">
     <Layout noPadding>
-      <Body size="S">
+      {#if !rawFilters?.length}
-        {#if !filters?.length}
+        <Body size="S">Add your first filter expression.</Body>
-          Add your first filter expression.
+      {:else}
-        {:else}
-          Results are filtered to only those which match all of the following
-          constraints.
-        {/if}
-      </Body>
-      {#if filters?.length}
         <div class="fields">
           <Select
             label="Behaviour"
-            value={behaviourValue}
+            value={matchAny ? "or" : "and"}
             options={behaviourOptions}
             getOptionLabel={opt => opt.label}
             getOptionValue={opt => opt.value}
-            on:change={e => (allOr = e.detail === "or")}
+            on:change={e => (matchAny = e.detail === "or")}
             placeholder={null}
           />
         </div>
@@ -167,7 +192,7 @@
             <Label>Filters</Label>
           </div>
           <div class="fields">
-            {#each filters as filter, idx}
+            {#each rawFilters as filter, idx}
               <Select
                 bind:value={filter.field}
                 options={fieldOptions}
@@ -269,7 +294,7 @@
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
     align-items: center;
-    grid-template-columns: 1fr 150px 120px 1fr 16px 16px;
+    grid-template-columns: minmax(150px, 1fr) 170px 120px minmax(150px, 1fr) 16px 16px;
   }
 
   .filter-label {

packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte

@@ -8,74 +8,22 @@
   import FilterDrawer from "./FilterDrawer.svelte"
   import { currentAsset } from "builderStore"
 
-  const QUERY_START_REGEX = /\d[0-9]*:/g
   const dispatch = createEventDispatcher()
 
   export let value = []
   export let componentInstance
   export let bindings = []
 
-  let drawer,
+  let drawer
-    toSaveFilters = null,
-    allOr,
-    initialAllOr
 
-  $: initialFilters = correctFilters(value || [])
+  $: tempValue = value
   $: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchemaForDatasource($currentAsset, dataSource)?.schema
   $: schemaFields = Object.values(schema || {})
 
-  function addNumbering(filters) {
-    let count = 1
-    for (let value of filters) {
-      if (value.field && value.field?.match(QUERY_START_REGEX) == null) {
-        value.field = `${count++}:${value.field}`
-      }
-    }
-    return filters
-  }
-
-  function correctFilters(filters) {
-    const corrected = []
-    for (let filter of filters) {
-      let field = filter.field
-      if (filter.operator === "allOr") {
-        initialAllOr = allOr = true
-        continue
-      }
-      if (
-        typeof filter.field === "string" &&
-        filter.field.match(QUERY_START_REGEX) != null
-      ) {
-        const parts = field.split(":")
-        const number = parts[0]
-        // it's the new format, remove number
-        if (!isNaN(parseInt(number))) {
-          parts.shift()
-          field = parts.join(":")
-        }
-      }
-      corrected.push({
-        ...filter,
-        field,
-      })
-    }
-    return corrected
-  }
-
   async function saveFilter() {
-    if (!toSaveFilters && allOr !== initialAllOr) {
+    dispatch("change", tempValue)
-      toSaveFilters = initialFilters
+    notifications.success("Filters saved")
-    }
-    const filters = toSaveFilters?.filter(filter => filter.operator !== "allOr")
-    if (allOr && filters) {
-      filters.push({ operator: "allOr" })
-    }
-    // only save if anything was updated
-    if (filters) {
-      dispatch("change", addNumbering(filters))
-    }
-    notifications.success("Filters saved.")
     drawer.hide()
   }
 </script>
@@ -85,13 +33,10 @@
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <FilterDrawer
     slot="body"
-    filters={initialFilters}
+    filters={value}
     {bindings}
     {schemaFields}
     tableId={dataSource.tableId}
-    bind:allOr
+    on:change={e => (tempValue = e.detail)}
-    on:change={event => {
-      toSaveFilters = event.detail
-    }}
   />
 </Drawer>

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

@@ -61,6 +61,13 @@
     align-items: center;
     gap: var(--spacing-l);
   }
+  .header-left {
+    flex: 1 1 auto;
+    width: 0;
+  }
+  .header-left :global(> *) {
+    max-width: 100%;
+  }
   .header-left :global(.spectrum-Picker) {
     font-weight: 600;
     color: var(--spectrum-global-color-gray-900);

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte

@@ -282,12 +282,16 @@
     gap: var(--spacing-l);
     display: grid;
     align-items: center;
-    grid-template-columns: auto 160px auto 1fr 130px 130px 1fr auto auto;
+    grid-template-columns:
+      auto 150px auto minmax(140px, 1fr) 120px 100px minmax(140px, 1fr)
+      auto auto;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
   }
   .condition.update {
-    grid-template-columns: auto 160px 1fr auto 1fr auto 1fr 130px 130px 1fr auto auto;
+    grid-template-columns:
+      auto 150px minmax(140px, 1fr) auto minmax(140px, 1fr) auto
+      minmax(140px, 1fr) 120px 100px minmax(140px, 1fr) auto auto;
   }
   .condition:hover {
     background-color: var(--spectrum-global-color-gray-100);

packages/client/src/components/app/SidePanel.svelte

@@ -29,6 +29,17 @@
   // Derive visibility
   $: open = $sidePanelStore.contentId === $component.id
 
+  // Derive a render key which is only changed whenever this panel is made
+  // visible after being hidden. We need to key the content to avoid showing
+  // stale data when re-revealing a side panel that was closed, but we cannot
+  // hide the content altogether when hidden as this breaks ejection.
+  let renderKey = null
+  $: {
+    if (open) {
+      renderKey = Math.random()
+    }
+  }
+
   const showInSidePanel = (el, visible) => {
     const update = visible => {
       const target = document.getElementById("side-panel-container")
@@ -47,7 +58,10 @@
     // Apply initial visibility
     update(visible)
 
-    return { update }
+    return {
+      update,
+      destroy: () => update(false),
+    }
   }
 </script>
 
@@ -57,9 +71,9 @@
   class="side-panel"
   class:open
 >
-  {#if $sidePanelStore.open}
+  {#key renderKey}
     <slot />
-  {/if}
+  {/key}
 </div>
 
 <style>

packages/frontend-core/src/constants.js

@@ -28,11 +28,11 @@ export const OperatorOptions = {
   },
   MoreThan: {
     value: "rangeLow",
-    label: "More than",
+    label: "More than or equal to",
   },
   LessThan: {
     value: "rangeHigh",
-    label: "Less than",
+    label: "Less than or equal to",
   },
   Contains: {
     value: "contains",