From de0ff0d3b6f4c7e84e97b8fc035185f0ab7b9d86 Mon Sep 17 00:00:00 2001 From: Oleksandr Mazur <85229023+mazursasha1990@users.noreply.github.com> Date: Fri, 14 Feb 2025 12:44:05 +0200 Subject: [PATCH] [OSDEV-1653] Highlight the mandatory fields on the form for Search by name and address. (#509) [OSDEV-1653](https://opensupplyhub.atlassian.net/browse/OSDEV-1653) - SLC. Implement search page for name & address search (FE). - Mandatory fields are not obvious. In this PR, the following changes were implemented: - Added asterisks next to each required form field (Name, Address, and Country) on the "Search by Name and Address" tab. - Highlighted an empty field and displayed an error message when it loses focus. - Added proper styles for the error messages. - The `SearchByNameAndAddressTab` component was covered by test cases. ![Screenshot from 2025-02-13 19-18-43](https://github.com/user-attachments/assets/9369ce1c-4724-4235-a544-909704e9db96) ![Screenshot from 2025-02-13 19-18-59](https://github.com/user-attachments/assets/80a12cd7-3324-4c90-b5a2-60dc69436f58) [OSDEV-1653]: https://opensupplyhub.atlassian.net/browse/OSDEV-1653?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --- doc/release/RELEASE-NOTES.md | 1 + .../SearchByNameAndAddressTab.test.js | 187 ++++++++++++++++++ .../Contribute/SearchByNameAndAddressTab.jsx | 131 +++++++----- src/react/src/util/styles.js | 19 +- 4 files changed, 287 insertions(+), 51 deletions(-) create mode 100644 src/react/src/__tests__/components/SearchByNameAndAddressTab.test.js diff --git a/doc/release/RELEASE-NOTES.md b/doc/release/RELEASE-NOTES.md index 6fb0e6a94..3facf0240 100644 --- a/doc/release/RELEASE-NOTES.md +++ b/doc/release/RELEASE-NOTES.md @@ -67,6 +67,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html * [OSDEV-1695](https://opensupplyhub.atlassian.net/browse/OSDEV-1695) - [SLC] Enabled the claim button for updated production locations when a moderation event has a pending status. Disabled claim button explicitly if production location has pending claim status. * [OSDEV-1701](https://opensupplyhub.atlassian.net/browse/OSDEV-1701) - Refactored "Go Back" button in production location info page. * [OSDEV-1672](https://opensupplyhub.atlassian.net/browse/OSDEV-1672) - SLC. Implement collecting contribution data page (FE) - All Multi-Selects on the page have been fixed. They resize based on the number of items selected. +* [OSDEV-1653](https://opensupplyhub.atlassian.net/browse/OSDEV-1653) - Added asterisks next to each required form field (Name, Address, and Country) on the "Search by Name and Address" tab. Highlighted an empty field and displayed an error message if it loses focus. Added proper styles for the error messages. ### What's new * [OSDEV-1662](https://opensupplyhub.atlassian.net/browse/OSDEV-1662) - Added a new field, `action_perform_by`, to the moderation event. This data appears on the Contribution Record page when a moderator perform any actions like `APPROVED` or `REJECTED`. diff --git a/src/react/src/__tests__/components/SearchByNameAndAddressTab.test.js b/src/react/src/__tests__/components/SearchByNameAndAddressTab.test.js new file mode 100644 index 000000000..5baa57577 --- /dev/null +++ b/src/react/src/__tests__/components/SearchByNameAndAddressTab.test.js @@ -0,0 +1,187 @@ +import React from "react"; +import { fireEvent } from "@testing-library/react"; +import SearchByNameAndAddressTab from "../../components/Contribute/SearchByNameAndAddressTab"; +import { searchByNameAndAddressResultRoute } from "../../util/constants"; +import renderWithProviders from "../../util/testUtils/renderWithProviders"; + + +const mockPush = jest.fn(); + +jest.mock("react-router-dom", () => { + const actual = jest.requireActual("react-router-dom"); + return { + ...actual, + useHistory: () => ({ + push: mockPush, + }), + }; +}); + +jest.mock("../../components/Filters/StyledSelect", () => (props) => { + const { options, value, onChange, onBlur, placeholder } = props; + return ( + + ); +}); + +describe("SearchByNameAndAddressTab component", () => { + const countriesData = [ + { value: "GB", label: "United Kingdom" }, + { value: "US", label: "United States" }, + ]; + + const defaultState = { + filterOptions: { + countries: { + data: countriesData, + error: null, + fetching: false, + }, + }, + }; + + test("renders loading indicator when fetching is true", () => { + const { getByRole } = renderWithProviders( + , + { + preloadedState: { + filterOptions: { + countries: { + data: countriesData, + error: null, + fetching: true, + }, + }, + }, + }, + ); + + expect(getByRole("progressbar")).toBeInTheDocument(); + }); + + test("renders error message when error is provided", () => { + const errorMsg = "An error occurred"; + const { getByText } = renderWithProviders( + , + { + preloadedState: { + filterOptions: { + countries: { + data: countriesData, + error: [errorMsg], + fetching: false, + }, + }, + }, + }, + ); + expect(getByText(errorMsg)).toBeInTheDocument(); + }); + + test("renders form fields and disabled Search button by default", () => { + const { getByText, getByRole, getByPlaceholderText, getByTestId } = + renderWithProviders(, { + preloadedState: defaultState, + }); + + expect( + getByText(/Check if the production location is already on OS Hub/i), + ).toBeInTheDocument(); + expect(getByText("Production Location Details")).toBeInTheDocument(); + expect(getByText("Enter the Name")).toBeInTheDocument(); + expect(getByText("Enter the Address")).toBeInTheDocument(); + expect(getByText("Select the Country")).toBeInTheDocument(); + + const nameInput = getByPlaceholderText("Type a name"); + expect(nameInput).toBeInTheDocument(); + expect(nameInput).toHaveValue(""); + + const addressInput = getByPlaceholderText("Address"); + expect(addressInput).toBeInTheDocument(); + expect(addressInput).toHaveValue(""); + + const countrySelect = getByTestId("countries-select"); + expect(countrySelect).toBeInTheDocument(); + expect(countrySelect).toHaveValue(""); + + const searchButton = getByRole("button", { name: /Search/i }); + expect(searchButton).toBeDisabled(); + }); + + test("enables the Search button when all fields are filled", () => { + const { getByRole, getByPlaceholderText, getByTestId } = + renderWithProviders(, { + preloadedState: defaultState, + }); + + const nameInput = getByPlaceholderText("Type a name"); + const addressInput = getByPlaceholderText("Address"); + const countrySelect = getByTestId("countries-select"); + const searchButton = getByRole("button", { name: /Search/i }); + + expect(searchButton).toBeDisabled(); + + fireEvent.change(nameInput, { target: { value: "Test Name" } }); + fireEvent.change(addressInput, { target: { value: "Test Address" } }); + fireEvent.change(countrySelect, { target: { value: "US" } }); + + expect(countrySelect.value).toBe("US"); + expect(searchButton).toBeEnabled(); + + const searchParams = new URLSearchParams({ + name: "Test Name", + address: "Test Address", + country: "US", + }); + const expectedUrl = `${searchByNameAndAddressResultRoute}?${searchParams.toString()}`; + + fireEvent.click(searchButton); + expect(mockPush).toHaveBeenCalledWith(expectedUrl); + }); + + test("shows error indication on blur when fields are empty", () => { + const { getByText, getAllByText, getByTestId, getByPlaceholderText } = + renderWithProviders(, { + preloadedState: defaultState, + }); + const nameInput = getByPlaceholderText("Type a name"); + const addressInput = getByPlaceholderText("Address"); + const countrySelect = getByTestId("countries-select"); + + fireEvent.blur(nameInput); + fireEvent.blur(addressInput); + fireEvent.blur(countrySelect); + + expect(getByPlaceholderText("Type a name")).toHaveAttribute( + "aria-invalid", + "true", + ); + expect(getByPlaceholderText("Address")).toHaveAttribute( + "aria-invalid", + "true", + ); + expect(getAllByText(/This field is required./i)).toHaveLength(2); + expect( + getByText( + /The country is missing from your search. Select the correct country from the drop down menu./i, + ), + ).toBeInTheDocument(); + }); +}); diff --git a/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx b/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx index c66704c65..1c5088dd3 100644 --- a/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx +++ b/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx @@ -17,25 +17,46 @@ import { makeSearchByNameAddressTabStyles } from '../../util/styles'; import { countryOptionsPropType } from '../../util/propTypes'; import { fetchCountryOptions } from '../../actions/filterOptions'; -const selectStyles = { - control: provided => ({ - ...provided, - height: '56px', - borderRadius: '0', - '&:focus,&:active,&:focus-within': { - borderColor: COLOURS.PURPLE, - boxShadow: `inset 0 0 0 1px ${COLOURS.PURPLE}`, +const getSelectStyles = isErrorState => ({ + control: (provided, state) => { + let borderColor; + if (isErrorState) { + borderColor = COLOURS.RED; + } else if (state.isFocused) { + borderColor = COLOURS.PURPLE; + } else { + borderColor = provided.borderColor; + } + + const boxShadow = state.isFocused + ? `inset 0 0 0 1px ${borderColor}` + : provided.boxShadow; + + return { + ...provided, + height: '56px', + borderRadius: '0', + borderColor, + boxShadow, transition: 'box-shadow 0.2s', - }, - '&:hover': { - borderColor: 'black', - }, - }), + '&:hover': { + borderColor: !isErrorState && !state.isFocused && 'black', + }, + }; + }, placeholder: provided => ({ ...provided, opacity: 0.7, + color: isErrorState ? COLOURS.RED : provided.color, }), -}; +}); + +const FormFieldTitle = ({ label, classes }) => ( + + {label} + * + +); const SearchByNameAndAddressTab = ({ classes, @@ -51,25 +72,29 @@ const SearchByNameAndAddressTab = ({ const [addressTouched, setAddressTouched] = useState(false); const [countryTouched, setCountryTouched] = useState(false); + const isCountryError = countryTouched && !inputCountry?.value; + const history = useHistory(); - const isValid = val => { - if (val) { - return val.length > 0; - } - return false; - }; + const isValid = val => val.trim().length > 0; + const handleNameChange = event => { - setNameTouched(true); setInputName(event.target.value); }; const handleAddressChange = event => { - setAddressTouched(true); setInputAddress(event.target.value); }; const handleCountryChange = event => { - setCountryTouched(true); setInputCountry(event); }; + const handleNameBlur = () => { + setNameTouched(true); + }; + const handleAddressBlur = () => { + setAddressTouched(true); + }; + const handleCountryBlur = () => { + setCountryTouched(true); + }; const handleSearch = () => { const baseUrl = searchByNameAndAddressResultRoute; @@ -83,10 +108,7 @@ const SearchByNameAndAddressTab = ({ history.push(url); }; const isFormValid = - isValid(inputName) && - isValid(inputAddress) && - countryTouched && - isValid(inputCountry.value); + isValid(inputName) && isValid(inputAddress) && inputCountry?.value; useEffect(() => { if (!countriesData) { @@ -117,17 +139,20 @@ const SearchByNameAndAddressTab = ({ Production Location Details - - Enter the Name - + + } + error={nameTouched && !isValid(inputName)} InputProps={{ classes: { input: `${classes.searchInputStyles} @@ -142,22 +167,27 @@ const SearchByNameAndAddressTab = ({ type: 'text', }, }} - helperText={ - nameTouched && !isValid(inputName) && - } - error={nameTouched && !isValid(inputName)} + FormHelperTextProps={{ + classes: { + root: classes.helperTextStyles, + }, + }} /> - - Enter the Address - + + } + error={addressTouched && !isValid(inputAddress)} InputProps={{ classes: { input: `${classes.searchInputStyles} @@ -169,15 +199,13 @@ const SearchByNameAndAddressTab = ({ notchedOutline: classes.notchedOutlineStyles, }, }} - helperText={ - addressTouched && - !isValid(inputAddress) && - } - error={addressTouched && !isValid(inputAddress)} + FormHelperTextProps={{ + classes: { + root: classes.helperTextStyles, + }, + }} /> - - Select the Country - + + {isCountryError && ( +
+ +
+ )}