feat(ui): gateway ui update (ENG-57682)

__tests__/components/SideMenu.test.js

@@ -0,0 +1,79 @@
+/*
+Copyright 2023-2025 BlueCat Networks Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import { shallow } from 'enzyme';
+import SideMenu from '../../src/sideNav/SideMenu';
+
+jest.unmock('../../src/sideNav/SideMenu');
+
+jest.mock('../../src/hooks/usePlatformData', () =>
+    jest.fn(() => {
+        return {
+            data: {
+                user: {
+                    home_url: '/landing_page',
+                    nav_links: {
+                        custom_workflows: [
+                            {
+                                'title': 'Custom workflow',
+                                'href': '/custom_workflow/page',
+                                'children': [],
+                            },
+                        ],
+                        default_workflows: [
+                            {
+                                'title': 'Workflow management',
+                                'href': '/admin/workflow_export_import',
+                                'children': [],
+                            },
+                        ],
+                    },
+                },
+            },
+        };
+    }),
+);
+
+Object.defineProperty(window, 'location', {
+    value: {
+        pathname: '',
+    },
+});
+
+describe('SideMenu', () => {
+    describe('Rendering', () => {
+        it('Render SideMenu component with default', () => {
+            sessionStorage.getItem.mockReturnValueOnce(null);
+            sessionStorage.getItem.mockReturnValueOnce(null);
+            const wrapper = shallow(<SideMenu />);
+            expect(wrapper.getElement()).toMatchSnapshot();
+        });
+
+        it('Render SideMenu component active highlight', () => {
+            window.location.pathname = '/admin/workflow_export_import';
+            sessionStorage.getItem.mockReturnValueOnce(null);
+            sessionStorage.getItem.mockReturnValueOnce(null);
+            const wrapper = shallow(<SideMenu />);
+            expect(wrapper.getElement()).toMatchSnapshot();
+        });
+    });
+});

__tests__/components/SideNavMenuItem.test.js

@@ -0,0 +1,117 @@
+/*
+Copyright 2025 BlueCat Networks Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import { shallow } from 'enzyme';
+import SideNavMenuItem from '../../src/sideNav/SideNavMenuItem';
+import { SideNavLink, SideNavMenu } from '@bluecateng/pelagos';
+
+jest.mock('@bluecateng/pelagos', () => ({
+    useTooltip: () => [false, jest.fn()],
+    SideNavItems: jest.fn(({ children, className }) => (
+        <div className={className}>{children}</div>
+    )),
+    SideNavLink: jest.fn(({ href, current, className, children }) => (
+        <a href={href} className={className} data-current={current}>
+            {children}
+        </a>
+    )),
+    SideNavMenu: jest.fn(({ title, expanded, className, children }) => (
+        <div className={className} data-expanded={expanded}>
+            <span>{title}</span>
+            {children}
+        </div>
+    )),
+}));
+
+describe('SideNavMenuItem Component', () => {
+    beforeEach(() => {
+        // Simple in-memory storage for the test
+        const mockSessionStorage = {
+            getItem: (key) =>
+                mockSessionStorage[key] ? mockSessionStorage[key] : null,
+            setItem: (key, value) => (mockSessionStorage[key] = value),
+            removeItem: (key) => delete mockSessionStorage[key],
+            clear: () =>
+                Object.keys(mockSessionStorage).forEach(
+                    (key) => delete mockSessionStorage[key],
+                ),
+        };
+        Object.defineProperty(window, 'sessionStorage', {
+            value: mockSessionStorage,
+            writable: true,
+        });
+    });
+
+    afterEach(() => {
+        delete window.sessionStorage;
+    });
+
+    const items = [
+        {
+            title: 'Item 1',
+            children: [
+                {
+                    title: 'SubItem 1',
+                    href: '/item1/subitem1',
+                },
+            ],
+        },
+        {
+            title: 'Item 2',
+            href: '/item2',
+            children: [],
+        },
+    ];
+
+    it('should render SideNavMenuItem with given className', () => {
+        const wrapper = shallow(
+            <SideNavMenuItem className='test-class' items={items} />,
+        );
+        expect(wrapper.exists()).toBeTruthy();
+        expect(wrapper.find('.SideNavMenuItem__nav').exists()).toBeTruthy();
+        expect(wrapper.find('.test-class').exists()).toBeTruthy();
+    });
+
+    it('should render SideNavMenu for items with children', () => {
+        const wrapper = shallow(<SideNavMenuItem items={items} />);
+        expect(wrapper.find(SideNavMenu).exists()).toBeTruthy();
+        expect(wrapper.find(SideNavMenu).prop('title')).toEqual(
+            <div>Item 1</div>,
+        );
+    });
+
+    it('should render SideNavLink for items without children', () => {
+        const wrapper = shallow(<SideNavMenuItem items={items} />);
+        expect(wrapper.find(SideNavLink).exists()).toBeTruthy();
+        const sideNavLinks = wrapper.find(SideNavLink);
+        expect(sideNavLinks.at(0).prop('href')).toEqual('/item1/subitem1');
+        expect(sideNavLinks.at(1).prop('href')).toEqual('/item2');
+    });
+
+    it('should pass children to SideNavMenu', () => {
+        const wrapper = shallow(<SideNavMenuItem items={items} />);
+        const sideNavMenu = wrapper.find(SideNavMenu).at(0);
+        const children = sideNavMenu.prop('children');
+        expect(children).toBeDefined();
+        expect(children).toHaveLength(1);
+    });
+});

__tests__/components/__snapshots__/Header.test.js.snap

@@ -12,7 +12,6 @@ exports[`Header Rendering Render Header component with default props 1`] = `
       <div
         className="Header__leftSideMenu"
       >
-        <SideNavMenuSwitcher />
         <div
           className="Header__leftSideMenu__info"
         >
@@ -28,7 +27,6 @@ exports[`Header Rendering Render Header component with default props 1`] = `
         <HeaderAccountMenu />
       </div>
     </Layer>
-    <SideNavMenu />
   </header>
 </React.Fragment>
 `;
@@ -45,7 +43,6 @@ exports[`Header Rendering Render Header component with props 1`] = `
       <div
         className="Header__leftSideMenu"
       >
-        <SideNavMenuSwitcher />
         <div
           className="Header__leftSideMenu__info"
         >
@@ -61,7 +58,6 @@ exports[`Header Rendering Render Header component with props 1`] = `
         <HeaderAccountMenu />
       </div>
     </Layer>
-    <SideNavMenu />
   </header>
 </React.Fragment>
 `;