[#1936] Migrate app.vue to TypeScript

frontend/src/app.vue

@@ -75,34 +75,48 @@
       input(type="file", accept=".zip", v-on:change="updateReportZip")
 </template>
 
-<script>
+<script lang='ts'>
 import JSZip from 'jszip';
 import LoadingOverlay from 'vue-loading-overlay';
 import { mapState } from 'vuex';
+import { defineComponent } from 'vue';
 
 import cResizer from './components/c-resizer.vue';
 import cZoom from './views/c-zoom.vue';
 import cSummary from './views/c-summary.vue';
 import cAuthorship from './views/c-authorship.vue';
+import { Repo } from './types/types';
+import { ErrorMessage } from './types/zod/summary-type';
+import { ZoomInfo, AuthorshipInfo } from './types/vuex.d';
 
 const loadingResourcesMessage = 'Loading resources...';
 
-const app = {
+const app = defineComponent({
   name: 'app',
+  components: {
+    LoadingOverlay,
+    cResizer,
+    cZoom,
+    cSummary,
+    cAuthorship,
+  },
   data() {
     return {
-      repos: {},
-      users: [],
+      repos: {} as { [key: string]: Repo },
+      users: [] as Repo[],
       userUpdated: false,
 
       loadingOverlayOpacity: 1,
 
       tabType: 'empty',
       creationDate: '',
       reportGenerationTime: '',
-      errorMessages: {},
+      errorMessages: {} as { [key: string]: ErrorMessage },
     };
   },
+  computed: {
+    ...mapState(['loadingOverlayCount', 'loadingOverlayMessage', 'isTabActive']),
+  },
   watch: {
     '$store.state.tabZoomInfo': function () {
       if (this.$store.state.tabZoomInfo.isRefreshing) {
@@ -114,12 +128,23 @@ const app = {
       this.activateTab('authorship');
     },
   },
+  created() {
+    try {
+      window.decodeHash();
+    } catch (error) {
+      this.userUpdated = false;
+    }
+    this.updateReportDir();
+  },
   methods: {
     // model functions //
-    updateReportZip(evt) {
+    updateReportZip(evt: Event) {
       this.users = [];
-
-      JSZip.loadAsync(evt.target.files[0])
+      const target = evt.target as HTMLInputElement;
+      if (target.files === null) {
+        return;
+      }
+      JSZip.loadAsync(target.files[0])
         .then((zip) => {
           window.REPORT_ZIP = zip;
         }, () => {
@@ -141,15 +166,16 @@ const app = {
       this.userUpdated = false;
       await this.$store.dispatch('incrementLoadingOverlayCountForceReload', 1);
       try {
+        const summary = await window.api.loadSummary();
+        if (summary === null) {
+          return;
+        }
         const {
           creationDate,
           reportGenerationTime,
           errorMessages,
           names,
-        } = await window.api.loadSummary();
-        if (names === null) {
-          return;
-        }
+        } = summary;
         this.creationDate = creationDate;
         this.reportGenerationTime = reportGenerationTime;
         this.errorMessages = errorMessages;
@@ -168,7 +194,7 @@ const app = {
       }
     },
     getUsers() {
-      const full = [];
+      const full: Repo[] = [];
       Object.keys(this.repos).forEach((repo) => {
         if (this.repos[repo].users) {
           full.push(this.repos[repo]);
@@ -178,9 +204,9 @@ const app = {
     },
 
     // handle opening of sidebar //
-    activateTab(tabName) {
+    activateTab(tabName: string) {
       if (this.$refs.tabWrapper) {
-        this.$refs.tabWrapper.scrollTop = 0;
+        (this.$refs.tabWrapper as HTMLElement).scrollTop = 0;
       }
 
       this.tabType = tabName;
@@ -189,9 +215,9 @@ const app = {
       window.encodeHash();
     },
 
-    renderAuthorShipTabHash(minDate, maxDate) {
+    renderAuthorShipTabHash(minDate: string, maxDate: string) {
       const hash = window.hashParams;
-      const info = {
+      const info: AuthorshipInfo = {
         author: hash.tabAuthor,
         repo: hash.tabRepo,
         isMergeGroup: hash.authorshipIsMergeGroup === 'true',
@@ -211,7 +237,7 @@ const app = {
 
     renderZoomTabHash() {
       const hash = window.hashParams;
-      const zoomInfo = {
+      const zoomInfo: ZoomInfo = {
         isRefreshing: true,
         zAuthor: hash.zA,
         zRepo: hash.zR,
@@ -298,27 +324,7 @@ const app = {
       return REPOS[hashParams.tabRepo].location.location;
     },
   },
-
-  computed: {
-    ...mapState(['loadingOverlayCount', 'loadingOverlayMessage', 'isTabActive']),
-  },
-
-  components: {
-    LoadingOverlay,
-    cResizer,
-    cZoom,
-    cSummary,
-    cAuthorship,
-  },
-  created() {
-    try {
-      window.decodeHash();
-    } catch (error) {
-      this.userUpdated = false;
-    }
-    this.updateReportDir();
-  },
-};
+});
 
 window.app = app;
 

frontend/src/store/store.js → frontend/src/store/store.ts

@@ -1,55 +1,62 @@
 import { createStore } from 'vuex';
+import { AuthorshipFile, CommitResult, DailyCommit } from '../types/types';
+import {
+  AuthorshipInfo,
+  StoreState,
+  SummaryDates,
+  ZoomInfo,
+} from '../types/vuex.d';
 
-export default createStore({
+export default createStore<StoreState>({
   state: {
-    tabAuthorshipInfo: {},
-    tabZoomInfo: {},
-    summaryDates: {},
+    tabAuthorshipInfo: {} as AuthorshipInfo,
+    tabZoomInfo: {} as ZoomInfo,
+    summaryDates: {} as SummaryDates,
     mergedGroups: [],
     fileTypeColors: {},
     loadingOverlayCount: 0,
     loadingOverlayMessage: '',
     isTabActive: true,
-  },
+  } as StoreState,
   mutations: {
-    updateTabZoomInfo(state, info) {
+    updateTabZoomInfo(state: StoreState, info: ZoomInfo) {
       state.tabZoomInfo = info;
     },
-    updateTabAuthorshipInfo(state, info) {
+    updateTabAuthorshipInfo(state: StoreState, info: AuthorshipInfo) {
       state.tabAuthorshipInfo = info;
     },
-    updateSummaryDates(state, info) {
+    updateSummaryDates(state: StoreState, info: SummaryDates) {
       state.summaryDates = info;
     },
-    updateFileTypeColors(state, info) {
+    updateFileTypeColors(state: StoreState, info: { [key: string]: string }) {
       state.fileTypeColors = info;
     },
-    updateMergedGroup(state, info) {
+    updateMergedGroup(state: StoreState, info: string[]) {
       state.mergedGroups = info;
     },
-    incrementLoadingOverlayCount(state, increment) {
+    incrementLoadingOverlayCount(state: StoreState, increment: number) {
       state.loadingOverlayCount += increment;
       if (state.loadingOverlayCount === 0) {
         state.loadingOverlayMessage = 'Loading. Please wait...';
       }
     },
-    updateLoadingOverlayMessage(state, message) {
+    updateLoadingOverlayMessage(state: StoreState, message: string) {
       state.loadingOverlayMessage = message;
     },
-    updateTabState(state, isTabOpen) {
+    updateTabState(state: StoreState, isTabOpen: boolean) {
       state.isTabActive = isTabOpen;
-      window.addHash('tabOpen', isTabOpen);
+      window.addHash('tabOpen', isTabOpen.toString());
       if (!isTabOpen) {
         window.removeHash('tabType');
       }
       window.encodeHash();
     },
-    toggleZoomCommitMessageBody(_, slice) {
+    toggleZoomCommitMessageBody(_, slice: CommitResult) {
       if (slice.isOpen !== undefined) {
         slice.isOpen = !slice.isOpen;
       }
     },
-    setAllZoomCommitMessageBody(_, { isOpen, commits }) {
+    setAllZoomCommitMessageBody(_, { isOpen, commits }: { isOpen: boolean; commits: DailyCommit[] }) {
       commits.forEach((commit) => {
         commit.commitResults.forEach((slice) => {
           if (slice.isOpen !== undefined) {
@@ -58,14 +65,14 @@ export default createStore({
         });
       });
     },
-    updateTabAuthorshipFiles(state, files) {
+    updateTabAuthorshipFiles(state: StoreState, files: AuthorshipFile[]) {
       state.tabAuthorshipInfo.files.splice(0, state.tabAuthorshipInfo.files.length, ...files);
     },
-    toggleAuthorshipFileActiveProperty(_, file) {
+    toggleAuthorshipFileActiveProperty(_, file: AuthorshipFile) {
       file.active = !file.active;
       file.wasCodeLoaded = file.wasCodeLoaded || file.active;
     },
-    setAllAuthorshipFileActiveProperty(_, { isActive, files }) {
+    setAllAuthorshipFileActiveProperty(_, { isActive, files }: { isActive: boolean; files: AuthorshipFile[] }) {
       files.forEach((file) => {
         file.active = isActive;
         file.wasCodeLoaded = file.wasCodeLoaded || file.active;
@@ -75,7 +82,7 @@ export default createStore({
   actions: {
     // Actions are called with dispatch
 
-    async incrementLoadingOverlayCountForceReload({ commit }, increment) {
+    async incrementLoadingOverlayCountForceReload({ commit }, increment: number) {
       commit('incrementLoadingOverlayCount', increment);
       await new Promise(window.requestAnimationFrame);
       await new Promise(window.requestAnimationFrame);

frontend/src/types/types.ts

@@ -11,6 +11,7 @@ export interface CommitResult extends CommitResultRaw {
   repoId: string;
   insertions: number;
   deletions: number;
+  isOpen?: boolean;
 }
 
 // Similar to AuthorDailyContributions, but uses the updated CommitResult with the three new fields
@@ -45,3 +46,23 @@ export interface Repo extends RepoRaw {
   files?: FileResult[];
   users?: User[];
 }
+
+interface AuthorshipFileSegment {
+  authored: boolean;
+  lineNumbers: number[];
+  lines: string[];
+}
+
+export interface AuthorshipFile {
+  active: boolean;
+  blankLineCount: number;
+  charCount: number;
+  fileSize: number | undefined; // not actually in schema - to verify relevancy when migrating c-authorship.vue
+  fileType: string;
+  isBinary: boolean;
+  isIgnored: boolean;
+  lineCount: number;
+  path: string;
+  segments: AuthorshipFileSegment[];
+  wasCodeLoaded: boolean;
+}

frontend/src/types/vuex.d.ts

@@ -0,0 +1,57 @@
+import { Store } from 'vuex';
+import { AuthorshipFile, User } from './types';
+
+interface AuthorshipInfo {
+  author: string;
+  checkedFileTypes?: string[];
+  files: AuthorshipFile[];
+  isMergeGroup: boolean;
+  isRefresh?: boolean;
+  location: string | undefined;
+  maxDate: string;
+  minDate: string;
+  name?: string;
+  repo: string;
+}
+
+interface ZoomInfo {
+  isRefreshing?: boolean;
+  zAuthor: string;
+  zAvgCommitSize: number | string;
+  zFileTypeColors?: { [key: string]: string };
+  zFilterGroup: string;
+  zFilterSearch: string;
+  zFromRamp: boolean;
+  zIsMerged: boolean;
+  zLocation?: string | undefined;
+  zRepo: string;
+  zSince: string;
+  zTimeFrame: string;
+  zUntil: string;
+  zUser?: User;
+}
+
+interface SummaryDates {
+  since: string;
+  until: string;
+}
+
+interface StoreState {
+  tabAuthorshipInfo: AuthorshipInfo;
+  tabZoomInfo: ZoomInfo;
+  summaryDates: SummaryDates;
+  mergedGroups: string[];
+  fileTypeColors: { [key: string]: string };
+  loadingOverlayCount: number;
+  loadingOverlayMessage: string;
+  isTabActive: boolean;
+}
+
+declare module '@vue/runtime-core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface State extends StoreState {
+  }
+  interface ComponentCustomProperties {
+    $store: Store<State>;
+  }
+}

frontend/src/types/window.ts

@@ -68,5 +68,7 @@ declare global {
     isSinceDateProvided: boolean;
     isUntilDateProvided: boolean;
     DOMAIN_URL_MAP: DomainUrlMap;
+    // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+    app: any;
   }
 }

frontend/src/types/zod/authorship-type.ts

@@ -11,6 +11,8 @@ const fileResult = z.object({
   fileType: z.string(),
   lines: z.array(lineSchema),
   authorContributionMap: z.record(z.number()),
+  isBinary: z.boolean().optional(),
+  isIgnored: z.boolean().optional(),
 });
 
 // Contains the zod validation schema for the authorship.json file