Issues sections should link to Git URL of file at given commit with highlighted line(s)

[BioPhoton]

User story

As a user of the CLI I want to have click through experience for all actionable feedback a get from the audit issues.

At the moment the provided issues often show exactly where the error needs to get fixed, but a manual navigation to the line of code is required.

Example:

Severity	Message	Source file	Line(s)
⚠️ warning	Lines 1-18 are not covered in any test case.	examples/plugins/src/index.ts	1-18
⚠️ warning	Line 104 is not covered in any test case.	examples/plugins/src/lighthouse/src/lighthouse.plugin.ts	104

Severity	Message	Source file	Line(s)
🚨 error	1st branch is not taken in any test case.	examples/plugins/src/file-size/src/file-size.plugin.ts	101
🚨 error	1st branch is not taken in any test case.	examples/plugins/src/index.ts	1

Problems to be solved:

• git repo could be hosted in GitLab/GitHub/Azure/Bitbucket...
• each Git provider has their own URL structure
• git remove -v should give us origin
• how to detect provider from self-hosted repos? (common for enterprises)
• if we cannot detect provider, then we shouldn't include the link

Acceptance criteria

• supported hosting provider:
  • GitLab
  • GitHub
• provide config remoteUrl to serve users with self-hosted repos. (common for enterprises)
• if we cannot detect provider, then we shouldn't include the link

Example:

Severity	Message	Source file	Line(s)
⚠️ warning	Lines 1-18 are not covered in any test case.	examples/plugins/src/index.ts	1-18
⚠️ warning	Line 104 is not covered in any test case.	examples/plugins/src/lighthouse/src/lighthouse.plugin.ts	104

Severity	Message	Source file	Line(s)
🚨 error	1st branch is not taken in any test case.	examples/plugins/src/file-size/src/file-size.plugin.ts	101
🚨 error	1st branch is not taken in any test case.	examples/plugins/src/index.ts	1

Implementation details

Get remote from current git: git remote -> 'origin'

Get remote url from current git: git remote get-url origin -> 'git@github.com:code-pushup/cli.git'

function generateGitHubUrl(source: Pick<SourceFileLocation, 'file' | 'position'>, remoteUrl: string, branch: string): string {
  const {file, position} = source;
  const {startLine = 0, endLine = 0} = position ?? {};
  const repoPath = remoteUrl.match(/github\.com[:/](.+)\.git/)?.[1];
  const lines = startLine ? `#L${startLine}${endLine ? `-L${endLine}` : ''}` : '';
  return `https://github.com/${repoPath}/blob/${branch}/${file}${lines}`;
}

function generateGitLabUrl(source: Pick<SourceFileLocation, 'file' | 'position'>, remoteUrl: string, branch: string): string {
  const {file, position} = source;
  const {startLine = 0, endLine = 0} = position ?? {};
  const repoPath = remoteUrl.match(/gitlab\.com[:/](.+)\.git/)?.[1];
  const lines = startLine ? `#L${startLine}${endLine ? `-${endLine}` : ''}` : '';
  return `https://gitlab.com/${repoPath}/-/blob/${branch}/${file}${lines}`;
}

Related Issues:

#149

[vmasek]

@BioPhoton please rework this issue to just link to the local source
example:
src/index.ts

[BioPhoton]

created #745 instead of updating this one

[hanna-skryl]

Could anyone clarify the intended use cases for enriching the Markdown report with Git provider links? When and why would the report be generated and accessed directly on GitHub, GitLab, etc.? In my experience, these reports are usually generated locally and ignored via .gitignore.

[matejchalk]

We already have local file links, which is better than linking to remote file. And we create GitHub links when running in GitHub Actions. This was implemented in #824.

So only thing left is to add support for GitLab CI/CD. We can compose the URL from predefined environment variables.