Re-design thyra plugin manager page

[SlnPons]

Context Following the UX/ UI designs to match them, let's redesign thyra page.

User flow

1. User installs thyra app using installer
2. User sees thyra logo on the icon tray
3. User sees "Home" in the menu
4. User clicks on "Home" and a web browser page opens to: https://my.massa/home/
5. User sees on the home page the "+ plugin" and clicks on it
6. User has a new page open to: https://my.massa/thyra/plugin-manager/

How to

• [ ] Reproduce design here: https://www.figma.com/file/EGOu3XvvTTNMug2tUbfEP3/THYRA?node-id=3%3A357&t=Ekb7cXYzsEyGMSH9-0
• [ ] Display plugin info as designed - please prior to start working on the design, identify potentially missing info such as plugin logo or other info existing in the design.
• [ ] Make sure the user flow is functional end-to-end as described above (especially the urls)
• [ ] On the installation via URL bloc, add a front-end check to avoir user putting wrong link (aka only .zip)

Technical details Give the technical insights so anyone in the team can tackle the tasks - Dev

QA testing Does this task require some QA tests ? If yes, explain how to validate it

[0xMazout]

We defined a rework for the design with @LucasF243

Action Plan :

Mandatory before start :

• [ ] Update Design @LucasF243

Should be in good way at the start :

• [ ] Verify the https:// stuffs @0xMazout https://github.com/massalabs/thyra/issues/498
• [ ] Verify if the issue status related to the crash of a plugin on windows @0xMazout https://github.com/massalabs/thyra/issues/463

don't need at start :

• [x] Update Implementation Design @0xMazout
• [x] Implement the Card Install component @0xMazout
• [x] Install Logos @0xMazout
• [x] Implement Theming Dark & Light @0xMazout
• [x] Implement Background SVG @0xMazout
• [x] Implement "Fake and Real" Plugins processes @0xMazout
• [x] Write Descriptions of Fake Plugins @SlnPons
• [x] Rework on the Data life cycle (Our refresh is too spammy) @0xMazout
• [x] Implement Redirect to Home on Thyra Title @0xMazout
• [ ] End to End Test and Stress test of the App @0xMazout & @SlnPons

Nice to Haves:

• [x] Add some control on the install plugin card @0xMazout
• [x] Install Twin macros (Lib to permit more readibility in the Tailwind Code) | moved to nice to haves | Need to think if it's good or not
• [x] Install Plugin animation

[0xMazout]

@SlnPons Just to clarify the redirect subject at this moment , we don't redirect we open another window. Shall we change to a redirect from the actual page ?

[SlnPons]

@0xMazout nope, you're right let's keep it like this and open a new windows for now. As once you're on the plugin page you cannot come back to thyra, it's better to keep the plugin manager page open :) Updating the description now!

[SlnPons]

Hey @0xMazout, some random questions and infos about your action plan:

• Install Twin macros @0xMazout --> what's Twin exactly? so I learn
• Verify the https:// stuffs @0xMazout --> check https://github.com/massalabs/thyra/issues/498 status. And ping me if it become a blocker to raise the priority on the run team side.
• 'Verify if the issue status related to the crash of a plugin on windows @0xMazout' --> what are you talking about exactly? Maybe I can help to unblock this...
• Implement "Fake and Real" Plugins processes @0xMazout --> As discussed, I need to provide you the description for each plugin. Can I share it on this issue in comment? - please don't hesitate to chase me on this if I forget. And sorry I forgot already, can you specify the max character limit I need to respect please?
• Rework on the Data life cycle @0xMazout --> what is this exactly? so I understand this step

[0xMazout]

@SlnPons I Changed the commentary to be clearer

But will explain here :

• Twin Macro is a lib to produce clearer code and increase readability, it's a lib i have discovered this weekend and it's perfect to create very good collaborative code . Very nice to have. And I suggest to add it in our boilerplate projects creation
• The two issues https://github.com/massalabs/thyra/issues/498 and https://github.com/massalabs/thyra/issues/463 are mandatory for the end of the Re-work. One is related to the https and one is related to the status of plugin comming from API on Windows. The issue related to the crash need an action from you in my memory
• For the fake plugins , i only need the description from you , @LucasF243 is working on the design and will provide me what is missing so when Design is done we can start
• Data life cycle is just verifying we are not spamming thyra and find a good cursor between spammy and slow ui

[SlnPons]

@thomas-senechal about #498, could you prioritise it this week before your time off please? Let me know if not possible :)

@gregLibert about #463, I organised a meeting this afternoon to test and identify a solution to this problem as it seems to not be specific for windows.

[SlnPons]

