[O2B-1045] nav bar adjustment

lib/public/Model.js

@@ -252,30 +252,31 @@ export default class Model extends Observable {
     }
 
     /**
-     * Toggle navbar overview dropdown
-     * @returns {undefined}
+     * Toggle navbar dropdown
+     * @param {string} key referencing dropdown to be toggled
+     * @returns {void}
      */
-    toggleOverviewDropdown() {
-        this.dropdownMenu = this.dropdownMenu === 'overview' ? false : 'overview';
+    toggleDropdownMenu(key) {
+        this.dropdownMenu = this.dropdownMenu === key ? null : key;
         this.notify();
     }
 
     /**
-     * Toggle navbar account dropdown
-     * @returns {undefined}
+     * Clears all navbar dropdowns
+     * @returns {void}
      */
-    toggleAccountDropdown() {
-        this.dropdownMenu = this.dropdownMenu === 'account' ? false : 'account';
+    clearDropdownMenu() {
+        this.dropdownMenu = null;
         this.notify();
     }
 
     /**
-     * Clears all navbar dropdowns
-     * @returns {undefined}
+     * To decided whether dropdown (referenced by the key) should be displayed as opened
+     * @param {string} key referencing dropdown
+     * @returns {boolean} if true dropdown should be opened
      */
-    clearDropdownMenu() {
-        this.dropdownMenu = false;
-        this.notify();
+    isDropdownMenuOpened(key) {
+        return this.dropdownMenu === key;
     }
 
     /**

lib/public/components/NavBar/index.js

@@ -22,31 +22,54 @@ let isChecked = true;
 
 /**
  * Generic tab button for website navigation purposes
- * @param {Object} model Pass the model to access the defined functions
- * @param {string} id The internal page to navigate to
- * @param {string} text The text to display on the tab
- * @return {vnode} The generated tab button
+ * @param {string} page The internal page to navigate to
+ * @param {string} content The text to display on the tab
+ * @param {Function<Event, void>} onclick the html element onclick function
+ * @param {boolean} isSelected if true component is styled as selected
+ * @return {Component} The generated tab button
  */
-const pageTab = (model, id, text) => frontLink(text, id, null, {
-    id,
-    class: ['btn', 'btn-tab', model.router.params.page === id ? 'selected' : ''].join(' '),
-    onclick: () => model.clearDropdownMenu(),
-});
+const basePageTab = (page, content, onclick, isSelected = false) => frontLink(
+    content,
+    page,
+    null,
+    {
+        id: page,
+        class: ['btn', 'btn-tab', isSelected ? 'selected' : ''].join(' '),
+        onclick,
+    },
+);
 
 /**
- * Generic a tag for external and internal navigation purposes
- * @param {Object} model Pass the model to access the defined functions
- * @param {string} href The link to navigate to
- * @param {string} text The text to display on the link
- * @return {vnode} The generated link tag
+ * Generic menu link button for website navigation purposes
+ * @param {string} content The link to navigate to
+ * @param {string} page The internal page to navigate to
+ * @param {Function<Event, void>} onclick the html element onclick function
+ * @param {boolean} isSelected if true component is styled as selected
+ * @return {Component} The generated link tag
+ */
+const basePageMenuLink = (content, page, onclick, isSelected = false) => frontLink(
+    content,
+    page,
+    null,
+    {
+        class: ['menu-item', isSelected ? 'selected' : ''].join(' '),
+        onclick,
+    },
+);
+
+/**
+ * Generic menu link button for external navigation purposes
+ * @param {string} content The link to navigate to
+ * @param {string} href The text to display on the link
+ * @param {Function<Event, void>} onclick the html element onclick function
+ * @return {Component} The generated link tag
  */
-const pageLink = (model, href, text) => absoluteFrontLink(
-    text,
+const baseAbsoluteMenuLink = (content, href, onclick) => absoluteFrontLink(
+    content,
     href,
     {
         class: 'menu-item',
-        id: text.toLowerCase().replace(/ /g, '-'),
-        onclick: () => model.clearDropdownMenu(),
+        onclick,
     },
 );
 
@@ -66,34 +89,67 @@ const aliFlpLinkTab = (aliFlpIndexPageUrl) => absoluteFrontLink(
 
 const btnGroupsDelimiter = h('.mh1', { style: { 'border-left': '1px solid var(--color-gray-dark)' } });
 
+/**
+ * Build navigation bar dropdown menu
+ * @param {string|icon} dropdownButtonContent content of button which openes dropdown menu
+ * @param {boolean} isOpened if true dropdown will be opened
+ * @param {Function<Event, void>} onclick the html element onclick function
+ * @param {Component[]} entries entries of the menu
+ * @param {object} [options.menuAttributes] attributes of dropdown menu
+ * @param {boolean} [options.isSelected] informe whether dropdown should be styled as selected
+ * @param {string} [options.id] id of the dropdown button
+ * @return {Component} dropdown menu
+ */
+const dropdownSubMenu = (dropdownButtonContent, isOpened, onclick, entries, { menuAttributes, isSelected, id } = {}) =>
+    h(`.navbar-dropdown ${isOpened ? '.dropdown-open' : ''}`, [
+        h('button', {
+            id,
+            class: `btn btn-tab ${isSelected ? 'selected' : ''}`,
+            onclick,
+        }, dropdownButtonContent),
+        h('.dropdown-menu', menuAttributes, entries),
+    ]);
+
 /**
  * Top header of the page
  * @param {Object} model Pass the model to access the defined functions
  * @return {vnode} Returns the navbar
  */
-const navBar = (model) => {
-    const { page } = model.router.params;
+function navBar(model) {
+    const { page: currentPage } = model.router.params;
+    // eslint-disable-next-line require-jsdoc
+    const pageTab = (page, content) => basePageTab(page, content, () => model.clearDropdownMenu(), currentPage === page);
+    // eslint-disable-next-line require-jsdoc
+    const pageMenuLink = (content, page) => basePageMenuLink(content, page, () => model.clearDropdownMenu(), currentPage === page);
+    // eslint-disable-next-line require-jsdoc
+    const absoluteMenuLink = (content, page) => baseAbsoluteMenuLink(content, page, () => model.clearDropdownMenu());
+
     return h('.flex-row.justify-between.items-center.p2.shadow-level2.level2.bg-gray-light', [
         h('.f4.gray-darker', 'Bookkeeping'),
         h('.btn-group', [
             aliFlpLinkTab(ALI_FLP_INDEX_URL),
             btnGroupsDelimiter,
-            pageTab(model, 'home', 'Home'),
-            pageTab(model, 'log-overview', 'Log Entries'),
-            pageTab(model, 'env-overview', 'Environments'),
-            pageTab(model, 'lhc-fill-overview', 'LHC Fills'),
-            pageTab(model, 'run-overview', 'Runs'),
-            h(`.navbar-dropdown${model.dropdownMenu === 'overview' ? '.dropdown-open' : ''}`, [
-                h('button#overviews', {
-                    class: `btn btn-tab ${page === 'tag-overview' || page === 'subsystem-overview' ? 'selected' : ''}`,
-                    onclick: () => model.toggleOverviewDropdown(),
-                }, 'Overview'),
-                h('.dropdown-menu', { style: 'width: max-content;' }, [
-                    pageLink(model, '?page=tag-overview', 'Tag Overview'),
-                    pageLink(model, '?page=subsystem-overview', 'Subsystem Overview'),
-                ]),
-            ]),
-            pageTab(model, 'about-overview', 'About'),
+            pageTab('home', 'Home'),
+            pageTab('log-overview', 'Log Entries'),
+            pageTab('env-overview', 'Environments'),
+            dropdownSubMenu('LHC', model.isDropdownMenuOpened('LHC'), () => model.toggleDropdownMenu('LHC'), [
+                pageMenuLink('LHC Fills', 'lhc-fill-overview'),
+                pageMenuLink('LHC Periods', 'lhc-period-overview'),
+            ], {
+                menuAttributes: { style: 'width: max-content;' },
+                isSelected: ['lhc-fill-overview', 'lhc-period-overview'].includes(currentPage),
+            }),
+
+            pageTab('run-overview', 'Runs'),
+            dropdownSubMenu('Overview', model.isDropdownMenuOpened('overview'), () => model.toggleDropdownMenu('overview'), [
+                pageMenuLink('Tag Overview', 'tag-overview'),
+                pageMenuLink('Subsystem Overview', 'subsystem-overview'),
+            ], {
+                menuAttributes: { style: 'width: max-content;' },
+                isSelected: ['tag-overview', 'subsystem-overview'].includes(currentPage),
+            }),
+
+            pageTab('about-overview', 'About'),
         ]),
 
         h('.flex-row.g2', [
@@ -105,55 +161,48 @@ const navBar = (model) => {
                 class: 'btn',
                 title: 'Create a new end of shift report',
             }),
-            h('.navbar-dropdown', {
-                id: '',
-                title: 'User Actions',
-                class: model.dropdownMenu === 'account' ? 'dropdown-open' : '',
-            }, [
-                h('button.btn', { onclick: () => model.toggleAccountDropdown() }, iconPerson()),
-                h('.dropdown-menu', [
-                    h('p.mh3.text-ellipsis', `Welcome ${model.session.name}`),
-                    h('hr'),
-                    pageLink(model, 'https://alice.its.cern.ch/jira/projects/O2B/summary', 'Jira'),
-                    pageLink(model, 'https://github.com/AliceO2Group/Bookkeeping', 'GitHub'),
-                    pageLink(model, 'https://alice-talk.web.cern.ch/c/o2/o2-bookkeeping/', 'Support Forum'),
-                    h('hr'),
-                    h('p.mh3.text-ellipsis', 'Preferences'),
-                    h('.gray-darker.flex-row.g3.ph3.pv1', [
-                        h('input', {
-                            id: 'preferences-raw-timestamps',
-                            onclick: () => {
-                                userPreferencesStore.rawTimestamps = !userPreferencesStore.rawTimestamps;
-                            },
-                            type: 'checkbox',
-                            checked: userPreferencesStore.rawTimestamps,
-                        }),
-                        h('label', {
-                            for: 'preferences-raw-timestamps',
-                        }, 'Display raw timestamps'),
-                    ]),
-                    h('hr'),
-                    model.session.personid === 0 // Anonymous user has id 0
-                        ? [
-                            h('p', `user/admin slider \n privilages: ${isChecked ? 'admin' : 'user'}`),
-                            h('label.switch', [
-                                h('input', {
-                                    onclick: () => {
-                                        isChecked = !isChecked;
-                                        model.session.access = isChecked ? ['admin'] : [];
-                                    },
-                                    type: 'checkbox',
-                                    checked: isChecked,
-                                }),
-                                h('span.slider.round'),
-                            ]),
-                            h('p.mh3.gray-darker', 'This instance of the application does not require authentication.'),
-                        ]
-                        : pageLink(model, 'https://auth.cern.ch/auth/realms/cern/protocol/openid-connect/logout', 'Logout'),
+            dropdownSubMenu(iconPerson(), model.isDropdownMenuOpened('account'), () => model.toggleDropdownMenu('account'), [
+                h('p.mh3.text-ellipsis', `Welcome ${model.session.name}`),
+                h('hr'),
+                absoluteMenuLink('Jira', 'https://alice.its.cern.ch/jira/projects/O2B/summary'),
+                absoluteMenuLink('GitHub', 'https://github.com/AliceO2Group/Bookkeeping'),
+                absoluteMenuLink('Support Forum', 'https://alice-talk.web.cern.ch/c/o2/o2-bookkeeping/'),
+                h('hr'),
+                h('p.mh3.text-ellipsis', 'Preferences'),
+                h('.gray-darker.flex-row.g3.ph3.pv1', [
+                    h('input', {
+                        id: 'preferences-raw-timestamps',
+                        onclick: () => {
+                            userPreferencesStore.rawTimestamps = !userPreferencesStore.rawTimestamps;
+                        },
+                        type: 'checkbox',
+                        checked: userPreferencesStore.rawTimestamps,
+                    }),
+                    h('label', {
+                        for: 'preferences-raw-timestamps',
+                    }, 'Display raw timestamps'),
                 ]),
-            ]),
+                h('hr'),
+                model.session.personid === 0 // Anonymous user has id 0
+                    ? [
+                        h('p', `user/admin slider \n privilages: ${isChecked ? 'admin' : 'user'}`),
+                        h('label.switch', [
+                            h('input', {
+                                onclick: () => {
+                                    isChecked = !isChecked;
+                                    model.session.access = isChecked ? ['admin'] : [];
+                                },
+                                type: 'checkbox',
+                                checked: isChecked,
+                            }),
+                            h('span.slider.round'),
+                        ]),
+                        h('p.mh3.gray-darker', 'This instance of the application does not require authentication.'),
+                    ]
+                    : absoluteMenuLink('Logout', 'https://auth.cern.ch/auth/realms/cern/protocol/openid-connect/logout'),
+            ], { id: 'account-dropdown' }),
         ]),
     ]);
-};
+}
 
 export default navBar;

test/public/tags/create.test.js

@@ -64,7 +64,7 @@ module.exports = () => {
     it('Should show no fields when having no admin roles', async () => {
         await goToPage(page, 'tag-create');
         await page.waitForTimeout(100);
-        await page.click('div[title="User Actions"]');
+        await page.click('#account-dropdown');
         await page.waitForTimeout(100);
         await page.click('span.slider.round');
         await page.waitForTimeout(100);