fix: Fix navigation issue in Catalog when using browser back button (#…

…3145) * fix bug Signed-off-by: at670475 <[email protected]> * fix highlighted label Signed-off-by: at670475 <[email protected]> * add test Signed-off-by: at670475 <[email protected]> * add test Signed-off-by: at670475 <[email protected]> * fix eslint Signed-off-by: at670475 <[email protected]> * fix code smells Signed-off-by: at670475 <[email protected]> --------- Signed-off-by: at670475 <[email protected]>
zowe · Oct 18, 2023 · b2492fd · b2492fd
1 parent 15e2e39
commit b2492fd
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 22 deletions.
diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx
@@ -40,16 +40,11 @@ export default class DetailPage extends Component {
                 goBackButton.style.removeProperty('display');
             }
         }
-        const { fetchTilesStart, currentTileId, fetchNewTiles, history } = this.props;
+        const { fetchTilesStart, currentTileId, fetchNewTiles } = this.props;
         fetchNewTiles();
         if (currentTileId) {
             fetchTilesStart(currentTileId);
         }
-        if (!localStorage.getItem('serviceId')) {
-            const id = history.location.pathname.split('/service/')[1];
-            localStorage.setItem('serviceId', id);
-        }
-        localStorage.removeItem('selectedTab');
     }
 
     componentWillUnmount() {

diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServiceNavigationBar.test.jsx
@@ -101,7 +101,6 @@ describe('>>> ServiceNavigationBar component tests', () => {
         const instance = serviceNavigationBar.instance();
         instance.handleTabClick('apicatalog');
         expect(storeCurrentTileId).toHaveBeenCalled();
-        localStorage.removeItem('serviceId');
     });
 
     it('should display mobile view if api portal enabled', () => {
@@ -115,4 +114,31 @@ describe('>>> ServiceNavigationBar component tests', () => {
         expect(serviceNavigationBar.find('.mobile-menu-close-btn icon-btn')).toBeDefined();
         expect(serviceNavigationBar.find('.mobile-menu-close')).toBeDefined();
     });
+
+    it('should handle browser go back event', () => {
+        const mockHref = 'https://localhost/service/apicatalog';
+        Object.defineProperty(window, 'location', {
+            value: {
+                href: mockHref,
+            },
+            writable: true,
+        });
+        const storeCurrentTileId = jest.fn();
+        const clear = jest.fn();
+
+        const serviceNavigationBar = shallow(
+            <ServicesNavigationBar
+                match={match}
+                clear={clear}
+                services={[tile]}
+                storeCurrentTileId={storeCurrentTileId}
+                currentTileId="apicatalog"
+            />
+        );
+
+        const instance = serviceNavigationBar.instance();
+        instance.handlePopstate();
+
+        expect(storeCurrentTileId).toHaveBeenCalledWith(expect.any(String));
+    });
 });
diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx
@@ -11,13 +11,19 @@
 import { Component } from 'react';
 import { Tab, Tabs, Tooltip, Typography, withStyles, Button } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import Shield from '../ErrorBoundary/Shield/Shield';
 import SearchCriteria from '../Search/SearchCriteria';
 import { closeMobileMenu, isAPIPortal } from '../../utils/utilFunctions';
 import MenuCloseImage from '../../assets/images/xmark.svg';
 
 export default class ServicesNavigationBar extends Component {
+    componentDidMount() {
+        window.addEventListener('popstate', this.handlePopstate);
+    }
+
     componentWillUnmount() {
+        window.removeEventListener('popstate', this.handlePopstate);
         const { clear } = this.props;
         clear();
     }
@@ -27,11 +33,6 @@ export default class ServicesNavigationBar extends Component {
         filterText(value);
     };
 
-    handleTabChange = (event, selectedTab) => {
-        localStorage.removeItem('serviceId');
-        localStorage.setItem('selectedTab', selectedTab);
-    };
-
     handleTabClick = (id) => {
         const { storeCurrentTileId, services } = this.props;
         const correctTile = services.find((tile) => tile.services.some((service) => service.serviceId === id));
@@ -41,6 +42,21 @@ export default class ServicesNavigationBar extends Component {
         }
     };
 
+    handlePopstate = () => {
+        const { services, storeCurrentTileId } = this.props;
+        const url = window.location.href;
+        if (url?.includes('/service')) {
+            const parts = url.split('/');
+            const serviceId = parts[parts.length - 1];
+            const correctTile = services.find((tile) =>
+                tile.services.some((service) => service.serviceId === serviceId)
+            );
+            if (correctTile) {
+                storeCurrentTileId(correctTile.id);
+            }
+        }
+    };
+
     styles = () => ({
         truncatedTabLabel: {
             maxWidth: '100%',
@@ -55,18 +71,15 @@ export default class ServicesNavigationBar extends Component {
         const { match, services, searchCriteria } = this.props;
         const hasTiles = services && services.length > 0;
         const hasSearchCriteria = searchCriteria !== undefined && searchCriteria !== null && searchCriteria.length > 0;
-        let selectedTab = Number(localStorage.getItem('selectedTab'));
+        const url = window.location.href;
+        const parts = url.split('/');
+        const serviceId = parts[parts.length - 1];
+        let selectedTab = Number(0);
         let allServices;
-        let allServiceIds;
         if (hasTiles) {
             allServices = services.flatMap((tile) => tile.services);
-            allServiceIds = allServices.map((service) => service.serviceId);
-            if (localStorage.getItem('serviceId')) {
-                const id = localStorage.getItem('serviceId');
-                if (allServiceIds.includes(id)) {
-                    selectedTab = allServiceIds.indexOf(id);
-                }
-            }
+            const index = allServices.findIndex((item) => item.serviceId === serviceId);
+            selectedTab = Number(index);
         }
         const TruncatedTabLabel = withStyles(this.styles)(({ classes, label }) => (
             <Tooltip title={label} placement="bottom">
@@ -106,7 +119,7 @@ export default class ServicesNavigationBar extends Component {
                 )}
                 {hasTiles && (
                     <Tabs
-                        value={selectedTab || 0}
+                        value={selectedTab}
                         onChange={this.handleTabChange}
                         variant="scrollable"
                         orientation="vertical"
@@ -131,3 +144,10 @@ export default class ServicesNavigationBar extends Component {
         );
     }
 }
+
+ServicesNavigationBar.propTypes = {
+    storeCurrentTileId: PropTypes.func.isRequired,
+    services: PropTypes.shape({
+        find: PropTypes.func.isRequired,
+    }).isRequired,
+};