refactor: simplify avatar and smallNameAndAvatar components

[asbiin]

This PR aims at make the Avatar and SmallNameAndAvatar component take a member, and display the avatar/the name/with the url, depending on the properties of the member object.
It simplifies the behavior on the parent component.

Another goal was to replace the navigateTo method of the Avatar by a real link, with allow the user to right click > open in a new tab.

You fool, don't forget these steps:

• Unit tests
• Tests with Cypress
• Documentation
• Dummy data

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[djaiss]

Overall I like the change.

There are two things I don't like here:

1. The member property: it should be employee, not member. member implies that it's part of something and could be confusing for other developers.
2. I'm not a fan of removing props of this component. Now we have to pass a member prop and hope that it has several properties (name, url and avatar). In the previous version, the API of this component told us what the component would accept. Here we've lost this knowledge and we hope that the developer will pass a model with the right properties, and I don't like this approach that much.

[asbiin]

2\. Now we have to pass a `member` prop and hope that it has several properties (name, url and avatar).

Yes that's the whole plan here: we pass the member, and the avatar component gets available data to create the best render possible. It's working all the time, so I don't really see your point.

[djaiss]

Yes that's the whole plan here: we pass the member, and the avatar component gets available data to create the best render possible. It's working all the time, so I don't really see your point.

Contrary to a regular component like a Vue file (for instance, Index.vue or similar), a component like Avatar is ... a Component, and not a page.

A component like Avatar.vue is a tool. And because it's a tool, it needs a set of props to indicate to developers what it needs to work how it's supposed to work.

If the prop that we require is an object like Employee, it's way too big. The developer will not know how this object is used, and therefore, will not know what it should give the tool to properly function. So every time, it will have to read the Avatar.vue file to understand that it needs a name, an URL and an image - and nothing else.

And if the developer needs more info, he just takes a look at the props in the component.

Moreover, a tool like Avatar.vue should not know that it needs an Employee object. In fact it doesn't.

By indicating what exact props the component needs, I think it's much easier for the dev to know how to use the component.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
4 Code Smells

No Coverage information
0.0% Duplication

[asbiin]

@djaiss I've made changes, what do you think?