From 33b40b39b66a486b46efa4afe55991168d25b1ab Mon Sep 17 00:00:00 2001
From: Violet Shreve <shreve@umich.edu>
Date: Thu, 11 Jul 2024 14:52:25 -0400
Subject: [PATCH] Add linkTo util function

Formgrader could be loaded in one of two different contexts: on its own
from a notebook, or inside an iframe a lab. When navigating to a page
outside the formgrader application, this presents an issue in that these
two contexts need different navigation mechanisms.

Previously, the mechanism was decided by looking at the name of the
jupyter-server application. If it was `jupyter-notebook` (notebook<7),
use href. Otherwise, use postMessage. However, it's possible to use the
notebook interface without `jupyter-notebook`, e.g. `jupyter-server`.

Now the mechanism is decided by context clues inside the browser, i.e.
whether formgrader is inside an iframe.

This commit adds a `linkTo` function which is applied to
jQuery elements via `.map` and applies either href or postMessage nav
mechanisms based on whether the current window is the top window.

Additionally, it completely removes the `is_lab` and `is_jlab` checks
as they were relatively naive and add complexity that doesn't need
to be there.
---
 nbgrader/server_extensions/formgrader/base.py |  6 ++-
 .../server_extensions/formgrader/handlers.py  |  4 +-
 .../formgrader/static/js/jupyterlab_utils.js  | 10 -----
 .../static/js/manage_assignments.js           | 42 +++++--------------
 .../formgrader/static/js/utils.js             | 41 ++++++++++++++++++
 .../formgrader/templates/base.tpl             |  1 -
 .../formgrade/formgrade_macros.html.j2        | 24 ++++-------
 .../templates/manage_assignments.tpl          |  1 -
 8 files changed, 66 insertions(+), 63 deletions(-)
 delete mode 100644 nbgrader/server_extensions/formgrader/static/js/jupyterlab_utils.js

diff --git a/nbgrader/server_extensions/formgrader/base.py b/nbgrader/server_extensions/formgrader/base.py
index d5bf2ec4d..1593b0ef2 100644
--- a/nbgrader/server_extensions/formgrader/base.py
+++ b/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):
diff --git a/nbgrader/server_extensions/formgrader/handlers.py b/nbgrader/server_extensions/formgrader/handlers.py
index 0fa8a9404..7fff1b3d5 100644
--- a/nbgrader/server_extensions/formgrader/handlers.py
+++ b/nbgrader/server_extensions/formgrader/handlers.py
@@ -17,7 +17,6 @@ def get(self):
             "manage_assignments.tpl",
             url_prefix=self.url_prefix,
             base_url=self.base_url,
-            is_lab=int(self.settings['is_jlab']),
             windows=(sys.prefix == 'win32'),
             course_id=self.api.course_id,
             exchange=self.api.exchange_root,
@@ -108,10 +107,9 @@ def get(self, submission_id):
             'index': ix,
             'total': len(indices),
             'base_url': self.base_url,
-            'my_mathjax_url': self.mathjax_url if self.settings['is_jlab'] else self.base_url + '/' + self.mathjax_url,
+            'my_mathjax_url': self.mathjax_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
         }
