Circulars Archive Group View (#2617)

Resolves #2544.

__tests__/synonyms.server.ts

@@ -1,3 +1,10 @@
+/*!
+ * 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 { tables } from '@architect/functions'
 import type { AWSError, DynamoDB } from 'aws-sdk'
 import * as awsSDKMock from 'aws-sdk-mock'
@@ -10,6 +17,17 @@ import {
 } from '~/routes/synonyms/synonyms.server'
 
 jest.mock('@architect/functions')
+
+// Github-slugger is mocked to prevent jest failing to properly load the package. If Jest attempts
+// to load it, it will encounter a syntax error. Since these eventIds do not have any characters that
+// would be changed by the slugger, ensuring they are all lowercase is enough to mock the behavior
+// of github-slugger in this case.
+jest.mock('github-slugger', () => ({
+  slug: (eventId: string) => {
+    return eventId.toLowerCase()
+  },
+}))
+
 const synonymId = 'abcde-abcde-abcde-abcde-abcde'
 const altSynonymId1 = 'zyxw-zyxw-zyxw-zyxw-zyxw'
 const altSynonymId2 = 'lmno-lmno-lmno-lmno-lmno'
@@ -205,6 +223,7 @@ describe('putSynonyms', () => {
             PutRequest: {
               Item: {
                 eventId: 'eventId1',
+                slug: 'eventid1',
                 synonymId,
               },
             },
@@ -213,6 +232,7 @@ describe('putSynonyms', () => {
             PutRequest: {
               Item: {
                 eventId: 'eventId2',
+                slug: 'eventid2',
                 synonymId,
               },
             },
@@ -247,12 +267,20 @@ describe('putSynonyms', () => {
         synonyms: [
           {
             PutRequest: {
-              Item: { eventId: 'eventId3', synonymId: altSynonymId1 },
+              Item: {
+                eventId: 'eventId3',
+                slug: 'eventid3',
+                synonymId: altSynonymId1,
+              },
             },
           },
           {
             PutRequest: {
-              Item: { eventId: 'eventId4', synonymId: altSynonymId2 },
+              Item: {
+                eventId: 'eventId4',
+                slug: 'eventid4',
+                synonymId: altSynonymId2,
+              },
             },
           },
         ],
@@ -296,6 +324,7 @@ describe('putSynonyms', () => {
             PutRequest: {
               Item: {
                 eventId: 'eventId3',
+                slug: 'eventid3',
                 synonymId: altSynonymId1,
               },
             },
@@ -304,6 +333,7 @@ describe('putSynonyms', () => {
             PutRequest: {
               Item: {
                 eventId: 'eventId4',
+                slug: 'eventid4',
                 synonymId: altSynonymId2,
               },
             },
@@ -312,6 +342,7 @@ describe('putSynonyms', () => {
             PutRequest: {
               Item: {
                 eventId: 'eventId1',
+                slug: 'eventid1',
                 synonymId,
               },
             },
@@ -320,6 +351,7 @@ describe('putSynonyms', () => {
             PutRequest: {
               Item: {
                 eventId: 'eventId2',
+                slug: 'eventid2',
                 synonymId,
               },
             },

__tests__/table-streams/synonyms.ts

@@ -1,3 +1,10 @@
+/*!
+ * 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 { tables } from '@architect/functions'
 import { search } from '@nasa-gcn/architect-functions-search'
 import type { DynamoDBRecord } from 'aws-lambda'
@@ -14,6 +21,7 @@ const putData = {
   id: synonymId,
   body: {
     synonymId,
+    slugs: [] as string[],
     eventIds: [] as string[],
   },
 }
@@ -22,6 +30,16 @@ jest.mock('@nasa-gcn/architect-functions-search', () => ({
   search: jest.fn(),
 }))
 
+// Github-slugger is mocked to prevent jest failing to properly load the package. If Jest attempts
+// to load it, it will encounter a syntax error. Since these eventIds do not have any characters that
+// would be changed by the slugger, ensuring they are all lowercase is enough to mock the behavior
+// of github-slugger in this case.
+jest.mock('github-slugger', () => ({
+  slug: (eventId: string) => {
+    return eventId.toLowerCase()
+  },
+}))
+
 jest.mock('@architect/functions', () => ({
   tables: jest.fn(),
 }))

app.arc

@@ -143,6 +143,10 @@ synonyms
   synonymId *String
   name synonymsByUuid
 
+synonyms
+  slug *String
+  name synonymsBySlug
+
 @aws
 runtime nodejs22.x
 region us-east-1

app/routes/circulars.$circularId.($version)/AstroDataContext.tsx → app/components/circularDisplay/AstroDataContext.tsx

@@ -30,6 +30,7 @@ export const AstroDataContext = createContext<AstroDataContextProps>({})
 /**
  * An Astro Flavored Markdown enriched link.
  */
+// eslint-disable-next-line react/display-name
 export const AstroDataLink = forwardRef(
   (
     {

app/routes/circulars.$circularId.($version)/FrontMatter.tsx → app/components/circularDisplay/FrontMatter.tsx

@@ -8,8 +8,8 @@
 import { Grid } from '@trussworks/react-uswds'
 import type { ReactNode } from 'react'
 
-import { type Circular, formatDateISO } from '../circulars/circulars.lib'
 import TimeAgo from '~/components/TimeAgo'
+import { type Circular, formatDateISO } from '~/routes/circulars/circulars.lib'
 
 const submittedHowMap = {
   web: 'Web form',

app/components/pagination/Pagination.tsx

@@ -17,19 +17,22 @@ function getPageLink({
   query,
   startDate,
   endDate,
+  view,
 }: {
   page: number
   limit?: number
   query?: string
   startDate?: string
   endDate?: string
+  view?: string
 }) {
   const searchParams = new URLSearchParams()
   if (page > 1) searchParams.set('page', page.toString())
-  if (limit && limit != 100) searchParams.set('limit', limit.toString())
+  if (limit) searchParams.set('limit', limit.toString())
   if (query) searchParams.set('query', query)
   if (startDate) searchParams.set('startDate', startDate)
   if (endDate) searchParams.set('endDate', endDate)
+  searchParams.set('view', view || 'index')
 
   const searchString = searchParams.toString()
   return searchString && `?${searchString}`
@@ -38,6 +41,7 @@ function getPageLink({
 export default function Pagination({
   page,
   totalPages,
+  view,
   ...queryStringProps
 }: {
   page: number
@@ -46,8 +50,10 @@ export default function Pagination({
   query?: string
   startDate?: string
   endDate?: string
+  view?: string
 }) {
   const pages = usePagination({ currentPage: page, totalPages })
+
   return (
     <nav aria-label="Pagination" className="usa-pagination">
       <ul className="usa-pagination__list">
@@ -63,6 +69,7 @@ export default function Pagination({
                     <Link
                       to={getPageLink({
                         page: pageProps.number,
+                        view,
                         ...queryStringProps,
                       })}
                       className="usa-pagination__link usa-pagination__previous-page"
@@ -102,6 +109,7 @@ export default function Pagination({
                     <Link
                       to={getPageLink({
                         page: pageProps.number,
+                        view,
                         ...queryStringProps,
                       })}
                       className="usa-pagination__link usa-pagination__next-page"
@@ -124,6 +132,7 @@ export default function Pagination({
                   <Link
                     to={getPageLink({
                       page: pageProps.number,
+                      view,
                       ...queryStringProps,
                     })}
                     className={classNames('usa-pagination__button', {

app/components/pagination/PaginationSelectionFooter.tsx

@@ -16,24 +16,28 @@ export default function PaginationSelectionFooter({
   limit,
   query,
   form,
+  view,
 }: {
   page: number
   totalPages: number
   limit?: number
   query?: string
   form: string
+  view?: string
 }) {
   const submit = useSubmit()
+
   return (
     <div className="display-flex flex-row flex-wrap">
       <div className="display-flex flex-align-self-center margin-right-2 width-auto">
         <div>
+          <input type="hidden" form={form} name="view" id="view" value={view} />
           <Select
             id="limit"
             title="Number of results per page"
             className="width-auto height-5 padding-y-0 margin-y-0"
             name="limit"
-            defaultValue="100"
+            value={limit}
             form={form}
             onChange={({ target: { form } }) => {
               submit(form)
@@ -53,6 +57,7 @@ export default function PaginationSelectionFooter({
             page={page}
             limit={limit}
             totalPages={totalPages}
+            view={view}
           />
         )}
       </div>

app/routes/circulars.$circularId.($version)/route.tsx

@@ -15,11 +15,11 @@ import { useOnClickOutside } from 'usehooks-ts'
 
 import type { loader as parentLoader } from '../circulars.$circularId/route'
 import { get } from '../circulars/circulars.server'
-import { MarkdownBody, PlainTextBody } from './Body'
-import { FrontMatter } from './FrontMatter'
 import DetailsDropdownButton from '~/components/DetailsDropdownButton'
 import DetailsDropdownContent from '~/components/DetailsDropdownContent'
 import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
+import { MarkdownBody, PlainTextBody } from '~/components/circularDisplay/Body'
+import { FrontMatter } from '~/components/circularDisplay/FrontMatter'
 import { origin } from '~/lib/env.server'
 import { getCanonicalUrlHeaders, pickHeaders } from '~/lib/headers.server'
 import { useSearchString } from '~/lib/utils'

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

@@ -0,0 +1,53 @@
+/*!
+ * 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 type { SynonymGroupWithMembers } from '../synonyms/synonyms.lib'
+
+export default function ({
+  allItems,
+  totalItems,
+  searchString,
+  query,
+}: {
+  allItems: SynonymGroupWithMembers[]
+  totalItems: number
+  searchString: string
+  query?: string
+}) {
+  return (
+    <>
+      {query && (
+        <h3>
+          {totalItems} result{totalItems != 1 && 's'} found.
+        </h3>
+      )}
+
+      {allItems.map(({ synonymId, eventIds, slugs, members }) => (
+        <div key={synonymId}>
+          <details>
+            <summary>
+              <Link to={`/circulars/events/${slugs.sort()[0]}${searchString}`}>
+                {eventIds.join(', ')}
+              </Link>
+            </summary>
+            <ol className="margin-left-3">
+              {members.map(({ circularId, subject }) => {
+                return (
+                  <li key={circularId} value={circularId}>
+                    <Link to={`/circulars/${circularId}`}>{subject}</Link>
+                  </li>
+                )
+              })}
+            </ol>
+          </details>
+        </div>
+      ))}
+    </>
+  )
+}