feat: implement bidirectional sync between search box and filter state for Issue and CL (#1601)

juanlou1217 · web-flow · commit 4fed07721d32 · 2025-11-01T02:03:30.000Z
- Leverage additional object with filter state as single source of truth
- Fix null value issue when selecting labels in Issue
- Fix bug where labels are cleared after selecting assignee in Issue/CL
- Comment out Search component in Issue, replace with read-only filter display
- Simplify dropdown configs to directly update state
diff --git a/moon/apps/web/components/ClView/index.tsx b/moon/apps/web/components/ClView/index.tsx
@@ -48,10 +48,6 @@ import { Heading } from './catalyst/heading'
 
 type ItemsType = NonNullable<PostApiClListData['data']>['items']
 
-const escapeRegExp = (str: string): string => {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}
-
 export default function CLView() {
   const { scope } = useScope()
   const [clList, setClList] = useState<ItemsType>([])
@@ -85,8 +81,71 @@ export default function CLView() {
 
   const [review, setReview] = useAtom(reviewAtom)
 
+  const autoGeneratedQuery = useMemo(() => {
+    const parts: string[] = []
+
+    if (sort.Author) {
+      parts.push(`author:${sort.Author}`)
+    }
+
+    if (sort.Assignees) {
+      parts.push(`assignee:${sort.Assignees}`)
+    }
+
+    if (label.length > 0) {
+      const labelNames = label
+        .map((id) => labelList.find((l) => String(l.id) === id)?.name)
+        .filter((name): name is string => Boolean(name))
+
+      labelNames.forEach((name: string) => {
+        parts.push(`label:${name}`)
+      })
+    }
+
+    if (review) {
+      parts.push(`review:${review}`)
+    }
+
+    return parts.join(' ')
+  }, [sort, label, labelList, review])
+
   const [searchQuery, setSearchQuery] = useState('')
 
+  useEffect(() => {
+    setSearchQuery(autoGeneratedQuery)
+  }, [autoGeneratedQuery])
+
+  const parseAndApplyQuery = useCallback(
+    (query: string) => {
+      const authorMatch = query.match(/author:(\S+)/)
+      const newAuthor = authorMatch ? authorMatch[1] : ''
+
+      const assigneeMatch = query.match(/assignee:(\S+)/)
+      const newAssignee = assigneeMatch ? assigneeMatch[1] : ''
+
+      const labelRegex = /label:"([^"]+)"|label:(\S+)/g
+      const labelNames: string[] = []
+      let labelMatch
+
+      while ((labelMatch = labelRegex.exec(query)) !== null) {
+        const labelName = labelMatch[1] || labelMatch[2]
+
+        if (labelName) labelNames.push(labelName)
+      }
+
+      const reviewMatch = query.match(/review:(\S+)/)
+      const reviewValue = reviewMatch ? reviewMatch[1] : ''
+
+      const newLabelIds =
+        labelNames.length > 0 ? labelList.filter((l) => labelNames.includes(l.name)).map((l) => String(l.id)) : label
+
+      setSort({ ...sort, Author: newAuthor, Assignees: newAssignee })
+      setLabel(newLabelIds)
+      setReview(reviewValue)
+    },
+    [labelList, sort, label, setSort, setLabel, setReview]
+  )
+
   const additions = useCallback(
     (labels: number[]): AdditionType => {
       const additional: AdditionType = { status, asc: false }
@@ -112,7 +171,8 @@ export default function CLView() {
   const loadClList = useCallback(
     (additional?: AdditionType) => {
       setIsLoading(true)
-      const addittion = additional ? additional : additions([])
+      const labelIds = label.map((i) => Number(i))
+      const addittion = additional ? additional : additions(labelIds)
 
       fetchClList(
         {
@@ -142,7 +202,7 @@ export default function CLView() {
         }
       )
     },
-    [page, pageSize, fetchClList, additions]
+    [page, pageSize, fetchClList, additions, label]
   )
 
   useEffect(() => {
@@ -227,22 +287,9 @@ export default function CLView() {
       onSelectFactory: (item: Member) => (e: Event) => {
         e.preventDefault()
         if (item.user.username === sort['Author']) {
-          const escapedAuthor = escapeRegExp(sort['Author'])
-          const newQuery = searchQuery.replace(new RegExp(`author:${escapedAuthor}\\s*`, 'g'), '').trim()
-
-          setSearchQuery(newQuery)
-          setSort({
-            ...sort,
-            Author: ''
-          })
+          setSort({ ...sort, Author: '' })
         } else {
-          const newQuery = searchQuery ? `${searchQuery} author:${item.user.username}` : `author:${item.user.username}`
-
-          setSearchQuery(newQuery)
-          setSort({
-            ...sort,
-            Author: item.user.username
-          })
+          setSort({ ...sort, Author: item.user.username })
         }
       },
       className: 'overflow-hidden',
@@ -254,24 +301,9 @@ export default function CLView() {
       onSelectFactory: (item: Member) => (e: Event) => {
         e.preventDefault()
         if (item.user.username === sort['Assignees']) {
-          const escapedAssignee = escapeRegExp(sort['Assignees'])
-          const newQuery = searchQuery.replace(new RegExp(`assignee:${escapedAssignee}\\s*`, 'g'), '').trim()
-
-          setSearchQuery(newQuery)
-          setSort({
-            ...sort,
-            Assignees: ''
-          })
+          setSort({ ...sort, Assignees: '' })
         } else {
-          const newQuery = searchQuery
-            ? `${searchQuery} assignee:${item.user.username}`
-            : `assignee:${item.user.username}`
-
-          setSearchQuery(newQuery)
-          setSort({
-            ...sort,
-            Assignees: item.user.username
-          })
+          setSort({ ...sort, Assignees: item.user.username })
         }
       },
       className: 'overflow-hidden',
@@ -283,20 +315,11 @@ export default function CLView() {
     {
       key: 'Labels',
       isChosen: (item) => label?.includes(String(item.id)),
-
       onSelectFactory: (item) => (e: Event) => {
         e.preventDefault()
         if (label?.includes(String(item.id))) {
-          const escapedLabelName = escapeRegExp(item.name)
-          const newQuery = searchQuery.replace(new RegExp(`label:"${escapedLabelName}"\\s*`, 'g'), '').trim()
-
-          setSearchQuery(newQuery)
           setLabel(label.filter((i) => i !== String(item.id)))
         } else {
-          const escapedLabelName = escapeRegExp(item.name)
-          const newQuery = searchQuery ? `${searchQuery} label:"${escapedLabelName}"` : `label:"${escapedLabelName}"`
-
-          setSearchQuery(newQuery)
           setLabel([...label, String(item.id)])
         }
       },
@@ -309,21 +332,11 @@ export default function CLView() {
     {
       key: 'Review',
       isChosen: () => true,
-
       onSelectFactory: (item) => (e: Event) => {
         e.preventDefault()
         if (item === review) {
-          const escapedReview = escapeRegExp(review)
-          const newQuery = searchQuery.replace(new RegExp(`review:${escapedReview}\\s*`, 'g'), '').trim()
-
-          setSearchQuery(newQuery)
           setReview('')
         } else {
-          const escapedReview = escapeRegExp(review)
-          let newQuery = searchQuery.replace(new RegExp(`review:${escapedReview}\\s*`, 'g'), '').trim()
-
-          newQuery = newQuery ? `${newQuery} review:${item}` : `review:${item}`
-          setSearchQuery(newQuery)
           setReview(item)
         }
       },
@@ -471,7 +484,6 @@ export default function CLView() {
   const router = useRouter()
 
   const clearAllFilters = () => {
-    setSearchQuery('')
     setSort({ ...sort, Author: '', Assignees: '' })
     setLabel([])
     setReview('')
@@ -497,7 +509,7 @@ export default function CLView() {
                   onChange={(e) => setSearchQuery(e.target.value)}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter') {
-                      loadClList()
+                      parseAndApplyQuery(searchQuery)
                     }
                   }}
                 />
diff --git a/moon/apps/web/components/Issues/IssueIndex.tsx b/moon/apps/web/components/Issues/IssueIndex.tsx
@@ -27,6 +27,15 @@ export const IssueIndex = () => {
   // const isSearchLoading = queryDebounced.length > 0 && getNotes.isFetching
   // const isSearchLoading = queryDebounced.length > 0
 
+  const [filterQuery, setFilterQuery] = useState('')
+  const [onClearFilters, setOnClearFilters] = useState<(() => void) | undefined>()
+
+  const handleClearFilters = () => {
+    if (onClearFilters) {
+      onClearFilters()
+    }
+  }
+
   return (
     <>
       <FloatingNewDocButton />
@@ -36,8 +45,12 @@ export const IssueIndex = () => {
             <IssueBreadcrumbIcon />
           </BreadcrumbTitlebar>
           <IndexPageContent id='/[org]/issue' className={cn('@container', '3xl:max-w-7xl max-w-7xl')}>
-            <IssueSearch />
-            <IssuesContent searching={isSearching} />
+            <IssueSearch filterQuery={filterQuery} onClearFilters={handleClearFilters} />
+            <IssuesContent 
+              searching={isSearching} 
+              setFilterQuery={setFilterQuery}
+              onRegisterClearFilters={setOnClearFilters}
+            />
           </IndexPageContent>
         </IndexPageContainer>
         <SplitViewDetail />
diff --git a/moon/apps/web/components/Issues/IssueSearch.tsx b/moon/apps/web/components/Issues/IssueSearch.tsx
@@ -1,31 +1,38 @@
-import { useState } from 'react'
-import { useDebounce } from 'use-debounce'
+// import { useState } from 'react'
+// import { useDebounce } from 'use-debounce'
+
+import { XIcon } from '@primer/octicons-react'
 
 import { Button, Link } from '@gitmono/ui'
 
 import { BreadcrumbTitlebar } from '@/components/Titlebar/BreadcrumbTitlebar'
 import { useScope } from '@/contexts/scope'
 
-import Search from './Search'
-import { fuseOptions, searchList } from './utils/consts'
+// import Search from './Search'
+// import { fuseOptions, searchList } from './utils/consts'
+
+interface IssueSearchProps {
+  filterQuery?: string
+  onClearFilters?: () => void
+}
 
-export default function IssueSearch() {
-  const [query, setQuery] = useState('')
-  const [queryDebounced] = useDebounce(query, 150)
-  const [open, setOpen] = useState(false)
-  const handleQuery = (val: string) => {
-    setOpen(true)
-    setQuery(val)
-  }
+export default function IssueSearch({ filterQuery, onClearFilters }: IssueSearchProps) {
+  // const [query, setQuery] = useState('')
+  // const [queryDebounced] = useDebounce(query, 150)
+  // const [open, setOpen] = useState(false)
+  // const handleQuery = (val: string) => {
+  //   setOpen(true)
+  //   setQuery(val)
+  // }
 
   // const isSearching = query.length > 0
   // const isSearchLoading = queryDebounced.length > 0 && getNotes.isFetching
-  const isSearchLoading = queryDebounced.length > 0
+  // const isSearchLoading = queryDebounced.length > 0
 
   return (
     <>
       <BreadcrumbTitlebar className='z-20 justify-between border-b-0 px-0'>
-        <Search
+        {/* <Search
           SearchQuery={{ query, setQuery: handleQuery, isSearchLoading }}
           SearchListTable={{
             open,
@@ -36,7 +43,26 @@ export default function IssueSearch() {
             fuseOptions,
             searchList
           }}
-        />
+        /> */}
+
+        <div className='relative flex flex-1 items-center'>
+          <input
+            type='text'
+            value={filterQuery || ''}
+            readOnly
+            placeholder='Filter issues by author, assignee, or labels...'
+            className='flex-1 rounded-md border border-gray-300 bg-gray-50 px-3 py-2 pr-10 text-sm text-gray-700'
+          />
+          {filterQuery && (
+            <button
+              onClick={onClearFilters}
+              className='absolute right-2 flex items-center justify-center rounded-md p-1 text-gray-400 transition-all hover:bg-gray-200 hover:text-gray-600'
+              title='Clear filters'
+            >
+              <XIcon className='h-4 w-4' />
+            </button>
+          )}
+        </div>
         {/* <IndexSearchInput query={query} setQuery={setQuery} isSearchLoading={isSearchLoading} /> */}
         <LabelsButton />
         <NewIssueButton />
@@ -67,4 +93,4 @@ const LabelsButton = () => {
       </Button>
     </Link>
   )
-}
+}
diff --git a/moon/apps/web/components/Issues/IssuesContent.tsx b/moon/apps/web/components/Issues/IssuesContent.tsx
