[OSDEV-1373] SLC. Implement search page for name & address search (FE).

[Innavin369]

[OSDEV-1373 ](https://opensupplyhub.atlassian.net/browse/OSDEV-1373) The tab Search by Name and Address. on the Production Location Search screen has been implemented. There are three required properties (name, address, country). The "Search" button becomes clickable after filling out inputs, creates a link with parameters, and allows users to proceed to the results screen.

[coderabbitai]

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (3)

src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx (1)

179-191: Enhance accessibility for the country selector.

The country selector component could benefit from improved accessibility attributes.

Add ARIA attributes to improve screen reader support:

 <StyledSelect
     id="countries"
     name="What's the country?"
     aria-label="Select country"
+    aria-required="true"
+    aria-invalid={!validate(inputCountry.value)}
+    aria-describedby="country-helper-text"
     label={null}
     options={countriesData || []}
     value={inputCountry}
     onChange={handleCountryChange}
     className={`basic-multi-select notranslate ${classes.selectStyles}`}
     styles={selectStyles}
     placeholder="What's the country?"
     isMulti={false}
 />

src/react/src/util/styles.js (2)

809-815: Add responsive styles for mobile devices.

The search wrapper styles lack mobile-specific adjustments.

Add responsive padding for better mobile experience:

 searchWrapStyles: Object.freeze({
     display: 'flex',
     flexDirection: 'column',
-    padding: '40px 110px',
+    padding: '40px',
+    [theme.breakpoints.up('md')]: {
+        padding: '40px 110px',
+    },
     borderRadius: '0',
     boxShadow: 'none',
 }),

---

852-863: Consider adding focus styles for better accessibility.

The search button styles should include visible focus indicators for keyboard navigation.

Add focus styles to the search button:

 searchButtonStyles: Object.freeze({
     width: '200px',
     height: '49px',
     borderRadius: 0,
     textTransform: 'none',
     backgroundColor: theme.palette.action.main,
     marginTop: '26px',
     color: theme.palette.common.black,
     '&:hover': {
         backgroundColor: theme.palette.action.dark,
     },
+    '&:focus-visible': {
+        outline: `2px solid ${theme.palette.primary.main}`,
+        outlineOffset: '2px',
+    },
 }),

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 13328c7 and 7e4cdf6.

📒 Files selected for processing (5)

• doc/release/RELEASE-NOTES.md (1 hunks)
• src/react/src/__tests__/components/ContributeProductionLocation.test.js (2 hunks)
• src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx (1 hunks)
• src/react/src/components/Filters/StyledSelect.jsx (2 hunks)
• src/react/src/util/styles.js (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• src/react/src/components/Filters/StyledSelect.jsx
• doc/release/RELEASE-NOTES.md

[VadimKovalenkoSNF]

Request minor changes.

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)

src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx (1)

54-54: Consider enhancing the validation logic.

The current validation only checks for non-empty strings. Consider adding more robust validation for special characters, maximum length, and proper formatting.

-const validate = val => val.length > 0;
+const validate = val => {
+    if (!val || val.length === 0) return false;
+    if (val.length > 255) return false;
+    return /^[a-zA-Z0-9\s,.-]+$/.test(val);
+};

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 7e4cdf6 and 38a8d07.

📒 Files selected for processing (3)

• src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx (1 hunks)
• src/react/src/util/COLOURS.js (1 hunks)
• src/react/src/util/styles.js (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/react/src/util/COLOURS.js

🔇 Additional comments (5)

src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx (4)

1-32: LGTM! Well-structured component setup.

The imports are well organized, and the component structure follows React best practices with proper prop-types validation.

---

101-208: LGTM! Well-implemented form with proper accessibility and error handling.

The form implementation follows Material-UI best practices and includes proper accessibility attributes.

---

225-242: LGTM! Clean Redux implementation.

The Redux connection is well-structured and follows best practices.

---

83-87: 🛠️ Refactor suggestion

Add error handling for country data fetching.

The useEffect hook should include error handling for the fetch operation.

 useEffect(() => {
     if (!countriesData) {
-        fetchCountries();
+        const fetchData = async () => {
+            try {
+                await fetchCountries();
+            } catch (error) {
+                console.error('Failed to fetch countries:', error);
+                // Consider showing an error message to the user
+            }
+        };
+        fetchData();
     }
 }, [countriesData, fetchCountries]);

Likely invalid or redundant comment.

src/react/src/util/styles.js (1)

785-864: LGTM! Well-structured and consistent style definitions.

The style definitions follow the established patterns, properly use Object.freeze, and maintain consistency with the existing codebase.

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[VadimKovalenkoSNF]

Approved.

[roman-stolar]

LGTM