Update launcher to use the Design System

[VirajP1002]

What is the context of this PR?

To update the front end of Launcher, we decided to use DS components. However, given the fact that Launcher in written in Go, using the macros wasn't possible so the HTML had to be hardcoded within the templates files and the components were imported using the CDN link.

The changes to launch.html include creating to separate columns in order for the right side of the page to be utilised. The first column includes the options for selecting a schema either by name or using CIR. The second column is the metadata section, it uses the accordion component which dynamically updates the metadata sections so only the relevant metadata appears. For example, if you choose a business schema it shows the business metadata, survey metadata, required metadata and runner metadata sections and if you select a test schema it removes the business metadata section and updates the remaining sections. The accordion also has a save state so if you opened a specific section, opened a survey and went back to launcher (only using the back arrow), it would remain open.

The changes to layout.html includes a CDN link for the main.css file. The changes to static/css/main.css includes an update of the background colour of Launcher and removing any redundant CSS classes as the DS handles this. The changes to launch.js includes updates to support the accordion and to remove any redundant JS.

(Note: The accordion elements are hidden rather than injected in via JS because the DS adds attributes to the accordion elements on page load and the JS would be injected after page load hence the attributes needed won't be present).

How to review

• Make sure to clear your browser cache before reviewing
• Check the changes made to all the CSS/JS/HTML files
• Check the formatting of the files
• Ensure the functionality of Launcher is still the same and everything works as intended
• Check if any redundant CSS/JS/HTML has been missed.

[rmccar]

Noticed these small issues but also theres a tabbing issue where because of the way you are adding details components when you tab through the inputs you are able to focus on the details components which is confusing because they aren't there yet. This is because there is JS from the DS adding tabindex=0 to those elements when they are initialised on page load. Not a big issue and maybe something we can live with or introduce some js to add and remove the tab index when those are added/removed.

The other issue is when using this on smaller screens. There are some issues with the layout. I know this is a dev tool so maybe something we can live with but some of these should be fairly easy to fix especially the buttons at the bottom. Should be able to add a margin-botton to them, remove the margin-left and add a margin-right. Would be nice to fix the schema select which is overflowing too.

[VirajP1002]

Noticed these small issues but also theres a tabbing issue where because of the way you are adding details components when you tab through the inputs you are able to focus on the details components which is confusing because they aren't there yet. This is because there is JS from the DS adding tabindex=0 to those elements when they are initialised on page load. Not a big issue and maybe something we can live with or introduce some js to add and remove the tab index when those are added/removed.

The other issue is when using this on smaller screens. There are some issues with the layout. I know this is a dev tool so maybe something we can live with but some of these should be fairly easy to fix especially the buttons at the bottom. Should be able to add a margin-botton to them, remove the margin-left and add a margin-right. Would be nice to fix the schema select which is overflowing too.

I've seemed to address this issue in both columns, although the size of the required metadata labels are smaller, they don't overflow

[VirajP1002]

Worth double checking, it seems like the Flush Survey Data button in your PR stopped working and it opens a schema instead of flushing now?

Yep, a missing value attribute in the button was impacting the logic used in launch.go for flushing, fixed this now 👍

[Yuyuutsu]

Would it be possible if the Show all button be the same size as the other buttons. More of a personal prefrence. I dont mind if everyone else wants to keep it as it is 👍

[VirajP1002]

Would it be possible if the Show all button be the same size as the other buttons. More of a personal prefrence. I dont mind if everyone else wants to keep it as it is 👍

As discussed the text within the button is determines the size of it, happy to change the text to something like Show Metadata. We can see what the other devs think too 👍

[rmccar]

Theres a bit of extra space added on here when focused on this details component. It only seems to happen on the health or business ones

[VirajP1002]

Theres a bit of extra space added on here when focused on this details component. It only seems to happen on the health or business ones

Nice spot, I've address this now, when I was injecting the title in via the JS, it was previously adding in the title within h2 tags, so I just made the JS insert the string instead which fixed the issue 👍

[rmccar]

Just checked your latest and noticed a pretty minor thing. You have a margin left on the left of these 3 buttons which is pushing them over a bit and arent aligned because of it.

The thing is, If you just remove this it causes this problem:

So what you need to do is if these have a container element add display: flex, flex-wrap: wrap and something like gap: 1rem to it in CSS. Then remove all the margins. This should solve that for you.

Actually scrap that you just need to add the ons-btn-group class to the container

[liamtoozer]

Really nice - great work! It looks loads better than before 😄 Just a few very minor cosmetic things I spotted that might end up being fixed by the other comments

Also, it might be to do with how I'm viewing the page in my browser, but things like UUIDs are being truncated for me, would they need to be expanded to fit larger rendered strings?

In required metadata:

In SDS metadata:

[rmccar]

Really nice - great work! It looks loads better than before 😄 Just a few very minor cosmetic things I spotted that might end up being fixed by the other comments

Also, it might be to do with how I'm viewing the page in my browser, but things like UUIDs are being truncated for me, would they need to be expanded to fit larger rendered strings?

In required metadata:

In SDS metadata:

We have the space to make these a bit wider if we can think of another way of displaying the previous value button. Could try group the buttons with ons-btn-group like my other comment. They should wrap then but it would mean we would have a bigger gap between the inputs when they do.

[VirajP1002]

Really nice - great work! It looks loads better than before 😄 Just a few very minor cosmetic things I spotted that might end up being fixed by the other comments
Also, it might be to do with how I'm viewing the page in my browser, but things like UUIDs are being truncated for me, would they need to be expanded to fit larger rendered strings?
In required metadata:
In SDS metadata:

We have the space to make these a bit wider if we can think of another way of displaying the previous value button. Could try group the buttons with ons-btn-group like my other comment. They should wrap then but it would mean we would have a bigger gap between the inputs when they do.

Updated this to make the input boxes bigger and match the rest of the box sizes, it involved some reshuffling of a few elements but it makes the result much cleaner.

[liamtoozer]

Looks great to me! 👍

[Yuyuutsu]

Looking nice 👍