From 1bc6f30b6c08982dca05bf54503f7ed6394316d0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Sep 2022 08:50:22 +0100
Subject: [PATCH 1/4] Fix component empty state and invalid state styling

---
 .../client/src/components/Component.svelte    |  4 ++-
 .../app/ComponentPlaceholder.svelte           | 29 +++++++++----------
 .../src/components/app/DataProvider.svelte    |  6 +---
 3 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a7f506a387..491b58c4c5 100644
--- a/packages/client/src/components/Component.svelte
+++ b/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
diff --git a/packages/client/src/components/app/ComponentPlaceholder.svelte b/packages/client/src/components/app/ComponentPlaceholder.svelte
index 13cc217ef0..7b0a8bbbd9 100644
--- a/packages/client/src/components/app/ComponentPlaceholder.svelte
+++ b/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">
-      <span>
-        Add the <mark>{requiredSetting.label}</mark> setting to start using your
-        component -
-      </span>
-      <span
-        class="spectrum-Link"
-        on:click={() => {
-          builderStore.actions.highlightSetting(requiredSetting.key)
-        }}
-      >
-        Show me
-      </span>
-    </div>
+  <div class="component-placeholder">
+    <span>
+      Add the <mark>{requiredSetting.label}</mark> setting to start using your component
+      -
+    </span>
+    <span
+      class="spectrum-Link"
+      on:click={() => {
+        builderStore.actions.highlightSetting(requiredSetting.key)
+      }}
+    >
+      Show me
+    </span>
   </div>
 {/if}
 
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 69b2ccfc82..7967fc77cf 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -133,11 +133,7 @@
         <ProgressCircle />
       </div>
     {:else}
-      {#if $component.emptyState}
-        <Placeholder />
-      {:else}
-        <slot />
-      {/if}
+      <slot />
       {#if paginate && $fetch.supportsPagination}
         <div class="pagination">
           <Pagination

From cc3f4c12214fbb3d3249e93ca65ca61903f0accd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Sep 2022 09:01:21 +0100
Subject: [PATCH 2/4] Fix client side searching not working due to field
 prefixes

---
 packages/frontend-core/src/utils/lucene.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/utils/lucene.js b/packages/frontend-core/src/utils/lucene.js
index 9ed5df3895..21f00e4942 100644
--- a/packages/frontend-core/src/utils/lucene.js
+++ b/packages/frontend-core/src/utils/lucene.js
@@ -80,6 +80,17 @@ const cleanupQuery = query => {
   return query
 }
 
+/**
+ * Removes a numeric prefix on field names designed to give fields uniqueness
+ */
+const removeFieldPrefix = field => {
+  if (field && typeof field === "string" && field.includes(":")) {
+    return field.split(":")[1]
+  } else {
+    return field
+  }
+}
+
 /**
  * Builds a lucene JSON query from the filter structure generated in the builder
  * @param filter the builder filter structure
@@ -194,7 +205,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, removeFieldPrefix(key))
       if (failFn(docValue, testValue)) {
         return false
       }

From 899aea9d004c40d93376ca828ec8cde3105f75d8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Sep 2022 09:07:25 +0100
Subject: [PATCH 3/4] Copy backend implementation for removing key numbering to
 ensure consistent behaviour

---
 packages/frontend-core/src/utils/lucene.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/frontend-core/src/utils/lucene.js b/packages/frontend-core/src/utils/lucene.js
index 21f00e4942..a1b9594684 100644
--- a/packages/frontend-core/src/utils/lucene.js
+++ b/packages/frontend-core/src/utils/lucene.js
@@ -83,11 +83,13 @@ const cleanupQuery = query => {
 /**
  * Removes a numeric prefix on field names designed to give fields uniqueness
  */
-const removeFieldPrefix = field => {
-  if (field && typeof field === "string" && field.includes(":")) {
-    return field.split(":")[1]
+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 field
+    return key
   }
 }
 
@@ -205,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, removeFieldPrefix(key))
+      const docValue = Helpers.deepGet(doc, removeKeyNumbering(key))
       if (failFn(docValue, testValue)) {
         return false
       }

From e4f6c2b6f5e37ff83c13165af52ddb2894e5b39d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Sep 2022 09:20:25 +0100
Subject: [PATCH 4/4] Lint

---
 packages/client/src/components/app/DataProvider.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 7967fc77cf..8cd2f00eec 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/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