Propagate RPC changes to record selector

mathesar_ui/src/api/rpc/records.ts

@@ -74,7 +74,14 @@ export interface RecordsListParams {
   order?: SortingEntry[];
   grouping?: Grouping;
   filter?: SqlExpr;
-  search_fuzzy?: Record<string, unknown>[];
+  return_record_summaries?: boolean;
+}
+
+export interface RecordsSearchParams {
+  database_id: number;
+  table_oid: number;
+  search_params: { attnum: number; literal: unknown }[];
+  limit?: number;
   return_record_summaries?: boolean;
 }
 
@@ -129,6 +136,8 @@ export const records = {
 
   list: rpcMethodTypeContainer<RecordsListParams, RecordsResponse>(),
 
+  search: rpcMethodTypeContainer<RecordsSearchParams, RecordsResponse>(),
+
   delete: rpcMethodTypeContainer<
     {
       database_id: number;

mathesar_ui/src/stores/table-data/records.ts

@@ -16,6 +16,7 @@ import type {
   Result as ApiRecord,
   RecordsListParams,
   RecordsResponse,
+  RecordsSearchParams,
 } from '@mathesar/api/rpc/records';
 import type { Table } from '@mathesar/api/rpc/tables';
 import type { Database } from '@mathesar/models/Database';
@@ -400,13 +401,20 @@ export class RecordsData {
         ...params.filtering
           .withEntries(contextualFilterEntries)
           .recordsRequestParams(),
-        ...params.searchFuzzy.recordsRequestParams(),
         return_record_summaries: this.loadIntrinsicRecordSummaries,
         // TODO_BETA Do we need shareConsumer here? Previously we had been
         // passing `...this.shareConsumer?.getQueryParams()`
       };
 
-      this.promise = api.records.list(recordsListParams).run();
+      const fuzzySearchParams = params.searchFuzzy.getSearchParams();
+      const recordSearchParams: RecordsSearchParams = {
+        ...this.apiContext,
+        search_params: fuzzySearchParams,
+      };
+
+      this.promise = fuzzySearchParams.length
+        ? api.records.search(recordSearchParams).run()
+        : api.records.list(recordsListParams).run();
 
       const response = await this.promise;
       const totalCount = response.count || 0;

mathesar_ui/src/stores/table-data/searchFuzzy.ts

@@ -1,4 +1,4 @@
-import type { RecordsListParams } from '@mathesar/api/rpc/records';
+import type { RecordsSearchParams } from '@mathesar/api/rpc/records';
 import { ImmutableMap } from '@mathesar/component-library';
 
 /**
@@ -18,15 +18,10 @@ export class SearchFuzzy extends ImmutableMap<number, unknown> {
     this.valueIsValid = valueIsSearchable;
   }
 
-  recordsRequestParams(): Pick<RecordsListParams, 'search_fuzzy'> {
-    if (this.size === 0) {
-      return {};
-    }
-    return {
-      search_fuzzy: [...this].map(([columnId, value]) => ({
-        field: columnId,
-        literal: value,
-      })),
-    };
+  getSearchParams(): RecordsSearchParams['search_params'] {
+    return [...this].map(([columnId, value]) => ({
+      attnum: columnId,
+      literal: value,
+    }));
   }
 }

mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte

@@ -38,6 +38,7 @@
   let columnWithFocus: Column | undefined = undefined;
   /** It will be undefined if we're loading data, for example. */
   let selectionIndex: number | undefined = undefined;
+  let tableElement: HTMLElement;
 
   $: setRecordSelectorControllerInContext(nestedController);
   $: ({ columnWithNestedSelectorOpen, purpose } = controller);
@@ -181,26 +182,30 @@
     }
   }
 
-  onMount(() => {
-    window.addEventListener('keydown', handleKeydown, { capture: true });
-    return () => {
-      window.removeEventListener('keydown', handleKeydown, { capture: true });
-    };
-  });
+  function findBestColumnIdToFocus(): number {
+    const firstNonPkColumn = $columns.find((c) => c.primary_key === false);
+    return firstNonPkColumn?.id ?? $columns[0].id;
+  }
 
-  onMount(async () => {
-    const columnId = $columns.find((c) => !c.primary_key)?.id;
-    if (columnId === undefined) {
-      return;
-    }
+  async function focusBestInput() {
+    const columnId = findBestColumnIdToFocus();
     await tick();
     const selector = `.record-selector-input.column-${columnId}`;
-    const input = document.querySelector<HTMLElement>(selector);
+    const input = tableElement.querySelector<HTMLElement>(selector);
     if (input) {
       input.focus();
     }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeydown, { capture: true });
+    return () => {
+      window.removeEventListener('keydown', handleKeydown, { capture: true });
+    };
   });
 
+  onMount(focusBestInput);
+
   const overflowDetails = makeOverflowDetails();
   const {
     hasOverflowTop,
@@ -216,6 +221,7 @@
   class:has-overflow-right={$hasOverflowRight}
   class:has-overflow-bottom={$hasOverflowBottom}
   class:has-overflow-left={$hasOverflowLeft}
+  bind:this={tableElement}
 >
   <div class="scroll-container" use:overflowObserver={overflowDetails}>
     <div class="table">