Send search term to api call

packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte

@@ -1,7 +1,7 @@
 <script>
   import EditUserPicker from "./EditUserPicker.svelte"
 
-  import { Heading, Pagination, Table } from "@budibase/bbui"
+  import { Heading, Pagination, Table, Search } from "@budibase/bbui"
   import { fetchData } from "@budibase/frontend-core"
   import { goto } from "@roxi/routify"
   import { API } from "api"
@@ -12,7 +12,9 @@
 
   export let groupId
 
-  const fetchGroupUsers = fetchData({
+  let searchTerm
+  let fetchGroupUsers
+  $: fetchGroupUsers = fetchData({
     API,
     datasource: {
       type: "groupUser",
@@ -20,6 +22,7 @@
     options: {
       query: {
         groupId,
+        searchTerm,
       },
     },
   })
@@ -67,6 +70,9 @@
   {/if}
 </div>
 
+<div class="controls-right">
+  <Search bind:value={searchTerm} placeholder="Search" />
+</div>
 <Table
   schema={userSchema}
   data={$fetchGroupUsers?.rows}
@@ -109,4 +115,15 @@
     width: 100%;
     text-align: center;
   }
+
+  .controls-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .controls-right :global(.spectrum-Search) {
+    width: 200px;
+  }
 </style>

packages/frontend-core/src/api/groups.js

@@ -55,10 +55,13 @@ export const buildGroupsEndpoints = API => {
     /**
      * Gets a group users by the group id
      */
-    getGroupUsers: async ({ id, bookmark }) => {
+    getGroupUsers: async ({ id, bookmark, searchTerm }) => {
       let url = `/api/global/groups/${id}/users?`
       if (bookmark) {
-        url += `bookmark=${bookmark}`
+        url += `bookmark=${bookmark}&`
+      }
+      if (searchTerm) {
+        url += `searchTerm=${searchTerm}&`
       }
 
       return await API.get({

packages/frontend-core/src/fetch/GroupUserFetch.js

@@ -31,6 +31,7 @@ export default class GroupUserFetch extends DataFetch {
     try {
       const res = await this.API.getGroupUsers({
         id: query.groupId,
+        searchTerm: query.searchTerm,
         bookmark: cursor,
       })