Convert some classes to TypeScript

Author: MetRonnie

src/components/cylc/workspace/lumino-widget.js renamed to src/components/cylc/workspace/lumino-widget.ts

@@ -17,6 +17,7 @@
 
 import { Widget } from '@lumino/widgets'
 import { eventBus } from '@/services/eventBus'
+import { type Message } from '@lumino/messaging'
 
 /**
  * This is a valid Lumino widget, that contains only a dummy div
@@ -31,33 +32,33 @@ import { eventBus } from '@/services/eventBus'
 export default class LuminoWidget extends Widget {
   /**
    * Create a LuminoWidget object.
-   * @param {string} id - unique ID of the widget
-   * @param {string} name - text displayed in the widget tab
-   * @param {boolean} closable - flag that controls whether the tab can be
-   * closed or not
+   * @param id - unique ID of the widget
+   * @param name - text displayed in the widget tab
+   * @param closable - flag that controls whether the tab can be closed or not
    */
-  constructor (id, name, closable = true) {
+  constructor (
+    id: string,
+    public name: string,
+    public readonly closable: boolean = true
+  ) {
     super({ node: LuminoWidget.createNode(id) })
     this.id = id
-    this.name = name
-    this.closable = closable
     // classes and flags
     this.setFlag(Widget.Flag.DisallowLayout)
     this.addClass('content')
   }
 
   /**
    * Return a dummy div to be used as parent for the Vue component element.
-   * @param {string} id - widget id
-   * @return {HTMLElement}
+   * @param id - widget id
    */
-  static createNode (id) {
+  static createNode (id: string): HTMLElement {
     const div = document.createElement('div')
     div.setAttribute('id', id)
     return div
   }
 
-  onBeforeAttach (msg) {
+  onBeforeAttach (msg: Message) {
     // Set tab title as this is not handled automatically for some reason.
     // NOTE: We do this in the onBeforeAttach hook rather than in the constructor
     // because the constructor does not get called when we restore layout to the
@@ -76,13 +77,13 @@ export default class LuminoWidget extends Widget {
   //   super.onActivateRequest(msg)
   // }
 
-  onCloseRequest (msg) {
+  onCloseRequest (msg: Message) {
     // Emit an event so that the Vue component knows that it needs to be removed too
     eventBus.emit('lumino:deleted', this.id)
     super.onCloseRequest(msg)
   }
 
-  onAfterShow (msg) {
+  onAfterShow (msg: Message) {
     // Emit an event so that the Vue component knows that this widget is visible again
     eventBus.emit(`lumino:show:${this.id}`)
     super.onAfterShow(msg)

src/model/Alert.model.js renamed to src/model/Alert.model.ts

@@ -17,14 +17,17 @@
 
 /** Alert model */
 export class Alert {
-  /**
-   * @param {Error|string} err - original thrown error to log if possible, or an error message.
-   * @param {string} color - color of the displayed alert.
-   * @param {?string} msg - a custom message to display in the alert instead of err.
-   */
-  constructor (err, color, msg = null) {
-    this.err = err
+  /** The text content of the displayed alert. */
+  text: string | Error
+
+  constructor (
+    /** Original thrown error to log if possible, or an error message. */
+    public err: Error | string,
+    /** Color of the displayed alert. */
+    public color: string,
+    /** A custom message to display in the alert instead of err. */
+    msg?: string
+  ) {
     this.text = msg || err
-    this.color = color
   }
 }

src/model/User.model.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export interface User {
+  /**
+   * The authenticated user
+   */
+  username: string
+  /**
+   * 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)
+   */
+  owner: string
+  /**
+   * List of permissions
+   */
+  permissions: string[]
+  /**
+   * Single or multi user mode
+   */
+  mode: 'single user' | 'multi user'
+  /**
+   * User initials
+   */
+  initials: string
+  /**
+   * User avatar color if set
+   */
+  color: string | null
+}

src/model/User.model.ts

@@ -17,7 +17,7 @@
 
 import { createSubscriptionClient, createGraphQLUrls } from '@/graphql'
 import SubscriptionWorkflowService from '@/services/workflow.service'
-import UserService from '@/services/user.service'
+import { UserService } from '@/services/user.service'
 
 /**
  * A plugin that loads the application services.

src/services/eventBus.js renamed to src/services/eventBus.ts

@@ -16,19 +16,18 @@
  */
 
 import axios from 'axios'
-import User from '@/model/User.model'
+import { type User } from '@/model/User.model'
 import { createUrl, getCylcHeaders } from '@/utils/urls'
 
-export default class UserService {
+export class UserService {
   /**
    * Gets the user profile from the backend server.
-   * @returns {Promise<User>} - a promise that dispatches Vuex action
    */
-  async getUserProfile () {
+  async getUserProfile (): Promise<User> {
     const { data } = await axios.get(
       createUrl('userprofile'),
       { headers: getCylcHeaders() }
     )
-    return new User(data)
+    return data
   }
 }

src/services/plugin.js

@@ -15,18 +15,24 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export const state = () => ({
+import { type User } from '@/model/User.model'
+
+type State = {
+  user: User | null
+}
+
+export const state = (): State => ({
   user: null,
 })
 
 export const mutations = {
-  SET_USER (state, user) {
+  SET_USER (state: State, user: User) {
     state.user = user
   }
 }
 
 export const actions = {
-  setUser ({ commit }, user) {
+  setUser ({ commit }, user: User) {
     commit('SET_USER', user)
   }
 }

src/services/user.service.js renamed to src/services/user.service.ts

@@ -79,12 +79,10 @@ function createUrl (path, websockets = false, baseOnly = false) {
  */
 function getCylcHeaders () {
   const xsrfToken = document.cookie.match('\\b_xsrf=([^;]*)\\b')
-  const cylcHeaders = {}
-  if (Array.isArray(xsrfToken) && xsrfToken.length > 0) {
+  return {
     // pick the last match
-    cylcHeaders['X-XSRFToken'] = xsrfToken.splice(-1)
+    'X-XSRFToken': xsrfToken?.pop()
   }
-  return cylcHeaders
 }
 
 export {

src/store/user.module.js renamed to src/store/user.module.ts

@@ -17,14 +17,13 @@
 
 import { shallowMount } from '@vue/test-utils'
 import { createStore } from 'vuex'
-import User from '@/model/User.model'
 import storeOptions from '@/store/options'
 import graphqlMixin from '@/mixins/graphql'
 
 describe('GraphQL mixin', () => {
   const store = createStore(storeOptions)
   it('should create the GraphQL Query variables', () => {
-    const user = new User({ username: 'cylc', permissions: [], owner: 'owner' })
+    const user = { username: 'cylc', permissions: [], owner: 'owner' }
     store.commit('user/SET_USER', user)
     const workflowName = 'test'
     const Component = {