[#1936] Migrate c-ramp.vue to typescript

[jq1836]

Part of #1936

Proposed commit message

Currently, there is still some JavaScript code which remains unmigrated.
This allows for type unsafe code to be written, potentially resulting in
unintended behavior.

Let's migrate the rest of the JavaScript code to TypeScript code to
facilitate future changes to the code.

Other information

Notable changes made

• Moved mergeCommitSize and deletesContributionRampSize from data to computed
• Added null check to getContributionMessage (more on this)

Potentially dangerous code

Current implementation of getContributionMessage method

// commit of type CommitResult must be provided if tframe === 'commit', only pass null if tframe !== 'commit
getContributionMessage(slice: Commit, commit: CommitResult | null) {
    if (this.tframe === 'commit' && commit !== null) {
      return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;
    }

    let title = this.tframe === 'day'
        ? `[${slice.date}] Daily `
        : `[${slice.date} till ${slice.endDate}] Weekly `;
    title += `contribution: +${slice.insertions} -${slice.deletions} lines`;
    return title;
}

getContributionMessage method presently takes in Commit and CommitResult arguments, however, in the pug portion of c-ramp.vue, the method was dangerously invoked with only the Commit argument. (shown below)

template(v-else)
    a(v-bind:href="getReportLink()", target="_blank")
      .ramp__slice(
        draggable="false",
        v-for="(slice, j) in user.commits",
        v-bind:title="getContributionMessage(slice)",
        v-on:click="openTabZoom(user, slice, $event)",
        v-bind:class="`ramp__slice--color${getSliceColor(slice)}`",
        v-bind:style="{\
          zIndex: user.commits.length - j,\
          borderLeftWidth: `${getWidth(slice)}em`,\
          right: `${(getSlicePos(tframe === 'day' ? slice.date : slice.endDate) * 100)}%` \
          }"
)

Currently, this results in the desired behavior, as CommitResult is not used when this.tframe !== 'commit', which is the case where the dangerous invocation of the method is used. To minimise the risk of unintentional misuse of the method, I have split the method into two, getContributionMessage and getContributionMessageByCommit, with the former taking in only a slice: Commit and the latter taking in both slice: Commit and commit: CommitResult.

[damithc]

@reposense/active-reviewers-1 this PR is ready for review

[vvidday]

Thanks for your work on this @jq1836, have some minor comments below

[jq1836]

I believe that the failing Cypress tests are caused by the changes made in PR #2034, possibly interacting with the updated Cypress version. Will investigate further and create a new PR to fix the tests.

[jq1836]

@vvidday Change has been reverted, PR is ready for review. Will put out the PR with the fix once this PR has been merged. Also, will an issue describing the bugs be necessary or will just the PR suffice?

[vvidday]

LGTM!

[vvidday]

@vvidday Change has been reverted, PR is ready for review. Will put out the PR with the fix once this PR has been merged. Also, will an issue describing the bugs be necessary or will just the PR suffice?

Would be good to make an issue so it's clearer what's being fixed. Just a short description of the current bugs will do!

[ckcherry23]

LGTM!

[github-actions]

The following links are for previewing this pull request:

• Dashboard Preview: https://dashboard-2037-pr-reposense-reposense.surge.sh
• Docs Preview: https://docs-2037-pr-reposense-reposense.surge.sh