[OSDEV-1789] SLC. "Search results" scrolls from the bottom

doc/release/RELEASE-NOTES.md

@@ -14,6 +14,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
 ### Bugfix
 * [OSDEV-1806](https://opensupplyhub.atlassian.net/browse/OSDEV-1806) - Refactored the Parent Company field validation. The field is now validated as a regular character field.
 * [OSDEV-1787](https://opensupplyhub.atlassian.net/browse/OSDEV-1787) - The tooltip messages for the Claim button have been removed for all statuses of moderation events on the `Contribution Record` page and changed according to the design on `Thanks for adding data for this production location` pop-up.
+* [OSDEV-1789](https://opensupplyhub.atlassian.net/browse/OSDEV-1789) - Fixed an issue where the scroll position was not resetting to the top when navigating through SLC workflow pages.
 
 ### Release instructions:
 * Ensure that the following commands are included in the `post_deployment` command:

src/react/src/components/Contribute/ContributeProductionLocation.jsx

@@ -11,6 +11,7 @@ import SearchByOsIdTab from './SearchByOsIdTab';
 import SearchByNameAndAddressTab from './SearchByNameAndAddressTab';
 import RequireAuthNotice from '../RequireAuthNotice';
 import { makeContributeProductionLocationStyles } from '../../util/styles';
+import { useResetScrollPosition } from '../../util/hooks';
 
 const TAB_OS_ID = 'os-id';
 const TAB_NAME_ADDRESS = 'name-address';
@@ -32,6 +33,8 @@ const ContributeProductionLocation = ({
         VALID_TABS.includes(tabInQuery) ? tabInQuery : TAB_NAME_ADDRESS,
     );
 
+    useResetScrollPosition(location);
+
     useEffect(() => {
         if (VALID_TABS.includes(tabInQuery)) {
             setSelectedTab(tabInQuery);

src/react/src/components/Contribute/ProductionLocationInfo.jsx

@@ -15,6 +15,7 @@ import RequireAuthNotice from '../RequireAuthNotice';
 import StyledSelect from '../Filters/StyledSelect';
 import RequiredAsterisk from '../RequiredAsterisk';
 import { productionLocationInfoStyles } from '../../util/styles';
+import { useResetScrollPosition } from '../../util/hooks';
 import {
     countryOptionsPropType,
     facilityProcessingTypeOptionsPropType,
@@ -138,9 +139,7 @@ const ProductionLocationInfo = ({
         setParentCompany('');
     };
 
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    }, [location]);
+    useResetScrollPosition(location);
 
     const inputData = useMemo(
         () => ({

src/react/src/components/Contribute/SearchByNameAndAddressResult.jsx

@@ -20,6 +20,7 @@ import {
 import history from '../../util/history';
 import { productionLocationPropType } from '../../util/propTypes';
 import { makeSearchByNameAndAddressResultStyles } from '../../util/styles';
+import { useResetScrollPosition } from '../../util/hooks';
 
 const SearchByNameAndAddressResult = ({
     data: productionLocations,
@@ -33,6 +34,8 @@ const SearchByNameAndAddressResult = ({
     const TITLE = 'Production Location Search';
     const location = useLocation();
 
+    useResetScrollPosition(location);
+
     useEffect(() => {
         const searchParams = new URLSearchParams(location.search);
         const name = searchParams.get('name');

src/react/src/components/Contribute/SearchByOsIdResult.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useHistory, useParams, useLocation } from 'react-router-dom';
 import { connect } from 'react-redux';
 import isEmpty from 'lodash/isEmpty';
 import { object, bool, func } from 'prop-types';
@@ -16,6 +16,7 @@ import {
 } from '../../actions/contributeProductionLocation';
 import { contributeProductionLocationRoute } from '../../util/constants';
 import { makeSearchByOsIdResultStyles } from '../../util/styles';
+import { useResetScrollPosition } from '../../util/hooks';
 import { productionLocationPropType } from '../../util/propTypes';
 
 import BackToSearchButton from './BackToSearchButton';
@@ -33,8 +34,11 @@ const SearchByOsIdResult = ({
 }) => {
     const TITLE = 'Production Location Search';
     const history = useHistory();
+    const location = useLocation();
     const { osID } = useParams();
 
+    useResetScrollPosition(location);
+
     useEffect(() => {
         if (osID) {
             fetchProductionLocation(osID);

src/react/src/util/hooks.js

@@ -374,3 +374,9 @@ export const useFileUploadHandler = ({
 
     return { fileInput };
 };
+
+export const useResetScrollPosition = location => {
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, [location]);
+};