feat: Toolbox restructure after UX feedback

[tbwiss]

Description

This PR contains the following changes:

• Prompt to introspect type definitions on connection
• Restructuring of the page
  • Type definitions/query selector component moves to the top (forming a second "top bar")
  • Introspect button to be inside type definitions
  • Back to "Prettify" text in the button
  • Beta tag, use a blue label
  • Move the documentation sidebar to also be on the left, toggled by a slider in the Explorer
• Tweak the "Add new Query/Mutation" button in the Explorer
• E2E tests to cover the above-mentioned features/extensions

[changeset-bot]

🦋 Changeset detected

Latest commit: 51e70bf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@neo4j/graphql-toolbox	Minor
@neo4j/graphql	Patch
@neo4j/graphql-ogm	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[neo4j-team-graphql]

Thanks for the UI updates.

The UI has now been torn down - reopening this PR will republish it.

[tbwiss]

@darrellwarde there is still no changeset entry required for the toolbox right?

[darrellwarde]

@darrellwarde there is still no changeset entry required for the toolbox right?

I think we should actually!! Because then we can produce a changelog, trigger off that, and then deploy the Toolbox.

[darrellwarde]

This all looks amazing!! I'm assuming there's no way to move the docs toggle more inline with the "Explorer" heading, and then possible anchor both to the top? I'm assuming the heading is built into the explorer component and isn't editable?

Amazing work getting the "Add new Query/Mutation" button working!! 🏅

[tbwiss]

This all looks amazing!! I'm assuming there's no way to move the docs toggle more inline with the "Explorer" heading, and then possible anchor both to the top? I'm assuming the heading is built into the explorer component and isn't editable?

Amazing work getting the "Add new Query/Mutation" button working!! 🏅

To anchor both to the top would be great yet sadly the Explorer component does not offer this (or a lot of other) flexibility... Exactly, this is all pre-defined and there is no way to edit it. So the only way would be to fix the position of the switch (show Docs) yet then as soon as the Explorer component displays a lot of content (and therefore a scroll bar is required) the fixed position becomes a problem. The solution in the image above is the best alternative I could come up with so far. Happy to hear other suggestions!

[darrellwarde]

This all looks amazing!! I'm assuming there's no way to move the docs toggle more inline with the "Explorer" heading, and then possible anchor both to the top? I'm assuming the heading is built into the explorer component and isn't editable?

Amazing work getting the "Add new Query/Mutation" button working!! 🏅

To anchor both to the top would be great yet sadly the Explorer component does not offer this (or a lot of other) flexibility... Exactly, this is all pre-defined and there is no way to edit it. So the only way would be to fix the position of the switch (show Docs) yet then as soon as the Explorer component displays a lot of content (and therefore a scroll bar is required) the fixed position becomes a problem. The solution in the image above is the best alternative I could come up with so far. Happy to hear other suggestions!

No, that all sounds fair, I think we have it as good as we can get it then!

[darrellwarde]

Looks great!