fix(client): avatar url

[andre-code]

PR to resolve the dataset avatar URL issue. GitHub URL is included only if the content_url is a GitHub URL.

Testing

Every dataset in this project should display an image. https://renku-ci-ui-2791.dev.renku.ch/projects/lorenzo.cavazzi.tech/test-dataset-avatars/datasets

Fix #2765

/deploy #persist

[RenkuBot]

You can access the deployment of this PR at https://renku-ci-ui-2791.dev.renku.ch

[leafty]

CODING_GUIDELINES.md

This file should probably be renamed to datasets.utils.ts or similar.

[leafty]

If possible, interfaces should not use the I prefix:

Suggested change

	export interface IDataset {
	export interface Dataset {

[leafty]

The logic is incorrect here, we should not assume that the default branch for a git repository is called master. The project data includes the name of the default branch, e.g.

const defaultBranch = useSelector<RootStateOrAny, string>(
  (state) => state.stateModel.project.metadata.defaultBranch
);

Suggested change

	const urlRoot = cleanGitUrl(gitUrl) + "/-/raw/master";
	const urlRoot = `${cleanGitUrl(gitUrl)}/-/raw/${defaultBranch}`;

[leafty]

[nitpick] It usually is less bug-prone to avoid mutating arguments in function. Code here could return an updated object, e.g.

Suggested change

	dataset.mediaContent = mediaUrl;
	return dataset;
	return {
	...dataset,
	mediaContent: mediaUrl,
	};

[andre-code]

I understand the suggestion to avoid mutating arguments in functions. In this specific context, we intend to mutate the object when fetching datasets in order to add the mediaContent property. While we could refactor this code chain to return a new object, it's not within the scope of this PR. We may consider making such a change when transitioning to the use of Redux Toolkit

[leafty]

I find this logic non-intuitive here. Why do we not consider any relative path inside the repository? Non-relative locations would start with a URL scheme (<scheme>://). Also, we should probably validate external URLs and only allow those starting with https://.

[leafty]

My suggestion is to use the URL class:

const mediaUrl = new URL("https://example.com/image.jpg", "https://gitlab.renkulab.io/namespace/name/-/raw/main/");
mediaUrl.toString() // 'https://example.com/image.jpg'

const mediaUrl = new URL("path/to/image.jpg", "https://gitlab.renkulab.io/namespace/name/-/raw/main/");
mediaUrl.toString() // 'https://gitlab.renkulab.io/namespace/name/-/raw/main/path/to/image.jpg'

const mediaUrl = new URL("s3://example/image.jpg", "https://gitlab.renkulab.io/namespace/name/-/raw/main/");
mediaUrl.toString() // 's3://example/image.jpg'

The URL constructor will handle relative vs absolute locations for you without needing to re-implement it.

[RenkuBot]

Tearing down the temporary RenkuLab deplyoment for this PR.