From e02ab1240132d4f4a2051b96668ca2749edc15e5 Mon Sep 17 00:00:00 2001
From: Seah Shau Chung Nicholas <97350362+nseah21@users.noreply.github.com>
Date: Tue, 23 Jan 2024 06:12:38 +0100
Subject: [PATCH 01/10] [#1986] Add cypress tests for renderFilterHash (#2017)

There were a few instances of URL parameters being incorrectly
loaded due to bugs in the code.

These bugs were not able to be detected early due to a lack of
tests for the renderFilterHash method.

Let's add tests to check that the URL parameters are loaded
correctly after the application reloads.
---
 .../codeView/codeView_renderFilterHash.cy.js  | 339 ++++++++++++++++++
 1 file changed, 339 insertions(+)
 create mode 100644 frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js

diff --git a/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js b/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
new file mode 100644
index 0000000000..10cc717b0c
--- /dev/null
+++ b/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
@@ -0,0 +1,339 @@
+describe('render filter hash', () => {
+  it('search: url params should persist after change and reload', () => {
+    /* Check initial state */
+    cy.get('div.mui-textfield.search_box > input:visible')
+      .should('be.visible')
+      .invoke('val')
+      .should('eq', '');
+
+    /* Enter search and test URL before and after reload */
+    cy.get('div.mui-textfield.search_box > input:visible')
+      .should('be.visible')
+      .type('eugene{enter}');
+
+    cy.url()
+      .should('contain', 'search=eugene');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'search=eugene');
+  });
+
+  it('group by: url params should persist after change and reload', () => {
+    /* Check initial state */
+    cy.get('div.mui-select.grouping > select:visible')
+      .invoke('val')
+      .should('eq', 'groupByRepos');
+
+    cy.url()
+      .should('contain', 'groupSelect=groupByRepos');
+
+    /* Select group by none and test URL before and after reload */
+    cy.get('div.mui-select.grouping > select:visible')
+      .select('groupByNone');
+
+    cy.url()
+      .should('contain', 'groupSelect=groupByNone');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'groupSelect=groupByNone');
+
+    /* Select group by authors and test URL before and after reload */
+    cy.get('div.mui-select.grouping > select:visible')
+      .select('groupByAuthors');
+
+    cy.url()
+      .should('contain', 'groupSelect=groupByAuthors');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'groupSelect=groupByAuthors');
+  });
+
+  it('sort groups by: url params should persist after change and reload', () => {
+    /* Check initial state */
+    cy.get('div.mui-select.sort-group > select:visible')
+      .invoke('val')
+      .should('eq', 'groupTitle dsc');
+
+    cy.url()
+      .should('contain', 'sort=groupTitle%20dsc');
+
+    /* Select sort by group title ascending and test URL before and after reload */
+    cy.get('div.mui-select.sort-group > select:visible')
+      .select('groupTitle');
+
+    cy.url()
+      .should('contain', 'sort=groupTitle');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sort=groupTitle');
+
+    /* Select sort by contribution descending and test URL before and after reload */
+    cy.get('div.mui-select.sort-group > select:visible')
+      .select('totalCommits dsc');
+
+    cy.url()
+      .should('contain', 'sort=totalCommits%20dsc');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sort=totalCommits%20dsc');
+
+    /* Select sort by contribution ascending and test URL before and after reload */
+    cy.get('div.mui-select.sort-group > select:visible')
+      .select('totalCommits');
+
+    cy.url()
+      .should('contain', 'sort=totalCommits');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sort=totalCommits');
+
+    /* Select sort by variance descending and test URL before and after reload */
+    cy.get('div.mui-select.sort-group > select:visible')
+      .select('variance dsc');
+
+    cy.url()
+      .should('contain', 'sort=variance%20dsc');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sort=variance%20dsc');
+
+    /* Select sort by variance ascending and test URL before and after reload */
+    cy.get('div.mui-select.sort-group > select:visible')
+      .select('variance');
+
+    cy.url()
+      .should('contain', 'sort=variance');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sort=variance');
+  });
+
+  it('sort within groups by: url params should persist after change and reload', () => {
+    /* Check initial state */
+    cy.get('div.mui-select.sort-within-group > select:visible')
+      .invoke('val')
+      .should('eq', 'title');
+
+    cy.url()
+      .should('contain', 'sortWithin=title');
+
+    /* Select sort by group title ascending and test URL before and after reload */
+    cy.get('div.mui-select.sort-within-group > select:visible')
+      .select('title dsc');
+
+    cy.url()
+      .should('contain', 'sortWithin=title');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sortWithin=title');
+
+    /* Select sort by contribution descending and test URL before and after reload */
+    cy.get('div.mui-select.sort-within-group > select:visible')
+      .select('totalCommits dsc');
+
+    cy.url()
+      .should('contain', 'sortWithin=totalCommits%20dsc');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sortWithin=totalCommits%20dsc');
+
+    /* Select sort by contribution ascending and test URL before and after reload */
+    cy.get('div.mui-select.sort-within-group > select:visible')
+      .select('totalCommits');
+
+    cy.url()
+      .should('contain', 'sortWithin=totalCommits');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sortWithin=totalCommits');
+
+    /* Select sort by variance descending and test URL before and after reload */
+    cy.get('div.mui-select.sort-within-group > select:visible')
+      .select('variance dsc');
+
+    cy.url()
+      .should('contain', 'sortWithin=variance%20dsc');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sortWithin=variance%20dsc');
+
+    /* Select sort by variance ascending and test URL before and after reload */
+    cy.get('div.mui-select.sort-within-group > select:visible')
+      .select('variance');
+
+    cy.url()
+      .should('contain', 'sortWithin=variance');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'sortWithin=variance');
+  });
+
+  it('granularity: url params should persist after change and reload', () => {
+    /* Check initial state */
+    cy.get('div.mui-select.granularity > select:visible')
+      .invoke('val')
+      .should('eq', 'commit');
+
+    cy.url()
+      .should('contain', 'timeframe=commit');
+
+    /* Select timeframe as day and test URL before and after reload */
+    cy.get('div.mui-select.granularity > select:visible')
+      .select('day');
+
+    cy.url()
+      .should('contain', 'timeframe=day');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'timeframe=day');
+
+    /* Select timeframe as week and test URL before and after reload */
+    cy.get('div.mui-select.granularity > select:visible')
+      .select('week');
+
+    cy.url()
+      .should('contain', 'timeframe=week');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'timeframe=week');
+  });
+
+  it('since: url params should persist after change and reload', () => {
+    /* Check initial state */
+    cy.get('input[name="since"]:visible')
+      .invoke('val')
+      .should('eq', '2018-05-03');
+
+    cy.url()
+      .should('contain', 'since=2018-05-03');
+
+    /* Modify since date and test URL before and after reload */
+    cy.get('input[name="since"]:visible')
+      .type('2019-06-04');
+
+    cy.url()
+      .should('contain', 'since=2019-06-04');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'since=2019-06-04');
+  });
+
+  it('until: url params should persist after change and reload', () => {
+    /* Check initial state (will require dayjs for getting current date) */
+    // cy.get('input[name="until"]:visible')
+    //   .invoke('val')
+    //   .should('eq', dayjs().format('YYYY-MM-DD'));
+
+    // cy.url()
+    //   .should('contain', 'date=2023-07-06');
+
+    /* Modify since date and test URL before and after reload */
+    cy.get('input[name="until"]:visible')
+      .type('2019-06-04');
+
+    cy.url()
+      .should('contain', 'until=2019-06-04');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'until=2019-06-04');
+  });
+
+  it('breakdown by file type: url params should persist after change and reload', () => {
+    cy.get('#summary label.filter-breakdown input:visible')
+      .should('not.be.checked');
+
+    cy.url()
+      .should('contain', 'breakdown=false');
+
+    cy.get('#summary label.filter-breakdown input:visible')
+      .check();
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'breakdown=true');
+  });
+
+  it('merge all groups: url params should persist after change and reload', () => {
+    cy.get('#summary label.merge-group > input:visible')
+      .should('be.visible')
+      .check();
+
+    cy.url()
+      .should('contain', 'mergegroup=reposense%2FRepoSense%5Bcypress%5D');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'mergegroup=reposense%2FRepoSense%5Bcypress%5D');
+  });
+
+  it('checked file types: url params should persist after change and reload', () => {
+    cy.get('#summary label.filter-breakdown input:visible')
+      .should('not.be.checked');
+
+    cy.url()
+      .should('not.contain', 'gradle');
+
+    cy.get('#summary label.filter-breakdown input:visible')
+      .check()
+      .should('be.checked');
+
+    cy.get('#summary div.fileTypes input[id="gradle"]')
+      .should('be.checked');
+
+    cy.url()
+      .should('contain', 'gradle');
+
+    cy.reload();
+
+    cy.url()
+      .should('contain', 'gradle');
+
+    cy.get('#summary div.fileTypes input[id="gradle"]')
+      .uncheck()
+      .should('not.be.checked');
+
+    cy.url()
+      .should('not.contain', 'gradle');
+
+    cy.reload();
+
+    cy.url()
+      .should('not.contain', 'gradle');
+  });
+});

