Problem/Motivation

The API Preview Form become quite complex to use when there are many endpoints.

Proposed resolution

I am going to propose a UI upgrade to use a navigation tree instead of vertical tabs

User interface changes

Vertical Tabs replaced with Navigation tree (resembling Postman, Bruno approaches)

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

marco.pagliarulo created an issue. See original summary.

marco.pagliarulo’s picture

Assigned: marco.pagliarulo » Unassigned
Status: Active » Needs review
marco.pagliarulo’s picture

Assigned: Unassigned » marco.pagliarulo
Status: Needs review » Active
StatusFileSize
new303.56 KB

Instead of showing a list of ordered endpoints, a navigation tree is shown, with the addition of a search input that list all the available endpoints filterable by typing the name. Additionally the Method is shown at the side of the endpoint.
This approach is meant to resemble the navigation provided by API Clients like Postman and Bruno

marco.pagliarulo’s picture

Assigned: marco.pagliarulo » Unassigned
marco.pagliarulo’s picture

Status: Active » Needs review
aronne’s picture

StatusFileSize
new47.02 KB
new91.86 KB
new120.03 KB

Ciao Marco,
thank you for your great work, I've appreciated it a lot. This improvement is something I wanted to deal with since a long time but I've never had the time to work on it. I've used your implementation as a starting point to build something a little more polished and clear and you can find my implementation in the attached patch.

As you can see from the attached images there's a counter showing the number of http config requests available for each command; you can also see when a command exstends another command and if a command is an abstract one (a command without http method).

The hierarchy structure you proposed is very nice and I think it's a great improvement. Thank you again for your contribution.

  • 3773b563 committed on 9.3.x
    feat: #3612388 Improve Preview form to support navigation tree
    
    By:...

  • 162603e1 committed on 10.x
    feat: #3612388 Improve Preview form to support navigation tree
    
    By:...

  • 0c30e743 committed on 11.x
    feat: #3612388 Improve Preview form to support navigation tree
    
    By:...
aronne’s picture

Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.