[#1980] Standardise Array Style for Frontend Files

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

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,33 +495,33 @@ 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);
       }
     },
 
     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');
     },
 
     isUnknownAuthor(name: string): boolean {
       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) => {