From 6f48c8e0f6c6ea7f6ff493a82933403dd35baade Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cintia=20S=C3=A1nchez=20Garc=C3=ADa?= <cynthiasg@icloud.com>
Date: Fri, 17 Nov 2023 08:52:34 +0100
Subject: [PATCH] Fix regression maintaining scroll position (#3491)

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
---
 web/src/layout/package/Details.tsx    |  4 ++--
 web/src/layout/package/index.test.tsx | 29 ---------------------------
 web/src/layout/package/index.tsx      |  4 ++--
 web/src/layout/search/index.tsx       | 10 +++------
 4 files changed, 7 insertions(+), 40 deletions(-)

diff --git a/web/src/layout/package/Details.tsx b/web/src/layout/package/Details.tsx
index 299bafcd4..aee6e10d4 100644
--- a/web/src/layout/package/Details.tsx
+++ b/web/src/layout/package/Details.tsx
@@ -374,7 +374,7 @@ const Details = (props: Props) => {
                   <div>
                     <SmallTitle text="Kind" />
                     {kinds.map((kind: string, index: number) => (
-                      <p
+                      <div
                         data-testid="keptnKind"
                         className={classnames('text-truncate', styles.text, { 'mb-1': index + 1 !== kinds.length })}
                         key={`keptn-kind-${kind}`}
@@ -383,7 +383,7 @@ const Details = (props: Props) => {
                           <span className="pe-1">&#183;</span>
                           <small>{kind}</small>
                         </div>
-                      </p>
+                      </div>
                     ))}
                   </div>
                 )}
diff --git a/web/src/layout/package/index.test.tsx b/web/src/layout/package/index.test.tsx
index 972fce4f3..bca2e7521 100644
--- a/web/src/layout/package/index.test.tsx
+++ b/web/src/layout/package/index.test.tsx
@@ -179,35 +179,6 @@ describe('Package index', () => {
     });
   });
 
-  // describe('Go back button', () => {
-  //   it('proper behaviour', async () => {
-  //     const searchUrlReferer = {
-  //       tsQueryWeb: 'test',
-  //       filters: {},
-  //       pageNumber: 1,
-  //       deprecated: false,
-  //     };
-  //     const mockPackage = getMockPackage('4');
-  //     mocked(API).getPackage.mockResolvedValue(mockPackage);
-
-  //     render(
-  //       <Router>
-  //         <PackageView searchUrlReferer={searchUrlReferer} />
-  //       </Router>
-  //     );
-
-  //     const goBack = await screen.findByRole('button', { name: /Back to results/ });
-  //     expect(goBack).toBeInTheDocument();
-  //     await userEvent.click(goBack);
-  //     expect(mockHistoryPush).toHaveBeenCalledTimes(1);
-  //     expect(mockHistoryPush).toHaveBeenCalledWith({
-  //       pathname: '/packages/search',
-  //       search: prepareQueryString(searchUrlReferer),
-  //       state: { 'from-detail': true },
-  //     });
-  //   });
-  // });
-
   describe('Repository button', () => {
     it('renders repository link', async () => {
       const mockPackage = getMockPackage('5');
diff --git a/web/src/layout/package/index.tsx b/web/src/layout/package/index.tsx
index 632b2953e..4821ff464 100644
--- a/web/src/layout/package/index.tsx
+++ b/web/src/layout/package/index.tsx
@@ -759,7 +759,7 @@ const PackageView = () => {
                   }),
                 },
                 {
-                  state: { 'from-detail': true },
+                  state: { fromDetail: true },
                 }
               );
             }}
@@ -790,7 +790,7 @@ const PackageView = () => {
                   pathname: '/packages/starred',
                 },
                 {
-                  state: { 'from-detail': true },
+                  state: { fromDetail: true },
                 }
               );
             }}
diff --git a/web/src/layout/search/index.tsx b/web/src/layout/search/index.tsx
index ed188111d..551b20fd6 100644
--- a/web/src/layout/search/index.tsx
+++ b/web/src/layout/search/index.tsx
@@ -6,7 +6,7 @@ import isUndefined from 'lodash/isUndefined';
 import { Fragment, useContext, useEffect, useState } from 'react';
 import { FaFilter } from 'react-icons/fa';
 import { IoMdCloseCircleOutline } from 'react-icons/io';
-import { useLocation, useNavigate, useOutletContext } from 'react-router-dom';
+import { NavigationType, useLocation, useNavigate, useNavigationType, useOutletContext } from 'react-router-dom';
 
 import API from '../../api';
 import { AppCtx, updateLimit } from '../../context/AppCtx';
@@ -52,6 +52,7 @@ const SearchView = () => {
   const { ctx, dispatch } = useContext(AppCtx);
   const navigate = useNavigate();
   const location = useLocation();
+  const navType: NavigationType = useNavigationType();
   const { tsQueryWeb, filters, pageNumber, deprecated, operators, verifiedPublisher, cncf, official, sort } =
     buildSearchParams(location.search);
   const sampleQueries = getSampleQueries();
@@ -309,12 +310,7 @@ const SearchView = () => {
         setApiError('An error occurred searching packages, please try again later.');
       } finally {
         setIsSearching(false);
-        if (
-          // TODO - location.action === 'POP' ||
-          fromDetail &&
-          !isUndefined(viewedPackage) &&
-          !isUndefined(scrollPosition)
-        ) {
+        if (navType === 'POP' || (fromDetail && !isUndefined(viewedPackage) && !isUndefined(scrollPosition))) {
           setTimeout(() => {
             scrollToTop(scrollPosition);
           }, 200);