City-of-Turku · SanttuA · May 8, 2024 · May 6, 2024
diff --git a/app/i18n/messages/en.json b/app/i18n/messages/en.json
@@ -229,6 +229,7 @@
   "Navbar.language-english": "English",
   "Navbar.language-finnish": "Finnish",
   "Navbar.language-swedish": "Swedish",
+  "Navbar.links": "Links",
   "Navbar.login": "Log in",
   "Navbar.logout": "Log out",
   "Navbar.manageReservations": "Manage Reservations",
@@ -551,4 +552,4 @@
   "UserReservationsPage.regularEmptyMessage": "No standard reservations",
   "UserReservationsPage.regularReservationsHeader": "Standard reservations",
   "UserReservationsPage.title": "My reservations"
-}
+}
diff --git a/app/i18n/messages/fi.json b/app/i18n/messages/fi.json
@@ -229,6 +229,7 @@
   "Navbar.language-english": "Englanti",
   "Navbar.language-finnish": "Suomi",
   "Navbar.language-swedish": "Ruotsi",
+  "Navbar.links": "Linkit",
   "Navbar.login": "Kirjaudu sisään",
   "Navbar.logout": "Kirjaudu ulos",
   "Navbar.manageReservations": " Varausten hallinta",

diff --git a/app/i18n/messages/sv.json b/app/i18n/messages/sv.json
@@ -231,6 +231,7 @@
   "Navbar.language-english": "Engelska",
   "Navbar.language-finnish": "Finska",
   "Navbar.language-swedish": "Svenska",
+  "Navbar.links": "Länkar",
   "Navbar.login": "Logga in",
   "Navbar.logout": "Logga ut",
   "Navbar.manageReservations": "Administrera Bokningar",

diff --git a/app/shared/main-navbar/AdminDropdownLinks.js b/app/shared/main-navbar/AdminDropdownLinks.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import NavDropdown from 'react-bootstrap/lib/NavDropdown';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import PropTypes from 'prop-types';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+
+import { injectT } from 'i18n';
+import constants from 'constants/AppConstants';
+import FAIcon from 'shared/fontawesome-icon';
+
+function AdminDropdownLinks({ currentLanguage, gitbookURL, t }) {
+  return (
+    <NavDropdown
+      className="nav-link-dropdown"
+      eventKey="link-dropdown"
+      id="nav-admin-dropdown"
+      title={t('Navbar.links')}
+    >
+      <MenuItem
+        className="nav-dropdown-link"
+        eventKey="adminMaintenance"
+        href={constants.NAV_ADMIN_URLS.respa}
+        rel="noreferrer"
+        target="_blank"
+      >
+        {t('Navbar.adminMaintenance')}
+
+        <FAIcon icon={faExternalLinkAlt} />
+      </MenuItem>
+
+      <MenuItem
+        className="nav-dropdown-link"
+        eventKey="adminGuide"
+        href={gitbookURL}
+        rel="noreferrer"
+        target="_blank"
+      >
+        {t('Navbar.adminGuide')}
+        <FAIcon icon={faExternalLinkAlt} />
+      </MenuItem>
+
+      <MenuItem
+        className="nav-dropdown-link"
+        eventKey="feedback"
+        href={`https://opaskartta.turku.fi/eFeedback/${currentLanguage}/Feedback/30/1039`}
+        rel="noreferrer"
+        target="_blank"
+      >
+        {t('Navbar.feedback')}
+        <FAIcon icon={faExternalLinkAlt} />
+      </MenuItem>
+    </NavDropdown>
+  );
+}
+
+AdminDropdownLinks.propTypes = {
+  currentLanguage: PropTypes.string.isRequired,
+  gitbookURL: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired,
+};
+
+export default injectT(AdminDropdownLinks);
diff --git a/app/shared/main-navbar/AdminDropdownLinks.spec.js b/app/shared/main-navbar/AdminDropdownLinks.spec.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { MenuItem, NavDropdown } from 'react-bootstrap';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+
+import constants from 'constants/AppConstants';
+import AdminDropdownLinks from './AdminDropdownLinks';
+import { shallowWithIntl } from 'utils/testUtils';
+import FAIcon from 'shared/fontawesome-icon';
+
+
+describe('shared/main-navbar/AdminDropdownLinks', () => {
+  const defaultProps = {
+    currentLanguage: 'fi',
+    gitbookURL: 'https://gitbook.com/abc'
+  };
+
+  function getWrapper(props) {
+    return shallowWithIntl(<AdminDropdownLinks {...defaultProps} {...props} />);
+  }
+
+  describe('renders', () => {
+    test('NavDropdown', () => {
+      const navDropdown = getWrapper().find(NavDropdown);
+      expect(navDropdown).toHaveLength(1);
+      expect(navDropdown.prop('className')).toBe('nav-link-dropdown');
+      expect(navDropdown.prop('eventKey')).toBe('link-dropdown');
+      expect(navDropdown.prop('id')).toBe('nav-admin-dropdown');
+      expect(navDropdown.prop('title')).toBe('Navbar.links');
+    });
+
+    test('all MenuItems', () => {
+      const menuItems = getWrapper().find(MenuItem);
+      expect(menuItems).toHaveLength(3);
+
+      menuItems.forEach(menuItem => {
+        expect(menuItem.prop('className')).toBe('nav-dropdown-link');
+        expect(menuItem.prop('rel')).toBe('noreferrer');
+        expect(menuItem.prop('target')).toBe('_blank');
+      });
+    });
+
+    test('first menu item has correct unique props', () => {
+      const menuItem = getWrapper().find(MenuItem).first();
+      expect(menuItem.prop('href')).toBe(constants.NAV_ADMIN_URLS.respa);
+      expect(menuItem.prop('eventKey')).toBe('adminMaintenance');
+      expect(menuItem.prop('children')).toContain('Navbar.adminMaintenance');
+    });
+
+    test('second menu item has correct unique props', () => {
+      const menuItem = getWrapper().find(MenuItem).at(1);
+      expect(menuItem.prop('href')).toBe(defaultProps.gitbookURL);
+      expect(menuItem.prop('eventKey')).toBe('adminGuide');
+      expect(menuItem.prop('children')).toContain('Navbar.adminGuide');
+    });
+
+    test('third menu item has correct unique props', () => {
+      const menuItem = getWrapper().find(MenuItem).at(2);
+      expect(menuItem.prop('href')).toBe(
+        `https://opaskartta.turku.fi/eFeedback/${defaultProps.currentLanguage}/Feedback/30/1039`
+      );
+      expect(menuItem.prop('eventKey')).toBe('feedback');
+      expect(menuItem.prop('children')).toContain('Navbar.feedback');
+    });
+
+    test('all FAIcons', () => {
+      const icons = getWrapper().find(FAIcon);
+      expect(icons).toHaveLength(3);
+      icons.forEach(icon => expect(icon.prop('icon')).toBe(faExternalLinkAlt));
+    });
+  });
+});
diff --git a/app/shared/main-navbar/MainNavbar.js b/app/shared/main-navbar/MainNavbar.js
@@ -1,6 +1,6 @@
 
 import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
 import classNames from 'classnames';
