refactor(web): standardize app log search inputs (#40912)

oxlint-suppressions.json

@@ -209,11 +209,6 @@
       "count": 1
     }
   },
-  "web/app/components/app/annotation/filter.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/annotation/header-opts/index.tsx": {
     "typescript/no-explicit-any": {
       "count": 1
@@ -492,9 +487,6 @@
     }
   },
   "web/app/components/app/log/filter.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/only-export-components": {
       "count": 1
     }
@@ -557,9 +549,6 @@
     }
   },
   "web/app/components/app/workflow-log/filter.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/only-export-components": {
       "count": 1
     }

web/app/components/app/annotation/__tests__/filter.spec.tsx

@@ -114,7 +114,7 @@ describe('Filter', () => {
       )
 
       // Assert
-      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+      expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument()
       expect(screen.getByText(childContent)).toBeInTheDocument()
     })
   })
@@ -161,7 +161,9 @@ describe('Filter', () => {
       )
 
       // Assert
-      expect(screen.getByPlaceholderText('common.operation.search')).toHaveValue('test-keyword')
+      expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toHaveValue(
+        'test-keyword',
+      )
     })
   })
 
@@ -187,7 +189,7 @@ describe('Filter', () => {
       )
 
       // Act
-      const input = screen.getByPlaceholderText('common.operation.search')
+      const input = screen.getByRole('searchbox', { name: 'common.operation.search' })
       fireEvent.change(input, { target: { value: 'updated' } })
 
       // Assert
@@ -240,7 +242,7 @@ describe('Filter', () => {
       )
 
       // Assert
-      expect(screen.getByPlaceholderText('common.operation.search')).toHaveValue('')
+      expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toHaveValue('')
     })
 
     it('should handle undefined keyword in queryParams', () => {
@@ -260,7 +262,7 @@ describe('Filter', () => {
       )
 
       // Assert
-      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+      expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument()
     })
 
     it('should handle zero count', () => {
@@ -280,7 +282,7 @@ describe('Filter', () => {
       )
 
       // Assert - should still render when count is 0
-      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+      expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument()
     })
   })
 })

