feat: add View Logs to system header menu (ENG-55440)

__tests__/components/HeaderSystemMenu.test.js

@@ -23,51 +23,134 @@ SOFTWARE.
 import { shallow } from 'enzyme';
 import HeaderSystemMenu from '../../src/header/HeaderSystemMenu';
 import setLanguage from '../../src/functions/setLanguage';
+import { useMenuHandler } from '@bluecateng/pelagos';
 
 jest.unmock('../../src/header/HeaderSystemMenu');
 
 jest.mock('../../src/hooks/usePlatformData', () =>
     jest
         .fn()
         .mockReturnValueOnce({
-            data: { user: { permissions: { download_logs: false } } },
+            data: {
+                user: {
+                    permissions: { download_logs: false, view_logs: false },
+                },
+            },
         })
         .mockReturnValueOnce({
-            data: { user: { permissions: { download_logs: true } } },
+            data: {
+                user: { permissions: { download_logs: true, view_logs: true } },
+            },
         })
         .mockReturnValueOnce({
-            data: { user: { permissions: { download_logs: true } } },
+            data: {
+                user: { permissions: { download_logs: true, view_logs: true } },
+            },
+        })
+        .mockReturnValueOnce({
+            data: {
+                user: { permissions: { download_logs: true, view_logs: true } },
+            },
+        })
+        .mockReturnValueOnce({
+            data: {
+                user: { permissions: { download_logs: true, view_logs: true } },
+            },
         }),
 );
 