@@ -13,6 +13,7 @@ import constants from 'constants/AppConstants';
 import FAIcon from 'shared/fontawesome-icon';
 import { injectT } from 'i18n';
 import { getSearchPageUrl } from 'utils/searchUtils';
+import AdminDropdownLinks from './AdminDropdownLinks';
 
 class MainNavbar extends React.Component {
   constructor(props) {
@@ -88,27 +89,20 @@ class MainNavbar extends React.Component {
                 </NavItem>
               </LinkContainer>
             )}
-            {isAdmin
-              && (
-                <Fragment>
-                  <LinkContainer to="/manage-reservations">
-                    <NavItem eventKey="manage-reservations" onClick={() => this.collapseItem()}>
-                      {t('Navbar.manageReservations')}
-                    </NavItem>
-                  </LinkContainer>
-                  <NavItem eventKey="adminMaintenance" href={constants.NAV_ADMIN_URLS.respa} target="_blank">
-                    {t('Navbar.adminMaintenance')}
-                    <FAIcon icon={faExternalLinkAlt} />
-                  </NavItem>
 
-                  <NavItem eventKey="adminGuide" href={gitbookURL} target="_blank">
-                    {t('Navbar.adminGuide')}
-                    <FAIcon icon={faExternalLinkAlt} />
-                  </NavItem>
-                </Fragment>
-              )
-            }
-            {(isAdmin || authUserAmr === 'turku_adfs') && (
+            {(isLoggedIn && isAdmin) && (
+              <LinkContainer to="/manage-reservations">
+                <NavItem eventKey="manage-reservations" onClick={() => this.collapseItem()}>
+                  {t('Navbar.manageReservations')}
+                </NavItem>
+              </LinkContainer>
+            )}
+
+            {isAdmin && (
+              <AdminDropdownLinks currentLanguage={currentLanguage} gitbookURL={gitbookURL} />
+            )}
+
+            {(!isAdmin && authUserAmr === 'turku_adfs') && (
               <NavItem
                 eventKey="feedback"
                 href={`https://opaskartta.turku.fi/eFeedback/${currentLanguage}/Feedback/30/1039`}

diff --git a/app/shared/main-navbar/MainNavbar.spec.js b/app/shared/main-navbar/MainNavbar.spec.js
@@ -9,7 +9,7 @@ import constants from 'constants/AppConstants';
 import { getSearchPageUrl } from 'utils/searchUtils';
 import { shallowWithIntl } from 'utils/testUtils';
 import MainNavbar from './MainNavbar';
-import FAIcon from 'shared/fontawesome-icon';
+import AdminDropdownLinks from './AdminDropdownLinks';
 
 describe('shared/main-navbar/MainNavbar', () => {
   const pathname = 'somepath';
@@ -113,49 +113,11 @@ describe('shared/main-navbar/MainNavbar', () => {
       expect(myReservationsLink).toHaveLength(1);
     });
 
-    test('renders a link to respa admin UI', () => {
-      const respaAdminLink = getLoggedInAdminWrapper().find(NavItem).filter({ eventKey: 'adminGuide' });
-      expect(respaAdminLink).toHaveLength(1);
-    });
-
-    test('renders a link to respa admin UI, open new tab when clicked', () => {
-      const respaAdminLink = getLoggedInAdminWrapper()
-        .find(NavItem).filter({ eventKey: 'adminGuide' });
-      expect(respaAdminLink.prop('target')).toEqual('_blank');
-    });
-
-    test('renders a link to default(finnish) varaamo gitbook when language is not swedish', () => {
-      const gitbookLink = getLoggedInAdminWrapper()
-        .find(NavItem).filter({ href: constants.NAV_ADMIN_URLS.gitbook });
-      expect(gitbookLink).toHaveLength(1);
-    });
-
-    test('renders a link to swedish varaamo gitbook when language is swedish', () => {
-      const gitbookLink = getLoggedInAdminWrapper({ currentLanguage: 'sv' })
-        .find(NavItem).filter({ href: constants.NAV_ADMIN_URLS.gitbook_sv });
-      expect(gitbookLink).toHaveLength(1);
-    });
-
-    test('renders a link to varaamo gitbook, open new tab when clicked', () => {
-      const gitbookLink = getLoggedInAdminWrapper()
-        .find(NavItem).filter({ href: constants.NAV_ADMIN_URLS.gitbook });
-      expect(gitbookLink.prop('target')).toEqual('_blank');
-    });
-
-    test('renders a external link icon to next to respa admin UI text', () => {
-      const maintenanceLink = getLoggedInAdminWrapper()
-        .find(NavItem).filter({ eventKey: 'adminGuide' });
-      const icon = maintenanceLink.find(FAIcon);
-
-      expect(icon).toHaveLength(1);
-    });
-
-    test('renders an icon next to varaamo gitbook text', () => {
-      const gitbookLink = getLoggedInAdminWrapper()
-        .find(NavItem).filter({ href: constants.NAV_ADMIN_URLS.gitbook });
-
-      const icon = gitbookLink.find(FAIcon);
-      expect(icon).toHaveLength(1);
+    test('renders AdminDropdownLinks', () => {
+      const adminDropdownLinks = getLoggedInAdminWrapper().find(AdminDropdownLinks);
+      expect(adminDropdownLinks).toHaveLength(1);
+      expect(adminDropdownLinks.prop('currentLanguage')).toBe('fi');
+      expect(adminDropdownLinks.prop('gitbookURL')).toBe(constants.NAV_ADMIN_URLS.gitbook);
     });
   });
 
@@ -201,9 +163,9 @@ describe('shared/main-navbar/MainNavbar', () => {
 
   describe('Feedback link', () => {
     describe('when user is admin', () => {
-      test('is visible', () => {
+      test('is not visible', () => {
         const nav = getWrapper({ isAdmin: true }).find(NavItem).filter({ eventKey: 'feedback' });
-        expect(nav).toHaveLength(1);
+        expect(nav).toHaveLength(0);
       });
     });
 
@@ -215,7 +177,7 @@ describe('shared/main-navbar/MainNavbar', () => {
     });
 
     describe('when visible', () => {
-      const wrapper = getWrapper({ authUserAmr: 'turku_adfs', isAdmin: true });
+      const wrapper = getWrapper({ authUserAmr: 'turku_adfs', isAdmin: false });
 
       test('NavItem is rendered correctly', () => {
         const link = wrapper.find(NavItem).filter({ eventKey: 'feedback' });