[#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

@@ -150,7 +150,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 @@
  },
  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 @@
  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 @@
  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 @@
  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 @@
  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 @@
  },
 
  // 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 @@
  // 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 @@
  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!]];
  }
@@ -692,7 +692,7 @@
  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'
  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;
  }
@@ -747,7 +747,7 @@
  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);
  },
 
@@ -766,7 +766,7 @@
  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/utils/segment.ts

@@ -1,11 +1,11 @@
 export default class Segment {
  knownAuthor: string | null;
 
- lineNumbers: Array<number>;
+ lineNumbers: number[];
 
- lines: Array<string>;
+ lines: string[];
 
- constructor(knownAuthor: string | null, lineNumbers: Array<number>, lines: Array<string>) {
+ constructor(knownAuthor: string | null, lineNumbers: number[], lines: string[]) {
  this.knownAuthor = knownAuthor;
  this.lineNumbers = lineNumbers;
  this.lines = lines;

frontend/src/views/c-authorship.vue

@@ -218,10 +218,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,
@@ -236,7 +236,7 @@ function authorshipInitialState() {
  };
 }
 
-const repoCache: string[] = [];
+const repoCache: Array<string> = [];
 
 export default defineComponent({
  name: 'c-authorship',
@@ -481,7 +481,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);
  },
@@ -496,33 +496,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: Segment[]; blankLineCount: number; } {
+ splitSegments(lines: Array<Line>): { segments: Array<Segment>; blankLineCount: number; } {
  // split into segments separated by knownAuthor
  let lastState: string | null;
  let lastId = -1;
- const segments: Segment[] = [];
+ const segments: Array<Segment> = [];
  let blankLineCount = 0;
 
  lines.forEach((line, lineCount) => {
@@ -578,10 +578,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) => {