feat (toolbar):Debug toolbar

[paulharter]

Checked out toolbar stuff into this new clean branch as many many messy changes of mind.

[kevin-dp]

The toolbar looks good overall, I left some comments.
Seems that we're close to be able to merge this 👍

[kevin-dp]

Also, it seems you had an example usage of the toolbar in web-wa-sqlite example but you removed it?
Would be good to have an example where the toolbar is being used such that users can see the usage.

[paulharter]

@kevin-dp I've pretty done everything as you suggest. A few notes:

I had to add export { MockRegistry } from './mock' to satellite/index.ts to get the import to work without the addition export is the package

I couldn't refactor the tab components as you suggested, I had tried to do this before, its something to do with when react expands out the JSX, it generates react hook errors.

I have moved the whole thing for now - but we can do this later

I haven't added back the toolbar in an example as I want to do this an other step once there is a published toolbar package to refer to properly. But I have checked that this will works ok in the web example. I have also added a non compiled util.ts script to tidy away the code to add the toolbar.

[paulharter]

@kevin-dp I think this might be ready now - I've made to readme changes you suggested

[balegas]

I see there is still activity here. Let's not leave it hanging.

[paulharter]

@kevin-dp I have done all the changes you suggested except the additional tests, and I have tested it manually against 0.0.9 with the web example.

Can we merge this now as I'm not really coding now and don't have time to think about how to set up the extra tests and Valter wanted this in for next week?

[kevin-dp]

Thanks for addressing my comments!
I have two nitpicks that would be nice to fix:

• components/toolbar/Makefile indentation is still off
• clients/typescript/src/satellite/index.ts export is still on the block of imports

You tested the toolbar manually on 0.9 and it seems to work which is great. However, we don't have unit tests for some public methods and that would be a blocker for me as that means we will have to go and manually test the toolbar on every release. These are the untested public methods:

getSatelliteStatus(name: string): ConnectivityState | 'Not found'
resetDB(dbName: string): Promise<void>
queryDB(dbName: string, statement: Statement): Promise<Row[]>

I will let @balegas decide whether we merge without the tests or not.

[balegas]

Hi @paulharter,
It feels like the unit tests suggestion are important. I understand that this will probably not help a lot with browser implementation, but for the sake of completeness let's make those tests.

This PR is dragging for too long. It's very near.

Best,

[paulharter]

@kevin-dp @balegas I've added the extra api tests now

[msfstef]

I've modified the debug toolbar slightly, added a couple more APIs for the connection status (toggle on/off) and an experimental shapes tab for viewing active shapes.

The last one uses a private field from the satellite implementation so before developing further I'll open a PR to expose some shape subscription information from the Satellite client for the debug toolbar to use safely.

I've also done an ugly inlining of CSS into the debug toolbar to make the DX better (now only need to dynamically import and call addToolbar(electric)) - will improve that over time but I had already spent too much time on CSS bunding, postprocessing, and TS errors...

@kevin-dp can you have another look so we can potentially merge this?

[kevin-dp]

Looks good to me!
Left some minor comments.

[kevin-dp]

Indentation is still very weird in this file

[msfstef]

Not sure what you mean? it's tab indented (similar to the generator Makefile)