Docs Interact (#4904)

* Toggle data & raw

* Normalize HTTP Headers

* Include responseText in responseCallback

* Sidebar Language Switcher

* Minor changes

rest_framework/static/rest_framework/docs/css/base.css

@@ -3,6 +3,11 @@
   padding-right: 30px;
 }
 
+.btn:focus,
+.btn:focus:active {
+  outline: none;
+}
+
 .sidebar {
   overflow: auto;
   font-family: verdana;
@@ -163,46 +168,19 @@ body {
 
 /* @group Language Switcher */
 
-.sidebar .language-switcher {
-    text-align: center;
-    margin-top: 20px;
-    margin-bottom: 20px;
-
+.sidebar .menu-list.menu-list-bottom {
+    margin-bottom: 0;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
+    border-top: 1px solid #23282e;
 }
 
-.sidebar .language-switcher h6 {
-    margin-bottom: 15px;
-}
-
-.sidebar .language-switcher .btn {
-    padding: 3px 7px;
-}
-
-.sidebar .language-switcher .dropdown-menu {
-  margin-bottom: 5px;
-  border: 0;
-  border-radius: 0;
-  min-width: 130px;
-}
-
-.sidebar .language-switcher .dropdown-menu > li > a {
-  padding: 3px 10px;
-}
-
-.sidebar .language-switcher .dropdown-menu > .active > a,
-.sidebar .language-switcher .dropdown-menu > .active > a:hover,
-.sidebar .language-switcher .dropdown-menu > .active > a:focus {
-  background-color: #17759c;
-}
-
-.sidebar .language-switcher .dropdown-menu > li > a,
-.sidebar .language-switcher .dropdown-menu > li > a:hover,
-.sidebar .language-switcher .dropdown-menu > li > a:focus {
-  background-color: #23282e;
+.sidebar .menu-list-bottom li span {
+  float: right;
+  margin-right: 20px;
+  color: #d19b3d;
 }
 
 /* @end Language Switcher */
@@ -258,24 +236,10 @@ body {
     text-align: center;
   }
 
-  .sidebar .language-switcher {
-    text-align: center;
-    margin-top: 10px;
-    margin-bottom: 10px;
+  .sidebar .menu-list.menu-list-bottom {
     position: static;
   }
 
-  .sidebar .language-switcher .btn .caret {
-    margin-left: 0;
-    border-bottom: 0;
-    border-top: 4px dashed;
-  }
-
-  .sidebar .language-switcher .dropup .dropdown-menu {
-    top: 30px;
-    bottom: inherit;
-  }
-
   .sidebar .brand {
     margin-top: 0;
     margin-bottom: 0;
@@ -308,10 +272,9 @@ body {
   color: #93c54b;
 }
 
-.api-modal .modal-body .request-info {
-  background-color: #f8f5f0;
+.api-modal .modal-body .request-awaiting {
   text-align: center;
-  padding: 5px 10px;
+  padding: 35px 10px;
 }
 
 .api-modal .modal-body .meta {
@@ -329,3 +292,13 @@ body {
     padding: .2em .6em .3em;
     font-size: 14px;
 }
+
+.api-modal .modal-content .toggle-view {
+  text-align: right;
+  float: right;
+} 
+
+.api-modal .modal-content .response .well {
+  margin: 0;
+  max-height: 550px;
+}

rest_framework/templates/rest_framework/docs/index.html

@@ -41,6 +41,14 @@
         <script src="{% static 'rest_framework/docs/js/jquery-1.10.2.min.js' %}"></script>
         <script src="{% static 'rest_framework/docs/js/bootstrap.min.js' %}"></script>
         <script>
+            function normalizeHTTPHeader(str) {
+                return (str.charAt(0).toUpperCase() + str.substring(1))
+                    .replace( /-(.)/g, function($1) { return $1.toUpperCase(); })
+                    .replace( /(Www)/g, function($1) { return 'WWW'; })
+                    .replace( /(Xss)/g, function($1) { return 'XSS'; })
+                    .replace( /(Md5)/g, function($1) { return 'MD5'; })
+            }
+
             function getCookie(name) {
                 var cookieValue = null;
                 if (document.cookie && document.cookie !== '') {
@@ -64,16 +72,16 @@
             const doc = codec.decode(schema)
 
             // Language Control
-            $('.language-control li a').click(function (event) {
+            $('#language-control li').click(function (event) {
                 event.preventDefault();
-                var button = $(this)
-                var language = button.data("language")
+                const languageMenuItem = $(this).find('a');
+                var language = languageMenuItem.data("language")
 
-                var languageControls = $('.language-control li a')
-                languageControls.not('[data-language="' + language +'"]').parent().removeClass("active")
-                languageControls.filter('[data-language="' + language +'"]').parent().addClass("active")
+                var languageControls = $(this).closest('ul').find('li');
+                languageControls.find('a').not('[data-language="' + language +'"]').parent().removeClass("active")
+                languageControls.find('a').filter('[data-language="' + language +'"]').parent().addClass("active")
 
-                button.closest(".btn-group").find('.dropdown-toggle span').first().text(language)
+                $('#selected-language').text(language)
 
                 var codeBlocks = $('pre.highlight')
                 codeBlocks.not('[data-language="' + language +'"]').addClass("hide")
@@ -122,18 +130,21 @@
                 })
 
                 function requestCallback(request) {
-                    var requestText = request.options.method + ' ' + request.url;
-
-                    var parser = document.createElement('a');
+                    let parser = document.createElement('a');
                     parser.href = request.url;
+                    const method = request.options.method
+                    const path = parser.pathname + parser.hash + parser.search
 
-                    form.find(".request-response").text(requestText)
-                    form.find(".request-response").removeClass("hide")
-                    form.find(".request-method").text(request.options.method)
-                    form.find(".request-url").text(parser.pathname + parser.hash + parser.search)
+                    // Filling the main response meta
+                    form.closest(".modal-content").find(".toggle-view").removeClass("hide")
+                    form.find(".request-method").text(method)
+                    form.find(".request-url").text(path)
+
+                    // Filling the raw panel
+                    // form.find(".response-raw-request").text(method + ' ' + path + '\n\n')
                 }
 
-                function responseCallback(response) {
+                function responseCallback(response, responseText) {
                     form.find(".response-status-code").removeClass("label-success").removeClass("label-danger")
                     if (response.ok) {
                         form.find(".response-status-code").addClass("label-success")
@@ -144,27 +155,47 @@
                     form.find(".response-status-code").text(response.status)
                     
                     form.find(".meta").removeClass("hide")
+                    
+                    // Filling the raw panel
+                    var panelText = 'HTTP/1.1 ' + response.status + ' ' + response.statusText + '\n';
+
+                    response.headers.forEach((header, key) => {
+                        panelText += normalizeHTTPHeader(key) + ': ' + header + '\n'
+                    })
+
+                    if (responseText) {
+                        panelText += '\n' + responseText
+                    }
+
+                    form.find(".response-raw-response").text(panelText)
                 }
 
                 const client = new coreapi.Client({csrf: csrf, requestCallback: requestCallback, responseCallback: responseCallback})
 
                 client.action(doc, key, params).then(function (data) {
                     var response = JSON.stringify(data, null, 2);
-                    form.find(".request-info").addClass("hide")
+                    form.find(".request-awaiting").addClass("hide")
                     form.find(".response-data").text(response)
                     form.find(".response-data").removeClass("hide")
-                    form.find(".response-error").addClass("hide")
                 }).catch(function (error) {
                     var response = JSON.stringify(error.content, null, 2);
-                    form.find(".request-info").addClass("hide")
-                    form.find(".response-error").text(error.message)
+                    form.find(".request-awaiting").addClass("hide")
                     form.find(".response-data").text(response)
-                    form.find(".response-error").removeClass("hide")
                     form.find(".response-data").removeClass("hide")
-
-                    /*form.find(".response-data").addClass("hide")*/
                 })
             });
+
+            $('.toggle-view button').click(function() {
+                var selectedView = $(this).data("display-toggle");
+                $(this).removeClass("btn-default").addClass('btn-info').siblings().removeClass('btn-info');
+                if (selectedView === 'raw') {
+                    $(this).closest(".modal-content").find(".response-raw").removeClass("hide");
+                    $(this).closest(".modal-content").find(".response-data").addClass("hide");
+                } else {
+                    $(this).closest(".modal-content").find(".response-data").removeClass("hide");
+                    $(this).closest(".modal-content").find(".response-raw").addClass("hide");
+                }
+            });
         </script>
     </body>
 </html>

rest_framework/templates/rest_framework/docs/interact.html

@@ -5,8 +5,15 @@
 <div class="modal-dialog modal-lg" role="document">
   <div class="modal-content">
     <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+      <div class="toggle-view hide">
+        <div class="btn-group" role="group">
+          <button type="button" data-display-toggle="data" class="btn btn-sm btn-info">Data</button>
+          <button type="button" data-display-toggle="raw" class="btn btn-sm">Raw</button>
+        </div>
+      </div>
+
       <h3 class="modal-title"><i class="fa fa-exchange"></i> {{ link.title|default:link_key }}</h3>
+
     </div>
 
     <form data-key='["{{ section_key }}", "{{ link_key }}"]'>
@@ -16,8 +23,10 @@
           {% form_for_link link %}
         </div>
 
+        <hr class="hidden-lg hidden-xl" />
+
         <div class="col-lg-6 response" id="response">
-          <div class="request-info">Awaiting request</div>
+          <div class="request-awaiting">Awaiting request</div>
 
           <div class="meta hide">
             <span class="label label-primary request-method"></span>
@@ -25,9 +34,8 @@
             <label class="label label-lg response-status-code pull-right"></label>
           </div>
 
-          <pre class="request-response hide"></pre>
-
-          <pre class="response-data hide"></pre>
+          <pre class="well response-data hide"></pre>
+          <pre class="well response-raw hide"><div class="response-raw-request"></div><div class="response-raw-response"></div></pre>
         </div>
       </div>
     </div>

rest_framework/templates/rest_framework/docs/sidebar.html

@@ -16,18 +16,19 @@
             {% endfor %}
         </ul>
 
-        <div class="language-switcher">
-            <h6>Choose Language</h6>
-            <div class="btn-group dropup">
-              <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span>shell</span> &nbsp;&nbsp;<span class="caret"></span>
-              </button>
-              <ul class="dropdown-menu language-control">
+        <ul class="menu-list menu-list-bottom">
+            <li>
+                <a><i class="fa fa-user fa-lg"></i> Authentication</a> <span>none</span>
+            </li>
+            <li data-toggle="collapse" data-target="#language-control" class="collapsed">
+                <a><i class="fa fa-code fa-lg"></i> Source Code</a> <span id="selected-language">shell</span>
+            </li>
+            <ul class="sub-menu collapse out" id="language-control">
                 <li class="active"><a href="#" data-language="shell">shell</a></li>
                 <li><a href="#" data-language="javascript">javascript</a></li>
                 <li><a href="#" data-language="python">python</a></li>
-              </ul>
-            </div>
-        </div>
+            </ul>
+        </ul>
+
     </div>
 </div>