Merge pull request #8965 from Budibase/cheeks-fixes

Misc fixes
2022-12-07 13:01:14 +00:00 · 2022-12-07 13:01:14 +00:00 · 041f156754
parent db0136a0dd 75d48774f2
commit 041f156754
12 changed files with 124 additions and 114 deletions
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/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%;
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/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]
 }

 /**
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/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 === "table"
+            updatedSetting?.type === "dataSource" ||
+            updatedSetting?.type === "table"
          ) {
            const { schema } = getSchemaForDatasource(null, value)
            const columnNames = Object.keys(schema || {})
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/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)}
-            >Save</Button
-          >
+          <Button cta slot="buttons" on:click={() => saveFilters(key)}>
+            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"}
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/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}
          />
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/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>
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
+++ b/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"
-
-  const dispatch = createEventDispatcher()
-  const { OperatorOptions } = Constants
-  const { getValidOperatorsForType } = LuceneUtils
+  import { createEventDispatcher } from "svelte"

  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
-  const behaviourOptions = [
-    { value: "and", label: "Match all of the following filters" },
-    { value: "or", label: "Match any of the following filters" },
-  ]
+  // Remove field key prefixes and determine whether to use the "match all"
+  // or "match any" behaviour
+  const parseFilters = 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 = [
-      ...filters,
+    rawFilters = [
+      ...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 !filters?.length}
-          Add your first filter expression.
+      {#if !rawFilters?.length}
+        <Body size="S">Add your first filter expression.</Body>
      {: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 {
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
+++ b/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,
-    toSaveFilters = null,
-    allOr,
-    initialAllOr
+  let drawer

-  $: 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) {
-      toSaveFilters = initialFilters
-    }
-    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.")
+    dispatch("change", tempValue)
+    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={event => {
-      toSaveFilters = event.detail
-    }}
+    on:change={e => (tempValue = e.detail)}
  />
 </Drawer>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/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);
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
+++ b/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);
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/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>
--- a/packages/frontend-core/src/constants.js
+++ b/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",