encode · carltongibson · Aug 18, 2017 · Aug 15, 2017 · Aug 17, 2017 · Aug 17, 2017
diff --git a/rest_framework/static/rest_framework/docs/js/api.js b/rest_framework/static/rest_framework/docs/js/api.js
@@ -2,6 +2,14 @@ var responseDisplay = 'data'
 var coreapi = window.coreapi
 var schema = window.schema
 
+function normalizeKeys (arr) {
+  var _normarr = [];
+  for (var i = 0; i < arr.length; i++) {
+    _normarr = _normarr.concat(arr[i].split(' > '));
+  }
+  return _normarr;
+}
+
 function normalizeHTTPHeader (str) {
   // Capitalize HTTP headers for display.
   return (str.charAt(0).toUpperCase() + str.substring(1))
@@ -94,7 +102,7 @@ $(function () {
     var $requestAwaiting = $form.find('.request-awaiting')
     var $responseRaw = $form.find('.response-raw')
     var $responseData = $form.find('.response-data')
-    var key = $form.data('key')
+    var key = normalizeKeys($form.data('key'))
     var params = {}
     var entries = formEntries($form.get()[0])
 
@@ -212,7 +220,6 @@ $(function () {
     }
 
     var client = new coreapi.Client(options)
-
     client.action(schema, key, params).then(function (data) {
       var response = JSON.stringify(data, null, 2)
       $requestAwaiting.addClass('hide')

diff --git a/rest_framework/templates/rest_framework/docs/document.html b/rest_framework/templates/rest_framework/docs/document.html
@@ -20,7 +20,7 @@ <h2 id="{{ section_key }}" class="coredocs-section-title">{{ section_key }} <a h
 </a></h2>
 {% endif %}
 
-    {% for link_key, link in section.links|items %}
+    {% for link_key, link in section|schema_links|items %}
         {% include "rest_framework/docs/link.html" %}
     {% endfor %}
 {% endfor %}

diff --git a/rest_framework/templates/rest_framework/docs/interact.html b/rest_framework/templates/rest_framework/docs/interact.html
@@ -1,7 +1,7 @@
 {% load rest_framework %}
 
 <!-- Modal -->
-<div class="modal fade api-modal" id="{{ section_key }}_{{ link_key }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
+<div class="modal fade api-modal" id="{{ section_key }}_{{ link_key|slugify }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
 <div class="modal-dialog modal-lg" role="document">
   <div class="modal-content">
     <div class="modal-header">

diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
@@ -6,11 +6,11 @@
         class="btn btn-sm btn-success"
         style="float: right; margin-top: 20px"
         data-toggle="modal"
-        data-target="#{{ section_key }}_{{ link_key }}_modal">
+        data-target="#{{ section_key }}_{{ link_key|slugify }}_modal">
         <i class="fa fa-exchange"></i> Interact
     </button>
 
-    <h3 id="{{ section_key }}-{{ link_key }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key }}"><i class="fa fa-link" aria-hidden="true"></i>
+    <h3 id="{{ section_key }}-{{ link_key|slugify }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key|slugify }}"><i class="fa fa-link" aria-hidden="true"></i>
 </a></h3>
 
     <div class="meta">

diff --git a/rest_framework/templates/rest_framework/docs/sidebar.html b/rest_framework/templates/rest_framework/docs/sidebar.html
@@ -10,8 +10,8 @@ <h3 class="brand"><a href="#">{{ document.title }}</a></h3>
             <li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
                 <a><i class="fa fa-dot-circle-o fa-lg"></i> {% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %} <span class="arrow"></span></a>
                 <ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ section_key }}-dropdown">
-                {% for link_key, link in section.links|items %}
-                    <li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
+                {% for link_key, link in section|schema_links|items %}
+                    <li><a href="#{{ section_key }}-{{ link_key|slugify }}">{{ link.title|default:link_key }}</a></li>
                 {% endfor %}
                 </ul>
             </li>

diff --git a/rest_framework/templatetags/rest_framework.py b/rest_framework/templatetags/rest_framework.py
@@ -244,6 +244,29 @@ def items(value):
     return value.items()
 
 
+@register.filter
+def schema_links(section, sec_key=None):
+    """
+    Recursively find every link in a schema, even nested.
+    """
+    NESTED_FORMAT = '%s > %s'  # this format is used in docs/js/api.js:normalizeKeys
+    links = section.links
+    if section.data:
+        data = section.data.items()
+        for sub_section_key, sub_section in data:
+            new_links = schema_links(sub_section, sec_key=sub_section_key)
+            links.update(new_links)
+
+    if sec_key is not None:
+        new_links = OrderedDict()
+        for link_key, link in links.items():
+            new_key = NESTED_FORMAT % (sec_key, link_key)
+            new_links.update({new_key: link})
+        return new_links
+
+    return links
+
+
 @register.filter
 def add_nested_class(value):
     if isinstance(value, dict):