jupyter_server: support Cylc UIS Jupyter Server extension

* cylc/cylc-uiserver#230
* The UIS is now a Jupyter Server extension.
* The endpoint is now `cylc/#/` rather than `#/`
* Authentication via token/cookie is now supported.
* Sets XSRF header to support new hubless single-user mode.

src/graphql/index.js

@@ -24,6 +24,7 @@ import {
 } from '@apollo/client'
 import { getMainDefinition } from '@apollo/client/utilities'
 import { WebSocketLink } from '@apollo/client/link/ws'
+import { setContext } from '@apollo/client/link/context'
 import { SubscriptionClient } from 'subscriptions-transport-ws'
 import store from '@/store/index'
 import { createUrl } from '@/utils/urls'
@@ -123,8 +124,24 @@ export function createApolloClient (httpUrl, subscriptionClient) {
     httpLink
   )
 
+  const wsAuthLink = setContext((_, { headers }) => {
+    // add an X-XSRFToken header for hubless token based auth
+    const xsrfToken = document.cookie.match('\\b_xsrf=([^;]*)\\b')
+    const cylcHeaders = {}
+    if (xsrfToken !== undefined) {
+      // pick the last match
+      cylcHeaders['X-XSRFToken'] = xsrfToken.splice(-1)
+    }
+    return {
+      headers: {
+        ...headers,
+        ...cylcHeaders
+      }
+    }
+  })
+
   return new ApolloClient({
-    link: link,
+    link: wsAuthLink.concat(link),
     cache: new InMemoryCache(),
     defaultOptions: {
       query: {

src/mixins/graphql.js

@@ -51,7 +51,7 @@ export default {
      * @return {string} - the Workflow ID used in this view
      */
     workflowId () {
-      return `${this.user.username}|${this.workflowName}`
+      return `${this.user.owner}|${this.workflowName}`
     },
     /**
      * GraphQL query variables.

src/model/User.model.js

@@ -24,11 +24,17 @@
  * @property {string} server - server URL
  */
 export default class User {
-  constructor (username, groups, created, admin, server) {
+  constructor (username, groups, created, admin, server, owner) {
+    // the authenticated user
+    // (full info only available when authenticated via the hub)
     this.username = username
     this.groups = groups
     this.created = created
     this.admin = admin
-    this.server = server
+    this.server = server || '?' // server can be unset
+    // the UIS owner
+    // (i.e. the user who's workflows we are looking at)
+    // (this might not be the authenticated user for multi-user setups)
+    this.owner = owner
   }
 }

src/services/user.service.js

@@ -26,7 +26,14 @@ class UserService {
    */
   getUserProfile () {
     return axios.get(createUrl('userprofile')).then((response) => {
-      return new User(response.data.name, response.data.groups, response.data.created, response.data.admin, response.data.server)
+      return new User(
+        response.data.name,
+        response.data.groups,
+        response.data.created,
+        response.data.admin,
+        response.data.server,
+        response.data.owner
+      )
     })
   }
 }