Refactor search context

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Added
 - Add `<CustomRendering/>` to override presentation ([#382](https://github.com/cucumber/react-components/pull/382))
+- Add `<ControlledSearchProvider/>`, `<InMemorySearchProvider/>` and `<UrlSearchProvider/>` to provide search state ([#384](https://github.com/cucumber/react-components/pull/384))
 
 ### Fixed
 - Make keyword spacing look right ([#376](https://github.com/cucumber/react-components/pull/376))
@@ -23,6 +24,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Removed
 - BREAKING CHANGE: Remove `EnvelopesQuery` and its React context ([#374](https://github.com/cucumber/react-components/pull/374))
 - BREAKING CHANGE: Remove defunct `<CucumberReact/>` component ([#382](https://github.com/cucumber/react-components/pull/382))
+- BREAKING CHANGE: Remove `SearchQueryContext`, `<SearchWrapper/>` and related defunct symbols ([#384](https://github.com/cucumber/react-components/pull/384)) 
 
 ## [22.4.1] - 2025-03-30
 ### Fixed

src/SearchContext.ts

@@ -0,0 +1,17 @@
+import { TestStepResultStatus as Status } from '@cucumber/messages'
+import React from 'react'
+
+export interface SearchState {
+  readonly query: string
+  readonly hideStatuses: readonly Status[]
+}
+
+export interface SearchContextValue extends SearchState {
+  update: (changes: Partial<SearchState>) => void
+}
+
+export default React.createContext<SearchContextValue>({
+  query: '',
+  hideStatuses: [],
+  update: () => {},
+})

src/components/app/ControlledSearchProvider.tsx

@@ -0,0 +1,25 @@
+import React, { FC, PropsWithChildren, useMemo } from 'react'
+
+import SearchQueryContext, { SearchContextValue, SearchState } from '../../SearchContext.js'
+
+interface Props {
+  value: SearchState
+  onChange: (newValue: SearchState) => void
+}
+
+export const ControlledSearchProvider: FC<PropsWithChildren<Props>> = ({
+  value,
+  onChange,
+  children,
+}) => {
+  const contextValue: SearchContextValue = useMemo(() => {
+    return {
+      query: value.query,
+      hideStatuses: value.hideStatuses,
+      update: (newValues: Partial<SearchState>) => {
+        onChange({ ...value, ...newValues })
+      },
+    }
+  }, [value, onChange])
+  return <SearchQueryContext.Provider value={contextValue}>{children}</SearchQueryContext.Provider>
+}

src/components/app/FilteredResults.spec.tsx

@@ -2,25 +2,23 @@ import { Envelope } from '@cucumber/messages'
 import { render, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { expect } from 'chai'
-import React, { VoidFunctionComponent } from 'react'
+import React, { FC } from 'react'
 
 import attachments from '../../../acceptance/attachments/attachments.feature.js'
 import examplesTables from '../../../acceptance/examples-tables/examples-tables.feature.js'
 import minimal from '../../../acceptance/minimal/minimal.feature.js'
 import targetedRun from '../../../samples/targeted-run.js'
-import SearchQueryContext, { useSearchQueryCtx } from '../../SearchQueryContext.js'
 import { EnvelopesWrapper } from './EnvelopesWrapper.js'
 import { FilteredResults } from './FilteredResults.js'
+import { InMemorySearchProvider } from './InMemorySearchProvider.js'
 
 describe('FilteredResults', () => {
-  const TestableFilteredResults: VoidFunctionComponent<{ envelopes: Envelope[] }> = ({
-    envelopes,
-  }) => {
+  const TestableFilteredResults: FC<{ envelopes: Envelope[] }> = ({ envelopes }) => {
     return (
       <EnvelopesWrapper envelopes={envelopes}>
-        <SearchQueryContext.Provider value={useSearchQueryCtx({})}>
+        <InMemorySearchProvider>
           <FilteredResults />
-        </SearchQueryContext.Provider>
+        </InMemorySearchProvider>
       </EnvelopesWrapper>
     )
   }

src/components/app/FilteredResults.stories.tsx

@@ -6,7 +6,7 @@ import testData from '../../../acceptance/examples-tables/examples-tables.featur
 import targetedRun from '../../../samples/targeted-run.js'
 import { EnvelopesWrapper } from './EnvelopesWrapper.js'
 import { FilteredResults } from './FilteredResults.js'
-import { SearchWrapper } from './SearchWrapper.js'
+import { InMemorySearchProvider } from './InMemorySearchProvider.js'
 
 export default {
   title: 'App/FilteredResults',
@@ -19,9 +19,9 @@ type TemplateArgs = {
 const Template: Story<TemplateArgs> = ({ envelopes }) => {
   return (
     <EnvelopesWrapper envelopes={envelopes}>
-      <SearchWrapper>
+      <InMemorySearchProvider>
         <FilteredResults />
-      </SearchWrapper>
+      </InMemorySearchProvider>
     </EnvelopesWrapper>
   )
 }

src/components/app/HighLight.tsx

@@ -3,7 +3,7 @@ import highlightWords from 'highlight-words'
 import React from 'react'
 import ReactMarkdown from 'react-markdown'
 
-import SearchQueryContext from '../../SearchQueryContext.js'
+import { useSearch } from '../../hooks/index.js'
 import rehypePlugins from './rehypePlugins.js'
 import remarkPlugins from './remarkPlugins.js'
 
@@ -30,7 +30,7 @@ export const HighLight: React.FunctionComponent<IProps> = ({
   markdown = false,
   className = '',
 }) => {
-  const searchQueryContext = React.useContext(SearchQueryContext)
+  const searchQueryContext = useSearch()
   const query = allQueryWords(
     searchQueryContext.query ? searchQueryContext.query.split(' ') : []
   ).join(' ')