web/app/components/app/annotation/filter.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Input from '@/app/components/base/input'
+import { SearchInput } from '@/app/components/base/search-input'
 import { useAnnotationsCount } from '@/service/use-log'
 
 export type QueryParam = {
@@ -22,16 +22,13 @@ const Filter: FC<IFilterProps> = ({ appId, queryParams, setQueryParams, children
   if (isLoading || !data) return null
   return (
     <div className="mb-2 flex flex-row flex-wrap items-center justify-between gap-2">
-      <Input
-        wrapperClassName="w-[200px]"
-        showLeftIcon
-        showClearIcon
-        value={queryParams.keyword}
+      <SearchInput
+        className="w-50"
+        value={queryParams.keyword ?? ''}
         placeholder={t(($) => $['operation.search'], { ns: 'common' })!}
-        onChange={(e) => {
-          setQueryParams({ ...queryParams, keyword: e.target.value })
+        onValueChange={(value) => {
+          setQueryParams({ ...queryParams, keyword: value })
         }}
-        onClear={() => setQueryParams({ ...queryParams, keyword: '' })}
       />
       {children}
     </div>

web/app/components/app/log/__tests__/filter.spec.tsx

@@ -113,7 +113,9 @@ describe('Filter', () => {
     it('should render filter components', () => {
       render(<Filter {...defaultProps} />)
 
-      expect(screen.getByPlaceholderText(/(?:^|\.)operation\.search(?=$|:)/))!.toBeInTheDocument()
+      expect(
+        screen.getByRole('searchbox', { name: /(?:^|\.)operation\.search(?=$|:)/ }),
+      )!.toBeInTheDocument()
     })
 
     it('should return null when loading', () => {
@@ -125,13 +127,17 @@ describe('Filter', () => {
     it('should render sort component in chat mode', () => {
       render(<Filter {...defaultProps} isChatMode />)
 
-      expect(screen.getByPlaceholderText(/(?:^|\.)operation\.search(?=$|:)/))!.toBeInTheDocument()
+      expect(
+        screen.getByRole('searchbox', { name: /(?:^|\.)operation\.search(?=$|:)/ }),
+      )!.toBeInTheDocument()
     })
 
     it('should not render sort component when not in chat mode', () => {
       render(<Filter {...defaultProps} isChatMode={false} />)
 
-      expect(screen.getByPlaceholderText(/(?:^|\.)operation\.search(?=$|:)/))!.toBeInTheDocument()
+      expect(
+        screen.getByRole('searchbox', { name: /(?:^|\.)operation\.search(?=$|:)/ }),
+      )!.toBeInTheDocument()
     })
   })
 
@@ -246,7 +252,9 @@ describe('Filter', () => {
     it('should update keyword when typing in search input', () => {
       render(<Filter {...defaultProps} />)
 
-      const searchInput = screen.getByPlaceholderText(/(?:^|\.)operation\.search(?=$|:)/)
+      const searchInput = screen.getByRole('searchbox', {
+        name: /(?:^|\.)operation\.search(?=$|:)/,
+      })
       fireEvent.change(searchInput, { target: { value: 'test search' } })
 
       expect(mockSetQueryParams).toHaveBeenCalledWith({
@@ -392,7 +400,9 @@ describe('Filter', () => {
 
       render(<Filter {...propsWithSort} />)
 
-      expect(screen.getByPlaceholderText(/(?:^|\.)operation\.search(?=$|:)/))!.toBeInTheDocument()
+      expect(
+        screen.getByRole('searchbox', { name: /(?:^|\.)operation\.search(?=$|:)/ }),
+      )!.toBeInTheDocument()
     })
 
     it('should handle descending sort order', () => {
@@ -404,7 +414,9 @@ describe('Filter', () => {
 
       render(<Filter {...propsWithDescSort} />)
 
-      expect(screen.getByPlaceholderText(/(?:^|\.)operation\.search(?=$|:)/))!.toBeInTheDocument()
+      expect(
+        screen.getByRole('searchbox', { name: /(?:^|\.)operation\.search(?=$|:)/ }),
+      )!.toBeInTheDocument()
     })
   })
 })

web/app/components/app/log/filter.tsx

@@ -8,7 +8,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Chip from '@/app/components/base/chip'
-import Input from '@/app/components/base/input'
+import { SearchInput } from '@/app/components/base/search-input'
 import Sort from '@/app/components/base/sort'
 import { useAnnotationsCount } from '@/service/use-log'
 import {
@@ -101,16 +101,13 @@ const Filter: FC<IFilterProps> = ({
           },
         ]}
       />
-      <Input
-        wrapperClassName="w-[200px]"
-        showLeftIcon
-        showClearIcon
-        value={queryParams.keyword}
+      <SearchInput
+        className="w-50"
+        value={queryParams.keyword ?? ''}
         placeholder={t(($) => $['operation.search'], { ns: 'common' })!}
-        onChange={(e) => {
-          setQueryParams({ ...queryParams, keyword: e.target.value })
+        onValueChange={(value) => {
+          setQueryParams({ ...queryParams, keyword: value })
         }}
-        onClear={() => setQueryParams({ ...queryParams, keyword: '' })}
       />
       {isChatMode && (
         <>

web/app/components/app/workflow-log/__tests__/filter.spec.tsx

@@ -94,7 +94,9 @@ describe('Filter', () => {
       expect(screen.getByText('appLog.filter.period.last7days'))!.toBeInTheDocument()
       // Search input
       // Search input
-      expect(screen.getByPlaceholderText('common.operation.search'))!.toBeInTheDocument()
+      expect(
+        screen.getByRole('searchbox', { name: 'common.operation.search' }),
+      )!.toBeInTheDocument()
     })
   })
 
@@ -372,7 +374,7 @@ describe('Filter', () => {
 
       render(<Wrapper />)
 
-      const input = screen.getByPlaceholderText('common.operation.search')
+      const input = screen.getByRole('searchbox', { name: 'common.operation.search' })
       await user.type(input, 'workflow')
 
       // Should call setQueryParams for each character typed
@@ -392,7 +394,7 @@ describe('Filter', () => {
         />,
       )
 
-      const searchInput = screen.getByPlaceholderText('common.operation.search')
+      const searchInput = screen.getByRole('searchbox', { name: 'common.operation.search' })
       const searchField = searchInput.closest('div')!
       await user.click(within(searchField).getByRole('button', { name: 'common.operation.clear' }))
 
@@ -408,7 +410,7 @@ describe('Filter', () => {
 
       render(<Filter queryParams={createDefaultQueryParams()} setQueryParams={setQueryParams} />)
 
-      const input = screen.getByPlaceholderText('common.operation.search')
+      const input = screen.getByRole('searchbox', { name: 'common.operation.search' })
       fireEvent.change(input, { target: { value: 'new search' } })
 
       expect(setQueryParams).toHaveBeenCalledWith({
@@ -471,7 +473,7 @@ describe('Filter', () => {
         />,
       )
 
-      const input = screen.getByPlaceholderText('common.operation.search')
+      const input = screen.getByRole('searchbox', { name: 'common.operation.search' })
       expect(input)!.toHaveValue('')
     })
 
@@ -483,7 +485,7 @@ describe('Filter', () => {
         />,
       )
 
-      const input = screen.getByPlaceholderText('common.operation.search')
+      const input = screen.getByRole('searchbox', { name: 'common.operation.search' })
       expect(input)!.toHaveValue('')
     })
 
@@ -540,7 +542,7 @@ describe('Filter', () => {
         />,
       )
 
-      const input = screen.getByPlaceholderText('common.operation.search')
+      const input = screen.getByRole('searchbox', { name: 'common.operation.search' })
       await user.type(input, 'a')
 
       expect(setQueryParams).toHaveBeenCalledWith({

web/app/components/app/workflow-log/filter.tsx

@@ -9,7 +9,7 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude/utils'
 import Chip from '@/app/components/base/chip'
-import Input from '@/app/components/base/input'
+import { SearchInput } from '@/app/components/base/search-input'
 import {
   CLOUD_SANDBOX_CLEARED_TIME_PERIOD,
   CLOUD_SANDBOX_TIME_PERIOD_KEYS,
@@ -87,16 +87,13 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
           name: t(($) => $[`filter.period.${v.name}`], { ns: 'appLog' }),
         }))}
       />
-      <Input
-        wrapperClassName="w-[200px]"
-        showLeftIcon
-        showClearIcon
+      <SearchInput
+        className="w-50"
         value={queryParams.keyword ?? ''}
         placeholder={t(($) => $['operation.search'], { ns: 'common' })!}
-        onChange={(e) => {
-          setQueryParams({ ...queryParams, keyword: e.target.value })
+        onValueChange={(value) => {
+          setQueryParams({ ...queryParams, keyword: value })
         }}
-        onClear={() => setQueryParams({ ...queryParams, keyword: '' })}
       />
     </div>
   )