From 7cd60d044e80906c4bbcfa3d98ab61cf330d121d Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Thu, 17 Oct 2024 12:43:31 -0400 Subject: [PATCH 01/49] refine search poc --- package-lock.json | 4 ++-- src/components/RefineSearch/RefineSearch.tsx | 1 + src/models/SearchResultsFilters.ts | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 27bf0b5ab..fdf1c279c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "research-catalog", - "version": "1.2.1", + "version": "1.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "research-catalog", - "version": "1.2.1", + "version": "1.3.2", "dependencies": { "@nypl/design-system-react-components": "3.4.0", "@nypl/nypl-data-api-client": "1.0.5", diff --git a/src/components/RefineSearch/RefineSearch.tsx b/src/components/RefineSearch/RefineSearch.tsx index 38facae7e..980d48d04 100644 --- a/src/components/RefineSearch/RefineSearch.tsx +++ b/src/components/RefineSearch/RefineSearch.tsx @@ -27,6 +27,7 @@ import type { } from "../../types/filterTypes" const fields = [ + { value: "buildingLocation", label: "Location" }, { value: "materialType", label: "Format" }, { value: "language", label: "Language" }, { value: "dateAfter", label: "Start Year" }, diff --git a/src/models/SearchResultsFilters.ts b/src/models/SearchResultsFilters.ts index 4fe9bf38a..50657362a 100644 --- a/src/models/SearchResultsFilters.ts +++ b/src/models/SearchResultsFilters.ts @@ -11,6 +11,7 @@ class SearchResultsFilters { constructor(aggregationsResults: Aggregation[], field: Option) { this.labelTransformations = { "Greek, Modern (1453- )": "Greek, Modern (1453-present)", + Offsite: "Offsite - (Deliverable to NYPL research libraries)", } this.options = aggregationsResults .find((f) => f.id === field.value) From 916752ab7919d49ae1d6cffb3522aea6204d5709 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Thu, 24 Oct 2024 13:44:40 -0400 Subject: [PATCH 02/49] location filters show up; --- pages/search/advanced.tsx | 46 +++++---------- .../AdvancedSearchCheckboxField.tsx | 58 +++++++++++++++++++ src/config/aggregations.ts | 15 +++++ 3 files changed, 86 insertions(+), 33 deletions(-) create mode 100644 src/components/RefineSearch/AdvancedSearchCheckboxField.tsx diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index b9e8114b9..369cdc96a 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -38,6 +38,7 @@ import initializePatronTokenAuth from "../../src/server/auth" import { appConfig } from "../../src/config/config" import { useDateForm } from "../../src/hooks/useDateForm" import DateForm from "../../src/components/SearchFilters/DateForm" +import AdvancedSearchCheckboxField from "../../src/components/RefineSearch/AdvancedSearchCheckboxField" export const defaultEmptySearchErrorMessage = "Error: please enter at least one field to submit an advanced search." @@ -62,7 +63,6 @@ export default function AdvancedSearch({ isAuthenticated }) { searchFormReducer, initialSearchFormState ) - const { dateFormProps, validateDateRange, @@ -202,38 +202,18 @@ export default function AdvancedSearch({ isAuthenticated }) { - - - div": { - display: "grid", - gridTemplateColumns: { md: "repeat(2, minmax(0, 1fr))" }, - gridGap: "var(--nypl-space-s)", - div: { - marginTop: "0 !important", - }, - }, - }} - > - {materialTypeOptions.map((materialType) => { - return ( - - ) - })} - - - + + diff --git a/src/components/RefineSearch/AdvancedSearchCheckboxField.tsx b/src/components/RefineSearch/AdvancedSearchCheckboxField.tsx new file mode 100644 index 000000000..f26510fb8 --- /dev/null +++ b/src/components/RefineSearch/AdvancedSearchCheckboxField.tsx @@ -0,0 +1,58 @@ +import { + FormRow, + FormField, + CheckboxGroup, + Checkbox, +} from "@nypl/design-system-react-components" +import { materialTypeOptions } from "../../utils/advancedSearchUtils" +import { searchAggregations } from "../../config/aggregations" + +const AdvancedSearchCheckboxField = ({ + searchFormState, + handleCheckboxChange, + name, + label, +}) => { + const options = { + format: materialTypeOptions, + location: searchAggregations.buildingLocation, + } + const checkBoxCSS = { + "> div": { + display: "grid", + gridTemplateColumns: { md: "repeat(2, minmax(0, 1fr))" }, + gridGap: "var(--nypl-space-s)", + div: { + marginTop: "0 !important", + }, + }, + } + + return ( + + + + {options[name].map((materialType) => { + return ( + + ) + })} + + + + ) +} + +export default AdvancedSearchCheckboxField diff --git a/src/config/aggregations.ts b/src/config/aggregations.ts index fa8b89eeb..84f97ce70 100644 --- a/src/config/aggregations.ts +++ b/src/config/aggregations.ts @@ -1,4 +1,19 @@ export const searchAggregations = { + buildingLocation: [ + { + value: "sc", + label: "Schomburg Center - Research and Reference Division", + }, + { + value: "ma", + label: "Stephen A. Schwarzman Building", + }, + { + value: "rc", + label: "Offsite - (Deliverable to NYPL research libraries", + }, + { value: "pa", label: "Performing Arts Library at Lincoln Center" }, + ], materialType: [ { value: "resourcetypes:txt", From 718e5aa535536fdafd867e352bf1206025391836 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Thu, 24 Oct 2024 14:37:00 -0400 Subject: [PATCH 03/49] extract cancel submit buttons from refinesearch --- pages/search/advanced.tsx | 143 +++++++++--------- .../RefineSearch/CancelSubmitButtonGroup.tsx | 26 ++++ src/components/RefineSearch/RefineSearch.tsx | 24 +-- 3 files changed, 100 insertions(+), 93 deletions(-) create mode 100644 src/components/RefineSearch/CancelSubmitButtonGroup.tsx diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 369cdc96a..59a35bb60 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -8,11 +8,9 @@ import { Heading, Form, FormField, - FormRow, + Flex, TextInput, Select, - CheckboxGroup, - Checkbox, HorizontalRule, ButtonGroup, Button, @@ -27,7 +25,6 @@ import { initialSearchFormState, textInputFields, languageOptions, - materialTypeOptions, } from "../../src/utils/advancedSearchUtils" import type { SearchParams, @@ -157,88 +154,84 @@ export default function AdvancedSearch({ isAuthenticated }) { action={`${BASE_URL}/search`} onSubmit={handleSubmit} > - - - - {textInputFields.map(({ name, label }) => { + + {textInputFields.map(({ name, label }) => { + return ( + handleInputChange(e, "input_change"), + debounceInterval + )} + ref={inputRef} + /> + ) + })} + handleInputChange(e, "filter_change")} - > - {languageOptions.map((language) => { - return ( - - ) - })} - - - {} - - - - - - + + {} + + + + + + - - - + + - - - - + Clear + + + + diff --git a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx new file mode 100644 index 000000000..8d4d56057 --- /dev/null +++ b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx @@ -0,0 +1,26 @@ +import { Button, Icon, ButtonGroup } from "@nypl/design-system-react-components" +import styles from "../../../styles/components/Search.module.scss" + +const SearchButtons = ({ cancelHandler, submitLabel, cancelLabel }) => { + return ( + + + + + ) +} + +export default SearchButtons diff --git a/src/components/RefineSearch/RefineSearch.tsx b/src/components/RefineSearch/RefineSearch.tsx index 980d48d04..eac93f30d 100644 --- a/src/components/RefineSearch/RefineSearch.tsx +++ b/src/components/RefineSearch/RefineSearch.tsx @@ -3,7 +3,6 @@ import { Box, Button, HorizontalRule, - ButtonGroup, Form, Icon, } from "@nypl/design-system-react-components" @@ -25,6 +24,7 @@ import type { Aggregation, CollapsedMultiValueAppliedFilters, } from "../../types/filterTypes" +import CancelSubmitButtonGroup from "./CancelSubmitButtonGroup" const fields = [ { value: "buildingLocation", label: "Location" }, @@ -162,23 +162,11 @@ const RefineSearch = ({ Cancel - - - - + {filters} From 82ecd632f12cd4165bc35efc398961ec82eb4828 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Thu, 24 Oct 2024 14:48:31 -0400 Subject: [PATCH 04/49] use extracted buttons in adanced search --- pages/search/advanced.tsx | 32 +++++++------------ .../RefineSearch/CancelSubmitButtonGroup.tsx | 20 ++++++++---- src/components/RefineSearch/RefineSearch.tsx | 1 + 3 files changed, 26 insertions(+), 27 deletions(-) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 59a35bb60..1c49ae4a6 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -16,6 +16,7 @@ import { Button, Box, Banner, + Spacer, } from "@nypl/design-system-react-components" import Layout from "../../src/components/Layout/Layout" @@ -36,6 +37,7 @@ import { appConfig } from "../../src/config/config" import { useDateForm } from "../../src/hooks/useDateForm" import DateForm from "../../src/components/SearchFilters/DateForm" import AdvancedSearchCheckboxField from "../../src/components/RefineSearch/AdvancedSearchCheckboxField" +import CancelSubmitButtonGroup from "../../src/components/RefineSearch/CancelSubmitButtonGroup" export const defaultEmptySearchErrorMessage = "Error: please enter at least one field to submit an advanced search." @@ -211,27 +213,15 @@ export default function AdvancedSearch({ isAuthenticated }) { - - - - - - + + + + diff --git a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx index 8d4d56057..a40be0a7e 100644 --- a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx +++ b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx @@ -1,13 +1,21 @@ import { Button, Icon, ButtonGroup } from "@nypl/design-system-react-components" import styles from "../../../styles/components/Search.module.scss" -const SearchButtons = ({ cancelHandler, submitLabel, cancelLabel }) => { +const SearchButtons = ({ + cancelHandler, + submitLabel, + cancelLabel, + formName, +}) => { + const submitIcon = submitLabel.toLowerCase().includes("search") + ? "actionSearch" + : "check" return ( - + - diff --git a/src/components/RefineSearch/RefineSearch.tsx b/src/components/RefineSearch/RefineSearch.tsx index eac93f30d..586e7fc45 100644 --- a/src/components/RefineSearch/RefineSearch.tsx +++ b/src/components/RefineSearch/RefineSearch.tsx @@ -163,6 +163,7 @@ const RefineSearch = ({ Cancel Date: Fri, 25 Oct 2024 10:38:42 -0400 Subject: [PATCH 05/49] adv search tests passing --- __test__/pages/search/advancedSearchForm.test.tsx | 9 ++++++--- jest.setup.js | 11 ++++++++++- pages/search/advanced.tsx | 2 +- .../RefineSearch/CancelSubmitButtonGroup.tsx | 7 ++++++- 4 files changed, 23 insertions(+), 6 deletions(-) diff --git a/__test__/pages/search/advancedSearchForm.test.tsx b/__test__/pages/search/advancedSearchForm.test.tsx index 9e19ada98..3bd5f0a9f 100644 --- a/__test__/pages/search/advancedSearchForm.test.tsx +++ b/__test__/pages/search/advancedSearchForm.test.tsx @@ -12,10 +12,13 @@ jest.mock("next/router", () => jest.requireActual("next-router-mock")) describe("Advanced Search Form", () => { const submit = () => { - fireEvent(screen.getByText("Submit"), new MouseEvent("click")) + fireEvent( + screen.getByTestId("submit-advanced-search-button"), + new MouseEvent("click") + ) } afterEach(async () => { - await userEvent.click(screen.getByText("Clear")) + await userEvent.click(screen.getByText("Clear Fields")) }) it("displays alert when no fields are submitted", () => { render() @@ -93,7 +96,7 @@ describe("Advanced Search Form", () => { await userEvent.type(titleInput, "il amore di pasta") await userEvent.type(subjectInput, "italian food") - await userEvent.click(screen.getByText("Clear")) + await userEvent.click(screen.getByText("Clear Fields")) expect(notatedMusic).not.toBeChecked() submit() diff --git a/jest.setup.js b/jest.setup.js index 5e4be18c4..9d27f875b 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -1,6 +1,6 @@ /* eslint-disable no-undef */ import "@testing-library/jest-dom" - +import { configure } from "@testing-library/dom" // The scrollIntoView function is necessary for the Tabs component. window.HTMLElement.prototype.scrollIntoView = jest.fn() @@ -48,3 +48,12 @@ import { MatchMedia } from "@nypl/design-system-react-components" new MatchMedia() window.HTMLElement.prototype.scrollIntoView = jest.fn() + +// configure({ +// getElementError: (message) => { +// const error = new Error(message); +// error.name = "TestingLibraryElementError"; +// error.stack = null; +// return error; +// }, +// }) \ No newline at end of file diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 1c49ae4a6..e6a1272cc 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -218,7 +218,7 @@ export default function AdvancedSearch({ isAuthenticated }) { diff --git a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx index a40be0a7e..df6745cc1 100644 --- a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx +++ b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx @@ -23,7 +23,12 @@ const SearchButtons = ({ {cancelLabel} - From 90d3ebe2ae9e7322126e006e6c7f0c4059a4828b Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Fri, 25 Oct 2024 11:03:37 -0400 Subject: [PATCH 06/49] refine search tests passing --- .../RefineSearch/CancelSubmitButtonGroup.tsx | 14 ++++++++++++-- src/components/RefineSearch/RefineSearch.test.tsx | 2 +- src/components/RefineSearch/RefineSearch.tsx | 4 ++-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx index df6745cc1..9571b1fda 100644 --- a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx +++ b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx @@ -1,12 +1,21 @@ import { Button, Icon, ButtonGroup } from "@nypl/design-system-react-components" import styles from "../../../styles/components/Search.module.scss" +interface SearchButtonProps { + cancelHandler: () => void + submitLabel: string + cancelLabel: string + formName: string + disableSubmit?: boolean +} + const SearchButtons = ({ cancelHandler, - submitLabel, cancelLabel, + submitLabel, formName, -}) => { + disableSubmit, +}: SearchButtonProps) => { const submitIcon = submitLabel.toLowerCase().includes("search") ? "actionSearch" : "check" @@ -28,6 +37,7 @@ const SearchButtons = ({ id={`submit-${formName}`} type="submit" buttonType="primary" + isDisabled={disableSubmit} > {submitLabel} diff --git a/src/components/RefineSearch/RefineSearch.test.tsx b/src/components/RefineSearch/RefineSearch.test.tsx index 113ba0463..bdd04d264 100644 --- a/src/components/RefineSearch/RefineSearch.test.tsx +++ b/src/components/RefineSearch/RefineSearch.test.tsx @@ -31,7 +31,7 @@ const selectSomeFilters = async ( ) } const clear = async () => { - const clearButton = screen.getByTestId("clear-filters-button") + const clearButton = screen.getByTestId("clear-refine-button") await userEvent.click(clearButton) } diff --git a/src/components/RefineSearch/RefineSearch.tsx b/src/components/RefineSearch/RefineSearch.tsx index 586e7fc45..fbcd6777c 100644 --- a/src/components/RefineSearch/RefineSearch.tsx +++ b/src/components/RefineSearch/RefineSearch.tsx @@ -165,8 +165,8 @@ const RefineSearch = ({ From bddda736b27fd0ebba1030faa6acefcda335b5be Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Fri, 25 Oct 2024 11:18:02 -0400 Subject: [PATCH 07/49] update account settings button with reusable --- jest.setup.js | 11 +---------- .../MyAccount/Settings/AccountSettingsButtons.tsx | 12 +++++++++++- .../RefineSearch/CancelSubmitButtonGroup.tsx | 2 +- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/jest.setup.js b/jest.setup.js index 9d27f875b..0995b657e 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -47,13 +47,4 @@ import { MatchMedia } from "@nypl/design-system-react-components" new MatchMedia() -window.HTMLElement.prototype.scrollIntoView = jest.fn() - -// configure({ -// getElementError: (message) => { -// const error = new Error(message); -// error.name = "TestingLibraryElementError"; -// error.stack = null; -// return error; -// }, -// }) \ No newline at end of file +window.HTMLElement.prototype.scrollIntoView = jest.fn() \ No newline at end of file diff --git a/src/components/MyAccount/Settings/AccountSettingsButtons.tsx b/src/components/MyAccount/Settings/AccountSettingsButtons.tsx index f720c7f03..40054aa97 100644 --- a/src/components/MyAccount/Settings/AccountSettingsButtons.tsx +++ b/src/components/MyAccount/Settings/AccountSettingsButtons.tsx @@ -1,6 +1,7 @@ import { Icon, Button, ButtonGroup } from "@nypl/design-system-react-components" import type { Dispatch, MutableRefObject } from "react" import styles from "../../../../styles/components/MyAccount.module.scss" +import CancelSubmitButtonGroup from "../../RefineSearch/CancelSubmitButtonGroup" interface AccountSettingsButtonsPropsType { currentlyEditing: boolean @@ -35,9 +36,18 @@ const AccountSettingsButtons = ({ ) const cancelAndSaveButtons = ( + toggleCurrentlyEditing(false)} + formName="account-settings" + submitLabel="Save Changes" + cancelLabel="Cancel" + disableSubmit={!formValid} + /> + ) + const oldCancelAndSaveButtons = ( - - - ) return currentlyEditing ? cancelAndSaveButtons : editButton } diff --git a/src/components/MyAccount/Settings/AccountSettingsTab.test.tsx b/src/components/MyAccount/Settings/AccountSettingsTab.test.tsx index 789720e84..6838973a7 100644 --- a/src/components/MyAccount/Settings/AccountSettingsTab.test.tsx +++ b/src/components/MyAccount/Settings/AccountSettingsTab.test.tsx @@ -106,7 +106,7 @@ describe("AccountSettingsTab", () => { const dropdowns = screen.getAllByRole("combobox") expect(dropdowns).toHaveLength(2) // save changes - await userEvent.click(screen.getByText("Save Changes")) + await userEvent.click(screen.getByText("Save changes")) expect( screen.queryByText("Your account settings were successfully updated.", { exact: false, @@ -124,7 +124,7 @@ describe("AccountSettingsTab", () => { renderWithPatronProvider(myAccountPatron) await userEvent.click(screen.getByText("Edit account settings")) - await userEvent.click(screen.getByText("Save Changes")) + await userEvent.click(screen.getByText("Save changes")) expect( screen.queryByText("We were unable to update your account settings.", { @@ -144,7 +144,7 @@ describe("AccountSettingsTab", () => { // open account settings await userEvent.click(screen.getByText("Edit account settings")) const saveButton = screen - .getByText("Save Changes", { exact: false }) + .getByText("Save changes", { exact: false }) .closest("button") expect(saveButton).not.toBeDisabled() // confirm patron has email ("z") selected @@ -158,7 +158,7 @@ describe("AccountSettingsTab", () => { expect(saveButton).toBeDisabled() fireEvent.change(emailField, { target: { value: "email@email" } }) expect(saveButton).not.toBeDisabled() - await userEvent.click(screen.getByText("Save Changes")) + await userEvent.click(screen.getByText("Save changes")) await userEvent.click(screen.getAllByText("OK")[0]) }) it("prevents users from submitting empty fields after changing notification preference", async () => { @@ -170,7 +170,7 @@ describe("AccountSettingsTab", () => { // open account settings await userEvent.click(screen.getByText("Edit account settings")) const saveButton = screen - .getByText("Save Changes", { exact: false }) + .getByText("Save changes", { exact: false }) .closest("button") expect(saveButton).not.toBeDisabled() const notificationPreferenceSelector = screen.getByLabelText( diff --git a/src/components/RefineSearch/RefineSearch.test.tsx b/src/components/RefineSearch/RefineSearch.test.tsx index bdd04d264..5fa714c5f 100644 --- a/src/components/RefineSearch/RefineSearch.test.tsx +++ b/src/components/RefineSearch/RefineSearch.test.tsx @@ -16,7 +16,7 @@ const openRefineSearch = async () => { await userEvent.click(refineButton) } const apply = async () => { - const applyButton = screen.getByText("Apply Filters") + const applyButton = screen.getByText("Apply filters") await userEvent.click(applyButton) } const selectSomeFilters = async ( @@ -158,7 +158,7 @@ describe("RefineSearch", () => { }) it("applying filters closes refine search bar", async () => { await openRefineSearch() - const applyButton = screen.getByRole("button", { name: "Apply Filters" }) + const applyButton = screen.getByRole("button", { name: "Apply filters" }) await selectSomeFilters() await apply() expect(applyButton).not.toBeInTheDocument() @@ -176,7 +176,7 @@ describe("RefineSearch", () => { it.todo("clearing filters should clear year filters") it("clearing filters should return to search results", async () => { await openRefineSearch() - const applyButton = screen.getByText("Apply Filters") + const applyButton = screen.getByText("Apply filters") await selectSomeFilters() await apply() await openRefineSearch() @@ -187,7 +187,7 @@ describe("RefineSearch", () => { }) it("cancelling with selected but unapplied filters should close refine search, clear selected filters, and return to search results", async () => { await openRefineSearch() - const applyButton = screen.getByText("Apply Filters") + const applyButton = screen.getByText("Apply filters") await selectSomeFilters() await userEvent.click(screen.getByText("Cancel")) diff --git a/src/components/RefineSearch/RefineSearch.tsx b/src/components/RefineSearch/RefineSearch.tsx index 19fea86c9..9cc3e68ef 100644 --- a/src/components/RefineSearch/RefineSearch.tsx +++ b/src/components/RefineSearch/RefineSearch.tsx @@ -176,8 +176,8 @@ const RefineSearch = ({ diff --git a/src/components/SearchFilters/appliedFilterUtils.ts b/src/components/SearchFilters/appliedFilterUtils.ts index acb4eaa50..1495767e3 100644 --- a/src/components/SearchFilters/appliedFilterUtils.ts +++ b/src/components/SearchFilters/appliedFilterUtils.ts @@ -45,11 +45,7 @@ export const addLabelPropAndParseFilters = ( const matchingFieldAggregation = aggregations.find( ({ field: aggregationField }) => aggregationField === appliedFilterField ) - // There are some filters which don't return aggregations and are not used - // for applied filter fields (yet). This is mainly the unsupported holding - // location filter (eg filters[holdingLocation][0]=loc:scff2), which is - // used by devs to assist QA. See line 69 for explanation of date exclusion. - const ignoreFields = ["date", "holdingLocation"] + // See line 69 for explanation of date exclusion. if (!matchingFieldAggregation && !appliedFilterField.includes("date")) continue appliedFilterValuesWithLabels[appliedFilterField] = appliedFilterValues[ From 70282a002724a91685b903534f45050b67857b98 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Tue, 29 Oct 2024 10:26:44 -0400 Subject: [PATCH 20/49] add go back button --- pages/search/advanced.tsx | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 1e5612bcd..638674dfb 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -14,6 +14,9 @@ import { HorizontalRule, Box, Banner, + Button, + Icon, + Spacer, } from "@nypl/design-system-react-components" import Layout from "../../src/components/Layout/Layout" @@ -37,6 +40,7 @@ import SearchFilterCheckboxField from "../../src/components/RefineSearch/SearchF import CancelSubmitButtonGroup from "../../src/components/RefineSearch/CancelSubmitButtonGroup" import { materialTypeOptions } from "../../src/utils/advancedSearchUtils" import { searchAggregations } from "../../src/config/aggregations" +import RCLink from "../../src/components/Links/RCLink/RCLink" export const defaultEmptySearchErrorMessage = "Error: please enter at least one field to submit an advanced search." @@ -215,7 +219,22 @@ export default function AdvancedSearch({ isAuthenticated }) { - + + + + Go back + Date: Tue, 29 Oct 2024 10:49:41 -0400 Subject: [PATCH 21/49] add goback href --- pages/search/advanced.tsx | 13 +++++++++---- src/utils/advancedSearchUtils.ts | 7 +++++++ 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 638674dfb..bf0e47749 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -26,6 +26,7 @@ import { initialSearchFormState, textInputFields, languageOptions, + buildGoBackHref, } from "../../src/utils/advancedSearchUtils" import type { SearchParams, @@ -49,7 +50,7 @@ export const defaultEmptySearchErrorMessage = * The Advanced Search page is responsible for displaying the Advanced Search form fields and * buttons that clear the fields and submit a search request. */ -export default function AdvancedSearch({ isAuthenticated }) { +export default function AdvancedSearch({ isAuthenticated, goBackHref }) { const metadataTitle = `Advanced Search | ${SITE_NAME}` const router = useRouter() const inputRef = useRef() @@ -130,7 +131,7 @@ export default function AdvancedSearch({ isAuthenticated }) { notificationRef.current.focus() } }, [alert]) - + console.log(goBackHref) return ( <> @@ -219,7 +220,10 @@ export default function AdvancedSearch({ isAuthenticated }) { - + (a.label > b.label ? 1 : -1) ) + +export const buildGoBackHref = (referer) => { + const goBackEndpoint = referer.split("research-catalog")[1] + if (!referer) return null + else if (!goBackEndpoint) return "/" + else return goBackEndpoint +} From 12deb93c187f80770e81da76beebf4f3e128a988 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Tue, 29 Oct 2024 11:02:59 -0400 Subject: [PATCH 22/49] finish go back button --- pages/search/advanced.tsx | 37 +++++++++---------- src/utils/advancedSearchUtils.ts | 9 +++-- .../utilsTests/advancedSearchUtils.test.ts | 22 +++++++++++ 3 files changed, 46 insertions(+), 22 deletions(-) create mode 100644 src/utils/utilsTests/advancedSearchUtils.test.ts diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index bf0e47749..704d8600b 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -14,9 +14,7 @@ import { HorizontalRule, Box, Banner, - Button, Icon, - Spacer, } from "@nypl/design-system-react-components" import Layout from "../../src/components/Layout/Layout" @@ -131,7 +129,6 @@ export default function AdvancedSearch({ isAuthenticated, goBackHref }) { notificationRef.current.focus() } }, [alert]) - console.log(goBackHref) return ( <> @@ -221,24 +218,26 @@ export default function AdvancedSearch({ isAuthenticated, goBackHref }) { - - - Go back - + {goBackHref && ( + + + Go back + + )} { - const goBackEndpoint = referer.split("research-catalog")[1] if (!referer) return null - else if (!goBackEndpoint) return "/" - else return goBackEndpoint + const isNotRCUrl = !referer.includes(BASE_URL) + if (isNotRCUrl) return null + const goBackEndpoint = referer.split(BASE_URL)[1] + if (!goBackEndpoint) return "/" + return goBackEndpoint } diff --git a/src/utils/utilsTests/advancedSearchUtils.test.ts b/src/utils/utilsTests/advancedSearchUtils.test.ts new file mode 100644 index 000000000..4f0962532 --- /dev/null +++ b/src/utils/utilsTests/advancedSearchUtils.test.ts @@ -0,0 +1,22 @@ +import { buildGoBackHref } from "../advancedSearchUtils" + +describe("Advanced search utils", () => { + describe("buildGoBackHref", () => { + it("returns null with no referer", () => { + expect(buildGoBackHref(undefined)).toBe(null) + }) + it("returns null when referer is not an RC URL", () => { + expect(buildGoBackHref("spaghetti.com")).toBe(null) + }) + it("returns / when endpoint is home", () => { + expect(buildGoBackHref("nypl.org/research/research-catalog")).toBe("/") + }) + it("returns endpoint when there is one", () => { + expect( + buildGoBackHref( + "http://local.nypl.org:8080/research/research-catalog/search?q=spaghetti&search_scope=title" + ) + ).toBe("/search?q=spaghetti&search_scope=title") + }) + }) +}) From 94ef89af1dc78f01d30b73bdd5df23c7d38a5d0a Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Tue, 29 Oct 2024 11:06:49 -0400 Subject: [PATCH 23/49] update recap label --- src/config/aggregations.ts | 2 +- src/models/SearchResultsFilters.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/config/aggregations.ts b/src/config/aggregations.ts index b6cb417ff..efdf0c562 100644 --- a/src/config/aggregations.ts +++ b/src/config/aggregations.ts @@ -10,7 +10,7 @@ export const searchAggregations = { }, { value: "rc", - label: "Offsite - (Deliverable to NYPL research libraries)", + label: "Offsite (Deliverable to NYPL research libraries)", }, { value: "pa", label: "Performing Arts Library at Lincoln Center" }, ], diff --git a/src/models/SearchResultsFilters.ts b/src/models/SearchResultsFilters.ts index 50657362a..8519c83b9 100644 --- a/src/models/SearchResultsFilters.ts +++ b/src/models/SearchResultsFilters.ts @@ -3,6 +3,7 @@ import type { Aggregation, Option, } from "../types/filterTypes" +import { searchAggregations } from "../config/aggregations" class SearchResultsFilters { options: AggregationOption[] @@ -11,7 +12,9 @@ class SearchResultsFilters { constructor(aggregationsResults: Aggregation[], field: Option) { this.labelTransformations = { "Greek, Modern (1453- )": "Greek, Modern (1453-present)", - Offsite: "Offsite - (Deliverable to NYPL research libraries)", + Offsite: searchAggregations.buildingLocation.find( + (loc) => loc.value === "rc" + ).label, } this.options = aggregationsResults .find((f) => f.id === field.value) From 8d8c2caf4d998df45e9e75251aca0f5cc3863d22 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Tue, 29 Oct 2024 11:08:53 -0400 Subject: [PATCH 24/49] make prop optional --- pages/search/advanced.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 704d8600b..9d338d058 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -40,15 +40,22 @@ import CancelSubmitButtonGroup from "../../src/components/RefineSearch/CancelSub import { materialTypeOptions } from "../../src/utils/advancedSearchUtils" import { searchAggregations } from "../../src/config/aggregations" import RCLink from "../../src/components/Links/RCLink/RCLink" +import { String } from "aws-sdk/clients/batch" export const defaultEmptySearchErrorMessage = "Error: please enter at least one field to submit an advanced search." - +interface AdvancedSearchPropTypes { + isAuthenticated: boolean + goBackHref?: null | String +} /** * The Advanced Search page is responsible for displaying the Advanced Search form fields and * buttons that clear the fields and submit a search request. */ -export default function AdvancedSearch({ isAuthenticated, goBackHref }) { +export default function AdvancedSearch({ + isAuthenticated, + goBackHref, +}: AdvancedSearchPropTypes) { const metadataTitle = `Advanced Search | ${SITE_NAME}` const router = useRouter() const inputRef = useRef() From d9428def5e6b7d3eb371799f19840b51745b5d92 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Tue, 29 Oct 2024 12:39:46 -0400 Subject: [PATCH 25/49] rm unused import --- pages/search/advanced.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 9d338d058..6530c57cb 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -40,13 +40,12 @@ import CancelSubmitButtonGroup from "../../src/components/RefineSearch/CancelSub import { materialTypeOptions } from "../../src/utils/advancedSearchUtils" import { searchAggregations } from "../../src/config/aggregations" import RCLink from "../../src/components/Links/RCLink/RCLink" -import { String } from "aws-sdk/clients/batch" export const defaultEmptySearchErrorMessage = "Error: please enter at least one field to submit an advanced search." interface AdvancedSearchPropTypes { isAuthenticated: boolean - goBackHref?: null | String + goBackHref?: null | string } /** * The Advanced Search page is responsible for displaying the Advanced Search form fields and From 3709158c9c375ad8b4ee48c1eb7de5f15af9c825 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Tue, 29 Oct 2024 13:43:24 -0400 Subject: [PATCH 26/49] update changelog --- CHANGELOG | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG b/CHANGELOG index 1d2ea5a34..832ef6869 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Better handling of bibs with no titles in SearchResultsBib model - Create reusable save/cancel button group - Add holding location filters to refine search and advanced search panels +- Add go back button to advanced search +- Extract checkbox groups from refine search and advanced search ## [1.3.5] 2024-10-23 From f9d6514887ea2633bd40f57fea4273ec42d37187 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Wed, 30 Oct 2024 10:46:04 -0400 Subject: [PATCH 27/49] update location labels --- pages/search/advanced.tsx | 1 + src/config/aggregations.ts | 9 ++++++--- src/models/SearchResultsFilters.ts | 13 +++++++++---- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 6530c57cb..bb78a45b9 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -210,6 +210,7 @@ export default function AdvancedSearch({ handleCheckboxChange("buildingLocation", e) } searchFormState={searchFormState["filters"].buildingLocation} + gridOptions={{ min: 1, max: 1 }} /> loc.value === "rc" - ).label, } + this.options = aggregationsResults .find((f) => f.id === field.value) ?.values.map((option) => ({ ...option, - label: this.labelTransformations[option.label] || option.label, + label: this.getLabel(option, field), })) this.field = field.value } + getLabel(option, field) { + if (field.value === "buildingLocation") { + return searchAggregations.buildingLocation.find( + (loc) => loc.value === option.value + ).label + } else return this.labelTransformations[option.label] || option.label + } } export default SearchResultsFilters From 53905184d088d53b0387d2b475a4a2249f02c7d2 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Wed, 30 Oct 2024 11:00:29 -0400 Subject: [PATCH 28/49] add italics to rc label --- __test__/pages/search/advancedSearchForm.test.tsx | 2 +- pages/search/advanced.tsx | 2 +- src/components/RefineSearch/SearchFilterCheckboxField.tsx | 8 +++++++- src/config/{aggregations.ts => aggregations.tsx} | 6 +++++- src/models/SearchResultsFilters.ts | 2 +- src/utils/advancedSearchUtils.ts | 2 +- 6 files changed, 16 insertions(+), 6 deletions(-) rename src/config/{aggregations.ts => aggregations.tsx} (97%) diff --git a/__test__/pages/search/advancedSearchForm.test.tsx b/__test__/pages/search/advancedSearchForm.test.tsx index ef1ff4242..82787dd5a 100644 --- a/__test__/pages/search/advancedSearchForm.test.tsx +++ b/__test__/pages/search/advancedSearchForm.test.tsx @@ -6,7 +6,7 @@ import userEvent from "@testing-library/user-event" import AdvancedSearch, { defaultEmptySearchErrorMessage, } from "../../../pages/search/advanced" -import { searchAggregations } from "../../../src/config/aggregations" +import { searchAggregations } from "../../../src/config/aggregations.tsx" // Mock next router jest.mock("next/router", () => jest.requireActual("next-router-mock")) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index bb78a45b9..4a5902269 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -38,7 +38,7 @@ import DateForm from "../../src/components/SearchFilters/DateForm" import SearchFilterCheckboxField from "../../src/components/RefineSearch/SearchFilterCheckboxField" import CancelSubmitButtonGroup from "../../src/components/RefineSearch/CancelSubmitButtonGroup" import { materialTypeOptions } from "../../src/utils/advancedSearchUtils" -import { searchAggregations } from "../../src/config/aggregations" +import { searchAggregations } from "../../src/config/aggregations.tsx" import RCLink from "../../src/components/Links/RCLink/RCLink" export const defaultEmptySearchErrorMessage = diff --git a/src/components/RefineSearch/SearchFilterCheckboxField.tsx b/src/components/RefineSearch/SearchFilterCheckboxField.tsx index d77e118b0..b66f92b83 100644 --- a/src/components/RefineSearch/SearchFilterCheckboxField.tsx +++ b/src/components/RefineSearch/SearchFilterCheckboxField.tsx @@ -38,12 +38,18 @@ const SearchFilterCheckboxField = ({ } const checkboxes = options.map(({ value, label, count }) => { + const labelCount = count ? `(${count})` : "" + return ( + {label} {labelCount} + + } /> ) }) diff --git a/src/config/aggregations.ts b/src/config/aggregations.tsx similarity index 97% rename from src/config/aggregations.ts rename to src/config/aggregations.tsx index 964169388..1a7b1b45f 100644 --- a/src/config/aggregations.ts +++ b/src/config/aggregations.tsx @@ -10,7 +10,11 @@ export const searchAggregations = { }, { value: "rc", - label: "Offsite - Deliverable to NYPL research libraries", + label: ( + <> + Offsite - Deliverable to NYPL research Libraries + + ), }, { value: "pa", diff --git a/src/models/SearchResultsFilters.ts b/src/models/SearchResultsFilters.ts index 3f1a8fe1a..faef36b15 100644 --- a/src/models/SearchResultsFilters.ts +++ b/src/models/SearchResultsFilters.ts @@ -3,7 +3,7 @@ import type { Aggregation, Option, } from "../types/filterTypes" -import { searchAggregations } from "../config/aggregations" +import { searchAggregations } from "../config/aggregations.tsx" class SearchResultsFilters { options: AggregationOption[] diff --git a/src/utils/advancedSearchUtils.ts b/src/utils/advancedSearchUtils.ts index 81d7f4743..648f9ad9e 100644 --- a/src/utils/advancedSearchUtils.ts +++ b/src/utils/advancedSearchUtils.ts @@ -1,5 +1,5 @@ import type { SearchParams, SearchFormInputField } from "../types/searchTypes" -import { searchAggregations } from "../config/aggregations" +import { searchAggregations } from "../config/aggregations.tsx" import { BASE_URL } from "../config/constants" export const textInputFields: SearchFormInputField[] = [ From 6cd332eb5c98771218d7980759718c09569d403b Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Wed, 30 Oct 2024 11:04:06 -0400 Subject: [PATCH 29/49] update lpa label --- src/components/RefineSearch/SearchFilterCheckboxField.tsx | 5 +++-- src/config/aggregations.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/RefineSearch/SearchFilterCheckboxField.tsx b/src/components/RefineSearch/SearchFilterCheckboxField.tsx index b66f92b83..f28b0c10b 100644 --- a/src/components/RefineSearch/SearchFilterCheckboxField.tsx +++ b/src/components/RefineSearch/SearchFilterCheckboxField.tsx @@ -38,7 +38,7 @@ const SearchFilterCheckboxField = ({ } const checkboxes = options.map(({ value, label, count }) => { - const labelCount = count ? `(${count})` : "" + const labelCount = count ? ` (${count})` : "" return ( - {label} {labelCount} + {label} + {labelCount} } /> diff --git a/src/config/aggregations.tsx b/src/config/aggregations.tsx index 1a7b1b45f..1a87dccbb 100644 --- a/src/config/aggregations.tsx +++ b/src/config/aggregations.tsx @@ -18,7 +18,7 @@ export const searchAggregations = { }, { value: "pa", - label: "Library for the Performing Arts", + label: "The New York Public Library for the Performing Arts", }, ], materialType: [ From c775e40412dd5d4b045d5859364e0ff90aa1aabe Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Wed, 30 Oct 2024 11:06:20 -0400 Subject: [PATCH 30/49] rm tsx extension --- __test__/pages/search/advancedSearchForm.test.tsx | 2 +- pages/search/advanced.tsx | 2 +- src/models/SearchResultsFilters.ts | 2 +- src/utils/advancedSearchUtils.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/__test__/pages/search/advancedSearchForm.test.tsx b/__test__/pages/search/advancedSearchForm.test.tsx index 82787dd5a..ef1ff4242 100644 --- a/__test__/pages/search/advancedSearchForm.test.tsx +++ b/__test__/pages/search/advancedSearchForm.test.tsx @@ -6,7 +6,7 @@ import userEvent from "@testing-library/user-event" import AdvancedSearch, { defaultEmptySearchErrorMessage, } from "../../../pages/search/advanced" -import { searchAggregations } from "../../../src/config/aggregations.tsx" +import { searchAggregations } from "../../../src/config/aggregations" // Mock next router jest.mock("next/router", () => jest.requireActual("next-router-mock")) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index 4a5902269..bb78a45b9 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -38,7 +38,7 @@ import DateForm from "../../src/components/SearchFilters/DateForm" import SearchFilterCheckboxField from "../../src/components/RefineSearch/SearchFilterCheckboxField" import CancelSubmitButtonGroup from "../../src/components/RefineSearch/CancelSubmitButtonGroup" import { materialTypeOptions } from "../../src/utils/advancedSearchUtils" -import { searchAggregations } from "../../src/config/aggregations.tsx" +import { searchAggregations } from "../../src/config/aggregations" import RCLink from "../../src/components/Links/RCLink/RCLink" export const defaultEmptySearchErrorMessage = diff --git a/src/models/SearchResultsFilters.ts b/src/models/SearchResultsFilters.ts index faef36b15..3f1a8fe1a 100644 --- a/src/models/SearchResultsFilters.ts +++ b/src/models/SearchResultsFilters.ts @@ -3,7 +3,7 @@ import type { Aggregation, Option, } from "../types/filterTypes" -import { searchAggregations } from "../config/aggregations.tsx" +import { searchAggregations } from "../config/aggregations" class SearchResultsFilters { options: AggregationOption[] diff --git a/src/utils/advancedSearchUtils.ts b/src/utils/advancedSearchUtils.ts index 648f9ad9e..81d7f4743 100644 --- a/src/utils/advancedSearchUtils.ts +++ b/src/utils/advancedSearchUtils.ts @@ -1,5 +1,5 @@ import type { SearchParams, SearchFormInputField } from "../types/searchTypes" -import { searchAggregations } from "../config/aggregations.tsx" +import { searchAggregations } from "../config/aggregations" import { BASE_URL } from "../config/constants" export const textInputFields: SearchFormInputField[] = [ From cb4c5b2f9c7c3f76af5ec6b16ee8fdee5f235030 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Wed, 30 Oct 2024 11:07:08 -0400 Subject: [PATCH 31/49] add typecast --- __test__/pages/search/advancedSearchForm.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__test__/pages/search/advancedSearchForm.test.tsx b/__test__/pages/search/advancedSearchForm.test.tsx index ef1ff4242..b678faea4 100644 --- a/__test__/pages/search/advancedSearchForm.test.tsx +++ b/__test__/pages/search/advancedSearchForm.test.tsx @@ -80,7 +80,7 @@ describe("Advanced Search Form", () => { it("can check location checkboxes", async () => { render() const location = searchAggregations.buildingLocation[0] - await userEvent.click(screen.getByLabelText(location.label)) + await userEvent.click(screen.getByLabelText(location.label as string)) submit() expect(mockRouter.asPath).toBe( `/search?q=&filters%5BbuildingLocation%5D%5B0%5D=${location.value}` From 0703d87f6a6522e916d515b220c892d09aeea53f Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Wed, 30 Oct 2024 11:22:41 -0400 Subject: [PATCH 32/49] fix types --- src/components/SearchFilters/AppliedFilters.tsx | 4 +++- src/types/filterTypes.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/SearchFilters/AppliedFilters.tsx b/src/components/SearchFilters/AppliedFilters.tsx index bf23874df..bcd152e50 100644 --- a/src/components/SearchFilters/AppliedFilters.tsx +++ b/src/components/SearchFilters/AppliedFilters.tsx @@ -25,7 +25,9 @@ const AppliedFilters = ({ aggregations }: { aggregations: Aggregation[] }) => { appliedFilters ) - const tagSetData = buildTagsetData(appliedFiltersWithLabels) + const tagSetData = buildTagsetData( + appliedFiltersWithLabels + ) as TagSetFilterDataProps[] const handleRemove = (tag: TagSetFilterDataProps) => { if (tag.label === "Clear filters") { router.push({ diff --git a/src/types/filterTypes.ts b/src/types/filterTypes.ts index 7cd5d5914..d6ee3ffc7 100644 --- a/src/types/filterTypes.ts +++ b/src/types/filterTypes.ts @@ -41,7 +41,7 @@ export interface Aggregation { export type Option = { value: string - label: string + label: string | JSX.Element count?: number field?: string } From 4664ce603a3517a651dce239bc2bf1e7eb3095e3 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Wed, 30 Oct 2024 11:31:25 -0400 Subject: [PATCH 33/49] add comment --- src/components/SearchFilters/AppliedFilters.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/SearchFilters/AppliedFilters.tsx b/src/components/SearchFilters/AppliedFilters.tsx index bcd152e50..df2822f93 100644 --- a/src/components/SearchFilters/AppliedFilters.tsx +++ b/src/components/SearchFilters/AppliedFilters.tsx @@ -25,6 +25,10 @@ const AppliedFilters = ({ aggregations }: { aggregations: Aggregation[] }) => { appliedFilters ) + // this type cast is happening because Option type had to be updated to + // account for Offsite's Element label. That label does + // not pass thru this part of the code, but this is to placate the + // compiler. const tagSetData = buildTagsetData( appliedFiltersWithLabels ) as TagSetFilterDataProps[] From 6084d8d2b0e26f4d3cdf64dd674caa7577e7cc5c Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Thu, 31 Oct 2024 10:02:47 -0400 Subject: [PATCH 34/49] copy and order fix --- pages/search/advanced.tsx | 2 +- src/components/SearchForm/SearchForm.tsx | 2 +- src/config/aggregations.tsx | 16 ++++++++-------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index bb78a45b9..b3b9c51fb 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -205,7 +205,7 @@ export default function AdvancedSearch({ handleCheckboxChange("buildingLocation", e) } diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx index 081325d2b..5f7278c25 100644 --- a/src/components/SearchForm/SearchForm.tsx +++ b/src/components/SearchForm/SearchForm.tsx @@ -121,7 +121,7 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => { isUnderlined={false} mb="xs" > - Advanced Search + Advanced search {displayRefineResults && ( Date: Thu, 31 Oct 2024 12:48:22 -0400 Subject: [PATCH 35/49] more vqa updates --- __test__/fixtures/searchResultsManyBibs.ts | 28 +++++++++++++++++++ __test__/pages/search/searchResults.test.tsx | 10 +++---- pages/search/advanced.tsx | 4 +-- .../RefineSearch/RefineSearch.test.tsx | 2 +- src/components/RefineSearch/RefineSearch.tsx | 5 ++-- src/config/aggregations.tsx | 16 +++++------ .../modelTests/SearchResultsFilters.test.ts | 16 +++++++++++ 7 files changed, 63 insertions(+), 18 deletions(-) create mode 100644 src/models/modelTests/SearchResultsFilters.test.ts diff --git a/__test__/fixtures/searchResultsManyBibs.ts b/__test__/fixtures/searchResultsManyBibs.ts index 4ce692ab9..3dd9b598c 100644 --- a/__test__/fixtures/searchResultsManyBibs.ts +++ b/__test__/fixtures/searchResultsManyBibs.ts @@ -9072,6 +9072,34 @@ export const aggregationsResults = { "http://discovery-api-production.us-east-1.elasticbeanstalk.com/api/v0.1/discovery/context_all.jsonld", "@type": "itemList", itemListElement: [ + { + "@type": "nypl:Aggregation", + "@id": "res:buildingLocation", + id: "buildingLocation", + field: "buildingLocation", + values: [ + { + value: "sc", + count: 26, + label: "Not the label you should see - sc", + }, + { + value: "rc", + count: 26, + label: "Not the lable you should see - rc", + }, + { + value: "pa", + count: 2, + label: "Not the label you should see - pa", + }, + { + value: "ma", + count: 1, + label: "Not the label you should see - ma", + }, + ], + }, { "@type": "nypl:Aggregation", "@id": "res:materialType", diff --git a/__test__/pages/search/searchResults.test.tsx b/__test__/pages/search/searchResults.test.tsx index 1ffb06295..b121f48b2 100644 --- a/__test__/pages/search/searchResults.test.tsx +++ b/__test__/pages/search/searchResults.test.tsx @@ -25,7 +25,7 @@ describe("Search Results page", () => { results={{ results, aggregations: aggregationsResults }} /> ) - const refine = screen.getByText("Refine Search") + const refine = screen.getByText("Filter results") await userEvent.click(refine) const field = screen.getByLabelText("Greek, Modern (1453-present)", { exact: false, @@ -70,7 +70,7 @@ describe("Search Results page", () => { await userEvent.selectOptions(desktopSortBy, "Title (A - Z)") expect(desktopSortBy).toHaveFocus() }) - it("focuses on cancel after clicking refine search", async () => { + it("focuses on cancel after clicking Filter results", async () => { mockRouter.push(`/search?q=${query}`) render( { results={{ results, aggregations: aggregationsResults }} /> ) - const refine = screen.getByText("Refine Search") + const refine = screen.getByText("Filter results") await userEvent.click(refine) const cancel = screen.getByText("Cancel") expect(cancel).toHaveFocus }) - it("focuses on refine search after clicking cancel", async () => { + it("focuses on Filter results after clicking cancel", async () => { mockRouter.push(`/search?q=${query}`) render( { results={{ results, aggregations: aggregationsResults }} /> ) - const refine = screen.getByText("Refine Search") + const refine = screen.getByText("Filter results") await userEvent.click(refine) const cancel = screen.getByText("Cancel") await userEvent.click(cancel) diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx index b3b9c51fb..ca1f98fef 100644 --- a/pages/search/advanced.tsx +++ b/pages/search/advanced.tsx @@ -55,7 +55,7 @@ export default function AdvancedSearch({ isAuthenticated, goBackHref, }: AdvancedSearchPropTypes) { - const metadataTitle = `Advanced Search | ${SITE_NAME}` + const metadataTitle = `Advanced search | ${SITE_NAME}` const router = useRouter() const inputRef = useRef() const notificationRef = useRef() @@ -153,7 +153,7 @@ export default function AdvancedSearch({ {alert && } - Advanced Search + Advanced search
jest.requireActual("next-router-mock")) const openRefineSearch = async () => { - const refineButton = screen.getByText("Refine Search") + const refineButton = screen.getByText("Filter results") await userEvent.click(refineButton) } const apply = async () => { diff --git a/src/components/RefineSearch/RefineSearch.tsx b/src/components/RefineSearch/RefineSearch.tsx index 9cc3e68ef..fbd36758a 100644 --- a/src/components/RefineSearch/RefineSearch.tsx +++ b/src/components/RefineSearch/RefineSearch.tsx @@ -27,7 +27,7 @@ import CancelSubmitButtonGroup from "./CancelSubmitButtonGroup" import SearchFilterCheckboxField from "./SearchFilterCheckboxField" const fields = [ - { value: "buildingLocation", label: "Location" }, + { value: "buildingLocation", label: "Item location" }, { value: "materialType", label: "Format" }, { value: "language", label: "Language" }, { value: "dateAfter", label: "Start Year" }, @@ -153,7 +153,8 @@ const RefineSearch = ({ backgroundColor="ui.white" className={styles.refineSearchButton} > - Refine Search + + Filter results ) : ( - Offsite - Deliverable to NYPL research Libraries - - ), + value: "ma", + label: "Stephen A. Schwarzman Building", }, { value: "pa", label: "The New York Public Library for the Performing Arts", }, { - value: "ma", - label: "Stephen A. Schwarzman Building", + value: "rc", + label: ( + <> + Off-site - Deliverable to NYPL research Libraries + + ), }, { value: "sc", diff --git a/src/models/modelTests/SearchResultsFilters.test.ts b/src/models/modelTests/SearchResultsFilters.test.ts new file mode 100644 index 000000000..2fb822388 --- /dev/null +++ b/src/models/modelTests/SearchResultsFilters.test.ts @@ -0,0 +1,16 @@ +import { aggregationsResults } from "../../../__test__/fixtures/searchResultsManyBibs" +import type { Aggregation } from "../../types/filterTypes" +import SearchResultsFilters from "../SearchResultsFilters" + +describe("SearchResultsFilter model", () => { + it("adds proper label to building location options", () => { + const filters = new SearchResultsFilters( + aggregationsResults.itemListElement as Aggregation[], + { + value: "buildingLocation", + label: "Item location", + } + ) + filters.options.map((f) => console.log(f.label)) + }) +}) From e5060fe2fceee55820693ae72557f4b00d63631e Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Thu, 31 Oct 2024 15:26:16 -0400 Subject: [PATCH 36/49] extract active filters bar --- src/components/ItemFilters/ActiveFilters.tsx | 32 +++++++++++++++++ src/components/ItemFilters/ItemFilters.tsx | 35 +++++-------------- .../SearchFilters/AppliedFilters.tsx | 13 +++---- src/components/SearchForm/SearchForm.tsx | 9 +++-- src/config/aggregations.tsx | 8 ++--- .../modelTests/SearchResultsFilters.test.ts | 2 +- styles/components/Search.module.scss | 18 ---------- 7 files changed, 56 insertions(+), 61 deletions(-) create mode 100644 src/components/ItemFilters/ActiveFilters.tsx diff --git a/src/components/ItemFilters/ActiveFilters.tsx b/src/components/ItemFilters/ActiveFilters.tsx new file mode 100644 index 000000000..abdf3c11a --- /dev/null +++ b/src/components/ItemFilters/ActiveFilters.tsx @@ -0,0 +1,32 @@ +import { + Box, + TagSet, + Text, + type TagSetFilterDataProps, +} from "@nypl/design-system-react-components" + +const ActiveFilters = ({ filterName, onClick, tagSetData }) => { + return ( + + + Active filters + + + + ) +} + +export default ActiveFilters diff --git a/src/components/ItemFilters/ItemFilters.tsx b/src/components/ItemFilters/ItemFilters.tsx index 6b935e8d3..681013dc9 100644 --- a/src/components/ItemFilters/ItemFilters.tsx +++ b/src/components/ItemFilters/ItemFilters.tsx @@ -6,9 +6,7 @@ import { MultiSelect, SearchBar, Box, - Text, Label, - TagSet, type TagSetFilterDataProps, } from "@nypl/design-system-react-components" import type { @@ -22,6 +20,7 @@ import { buildItemFilterQuery, removeValueFromFilters, } from "../../utils/itemFilterUtils" +import ActiveFilters from "./ActiveFilters" interface ItemFilterContainerProps { itemAggregations: Aggregation[] @@ -200,31 +199,13 @@ const ItemFilters = ({ /> {filtersAreApplied ? ( - - - Active filters - - { - await handleRemoveFilter(filterToRemove.id) - }} - tagSetData={appliedFiltersTagSetData} - /> - + { + await handleRemoveFilter(filterToRemove.id) + }} + tagSetData={appliedFiltersTagSetData} + /> ) : null} ) diff --git a/src/components/SearchFilters/AppliedFilters.tsx b/src/components/SearchFilters/AppliedFilters.tsx index df2822f93..a16b1ca70 100644 --- a/src/components/SearchFilters/AppliedFilters.tsx +++ b/src/components/SearchFilters/AppliedFilters.tsx @@ -1,10 +1,6 @@ import { useRouter } from "next/router" -import { - TagSet, - type TagSetFilterDataProps, -} from "@nypl/design-system-react-components" +import { type TagSetFilterDataProps } from "@nypl/design-system-react-components" -import styles from "../../../styles/components/Search.module.scss" import { getQueryWithoutFilters, buildFilterQuery, @@ -16,6 +12,7 @@ import { addLabelPropAndParseFilters, } from "./appliedFilterUtils" import type { Aggregation } from "../../types/filterTypes" +import ActiveFilters from "../ItemFilters/ActiveFilters" const AppliedFilters = ({ aggregations }: { aggregations: Aggregation[] }) => { const router = useRouter() @@ -56,12 +53,10 @@ const AppliedFilters = ({ aggregations }: { aggregations: Aggregation[] }) => { if (!tagSetData.length) return null return ( - ) } diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx index 5f7278c25..cdc5f67b0 100644 --- a/src/components/SearchForm/SearchForm.tsx +++ b/src/components/SearchForm/SearchForm.tsx @@ -1,5 +1,6 @@ import { Box, + Flex, Icon, SearchBar, Text, @@ -114,7 +115,11 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => { ".chakra-select__icon-wrapper": { "z-index": "999 !important" }, }} /> - + { aggregations={aggregations} /> )} - + ) diff --git a/src/config/aggregations.tsx b/src/config/aggregations.tsx index 367ed5d9d..f3227dea7 100644 --- a/src/config/aggregations.tsx +++ b/src/config/aggregations.tsx @@ -8,6 +8,10 @@ export const searchAggregations = { value: "pa", label: "The New York Public Library for the Performing Arts", }, + { + value: "sc", + label: "Schomburg Center for Research in Black Culture", + }, { value: "rc", label: ( @@ -16,10 +20,6 @@ export const searchAggregations = { ), }, - { - value: "sc", - label: "Schomburg Center for Research in Black Culture", - }, ], materialType: [ { diff --git a/src/models/modelTests/SearchResultsFilters.test.ts b/src/models/modelTests/SearchResultsFilters.test.ts index 2fb822388..5812e4b79 100644 --- a/src/models/modelTests/SearchResultsFilters.test.ts +++ b/src/models/modelTests/SearchResultsFilters.test.ts @@ -11,6 +11,6 @@ describe("SearchResultsFilter model", () => { label: "Item location", } ) - filters.options.map((f) => console.log(f.label)) + // filters.options.map((f) => console.log(f.label)) }) }) diff --git a/styles/components/Search.module.scss b/styles/components/Search.module.scss index 879373a4c..262abf154 100644 --- a/styles/components/Search.module.scss +++ b/styles/components/Search.module.scss @@ -1,13 +1,5 @@ @import "../utils/mixins"; -.filterTags { - margin-bottom: var(--nypl-space-xs); - - button[id^="ts-filter-clear-all"] { - color: var(--nypl-colors-ui-link-primary); - text-decoration: underline; - } -} .searchContainer { background-color: var(--nypl-colors-ui-bg-default); padding: var(--nypl-space-s) 0; @@ -33,16 +25,6 @@ } } -.auxSearchContainer { - display: flex; - flex-direction: column; - justify-content: space-between; - margin-top: var(--nypl-space-xs); - @media screen and (min-width: 600px) { - flex-direction: row-reverse; - } -} - .advancedSearch { align-self: flex-start; min-width: 127px; From 7c06cc622c820e1744803299286cd62c51afe4d2 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Thu, 31 Oct 2024 15:42:43 -0400 Subject: [PATCH 37/49] fix refine search panel alignment --- src/components/RefineSearch/RefineSearch.tsx | 6 +++++- src/components/SearchForm/SearchForm.tsx | 7 ++----- styles/components/Search.module.scss | 6 +----- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/RefineSearch/RefineSearch.tsx b/src/components/RefineSearch/RefineSearch.tsx index fbd36758a..fcc992eb2 100644 --- a/src/components/RefineSearch/RefineSearch.tsx +++ b/src/components/RefineSearch/RefineSearch.tsx @@ -143,7 +143,11 @@ const RefineSearch = ({ } return ( - + {refineSearchClosed ? ( ) : ( - - + + -
) } From 2f0301819b707b600b01a08e23903bb09f957c4d Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Fri, 1 Nov 2024 12:52:36 -0400 Subject: [PATCH 47/49] copy update --- src/config/aggregations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config/aggregations.tsx b/src/config/aggregations.tsx index 6116f5bbd..4746bb921 100644 --- a/src/config/aggregations.tsx +++ b/src/config/aggregations.tsx @@ -16,7 +16,7 @@ export const searchAggregations = { value: "rc", label: ( <> - Off-site - Deliverable to NYPL all Research Libraries + Off-site - Deliverable to all NYPL Research Libraries ), }, From 31a22a2610aa5772060d056448679e80ebcf88b3 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Wed, 6 Nov 2024 11:41:22 -0400 Subject: [PATCH 48/49] update changelog --- CHANGELOG | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG b/CHANGELOG index 832ef6869..d1b8bf361 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## Prerelease +## [1.3.6] 2024-11-6 ## Updated From fd75a5148903e018a5d4a779c6500ffede9218e0 Mon Sep 17 00:00:00 2001 From: Vera Kahn Date: Wed, 6 Nov 2024 11:45:58 -0400 Subject: [PATCH 49/49] changelog --- CHANGELOG | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index d1b8bf361..22b0ee9e1 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -7,12 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [1.3.6] 2024-11-6 +## Added + +- Holding location filters to refine search and advanced search panels +- "Go back" button to advanced search + ## Updated - Better handling of bibs with no titles in SearchResultsBib model - Create reusable save/cancel button group -- Add holding location filters to refine search and advanced search panels -- Add go back button to advanced search - Extract checkbox groups from refine search and advanced search ## [1.3.5] 2024-10-23