Redesign VSMCards component

[SjoenH]

• Move the edited time text up.
• Update userDots component to only show 3 users at a time.
• Make the userdots component clickable. ⇾ open AccessBox- component in a scrim. Center on the page.
• Create new Label-component
• Create new Labels-component. Display a maximum of 10 labels at a time. Show them all.
• show the whole title for a card. No truncation. Wrap down to new-line.

These changes should cover #216. So remember to close that one after this is done.

[martabenthem]

https://www.figma.com/file/IkHwmIQrsT0iR34f5R5UnZ/VSM?node-id=2816%3A107643

[knudsvik]

As of today, the titles on the cards are truncated without any visual indications of it being truncated. There should be a visual indication, e.g. ... and possibility to see the full title when hovering

[SjoenH]

@knudsvik 👋
@Linedueo suggests that we show the whole title for a card. No truncation. Wrap down to new-line.

[SjoenH]

Change title to User access.

[SjoenH]

If this works in Prod environment today, (without displaying labels since that is waiting on #159 ) then we may get this into testing today.

[martabenthem]

@ntorsen This feature is now deployed to TEST 😄

[ntorsen]

This has been tested in Test env.

Findings: When renaming the process with as many as 300 characters, the name "sticks" to the tile.
However, if you put in a very long word, the name of the process will go out of the tile. See example below:

Works good otherwise- only shows three user in tile, able to hover to see all user, can click this section and get pop-up of all users and what roles they have, also able to add more users here. 💯
@SjoenH @martabenthem

[SjoenH]

Ping 🔔 @martabenthem
I tested the copy-link button, and it is copying the current URL, which worked when we have the share-box in the same page as the process, but need to be adjusted when used other places.
Correct behaviour, copy the link to the process.

So then we have two things to fix:

• Text-wrap
• Copy-share-link

[ntorsen]

I'm guessing that the text-wrap will also fix that users are able to put process as favorite ❤️ ? @SjoenH
Because that is not possible now.

[martabenthem]

@ntorsen you mean in case there is a very long word? If that's what you mean then yeah, the heart will be on the card so it will be possible to fave the process.

[ntorsen]

@martabenthem when adding a long word or a long word in a sentence, it was not possible to put the process as favorite. You can see this from the picture I attached above. However, I see that there has been made some changes now :-)

[SjoenH]

• The heart should probably not be centred with the text, but be aligned top like the other cards.

[SjoenH]

@ntorsen @Linedueo Ready for testing: https://web-vsm-test.radix.equinor.com

[Linedueo]

@SjoenH ser bra ut!

[ntorsen]

@SjoenH working good 👍

• Copy-share-link is working
• Can add users from main page (doesn't have to enter process to add users)
• Three users is showing, when hovering all users will come up as well as clicking on right down side of the tile
• Text is within tile (used many characters)
• Heart when favoriting a process is aligned at the top

[martabenthem]

@askbulle @knudsvik this feature is ready for you to check 👍

[knudsvik]

It looks awesome! The only comment I have is that the following two notations should be the same word? Not directly related to this issue, also a problem with the current prod version. But should ideally be fixed, maybe in this PR? I would prefer they both say "modified".

[martabenthem]

@knudsvik nice catch! I can easily modify it in this PR indeed.

[martabenthem]

@askbulle @knudsvik this feature has now been released.

[SjoenH]

@martabenthem remember to move the cards when the status updates. 😄

[martabenthem]

@SjoenH apparently if you reopen the issue by mistake the card is moved automatically to pending release. Closing the issue back does not move the card back to released.

[SjoenH]

Ah! That makes sense 😅