Prevent selecting an unavailable ModelVersion

src/components/Model/Versions/Row.vue

@@ -39,9 +39,10 @@
     <td v-else>
       <button
         type="button"
-        title="Use this model version"
         class="button"
         :class="{ 'is-primary': isSelected, 'is-loading': loading }"
+        :disabled="useButtonDisabled"
+        :title="useButtonTitle"
         v-on:click="useModelVersion"
       >
         Use
@@ -120,6 +121,17 @@ export default {
        * or marked as selected in selectable mode
        */
       return this.selected || this.version.id === this.workerRun?.model_version?.id
+    },
+    isAvailable () {
+      return this.version.state === 'available'
+    },
+    useButtonDisabled () {
+      return this.loading || !this.isAvailable || null
+    },
+    useButtonTitle () {
+      if (this.loading) return 'Loading…'
+      else if (!this.isAvailable) return 'This version is not available'
+      else return 'Use this model version'
     }
   },
   methods: {
@@ -144,6 +156,8 @@ export default {
       }
     },
     async useModelVersion () {
+      // Never allow selecting a model version that's not available
+      if (!this.isAvailable) return
       if (this.selectable) this.$emit('selected-version', this.version)
       if (!this.workerRunId || !this.processId) return
       // Do not do anything if it's still loading or the worker run already uses the selected model version