diff --git a/nbgrader/server_extensions/formgrader/static/js/jupyterlab_utils.js b/nbgrader/server_extensions/formgrader/static/js/jupyterlab_utils.js
deleted file mode 100644
index 7e9bb9783..000000000
--- a/nbgrader/server_extensions/formgrader/static/js/jupyterlab_utils.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Module of data to send to Jupyterlab's nbgrader extension to perform actions.
- */
-
-var jlab_go_to_path = function(directory_path){
-    return JSON.stringify({
-               "command": "filebrowser:go-to-path",
-               "arguments": {"path": directory_path}
-           });
-}
\ No newline at end of file
diff --git a/nbgrader/server_extensions/formgrader/static/js/manage_assignments.js b/nbgrader/server_extensions/formgrader/static/js/manage_assignments.js
index 531c64eb8..41e8ed0ed 100644
--- a/nbgrader/server_extensions/formgrader/static/js/manage_assignments.js
+++ b/nbgrader/server_extensions/formgrader/static/js/manage_assignments.js
@@ -34,7 +34,6 @@ var AssignmentUI = Backbone.View.extend({
         this.listenTo(this.model, "request", this.animateSaving);
         this.listenTo(this.model, "sync", this.closeModal);
 
-        this.is_lab = options.is_lab || false;
         this.render();
     },
 
@@ -97,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 :
-         *     - href if this is a Notebook<7 environment
-         *     - click listener to send message to iframe parent if this is Jupyter Lab environment
-         */
         this.$name.append($("<a/>")
             .text(name)
-            .attr("target", self.is_lab ? undefined : "_blank")
-            .attr("href", self.is_lab ? undefined : base_url + "/tree/" + url_prefix + "/" + this.model.get("source_path"))
-            .click(self.is_lab ? function(){
-                window.parent.postMessage(jlab_go_to_path(url_prefix + "/" + this_assignment.model.get("source_path")), '*');
-            } : undefined)
+            .map(linkTo("directory", url_prefix + "/" + this.model.get("source_path")))
         );
 
         // duedate
@@ -154,16 +145,8 @@ var AssignmentUI = Backbone.View.extend({
         // preview student version
         var release_path = this.model.get("release_path");
         if (release_path) {
-            /* Append link with :
-             *     - href if this is a Notebook<7 environment
-             *     - click listener to send message to iframe parent if this is Jupyter Lab environment
-             */
             this.$preview.append($("<a/>")
-                .attr("target", self.is_lab ? undefined : "_blank")
-                .attr("href", self.is_lab ? undefined : base_url + "/tree/" + url_prefix + "/" + release_path)
-                .click(self.is_lab ? function(){
-                        window.parent.postMessage(jlab_go_to_path(url_prefix + "/" + release_path), '*');
-                    } : undefined)
+                .map(linkTo("directory", url_prefix + "/" + release_path))
                 .append($("<span/>")
                     .addClass("glyphicon glyphicon-search")
                     .attr("aria-hidden", "true")));
@@ -215,20 +198,20 @@ var AssignmentUI = Backbone.View.extend({
         // generate feedback
         if (num_submissions > 0) {
             this.$generate_feedback.append($("<a/>")
-		.attr("href", "#")
+                .attr("href", "#")
                 .click(_.bind(this.generate_feedback, this))
-		.append($("<span/>")
-		   .addClass("glyphicon glyphicon-comment")
+                .append($("<span/>")
+                    .addClass("glyphicon glyphicon-comment")
                    .attr("aria-hidden", "true")));
         }
 
         //  feedback
         if (num_submissions > 0) {
             this.$release_feedback.append($("<a/>")
-		.attr("href", "#")
+                .attr("href", "#")
                 .click(_.bind(this.release_feedback, this))
-		.append($("<span/>")
-		   .addClass("glyphicon glyphicon-envelope")
+                .append($("<span/>")
+                    .addClass("glyphicon glyphicon-envelope")
                    .attr("aria-hidden", "true")));
         }
 
@@ -579,7 +562,7 @@ var createAssignmentModal = function () {
     modal = createModal("add-assignment-modal", "Add New Assignment", body, footer);
 };
 
-var loadAssignments = function (is_lab=false) {
+var loadAssignments = function () {
     var tbl = $("#main-table");
 
     models = new Assignments();
@@ -592,7 +575,6 @@ var loadAssignments = function (is_lab=false) {
                 var view = new AssignmentUI({
                     "model": model,
                     "el": insertRow(tbl),
-                    "is_lab": is_lab
                 });
                 views.push(view);
             });
@@ -605,8 +587,6 @@ var loadAssignments = function (is_lab=false) {
 var models = undefined;
 var views = [];
 
-var is_lab = is_lab || false;
-
 $(window).on('load', function () {
-    loadAssignments(is_lab);
+    loadAssignments();
 });
diff --git a/nbgrader/server_extensions/formgrader/static/js/utils.js b/nbgrader/server_extensions/formgrader/static/js/utils.js
index e5adf5fa8..05c50aec1 100644
--- a/nbgrader/server_extensions/formgrader/static/js/utils.js
+++ b/nbgrader/server_extensions/formgrader/static/js/utils.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];
+        }
+    }
+}
diff --git a/nbgrader/server_extensions/formgrader/templates/base.tpl b/nbgrader/server_extensions/formgrader/templates/base.tpl
index 56eb423fb..b2c6168f9 100644
--- a/nbgrader/server_extensions/formgrader/templates/base.tpl
+++ b/nbgrader/server_extensions/formgrader/templates/base.tpl
@@ -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">
diff --git a/nbgrader/server_extensions/formgrader/templates/formgrade/formgrade_macros.html.j2 b/nbgrader/server_extensions/formgrader/templates/formgrade/formgrade_macros.html.j2
index e014b1f2e..b5a3133f9 100644
--- a/nbgrader/server_extensions/formgrader/templates/formgrade/formgrade_macros.html.j2
+++ b/nbgrader/server_extensions/formgrader/templates/formgrade/formgrade_macros.html.j2
@@ -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,20 +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"
-                {%- if is_lab -%}
-                onclick='window.parent.postMessage(jlab_open_notebook("{{ resources.notebook_path }}"), "*");'
-                {%- else -%}
-                target="_blank" href="{{ resources.base_url }}/notebooks/{{ resources.notebook_path }}"
-                {%- endif -%}
+                data-link="{{ resources.notebook_path }}"
               >
                 Submission #{{ resources.index + 1 }}
               </a>
               <a class="name-shown" data-toggle="tooltip" data-placement="bottom" title="Open live notebook"
-                {%- if is_lab -%}
-                onclick='window.parent.postMessage(jlab_open_notebook("{{ resources.notebook_path }}"), "*"); '
-                {%- else -%}
-                target="_blank" href="{{ resources.base_url }}/notebooks/{{ resources.notebook_path }}"
-                {%- endif -%}
+                data-link="{{ resources.notebook_path }}"
               >
                 {%- if resources.last_name and resources.first_name -%}
                 {{ resources.last_name }}, {{ resources.first_name }}
@@ -107,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 %}
\ No newline at end of file
+{% endmacro %}
diff --git a/nbgrader/server_extensions/formgrader/templates/manage_assignments.tpl b/nbgrader/server_extensions/formgrader/templates/manage_assignments.tpl
index 1fb2ab3cf..51b6969f8 100644
--- a/nbgrader/server_extensions/formgrader/templates/manage_assignments.tpl
+++ b/nbgrader/server_extensions/formgrader/templates/manage_assignments.tpl
@@ -3,7 +3,6 @@
 {%- block head -%}
 <script>
 var url_prefix = "{{ url_prefix }}";
-var is_lab = {% if is_lab %}true{% else %}false{% endif %};
 </script>
 
 <script src="{{ base_url }}/formgrader/static/js/manage_assignments.js"></script>