Merge pull request #2713 from tylerbarna/circulars-lucene-in-page-doc…

…umentation

Circulars: Add In-Page Lucene Documentation

app/components/Highlight.tsx

@@ -6,6 +6,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Icon, Tooltip } from '@trussworks/react-uswds'
+import classNames from 'classnames'
 import hljs from 'highlight.js/lib/common'
 import properties from 'highlight.js/lib/languages/properties'
 import { useState } from 'react'
@@ -17,10 +18,12 @@ export function Highlight({
   code,
   language,
   filename,
+  className,
 }: {
   code: string
   language: string
   filename?: string
+  className?: string
 }) {
   const [copyTooltip, setCopyTooltip] = useState('Copy')
 
@@ -32,7 +35,7 @@ export function Highlight({
   }
 
   return (
-    <div className="position-relative">
+    <div className={classNames('position-relative', className)}>
       <div className="pin-right pin-top">
         {filename && (
           <Tooltip

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

@@ -0,0 +1,41 @@
+/*!
+ * 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 { Highlight } from '~/components/Highlight'
+
+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>
+        <Highlight
+          language="sh"
+          code='subject:"Swift"'
+          className="grid-col-4"
+        />
+        <Highlight language="sh" code='body:"GRB"' className="grid-col-4" />
+        <Highlight
+          language="sh"
+          code='submitter:"Tomas Ahumada Mena"'
+          className="grid-col-4"
+        />
+      </div>
+    </details>
+  )
+}

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

@@ -18,9 +18,21 @@ import { Alert, Button, Icon, Label, TextInput } from '@trussworks/react-uswds'
 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 @@ import {
   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 @@ export default function () {
         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 ? (