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>