[#2098] Add show more button for error messages (#2105)

Add show more button for error messages Currently, if there are a lot of error messages, it can block the rest of the page to the point where users may think the report failed to generate at all. Let's hide extra messages automatically and add a show more button if there are more to display the messages in full.
reposense · Mar 14, 2024 · 0b09647 · 0b09647
1 parent bbb2f69
commit 0b09647
Show file tree

Hide file tree

Showing 19 changed files with 118 additions and 74 deletions.
diff --git a/frontend/cypress/config/repo-config.csv b/frontend/cypress/config/repo-config.csv
@@ -1,3 +1,7 @@
 Repository's Location,Branch,File formats,Ignore Glob List,Ignore standalone config,Ignore Commits List,Ignore Authors List,Shallow Cloning,Find Previous Authors
 https://github.com/reposense/RepoSense.git,cypress,,,,,,,
 https://github.com/reposense/testrepo-Empty.git,master,,,,,,,
+https://github.com/reposense/testrepo-Empty2.git,master,,,,,,,
+https://github.com/reposense/testrepo-Empty3.git,master,,,,,,,
+https://github.com/reposense/testrepo-Empty4.git,master,,,,,,,
+https://github.com/reposense/testrepo-Empty5.git,master,,,,,,,
diff --git a/frontend/cypress/tests/chartView/chartView_errorSummary_messageBox.cy.js b/frontend/cypress/tests/chartView/chartView_errorSummary_messageBox.cy.js
@@ -27,4 +27,24 @@ describe('error summary', () => {
     cy.get('.error-message-box')
       .should('not.be.visible');
   });
+
+  it('can be expanded and collapsed if count > 4', () => {
+    cy.get('.error-message-box')
+      .find('.error-message-box__failed-repo')
+      .should('have.length', 4);
+
+    cy.get('.error-message-box__show-more-container > a')
+      .click();
+
+    cy.get('.error-message-box')
+      .find('.error-message-box__failed-repo')
+      .should('have.length', 5);
+
+    cy.get('.error-message-box__show-more-container > a')
+      .click();
+
+    cy.get('.error-message-box')
+      .find('.error-message-box__failed-repo')
+      .should('have.length', 4);
+  });
 });
