Merge pull request #4435 from blesildaramirez/i9890

pkp/pkp-lib#9890 [OJS] - Implement new sidebar navigation

classes/template/TemplateManager.php

@@ -138,6 +138,7 @@ public function setupBackendPage()
                 'name' => __('editor.navigation.issues'),
                 'url' => $router->url($request, null, 'manageIssues'),
                 'isCurrent' => $request->getRequestedPage() === 'manageIssues',
+                'icon' => 'Issues'
             ];
             $index = false;
             if(Config::getVar('features', 'enable_new_submission_listing')) {
@@ -174,6 +175,7 @@ public function setupBackendPage()
                 'name' => __('common.payments'),
                 'url' => $router->url($request, null, 'payments'),
                 'isCurrent' => $request->getRequestedPage() === 'payments',
+                'icon' => 'Payment'
             ];
 
             $index = array_search('settings', array_keys($menu));
@@ -190,6 +192,7 @@ public function setupBackendPage()
                 'name' => __('institution.institutions'),
                 'url' => $router->url($request, null, 'management', 'settings', ['institutions']),
                 'isCurrent' => $request->getRequestedPage() === 'management' && in_array('institutions', $request->getRequestedArgs()),
+                'icon' => 'Institutes'
             ];
             $paymentsIndex = array_search('payments', array_keys($menu));
             $menu = array_slice($menu, 0, $paymentsIndex, true) +

cypress/tests/data/10-ApplicationSetup/20-CreateContext.cy.js

