Merge branch 'master' into enhancement-docs-syntax-highlighting

frontend/.eslintrc.json

@@ -78,7 +78,26 @@
           }
         ],
         "@typescript-eslint/member-delimiter-style": "error",
-        "@typescript-eslint/type-annotation-spacing": "error"
+        "@typescript-eslint/type-annotation-spacing": "error",
+        "@typescript-eslint/array-type": [
+          "error",
+          {
+            "default": "array-simple",
+            "readonly": "array-simple"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.vue"],
+      "rules": {
+        "@typescript-eslint/array-type": [
+          "error",
+          {
+            "default": "generic",
+            "readonly": "generic"
+          }
+        ]
       }
     }
   ]

frontend/.stylelintrc.json

@@ -36,6 +36,8 @@
     "scss/no-global-function-names": null,
     "selector-type-no-unknown": null,
     "at-rule-no-unknown": null,
-    "no-duplicate-selectors": null
+    "no-duplicate-selectors": null,
+    "block-opening-brace-space-before": "always",
+    "declaration-colon-space-before": "never"
   }
 }

frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js

@@ -306,34 +306,190 @@ describe('render filter hash', () => {
     cy.get('#summary label.filter-breakdown input:visible')
       .should('not.be.checked');
 
+    // Assumption: gradle is the first file type and yml is the last file type to appear in the list
     cy.url()
       .should('not.contain', 'gradle');
 
+    cy.url()
+      .should('not.contain', 'yml');
+
     cy.get('#summary label.filter-breakdown input:visible')
       .check()
       .should('be.checked');
 
     cy.get('#summary div.fileTypes input[id="gradle"]')
       .should('be.checked');
 
+    cy.get('#summary div.fileTypes input[id="yml"]')
+      .should('be.checked');
+
     cy.url()
       .should('contain', 'gradle');
 
+    cy.url()
+      .should('contain', 'yml');
+
     cy.reload();
 
+    cy.get('#summary div.fileTypes input[id="gradle"]')
+      .should('be.checked');
+
+    cy.get('#summary div.fileTypes input[id="yml"]')
+      .should('be.checked');
+
     cy.url()
       .should('contain', 'gradle');
 
+    cy.url()
+      .should('contain', 'yml');
+
     cy.get('#summary div.fileTypes input[id="gradle"]')
       .uncheck()
       .should('not.be.checked');
 
     cy.url()
       .should('not.contain', 'gradle');
 
+    cy.url()
+      .should('contain', 'yml');
+
     cy.reload();
 
+    cy.get('#summary div.fileTypes input[id="gradle"]')
+      .should('not.be.checked');
+
+    cy.get('#summary div.fileTypes input[id="yml"]')
+      .should('be.checked');
+
     cy.url()
       .should('not.contain', 'gradle');
+
+    cy.url()
+      .should('contain', 'yml');
+  });
+
+  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')
+      .first()
+      .click();
+
+    cy.get('div.mui-select.sort-by > select:visible')
+      .invoke('val')
+      .should('eq', 'linesOfCode');
+
+    cy.url()
+      .should('not.contain', 'authorshipSortBy');
+
+    /* Select file name and test URL before and after reload */
+    cy.get('div.mui-select.sort-by > select:visible')
+      .select('fileName');
+
+    cy.url()
+      .should('contain', 'authorshipSortBy=fileName');
+
+    cy.reload();
+
+    cy.url()
+      .should('not.contain', '%23%2F');
+
+    cy.url()
+      .should('contain', 'authorshipSortBy=fileName');
+
+    /* Select file type and test URL before and after reload */
+    cy.get('div.mui-select.sort-by > select:visible')
+      .select('fileType');
+
+    cy.url()
+      .should('contain', 'authorshipSortBy=fileType');
+
+    cy.reload();
+
+    cy.url()
+      .should('not.contain', '%23%2F');
+
+    cy.url()
+      .should('contain', 'authorshipSortBy=fileType');
+  });
+
+  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')
+      .first()
+      .click();
+
+    cy.get('div.mui-select.sort-order > select:visible')
+      .invoke('val')
+      .should('eq', 'true'); // true is Descending
+
+    cy.url()
+      .should('not.contain', 'reverseAuthorshipOrder');
+
+    /* Select ascending and test URL before and after reload */
+    cy.get('div.mui-select.sort-order > select:visible')
+      .select('false');
+
+    cy.url()
+      .should('contain', 'reverseAuthorshipOrder=false');
+
+    cy.reload();
+
+    cy.url()
+      .should('not.contain', '%23%2F');
+
+    cy.url()
+      .should('contain', 'reverseAuthorshipOrder=false');
+
+    /* Select descending and test URL before and after reload */
+
+    cy.get('div.mui-select.sort-order > select:visible')
+      .select('true');
+
+    cy.url()
+      .should('contain', 'reverseAuthorshipOrder=true');
+
+    cy.reload();
+
+    cy.url()
+      .should('not.contain', '%23%2F');
+
+    cy.url()
+      .should('contain', 'reverseAuthorshipOrder=true');
+  });
+
+  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')
+      .first()
+      .click();
+
+    // click on filter glob radio button
+    cy.get('.radio-button--search')
+      .should('be.visible')
+      .click();
+
+    // enter some input
+    cy.get('#search')
+      .type('README.md');
+
+    // submit
+    cy.get('#search')
+      .type('{enter}');
+
+    cy.url()
+      .should('contain', 'authorshipFilesGlob=README.md');
+
+    // Some bugs appear after two reloads, so reload twice here
+    cy.reload();
+    cy.reload();
+
+    cy.url()
+      .should('not.contain', '%23%2F');
+
+    cy.url()
+      .should('contain', 'authorshipFilesGlob=README.md');
   });
 });