+jest.mock('@bluecateng/pelagos');
+
 describe('HeaderSystemMenu', () => {
     describe('Rendering', () => {
         it('Render HeaderSystemMenu component with default props', () => {
-            const wrapper = shallow(
-                <HeaderSystemMenu canDownloadLogs={false} />,
-            );
+            useMenuHandler.mockReturnValueOnce({
+                expanded: true,
+                buttonProps: null,
+                menuProps: null,
+                guardProps: null,
+            });
+            const wrapper = shallow(<HeaderSystemMenu />);
             expect(wrapper.getElement()).toMatchSnapshot();
         });
 
         it('Render HeaderSystemMenu component with props', () => {
+            useMenuHandler.mockReturnValueOnce({
+                expanded: false,
+                buttonProps: { onClick: () => {}, onKeyDown: () => {} },
+                menuProps: null,
+                guardProps: null,
+            });
             const wrapper = shallow(
-                <HeaderSystemMenu
-                    className='customSystemMenu'
-                    canDownloadLogs={true}
-                />,
+                <HeaderSystemMenu className='customSystemMenu' />,
             );
             expect(wrapper.getElement()).toMatchSnapshot();
         });
         it('Render HeaderSystemMenu component with pseudo translated text', () => {
+            useMenuHandler.mockReturnValueOnce({
+                expanded: false,
+                buttonProps: { onClick: () => {}, onKeyDown: () => {} },
+                menuProps: null,
+                guardProps: null,
+            });
             setLanguage('zz').finally(() => {
                 const wrapper = shallow(
-                    <HeaderSystemMenu
-                        className='customSystemMenu'
-                        canDownloadLogs={true}
-                    />,
+                    <HeaderSystemMenu className='customSystemMenu' />,
                 );
                 expect(wrapper.getElement()).toMatchSnapshot();
             });
         });
+        it('Test the view logs click functionality', () => {
+            // Mock the current window location
+            const mockWindow = jest.fn();
+            global.window.location = { replace: mockWindow };
+
+            // Mock the system menu button's menu handler
+            useMenuHandler.mockReturnValueOnce({
+                expanded: true,
+                buttonProps: null,
+                menuProps: null,
+                guardProps: null,
+            });
+            // Render the HeaderSystemMenu element
+            const wrapper = shallow(
+                <HeaderSystemMenu className='customSystemMenu' />,
+            );
+
+            // Click the view logs menu option
+            wrapper.find('#systemMenu-vw_logs').simulate('click');
+
+            // Check redirect to view_logs URL
+            expect(mockWindow).toHaveBeenCalledWith('/admin/view_logs');
+        });
+        it('Test the download logs click functionality', () => {
+            // Mock the opening of a new window
+            const mockWindowOpen = jest
+                .fn()
+                .mockReturnValue({ focus: jest.fn() });
+            global.window.open = mockWindowOpen;
+
+            // Mock the system menu button's menu handler
+            useMenuHandler.mockReturnValueOnce({
+                expanded: true,
+                buttonProps: null,
+                menuProps: null,
+                guardProps: null,
+            });
+            // Render the HeaderSystemMenu element
+            const wrapper = shallow(
+                <HeaderSystemMenu className='customSystemMenu' />,
+            );
+            // Click the download logs button
+            wrapper.find('#systemMenu-dl_logs').simulate('click');
+
+            // Check a new window was opened and redirected to download logs URL
+            expect(mockWindowOpen).toHaveBeenCalledWith(
+                '/admin/logs/download',
+                '_blank',
+            );
+            // Check download logs window was put into focus
+            expect(mockWindowOpen().focus).toHaveBeenCalled();
+        });
     });
 });

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bluecat/limani",
-    "version": "1.1.6-dev",
+    "version": "1.1.7-dev",
     "description": "Gateway shared components",
     "usage": "dev",
     "scripts": {

src/header/HeaderSystemMenu.js

@@ -36,8 +36,10 @@ import './HeaderSystemMenu.less';
 /**
  * HeaderSystemMenu component is a button when clicked this button reveals the
  * links to System menu options. <br>
- * With user access permission, Download logs is an available option to retrieve
- * all logs as a single file. <br>
+ * With user access permission, two options for retrieving logs are available.
+ * "Download logs" retrieves all logs as a single file, and "View logs" shows
+ * the last 1000 lines of relevant Gateway logs, providing searching and
+ * filtering options. <br/>
  * This component is intended to be nested inside the PlatformDataContext as
  * it will require access to PlatformData. <br>
  * The component should always be wrapped inside parent element that
@@ -48,16 +50,18 @@ import './HeaderSystemMenu.less';
 const HeaderSystemMenu = ({ className }) => {
     const { data } = usePlatformData();
     const canDownloadLogs = data?.user?.permissions.download_logs;
+    const canViewLogs = data?.user?.permissions.view_logs;
     const downloadLogs = () =>
         window.open('/admin/logs/download', '_blank').focus();
+    const viewLogs = () => window.location.replace('/admin/view_logs');
 
     const { expanded, buttonProps, menuProps, guardProps } = useMenuHandler();
 
     resizeButtonMenu(expanded, 'systemMenuButton', 'systemMenu');
 
     return (
         <>
-            {canDownloadLogs && (
+            {(canDownloadLogs || canViewLogs) && (
                 <div className={className}>
                     <button
                         id='systemMenuButton'
@@ -81,11 +85,20 @@ const HeaderSystemMenu = ({ className }) => {
                             aria-label={`System Menu`}>
                             <div tabIndex={0} {...guardProps} />
                             <Menu {...menuProps}>
-                                <MenuItem
-                                    id='systemMenu-dl_logs'
-                                    onClick={
-                                        downloadLogs
-                                    }>{t`Download logs`}</MenuItem>
+                                {canDownloadLogs && (
+                                    <MenuItem
+                                        id='systemMenu-dl_logs'
+                                        onClick={
+                                            downloadLogs
+                                        }>{t`Download logs`}</MenuItem>
+                                )}
+                                {canViewLogs && (
+                                    <MenuItem
+                                        id='systemMenu-vw_logs'
+                                        onClick={
+                                            viewLogs
+                                        }>{t`View logs`}</MenuItem>
+                                )}
                             </Menu>
                             <div tabIndex={0} {...guardProps} />
                         </Layer>

src/l10n/en.po

@@ -84,6 +84,10 @@ msgstr ""
 msgid "System"
 msgstr ""
 
+#: 4c39
+msgid "View logs"
+msgstr ""
+
 #: 825c
 msgid "Workflows"
 msgstr ""

src/l10n/zz.po

@@ -84,6 +84,10 @@ msgstr "Sââvéé"
 msgid "System"
 msgstr "Systéém"
 
+#: 4c39
+msgid "View logs"
+msgstr "Vîîééw lôôgs"
+
 #: 825c
 msgid "Workflows"
 msgstr "Wôôrkflôôws"

stories/Header.stories.js

@@ -81,6 +81,7 @@ const platformMockValue = {
             ],
             permissions: {
                 download_logs: true,
+                view_logs: true,
             },
             user_type: 'user_type',
             username: 'username',

stories/HeaderSystemMenu.stories.js

@@ -27,8 +27,10 @@ const mockValue = {
     data: {
         user: {
             permissions: {
-                // eslint-disable-next-line camelcase
+                /* eslint-disable camelcase */
                 download_logs: true,
+                view_logs: true,
+                /* eslint-enable camelcase */
             },
         },
     },

stories/SimplePage.stories.js

@@ -78,6 +78,7 @@ const platformMockValue = {
         ],
         permissions: {
             download_logs: true,
+            view_logs: true,
         },
         user_type: 'user_type',
         username: 'username',