Show an input to query the list

Refs #1742

integration/finding-a-review.spec.ts

@@ -850,11 +850,16 @@ test.extend(canUseSearchQueries)('can find an older review of a certain preprint
   await page.goto('/')
   await page.getByRole('link', { name: 'See all reviews' }).click()
 
+  const filters = page.getByRole('search', { name: 'Filter' })
+
   await expect(page).toHaveTitle('Recent PREreviews (page 1) | PREreview')
+  await expect(filters.getByLabel('Query')).toHaveValue('')
 
-  await page.goto('/reviews?query=Chlamydomonas+reinhardtii')
+  await filters.getByLabel('Query').fill('Chlamydomonas reinhardtii')
+  await filters.getByRole('button', { name: 'Filter results' }).click()
 
   await expect(page).toHaveTitle('Recent PREreviews (Chlamydomonas reinhardtii, page 1) | PREreview')
+  await expect(filters.getByLabel('Query')).toHaveValue('Chlamydomonas reinhardtii')
 })
 
 test('can view an older review in a specific language', async ({ page }) => {

src/reviews-page/index.ts

@@ -32,10 +32,12 @@ export const reviewsPage = ({
       error =>
         match(error)
           .with('not-found', () =>
-            page === 1 ? emptyPage({ field, language, query: canUseSearchQueries ? query : undefined }) : pageNotFound,
+            page === 1
+              ? emptyPage({ field, language, query: canUseSearchQueries ? query : undefined }, canUseSearchQueries)
+              : pageNotFound,
           )
           .with('unavailable', () => failureMessage)
           .exhaustive(),
-      createPage,
+      prereviews => createPage(prereviews, canUseSearchQueries),
     ),
   )

src/reviews-page/reviews-page.ts

@@ -19,14 +19,17 @@ import type { NonEmptyString } from '../types/string'
 import { getSubfieldName } from '../types/subfield'
 import type { RecentPrereviews } from './recent-prereviews'
 
-export const createPage = ({ currentPage, field, language, query, totalPages, recentPrereviews }: RecentPrereviews) =>
+export const createPage = (
+  { currentPage, field, language, query, totalPages, recentPrereviews }: RecentPrereviews,
+  canUseSearchQueries: boolean,
+) =>
   PageResponse({
     title: title({ currentPage, field, language, query }),
     extraSkipLink: [html`Skip to results`, '#results'],
     main: html`
       <h1>Recent PREreviews</h1>
 
-      ${form({ field, language, query })}
+      ${form({ canUseSearchQueries, field, language, query })}
 
       <ol class="cards" id="results">
         ${pipe(
@@ -111,18 +114,17 @@ export const createPage = ({ currentPage, field, language, query, totalPages, re
     current: 'reviews',
   })
 
-export const emptyPage = ({
-  field,
-  language,
-  query,
-}: { field?: FieldId; language?: LanguageCode; query?: NonEmptyString } = {}) =>
+export const emptyPage = (
+  { field, language, query }: { field?: FieldId; language?: LanguageCode; query?: NonEmptyString },
+  canUseSearchQueries: boolean,
+) =>
   PageResponse({
     title: title({ currentPage: 1, field, language, query }),
     extraSkipLink: [html`Skip to results`, '#results'],
     main: html`
       <h1>Recent PREreviews</h1>
 
-      ${form({ field, language, query })}
+      ${form({ canUseSearchQueries, field, language, query })}
 
       <div class="inset" id="results">
         <p>No PREreviews have been published yet.</p>
@@ -147,7 +149,12 @@ const title = ({
   return plainText`Recent PREreviews (${formatList('en', { style: 'narrow' })(details)})`
 }
 
-const form = ({ field, language, query }: Pick<RecentPrereviews, 'field' | 'language' | 'query'>) => html`
+const form = ({
+  canUseSearchQueries,
+  field,
+  language,
+  query,
+}: Pick<RecentPrereviews, 'field' | 'language' | 'query'> & { canUseSearchQueries: boolean }) => html`
   <form
     method="get"
     action="${format(reviewsMatch.formatter, {})}"
@@ -157,7 +164,14 @@ const form = ({ field, language, query }: Pick<RecentPrereviews, 'field' | 'lang
   >
     <h2 class="visually-hidden" id="filter-label">Filter</h2>
     <input type="hidden" name="page" value="1" />
-    ${query ? html`<input type="hidden" name="query" value="${query}" />` : ''}
+    ${canUseSearchQueries
+      ? html`<div>
+          <label for="query">Query</label>
+          <input type="text" name="query" id="query" ${query === undefined ? '' : html`value="${query}"`} />
+        </div>`
+      : query
+        ? html`<input type="hidden" name="query" value="${query}" />`
+        : ''}
     <div>
       <label for="language">Language</label>
       <select name="language" id="language">

visual-regression/reviews-page/reviews-page.spec.ts

@@ -9,106 +9,124 @@ import { expect, test } from '../base'
 import PlainDate = Temporal.PlainDate
 
 test('content looks right', async ({ showPage }) => {
-  const response = createPage({
-    currentPage: 1,
-    totalPages: 3,
-    recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
-  })
+  const response = createPage(
+    {
+      currentPage: 1,
+      totalPages: 3,
+      recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
+    },
+    false,
+  )
 
   const content = await showPage(response)
 
   await expect(content).toHaveScreenshot()
 })
 
 test('content looks right with a query', async ({ showPage }) => {
-  const response = createPage({
-    currentPage: 1,
-    totalPages: 3,
-    query: 'Josiah Carberry' as NonEmptyString,
-    recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
-  })
+  const response = createPage(
+    {
+      currentPage: 1,
+      totalPages: 3,
+      query: 'Josiah Carberry' as NonEmptyString,
+      recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
+    },
+    true,
+  )
 
   const content = await showPage(response)
 
   await expect(content).toHaveScreenshot()
 })
 
 test('content looks right with a language', async ({ showPage }) => {
-  const response = createPage({
-    currentPage: 1,
-    totalPages: 3,
-    language: 'es',
-    recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
-  })
+  const response = createPage(
+    {
+      currentPage: 1,
+      totalPages: 3,
+      language: 'es',
+      recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
+    },
+    false,
+  )
 
   const content = await showPage(response)
 
   await expect(content).toHaveScreenshot()
 })
 
 test('content looks right with a field', async ({ showPage }) => {
-  const response = createPage({
-    currentPage: 1,
-    totalPages: 3,
-    field: '30',
-    recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
-  })
+  const response = createPage(
+    {
+      currentPage: 1,
+      totalPages: 3,
+      field: '30',
+      recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
+    },
+    false,
+  )
 
   const content = await showPage(response)
 
   await expect(content).toHaveScreenshot()
 })
 
 test('content looks right when empty', async ({ showPage }) => {
-  const response = emptyPage()
+  const response = emptyPage({}, false)
 
   const content = await showPage(response)
 
   await expect(content).toHaveScreenshot()
 })
 
 test('content looks right when empty with a query', async ({ showPage }) => {
-  const response = emptyPage({ query: 'Josiah Carberry' as NonEmptyString })
+  const response = emptyPage({ query: 'Josiah Carberry' as NonEmptyString }, true)
 
   const content = await showPage(response)
 
   await expect(content).toHaveScreenshot()
 })
 
 test('content looks right when empty with a language', async ({ showPage }) => {
-  const response = emptyPage({ language: 'es' })
+  const response = emptyPage({ language: 'es' }, false)
 
   const content = await showPage(response)
 
   await expect(content).toHaveScreenshot()
 })
 
 test('content looks right when empty with a field', async ({ showPage }) => {
-  const response = emptyPage({ field: '30' })
+  const response = emptyPage({ field: '30' }, false)
 
   const content = await showPage(response)
 
   await expect(content).toHaveScreenshot()
 })
 
 test('content looks on a middle page', async ({ showPage }) => {
-  const response = createPage({
-    currentPage: 2,
-    totalPages: 3,
-    recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
-  })
+  const response = createPage(
+    {
+      currentPage: 2,
+      totalPages: 3,
+      recentPrereviews: [recentPrereview1, recentPrereview2, recentPrereview3, recentPrereview4, recentPrereview5],
+    },
+    false,
+  )
 
   const content = await showPage(response)
 
   await expect(content).toHaveScreenshot()
 })
 
 test('content looks on the last page', async ({ showPage }) => {
-  const response = createPage({
-    currentPage: 3,
-    totalPages: 3,
-    recentPrereviews: [recentPrereview1],
-  })
+  const response = createPage(
+    {
+      currentPage: 3,
+      totalPages: 3,
+      recentPrereviews: [recentPrereview1],
+    },
+    false,
+  )
 
   const content = await showPage(response)