frontend/src/app.vue

@@ -41,7 +41,7 @@ const app = defineComponent({
   data() {
     return {
       repos: {} as { [key: string]: Repo },
-      users: [] as Repo[],
+      users: [] as Array<Repo>,
       userUpdated: false,
 
       loadingOverlayOpacity: 1,
@@ -132,7 +132,7 @@ const app = defineComponent({
       }
     },
     getUsers() {
-      const full: Repo[] = [];
+      const full: Array<Repo> = [];
       Object.keys(this.repos).forEach((repo) => {
         if (this.repos[repo].users) {
           full.push(this.repos[repo]);

frontend/src/components/c-ramp.vue

@@ -149,7 +149,7 @@ export default defineComponent({
           ...dailyCommit,
           commitResults: dailyCommit.commitResults.map((commitResult) => ({ ...commitResult, isOpen: true })),
         }),
-      ) as Commit[];
+      ) as Array<Commit>;
 
       const info = {
         zRepo: user.repoName,

frontend/src/components/c-stacked-bar-chart.vue

@@ -9,13 +9,13 @@
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 import { Bar } from '../types/types';
 
 export default defineComponent({
   props: {
     bars: {
-      type: Array as PropType<Bar[]>,
+      type: Array<Bar>,
       required: true,
     },
   },

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

@@ -374,7 +374,7 @@ export default defineComponent({
   },
   data() {
     return {
-      drags: [] as number[],
+      drags: [] as Array<number>,
       activeRepo: null as string | null,
       activeUser: null as string | null,
       activeTabType: null as string | null,
@@ -430,12 +430,12 @@ export default defineComponent({
     getFileTypeContributionBars(
       fileTypeContribution: AuthorFileTypeContributions,
       checkedFileTypeContribution: number | undefined,
-    ): Bar[] {
+    ): Array<Bar> {
       let currentBarWidth = 0;
       const fullBarWidth = 100;
       const contributionPerFullBar = (this.avgContributionSize * 2);
 
-      const allFileTypesContributionBars: Bar[] = [];
+      const allFileTypesContributionBars: Array<Bar> = [];
       if (contributionPerFullBar === 0) {
         return allFileTypesContributionBars;
       }
@@ -481,8 +481,8 @@ export default defineComponent({
       return allFileTypesContributionBars;
     },
 
-    getFileTypes(repo: User[]): string[] {
-      const fileTypes: string[] = [];
+    getFileTypes(repo: Array<User>): Array<string> {
+      const fileTypes: Array<string> = [];
       repo.forEach((user) => {
         Object.keys(user.fileTypeContribution).forEach((fileType) => {
           if (this.checkedFileTypes.includes(fileType) && !fileTypes.includes(fileType)) {
@@ -493,12 +493,12 @@ export default defineComponent({
       return fileTypes;
     },
 
-    getGroupTotalContribution(group: User[]): number {
+    getGroupTotalContribution(group: Array<User>): number {
       return group.reduce((acc, ele) => acc + (ele.checkedFileTypeContribution ?? 0), 0);
     },
 
-    getContributionBars(totalContribution: number): Bar[] {
-      const res: Bar[] = [];
+    getContributionBars(totalContribution: number): Array<Bar> {
+      const res: Array<Bar> = [];
       const contributionLimit = (this.avgContributionSize * 2);
       if (contributionLimit === 0) {
         return res;
@@ -543,7 +543,7 @@ export default defineComponent({
       return repo.location;
     },
 
-    getRepoIcon(repo: User): string[] {
+    getRepoIcon(repo: User): Array<string> {
       const domainName = window.REPOS[repo.repoId].location.domainName;
 
       switch (domainName) {
@@ -559,7 +559,7 @@ export default defineComponent({
     },
 
     // triggering opening of tabs //
-    openTabAuthorship(user: User, repo: User[], index: number, isMerged: boolean): void {
+    openTabAuthorship(user: User, repo: Array<User>, index: number, isMerged: boolean): void {
       const {
         minDate, maxDate, checkedFileTypes,
       } = this;
@@ -634,12 +634,12 @@ export default defineComponent({
       // Set height of iframe according to number of charts to avoid scrolling
       let totalChartHeight = 0;
       if (!isChartIndexProvided) {
-        totalChartHeight += (this.$refs[`summary-charts-${chartGroupIndex}`] as HTMLElement[])[0].clientHeight;
+        totalChartHeight += (this.$refs[`summary-charts-${chartGroupIndex}`] as Array<HTMLElement>)[0].clientHeight;
       } else {
-        totalChartHeight += (this.$refs[`summary-chart-${chartIndex}`] as HTMLElement[])[0].clientHeight;
+        totalChartHeight += (this.$refs[`summary-chart-${chartIndex}`] as Array<HTMLElement>)[0].clientHeight;
         totalChartHeight += this.filterGroupSelection === 'groupByNone'
           ? 0
-          : (this.$refs[`summary-charts-title-${chartGroupIndex}`] as HTMLElement[])[0].clientHeight;
+          : (this.$refs[`summary-charts-title-${chartGroupIndex}`] as Array<HTMLElement>)[0].clientHeight;
       }
 
       const margins = 30;
@@ -682,7 +682,7 @@ export default defineComponent({
       const regexToRemoveWidget = /([?&])((chartIndex|chartGroupIndex)=\d+)/g;
       return url.replace(regexToRemoveWidget, '');
     },
-    getRepo(repo: Repo[]) {
+    getRepo(repo: Array<Repo>) {
       if (this.isChartGroupWidgetMode && this.isChartWidgetMode) {
         return [repo[this.chartIndex!]];
       }
@@ -748,7 +748,7 @@ export default defineComponent({
       return (Math.round(((index + 1) * 1000) / this.filtered.length) / 10).toFixed(1);
     },
 
-    getGroupName(group: User[]): string {
+    getGroupName(group: Array<User>): string {
       return window.getGroupName(group, this.filterGroupSelection);
     },
 
@@ -767,7 +767,7 @@ export default defineComponent({
       this.$store.commit('updateMergedGroup', info);
     },
 
-    getAuthorDisplayName(repo: User[]): string {
+    getAuthorDisplayName(repo: Array<User>): string {
       return window.getAuthorDisplayName(repo);
     },
 

frontend/src/router/index.ts

@@ -3,7 +3,7 @@ import {
 } from 'vue-router';
 import Home from '../views/c-home.vue';
 
-const routes: Array<RouteRecordRaw> = [
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
     component: Home,