Merge pull request #7729 from Budibase/cheeks-fixes

Fix client side lucene filtering

packages/client/src/components/Component.svelte

@@ -127,7 +127,9 @@
   // Empty components are those which accept children but do not have any.
   // Empty states can be shown for these components, but can be disabled
   // in the component manifest.
-  $: empty = interactive && !children.length && hasChildren
+  $: empty =
+    (interactive && !children.length && hasChildren) ||
+    hasMissingRequiredSettings
   $: emptyState = empty && showEmptyState
 
   // Enrich component settings

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

@@ -2,28 +2,25 @@
   import { getContext } from "svelte"
   import { builderStore } from "stores"
 
-  const { styleable } = getContext("sdk")
   const component = getContext("component")
 
   $: requiredSetting = $component.missingRequiredSettings?.[0]
 </script>
 
 {#if $builderStore.inBuilder && requiredSetting}
-  <div use:styleable={$component.styles}>
+  <div class="component-placeholder">
-    <div class="component-placeholder">
+    <span>
-      <span>
+      Add the <mark>{requiredSetting.label}</mark> setting to start using your component
-        Add the <mark>{requiredSetting.label}</mark> setting to start using your
+      -
-        component -
+    </span>
-      </span>
+    <span
-      <span
+      class="spectrum-Link"
-        class="spectrum-Link"
+      on:click={() => {
-        on:click={() => {
+        builderStore.actions.highlightSetting(requiredSetting.key)
-          builderStore.actions.highlightSetting(requiredSetting.key)
+      }}
-        }}
+    >
-      >
+      Show me
-        Show me
+    </span>
-      </span>
-    </div>
   </div>
 {/if}
 

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

@@ -1,7 +1,6 @@
 <script>
   import { getContext } from "svelte"
   import { ProgressCircle, Pagination } from "@budibase/bbui"
-  import Placeholder from "./Placeholder.svelte"
   import { fetchData, LuceneUtils } from "@budibase/frontend-core"
 
   export let dataSource
@@ -133,11 +132,7 @@
         <ProgressCircle />
       </div>
     {:else}
-      {#if $component.emptyState}
+      <slot />
-        <Placeholder />
-      {:else}
-        <slot />
-      {/if}
       {#if paginate && $fetch.supportsPagination}
         <div class="pagination">
           <Pagination

packages/frontend-core/src/utils/lucene.js

@@ -80,6 +80,19 @@ const cleanupQuery = query => {
   return query
 }
 
+/**
+ * Removes a numeric prefix on field names designed to give fields uniqueness
+ */
+const removeKeyNumbering = key => {
+  if (typeof key === "string" && key.match(/\d[0-9]*:/g) != null) {
+    const parts = key.split(":")
+    parts.shift()
+    return parts.join(":")
+  } else {
+    return key
+  }
+}
+
 /**
  * Builds a lucene JSON query from the filter structure generated in the builder
  * @param filter the builder filter structure
@@ -194,7 +207,7 @@ export const runLuceneQuery = (docs, query) => {
     const filters = Object.entries(query[type] || {})
     for (let i = 0; i < filters.length; i++) {
       const [key, testValue] = filters[i]
-      const docValue = Helpers.deepGet(doc, key)
+      const docValue = Helpers.deepGet(doc, removeKeyNumbering(key))
       if (failFn(docValue, testValue)) {
         return false
       }