feat(ui): add new themed table component

.gitignore

@@ -55,3 +55,4 @@ packages/server/scripts/local
 !**/.yarn/versions
 
 .claude
+stats.html

cypress/e2e/a-journal/002-assign_reviewers_spec.cy.js

@@ -41,6 +41,8 @@ describe('Editor assigning reviewers', () => {
 
     // Go to dashboard and verify number of invited reviewer
     Menu.clickDashboard()
-    cy.getByDataTestId('donut-center-label').contains('6')
+    cy.getByDataTestId('statusCounts')
+      .find('[role="img"]')
+      .should('have.length', 6)
   })
 })

cypress/e2e/a-journal/003-review_spec.cy.js

@@ -50,20 +50,20 @@ describe('Completing reviews', () => {
 
       cy.wait(1000)
       DashboardPage.clickDashboardTab(2)
-      cy.get('[fill="#56b984"]')
-        .should('be.visible')
-        .trigger('mouseover', { force: true })
-      cy.contains('Completed: 3')
-      cy.wait(1000)
-      cy.get('[fill="#fff2cd"]').should('be.visible').trigger('mouseover')
-      cy.contains('Invited: 1')
-      cy.get('[fill="#d7efd4"]').should('be.visible').trigger('mouseover')
-      cy.contains('Accepted: 1')
-
-      cy.get('[fill="#c23d20"]').should('be.visible').trigger('mouseover')
-      cy.contains('Declined: 1')
-
-      cy.get('[data-testid="control-panel-team"]').click()
+      cy.getByDataTestId('statusCounts')
+        .find('[role="img"][aria-label$="Completed"]')
+        .should('have.length', 3)
+      cy.getByDataTestId('statusCounts')
+        .find('[role="img"][aria-label$="Invited"]')
+        .should('have.length', 1)
+      cy.getByDataTestId('statusCounts')
+        .find('[role="img"][aria-label$="Accepted"]')
+        .should('have.length', 1)
+      cy.getByDataTestId('statusCounts')
+        .find('[role="img"][aria-label$="Declined"]')
+        .should('have.length', 1)
+
+      cy.get('[data-testid="control-link"]').click()
       cy.awaitDisappearSpinner()
       cy.get(
         '[data-testid=kanban] > :nth-child(1) > [data-testid=kanban-cards-wrapper] > [data-testid=kanban-card]',
@@ -92,7 +92,9 @@ const doReview = (name, reviewData) => {
   // Accpet Review Request Workflow
   if (reviewData.verdict === 'accept') {
     DashboardPage.clickAcceptReviewButton()
-    cy.contains('button', 'Do Review').should('exist')
+    cy.contains('Accept this review invitation?').should('be.visible')
+    cy.contains('button', 'OK').click()
+    DashboardPage.getDoReviewButton().should('contain', 'Do Review')
 
     // Only do the review if there'a  comment present
     if (reviewData.comment) {
@@ -116,6 +118,7 @@ const doReview = (name, reviewData) => {
 
       // Verify the review got completed
       cy.get('nav').contains('Dashboard').click()
+      cy.url().should('contain', '/dashboard/reviews')
       DashboardPage.getDoReviewButton().should('contain', 'View')
       cy.getByDataTestId('menu-user').click()
       cy.contains('Logout').click()
@@ -125,6 +128,8 @@ const doReview = (name, reviewData) => {
   // Reject Review Request Workflow
   if (reviewData.verdict === 'reject') {
     DashboardPage.clickRejectReviewButton()
+    cy.contains('Decline this review invitation?').should('be.visible')
+    cy.contains('button', 'OK').click()
     DashboardPage.getDoReviewButton().should('not.exist')
     cy.getByDataTestId('menu-user').click()
     cy.contains('Logout').click()

cypress/e2e/a-journal/004-assigning_editor_spec.cy.js

@@ -21,7 +21,7 @@ describe('Assigning editors and decision reject', () => {
         cy.wait(1000)
         Menu.clickManuscripts()
 
-        ManuscriptsPage.selectOptionWithText('Control')
+        ManuscriptsPage.clickControlLink()
 
         cy.wait(1000)
         ControlPage.clickAssignSeniorEditorDropdown()

cypress/e2e/a-journal/005-decision_spec.cy.js

@@ -25,7 +25,7 @@ describe('Completing a decision', () => {
 
       cy.wait(2000)
       DashboardPage.clickManuscriptNavButton()
-      ManuscriptsPage.selectOptionWithText('Control')
+      ManuscriptsPage.clickControlLink()
       ControlPage.getAssignSeniorEditorDropdown().click({ force: true })
       cy.contains(name.role.seniorEditor).click({ force: true })
     })
@@ -61,7 +61,7 @@ describe('Completing a decision', () => {
 
       /* View Decision as an Author */
       cy.login(name.role.author, dashboard) // Login as an Author
-      DashboardPage.getSubmittedManuscript().click() // Click on first MySubmission
+      DashboardPage.clickSubmissionActionLink() // Click on first MySubmission
 
       // Verify Decision Content
       DashboardPage.getDecisionField(0).should('contain', decisionTextContent)
@@ -77,9 +77,7 @@ describe('Completing a decision', () => {
       )
       SubmissionFormPage.clickSubmitResearch()
       SubmissionFormPage.clickSubmitYourManuscript()
-      DashboardPage.getSubmittedManuscript()
-        .contains('test pdf')
-        .should('exist') // Verify new submission got created
+      DashboardPage.getSubmissionTitle().contains('test pdf').should('exist') // Verify new submission got created
     })
   })
 

cypress/e2e/b-colab-prc/102-manuscript_page_label_and_tooltip_spec.cy.js

@@ -27,22 +27,16 @@ describe('Checking manuscripts page: label selection and tooltip', () => {
 
   it('verifies the selected label after choosing from the dropdown', () => {
     cy.contains('div', 'Manuscripts').should('exist')
-    // Click the Select button
-    ManuscriptsPage.getSelectButton().should('be.visible')
-    ManuscriptsPage.clickArticleLabel(-1)
+    ManuscriptsPage.getArticleLabel().should('be.visible')
 
     // Function to select a label and verify it
     const selectLabelAndVerify = label => {
-      cy.getByDataTestId('label-dropdown-element').click()
-      cy.screenshot('before-dropdown')
-      cy.get('body').then($body => {
-        if (!$body.find('[data-testid=label-dropdown-menu]').length) {
-          cy.log('Dropdown not found in body!')
-        }
-      })
-
-      cy.get('[data-testid=label-dropdown-menu]').contains(label).click()
-      ManuscriptsPage.getLabelDropdown().should('contain', label)
+      ManuscriptsPage.clickArticleLabel(-1)
+      cy.getByDataTestId('select-dropdown')
+        .find('[data-testid="editable-option"]')
+        .contains(label)
+        .click({ force: true })
+      ManuscriptsPage.getArticleLabel().eq(-1).should('contain', label)
       Menu.clickManuscriptsAndAssertPageLoad()
     }
 
@@ -51,11 +45,10 @@ describe('Checking manuscripts page: label selection and tooltip', () => {
     labels.forEach(selectLabelAndVerify)
 
     // Unset the custom label
-    cy.get('[data-testid=label-dropdown-styled-button]').eq(0).click()
-    cy.get('[data-testid=manuscripts-table-styled-button]').should(
-      'contain',
-      'Select',
-    )
+    ManuscriptsPage.clickArticleLabelClear(-1)
+    ManuscriptsPage.getArticleLabel()
+      .eq(-1)
+      .should('not.contain', 'Ready to publish')
   })
 
   context('tooltip tests', () => {
@@ -69,7 +62,8 @@ describe('Checking manuscripts page: label selection and tooltip', () => {
     it('check no tooltip for empty abstract', () => {
       Menu.clickManuscriptsAndAssertPageLoad()
       ManuscriptsPage.getTooltipText().should('not.exist')
-      ManuscriptsPage.getTooltipIcon().should('not.exist')
+      ManuscriptsPage.getTooltipIcon().should('be.visible').click()
+      ManuscriptsPage.getTooltipText().should('contain', 'No abstract provided')
     })
 
     it('check tooltip text', () => {
@@ -78,28 +72,29 @@ describe('Checking manuscripts page: label selection and tooltip', () => {
         SubmissionFormPage.fillInAbstractColab(data.abstract)
         Menu.clickManuscriptsAndAssertPageLoad()
         ManuscriptsPage.getTooltipText().should('not.exist')
-        ManuscriptsPage.getTooltipIcon()
-          .should('be.visible')
-          .trigger('mouseover')
+        ManuscriptsPage.getTooltipIcon().should('be.visible').click()
         ManuscriptsPage.getTooltipText()
           .should('contain', data.abstract)
           .and('not.contain', '<p class="paragraph">')
       })
     })
 
-    it('check length for the tooltip text, to be less than 1000', () => {
+    it('truncates a long abstract to 60 words', () => {
+      const longAbstract = Array.from(
+        { length: 65 },
+        (_, i) => `word${i + 1}`,
+      ).join(' ')
+
       cy.contains('Continue Submission').click()
-      cy.fixture('submission_form_data').then(data => {
-        SubmissionFormPage.fillInAbstractColab(
-          data.abstractWithMoreThan1000Characters,
-        )
-        Menu.clickManuscriptsAndAssertPageLoad()
-        ManuscriptsPage.getTooltipText().should('not.exist')
-        ManuscriptsPage.getTooltipIcon().trigger('mouseover')
-        ManuscriptsPage.getTooltipText()
-          .should('contain', '...')
-          .should('have.lengthOf.lessThan', 1000)
-      })
+      SubmissionFormPage.fillInAbstractColab(longAbstract)
+      Menu.clickManuscriptsAndAssertPageLoad()
+      ManuscriptsPage.getTooltipText().should('not.exist')
+      ManuscriptsPage.getTooltipIcon().click()
+      ManuscriptsPage.getTooltipText()
+        .should('contain', '...')
+        .should($el => {
+          expect($el.text().trim().split(/\s+/).length).to.be.at.most(61)
+        })
     })
   })
 })

cypress/e2e/b-colab-prc/103-manuscripts_page_filter_sort_archive_spec.cy.js

@@ -81,7 +81,7 @@ describe('manuscripts page tests - Filter, sort, bulk select, archive', () => {
   context('filter and sort articles', () => {
     it('filter per status', () => {
       ManuscriptsPage.getTableRowsCount().should('eq', 3)
-      ManuscriptsPage.clickStatus(-1)
+      ManuscriptsPage.filterColumnByValue('status', 'Unsubmitted')
       ManuscriptsPage.getTableRowsCount().should('eq', 2)
       ManuscriptsPage.getStatus(0).should('contain', 'Unsubmitted')
       cy.url().should('contain', 'new')
@@ -97,18 +97,15 @@ describe('manuscripts page tests - Filter, sort, bulk select, archive', () => {
       cy.url().should('contain', 'readyToEvaluate')
       ManuscriptsPage.getLabelRow(0).should('contain', 'Ready to evaluate')
       ManuscriptsPage.getLabelRow(1).should('contain', 'Ready to evaluate')
-      ManuscriptsPage.getLabelRow(2).should('contain', 'Ready to evaluate')
       Menu.clickManuscriptsAndAssertPageLoad()
       ManuscriptsPage.selectCustomStatus('Evaluated')
       ManuscriptsPage.getTableRowsCount().should('eq', 1)
       cy.url().should('contain', 'evaluated')
       ManuscriptsPage.getLabelRow(0).should('contain', 'Evaluated')
-      ManuscriptsPage.getLabelRow(1).should('contain', 'Evaluated')
       Menu.clickManuscriptsAndAssertPageLoad()
       ManuscriptsPage.selectCustomStatus('Ready to publish')
       ManuscriptsPage.assertNoTableRows()
       cy.url().should('contain', 'readyToPublish')
-      ManuscriptsPage.getLabelRow(0).should('contain', 'Ready to publish')
     })
   })
 
@@ -134,7 +131,7 @@ describe('manuscripts page tests - Filter, sort, bulk select, archive', () => {
       ManuscriptsPage.clickDelete()
       ManuscriptsPage.getConfirmationMessageForBulkDelete().should(
         'contain',
-        'Please confirm you wish to archive the selected manuscripts.',
+        'Archive 2 manuscripts?',
       )
       ManuscriptsPage.clickConfirm()
       ManuscriptsPage.getConfirmationMessageForBulkDelete().should('not.exist')

cypress/e2e/b-colab-prc/104-control_page_spec.cy.js

@@ -175,9 +175,10 @@ describe('control page tests', () => {
         cy.login(name.role.admin, manuscripts)
         cy.awaitDisappearSpinner()
         Menu.clickManuscriptsAndAssertPageLoad()
-        ManuscriptsPage.selectOptionWithText('Control')
+        ManuscriptsPage.clickControlLink()
         cy.awaitDisappearSpinner()
         ControlPage.getAssignSeniorEditorDropdown().should('be.visible')
+        cy.awaitDisappearSpinner()
         ControlPage.inviteReviewer(name.role.reviewers[1])
         cy.reload()
         cy.get('input[value = "isCollaborative"]').should('not.exist')
@@ -188,8 +189,10 @@ describe('control page tests', () => {
         cy.wait(1000)
         DashboardPage.clickDashboardTab(1)
         DashboardPage.clickAcceptReviewButton()
+        cy.contains('Accept this review invitation?').should('be.visible')
+        cy.contains('button', 'OK').click()
 
-        cy.contains('button', 'Do Review').should('exist')
+        DashboardPage.getDoReviewButton().should('contain', 'Do Review')
         DashboardPage.clickDoReview()
         cy.fixture('submission_form_data').then(data => {
           cy.contains('div', 'Metadata').should('be.visible')
@@ -202,7 +205,7 @@ describe('control page tests', () => {
           ReviewPage.clickSubmitButton()
           ReviewPage.clickConfirmSubmitButton()
 
-          cy.get('[name="submission.$title"]').contains('test pdf')
+          cy.get('[data-testid="submission.$title"]').contains('test pdf')
         })
       })
     })
@@ -211,7 +214,7 @@ describe('control page tests', () => {
       cy.fixture('role_names').then(name => {
         cy.login(name.role.admin, manuscripts)
         cy.awaitDisappearSpinner()
-        ManuscriptsPage.selectOptionWithText('Control')
+        ManuscriptsPage.clickControlLink()
         cy.awaitDisappearSpinner()
         ControlPage.getAssignSeniorEditorDropdown().should('be.visible')
       })
@@ -223,7 +226,7 @@ describe('control page tests', () => {
       ControlPage.getHideReviewerNameCheckbox().should('be.checked')
       cy.fixture('role_names').then(name => {
         cy.login(name.role.reviewers[1], dashboard)
-        cy.get('[data-testid="submission.$title"]:last').click()
+        DashboardPage.clickDoReview()
         cy.get('[data-testid=tab-container]').contains('Review').click()
         ControlPage.getReviewerName().should(
           'not.contain',
@@ -239,7 +242,7 @@ describe('control page tests', () => {
       ControlPage.getHideReviewerNameCheckbox('should', 'not.be.checked')
       cy.fixture('role_names').then(name => {
         cy.login(name.role.reviewers[1], dashboard)
-        cy.get('[data-testid="submission.$title"]:last').click()
+        DashboardPage.clickDoReview()
         cy.get('[data-testid=tab-container]').contains('Review').click()
         ControlPage.getReviewerName().should('contain', name.role.reviewers[1])
       })
@@ -304,7 +307,7 @@ describe('control page tests', () => {
       cy.awaitDisappearSpinner()
       DashboardPage.getHeader().should('be.visible')
       Menu.clickManuscriptsAndAssertPageLoad()
-      ManuscriptsPage.selectOptionWithText('Control')
+      ManuscriptsPage.clickControlLink()
       cy.awaitDisappearSpinner()
       cy.contains('Tasks & Notifications').click()
     })

cypress/e2e/b-colab-prc/105-review_and_decision_page_spec.cy.js

@@ -96,7 +96,9 @@ Cypress.Commands.add(
     cy.wait(1000)
     DashboardPage.clickDashboardTab(1)
     DashboardPage.clickAcceptReviewButton()
-    cy.contains('button', 'Do Review').should('be.visible')
+    cy.contains('Accept this review invitation?').should('be.visible')
+    cy.contains('button', 'OK').click()
+    DashboardPage.getDoReviewButton().should('contain', 'Do Review')
     DashboardPage.clickDoReviewAndVerifyPageLoaded()
     cy.contains('div', 'Metadata').should('be.visible')
 
@@ -121,7 +123,7 @@ Cypress.Commands.add(
 
 Cypress.Commands.add('submitDecision', (decisionText, decisionAction) => {
   cy.awaitDisappearSpinner()
-  ManuscriptsPage.selectOptionWithText('Control')
+  ManuscriptsPage.clickControlLink()
   ControlPage.clickDecisionTab(1)
   ControlPage.fillInDecision(decisionText)
 

cypress/e2e/b-colab-prc/107-new_manuscript_version_spec.cy.js

@@ -50,7 +50,7 @@ describe('checking manuscript version', () => {
       cy.wait(1000)
       cy.login(name.role.author, dashboard)
       /* Click on first MySubmission */
-      DashboardPage.getSubmittedManuscript().click()
+      DashboardPage.clickSubmissionActionLink()
 
       /* Verify Decision Content */
       DashboardPage.getDecisionField(0).should('contain', decisionTextContent)
@@ -76,9 +76,7 @@ describe('checking manuscript version', () => {
       SubmissionFormPage.clickSubmitResearch()
       SubmissionFormPage.clickSubmitYourManuscript()
       /* Verify new submission got created */
-      DashboardPage.getSubmittedManuscript()
-        .contains('test pdf')
-        .should('exist')
+      DashboardPage.getSubmissionTitle().contains('test pdf').should('exist')
 
       /* Login as editor and check the new version submission form */
       cy.login(name.role.seniorEditor, dashboard)

cypress/e2e/c-elife-single_form/202-modify_submission_form_spec.cy.js

@@ -28,7 +28,7 @@ describe('validating required field and doi values in submission form', () => {
     })
     ManuscriptsPage.getTableHead().should('be.visible')
     Menu.clickManuscripts()
-    ManuscriptsPage.getOptionsElifeText('Evaluation').click()
+    ManuscriptsPage.clickEvaluationLink()
   })
 
   context('check the Submission form based on form builder', () => {
@@ -75,7 +75,7 @@ describe('validating required field and doi values in submission form', () => {
         SubmissionFormPage.clickElifeSubmitResearch()
 
         // check for the submission form contains doi
-        ManuscriptsPage.getOptionsElifeText('Evaluation').click()
+        ManuscriptsPage.clickEvaluationLink()
         SubmissionFormPage.getDoi().should(
           'have.value',
           data.doi.split('https://doi.org/')[1],