[jena] 03/03: JENA-2295: Override YASGUI method to create the share link, make it compatible with VueRouter

[ki...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

kinow pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/jena.git

commit 4b77be6ea27d715c7c92fd0ea6483d587cf78c5e
Author: Bruno P. Kinoshita <ki...@apache.org>
AuthorDate: Tue Mar 1 18:22:21 2022 +1300

    JENA-2295: Override YASGUI method to create the share link, make it compatible with VueRouter
---
 jena-fuseki2/jena-fuseki-ui/src/router/index.js    |  4 ++-
 .../jena-fuseki-ui/src/views/dataset/Query.vue     | 42 ++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/jena-fuseki2/jena-fuseki-ui/src/router/index.js b/jena-fuseki2/jena-fuseki-ui/src/router/index.js
index 2d96376..0211dfd 100644
--- a/jena-fuseki2/jena-fuseki-ui/src/router/index.js
+++ b/jena-fuseki2/jena-fuseki-ui/src/router/index.js
@@ -29,7 +29,9 @@ const routes = [
     component: Home
   },
   {
-    path: '/dataset/:datasetName/query',
+    // JENA-2295: we expand the pattern of this path with an `*` to allow for the YASGUI
+    //            query parameter, e.g. /#/dataset/abc/query?query=SELECT...
+    path: '/dataset/:datasetName/query*',
     name: 'DatasetQuery',
     component: () => import(/* webpackChunkName: "datasetQuery" */ '../views/dataset/Query'),
     props: true
diff --git a/jena-fuseki2/jena-fuseki-ui/src/views/dataset/Query.vue b/jena-fuseki2/jena-fuseki-ui/src/views/dataset/Query.vue
index 8f3a779..fa9b11e 100644
--- a/jena-fuseki2/jena-fuseki-ui/src/views/dataset/Query.vue
+++ b/jena-fuseki2/jena-fuseki-ui/src/views/dataset/Query.vue
@@ -118,6 +118,8 @@
 import Menu from '@/components/dataset/Menu'
 import Yasqe from '@triply/yasqe'
 import Yasr from '@triply/yasr'
+import queryString from 'query-string'
+import Vue from 'vue'
 
 const SELECT_TRIPLES_QUERY = `SELECT ?subject ?predicate ?object
 WHERE {
@@ -212,6 +214,27 @@ export default {
             resizeable: false,
             requestConfig: {
               endpoint: this.$fusekiService.getFusekiUrl(`/${vm.datasetName}/sparql`)
+            },
+            /**
+             * Based on YASGUI code, but modified to avoid parsing the Vue Route query
+             * hash. Note that we cannot use `document.location.hash` since it could
+             * contain the ?query=... too. Instead, we must use Vue Route path value.
+             *
+             * @param {Yasqe} yasqe
+             */
+            createShareableLink: function (yasqe) {
+              return (
+                document.location.protocol +
+                '//' +
+                document.location.host +
+                document.location.pathname +
+                document.location.search +
+                '#' +
+                vm.$route.path +
+                '?query=' +
+                // Same as YASGUI does, good idea to avoid security problems...
+                queryString.stringify(queryString.parse(yasqe.getValue()))
+              )
             }
           }
         )
@@ -219,12 +242,26 @@ export default {
           vm.yasqe.saveQuery()
           vm.yasr.setResponse(response, duration)
         })
+        if (this.$route.query.query !== undefined) {
+          vm.setQuery(this.$route.query.query)
+        }
         this.syncYasqePrefixes()
         this.loading = false
       }, 300)
     })
   },
 
+  beforeRouteUpdate (from, to, next) {
+    Vue.nextTick(() => {
+      if (this.$route.query.query !== undefined) {
+        // N.B: a blank value, like query=, will clear the query editor. Not sure if
+        //      desirable, but this can be easily modified later if necessary.
+        this.setQuery(this.$route.query.query)
+      }
+    })
+    next()
+  },
+
   watch: {
     datasetUrl: function (val, oldVal) {
       this.yasqe.options.requestConfig.endpoint = this.$fusekiService.getFusekiUrl(this.datasetUrl)
@@ -243,6 +280,11 @@ export default {
 
   methods: {
     setQuery (query) {
+      // Passing this query value through queryString.stringify(.parse) creates an
+      // invalid query. Tested some XSS values with Chrome and FFox, and couldn't
+      // trigger a popup/alert by modifying the query passed, looks like YASQE does
+      // the query cleaning before displaying it.
+      // See: https://github.com/payloadbox/xss-payload-list
       this.yasqe.setValue(query)
       this.syncYasqePrefixes()
     },