[#2148] Show tags on the ramp chart

docs/ug/usingReports.md

@@ -117,6 +117,7 @@ The `Tool Bar` at the top of the Chart panel provides a set of configuration opt
     * a breakdown of the number of lines of codes added to each file type (if the checkbox is checked). More info on note [3] below.
 * `Merge group`: merges all the ramp charts of each group into a single ramp chart; aggregates the contribution of each group.
     * viewing of authored code of the group as a whole is available when `group by repos`.
+* `Show tags`: shows the tags of all the repos under a group
 
 Notes:<br>
 [1] **`Sort groups by`**: each main group has its own index and percentile according to its ranking position after sorting (e.g., if the groups are sorted by contribution in descending order, a 25% percentile indicates that the group is in the top 25% of the whole cohort in terms of contribution)<br>.

frontend/cypress/tests/chartView/chartView_showTags.cy.js

@@ -0,0 +1,62 @@
+describe('show tags', () => {
+  it('unchecked should not display any tags for a group', () => {
+    cy.get('#summary label.show-tags > input:visible')
+      .should('be.visible')
+      .uncheck()
+      .should('not.be.checked');
+
+    cy.get('.summary-charts__title--tags')
+      .should('not.exist');
+  });
+
+  it('checked should display all tags for a group', () => {
+    cy.get('#summary label.show-tags > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('#summary label.merge-group > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('.icon-button.fa-list-ul')
+      .should('exist')
+      .first()
+      .click();
+
+    const correctTags = [];
+
+    cy.get('.zoom__title--tags')
+      .find('.tag')
+      .each(($tag) => correctTags.push($tag.text().trim())).then(() => {
+        cy.get('.summary-charts__title--tags')
+          .find('.tag')
+          .each(($tag) => {
+            expect(correctTags).to.include($tag.text().trim());
+          });
+
+        cy.get('.summary-charts__title--tags')
+          .find('.tag')
+          .should('have.length', correctTags.length);
+      });
+  });
+
+  it('clicked should redirect to the correct tag page', () => {
+    cy.get('#summary label.show-tags > input:visible')
+      .should('be.visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('.summary-charts__title--tags')
+      .find('.tag')
+      .first()
+      .invoke('removeAttr', 'target') // to open in the same window
+      .click();
+
+    cy.origin('https://github.com', () => {
+      cy.url()
+        .should('equal', 'https://github.com/reposense/RepoSense/releases/tag/v1.0');
+    });
+  });
+});

frontend/src/components/c-summary-charts.vue

@@ -139,6 +139,16 @@
           v-if="sortGroupSelection.includes('totalCommits')"
         ) {{ getPercentile(i) }} %&nbsp
         span.tooltip-text.right-aligned {{ getPercentileExplanation(i) }}
+      .summary-charts__title--tags(v-if="viewRepoTags && getTags(repo).length > 0")
+        a.tag(
+          v-for="tag in getTags(repo)",
+          v-bind:href="getTagLink(repo[0], tag)",
+          target="_blank",
+          vbind:key="tag",
+          tabindex="-1"
+        )
+          font-awesome-icon(icon="tags")
+          span  {{ tag }}
     .summary-charts__fileType--breakdown(v-if="filterBreakdown")
       template(v-if="filterGroupSelection !== 'groupByNone'")
         .summary-charts__fileType--breakdown__legend(
@@ -371,6 +381,10 @@ export default defineComponent({
       type: Number,
       default: undefined,
     },
+    viewRepoTags: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -558,6 +572,10 @@ export default defineComponent({
       }
     },
 
+    getTagLink(repo: User, tag: string): string | undefined {
+      return window.filterUnsupported(`${window.getRepoLinkUnfiltered(repo.repoId)}releases/tag/${tag}`);
+    },
+
     // triggering opening of tabs //
     openTabAuthorship(user: User, repo: Array<User>, index: number, isMerged: boolean): void {
       const {
@@ -875,6 +893,15 @@ export default defineComponent({
 
       return totalContribution / totalCommits;
     },
+
+    getTags(repo: Array<User>): Array<string> {
+      return [...new Set(repo.flatMap((r) => r.commits).flatMap((c) => c.commitResults).flatMap((r) => r.tags))]
+        .filter(Boolean) as Array<string>;
+    },
   },
 });
 </script>
+
+<style lang="scss" scoped>
+@import '../styles/tags.scss';
+</style>

frontend/src/styles/summary-chart.scss

@@ -97,6 +97,7 @@
     &__title {
       align-items: center;
       display: flex;
+      flex-wrap: wrap;
       font-weight: bold;
       text-align: left;
 
@@ -128,6 +129,10 @@
         @include mini-font;
         display: inline;
       }
+
+      &--tags {
+        margin: .25rem 0;
+      }
     }
 
     &__fileType--breakdown {

frontend/src/styles/tags.scss

@@ -0,0 +1,16 @@
+@import 'colors';
+
+/* Tags in commits */
+.tag {
+  @include mini-font;
+  background: mui-color('grey', '600');
+  border-radius: 5px;
+  color: mui-color('white');
+  display: inline-block;
+  margin: .2rem .2rem .2rem 0;
+  padding: 0 3px 0 3px;
+
+  .fa-tags {
+    width: .65rem;
+  }
+}

frontend/src/views/c-summary.vue

@@ -73,6 +73,12 @@
             v-bind:disabled="filterGroupSelection === 'groupByNone'"
           )
           span merge all groups
+        label.show-tags
+          input.mui-checkbox(
+            type="checkbox",
+            v-model="viewRepoTags"
+          )
+          span show tags
   .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:
@@ -133,7 +139,8 @@
     v-bind:max-date="maxDate",
     v-bind:sort-group-selection="sortGroupSelection",
     v-bind:chart-group-index="chartGroupIndex",
-    v-bind:chart-index="chartIndex"
+    v-bind:chart-index="chartIndex",
+    v-bind:view-repo-tags="viewRepoTags"
   )
 </template>
 
@@ -211,6 +218,7 @@ export default defineComponent({
       chartIndex: undefined as number | undefined,
       errorIsShowingMore: false,
       numberOfErrorMessagesToShow: 4,
+      viewRepoTags: false,
     };
   },
   computed: {

frontend/src/views/c-zoom.vue

@@ -529,6 +529,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../styles/_colors.scss';
+@import '../styles/tags.scss';
 
 #tab-zoom {
   .zoom {
@@ -558,21 +559,6 @@ export default defineComponent({
       h3 {
         @include large-font;
       }
-
-      /* Tags in commits */
-      .tag {
-        @include mini-font;
-        background: mui-color('grey', '600');
-        border-radius: 5px;
-        color: mui-color('white');
-        display: inline-block;
-        margin: .2rem .2rem .2rem 0;
-        padding: 0 3px 0 3px;
-
-        .fa-tags {
-          width: .65rem;
-        }
-      }
     }
   }