diff --git a/CHANGELOG.md b/CHANGELOG.md index b5b8c9ac..a17fd0fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ * Add translation for `Unavailable` item status message. Refs UISACQCOMP-205. * Keep returnUrl in routing list navigation. Refs UISACQCOMP-206. * ECS - clear Location/Holding field when affiliation selected. Refs UISACQCOMP-201. +* ECS - clear Select location filters on change another Affiliation. Refs UISACQCOMP-208. ## [5.1.1](https://github.com/folio-org/stripes-acq-components/tree/v5.1.1) (2024-04-22) [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v5.1.0...v5.1.1) diff --git a/lib/FieldHolding/FieldHolding.js b/lib/FieldHolding/FieldHolding.js index 9bb54f8a..8a89dbd0 100644 --- a/lib/FieldHolding/FieldHolding.js +++ b/lib/FieldHolding/FieldHolding.js @@ -110,7 +110,9 @@ export const FieldHolding = ({ }, [locationFieldName, onChange]); useEffect(() => { - if (previousTenantId !== tenantId) { + const shouldResetLocation = tenantId && previousTenantId && (tenantId !== previousTenantId); + + if (shouldResetLocation) { clearSelectedLocation(); onChangeHolding(undefined); } diff --git a/lib/FieldHolding/FieldHolding.test.js b/lib/FieldHolding/FieldHolding.test.js index 4fa13e71..7455fca7 100644 --- a/lib/FieldHolding/FieldHolding.test.js +++ b/lib/FieldHolding/FieldHolding.test.js @@ -88,4 +88,25 @@ describe('FieldHolding component', () => { expect(screen.getAllByText(locationsMap[holdings[0].permanentLocationId].name)[0]).toBeInTheDocument(); expect(screen.queryByText(locationsMap[holdings[1].permanentLocationId].name)).not.toBeInTheDocument(); }); + + it('should clear selected holding when tenant changes', () => { + const onChange = jest.fn(); + const { rerender } = renderFieldHolding({ tenantId: 'tenant1', onChange }); + + rerender( +
( + + )} + />, + ); + + expect(onChange).toHaveBeenCalledWith(null, defaultProps.locationFieldName); + }); }); diff --git a/lib/FindLocation/FindLocationLookup.js b/lib/FindLocation/FindLocationLookup.js index 3ea44a16..01a7a599 100644 --- a/lib/FindLocation/FindLocationLookup.js +++ b/lib/FindLocation/FindLocationLookup.js @@ -31,6 +31,8 @@ import { useLocationsRecords, } from './hooks'; +const INITIAL_FILTERS = {}; + export const FindLocationLookup = (props) => { const { affiliationsLabel, @@ -51,7 +53,7 @@ export const FindLocationLookup = (props) => { const currUserTenants = useCurrentUserTenants(); const [selectedLocations, setSelectedLocations] = useState({}); - const [filters, setFilters] = useState({}); + const [filters, setFilters] = useState(INITIAL_FILTERS); const options = { tenantId, @@ -116,7 +118,6 @@ export const FindLocationLookup = (props) => { || isCampusesLoading || isLibrariesLoading ); - const renderFilters = useCallback((activeFilters, applyFilters) => ( { libraries, ]); - const renderBeforeSearch = useCallback(() => { + const renderBeforeSearch = useCallback((resetFilters) => { return crossTenant ? ( { + onTenantChange?.(tenant); + resetFilters?.(); + setFilters(INITIAL_FILTERS); + }} isLoading={isLoading} value={tenantId} /> diff --git a/lib/FindLocation/FindLocationLookup.test.js b/lib/FindLocation/FindLocationLookup.test.js new file mode 100644 index 00000000..63fbeedf --- /dev/null +++ b/lib/FindLocation/FindLocationLookup.test.js @@ -0,0 +1,178 @@ +import { useLocalStorage } from '@rehooks/local-storage'; +import { render, screen } from '@testing-library/react'; +import user from '@testing-library/user-event'; + +import { + useCampusesQuery, + useCurrentUserTenants, + useInstitutionsQuery, + useLibrariesQuery, +} from '../hooks'; +import { FindLocationLookup } from './FindLocationLookup'; +import { + useLocationsList, + useLocationsRecords, +} from './hooks'; + +jest.mock('@rehooks/local-storage', () => ({ + useLocalStorage: jest.fn(), +})); + +jest.mock('../AcqList', () => ({ + ...jest.requireActual('../AcqList'), + useFiltersToogle: () => ({ isFiltersOpened: true, toggleFilters: jest.fn }), +})); +jest.mock('../hooks', () => ({ + ...jest.requireActual('../hooks'), + useCampusesQuery: jest.fn(), + useCurrentUserTenants: jest.fn(), + useEventEmitter: jest.fn().mockReturnValue({ + emit: jest.fn(), + on: jest.fn(), + off: jest.fn(), + }), + useInstitutionsQuery: jest.fn(), + useLibrariesQuery: jest.fn(), +})); +jest.mock('./hooks', () => ({ + useLocationsList: jest.fn(), + useLocationsRecords: jest.fn(), +})); + +const setItem = jest.fn(); +const removeItem = jest.fn(); +const mockTenants = [ + { + id: 'central', + name: 'Central Office', + isPrimary: true, + }, + { + id: 'college', + name: 'College', + isPrimary: false, + }, +]; + +const renderFindLocationLookup = (props) => render( + , +); + +describe('FindLocationLookup', () => { + beforeEach(() => { + useCampusesQuery.mockClear().mockReturnValue({ + campuses: [], + isLoading: false, + }); + useInstitutionsQuery.mockClear().mockReturnValue({ + institutions: [], + isLoading: false, + }); + useLibrariesQuery.mockClear().mockReturnValue({ + libraries: [], + isLoading: false, + }); + useLocationsList.mockClear().mockReturnValue({ locations: [] }); + useLocationsRecords.mockClear().mockReturnValue({ + locations: [], + isLoading: false, + }); + useLocalStorage.mockReturnValue([ + null, + setItem, + removeItem, + ]); + useCurrentUserTenants.mockClear().mockReturnValue(mockTenants); + }); + it('should render FindRecords component', () => { + const { getByText } = renderFindLocationLookup(); + + expect(getByText('resultsPaneTitle')).toBeDefined(); + }); + + it('should clear filters on tenant change', async () => { + const onTenantChange = jest.fn(); + + useInstitutionsQuery.mockClear().mockReturnValue({ + institutions: [ + { + 'id': 'a0ba27d5-aa76-4bfb-904d-1ba9b80ab882', + 'tenantId': 'cs00000int', + 'name': 'Test 1', + }, + ], + isLoading: false, + }); + useCampusesQuery.mockClear().mockReturnValue({ + campuses: [{ + 'id': '124da306-a838-40c4-812d-4e2d1e82ebdd', + 'tenantId': 'cs00000int', + 'name': 'Campus 1', + 'institutionId': '9d1b77e5-f02e-4b7f-b296-3f2042ddac54', + }], + isLoading: false, + }); + useLibrariesQuery.mockClear().mockReturnValue({ + libraries: [{ + 'id': '563e0d8b-180d-45fb-abfe-5d0696ba4f60', + 'tenantId': 'cs00000int', + 'name': 'library', + 'campusId': '124da306-a838-40c4-812d-4e2d1e82ebdd', + }], + isLoading: false, + }); + useLocationsList.mockClear().mockReturnValue({ + locations: [ + { + 'id': '65578bd8-0e87-472e-8579-9db5cfe846dc', + 'name': 'Folio name', + 'tenantId': 'cs00000int', + 'code': 'location-new', + 'discoveryDisplayName': 'Location new', + 'isActive': 'true', + 'institutionId': '9d1b77e5-f02e-4b7f-b296-3f2042ddac54', + 'campusId': '124da306-a838-40c4-812d-4e2d1e82ebdd', + 'libraryId': '563e0d8b-180d-45fb-abfe-5d0696ba4f60', + 'primaryServicePoint': '9d1b77e8-f02e-4b7f-b296-3f2042ddac54', + 'servicePointIds': [ + '9d1b77e8-f02e-4b7f-b296-3f2042ddac54', + ], + 'campus': { + 'id': '124da306-a838-40c4-812d-4e2d1e82ebdd', + 'tenantId': 'cs00000int', + 'name': 'Campus 1', + 'institutionId': '9d1b77e5-f02e-4b7f-b296-3f2042ddac54', + }, + 'library': { + 'id': '563e0d8b-180d-45fb-abfe-5d0696ba4f60', + 'tenantId': 'cs00000int', + 'name': 'library', + 'campusId': '124da306-a838-40c4-812d-4e2d1e82ebdd', + }, + }, + ], + }); + + renderFindLocationLookup({ onTenantChange }); + + const affiliationSelection = await screen.findByText('affiliationsLabel'); + + expect(affiliationSelection).toBeInTheDocument(); + await user.click(screen.getByText(mockTenants[1].name)); + + expect(onTenantChange).toHaveBeenCalledWith(mockTenants[1].id); + }); +}); diff --git a/lib/FindRecords/FindRecordsModal.js b/lib/FindRecords/FindRecordsModal.js index d2ef1a67..8de0383c 100644 --- a/lib/FindRecords/FindRecordsModal.js +++ b/lib/FindRecords/FindRecordsModal.js @@ -1,6 +1,9 @@ import { pickBy, noop } from 'lodash'; import PropTypes from 'prop-types'; -import React, { useEffect } from 'react'; +import { + createRef, + useEffect, +} from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import { @@ -240,7 +243,7 @@ export const FindRecordsModal = ({ label={modalLabel} onClose={closeModal} open - ref={modalRef || React.createRef()} + ref={modalRef || createRef()} size="large" style={{ minHeight: '500px' }} > @@ -260,7 +263,7 @@ export const FindRecordsModal = ({ toggleFilters={toggleFilters} width="22%" > - {renderBeforeSearch()} + {renderBeforeSearch(resetFilters)}