Backport PR 1902 - Eliminate compatibility issues in supporting notebook and jupyterlab (#1912)

Co-authored-by: Violet Shreve <[email protected]>

Author: brichet

nbgrader/docs/source/conf.py

@@ -288,6 +288,10 @@
 # If true, do not generate a @detailmenu in the "Top" node's menu.
 #texinfo_no_detailmenu = False
 
+linkcheck_ignore = [
+    # Assume GitHub contributor search links for this repo are always valid
+    r"https://github.com/search\?q=repo%3Ajupyter%2Fnbgrader\+involves%3A.*type=Issues",
+]
 
 # Example configuration for intersphinx: refer to the Python standard library.
 intersphinx_mapping = {'python': ('http://docs.python.org/', None)}

nbgrader/server_extensions/formgrader/base.py

@@ -4,6 +4,7 @@
 
 from tornado import web
 from jupyter_server.base.handlers import JupyterHandler
+from jupyter_server.utils import url_path_join, url_is_absolute
 from ...api import Gradebook
 from ...apps.api import NbGraderAPI
 
@@ -41,7 +42,10 @@ def gradebook(self):
 
     @property
     def mathjax_url(self):
-        return self.settings['mathjax_url']
+        url = self.settings.get("mathjax_url", "")
+        if not url or url_is_absolute(url):
+            return url
+        return url_path_join(self.base_url or "/", url)
 
     @property
     def exporter(self):

nbgrader/server_extensions/formgrader/handlers.py

@@ -145,7 +145,6 @@ def get(self, submission_id):
             'base_url': self.base_url,
             'student': student_id,
             'last_name': submission.student.last_name,
-            'last_name': submission.student.last_name,
             'first_name': submission.student.first_name,
             'notebook_path': self.url_prefix + '/' + relative_path
         }

nbgrader/server_extensions/formgrader/static/js/jupyterlab_utils.js

