Fix typescript errors in Vue files, fix regression in "Recent Commits" chart

templates/repo/commit_status.tmpl

@@ -1,4 +1,4 @@
-<!-- make sure this matches the color logic in web_src/js/components/DashboardRepoList.vue -->
+<!-- make sure this matches the color logic in web_src/js/data.ts -->
 {{if eq .State "pending"}}
 	{{svg "octicon-dot-fill" 18 "commit-status icon text yellow"}}
 {{end}}

tsconfig.json

@@ -27,6 +27,7 @@
     "noPropertyAccessFromIndexSignature": false,
     "exactOptionalPropertyTypes": false,
     "sourceMap": true,
+    "tsBuildInfoFile": "./node_modules/.cache/tsbuild",
     "types": [
       "vitest/globals",
       "./web_src/js/globals.d.ts",

web_src/js/components/DashboardRepoList.vue

@@ -3,18 +3,11 @@ import {createApp, nextTick} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {commitStatus} from '../data.ts';
+import type {CommitStatus} from '../types.ts';
 
 const {appSubUrl, assetUrlPrefix, pageData} = window.config;
 
-// make sure this matches templates/repo/commit_status.tmpl
-const commitStatus = {
-  pending: {name: 'octicon-dot-fill', color: 'yellow'},
-  success: {name: 'octicon-check', color: 'green'},
-  error: {name: 'gitea-exclamation', color: 'red'},
-  failure: {name: 'octicon-x', color: 'red'},
-  warning: {name: 'gitea-exclamation', color: 'yellow'},
-};
-
 const sfc = {
   components: {SvgIcon},
   data() {
@@ -281,18 +274,18 @@ const sfc = {
       return 'octicon-repo';
     },
 
-    statusIcon(status) {
+    statusIcon(status: CommitStatus) {
       return commitStatus[status].name;
     },
 
-    statusColor(status) {
+    statusColor(status: CommitStatus) {
       return commitStatus[status].color;
     },
 
     reposFilterKeyControl(e) {
       switch (e.key) {
         case 'Enter':
-          document.querySelector('.repo-owner-name-list li.active a')?.click();
+          document.querySelector<HTMLAnchorElement>('.repo-owner-name-list li.active a')?.click();
           break;
         case 'ArrowUp':
           if (this.activeIndex > 0) {

web_src/js/components/DiffCommitSelector.vue

@@ -14,7 +14,7 @@ export default {
       issueLink: el.getAttribute('data-issuelink'),
       locale: {
         filter_changes_by_commit: el.getAttribute('data-filter_changes_by_commit'),
-      },
+      } as Record<string, string>,
       commits: [],
       hoverActivated: false,
       lastReviewCommitSha: null,
@@ -41,16 +41,16 @@ export default {
     this.$el.removeEventListener('keyup', this.onKeyUp);
   },
   methods: {
-    onBodyClick(event) {
+    onBodyClick(event: MouseEvent) {
       // close this menu on click outside of this element when the dropdown is currently visible opened
       if (this.$el.contains(event.target)) return;
       if (this.menuVisible) {
         this.toggleMenu();
       }
     },
-    onKeyDown(event) {
+    onKeyDown(event: KeyboardEvent) {
       if (!this.menuVisible) return;
-      const item = document.activeElement;
+      const item = document.activeElement as HTMLElement;
       if (!this.$el.contains(item)) return;
       switch (event.key) {
         case 'ArrowDown': // select next element
@@ -73,7 +73,7 @@ export default {
         if (commitIdx) this.highlight(this.commits[commitIdx]);
       }
     },
-    onKeyUp(event) {
+    onKeyUp(event: KeyboardEvent) {
       if (!this.menuVisible) return;
       const item = document.activeElement;
       if (!this.$el.contains(item)) return;
@@ -95,7 +95,7 @@ export default {
       }
     },
     /** Focus given element */
-    focusElem(elem, prevElem) {
+    focusElem(elem: HTMLElement, prevElem: HTMLElement) {
       if (elem) {
         elem.tabIndex = 0;
         if (prevElem) prevElem.tabIndex = -1;
@@ -149,7 +149,7 @@ export default {
       window.location.assign(`${this.issueLink}/files/${this.lastReviewCommitSha}..${this.commits.at(-1).id}${this.queryParams}`);
     },
     /** Clicking on a single commit opens this specific commit */
-    commitClicked(commitId, newWindow = false) {
+    commitClicked(commitId: string, newWindow = false) {
       const url = `${this.issueLink}/commits/${commitId}${this.queryParams}`;
       if (newWindow) {
         window.open(url);

web_src/js/components/RepoActionView.vue

@@ -6,6 +6,7 @@ import {toggleElem} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
 import {renderAnsi} from '../render/ansi.ts';
 import {GET, POST, DELETE} from '../modules/fetch.ts';
+import type {ActionsStepLogLine, ActionsStatus} from '../types.ts';
 
 const sfc = {
   name: 'RepoActionView',
@@ -113,12 +114,12 @@ const sfc = {
 
   methods: {
     // get the active container element, either the `job-step-logs` or the `job-log-list` in the `job-log-group`
-    getLogsContainer(idx) {
+    getLogsContainer(idx: number) {
       const el = this.$refs.logs[idx];
       return el._stepLogsActiveContainer ?? el;
     },
     // begin a log group
-    beginLogGroup(idx) {
+    beginLogGroup(idx: number) {
       const el = this.$refs.logs[idx];
 
       const elJobLogGroup = document.createElement('div');
@@ -135,13 +136,13 @@ const sfc = {
       el._stepLogsActiveContainer = elJobLogList;
     },
     // end a log group
-    endLogGroup(idx) {
+    endLogGroup(idx: number) {
       const el = this.$refs.logs[idx];
       el._stepLogsActiveContainer = null;
     },
 
     // show/hide the step logs for a step
-    toggleStepLogs(idx) {
+    toggleStepLogs(idx: number) {
       this.currentJobStepsStates[idx].expanded = !this.currentJobStepsStates[idx].expanded;
       if (this.currentJobStepsStates[idx].expanded) {
         this.loadJob(); // try to load the data immediately instead of waiting for next timer interval
@@ -156,29 +157,29 @@ const sfc = {
       POST(`${this.run.link}/approve`);
     },
 
-    createLogLine(line, startTime, stepIndex) {
+    createLogLine(line: ActionsStepLogLine, startTime: number, stepIndex: number) {
       const div = document.createElement('div');
       div.classList.add('job-log-line');
       div.setAttribute('id', `jobstep-${stepIndex}-${line.index}`);
       div._jobLogTime = line.timestamp;
 
       const lineNumber = document.createElement('a');
       lineNumber.classList.add('line-num', 'muted');
-      lineNumber.textContent = line.index;
+      lineNumber.textContent = String(line.index);
       lineNumber.setAttribute('href', `#jobstep-${stepIndex}-${line.index}`);
       div.append(lineNumber);
 
       // for "Show timestamps"
       const logTimeStamp = document.createElement('span');
       logTimeStamp.className = 'log-time-stamp';
-      const date = new Date(parseFloat(line.timestamp * 1000));
+      const date = new Date(line.timestamp * 1000);
       const timeStamp = formatDatetime(date);
       logTimeStamp.textContent = timeStamp;
       toggleElem(logTimeStamp, this.timeVisible['log-time-stamp']);
       // for "Show seconds"
       const logTimeSeconds = document.createElement('span');
       logTimeSeconds.className = 'log-time-seconds';
-      const seconds = Math.floor(parseFloat(line.timestamp) - parseFloat(startTime));
+      const seconds = Math.floor(line.timestamp - startTime);
       logTimeSeconds.textContent = `${seconds}s`;
       toggleElem(logTimeSeconds, this.timeVisible['log-time-seconds']);
 
@@ -192,7 +193,7 @@ const sfc = {
       return div;
     },
 
-    appendLogs(stepIndex, logLines, startTime) {
+    appendLogs(stepIndex: number, logLines: Array<ActionsStepLogLine>, startTime: number) {
       for (const line of logLines) {
         // TODO: group support: ##[group]GroupTitle , ##[endgroup]
         const el = this.getLogsContainer(stepIndex);
@@ -205,7 +206,7 @@ const sfc = {
       return await resp.json();
     },
 
-    async deleteArtifact(name) {
+    async deleteArtifact(name: string) {
       if (!window.confirm(this.locale.confirmDeleteArtifact.replace('%s', name))) return;
       await DELETE(`${this.run.link}/artifacts/${name}`);
       await this.loadJob();
@@ -269,19 +270,19 @@ const sfc = {
       }
     },
 
-    isDone(status) {
+    isDone(status: ActionsStatus) {
       return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
     },
 
-    isExpandable(status) {
+    isExpandable(status: ActionsStatus) {
       return ['success', 'running', 'failure', 'cancelled'].includes(status);
     },
 
     closeDropdown() {
       if (this.menuVisible) this.menuVisible = false;
     },
 
-    toggleTimeDisplay(type) {
+    toggleTimeDisplay(type: string) {
       this.timeVisible[`log-time-${type}`] = !this.timeVisible[`log-time-${type}`];
       for (const el of this.$refs.steps.querySelectorAll(`.log-time-${type}`)) {
         toggleElem(el, this.timeVisible[`log-time-${type}`]);
@@ -332,7 +333,7 @@ export function initRepositoryActionView() {
 
   // TODO: the parent element's full height doesn't work well now,
   // but we can not pollute the global style at the moment, only fix the height problem for pages with this component
-  const parentFullHeight = document.querySelector('body > div.full.height');
+  const parentFullHeight = document.querySelector<HTMLDivElement>('body > div.full.height');
   if (parentFullHeight) parentFullHeight.style.paddingBottom = '0';
 
   const view = createApp(sfc, {

web_src/js/components/RepoCodeFrequency.vue

@@ -8,6 +8,8 @@ import {
   PointElement,
   LineElement,
   Filler,
+  type ChartOptions,
+  type ChartData,
 } from 'chart.js';
 import {GET} from '../modules/fetch.ts';
 import {Line as ChartLine} from 'vue-chartjs';
@@ -16,6 +18,7 @@ import {
   firstStartDateAfterDate,
   fillEmptyStartDaysWithZeroes,
   type DayData,
+  type DayDataObject,
 } from '../utils/time.ts';
 import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
@@ -64,12 +67,12 @@ async function fetchGraphData() {
       }
     } while (response.status === 202);
     if (response.ok) {
-      data.value = await response.json();
-      const weekValues = Object.values(data.value);
+      const dayDataObject: DayDataObject = await response.json();
+      const weekValues = Object.values(dayDataObject);
       const start = weekValues[0].week;
       const end = firstStartDateAfterDate(new Date());
       const startDays = startDaysBetween(start, end);
-      data.value = fillEmptyStartDaysWithZeroes(startDays, data.value);
+      data.value = fillEmptyStartDaysWithZeroes(startDays, dayDataObject);
       errorText.value = '';
     } else {
       errorText.value = response.statusText;
@@ -81,7 +84,7 @@ async function fetchGraphData() {
   }
 }
 
-function toGraphData(data) {
+function toGraphData(data: Array<Record<string, any>>): ChartData<'line'> {
   return {
     datasets: [
       {
@@ -108,10 +111,9 @@ function toGraphData(data) {
   };
 }
 
-const options = {
+const options: ChartOptions<'line'> = {
   responsive: true,
   maintainAspectRatio: false,
-  animation: true,
   plugins: {
     legend: {
       display: true,

web_src/js/components/RepoContributors.vue

@@ -9,6 +9,9 @@ import {
   PointElement,
   LineElement,
   Filler,
+  type ChartOptions,
+  type ChartData,
+  type Plugin,
 } from 'chart.js';
 import {GET} from '../modules/fetch.ts';
 import zoomPlugin from 'chartjs-plugin-zoom';
@@ -22,8 +25,9 @@ import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import type {Entries} from 'type-fest';
 
-const customEventListener = {
+const customEventListener: Plugin = {
   id: 'customEventListener',
   afterEvent: (chart, args, opts) => {
     // event will be replayed from chart.update when reset zoom,
@@ -65,10 +69,10 @@ export default {
   data: () => ({
     isLoading: false,
     errorText: '',
-    totalStats: {},
-    sortedContributors: {},
+    totalStats: {} as Record<string, any>,
+    sortedContributors: {} as Record<string, any>,
     type: 'commits',
-    contributorsStats: [],
+    contributorsStats: {} as Record<string, any>,
     xAxisStart: null,
     xAxisEnd: null,
     xAxisMin: null,
@@ -99,7 +103,7 @@ export default {
     async fetchGraphData() {
       this.isLoading = true;
       try {
-        let response;
+        let response: Response;
         do {
           response = await GET(`${this.repoLink}/activity/contributors/data`);
           if (response.status === 202) {
@@ -112,15 +116,15 @@ export default {
           // below line might be deleted if we are sure go produces map always sorted by keys
           total.weeks = Object.fromEntries(Object.entries(total.weeks).sort());
 
-          const weekValues = Object.values(total.weeks);
+          const weekValues = Object.values(total.weeks) as any;
           this.xAxisStart = weekValues[0].week;
           this.xAxisEnd = firstStartDateAfterDate(new Date());
           const startDays = startDaysBetween(this.xAxisStart, this.xAxisEnd);
           total.weeks = fillEmptyStartDaysWithZeroes(startDays, total.weeks);
           this.xAxisMin = this.xAxisStart;
           this.xAxisMax = this.xAxisEnd;
           this.contributorsStats = {};
-          for (const [email, user] of Object.entries(rest)) {
+          for (const [email, user] of Object.entries(rest) as Entries<Record<string, Record<string, any>>>) {
             user.weeks = fillEmptyStartDaysWithZeroes(startDays, user.weeks);
             this.contributorsStats[email] = user;
           }
@@ -146,7 +150,7 @@ export default {
         user.total_additions = 0;
         user.total_deletions = 0;
         user.max_contribution_type = 0;
-        const filteredWeeks = user.weeks.filter((week) => {
+        const filteredWeeks = user.weeks.filter((week: Record<string, number>) => {
           const oneWeek = 7 * 24 * 60 * 60 * 1000;
           if (week.week >= this.xAxisMin - oneWeek && week.week <= this.xAxisMax + oneWeek) {
             user.total_commits += week.commits;
@@ -195,7 +199,7 @@ export default {
       return (1 - (coefficient % 1)) * 10 ** exp + maxValue;
     },
 
-    toGraphData(data) {
+    toGraphData(data: Array<Record<string, any>>): ChartData<'line'> {
       return {
         datasets: [
           {
@@ -211,9 +215,9 @@ export default {
       };
     },
 
-    updateOtherCharts(event, reset) {
-      const minVal = event.chart.options.scales.x.min;
-      const maxVal = event.chart.options.scales.x.max;
+    updateOtherCharts({chart}: {chart: Chart}, reset?: boolean) {
+      const minVal = chart.options.scales.x.min;
+      const maxVal = chart.options.scales.x.max;
       if (reset) {
         this.xAxisMin = this.xAxisStart;
         this.xAxisMax = this.xAxisEnd;
@@ -225,7 +229,7 @@ export default {
       }
     },
 
-    getOptions(type) {
+    getOptions(type: 'main' | 'contributor'): ChartOptions<'line'> {
       return {
         responsive: true,
         maintainAspectRatio: false,
@@ -238,6 +242,7 @@ export default {
             position: 'top',
             align: 'center',
           },
+          // @ts-expect-error: bug in chartjs types
           customEventListener: {
             chartType: type,
             instance: this,