From 3fa8df7c47fde0e54f3679c10ff7559f3daac832 Mon Sep 17 00:00:00 2001
From: Jeremy Zilar <jeremyzilar@gmail.com>
Date: Mon, 27 Apr 2026 15:01:04 -0400
Subject: [PATCH] Well list: use name_contains for toolbar search and clarify
 labels

WellList passes name_contains (not query) so the staging API can filter by
substring on Thing.name. ListPage accepts optional searchAriaLabel for screens
that customize server-side search.

Well list placeholder and aria text describe searching by well name instead of
search all records.
---
 src/components/ListPage.tsx       | 8 ++++++--
 src/pages/ocotillo/thing/list.tsx | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/ListPage.tsx b/src/components/ListPage.tsx
index 0bf906de..912db162 100644
--- a/src/components/ListPage.tsx
+++ b/src/components/ListPage.tsx
@@ -132,6 +132,8 @@ type ListPageProps = {
   searchValue?: string
   onSearchChange?: (value: string) => void
   searchPlaceholder?: string
+  /** Overrides default aria-label on the search input when server search is customized */
+  searchAriaLabel?: string
 }
 
 export const ListPage: React.FC<ListPageProps> = ({
@@ -150,6 +152,7 @@ export const ListPage: React.FC<ListPageProps> = ({
   searchValue,
   onSearchChange,
   searchPlaceholder,
+  searchAriaLabel,
 }) => {
   if (!exportProps) {
     exportProps = { pageSize: 1000 }
@@ -303,9 +306,10 @@ export const ListPage: React.FC<ListPageProps> = ({
               sx={{ fontSize: 14, flex: 1 }}
               inputProps={{
                 'aria-label':
-                  searchMode === 'server'
+                  searchAriaLabel ??
+                  (searchMode === 'server'
                     ? 'Search all records'
-                    : 'Filter rows on this page',
+                    : 'Filter rows on this page'),
               }}
             />
           </Box>
diff --git a/src/pages/ocotillo/thing/list.tsx b/src/pages/ocotillo/thing/list.tsx
index d846452e..093ab667 100644
--- a/src/pages/ocotillo/thing/list.tsx
+++ b/src/pages/ocotillo/thing/list.tsx
@@ -80,7 +80,7 @@ export const WellList: React.FC = () => {
     meta: {
       params: {
         include_contacts: true,
-        ...(search ? { query: search } : {}),
+        ...(search ? { name_contains: search } : {}),
       },
     },
     pagination: { pageSize: 50 },
@@ -317,6 +317,8 @@ export const WellList: React.FC = () => {
       searchMode="server"
       searchValue={searchInput}
       onSearchChange={setSearchInput}
+      searchPlaceholder="Search by well name"
+      searchAriaLabel="Search wells by well name"
     />
   )
 }