Add settings to dynamic filter to control button text and allowed filter fields

packages/client/manifest.json

@@ -2631,6 +2631,18 @@
         "type": "dataProvider",
         "label": "Provider",
         "key": "dataProvider"
+      },
+      {
+        "type": "multifield",
+        "label": "Allowed filter fields",
+        "key": "allowedFields",
+        "placeholder": "All fields"
+      },
+      {
+        "type": "text",
+        "label": "Button text",
+        "key": "buttonText",
+        "defaultValue": "Edit filters"
       }
     ]
   },

packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte

@@ -4,17 +4,32 @@
   import FilterModal from "./FilterModal.svelte"
 
   export let dataProvider
+  export let allowedFields
+  export let buttonText
 
   const component = getContext("component")
   const { styleable } = getContext("sdk")
 
-  $: schema = dataProvider?.schema
-  $: schemaFields = Object.values(schema || {})
-
   let modal
   let tmpFilters = []
   let filters = []
 
+  $: schema = dataProvider?.schema
+  $: schemaFields = getSchemaFields(schema, allowedFields)
+  $: text = buttonText || "Edit filters"
+
+  const getSchemaFields = (schema, allowedFields) => {
+    let clonedSchema = {}
+    if (!allowedFields?.length) {
+      clonedSchema = schema
+    } else {
+      allowedFields?.forEach(field => {
+        clonedSchema[field] = schema[field]
+      })
+    }
+    return Object.values(clonedSchema || {})
+  }
+
   const openEditor = () => {
     tmpFilters = [...filters]
     modal.show()
@@ -26,11 +41,11 @@
 </script>
 
 <div use:styleable={$component.styles}>
-  <Button on:click={openEditor} secondary icon="FilterEdit">
+  <Button on:click={openEditor} secondary>
-    Edit filters
+    {text}
   </Button>
   <Modal bind:this={modal}>
-    <ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
+    <ModalContent title={text} size="XL" onConfirm={updateQuery}>
       <FilterModal bind:filters={tmpFilters} {schemaFields} />
     </ModalContent>
   </Modal>