Merge pull request #14857 from Budibase/query-ui-frontend

Frontend updates for storing view filters in `queryUI`

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

@@ -798,7 +798,9 @@
         break
       }
     }
-    return utils.processSearchFilters(filters)
+    return Array.isArray(filters)
+      ? utils.processSearchFilters(filters)
+      : filters
   }
 
   function saveFilters(key) {

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

@@ -5,7 +5,6 @@
   import { getUserBindings } from "dataBinding"
   import { makePropSafe } from "@budibase/string-templates"
   import { search } from "@budibase/frontend-core"
-  import { utils } from "@budibase/shared-core"
   import { tables } from "stores/builder"
 
   export let schema
@@ -17,19 +16,16 @@
 
   let drawer
 
-  $: localFilters = utils.processSearchFilters(filters)
+  $: localFilters = filters
-
   $: schemaFields = search.getFields(
     $tables.list,
     Object.values(schema || {}),
     { allowLinks: true }
   )
-
   $: filterCount =
     localFilters?.groups?.reduce((acc, group) => {
       return (acc += group.filters.filter(filter => filter.field).length)
     }, 0) || 0
-
   $: bindings = [
     {
       type: "context",
@@ -61,7 +57,7 @@
   title="Filtering"
   on:drawerHide
   on:drawerShow={() => {
-    localFilters = utils.processSearchFilters(filters)
+    localFilters = filters
   }}
   forceModal
 >

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -92,6 +92,7 @@
   disabled={error ||
     !name ||
     (rows.length && (!allValid || displayColumn == null))}
+  size="M"
 >
   <Input
     thin

packages/builder/src/stores/builder/components.js

@@ -207,7 +207,6 @@ export class ComponentStore extends BudiStore {
     )
     for (let setting of filterableTypes || []) {
       const isLegacy = Array.isArray(enrichedComponent[setting.key])
-
       if (isLegacy) {
         const processedSetting = utils.processSearchFilters(
           enrichedComponent[setting.key]

packages/builder/src/stores/builder/viewsV2.js

@@ -1,30 +1,6 @@
 import { writable, derived, get } from "svelte/store"
 import { tables } from "./tables"
 import { API } from "api"
-import { dataFilters } from "@budibase/shared-core"
-
-function convertToSearchFilters(view) {
-  // convert from UISearchFilter type
-  if (view?.query) {
-    return {
-      ...view,
-      queryUI: view.query,
-      query: dataFilters.buildQuery(view.query),
-    }
-  }
-  return view
-}
-
-function convertToUISearchFilter(view) {
-  if (view?.queryUI) {
-    return {
-      ...view,
-      query: view.queryUI,
-      queryUI: undefined,
-    }
-  }
-  return view
-}
 
 export function createViewsV2Store() {
   const store = writable({
@@ -36,7 +12,7 @@ export function createViewsV2Store() {
       const views = Object.values(table?.views || {}).filter(view => {
         return view.version === 2
       })
-      list = list.concat(views.map(view => convertToUISearchFilter(view)))
+      list = list.concat(views)
     })
     return {
       ...$store,
@@ -58,7 +34,6 @@ export function createViewsV2Store() {
   }
 
   const create = async view => {
-    view = convertToSearchFilters(view)
     const savedViewResponse = await API.viewV2.create(view)
     const savedView = savedViewResponse.data
     replaceView(savedView.id, savedView)
@@ -66,7 +41,6 @@ export function createViewsV2Store() {
   }
 
   const save = async view => {
-    view = convertToSearchFilters(view)
     const res = await API.viewV2.update(view)
     const savedView = res?.data
     replaceView(view.id, savedView)
@@ -77,7 +51,6 @@ export function createViewsV2Store() {
     if (!viewId) {
       return
     }
-    view = convertToUISearchFilter(view)
     const existingView = get(derivedStore).list.find(view => view.id === viewId)
     const tableIndex = get(tables).list.findIndex(table => {
       return table._id === view?.tableId || table._id === existingView?.tableId

packages/frontend-core/src/components/CoreFilterBuilder.svelte

@@ -16,6 +16,7 @@
   import { QueryUtils, Constants } from "@budibase/frontend-core"
   import { getContext, createEventDispatcher } from "svelte"
   import FilterField from "./FilterField.svelte"
+  import { utils } from "@budibase/shared-core"
 
   const dispatch = createEventDispatcher()
   const {
@@ -39,8 +40,7 @@
   export let toReadable
   export let toRuntime
 
-  $: editableFilters = filters ? Helpers.cloneDeep(filters) : null
+  $: editableFilters = migrateFilters(filters)
-
   $: {
     if (
       tables.find(
@@ -54,6 +54,16 @@
     }
   }
 
+  // We still may need to migrate this even though the backend does it automatically now
+  // for query definitions. This is because we might be editing saved filter definitions
+  // from old screens, which will still be of type LegacyFilter[].
+  const migrateFilters = filters => {
+    if (Array.isArray(filters)) {
+      return utils.processSearchFilters(filters)
+    }
+    return Helpers.cloneDeep(filters)
+  }
+
   const filterOperatorOptions = Object.values(FilterOperator).map(entry => {
     return { value: entry, label: Helpers.capitalise(entry) }
   })

packages/frontend-core/src/components/grid/stores/datasources/viewV2.js

@@ -1,17 +1,4 @@
 import { get } from "svelte/store"
-import { dataFilters } from "@budibase/shared-core"
-
-function convertToSearchFilters(view) {
-  // convert from SearchFilterGroup type
-  if (view?.query) {
-    return {
-      ...view,
-      queryUI: view.query,
-      query: dataFilters.buildQuery(view.query),
-    }
-  }
-  return view
-}
 
 const SuppressErrors = true
 
@@ -19,7 +6,7 @@ export const createActions = context => {
   const { API, datasource, columns } = context
 
   const saveDefinition = async newDefinition => {
-    await API.viewV2.update(convertToSearchFilters(newDefinition))
+    await API.viewV2.update(newDefinition)
   }
 
   const saveRow = async row => {
@@ -138,7 +125,7 @@ export const initialise = context => {
         }
         // Only override filter state if we don't have an initial filter
         if (!get(initialFilter)) {
-          filter.set($definition.queryUI || $definition.query)
+          filter.set($definition.queryUI)
         }
       })
     )
@@ -197,7 +184,7 @@ export const initialise = context => {
         if (JSON.stringify($filter) !== JSON.stringify($view.queryUI)) {
           await datasource.actions.saveDefinition({
             ...$view,
-            query: $filter,
+            queryUI: $filter,
           })
 
           // Refresh data since view definition changed