Convert enums to TypeScript

Author: MetRonnie

package.json

@@ -34,7 +34,6 @@
     "apexcharts": "3.41.0",
     "axios": "1.7.2",
     "dedent": "1.5.3",
-    "enumify": "2.0.0",
     "graphiql": "3.3.1",
     "graphql": "16.9.0",
     "graphql-tag": "2.12.6",

src/components/cylc/SVGTask.vue

@@ -248,7 +248,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script setup>
 import { computed, inject, ref } from 'vue'
-import TaskState from '@/model/TaskState.model'
+import { TaskState } from '@/model/TaskState.model'
 
 const props = defineProps({
   task: {
@@ -277,7 +277,7 @@ const animResetTime = inject('animResetTime', () => ref(0), true)
 
 const runningStyle = computed(() => {
   if (
-    props.task.state === TaskState.RUNNING.name &&
+    props.task.state === TaskState.RUNNING &&
     props.startTime &&
     props.task.task?.meanElapsedTime
   ) {

src/components/cylc/commandMenu/Menu.vue

@@ -122,7 +122,7 @@ import {
   mdiPencil
 } from '@mdi/js'
 import { mapGetters, mapState } from 'vuex'
-import WorkflowState from '@/model/WorkflowState.model'
+import { WorkflowState } from '@/model/WorkflowState.model'
 import { eventBus } from '@/services/eventBus'
 
 export default {
@@ -233,7 +233,7 @@ export default {
         const nodeReturned = this.getNodes('workflow', [this.node.tokens.workflowID])
         status = nodeReturned.length
           ? nodeReturned[0].node.status
-          : WorkflowState.RUNNING.name
+          : WorkflowState.RUNNING
       }
       return !mutation._validStates.includes(status)
     },

src/components/cylc/gscan/WorkflowIcon.vue

@@ -22,7 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import WorkflowState from '@/model/WorkflowState.model'
+import { WorkflowStateIcons } from '@/model/WorkflowState.model'
 import { mdiHelpCircle } from '@mdi/js'
 
 /**
@@ -45,8 +45,7 @@ export default {
      * @returns {string} icon
      */
     getIcon () {
-      const state = WorkflowState.enumValues.find(({ name }) => name === this.status)
-      return state?.icon || mdiHelpCircle
+      return WorkflowStateIcons.get(this.status) ?? mdiHelpCircle
     }
   }
 }

src/components/cylc/gscan/sort.ts

@@ -18,7 +18,7 @@
 import {
   sortedIndexBy
 } from '@/components/cylc/common/sort'
-import { WorkflowState, WorkflowStateOrder } from '@/model/WorkflowState.model'
+import { WorkflowState, getWorkflowStateOrder } from '@/model/WorkflowState.model'
 
 /**
  * Return an integer suitable for alphabetical sorting of workflow states.
@@ -28,14 +28,14 @@ import { WorkflowState, WorkflowStateOrder } from '@/model/WorkflowState.model'
  */
 export function getWorkflowTreeSortValue (node) {
   if (node.type === 'workflow') {
-    return WorkflowStateOrder.get(node.node.status)
+    return getWorkflowStateOrder(node.node.status)
   }
   let ret = 9
   let temp = 9
   let item
   const stack = [...node.children]
   while (
-    ret > WorkflowStateOrder.get(WorkflowState.RUNNING.name) &&
+    ret > getWorkflowStateOrder(WorkflowState.RUNNING) &&
     stack.length
   ) {
     // NOTE: if one workflow is running (top sort order) then we don't
@@ -44,7 +44,7 @@ export function getWorkflowTreeSortValue (node) {
     if (item.type === 'workflow-part') {
       stack.push(...item.children)
     } else if (item.type === 'workflow') {
-      temp = WorkflowStateOrder.get(item.node.status)
+      temp = getWorkflowStateOrder(item.node.status)
       if (temp < ret) {
         ret = temp
       }

src/components/cylc/tree/GScanTreeItem.vue

@@ -175,7 +175,7 @@ export default {
 
     nodeClass () {
       return {
-        'c-workflow-stopped': this.node.node?.status === WorkflowState.STOPPED.name,
+        'c-workflow-stopped': this.node.node?.status === WorkflowState.STOPPED,
       }
     }
   },

src/components/cylc/workspace/Toolbar.vue

@@ -211,7 +211,7 @@ import {
 import { startCase } from 'lodash'
 import { until } from '@/utils'
 import { useToolbar, toolbarHeight } from '@/utils/toolbar'
-import WorkflowState from '@/model/WorkflowState.model'
+import { WorkflowState } from '@/model/WorkflowState.model'
 import graphql from '@/mixins/graphql'
 import {
   mutationStatus
@@ -318,25 +318,21 @@ export default {
       return this.cylcTree.$index[this.workflowId]
     },
     isRunning () {
-      return (
-        this.currentWorkflow &&
-        (
-          this.currentWorkflow.node.status === WorkflowState.RUNNING.name ||
-          this.currentWorkflow.node.status === WorkflowState.PAUSED.name ||
-          this.currentWorkflow.node.status === WorkflowState.STOPPING.name
-        )
-      )
+      return [
+        WorkflowState.RUNNING,
+        WorkflowState.PAUSED,
+        WorkflowState.STOPPING
+      ].includes(this.currentWorkflow?.node.status)
     },
     isPaused () {
       return (
-        this.currentWorkflow &&
-        this.currentWorkflow.node.status === WorkflowState.PAUSED.name
+        this.currentWorkflow?.node.status === WorkflowState.PAUSED
       )
     },
     isStopped () {
       return (
         !this.currentWorkflow ||
-        this.currentWorkflow.node.status === WorkflowState.STOPPED.name
+        this.currentWorkflow.node.status === WorkflowState.STOPPED
       )
     },
     statusMsg () {
@@ -359,7 +355,7 @@ export default {
           // the play/pause button
           !this.isStopped &&
           !this.expecting.stop &&
-          this.currentWorkflow.node.status !== WorkflowState.STOPPING.name &&
+          this.currentWorkflow.node.status !== WorkflowState.STOPPING &&
           (
             this.expecting.paused === null ||
             this.expecting.paused === this.isPaused
@@ -431,7 +427,7 @@ export default {
         this.currentWorkflow.id
       ).then(response => {
         if (response.status === mutationStatus.SUCCEEDED) {
-          this.expecting.stop = WorkflowState.STOPPING
+          this.expecting.stop = WorkflowState.STOPPING // Huh?
         }
       })
     },

src/mixins/subscription.js

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import ViewState from '@/model/ViewState.model'
+import { ViewState } from '@/model/ViewState.model'
 import { toRaw } from 'vue'
 import { mapActions } from 'vuex'
 

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

@@ -15,31 +15,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Enumify } from 'enumify'
-
 /**
  * Cylc valid job states.
  *
  * @see https://cylc.github.io/cylc-admin/proposal-state-names.html#taskjob-states
  */
-class JobState extends Enumify {
-  static SUBMITTED = new JobState('submitted')
-  static SUBMIT_FAILED = new JobState('submit-failed')
-  static RUNNING = new JobState('running')
-  static SUCCEEDED = new JobState('succeeded')
-  static FAILED = new JobState('failed')
-  static _ = this.closeEnum()
-
-  /**
-   * Constructor.
-   * @param {String} name
-   */
-  constructor (name) {
-    super()
-    this.name = name
-  }
+export enum JobState {
+  SUBMITTED = 'submitted',
+  SUBMIT_FAILED = 'submit-failed',
+  RUNNING = 'running',
+  SUCCEEDED = 'succeeded',
+  FAILED = 'failed',
 }
 
-export const JobStateNames = JobState.enumValues.map(({ name }) => name)
-
-export default JobState
+export const JobStateNames: readonly JobState[] = Object.values(JobState)

src/model/Subscription.model.js

@@ -16,7 +16,7 @@
  */
 
 import { toRaw } from 'vue'
-import ViewState from '@/model/ViewState.model'
+import { ViewState } from '@/model/ViewState.model'
 import { Alert } from '@/model/Alert.model'
 
 /**
@@ -77,7 +77,7 @@ class Subscription {
         subscriber.setAlert(new Alert(context.message, 'error'))
         if (this.debug) {
           // eslint-disable-next-line no-console
-          console.debug(`Subscription error: ${context.message}`, toRaw(viewState), context)
+          console.debug(`Subscription error: ${context.message}`, ViewState[toRaw(viewState)], context)
         }
       })
     }