diff --git a/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js b/frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js
@@ -8,7 +8,7 @@ describe('zoom features in code view', () => {
   const zoomKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
   it('click on view commits button', () => {
     cy.get('.icon-button.fa-list-ul')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -57,7 +57,7 @@ describe('date changes in chart view should reflect in zoom', () => {
       .type('2018-06-11');
 
     cy.get('.icon-button.fa-list-ul')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -84,7 +84,7 @@ describe('date changes in chart view should reflect in zoom', () => {
       .type('2018-05-20');
 
     cy.get('.icon-button.fa-list-ul')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -112,7 +112,7 @@ describe('date changes in chart view should reflect in zoom', () => {
       .type('2019-08-19');
 
     cy.get('.icon-button.fa-list-ul')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -140,7 +140,7 @@ describe('date changes in chart view should reflect in zoom', () => {
       .type('2018-07-20');
 
     cy.get('.icon-button.fa-list-ul')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -171,7 +171,7 @@ describe('date changes in chart view should reflect in zoom', () => {
       .type('2019-03-09');
 
     cy.get('.icon-button.fa-list-ul')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -212,7 +212,7 @@ describe('date changes in chart view should reflect in zoom', () => {
       .type('2019-08-01');
 
     cy.get('.icon-button.fa-list-ul')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 

diff --git a/frontend/cypress/tests/codeView/codeView.cy.js b/frontend/cypress/tests/codeView/codeView.cy.js
@@ -34,7 +34,7 @@ describe('code view', () => {
       .should('be.checked');
 
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 

diff --git a/frontend/cypress/tests/codeView/codeView_checkFileTypes.cy.js b/frontend/cypress/tests/codeView/codeView_checkFileTypes.cy.js
@@ -2,7 +2,7 @@ describe('check file types', () => {
   it('check if all files types are visible by default', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -16,7 +16,7 @@ describe('check file types', () => {
   it('uncheck all files types should show no files', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -34,7 +34,7 @@ describe('check file types', () => {
   it('uncheck file type should uncheck all option and not show legend', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 

diff --git a/frontend/cypress/tests/codeView/codeView_filterGlob.cy.js b/frontend/cypress/tests/codeView/codeView_filterGlob.cy.js
@@ -2,7 +2,7 @@ describe('filter glob', () => {
   it('check filter glob radio button is clickable', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -18,7 +18,7 @@ describe('filter glob', () => {
 
   it('check no filter glob input should show all file types by default', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -33,7 +33,7 @@ describe('filter glob', () => {
 
   it('check filter glob input should be in focus after click', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -49,7 +49,7 @@ describe('filter glob', () => {
 
   it('check filter glob input should have default empty value', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -63,7 +63,7 @@ describe('filter glob', () => {
 
   it('check deleting previously searched input to filter empty input by enter should show all file types', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -93,7 +93,7 @@ describe('filter glob', () => {
 
   it('check deleting previously searched input to filter empty input by clicking should show all file types', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -120,7 +120,7 @@ describe('filter glob', () => {
 
   it('check request to filter invalid glob by enter should not show any files', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -144,7 +144,7 @@ describe('filter glob', () => {
 
   it('check request to filter invalid glob by clicking should not show any files', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -167,7 +167,7 @@ describe('filter glob', () => {
 
   it('check filter glob should only show files with that extension', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 

diff --git a/frontend/cypress/tests/codeView/codeView_hideFileDetails.cy.js b/frontend/cypress/tests/codeView/codeView_hideFileDetails.cy.js
@@ -2,7 +2,7 @@ describe('hide all file details', () => {
   it('check hide all file details hides the content of all the files', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -28,7 +28,7 @@ describe('hide all file details', () => {
 
   it('check details of one file are shown, rest are hidden', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -68,7 +68,7 @@ describe('hide all file details', () => {
 
   it('check file can be hidden after scrolling', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -119,7 +119,7 @@ describe('hide all file details', () => {
 
   it('check show all file details shows the content of all the files', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -148,7 +148,7 @@ describe('hide all file details', () => {
 
   it('check collapsed file persists after sort', () => {
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 

diff --git a/frontend/cypress/tests/codeView/codeView_mergeGroupBlame.cy.js b/frontend/cypress/tests/codeView/codeView_mergeGroupBlame.cy.js
@@ -2,7 +2,7 @@ describe('merge group blame in code view', () => {
   it('no author breakdown shown by default', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -28,7 +28,7 @@ describe('merge group blame in code view', () => {
 
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -54,7 +54,7 @@ describe('merge group blame in code view', () => {
 
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -81,7 +81,7 @@ describe('merge group blame in code view', () => {
 
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -109,7 +109,7 @@ describe('merge group blame in code view', () => {
 
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -137,7 +137,7 @@ describe('merge group blame in code view', () => {
 
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -162,7 +162,7 @@ describe('merge group blame in code view', () => {
 
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -186,7 +186,7 @@ describe('merge group blame in code view', () => {
 
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -219,7 +219,7 @@ describe('merge group blame in code view', () => {
 
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 

diff --git a/frontend/cypress/tests/codeView/codeView_reload.cy.js b/frontend/cypress/tests/codeView/codeView_reload.cy.js
@@ -2,7 +2,7 @@ describe('reload page', () => {
   it('reload page should restore all controls', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 

diff --git a/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js b/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
@@ -371,7 +371,7 @@ describe('render filter hash', () => {
   it('code panel: sort by: url params should persist after change and reload', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -416,7 +416,7 @@ describe('render filter hash', () => {
   it('code panel: order: url params should persist after change and reload', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();
 
@@ -462,7 +462,7 @@ describe('render filter hash', () => {
   it('code panel: filter by glob: url params should persist after change and reload', () => {
     // open the code panel
     cy.get('.icon-button.fa-code')
-      .should('be.visible')
+      .should('exist')
       .first()
       .click();