From 0d85fbbaf2a764529c74edb59a8f06c7d544fdf6 Mon Sep 17 00:00:00 2001 From: Tyler Barna Date: Wed, 18 Sep 2024 12:06:14 -0500 Subject: [PATCH 01/12] initial commit this contains a basic accordion menu, following a similar implementation by @Courey in a seperate branch. Additional commits will add documentation, as well as a series of modals to automatically populate the search bar with common lucene search syntax --- .../CircularsLuceneMenu.tsx | 49 +++++++++++++++++++ .../circulars._archive._index/route.tsx | 4 ++ 2 files changed, 53 insertions(+) create mode 100644 app/routes/circulars._archive._index/CircularsLuceneMenu.tsx diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx new file mode 100644 index 000000000..3ccfdfbed --- /dev/null +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -0,0 +1,49 @@ +import { Button, Grid, GridContainer, Icon } from '@trussworks/react-uswds' +import React, { useState } from 'react' + +export function LuceneAccordion() { + const [isOpen, setIsOpen] = useState(false) + + return ( +
+
+
setIsOpen(!isOpen)} + > + + + +

Advanced Search

+ + +
+ +
+ + + + +
+
+
+ ) +} diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx index a40c79753..f9c81ad0e 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' @@ -260,6 +261,9 @@ export default function () { To navigate to a specific circular, enter the associated Circular ID (e.g. 'gcn123', 'Circular 123', or '123'). + + + {clean && ( <> Date: Wed, 18 Sep 2024 13:15:11 -0500 Subject: [PATCH 02/12] hide lucene menu behind feature flag --- app/routes/circulars._archive._index/route.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx index f9c81ad0e..28bb59ffe 100644 --- a/app/routes/circulars._archive._index/route.tsx +++ b/app/routes/circulars._archive._index/route.tsx @@ -51,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' @@ -261,9 +261,7 @@ 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 && ( <> Date: Wed, 18 Sep 2024 14:31:12 -0500 Subject: [PATCH 03/12] add basic documentation in accordion menu to be added: quick action buttons --- .../CircularsLuceneMenu.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx index 3ccfdfbed..acc0b5b71 100644 --- a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -1,3 +1,4 @@ +import { Link } from '@remix-run/react' import { Button, Grid, GridContainer, Icon } from '@trussworks/react-uswds' import React, { useState } from 'react' @@ -37,10 +38,13 @@ export function LuceneAccordion() { hidden={!isOpen} className="usa-accordion__content usa-prose padding-y-1" > - This is where the content for the advanced search will be displayed. - This will include a brief explanation of what Lucene is and how to - use it. There will also be a link to the Lucene documentation and - modal + 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 + + {'. '} From 1537a18967fff572a15a07036d1cddabc8cbc0fb Mon Sep 17 00:00:00 2001 From: tylerbarna Date: Wed, 25 Sep 2024 10:17:05 -0500 Subject: [PATCH 04/12] simplify accordion --- .../CircularsLuceneMenu.tsx | 63 ++++++------------- 1 file changed, 18 insertions(+), 45 deletions(-) diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx index acc0b5b71..3f72faf08 100644 --- a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -1,53 +1,26 @@ import { Link } from '@remix-run/react' -import { Button, Grid, GridContainer, Icon } from '@trussworks/react-uswds' -import React, { useState } from 'react' export function LuceneAccordion() { - const [isOpen, setIsOpen] = useState(false) - return ( -
setIsOpen(!isOpen)} > -
-
setIsOpen(!isOpen)} - > - - - -

Advanced Search

- - -
- -
- - - - -
+ 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 + + {'. '}
-
+ ) } From c52f390f123ba0ef9730b5c4c9a825930bb47b53 Mon Sep 17 00:00:00 2001 From: tylerbarna Date: Wed, 25 Sep 2024 10:45:03 -0500 Subject: [PATCH 05/12] initial structure for quick actions --- .../CircularsLuceneMenu.tsx | 28 ++++++++++++------- .../circulars._archive._index/route.tsx | 4 ++- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx index 3f72faf08..d46f491d1 100644 --- a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -1,18 +1,21 @@ import { Link } from '@remix-run/react' +import { Button } from '@trussworks/react-uswds' -export function LuceneAccordion() { +export function LuceneAccordion({ + querySetter, +}: { + querySetter: (arg0: string) => void +}) { + function populateSearch() { + querySetter('value') + console.log('clickedPopulateSearch') + return null + } return ( -
setIsOpen(!isOpen)} - > +
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{' '} @@ -20,6 +23,11 @@ export function LuceneAccordion() { Lucene Search Syntax Page {'. '} +
+ +
) diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx index 28bb59ffe..a991a4db8 100644 --- a/app/routes/circulars._archive._index/route.tsx +++ b/app/routes/circulars._archive._index/route.tsx @@ -261,7 +261,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') && } + {useFeature('CIRCULARS_LUCENE') && ( + + )} {clean && ( <> Date: Wed, 25 Sep 2024 10:45:53 -0500 Subject: [PATCH 06/12] change variable name --- app/routes/circulars._archive._index/CircularsLuceneMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx index d46f491d1..a0d72ee0e 100644 --- a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -4,7 +4,7 @@ import { Button } from '@trussworks/react-uswds' export function LuceneAccordion({ querySetter, }: { - querySetter: (arg0: string) => void + querySetter: (value: string) => void }) { function populateSearch() { querySetter('value') From 40e87914310dd7e4f2094704f063f6b9703abdda Mon Sep 17 00:00:00 2001 From: tylerbarna Date: Wed, 25 Sep 2024 10:53:54 -0500 Subject: [PATCH 07/12] added structure for buttons to update query --- .../circulars._archive._index/CircularsLuceneMenu.tsx | 10 +++++----- app/routes/circulars._archive._index/route.tsx | 3 ++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx index a0d72ee0e..2b6d7aa91 100644 --- a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -2,14 +2,14 @@ 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() { - querySetter('value') - console.log('clickedPopulateSearch') - return null + function populateSearch(value: string) { + querySetter(`${query} ${value}`) } return (
@@ -24,7 +24,7 @@ export function LuceneAccordion({ {'. '}
-
diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx index a991a4db8..4b9662cbc 100644 --- a/app/routes/circulars._archive._index/route.tsx +++ b/app/routes/circulars._archive._index/route.tsx @@ -228,6 +228,7 @@ export default function () { name="query" type="search" defaultValue={inputQuery} + value={inputQuery} placeholder="Search" aria-describedby="searchHint" onChange={({ target: { form, value } }) => { @@ -262,7 +263,7 @@ export default function () { (e.g. 'gcn123', 'Circular 123', or '123'). {useFeature('CIRCULARS_LUCENE') && ( - + )} {clean && ( <> From 575a452cb8f09dae058c7c5e26c19e88e3d5e2a2 Mon Sep 17 00:00:00 2001 From: tylerbarna Date: Wed, 25 Sep 2024 12:18:10 -0500 Subject: [PATCH 08/12] correct feature flag typo also submitted as a separate PR to ensure prompt correction --- app/routes/circulars/circulars.server.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/routes/circulars/circulars.server.ts b/app/routes/circulars/circulars.server.ts index e855838de..4dba87274 100644 --- a/app/routes/circulars/circulars.server.ts +++ b/app/routes/circulars/circulars.server.ts @@ -160,7 +160,7 @@ export async function search({ } const queryObj = query - ? feature('CICRULARS_LUCENE') + ? feature('CIRCULARS_LUCENE') ? { simple_query_string: { query, From e9652465004422c6e9c786088bec3691dacf4f47 Mon Sep 17 00:00:00 2001 From: tylerbarna Date: Wed, 25 Sep 2024 14:07:05 -0500 Subject: [PATCH 09/12] add quick action buttons --- .../CircularsLuceneMenu.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx index 2b6d7aa91..92f040028 100644 --- a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -23,9 +23,23 @@ export function LuceneAccordion({ Lucene Search Syntax Page {'. '} +
Lucene Examples
- + + +
From 6401a2db1a4d54e1b1109b02c6c6a623f0b43bec Mon Sep 17 00:00:00 2001 From: tylerbarna Date: Wed, 25 Sep 2024 14:27:49 -0500 Subject: [PATCH 10/12] fix typo --- app/routes/circulars._archive._index/CircularsLuceneMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx index 92f040028..0ea971b52 100644 --- a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -37,9 +37,9 @@ export function LuceneAccordion({ From 2e6567d6460de2f905f5d7a102642cab65bf28a9 Mon Sep 17 00:00:00 2001 From: tylerbarna Date: Wed, 25 Sep 2024 14:54:43 -0500 Subject: [PATCH 11/12] minor style changes --- .../circulars._archive._index/CircularsLuceneMenu.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx index 0ea971b52..c52ccf9bc 100644 --- a/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx +++ b/app/routes/circulars._archive._index/CircularsLuceneMenu.tsx @@ -23,20 +23,25 @@ export function LuceneAccordion({ Lucene Search Syntax Page {'. '} -
Lucene Examples
+

Lucene Examples:

- -