feat: enhance browser examples, added tab menu and auto consume and improvise ui

[manudev0004]

Fixed the redirect issue, Added tab menu for example TD, dropdown to choose from examples. Auto consume feature and Enhanced UI slightly

[danielpeintner]

The changes look good to me. I noticed one regression that I use to test locally quite often, which is the following. I added the url directly in the URL. For example

index.html?url=http://localhost:8080/counter

which loaded/pre-filled the input field. Maybe we can change this back.

Sidenotes to others. Shall we remove the dedicated files counter.html/js in the future? The differences are minimal... e.g.. counter.html Shows directly the property values, but that's mostly it...

[relu91]

I would change a bunch of stuff (sorry, it might be a little bit overwhelming).

The dropdown menù is redundant we have already tabs for that I'd just use a simple input text box. Second I'd start with the TestThing as first tab selected and custom as last. We don't have to forget that this is an example and we want to show something as soon as possible reducing initial friction to zero.

This layout is very unintuitive... it even feels broken. We should find something better without complicating too much. In particular, I'm expecting the input of action close to the action that I've selected.

I don't remember but I belive in the past it was possible to write to properties too.. now we don't.

In general, we need either some explainer text about how to use the example or a more intuitive UI.

[danielpeintner]

This layout is very unintuitive... it even feels broken. We should find something better without complicating too much. In particular, I'm expecting the input of action close to the action that I've selected.

I don't remember but I belive in the past it was possible to write to properties too.. now we don't.

In general, we need either some explainer text about how to use the example or a more intuitive UI.

@relu91 I agree with your statements, but it feels like these changes could be done in a follow-up PR/issue?

[relu91]

I would at least fix the layout, then yes, we can improve it in a follow-up PR.

[manudev0004]

Thanks for the detailed feedback @danielpeintner @relu91 !

I will restore the ?url= query param support to pre-fill the input field.
I will remove the dropdown (it seemed redundant to me too, but it was in the task, so I added it). Further, we will move Custom URL to last and Testing to first.
I will improve the action layout so that input and buttons are placed side by side. And try to fix ui better without complicating it.
Then I will add a short explainer for better usability.

I'll push an updated version with these changes soon.

One more thing what is online link of the counter ? as this is not working - 'http://plugfest.thingweb.io:8083/counter'

[danielpeintner]

One more thing what is online link of the counter ? as this is not working - 'http://plugfest.thingweb.io:8083/counter'

We recently moved the server with the online things, and the counter example is not yet back.

[egekorkan]

We talked in the committer meeting. @manudev0004 it would be good to fix the tabs:

• Removing duplication (no drop-down needed)
• Custom should be the last tab
• The description below each tab can be simply Consumed TD at {URL}, and then we can use the description field of the TD to fill the field. If there is an error with fetching, the error should be displayed here (like in Counter).

The rest of the layout issues can be fixed in another PR :)

[danielpeintner]

I checked the update and I think we are close.

I noticed some more things.

1.) Error clearAllInteractions

In the case of the counter, which fails at the moment, I also get some errors that we shouldn't see like

clearAllInteractions is not defined

The same happen if I try to load an invalid URL in custom tab.

2.) Hitting "Enter" on custom tab textfield after inserting URL could call "Consume"

Apart from the above, I think we are fine now and can tackle the other issues. I created #1389 for that purpose.

[relu91]

We are almost there. Currently, when the fetch fails, the error message is displayed in the TD description. I think this is counterintuitive. Please reintroduce the error banner and hide the TD Description field if the fetch fails.

[relu91]

Remove this leftover.

[danielpeintner]

FYI: @relu91 refers to the console log only...

[danielpeintner]

Besides the comments from @relu91 it looks good to me.

[manudev0004]

error is now shown in the banner and when there is an error, TD Description will hide. Made code cleaner by removing some unnecessary lines.

[relu91]

good to go!

[relu91]

@danielpeintner, please explicitly approve.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 76.15%. Comparing base (b948e53) to head (51d5c1c).
Report is 6 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1387      +/-   ##
==========================================
- Coverage   77.06%   76.15%   -0.91%     
==========================================
  Files          79       79              
  Lines       15290    15290              
  Branches     1442     1421      -21     
==========================================
- Hits        11783    11644     -139     
- Misses       3483     3624     +141     
+ Partials       24       22       -2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[danielpeintner]

LGTM 👍

[danielpeintner]

A nice follow-up work that come out of this PR is #1389
@manudev0004