[#2098] Add show more button for error messages

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,,,,,,,

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);
+  });
 });

frontend/src/views/c-summary.vue

@@ -76,7 +76,9 @@
   .error-message-box(v-if="Object.entries(errorMessages).length && !isWidgetMode")
     .error-message-box__close-button(v-on:click="dismissTab($event)") ×
     .error-message-box__message The following issues occurred when analyzing the following repositories:
-    .error-message-box__failed-repo(v-for="errorBlock in errorMessages")
+    .error-message-box__failed-repo(
+        v-for="errorBlock in errorIsShowingMore ? errorMessages : Object.values(errorMessages).slice(0, 4)"
+      )
       font-awesome-icon(icon="exclamation")
       span.error-message-box__failed-repo--name {{ errorBlock.repoName }}
       .error-message-box__failed-repo--reason(
@@ -92,7 +94,11 @@
           v-bind:href="getReportIssueEmailLink(errorBlock.errorMessage)"
         )
           span {{ getReportIssueEmailAddress() }}
-      .error-message-box__failed-repo--reason(v-else) {{ errorBlock.errorMessage }}
+      .error-message-box__failed-repo--reason(v-else) {{ errorBlock.errorMessage }}\
+    .error-message-box__show-more-container(v-if="Object.keys(errorMessages).length > 4")
+      span(v-if="!errorIsShowingMore") Remaining error messages omitted to save space. 
+      a(v-if="!errorIsShowingMore", v-on:click="toggleErrorShowMore()") SHOW ALL...
+      a(v-else, v-on:click="toggleErrorShowMore()") SHOW LESS...
   .fileTypes(v-if="filterBreakdown && !isWidgetMode")
     .checkboxes.mui-form--inline(v-if="Object.keys(fileTypeColors).length > 0")
       label(style='background-color: #000000; color: #ffffff')
@@ -201,6 +207,7 @@ export default defineComponent({
       filterGroupSelectionWatcherFlag: false,
       chartGroupIndex: undefined as number | undefined,
       chartIndex: undefined as number | undefined,
+      errorIsShowingMore: false,
     };
   },
   computed: {
@@ -933,6 +940,10 @@ export default defineComponent({
     getFontColor(color: string) {
       return window.getFontColor(color);
     },
+
+    toggleErrorShowMore() {
+      this.errorIsShowingMore = !this.errorIsShowingMore;
+    },
   },
 });
 </script>
@@ -941,4 +952,10 @@ export default defineComponent({
 <style lang="scss">
 @import '../styles/_colors.scss';
 @import '../styles/summary-chart.scss';
+
+.error-message-box__show-more-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: .3rem;
+}
 </style>