Merge pull request #331 from NYPL/main

Merge main into qa

CHANGELOG

@@ -7,14 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Prerelease
 
+### Added
+
+- Call number search scope to search dropdown options [(SCC-4260)](https://newyorkpubliclibrary.atlassian.net/browse/SCC-4260)
+- Search tip per search scope [(SCC-4263)](https://newyorkpubliclibrary.atlassian.net/browse/SCC-4263)
+
 ### Fixed
 
 - VQA second pass miscellaneous fixes (SCC-4264)
 - Fixed accessibility issue on Bib page where focus moves to Displaying text when filters are controlled via MultiSelect. This will change when dynamic updates are replaced with an apply button (SCC-4246)
 
 ### Updated
 
+- Integrate view_all query param on client side and remove batched fetch (SCC-4287)
 - Replaced travis with github actions (SCC-4218)
+- Sentence case and rearrange search options (SCC-4260)
 
 ## [1.2.4] 2024-08-29
 

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@nypl/design-system-react-components": "3.3.2",
     "@nypl/nypl-data-api-client": "1.0.5",
-    "@nypl/pickup-time-estimator": "^1.0.9",
+    "@nypl/pickup-time-estimator": "^1.5.2",
     "@nypl/sierra-wrapper": "1.1.0",
     "@types/node": "20.3.1",
     "@types/react": "18.2.13",

pages/bib/[id]/all.tsx

@@ -8,7 +8,7 @@ export default BibPage
 export async function getServerSideProps({ params, query, req }) {
   const { id } = params
   const { discoveryBibResult, annotatedMarc, status, redirectUrl } =
-    await fetchBib(id, { ...query, view_all_items: true })
+    await fetchBib(id, { ...query, all_items: true })
   const patronTokenResponse = await initializePatronTokenAuth(req.cookies)
   const isAuthenticated = patronTokenResponse.isTokenValid
 

pages/bib/[id]/index.tsx

@@ -124,7 +124,11 @@ export default function BibPage({
         scroll: false,
       }
     )
-    const bibQueryString = getBibQueryString(newQuery, false, viewAllItems)
+    const bibQueryString = getBibQueryString(
+      { ...newQuery, all_items: viewAllItems },
+      false
+    )
+
     try {
       // Cancel any active fetches on new ItemTable refreshes
       if (controllerRef.current) {

src/components/ItemTable/ItemTableControls.tsx

@@ -51,7 +51,7 @@ const ItemTableControls = ({
           pageCount={Math.ceil(numItemsTotal / ITEM_PAGINATION_BATCH_SIZE)}
           onPageChange={handlePageChange}
           width="auto"
-          mb={{ base: "xs", md: 0 }}
+          mb={{ base: "m", md: 0 }}
         />
       ) : null}
       {bib.showViewAllItemsLink &&

src/components/Layout/Layout.test.tsx

@@ -2,13 +2,11 @@ import React from "react"
 import { render, screen, within } from "../../utils/testUtils"
 
 import Layout from "./Layout"
-
 // Mock next router
 jest.mock("next/router", () => jest.requireActual("next-router-mock"))
 
 describe("Layout", () => {
-  const searchLabel =
-    "Search by keyword, title, journal title, or author/contributor"
+  const searchLabel = "Search Bar Label"
 
   it("should render an H1", () => {
     render(<Layout></Layout>)

src/components/SearchForm/SearchForm.test.tsx

@@ -5,12 +5,11 @@ import userEvent from "@testing-library/user-event"
 
 import SearchForm from "./SearchForm"
 import { normalAggs } from "../../../__test__/fixtures/testAggregations"
+import { SEARCH_FORM_OPTIONS } from "../../config/constants"
 
 jest.mock("next/router", () => jest.requireActual("next-router-mock"))
 
 describe("SearchForm", () => {
-  const searchLabel =
-    "Search by keyword, title, journal title, or author/contributor"
   const submit = () =>
     fireEvent(
       screen.getByText("Search").closest("button"),
@@ -20,21 +19,23 @@ describe("SearchForm", () => {
     mockRouter.query.q = ""
   })
   afterEach(async () => {
-    const input = screen.getByLabelText(searchLabel)
+    const input = screen.getByRole("textbox")
     await userEvent.clear(input)
   })
   it.todo("searches on an empty keyword after clearing the form")
   it.todo("searches for {TBD} on an empty query")
   it("submits a keyword query by default", async () => {
     render(<SearchForm aggregations={normalAggs} />)
-    const input = screen.getByLabelText(searchLabel)
+    const input = screen.getByRole("textbox")
+
     await userEvent.type(input, "spaghetti")
     submit()
     expect(mockRouter.asPath).toBe("/search?q=spaghetti")
   })
   it("submits a journal_title query", async () => {
     render(<SearchForm aggregations={normalAggs} />)
-    const input = screen.getByLabelText(searchLabel)
+    const input = screen.getByRole("textbox")
+
     const searchScopeSelect = screen.getByLabelText("Select a category")
     await userEvent.type(input, "spaghetti")
     await userEvent.selectOptions(searchScopeSelect, "journal_title")
@@ -49,4 +50,17 @@ describe("SearchForm", () => {
     const input = screen.getByDisplayValue("spaghetti")
     expect(input).toBeTruthy()
   })
+  describe("search scope options", () => {
+    it("updates the search tip when search scope is updated", async () => {
+      render(<SearchForm aggregations={normalAggs} />)
+      const searchScopeSelect = screen.getByLabelText("Select a category")
+      await userEvent.selectOptions(searchScopeSelect, "journal_title")
+      let searchTip = screen.getByText(
+        SEARCH_FORM_OPTIONS.journal_title.searchTip
+      )
+      await userEvent.selectOptions(searchScopeSelect, "all")
+      searchTip = screen.getByText(SEARCH_FORM_OPTIONS.all.searchTip)
+      expect(searchTip).toBeInTheDocument()
+    })
+  })
 })

src/components/SearchForm/SearchForm.tsx

@@ -1,12 +1,20 @@
-import { Box, SearchBar } from "@nypl/design-system-react-components"
+import {
+  Box,
+  Icon,
+  SearchBar,
+  Text,
+} from "@nypl/design-system-react-components"
 import { useRouter } from "next/router"
 import type { SyntheticEvent, Dispatch, SetStateAction } from "react"
 import { useState, useEffect } from "react"
 
 import styles from "../../../styles/components/Search.module.scss"
 import RCLink from "../Links/RCLink/RCLink"
-import { getSearchQuery } from "../../utils/searchUtils"
-import { BASE_URL, PATHS } from "../../config/constants"
+import {
+  getSearchQuery,
+  searchFormSelectOptions,
+} from "../../utils/searchUtils"
+import { BASE_URL, PATHS, SEARCH_FORM_OPTIONS } from "../../config/constants"
 import EDSLink from "../EDSLink"
 import useLoading from "../../hooks/useLoading"
 import RefineSearch from "../RefineSearch/RefineSearch"
@@ -28,6 +36,8 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => {
   const [appliedFilters, setAppliedFilters] = useState(
     collapseMultiValueQueryParams(router.query)
   )
+  const searchTip = SEARCH_FORM_OPTIONS[searchScope].searchTip
+  const placeholder = SEARCH_FORM_OPTIONS[searchScope].placeholder
 
   const isLoading = useLoading()
 
@@ -71,6 +81,13 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => {
   return (
     <div className={styles.searchContainer}>
       <div className={styles.searchContainerInner}>
+        <Text size="body2" className={styles.searchTip}>
+          <Icon size="medium" name="errorOutline" />
+          <Box className={styles.searchTipText}>
+            <span>{"Search tip: "}</span>
+            {searchTip}
+          </Box>
+        </Text>
         <SearchBar
           id="mainContent"
           action={`${BASE_URL}/search`}
@@ -83,25 +100,16 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => {
             onChange: (e) => handleChange(e, setSearchScope),
             labelText: "Select a category",
             name: "search_scope",
-            optionsData: [
-              { text: "Keyword", value: "all" },
-              { text: "Title", value: "title" },
-              { text: "Author/contributor", value: "contributor" },
-              { text: "Journal title", value: "journal_title" },
-              { text: "Call number", value: "callnumber" },
-              { text: "Control numbers/identifiers", value: "standard_number" },
-              { text: "Subject", value: "subject" },
-            ],
+            optionsData: searchFormSelectOptions,
           }}
           textInputProps={{
             isClearable: true,
             onChange: (e) => handleChange(e, setSearchTerm),
             isClearableCallback: () => setSearchTerm(""),
             value: searchTerm,
-            labelText:
-              "Search by keyword, title, journal title, or author/contributor",
+            labelText: searchTip,
             name: "q",
-            placeholder: "Keyword, title, journal title, or author/contributor",
+            placeholder,
           }}
           sx={{
             ".chakra-select__icon-wrapper": { "z-index": "999 !important" },

src/config/constants.ts

@@ -6,6 +6,7 @@ export const RESULTS_PER_PAGE = 50
 export const DRB_RESULTS_PER_PAGE = 3
 export const ITEMS_PER_SEARCH_RESULT = 3
 export const ITEM_PAGINATION_BATCH_SIZE = 20
+// TODO: Remove this when view_all endpoint in discovery supports query params
 export const ITEM_VIEW_ALL_BATCH_SIZE = 150
 export const ELECTRONIC_RESOURCES_PER_BIB_PAGE = 3
 export const SHEP_HTTP_TIMEOUT = 4000
@@ -32,6 +33,13 @@ export const DRB_API_SEARCH_ROUTE = "/api/drb"
 // Query params
 export const SOURCE_PARAM = "?source=catalog"
 
+export const ITEM_FILTER_PARAMS = [
+  "item_location",
+  "item_format",
+  "item_status",
+  "item_date",
+]
+
 // External URLs
 export const DRB_BASE_URL =
   appConfig.apiEndpoints.drbFrontEnd[appConfig.environment]
@@ -68,3 +76,48 @@ export const DAYS = {
 export const ERROR_MESSAGES = {
   ITEM_REFETCH_ABORT_REASON: "New Bib item fetch initiated",
 }
+
+export const SEARCH_FORM_OPTIONS = {
+  all: {
+    text: "Keyword",
+    searchTip:
+      "Enter one or more keywords, or use quotes to search for an exact phrase.",
+    placeholder: 'ex. climate change or "The New York Times"',
+  },
+  title: {
+    text: "Title",
+    value: "title",
+    searchTip: "Enter a title, or use quotes to search for an exact phrase.",
+    placeholder: 'ex. David Copperfield or "The Jewish Press That Was"',
+  },
+  contributor: {
+    text: "Author/contributor",
+    searchTip:
+      "Enter the name of an author, contributor, or organization. Use Last Name, First Name for more accurate results.",
+    placeholder: "ex. Dickens, Charles or American Law Association",
+  },
+  journal_title: {
+    text: "Journal title",
+    searchTip:
+      "Enter a journal or serial title, or use quotes to search for an exact phrase.",
+    placeholder:
+      'ex. The New York Times or "The Journal of Clinical Investigation"',
+  },
+  callnumber: {
+    text: "Call number",
+    searchTip:
+      "Enter a call number, or the first few letters and numbers of a call number. ",
+    placeholder: "ex. JFD 99-6057 or *ZAN-3174",
+  },
+  standard_number: {
+    text: "Control numbers/identifiers",
+    searchTip:
+      "Enter a control number or identifier. Examples include ISSN / ISBN / OCLC / LCCN numbers, barcodes, etc.",
+    placeholder: "ex. 1558584536 or 95008433",
+  },
+  subject: {
+    text: "Subject",
+    searchTip: "Enter a subject name or phrase. Learn more about searching.",
+    placeholder: "ex. ornithology or Greek architecture",
+  },
+}