From 3cd680c3ddfa5a96f9168d3ab411d0cccfc3c52f Mon Sep 17 00:00:00 2001
From: Alvis Ng <alvis.ng.business@gmail.com>
Date: Fri, 26 Jan 2024 13:22:55 +0800
Subject: [PATCH 02/10] [#2082] Fix typo in command in Setting Up page (#2083)

Fix typo in Setting Up page

The command given in the developer guide for checking the local Node.js
version is `npm -v`, which displays the version of npm instead.

Let's replace the command with `node -v`, which correctly displays the
Node.js version.
---
 docs/dg/settingUp.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/dg/settingUp.md b/docs/dg/settingUp.md
index a82a04e90b..6542919046 100644
--- a/docs/dg/settingUp.md
+++ b/docs/dg/settingUp.md
@@ -15,7 +15,7 @@
 
   <box type="info" seamless>
 
-  Type `java -version`, `npm -v` and `git --version` respectively on your OS terminal and ensure that you have the correct version of each prerequisite installed.
+  Type `java -version`, `node -v` and `git --version` respectively on your OS terminal and ensure that you have the correct version of each prerequisite installed.
   </box>
 
 <!-- ==================================================================================================== -->

From eb7a944532ba9b99e890d9fa1c45787dcbec33a0 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Fri, 26 Jan 2024 13:45:04 +0800
Subject: [PATCH 03/10] [#2004] Remove redundant Segment class (#2085)

Remove Segment class, replace with AuthorshipFileSegment

The Segment class and AuthorshipFileSegment interface are equivalent in
their usage and their redundancy seems to be a remnant when the code
was migrated from JS to TS.

Let's remove the Segment class for consistency and to improve runtime
performance.
---
 frontend/src/components/c-segment-collection.vue |  4 ++--
 frontend/src/components/c-segment.vue            |  6 +++---
 frontend/src/utils/segment.ts                    | 13 -------------
 frontend/src/views/c-authorship.vue              | 15 +++++++--------
 4 files changed, 12 insertions(+), 26 deletions(-)
 delete mode 100644 frontend/src/utils/segment.ts

diff --git a/frontend/src/components/c-segment-collection.vue b/frontend/src/components/c-segment-collection.vue
index e305083a31..591dbb247d 100644
--- a/frontend/src/components/c-segment-collection.vue
+++ b/frontend/src/components/c-segment-collection.vue
@@ -7,7 +7,7 @@
 <script lang='ts'>
 import { defineComponent } from 'vue';
 import cSegment from './c-segment.vue';
-import Segment from '../utils/segment';
+import { AuthorshipFileSegment } from '../types/types';
 
 export default defineComponent({
   name: 'c-segment-collection',
@@ -16,7 +16,7 @@ export default defineComponent({
   },
   props: {
     segments: {
-      type: Array<Segment>,
+      type: Array<AuthorshipFileSegment>,
       required: true,
     },
     path: {
diff --git a/frontend/src/components/c-segment.vue b/frontend/src/components/c-segment.vue
index 0d3234ff1e..7e16cc5fd9 100644
--- a/frontend/src/components/c-segment.vue
+++ b/frontend/src/components/c-segment.vue
@@ -32,16 +32,16 @@
 </template>
 
 <script lang='ts'>
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { mapState } from 'vuex';
-import Segment from '../utils/segment';
 import { StoreState } from '../types/vuex.d';
+import { AuthorshipFileSegment } from '../types/types';
 
 export default defineComponent({
   name: 'c-segment',
   props: {
     segment: {
-      type: Segment,
+      type: Object as PropType<AuthorshipFileSegment>,
       required: true,
     },
     path: {
diff --git a/frontend/src/utils/segment.ts b/frontend/src/utils/segment.ts
deleted file mode 100644
index 673cd52d18..0000000000
--- a/frontend/src/utils/segment.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default class Segment {
-  knownAuthor: string | null;
-
-  lineNumbers: Array<number>;
-
-  lines: Array<string>;
-
-  constructor(knownAuthor: string | null, lineNumbers: Array<number>, lines: Array<string>) {
-    this.knownAuthor = knownAuthor;
-    this.lineNumbers = lineNumbers;
-    this.lines = lines;
-  }
-}
diff --git a/frontend/src/views/c-authorship.vue b/frontend/src/views/c-authorship.vue
index 9fe5082b4c..706f650396 100644
--- a/frontend/src/views/c-authorship.vue
+++ b/frontend/src/views/c-authorship.vue
@@ -201,11 +201,10 @@ import minimatch from 'minimatch';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cSegmentCollection from '../components/c-segment-collection.vue';
-import Segment from '../utils/segment';
 import getNonRepeatingColor from '../utils/random-color-generator';
 import { StoreState } from '../types/vuex.d';
 import { FileResult, Line } from '../types/zod/authorship-type';
-import { AuthorshipFile } from '../types/types';
+import { AuthorshipFile, AuthorshipFileSegment } from '../types/types';
 import { FilesSortType, FilterType } from '../types/authorship';
 
 const filesSortDict = {
@@ -518,11 +517,11 @@ export default defineComponent({
       return name === '-';
     },
 
-    splitSegments(lines: Line[]): { segments: Segment[]; blankLineCount: number; } {
+    splitSegments(lines: Line[]): { segments: AuthorshipFileSegment[]; blankLineCount: number; } {
       // split into segments separated by knownAuthor
       let lastState: string | null;
       let lastId = -1;
-      const segments: Segment[] = [];
+      const segments: AuthorshipFileSegment[] = [];
       let blankLineCount = 0;
 
       lines.forEach((line, lineCount) => {
@@ -532,11 +531,11 @@ export default defineComponent({
         const knownAuthor = (line.author && isAuthorMatched) ? line.author.gitId : null;
 
         if (knownAuthor !== lastState || lastId === -1) {
-          segments.push(new Segment(
+          segments.push({
             knownAuthor,
-            [],
-            [],
-          ));
+            lineNumbers: [],
+            lines: [],
+          });
 
           lastId += 1;
           lastState = knownAuthor;

From c2ac8d126d63d02f6668dd9650888350f8e107fa Mon Sep 17 00:00:00 2001
From: Ryan Poon <96387349+sopa301@users.noreply.github.com>
Date: Fri, 26 Jan 2024 14:44:17 +0800
Subject: [PATCH 04/10] [#2003] Suppress Console Warning (#2088)

Suppress unexpected console warning

A theoretically unreachable console.error() statement has raised a
warning from CI builds. Multiple warnings from this intentional
statement may cause an undesirable warning to be disregarded due to the
large warning count.

Let's suppress this particular warning.
---
 frontend/src/components/c-summary-charts.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 5569c73397..09e5727aab 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -692,6 +692,7 @@ export default defineComponent({
     getBaseTarget(target: HTMLElement | null): HTMLElement | null {
       if (!target) {
         // Should never reach here - function assumes that target is a child of the div with class 'summary-chart__ramp'
+        // eslint-disable-next-line no-console
         console.error('Error: The getBaseTarget function in c-summary-charts.vue has been called on an element that is '
         + 'not a child of the div with class summary-chart__ramp. This might affect the drag view functionality.');
         return null;

From 54ba5ecc417097134c83e7d9dc80b925598cb9ef Mon Sep 17 00:00:00 2001
From: George Tay <george_tay@u.nus.edu>
Date: Fri, 26 Jan 2024 15:03:40 +0800
Subject: [PATCH 05/10] [#2091] Improve memory usage by refactoring Regex
 compilation (#2092)

Improve memory usage by refactoring Regex compilation

Currently, Regex checking is used in conjunction with iteration. This
pattern of coding is frowned upon due to the excessive Regex pattern
compilation, causing the program to run slower and consume more
memory.

By moving the Regex pattern compilation outside of the iteration, and
by using `Matcher` objects to check if the strings match the Regex
performance, we can potentially remove this performance bottleneck.

Let's move to refactor the code and remove such instances of Regex use
in iterative loops.
---
 src/main/java/reposense/model/Author.java     | 9 +++++++--
 src/main/java/reposense/util/StringsUtil.java | 6 ++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/main/java/reposense/model/Author.java b/src/main/java/reposense/model/Author.java
index 39438920a8..c790a01f72 100644
--- a/src/main/java/reposense/model/Author.java
+++ b/src/main/java/reposense/model/Author.java
@@ -5,6 +5,7 @@
 import java.nio.file.PathMatcher;
 import java.util.ArrayList;
 import java.util.List;
+import java.util.regex.Pattern;
 
 /**
  * Represents a Git Author.
@@ -74,8 +75,10 @@ public Author(Author another) {
      * @throws IllegalArgumentException if any of the values do not meet the criteria.
      */
     private static void validateEmails(List<String> emails) throws IllegalArgumentException {
+        Pattern emailPattern = Pattern.compile(COMMON_EMAIL_REGEX);
+
         for (String email : emails) {
-            if (!email.matches(COMMON_EMAIL_REGEX)) {
+            if (!emailPattern.matcher(email).matches()) {
                 throw new IllegalArgumentException(String.format(MESSAGE_UNCOMMON_EMAIL_PATTERN, email));
             }
         }
@@ -87,8 +90,10 @@ private static void validateEmails(List<String> emails) throws IllegalArgumentEx
      * @throws IllegalArgumentException if any of the values do not meet the criteria.
      */
     private static void validateIgnoreGlobs(List<String> ignoreGlobList) throws IllegalArgumentException {
+        Pattern globPattern = Pattern.compile(COMMON_GLOB_REGEX);
+
         for (String glob : ignoreGlobList) {
-            if (!glob.matches(COMMON_GLOB_REGEX)) {
+            if (!globPattern.matcher(glob).matches()) {
                 throw new IllegalArgumentException(String.format(MESSAGE_UNCOMMON_GLOB_PATTERN, glob));
             }
         }
diff --git a/src/main/java/reposense/util/StringsUtil.java b/src/main/java/reposense/util/StringsUtil.java
index 93411366bb..790c394692 100644
--- a/src/main/java/reposense/util/StringsUtil.java
+++ b/src/main/java/reposense/util/StringsUtil.java
@@ -15,9 +15,11 @@ public class StringsUtil {
     public static String filterText(String text, String regex) {
         String[] split = text.split("\n");
         StringBuilder sb = new StringBuilder();
+        Pattern regexPattern = Pattern.compile(regex);
+
         for (String line: split) {
-            if (line.matches(regex)) {
-                sb.append(line + "\n");
+            if (regexPattern.matcher(line).matches()) {
+                sb.append(line).append("\n");
             }
         }
 

From 648180650112fe78e6b49cc7974e86590b9e7282 Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Fri, 26 Jan 2024 16:36:20 +0800
Subject: [PATCH 06/10] [#1973] Remove redundant User class (#2093)

Remove utils/user.ts, replace with User interface from types.ts

The User class and interface are equivalent in their usage and their
redundancy seems to be a remnant when the code was migrated from JS to
TS.

Let's remove the User class for consistency and to improve runtime
performance.
---
 frontend/src/components/c-ramp.vue |  7 +++---
 frontend/src/types/vuex.d.ts       |  3 +--
 frontend/src/types/window.ts       |  7 +++---
 frontend/src/utils/api.ts          |  7 +++---
 frontend/src/utils/user.ts         | 40 ------------------------------
 frontend/src/views/c-zoom.vue      |  4 +--
 6 files changed, 12 insertions(+), 56 deletions(-)
 delete mode 100644 frontend/src/utils/user.ts

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 7440e6d2e1..6367fc7932 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -35,10 +35,9 @@
 </template>
 
 <script lang='ts'>
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
-import User from '../utils/user';
-import { Commit, CommitResult } from '../types/types';
+import { Commit, CommitResult, User } from '../types/types';
 
 export default defineComponent({
   name: 'c-ramp',
@@ -49,7 +48,7 @@ export default defineComponent({
       default: 'groupByRepos',
     },
     user: {
-      type: User,
+      type: Object as PropType<User>,
       required: true,
     },
     tframe: {
diff --git a/frontend/src/types/vuex.d.ts b/frontend/src/types/vuex.d.ts
index 40e15a73e6..cedee8c21d 100644
--- a/frontend/src/types/vuex.d.ts
+++ b/frontend/src/types/vuex.d.ts
@@ -1,6 +1,5 @@
 import { Store } from 'vuex';
-import { AuthorshipFile } from './types';
-import User from '../utils/user';
+import { AuthorshipFile, User } from './types';
 
 interface AuthorshipInfo {
   author: string;
diff --git a/frontend/src/types/window.ts b/frontend/src/types/window.ts
index 8180527408..ffc01a5b5a 100644
--- a/frontend/src/types/window.ts
+++ b/frontend/src/types/window.ts
@@ -1,6 +1,5 @@
 import JSZip from 'jszip';
-import User from '../utils/user';
-import { Repo, User as UserType } from './types';
+import { Repo, User } from './types';
 import { AuthorshipSchema } from './zod/authorship-type';
 import { AuthorDailyContributions } from './zod/commits-type';
 import { DomainUrlMap, ErrorMessage } from './zod/summary-type';
@@ -61,8 +60,8 @@ declare global {
     getCommitLink: (repoId: string, commitHash: string) => string | undefined;
     getBlameLink: (repoId: string, branch: string, filepath: string) => string | undefined;
     getHistoryLink: (repoId: string, branch: string, filepath: string) => string | undefined;
-    getGroupName: (group: UserType[], filterGroupSelection: string) => string;
-    getAuthorDisplayName: (authorRepos: UserType[]) => string;
+    getGroupName: (group: User[], filterGroupSelection: string) => string;
+    getAuthorDisplayName: (authorRepos: User[]) => string;
     api: Api;
     sinceDate: string;
     untilDate: string;
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/api.ts
index 10cfa7d656..d3bb73e50a 100644
--- a/frontend/src/utils/api.ts
+++ b/frontend/src/utils/api.ts
@@ -1,8 +1,7 @@
-import { DailyCommit, CommitResult } from '../types/types';
+import { DailyCommit, CommitResult, User } from '../types/types';
 import { authorshipSchema } from '../types/zod/authorship-type';
 import { commitsSchema } from '../types/zod/commits-type';
 import { ErrorMessage, summarySchema } from '../types/zod/summary-type';
-import User from './user';
 
 // utility functions //
 window.$ = (id) => document.getElementById(id);
@@ -258,7 +257,7 @@ window.api = {
         ];
 
         // commits and checkedFileTypeContribution are set in c-summary
-        const user = new User({
+        const user: User = {
           name: author,
           repoId: repoName,
           variance: commits.authorContributionVariance[author],
@@ -270,7 +269,7 @@ window.api = {
           repoName: `${repo.displayName}`,
           location: `${repo.location.location}`,
           checkedFileTypeContribution: undefined,
-        });
+        };
 
         res.push(user);
       }
diff --git a/frontend/src/utils/user.ts b/frontend/src/utils/user.ts
deleted file mode 100644
index 5225aa48d9..0000000000
--- a/frontend/src/utils/user.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Commit, DailyCommit, User as UserType } from '../types/types';
-import { AuthorFileTypeContributions } from '../types/zod/commits-type';
-
-export default class User implements UserType {
-  checkedFileTypeContribution: number | undefined;
-
-  commits: Commit[];
-
-  dailyCommits: DailyCommit[];
-
-  displayName: string;
-
-  fileTypeContribution: AuthorFileTypeContributions;
-
-  location: string;
-
-  name: string;
-
-  repoId: string;
-
-  repoName: string;
-
-  searchPath: string;
-
-  variance: number;
-
-  constructor(userObj: User) {
-    this.checkedFileTypeContribution = userObj.checkedFileTypeContribution;
-    this.commits = userObj.commits || [];
-    this.dailyCommits = userObj.dailyCommits || [];
-    this.displayName = userObj.displayName || '';
-    this.fileTypeContribution = userObj.fileTypeContribution || {};
-    this.location = userObj.location || '';
-    this.name = userObj.name || '';
-    this.repoId = userObj.repoId || '';
-    this.repoName = userObj.repoName || '';
-    this.searchPath = userObj.searchPath || '';
-    this.variance = userObj.variance || 0;
-  }
-}
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index 08509740b4..f8feeb6ec2 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -153,13 +153,13 @@ import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cRamp from '../components/c-ramp.vue';
 import cStackedBarChart from '../components/c-stacked-bar-chart.vue';
-import User from '../utils/user';
 import {
   Bar,
   Commit,
   CommitResult,
   DailyCommit,
   WeeklyCommit,
+  User,
 } from '../types/types';
 import CommitsSortType from '../types/zoom';
 import { StoreState } from '../types/vuex.d';
@@ -237,7 +237,7 @@ export default defineComponent({
         }
         tempUser.commits.push(newCommit);
       });
-      return new User(tempUser);
+      return tempUser;
     },
 
     selectedCommits(): Commit[] {

From 19f9e6847b503b0f9028effd37b2cfab87b72af1 Mon Sep 17 00:00:00 2001
From: Ryan Poon <96387349+sopa301@users.noreply.github.com>
Date: Wed, 31 Jan 2024 20:46:16 +0800
Subject: [PATCH 07/10] [#1980] Standardise Array Style for Frontend Files
 (#2084)

Array<T> and T[] can be used interchangeably in TypeScript. We can use
the same style consistently across the codebase to make it easier for
developers to read and understand array types.

In Vue, using T[] in defineComponent requires casting in the form of
"Array as PropType<T[]>", while Array<T> can be used as is. Therefore,
it would be more consistent to use Array<T> for .vue files.
Additionally, such a rule can be enforced more easily with eslint.

Let's include a rule for eslint to check array usage and change the
code to follow this rule.
---
 frontend/.eslintrc.json                       | 21 +++++++++-
 frontend/src/app.vue                          |  4 +-
 frontend/src/components/c-ramp.vue            |  2 +-
 .../src/components/c-stacked-bar-chart.vue    |  4 +-
 frontend/src/components/c-summary-charts.vue  | 32 +++++++--------
 frontend/src/router/index.ts                  |  2 +-
 frontend/src/views/c-authorship.vue           | 24 +++++------
 frontend/src/views/c-summary.vue              | 40 +++++++++----------
 frontend/src/views/c-zoom.vue                 | 14 +++----
 9 files changed, 81 insertions(+), 62 deletions(-)

diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 9b52391b50..7899f4ecf6 100644
--- a/frontend/.eslintrc.json
+++ b/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"
+          }
+        ]
       }
     }
   ]
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
index b167450c7c..24651b6390 100644
--- a/frontend/src/app.vue
+++ b/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]);
diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 6367fc7932..55e130d7ec 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/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,
diff --git a/frontend/src/components/c-stacked-bar-chart.vue b/frontend/src/components/c-stacked-bar-chart.vue
index 56a3398f55..4825aae309 100644
--- a/frontend/src/components/c-stacked-bar-chart.vue
+++ b/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,
     },
   },
diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 09e5727aab..c97410880a 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/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);
     },
 
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 145ead4415..0d212752b5 100644
--- a/frontend/src/router/index.ts
+++ b/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,
diff --git a/frontend/src/views/c-authorship.vue b/frontend/src/views/c-authorship.vue
index 706f650396..b901e8f4fe 100644
--- a/frontend/src/views/c-authorship.vue
+++ b/frontend/src/views/c-authorship.vue
@@ -217,10 +217,10 @@ const filesSortDict = {
 function authorshipInitialState() {
   return {
     isLoaded: false,
-    selectedFiles: [] as AuthorshipFile[],
+    selectedFiles: [] as Array<AuthorshipFile>,
     filterType: FilterType.Checkboxes,
-    selectedFileTypes: [] as string[],
-    fileTypes: [] as string[],
+    selectedFileTypes: [] as Array<string>,
+    fileTypes: [] as Array<string>,
     filesLinesObj: {} as { [key: string]: number },
     fileTypeBlankLinesObj: {} as { [key: string]: number },
     filesSortType: FilesSortType.LinesOfCode,
@@ -235,7 +235,7 @@ function authorshipInitialState() {
   };
 }
 
-const repoCache: string[] = [];
+const repoCache: Array<string> = [];
 
 export default defineComponent({
   name: 'c-authorship',
@@ -480,7 +480,7 @@ export default defineComponent({
       this.setInfoHash();
     },
 
-    getAuthors(file: AuthorshipFile): (string | null)[] {
+    getAuthors(file: AuthorshipFile): Array<string | null> {
       return Array.from(new Set(file.segments?.map((segment) => segment.knownAuthor)
         .filter(Boolean))).sort().slice(0, 50);
     },
@@ -495,7 +495,7 @@ export default defineComponent({
     },
 
     scrollFileIntoView(file: AuthorshipFile): void {
-      const fileElement = (this.$refs[file.path] as HTMLElement[])[0];
+      const fileElement = (this.$refs[file.path] as Array<HTMLElement>)[0];
       if (this.isElementAboveViewport(fileElement)) {
         fileElement.scrollIntoView(true);
       }
@@ -503,13 +503,13 @@ export default defineComponent({
 
     onTitleTooltipHover(tooltipTextElement: string, titleTextElement: string): void {
       this.onTooltipHover(tooltipTextElement);
-      const titleElement = (this.$refs[titleTextElement] as HTMLElement[])[0];
+      const titleElement = (this.$refs[titleTextElement] as Array<HTMLElement>)[0];
       titleElement.classList.add('max-zIndex');
     },
 
     resetTitleTooltip(tooltipTextElement: string, titleTextElement: string): void {
       this.resetTooltip(tooltipTextElement);
-      const titleElement = (this.$refs[titleTextElement] as HTMLElement[])[0];
+      const titleElement = (this.$refs[titleTextElement] as Array<HTMLElement>)[0];
       titleElement.classList.remove('max-zIndex');
     },
 
@@ -517,11 +517,11 @@ export default defineComponent({
       return name === '-';
     },
 
-    splitSegments(lines: Line[]): { segments: AuthorshipFileSegment[]; blankLineCount: number; } {
+    splitSegments(lines: Array<Line>): { segments: Array<AuthorshipFileSegment>; blankLineCount: number; } {
       // split into segments separated by knownAuthor
       let lastState: string | null;
       let lastId = -1;
-      const segments: AuthorshipFileSegment[] = [];
+      const segments: Array<AuthorshipFileSegment> = [];
       let blankLineCount = 0;
 
       lines.forEach((line, lineCount) => {
@@ -577,10 +577,10 @@ export default defineComponent({
       this.$store.commit('updateAuthorColors', authorColors);
     },
 
-    processFiles(files: FileResult[]): void {
+    processFiles(files: Array<FileResult>): void {
       const SINGLE_FILE_LINE_COUNT_THRESHOLD = 2000;
       const SINGLE_FILE_CHAR_COUNT_THRESHOLD = 1000000;
-      const res: AuthorshipFile[] = [];
+      const res: Array<AuthorshipFile> = [];
       const fileTypeBlanksInfoObj: { [key: string]: number } = {};
 
       files.filter((file) => this.isValidFile(file)).forEach((file) => {
diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index 3ac769d57f..1d8887f45e 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -160,7 +160,7 @@ export default defineComponent({
   },
   props: {
     repos: {
-      type: Array as PropType<Repo[]>,
+      type: Array<Repo>,
       required: true,
     },
     errorMessages: {
@@ -176,9 +176,9 @@ export default defineComponent({
   },
   data() {
     return {
-      checkedFileTypes: [] as string[],
-      fileTypes: [] as string[],
-      filtered: [] as User[][],
+      checkedFileTypes: [] as Array<string>,
+      fileTypes: [] as Array<string>,
+      filtered: [] as Array<Array<User>>,
       filterSearch: '',
       filterGroupSelection: FilterGroupSelection.GroupByRepos,
       sortGroupSelection: SortGroupSelection.GroupTitleDsc, // UI for sorting groups
@@ -248,7 +248,7 @@ export default defineComponent({
       },
       set(value: boolean) {
         if (value) {
-          const mergedGroups: string[] = [];
+          const mergedGroups: Array<string> = [];
           this.filtered.forEach((group) => {
             mergedGroups.push(this.getGroupName(group));
           });
@@ -451,7 +451,7 @@ export default defineComponent({
       }
     },
 
-    getGroupName(group: User[]) {
+    getGroupName(group: Array<User>) {
       return window.getGroupName(group, this.filterGroupSelection);
     },
 
@@ -482,13 +482,13 @@ export default defineComponent({
 
     getFilteredRepos() {
       // array of array, sorted by repo
-      const full: User[][] = [];
+      const full: Array<Array<User>> = [];
 
       // create deep clone of this.repos to not modify the original content of this.repos
       // when merging groups
-      const groups = this.hasMergedGroups() ? JSON.parse(JSON.stringify(this.repos)) as Repo[] : this.repos;
+      const groups = this.hasMergedGroups() ? JSON.parse(JSON.stringify(this.repos)) as Array<Repo> : this.repos;
       groups.forEach((repo) => {
-        const res: User[] = [];
+        const res: Array<User> = [];
 
         // filtering
         repo.users?.forEach((user) => {
@@ -527,7 +527,7 @@ export default defineComponent({
       if (this.filterGroupSelection === 'groupByNone' || !allGroupsMerged) {
         this.$store.commit('updateMergedGroup', []);
       } else {
-        const mergedGroups: string[] = [];
+        const mergedGroups: Array<string> = [];
         this.filtered.forEach((group) => {
           mergedGroups.push(this.getGroupName(group));
         });
@@ -543,11 +543,11 @@ export default defineComponent({
       });
     },
 
-    mergeGroupByIndex(filtered: User[][], groupIndex: number) {
+    mergeGroupByIndex(filtered: Array<Array<User>>, groupIndex: number) {
       const dateToIndexMap: { [key: string]: number } = {};
       const dailyIndexMap: { [key: string]: number } = {};
-      const mergedCommits: Commit[] = [];
-      const mergedDailyCommits: DailyCommit[] = [];
+      const mergedCommits: Array<Commit> = [];
+      const mergedDailyCommits: Array<DailyCommit> = [];
       const mergedFileTypeContribution: AuthorFileTypeContributions = {};
       let mergedVariance = 0;
       let totalMergedCheckedFileTypeCommits = 0;
@@ -583,7 +583,7 @@ export default defineComponent({
       commit: Commit | DailyCommit,
       user: User,
       dateToIndexMap: { [key: string]: number },
-      merged: Commit[] | DailyCommit[],
+      merged: Array<Commit> | Array<DailyCommit>,
     ) {
       const {
         commitResults, date,
@@ -659,7 +659,7 @@ export default defineComponent({
         return;
       }
 
-      const res: Commit[] = [];
+      const res: Array<Commit> = [];
 
       const nextMondayDate = this.dateRounding(sinceDate, 0); // round up for the next monday
 
@@ -676,7 +676,7 @@ export default defineComponent({
       user.commits = res;
     },
 
-    pushCommitsWeek(sinceMs: number, untilMs: number, res: Commit[], commits: Commit[]) {
+    pushCommitsWeek(sinceMs: number, untilMs: number, res: Array<Commit>, commits: Array<Commit>) {
       const diff = Math.round(Math.abs((untilMs - sinceMs) / window.DAY_IN_MS));
       const weekInMS = window.DAY_IN_MS * 7;
 
@@ -700,7 +700,7 @@ export default defineComponent({
       }
     },
 
-    addLineContributionWeek(endOfWeekMs: number, week: Commit, commits: Commit[]) {
+    addLineContributionWeek(endOfWeekMs: number, week: Commit, commits: Array<Commit>) {
       // commits are not contiguous, meaning there are gaps of days without
       // commits, so we are going to check each commit's date and make sure
       // it is within the duration of a week
@@ -873,11 +873,11 @@ export default defineComponent({
       const {
         zSince, zUntil, zTimeFrame, zIsMerged, zFilterSearch,
       } = info;
-      const filtered: User[][] = [];
+      const filtered: Array<Array<User>> = [];
 
-      const groups: Repo[] = JSON.parse(JSON.stringify(this.repos));
+      const groups: Array<Repo> = JSON.parse(JSON.stringify(this.repos));
 
-      const res: User[] = [];
+      const res: Array<User> = [];
       groups.forEach((repo) => {
         repo.users?.forEach((user) => {
           // only filter users that match with zoom user and previous searched user
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index f8feeb6ec2..51494f0b92 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -171,8 +171,8 @@ function zoomInitialState() {
     commitsSortType: CommitsSortType.Time,
     toReverseSortedCommits: true,
     isCommitsFinalized: false,
-    selectedFileTypes: [] as string[],
-    fileTypes: [] as string[],
+    selectedFileTypes: [] as Array<string>,
+    fileTypes: [] as Array<string>,
   };
 }
 
@@ -240,12 +240,12 @@ export default defineComponent({
       return tempUser;
     },
 
-    selectedCommits(): Commit[] {
+    selectedCommits(): Array<Commit> {
       if (this.isSelectAllChecked) {
         return this.filteredUser.commits;
       }
 
-      const commits = [] as Commit[];
+      const commits = [] as Array<Commit>;
       this.filteredUser.commits.forEach((commit) => {
         const filteredCommit = { ...commit };
         filteredCommit.commitResults = [];
@@ -333,7 +333,7 @@ export default defineComponent({
       this.selectedFileTypes = this.fileTypes.slice();
     },
 
-    getContributionBars(slice: CommitResult): Bar[] {
+    getContributionBars(slice: CommitResult): Array<Bar> {
       let currentBarWidth = 0;
       const fullBarWidth = 100;
 
@@ -345,7 +345,7 @@ export default defineComponent({
       const contributionPerFullBar = avgContributionSize;
 
       const diffstatMappings: { [key: string]: number } = { limegreen: slice.insertions, red: slice.deletions };
-      const allContributionBars: Bar[] = [];
+      const allContributionBars: Array<Bar> = [];
 
       if (contributionPerFullBar === 0) {
         return allContributionBars;
@@ -502,7 +502,7 @@ export default defineComponent({
       window.encodeHash();
     },
 
-    containsAtLeastOneSelected(fileTypes: string[]): boolean {
+    containsAtLeastOneSelected(fileTypes: Array<string>): boolean {
       for (let i = 0; i < fileTypes.length; i += 1) {
         if (this.selectedFileTypes.includes(fileTypes[i])) {
           return true;

From f5855fa68b3e23a0fed0c2e7cc94cc6401d175e3 Mon Sep 17 00:00:00 2001
From: Ryan Poon <96387349+sopa301@users.noreply.github.com>
Date: Wed, 31 Jan 2024 21:26:10 +0800
Subject: [PATCH 08/10] [#1224] Update .stylelintrc.json to check for spacing
 (#2094)

With no current plans to update stylelint to v15 or beyond, we can
still use the current features to enforce consistent spacing in our
scss files. This will make the coding style more consistent throughout
the codebase.

Let's update the rules in .stylelintrc.json to enforce spacing.
---
 frontend/.stylelintrc.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/.stylelintrc.json b/frontend/.stylelintrc.json
index ebef44f98c..7014b2f332 100644
--- a/frontend/.stylelintrc.json
+++ b/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"
   }
 }

From 0f682a0c319cde9aefe268deb97e97816c1b387a Mon Sep 17 00:00:00 2001
From: jonasongg <120372506+jonasongg@users.noreply.github.com>
Date: Wed, 31 Jan 2024 21:59:17 +0800
Subject: [PATCH 09/10] [#2016] Remove hash symbol from URL when decoding hash
 (#2086)

Fix bug where some params were not retained after refresh

The issue pertains to breakdown of file types disappearing after a
refresh, but it seems to apply to all params that were last in the URL
due to symbols not being filtered out correctly.

Let's fix this issue to make sure the state of the report stays the
same when refreshing.
---
 .../codeView/codeView_renderFilterHash.cy.js  | 156 ++++++++++++++++++
 frontend/src/utils/api.ts                     |   4 +-
 2 files changed, 159 insertions(+), 1 deletion(-)

diff --git a/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js b/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
index 10cc717b0c..ec2c91e869 100644
--- a/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
+++ b/frontend/cypress/tests/codeView/codeView_renderFilterHash.cy.js
@@ -306,9 +306,13 @@ 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');
@@ -316,14 +320,29 @@ describe('render filter hash', () => {
     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');
@@ -331,9 +350,146 @@ describe('render filter hash', () => {
     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');
   });
 });
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/api.ts
index d3bb73e50a..1ac4d3c96b 100644
--- a/frontend/src/utils/api.ts
+++ b/frontend/src/utils/api.ts
@@ -70,7 +70,9 @@ window.decodeHash = function decodeHash() {
   const hashParams: { [key: string]: string } = {};
 
   const hashIndex = window.location.href.indexOf(HASH_ANCHOR);
-  const parameterString = hashIndex === -1 ? '' : window.location.href.slice(hashIndex + 1);
+
+  // split by # to remove "#/" string at the end of URLs generated by Vue Hash Router
+  const parameterString = hashIndex === -1 ? '' : window.location.href.slice(hashIndex + 1).split('#')[0];
 
   parameterString.split('&')
     .forEach((param) => {

From 7977382dfeb3f8559ebb85028a510c8bbc23b58e Mon Sep 17 00:00:00 2001
From: George Tay <george_tay@u.nus.edu>
Date: Wed, 31 Jan 2024 23:16:23 +0800
Subject: [PATCH 10/10] [#1958] Use syntax coloring for code blocks in docs
 (#2099)

Current code blocks do not use the built-in syntax highlighting
feature offered by Markbind/Markdown.

This impedes the readability of the code within the code blocks.

Let's update the code blocks in the documentation to enable
syntax highlighting to further enhance readability of the documentation
and the code.
---
 docs/dg/learningBasics.md | 22 +++++++++++-----------
 docs/dg/styleGuides.md    | 24 ++++++++++++------------
 docs/ug/configFiles.md    |  6 +++---
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/docs/dg/learningBasics.md b/docs/dg/learningBasics.md
index de958aae0c..1908a4899a 100644
--- a/docs/dg/learningBasics.md
+++ b/docs/dg/learningBasics.md
@@ -82,13 +82,13 @@ Here are some small tasks for you to gain some basic knowledge of the code relat
 
   Therefore, the first step you can take is to add the following to `ArgsParser`.
 
-  ```
+  ```java
   public static final String[] JSON_PRINT_MODE_FLAGS = new String[]{"--use-json-pretty-printing", "-j"};
   ```
 
   In `getArgumentParser` method, add the following content to make `ArgumentParser` capture the new argument.
 
-  ```
+  ```java
   parser.addArgument(JSON_PRINT_MODE_FLAGS)
       .dest(JSON_PRINT_MODE_FLAGS[0])
       .action(Arguments.storeTrue())
@@ -102,7 +102,7 @@ Here are some small tasks for you to gain some basic knowledge of the code relat
 
   1. Add the following content to `CliArguments` to include `isPrettyPrintingUsed` as a new attribute to the class.
 
-  ```
+  ```java
   protected boolean isPrettyPrintingUsed;
 
   public boolean isPrettyPrintingUsed() {
@@ -112,13 +112,13 @@ Here are some small tasks for you to gain some basic knowledge of the code relat
 
   2. In the constructor of `ConfigCliArguments`, add `isPrettyPrintingUsed` as a new parameter of the method, and add the following instruction to the method body.
 
-  ```
+  ```java
   this.isPrettyPrintingUsed = isPrettyPrintingUsed;
   ```
 
   3. In the `parse` method of `ArgsParser`, add the following instruction to get `isJsonPrettyPrintingUsed` from `ArgmentParser`.
 
-  ```
+  ```java
   boolean isJsonPrettyPrintingUsed = results.get(JSON_PRINT_MODE_FLAGS[0]);
   ```
 
@@ -139,13 +139,13 @@ Here are some small tasks for you to gain some basic knowledge of the code relat
 
   2. Add the following content to `FileUtil`.
 
-  ```
+  ```java
   private static boolean isPrettyPrintingUsed = false;
   ```
 
   3. In the `writeJsonFile` method, Replace the creation of the `Gson` object with the following instructions.
 
-  ```
+  ```java
   GsonBuilder gsonBuilder = new GsonBuilder()
           .registerTypeAdapter(LocalDateTime.class, (JsonSerializer<LocalDateTime>) (date, typeOfSrc, context)
                         -> new JsonPrimitive(date.format(DateTimeFormatter.ofPattern(GITHUB_API_DATE_FORMAT))))
@@ -160,7 +160,7 @@ Here are some small tasks for you to gain some basic knowledge of the code relat
 
   4. To notify `FileUtil` of the switch between different printing mode, add the following method to `FileUtil`.
 
-  ```
+  ```java
   public static void setPrettyPrintingMode(boolean isPrettyPrintingAdopted) {
       isPrettyPrintingUsed = isPrettyPrintingAdopted;
   }
@@ -168,7 +168,7 @@ Here are some small tasks for you to gain some basic knowledge of the code relat
 
   5. It is now possible to notify `FileUtil` of the printing mode switch by extracting the argument from the `CliArguments` object in the `main` method of `RepoSense.java` and passing it to the corresponding method in `FileUtil`.
 
-  ```
+  ```java
   FileUtil.setPrettyPrintingMode(cliArguments.isPrettyPrintingUsed());
   ```
 
@@ -225,7 +225,7 @@ Here are some small tasks for you to gain some basic knowledge of the code relat
 
   Add this to the catch block of `spawnCloneProcess` and `waitForCloneProcess`, so that the message will be captured in `summary.json`.
 
-  ```
+  ```java
   ErrorSummary.getInstance().addErrorMessage(config.getDisplayName(), e.getMessage());
   ```
   </panel>
@@ -358,7 +358,7 @@ Here are some small tasks for you to gain some basic knowledge of the code relat
 
   Add this to `c_summary.scss`.
 
-  ```
+  ```css
   .active-text {
     color: mui-color('green');
   }
diff --git a/docs/dg/styleGuides.md b/docs/dg/styleGuides.md
index 13fd1191f4..69a607c0e1 100644
--- a/docs/dg/styleGuides.md
+++ b/docs/dg/styleGuides.md
@@ -22,7 +22,7 @@ Our coding standards are mostly based on those at [se-education.org/guides](http
 
 ## Note on Ternary Operators:
 Ternary operators can be used to shorten if-else blocks such as this:
-```
+```java
 LocalDateTime min = ARBITRARY_FIRST_COMMIT_DATE_UTC.withZoneSameInstant(zoneId).toLocalDateTime();
 if (!commitInfos.isEmpty()) {
     min = commitInfos.get(0).getTime();
@@ -31,7 +31,7 @@ return min;
 ```
 
 The result would look something like this:
-```
+```java
 return (commitInfos.isEmpty())
         ? ARBITRARY_FIRST_COMMIT_DATE_UTC.withZoneSameInstant(zoneId).toLocalDateTime()
         : commitInfos.get(0).getTime();
@@ -48,8 +48,8 @@ In addition to what has been mentioned in the [**Java** coding standard (SE-EDU)
   * This is not necessary (although still recommended) for methods with `@Override` annotations if Javadoc is used. However, if the method that is being overriden is part of your code and has Javadoc, all parameters must be described.
 
 Negative Examples:
-```
-Not okay (Only mentions zoneId parameter):
+```java
+// Not okay (Only mentions zoneId parameter):
 /**
  * Returns a {@link LocalDateTime} object adjusted for timezone given by {@code zoneId}.
  */
@@ -57,7 +57,7 @@ public LocalDateTime adjustTimeZone(LocalDateTime sinceDate, ZoneId zoneId) {
     //Code here
 }
 
-Not okay (@param tag used only for zoneId)
+// Not okay (@param tag used only for zoneId)
 /**
  * Returns a {@link LocalDateTime} object by adjusting {@code sinceDate}
  * to the timezone given by {@code zoneId}.
@@ -69,8 +69,8 @@ public LocalDateTime adjustTimeZone(LocalDateTime sinceDate, ZoneId zoneId) {
 }
 ```
 Positive Example #1:
-```
-Okay (No @param tags):
+```java
+// Okay (No @param tags):
 /**
  * Returns a {@link LocalDateTime} object by adjusting {@code sinceDate}
  * to the timezone given by {@code zoneId}.
@@ -80,8 +80,8 @@ public LocalDateTime adjustTimeZone(LocalDateTime sinceDate, ZoneId zoneId) {
 }
 ```
 Positive Example #2:
-```
-Okay (@param tags used for all inputs):
+```java
+// Okay (@param tags used for all inputs):
 /**
  * Returns a {@link LocalDateTime} object by adjusting {@code sinceDate}
  * to the timezone given by {@code zoneId}.
@@ -98,8 +98,8 @@ public LocalDateTime adjustTimeZone(LocalDateTime sinceDate, ZoneId zoneId) {
   * This requirement does not apply to test code.
   * One `@throws` tag per unique exception.
   * The order of exceptions in the `@throws` tag block should match that of the method's `throws` statement.
-```
-Not okay (order of exceptions in tag block and method signature do not match):
+```java
+// Not okay (order of exceptions in tag block and method signature do not match):
 /**
  * Returns a {@link LocalDateTime} object from {@code dateString}.
  *
@@ -111,7 +111,7 @@ public LocalDateTime parseDate(String dateString) throws NullPointerException, P
     // Code here
 }
 
-Should be:
+// Should be:
 /**
  * Returns a {@link LocalDateTime} object from {@code dateString}.
  *
diff --git a/docs/ug/configFiles.md b/docs/ug/configFiles.md
index cb74d8ffff..1797f8e4ea 100644
--- a/docs/ug/configFiles.md
+++ b/docs/ug/configFiles.md
@@ -190,15 +190,15 @@ Date:   Fri Feb 9 19:13:13 2018 +0800
 ```
 `ActualGitHostId` and `ConfiguredAuthorName` are both `Git Author Name` of the same author.<br>
 To find the author name that you are currently using for your current git repository, run the following command within your git repository:
-``` {.no-line-numbers}
+``` shell {.no-line-numbers}
 git config user.name
 ```
 To set the author name to the value you want (e.g., to set it to your GitHub username) for your current git repository, you can use the following command ([more info](https://www.git-tower.com/learn/git/faq/change-author-name-email)):
-``` {.no-line-numbers}
+``` shell {.no-line-numbers}
 git config user.name "YOUR_AUTHOR_NAME”
 ```
 To set the author name to use a default value you want for future git repositories, you can use the following command:
-``` {.no-line-numbers}
+``` shell {.no-line-numbers}
 git config --global user.name "YOUR_AUTHOR_NAME”
 ```
 RepoSense expects the Git Author Name to be the same as author's username on the Git hosting platform (GitHub, GitLab, BitBucket). If an author's `Git Author Name` is different from their username on the Git hosting platform, the `Git Author Name` needs to be specified in the standalone config file. If the author has more than one `Git Author Name`, multiple values can be entered too.