@@ -60,7 +60,7 @@ describe('Data suite tests', function() {
 		cy.login('admin', 'admin');
 		cy.get('a').contains('admin').click();
 		cy.get('a').contains('Dashboard').click();
-		cy.get('.app__nav a').contains('Administration').click();
+		cy.get('nav').contains('Administration').click();
 		cy.get('a').contains('Hosted Journals').click();
 		cy.get('a[class=show_extras]').click();
 		cy.contains('Settings wizard').click();
@@ -98,7 +98,9 @@ describe('Data suite tests', function() {
 		cy.login('admin', 'admin');
 		cy.get('a').contains('admin').click();
 		cy.get('a').contains('Dashboard').click();
-		cy.get('.app__nav a').contains('Journal').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Journal').click({ force: true }); 
 
 		cy.get('input[name="abbreviation-en"]').type('J Pub Know', {delay: 0});
 		cy.get('input[name="acronym-en"]').type(Cypress.env('contextAcronyms')['en'], {delay: 0});
@@ -123,7 +125,9 @@ describe('Data suite tests', function() {
 		cy.login('admin', 'admin');
 		cy.get('a').contains('admin').click();
 		cy.get('a').contains('Dashboard').click();
-		cy.get('.app__nav a').contains('Journal').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Journal').click({ force: true }); 
 		cy.get('button[id="contact-button"]').click();
 
 		// Submit the form with required fields missing.

cypress/tests/data/10-ApplicationSetup/40-CreateUsers.cy.js

@@ -12,7 +12,9 @@ describe('Data suite tests', function() {
 		cy.login('admin', 'admin');
 		cy.get('a:contains("admin"):visible').click();
 		cy.get('a:contains("Dashboard")').click();
-		cy.get('a:contains("Users & Roles")').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Users & Roles').click({ force: true });
 
 		var users = [
 			{

cypress/tests/data/10-ApplicationSetup/50-CreateCategories.cy.js

@@ -12,7 +12,9 @@ describe('Data suite tests', function() {
 		cy.login('admin', 'admin');
 		cy.get('a').contains('admin').click();
 		cy.get('a').contains('Dashboard').click();
-		cy.get('.app__nav a').contains('Journal').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Journal').click({ force: true });
 		cy.get('button[id="categories-button"]').click();
 
 		// Create an Applied Science category

cypress/tests/data/10-ApplicationSetup/50-CreateIssues.cy.js

@@ -12,7 +12,7 @@ describe('Data suite tests', function() {
 		cy.login('admin', 'admin');
 		cy.get('a').contains('admin').click();
 		cy.get('a').contains('Dashboard').click();
-		cy.get('.app__nav a').contains('Issues').first().click();
+		cy.get('nav').contains('Issues').click();
 		cy.get('a[id^=component-grid-issues-futureissuegrid-addIssue-button-]').click();
 		cy.wait(1000); // Avoid occasional failure due to form init taking time
 		cy.get('input[name="volume"]').type('1', {delay: 0});

cypress/tests/data/10-ApplicationSetup/50-CreateSections.cy.js

@@ -12,7 +12,9 @@ describe('Data suite tests', function() {
 		cy.login('admin', 'admin');
 		cy.get('a').contains('admin').click();
 		cy.get('a').contains('Dashboard').click();
-		cy.get('.app__nav a').contains('Journal').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Journal').click({ force: true });
 		cy.get('button[id="sections-button"]').click();
 
 		// Edit Articles section to add section editors

cypress/tests/integration/Doi.cy.js

@@ -22,7 +22,7 @@ describe('DOI tests', function() {
 	};
 
 	const goToDoiPage = (itemType = 'submission') => {
-		cy.get('a:contains("DOIs")').click();
+		cy.get('nav').contains('DOIs').click();
 		cy.get(`button#${itemType}-doi-management-button`).click();
 	};
 

cypress/tests/integration/DoiCrossref.cy.js

@@ -13,7 +13,9 @@ describe('Crossref tests', function () {
 	it('Check Crossref Configuration', function () {
 		cy.login('dbarnes', null, 'publicknowledge');
 
-		cy.get('a:contains("Website")').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Website').click({ force: true });
 
 		cy.waitJQuery();
 		cy.get('button#plugins-button').click();
@@ -23,7 +25,8 @@ describe('Crossref tests', function () {
 		cy.get('input[id^=select-cell-crossrefplugin]').should('be.checked');
 
 		// Crossref is enabled as DOI registration agency.
-		cy.get('a:contains("Distribution")').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Distribution').click({ force: true });
 		cy.get('button#dois-button').click();
 		cy.get(
 			'#doiSetup input[name="enabledDoiTypes"][value="representation"]'
@@ -81,7 +84,9 @@ describe('Crossref tests', function () {
 			});
 
 		cy.log('Deselect Crossref as registered agency for downstream tests');
-		cy.get('a:contains("Distribution")').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Distribution').click({ force: true });
 		cy.get('button#dois-button').click();
 		cy.get('button#doisRegistration-button').click();
 		cy.get('select#doiRegistrationSettings-registrationAgency-control').select(

cypress/tests/integration/Statistics.cy.js

@@ -16,7 +16,9 @@ describe('Statistics Tests', function() {
 
 	it('Check statistics', function() {
 		cy.login('dbarnes', null, 'publicknowledge');
-		cy.get('.app__nav a:contains("Articles")').click();
+		cy.get('nav').contains('Statistics').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Articles').click({ force: true });
 		cy.checkGraph(
 			'Total abstract views by date',
 			'Abstract Views',

cypress/tests/integration/SubmissionWizard.cy.js

@@ -84,7 +84,9 @@ describe('Submission Wizard', function() {
 
         // Make all sections editor-restricted
         cy.login('dbarnes', null, 'publicknowledge');
-        cy.get('.app__navGroup:contains("Settings") a:contains("Journal")').click();
+        cy.get('nav').contains('Settings').click();
+        // Ensure submenu item click despite animation
+        cy.get('nav').contains('Journal').click({ force: true });
         cy.get('.pkpTabs__buttons button:contains("Sections")').click();
         cy.get('#sectionsGridContainer a.show_extras')
             .each(($showExtras) => {
@@ -109,7 +111,9 @@ describe('Submission Wizard', function() {
         // Make Articles inactive and leave Reviews editor-restricted
         cy.logout();
         cy.login('dbarnes', null, 'publicknowledge');
-        cy.get('.app__navGroup:contains("Settings") a:contains("Journal")').click();
+        cy.get('nav').contains('Settings').click();
+        // Ensure submenu item click despite animation
+        cy.get('nav').contains('Journal').click({ force: true });
         cy.get('.pkpTabs__buttons button:contains("Sections")').click();
         cy.get('#sectionsGridContainer tr:contains("Articles") input').check();
         cy.get('[role="dialog"] button:contains("OK")').click();
@@ -124,7 +128,9 @@ describe('Submission Wizard', function() {
         // Make Reviews not editor-restricted
         cy.logout();
         cy.login('dbarnes', null, 'publicknowledge');
-        cy.get('.app__navGroup:contains("Settings") a:contains("Journal")').click();
+        cy.get('nav').contains('Settings').click();
+        // Ensure submenu item click despite animation
+        cy.get('nav').contains('Journal').click({ force: true });
         cy.get('.pkpTabs__buttons button:contains("Sections")').click();
         cy.get('#sectionsGridContainer tr:contains("Reviews")')
             .then(($tr) => {
@@ -150,7 +156,9 @@ describe('Submission Wizard', function() {
         // Reactivate Articles section to restore test data conditions
         cy.logout();
         cy.login('dbarnes', null, 'publicknowledge');
-        cy.get('.app__navGroup:contains("Settings") a:contains("Journal")').click();
+        cy.get('nav').contains('Settings').click();
+        // Ensure submenu item click despite animation
+        cy.get('nav').contains('Journal').click({ force: true });
         cy.get('.pkpTabs__buttons button:contains("Sections")').click();
         cy.get('#sectionsGridContainer tr:contains("Articles")')
             .then(($tr) => {
@@ -372,15 +380,15 @@ describe('Submission Wizard', function() {
             });
 
         // Add missing data
-        cy.get('.pkpSteps button:contains("Details")').click();
+        cy.get('.pkpSteps button:contains("Details")').click({ force: true });
         cy.setTinyMceContent('titleAbstract-title-control-en', submission.title);
         cy.setTinyMceContent('titleAbstract-abstract-control-en', submission.abstract);
         cy.get('#titleAbstract-keywords-control-en').type(submission.keywords, {delay: 0});
         cy.get('li:contains("' + submission.keywords + '")');
         cy.get('#titleAbstract-keywords-control-en').type('{downarrow}{enter}', {delay: 0});
         cy.get('#citations-citationsRaw-control').type(submission.citations);
 
-        cy.get('.pkpSteps button:contains("Upload Files")').click();
+        cy.get('.pkpSteps button:contains("Upload Files")').click({ force: true });
         cy.uploadSubmissionFiles([
             {
                 'file': 'dummy.pdf',
@@ -390,7 +398,7 @@ describe('Submission Wizard', function() {
             }
         ]);
 
-        cy.get('.pkpSteps button:contains("For the Editors")').click();
+        cy.get('.pkpSteps button:contains("For the Editors")').click({ force: true });
         Object.keys(submission.metadata.autosuggest).forEach(field => {
             cy.get('#forTheEditors-' + field + '-control-en').type(submission.metadata.autosuggest[field], {delay: 0});
             cy.get('li:contains("' + submission.metadata.autosuggest[field] + '")');
@@ -404,7 +412,7 @@ describe('Submission Wizard', function() {
         });
 
         // All errors should be gone and submit should be allowed.
-        cy.get('.pkpSteps button:contains("Review")').click();
+        cy.get('.pkpSteps button:contains("Review")').click({ force: true });
         cy.get('*:contains("There are one or more problems")').should('not.exist');
         cy.get('button:contains("Submit")').should('be.enabled');
         cy.get('*:contains("You must upload at least one Article Text file.")').should('not.exist');
@@ -577,23 +585,23 @@ describe('Submission Wizard', function() {
             .contains('Social Sciences > Sociology');
 
         // Add missing data
-        cy.get('.pkpSteps button:contains("Details")').click();
+        cy.get('.pkpSteps button:contains("Details")').click({ force: true });
         cy.setTinyMceContent('titleAbstract-title-control-fr_CA', submission.title.fr_CA);
-        cy.get('.pkpSteps button:contains("Contributors")').click();
+        cy.get('.pkpSteps button:contains("Contributors")').click({ force: true });
         cy.get('.listPanel__itemTitle:contains("Carlo Corino")')
             .parents('.listPanel__item')
             .find('button:contains("Edit")')
             .click();
         cy.get('input[name="givenName-fr_CA"]').type('Carlo', {delay: 0});
         cy.get('input[name="familyName-fr_CA"]').type('Carlo', {delay: 0});
         cy.get('[role=dialog]').find('button:contains("Save")').click();
-        cy.get('.pkpSteps button:contains("For the Editors")').click();
+        cy.get('.pkpSteps button:contains("For the Editors")').click({ force: true });
         cy.get('#forTheEditors-subjects-control-fr_CA').type('Sociologie française', {delay: 0});
         cy.get('li:contains("Sociologie française")');
         cy.get('#forTheEditors-subjects-control-fr_CA').type('{downarrow}{enter}', {delay: 0});
 
         // Should be able to submit!
-        cy.get('.pkpSteps button:contains("Review")').click();
+        cy.get('.pkpSteps button:contains("Review")').click({ force: true });
         cy.get('button:contains("Submit")').click();
         cy.contains('The submission, ' + submission.title.en + ', will be submitted to Journal of Public Knowledge for editorial review.');
         // delay is needed so previous changes gets pushed, before the submit should be triggered

cypress/tests/integration/Subscriptions.cy.js

@@ -19,7 +19,9 @@ describe('Subscription tests', function() {
 
 	it('Configures subscriptions', function() {
 		cy.login('dbarnes', null, 'publicknowledge');
-		cy.get('a:contains("Distribution")').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Distribution').click({ force: true });
 
 		// Payment settings
 		cy.get('button#payments-button').click();
@@ -38,7 +40,7 @@ describe('Subscription tests', function() {
 		cy.get('#access [role="status"]').contains('Saved');
 
 		// Configure an issue for subscription.
-		cy.get('.app__nav a:contains("Issues")').first().click();
+		cy.get('nav').contains('Issues').click();
 		cy.get('button:contains("Back Issues")').click();
 		cy.get('a:contains("Vol. 1 No. 2 (2014)")').click();
 		cy.get('[role="dialog"] a:contains("Access")').click();
@@ -47,7 +49,7 @@ describe('Subscription tests', function() {
 		cy.get('div:contains("Your changes have been saved.")');
 
 		// Set up subscription policies
-		cy.get('.app__nav a:contains("Payments")').click();
+		cy.get('nav').contains('Payments').click();
 		cy.get('a[name=subscriptionPolicies]').click();
 		cy.get('input[id^="subscriptionName-"]').type('Sebastiano Mortensen', {delay: 0});
 		cy.get('input[id^="subscriptionEmail-"]').type('smortensen@mailinator.com', {delay: 0});
@@ -79,7 +81,9 @@ describe('Subscription tests', function() {
 		cy.login('dbarnes', null, 'publicknowledge');
 
 		// Create a reader user for the subscription
-		cy.get('.app__nav a:contains("Users & Roles")').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Users & Roles').click({ force: true });
 		cy.createUser({
 			'username': 'reader',
 			'givenName': 'Rea',
@@ -105,7 +109,7 @@ describe('Subscription tests', function() {
 		cy.login('dbarnes', null, 'publicknowledge');
 
 		// Set up an individual subscription type
-		cy.get('.app__nav a:contains("Payments")').click();
+		cy.get('nav').contains('Payments').click();
 		cy.get('a[name="subscriptionTypes"]').click();
 		cy.get('a:contains("Create New Subscription Type")').click();
 		cy.wait(1000); // Form initialization problem

cypress/tests/integration/Y_NativeXmlImportExportIssue.cy.js

@@ -15,7 +15,7 @@ describe('Data suite tests', function() {
 
 		cy.get('li.profile a:contains("' + username + '")').click();
 		cy.get('li.profile a:contains("Dashboard")').click();
-		cy.get('.app__nav a').contains('Tools').click();
+		cy.get('nav').contains('Tools').click();
 		cy.get('a:contains("Native XML Plugin")').click();
 		cy.get('a:contains("Export Issues")').click();
 		cy.waitJQuery({timeout:20000});
@@ -43,7 +43,7 @@ describe('Data suite tests', function() {
 
 		cy.get('li.profile a:contains("' + username + '")').click();
 		cy.get('li.profile a:contains("Dashboard")').click();
-		cy.get('.app__nav a').contains('Tools').click();
+		cy.get('nav').contains('Tools').click();
 		// The a:contains(...) syntax ensures that it will wait for the
 		// tab to load. Do not convert to cy.get('a').contains('Native XML Plugin')
 		cy.get('a:contains("Native XML Plugin")').click();

cypress/tests/integration/Z_ArticleViewDCMetadata.cy.js

@@ -359,7 +359,9 @@ describe('Article View Metadata - DC Plugin', function() {
 		cy.get('a').contains('Dashboard').click();
 
 		// Enable metadata settings
-		cy.get('.app__nav a').contains('Workflow').click();
+		cy.get('nav').contains('Settings').click();
+		// Ensure submenu item click despite animation
+		cy.get('nav').contains('Workflow').click({ force: true });
 		cy.get('button').contains('Metadata').click();
 		cy.get('span').contains('Enable coverage metadata').prev('input[type="checkbox"]').check();
 		cy.get('span').contains('Enable type metadata').prev('input[type="checkbox"]').check();
@@ -372,7 +374,7 @@ describe('Article View Metadata - DC Plugin', function() {
 		cy.checkDoiConfig(['publication', 'issue', 'representation']);
 
 		// After configuration, go to submissions
-		cy.get('.app__nav a').contains('Submissions').click();
+		cy.get('nav').contains('Submissions').click();
 
 		// Create a new submission
 		cy.getCsrfToken();

templates/stats/issues.tpl

@@ -87,23 +87,25 @@
 							</div>
 						</div>
 					</div>
-					<table class="-screenReader" role="region" aria-live="polite">
-						<caption v-if="timelineType === 'files'">{translate key="stats.downloads.timelineInterval"}</caption>
-						<caption v-else>{translate key="stats.views.timelineInterval"}</caption>
-						<thead>
-							<tr>
-								<th scope="col">{translate key="common.date"}</th>
-								<th v-if="timelineType === 'files'" scope="col">{translate key="stats.downloads"}</th>
-								<th v-else scope="col">{translate key="stats.views"}</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr	v-for="segment in timeline" :key="segment.date">
-								<th scope="row">{{ segment.label }}</th>
-								<td>{{ segment.value }}</td>
-							</tr>
-						</tbody>
-					</table>
+					<div class="sr-only">
+						<table class="-screenReader" role="region" aria-live="polite">
+							<caption v-if="timelineType === 'files'">{translate key="stats.downloads.timelineInterval"}</caption>
+							<caption v-else>{translate key="stats.views.timelineInterval"}</caption>
+							<thead>
+								<tr>
+									<th scope="col">{translate key="common.date"}</th>
+									<th v-if="timelineType === 'files'" scope="col">{translate key="stats.downloads"}</th>
+									<th v-else scope="col">{translate key="stats.views"}</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr	v-for="segment in timeline" :key="segment.date">
+									<th scope="row">{{ segment.label }}</th>
+									<td>{{ segment.value }}</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
 					<line-chart :chart-data="chartData" aria-hidden="true"></line-chart>
 					<span v-if="isLoadingTimeline" class="pkpStats__loadingCover">
 						<spinner></spinner>