Support Hierarchical Tags

[kael-shipman]

There's growing momentum for a string-based, backward-compatible way of hierarchicalizing tags in OAS documents; see OAI/OpenAPI-Specification#1367 and swagger-api/swagger-ui#5969 for discussion and support for the idea.

I'd love to see an implementation of this in redoc. I propose something like the screenshot below:

Note that we can use the well-established "nested collapsible list" pattern for arbitrary depth under the first item in the hierarchy. It would be great if there were additionally a "collapse/expand all" link for each level.

For reference, the current version of redoc renders this screen like so:

[SteveNay-vz]

Have you tried using x-tagGroups? It's already supported by Redoc and lets you group tags.

[kael-shipman]

Ah! Thank you for the tip! I didn't know about that, and it looks like it'll work great. I remain convinced that hierarchical tags will be a well-used feature going forward and that it's worth supporting them natively, but perhaps it doesn't make sense to do so until the discussion leads to a more centralized convention in the OAS community. For now, the x-tagGroups field will probably work splendidly.

[kael-shipman]

Hey again all,

There's been some progress over on the SwaggerUI version of this feature request (here) and it made me wonder if ReDoc has any kind of plugin infrastructure similar to Swagger's. I just did a cursory look and it appears that there's some very limited functionality, but not nearly enough to produce changes to the way the interface renders.

The x-tagGroups is a good lead, but I see a few problems with it:

1. Tags must still be uniquely named. For example, Users:View and Transactions:View would go into groups Users and Transactions respectively, but would still need a redundant or useless prefix to distinguish them from one another.
2. Hierarchy is limited to just 2 levels.

[rishagit]

any update on this? really need this.

[cleverly87]

This is back to the old story of basically having a Foldable tagGroup. I would have found this extremely useful as the API product I am working is enormous.

Would certainly be looking for a 3-stage foldable menu.

I'm sorry about my primitive coding but I'm still learning - I've attached the kind of thing I'm on about.

`
!DOCTYPE html>
html>
head>
meta name="viewport" content="width=device-width, initial-scale=1">
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
style>
body {
font-family: "Lato", sans-serif;
}

/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}

/* Main content /
.main {
margin-left: 200px; / Same as the width of the sidenav /
font-size: 20px; / Increased text to enable scrolling */
padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>

**div class="sidenav">

button class="dropdown-btn">x-tagGroup
i class="fa fa-caret-down">
/button>
div class="dropdown-container">
button class= "dropdown-btn">Tags
i class="fa fa-caret-down">
/button>
a href="#">Link 1

/div>**

/div>

div class="main">

Sidebar Dropdown

Click on the dropdown button to open the dropdown menu inside the side navigation.

This sidebar is of full height (100%) and always shown.

Some random text..

<script> /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */ var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } </script> `

Sorry I had to remove some less than symbols '<' from the code or it was removing the important bits

[lornajane]

We're not planning to extend tag support beyond the x-tagGroups extension for Redoc open source at this time, so I'm closing the issue.