Swagger-editor: Order of items is completely random

[grosch]

Please re-sort the tags on the right side of the editor so that we can find things easier, and inside the tags it would be nice if you groups thinks like all GET together, all POST together, etc... within a tag.

[shockey]

(This is a UI feature)

@webron I'm seeing two tasks here:

• Sort tags in a predictable way
• Sort operations within a tag in a predictable way

My question: how? Sorting tags alphabetically seems like the go-to, and sorting operations in a tag by method makes sense, but sorting by path then method is appealing as well.

[fehguy]

I believe we've used this process in the past:

• Keep tags in the order defined (if there is an order defined), otherwise use alpha
• Sort operations by path, alpha-ascending, _then_ by HTTP operation "commonality":
  
  
  
  • GET
  
  
  • POST
  
  
  • PUT
  
  
  • DELETE
  
  
  • {others}
  
  

I think that was pretty intuitive in the past.

[grosch]

It's much cleaner if you group by operation first, and then path. Generally you know you want a POST or a GET for example, but might not be entirely sure of the path.

[grosch]

Any ETA on this one?

[webron]

Afraid not. This is low on our priority list for now. We'd be happy to review PRs addressing this issue.

[grosch]

The UI code is huge. I'd have no idea where to even begin to look to figure out how to fix this myself :(

[shockey]

@grosch, no worries, it is a lot of code 😄 Here's some pointers...

The order of tag/operation display comes from https://github.com/swagger-api/swagger-ui/blob/master/src/core/components/operations.jsx#L78. We're just iterating over the taggedObj and operations in the order we get them, which ultimately comes from the mapTagOperations function in swagger-js: https://github.com/swagger-api/swagger-ui/blob/master/src/core/components/operations.jsx#L78.

You could probably sort the taggedObj object and operations array on the fly in the Operations render function that I linked to, and use the sorted versions to spit out the result in the render function.

[grosch]

Once I make changes, how do I build it to test?

Curious, why aren't any of the statements terminated with a ; character? PhpStorm is so unhappy :)

[shockey]

@grosch, the best way to see your changes is by running npm run dev. It'll spin up a local server that automatically rebuilds your latest changes in memory. You can also run npm run build to get fresh files in the dist folder.

The lack of semicolons is just how we do things here - they have little utility in JavaScript source files outside of certain language constructs (loops etc), and affect readability. Most modern JS projects omit them, and we have a linter in our test suite that keeps us from running into gotchas related to omitting them.

For an optimal developer experience, I'd suggest installing a linter for your editor that can read eslint settings. It'll tell you how your code looks based on the style rules we've set.

[graham-saunders]

Are there any updates on this yet?