Upgrade instance and test view to MUI

[ImanMahmoudinasab]

New features:

• Discuss feature 🙏🏻 Help Needed: boldui -> Material-UI #401
• Describe the use-case in details
• Ensure the solution is backwards-compatible
• Test it. Submit screenshots / outputs / tests together with the PR.

[agoldis]

Looks great @ImanMahmoudinasab, thanks again for your amazing work! Here are a few comments from my side:

The following suggestion are not part of this PR though. Please tell me what you think... We can tackle those issues in a follow up PR.

• Getting TS error in sidebar component. Are you seeing the same?

[ImanMahmoudinasab]

Failed tests messages:

monospace?

No they are not monospace, but white-space: pre-wrap.

With white-space: pre-wrap:

Without white-space: pre-wrap:

[ImanMahmoudinasab]

When shrink to md or smaller screen size, test list collapses

the test list will fill all the space available, and the test result will be fell bellow the test lis. This was due to inadequate space for showing both tests list and test result, specially when sidebar is open.

When I decide to make them full-width on <= md screens I hadn't add the collapse button for tests list. What I will do is making the test list full width in smaller screen sizes.

[ImanMahmoudinasab]

In run list, I think there shouldn't be any link inside the paper and clicking everywhere of the card should navigate user to the details of the run. This will make it easy to click on the card without thinking in which spot of card you shouldn't click because it would not go to run detail view.

This was my reason for this design, if you still think it is better to keep them as links, I can change the behaviour.

Should it be a url?

Here I thought most of the time user would know the origin address (at least for me is like this ;) ) so instead of showing a [long] url which will get extra attention is not what is desired by users. If they need to know the origin they can , hover over it or click on it.(we can show it on the tooltip).

Again I can change it if you think we should do that.

[ImanMahmoudinasab]

I changed the breakpoints to full width the test list and test result on small screens:

on md size screen size user can click on collapse button:

result:

[ImanMahmoudinasab]

[ImanMahmoudinasab]

@agoldis Comments applied.