@0xMazout fyi I added to "On the installation via URL bloc, add a front-end check to avoid user putting wrong link (aka only .zip) " on the to do list. Let me know if it's possible, when testing I saw users adding other link / the zip location on their computer after downloading it and the front-end is changing to infinite loop of "installing" :/

Would be great to prevent this if possible.

[0xMazout]

Yes it should be possible will put it in Nice to haves if we have time to do it i will do it

[0xMazout]

Blockers to match design : No Update flag from API No Version string from API

[0xMazout]

We need this to display the Not Installed part of the design : https://github.com/massalabs/thyra/issues/549

[0xMazout]

@LucasF243 to fit with the new Store we will need a logo to show to users that all of this plugins are not installed . The logo will be the same to all plugins not installed.

If you can work on a version of it it will be great

[SlnPons]

@LucasF243, @0xMazout we need to be more pragmatic that this. We won't create a logo for not-installed plugins knowing that it's not something that we'll keep ..... Just pick an icon with key words: download, install, or add.

@LucasF243 I don't want the dev team to work like this with you, we'll waste our time and make poor product decisions. Please make sure to sync w/ me on such topics.

[SlnPons]

Very nice bloc to install a plugin, I like the behaviour! It's smooth.

Can't passed the QA review:

• "install a new plugin" box should be in not installed: it's common sense. We must pay more attention to details when it comes to FE.
• "Not installed" part: the loader keeps loading. This is not a standard behaviour. We should solve that. Usually, if the list it empty, users see a message "not plugin available" or sth like this (in small text, no need to drag attention on this)
• Elements (logos, plugin name, plugin descriptions,...) aren't aligned. But I guess this ticket https://github.com/massalabs/thyra/issues/569 will solve this.
• The font size of the description is smaller on the plugin page that on the home page. It's the only thing that is different. It makes the UI very weird cc @LucasF243 wdyt?

Otherwise it's becoming to look very great, it's nice to see it <3

[Thykof]

QA ko: #580

[0xMazout]

Very nice bloc to install a plugin, I like the behaviour! It's smooth.

Can't passed the QA review:

• "install a new plugin" box should be in not installed: it's common sense. We must pay more attention to details when it comes to FE.
• "Not installed" part: the loader keeps loading. This is not a standard behaviour. We should solve that. Usually, if the list it empty, users see a message "not plugin available" or sth like this (in small text, no need to drag attention on this)
• Elements (logos, plugin name, plugin descriptions,...) aren't aligned. But I guess this ticket Rework HomePage And Plugin Manager Page card #569 will solve this.
• The font size of the description is smaller on the plugin page that on the home page. It's the only thing that is different. It makes the UI very weird cc @LucasF243 wdyt?

Otherwise it's becoming to look very great, it's nice to see it <3

• The box in install a new plugin looks very weird when you have no plugins to insntalled , it's a decision we have made with @LucasF243 . For us it's make sens to have it in the same grid of the installed . Can be re-discussed , but to be honest it's look weird when it's empty
• For the loader . Yes it can be done in the Rework HomePage And Plugin Manager Page card #569 will add it
• Aligned are solved
• For the font size it's voluntary in the figma Design on the Homepage we use Text 2 And in the Manager page Text 3 As we don't have the same amount of items in the both card maybe it's normal (Design thinking @LucasF243 ?)

[SlnPons]

@0xMazout sorry I keep playing with the page and I just noticed:

• why the page is open in http or https? Could you send me the line of code where this is written please? So I can check with the dev who worked on this
• I'm surprised that we can't see "copier le lien de l'adresse" as an option when you click right on the "open" button. I think it's a standard to see that If complicated, let's just add this in the DoD ;) but fyi

[0xMazout]

@0xMazout sorry I keep playing with the page and I just noticed:

• why the page is open in http or https? Could you send me the line of code where this is written please? So I can check with the dev who worked on this
• I'm surprised that we can't see "copier le lien de l'adresse" as an option when you click right on the "open" button. I think it's a standard to see that If complicated, let's just add this in the DoD ;) but fyi

For the new page opened through plugin manager page The open is not related to the frontend , it's Thyra For the frontend we don't call any protocol (http or https) We just call /thyra/websiteCreator for example

Actually i've never work on this on Thyra side and i'm not the best to find this but if you need it i can search

---

Edit: I re-read the message , If the question is : The plugin manager page is not opened in https as Plugin Manager Page ?

Yes i have tested it , when you doesn't type any protocol you access through http

I don't know who has work on it at 100%, but from my memory it was @thomas-senechal , i'm not sure and sorry if i throw you under the bus .

i'm not sure but we can configure our routing of thyra to provide only https

@SlnPons is this helping ?

[0xMazout]

For The Copy link, this is because our button doesn't contain <a href link'< and the link is built inside a function it can be changed i think

None of our CTA is built like this