Circulars: Add In-Page Lucene Documentation

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

@@ -0,0 +1,35 @@
+/*!
+ * Copyright © 2023 United States Government as represented by the
+ * Administrator of the National Aeronautics and Space Administration.
+ * All Rights Reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Link } from '@remix-run/react'
+
+import { CopyableCode } from '~/components/CopyableCode'
+
+export function LuceneAccordion() {
+  return (
+    <details>
+      <summary>Advanced Search</summary>
+      <p className="usa-paragraph">
+        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{' '}
+        <Link className="usa-link" to="/docs/circulars/advanced-search">
+          here
+        </Link>
+        {'. '}
+      </p>
+      <h4>Lucene Examples (click to copy):</h4>
+      <div>
+        <CopyableCode text='subject:"Swift"' />
+        <br />
+        <CopyableCode text='body:"GRB"' />
+        <br />
+        <CopyableCode text='submitter:"Tomas Ahumada Mena"' />
+      </div>
+    </details>
+  )
+}

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

@@ -18,9 +18,21 @@
 import clamp from 'lodash/clamp'
 import { useId, useState } from 'react'
 
+import {
+  circularRedirect,
+  createChangeRequest,
+  get,
+  getChangeRequest,
+  getChangeRequests,
+  moderatorGroup,
+  put,
+  putVersion,
+  search,
+} from '../circulars/circulars.server'
 import CircularsHeader from './CircularsHeader'
 import CircularsIndex from './CircularsIndex'
 import { DateSelector } from './DateSelectorMenu'
+import { LuceneAccordion } from './LuceneMenu'
 import { SortSelector } from './SortSelectorButton'
 import SynonymGroupIndex from './SynonymGroupIndex'
 import Hint from '~/components/Hint'
@@ -36,17 +48,6 @@
   type CircularMetadata,
   circularFormats,
 } from '~/routes/circulars/circulars.lib'
-import {
-  circularRedirect,
-  createChangeRequest,
-  get,
-  getChangeRequest,
-  getChangeRequests,
-  moderatorGroup,
-  put,
-  putVersion,
-  search,
-} from '~/routes/circulars/circulars.server'
 import type { SynonymGroupWithMembers } from '~/routes/synonyms/synonyms.lib'
 import { groupMembersByEventId } from '~/routes/synonyms/synonyms.server'
 
@@ -319,6 +320,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 && (
         <>
           {isGroupView ? (