Use layout engine for `DocService`

[trustin]

As we experienced in #4599 and #5059, our users want more ways to browse and invoke service in DocService. It'd be nice if we start to use a layout engine for organizing the DocService content. There are a few well-known layout engines that we could use for React:

• https://www.npmjs.com/package/rc-dock
• https://www.npmjs.com/package/react-mosaic-component
• https://www.npmjs.com/package/react-grid-layout
• https://www.npmjs.com/package/golden-layout

It looks like react-grid-layout is the most popular choice, but rc-dock's tab support looks very appealing.

[Dogacel]

I am not entirely sure if it is related but currently our doc service is barely browsable because of the long class names used in controllers.

Do you think we should fix this with a layout engine or should we track this issue separately and have a quick fix?

[jrhee17]

Hi, thanks for asking.

Do you think we should fix this with a layout engine or should we track this issue separately and have a quick fix?

I'm guessing the quick fix will probably be as simple as modifying css properties. On the other hand, migrating to using a layout engine may need some extra work.

I think either direction is fine. Given that the next release will be done within next week or the week after that, I think we can squeeze in the simple fix since you mentioned that DocService is unusable at the moment. If you're willing to tackle this issue, that would also be welcome 😄

[Dogacel]

As we experienced in #4599 and #5059, our users want more ways to browse and invoke service in DocService. It'd be nice if we start to use a layout engine for organizing the DocService content. There are a few well-known layout engines that we could use for React:

• https://www.npmjs.com/package/rc-dock
• https://www.npmjs.com/package/react-mosaic-component
• https://www.npmjs.com/package/react-grid-layout
• https://www.npmjs.com/package/golden-layout

It looks like react-grid-layout is the most popular choice, but rc-dock's tab support looks very appealing.

Also I have spend some time with this doing initial investigation. Here are my findings:

• React grid layout is very popular but I couldn't find a use-case in current Doc Service. I am not sure which grid elements user wants to drag / drop. It is also not very flexible, grid items have fixed height. You can take a look at Demo section in their NPM website to see what it is capable of.
• React mosaic component probably makes more sense than the grid layout because it helps user utilize the whole screen space. Similar to what I have said before, I am not sure which pages user might want to close or hide. I.e. parameter/return type? I don't find a significant advantage here either.
• Golden Layout / Rc-Dock both look pretty good. I think the "Tab" feature would be pretty useful for the Doc Service. I.e. users can open each endpoint in a different tab / they can have multiple tabs for the same request etc. I think this will enable us to add more features such as saving sessions, example requests to the browser.

So I think we should go for Golden Layout or Rc-Dock. IMO golden layout looks more professional: https://golden-layout.com/examples