@@ -96,22 +96,14 @@ var AssignmentUI = Backbone.View.extend({
 
     render: function () {
         this.clear();
-        var this_assignment = this;
+
         // assignment name
         var name = this.model.get("name")
         this.$name.attr("data-order", name);
 
-        // Append link with a listener to send message to iframe parent.
-        // NOTE: the formgrade UI is embedded in an iframe.
         this.$name.append($("<a/>")
             .text(name)
-            .attr("href", "#")
-            .click(function() {
-                window.parent.postMessage(
-                    jlab_go_to_path(url_prefix + "/" + this_assignment.model.get("source_path")),
-                    '*'
-                );
-            })
+            .map(linkTo("directory", url_prefix + "/" + this.model.get("source_path")))
         );
 
         // duedate
@@ -157,16 +149,8 @@ var AssignmentUI = Backbone.View.extend({
         // preview student version
         var release_path = this.model.get("release_path");
         if (release_path) {
-            // Append link with a listener to send message to iframe parent.
-            // NOTE: the formgrade UI is embedded in an iframe.
             this.$preview.append($("<a/>")
-                .attr("href", "#")
-                .click(function() {
-                    window.parent.postMessage(
-                        jlab_go_to_path(url_prefix + "/" + release_path),
-                        '*'
-                    );
-                })
+                .map(linkTo("directory", url_prefix + "/" + release_path))
                 .append($("<span/>")
                     .addClass("glyphicon glyphicon-search")
                     .attr("aria-hidden", "true")
@@ -620,7 +604,6 @@ var loadAssignments = function () {
 var models = undefined;
 var views = [];
 
-
 $(window).on('load', function () {
     loadAssignments();
 });

nbgrader/server_extensions/formgrader/static/js/manage_assignments.js

@@ -87,3 +87,44 @@ var insertDataTable = function (tbl) {
         }]
     });
 };
+
+var linkTo = function (type, path) {
+    /*
+     * Connect a link in the appropriate manner for the context.
+     * - If we're in the outermost frame, assume notebook and use an href.
+     * - If we're in an iframe, assume lab and send a message.
+     */
+    if (window === window.top) {
+        var prefix = {
+            notebook: "/notebooks/",
+            file: "/edit/",
+            directory: "/tree/"
+        }[type];
+
+        return (_, el) => {
+            return $(el)
+                .attr("href", prefix + path)
+                .attr("target", "_blank")[0];
+        };
+    } else {
+        var command = {
+            notebook: "docmanager:open",
+            file: "docmanager:open",
+            directory: "filebrowser:go-to-path",
+        }[type];
+
+        return (_, el) => {
+            return $(el)
+                .attr("href", "#")
+                .click(() => {
+                    window.parent.postMessage(
+                        JSON.stringify({
+                            "command": command,
+                            "arguments": {"path": path}
+                        }),
+                        "*"
+                    );
+                })[0];
+        }
+    }
+}

nbgrader/server_extensions/formgrader/static/js/utils.js

@@ -10,7 +10,6 @@
   <script src="{{ base_url }}/formgrader/static/components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
   <script src="{{ base_url }}/formgrader/static/js/backbone_xsrf.js"></script>
   <script src="{{ base_url }}/formgrader/static/js/utils.js"></script>
-  <script src="{{ base_url }}/formgrader/static/js/jupyterlab_utils.js"></script>
 
   <link rel="stylesheet" href="{{ base_url }}/formgrader/static/components/bootstrap/css/bootstrap.min.css" />
   <link rel="stylesheet" href="{{ base_url }}/formgrader/static/components/datatables.net-bs/css/dataTables.bootstrap.min.css">

nbgrader/server_extensions/formgrader/templates/base.tpl

@@ -20,6 +20,7 @@ var base_url = "{{ resources.base_url }}/formgrader";
 <script src="{{ resources.base_url }}/formgrader/static/js/formgrade_keyboardmanager.js"></script>
 <script src="{{ resources.base_url }}/formgrader/static/js/formgrade_models.js"></script>
 <script src="{{ resources.base_url }}/formgrader/static/js/formgrade.js"></script>
+<script src="{{ resources.base_url }}/formgrader/static/js/utils.js"></script>
 <script type="text/javascript">
 function toggle_name(on) {
   $(".name-shown").tooltip('hide');
@@ -33,12 +34,11 @@ function toggle_name(on) {
   }
 }
 
-function jlab_open_notebook(notebook_path) {
-  return JSON.stringify({
-    "command": "docmanager:open",
-    "arguments": {"path": notebook_path}
+$(document).ready(function() {
+  $("[data-link]").each(function() {
+    $(this).map(linkTo("notebook", $(this).data("link"))).removeAttr("data-link");
   });
-}
+});
 </script>
 
 <link rel="stylesheet" href="{{ resources.base_url }}/formgrader/static/components/bootstrap/css/bootstrap.min.css" />
@@ -64,12 +64,12 @@ function jlab_open_notebook(notebook_path) {
             <li><a href="{{ resources.base_url }}/formgrader/gradebook/{{ resources.assignment_id }}/{{ resources.notebook_id }}">{{ resources.notebook_id }}</a></li>
             <li class="active live-notebook">
               <a class="name-hidden" data-toggle="tooltip" data-placement="bottom" title="Open live notebook"
-                onclick='window.parent.postMessage(jlab_open_notebook("{{ resources.notebook_path }}"), "*");'
+                data-link="{{ resources.notebook_path }}"
               >
                 Submission #{{ resources.index + 1 }}
               </a>
               <a class="name-shown" data-toggle="tooltip" data-placement="bottom" title="Open live notebook"
-                onclick='window.parent.postMessage(jlab_open_notebook("{{ resources.notebook_path }}"), "*"); '
+                data-link="{{ resources.notebook_path }}"
               >
                 {%- if resources.last_name and resources.first_name -%}
                 {{ resources.last_name }}, {{ resources.first_name }}
@@ -99,4 +99,4 @@ function jlab_open_notebook(notebook_path) {
   $('span.glyphicon.name-hidden').tooltip({title: "Show student name", placement: "bottom", trigger: "hover"});
   $('span.glyphicon.name-shown').tooltip({title: "Hide student name", placement: "bottom", trigger: "hover"});
   </script>
-{% endmacro %}
+{% endmacro %}