Circulars: Add In-Page Lucene Documentation

app/routes/circulars._archive._index/LuceneMenu.tsx

@@ -0,0 +1,36 @@
+import { Link } from '@remix-run/react'
+import { Button } from '@trussworks/react-uswds'
+import CopyToClipboard from 'react-copy-to-clipboard'
+
+export function LuceneAccordion() {
+  function copyableButton(text: string) {
+    return (
+      <CopyToClipboard text={text}>
+        <Button type="button" outline>
+          {text}
+        </Button>
+      </CopyToClipboard>
+    )
+  }
+  return (
+    <details>
+      <summary>Advanced Search</summary>
+
+      <div>
+        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{' '}
+        <Link className="usa-link" to="/docs/circulars/lucene">
+          Lucene Search Syntax Page
+        </Link>
+        {'. '}
+        <h4>Lucene Examples (click to copy):</h4>
+        <div>
+          {copyableButton('subject:"Swift"')}
+          {copyableButton('body:"GRB"')}
+          {copyableButton('submitter:"Tomas Ahumada Mena"')}
+        </div>
+      </div>
+    </details>
+  )
+}

app/routes/circulars._archive._index/route.tsx

@@ -37,14 +37,15 @@
 import CircularsHeader from './CircularsHeader'
 import CircularsIndex from './CircularsIndex'
 import { DateSelector } from './DateSelectorMenu'
+import { LuceneAccordion } from './LuceneMenu'
 import { SortSelector } from './SortSelectorButton'
 import Hint from '~/components/Hint'
 import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
 import PaginationSelectionFooter from '~/components/pagination/PaginationSelectionFooter'
 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'
 
@@ -271,6 +272,7 @@
         To navigate to a specific circular, enter the associated Circular ID
         (e.g. 'gcn123', 'Circular 123', or '123').
       </Hint>
+      {useFeature('CIRCULARS_LUCENE') && <LuceneAccordion />}
       {clean && (
         <>
           <CircularsIndex