diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx new file mode 100644 index 000000000..535bf8590 --- /dev/null +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -0,0 +1,53 @@ +import { Link } from '@remix-run/react' +import { Button } from '@trussworks/react-uswds' + +export function LuceneAccordion({ + query, + querySetter, +}: { + query?: string + querySetter: (value: string) => void +}) { + function populateSearch(value: string) { + querySetter(`${query} ${value}`) + } + return ( +
+ Advanced Search + +
+ To narrow the search results, use Lucene search syntax. This allows for + specifying which circular field to search (submitter, subject, and/or + body). Further documentation can be found on the{' '} + + Lucene Search Syntax Page + + {'. '} +

Lucene Examples:

+
+ + + +
+
+
+ ) +} diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx index a40c79753..4b9662cbc 100644 --- a/app/routes/circulars._archive._index/route.tsx +++ b/app/routes/circulars._archive._index/route.tsx @@ -43,6 +43,7 @@ import { import CircularPagination from './CircularPagination' import CircularsHeader from './CircularsHeader' import CircularsIndex from './CircularsIndex' +import { LuceneAccordion } from './CircularsLuceneMenu' import { DateSelector } from './DateSelectorMenu' import { SortSelector } from './SortSelectorButton' import Hint from '~/components/Hint' @@ -50,7 +51,7 @@ import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup' import { origin } from '~/lib/env.server' import { getFormDataString } from '~/lib/utils' import { postZendeskRequest } from '~/lib/zendesk.server' -import { useModStatus } from '~/root' +import { useFeature, useModStatus } from '~/root' import searchImg from 'nasawds/src/img/usa-icons-bg/search--white.svg' @@ -227,6 +228,7 @@ export default function () { name="query" type="search" defaultValue={inputQuery} + value={inputQuery} placeholder="Search" aria-describedby="searchHint" onChange={({ target: { form, value } }) => { @@ -260,6 +262,9 @@ export default function () { To navigate to a specific circular, enter the associated Circular ID (e.g. 'gcn123', 'Circular 123', or '123'). + {useFeature('CIRCULARS_LUCENE') && ( + + )} {clean && ( <>