Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Hierarchical Tags #1489

Closed
kael-shipman opened this issue Dec 28, 2020 · 6 comments
Closed

Support Hierarchical Tags #1489

kael-shipman opened this issue Dec 28, 2020 · 6 comments

Comments

@kael-shipman
Copy link

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:

redoc-target

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:

Screenshot_2020-12-28_16-05-49

@SteveNay-vz
Copy link

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

@kael-shipman
Copy link
Author

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
Copy link
Author

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
Copy link

any update on this? really need this.

@cleverly87
Copy link

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> `

image

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

@lornajane
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants