fix: missing reactivity adding connection

webui/src/Connections/ConnectionEditPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { LoadingRetryOrError } from '../util.js'
+import { LoadingRetryOrError, useComputed } from '../util.js'
 import { CRow, CCol, CButton, CFormSelect, CAlert, CInputGroup } from '@coreui/react'
 import { TextInputField } from '../Components/index.js'
 import { nanoid } from 'nanoid'
@@ -376,9 +376,9 @@ export function useConnectionVersionSelectOptions(
 	const upgradeToVersions = useModuleUpgradeToVersions(moduleId)
 
 	const latestStableVersion = getLatestVersion(moduleStoreInfo?.versions, false)
-	const latestBetaVersionn = getLatestVersion(moduleStoreInfo?.versions, true)
+	const latestBetaVersion = getLatestVersion(moduleStoreInfo?.versions, true)
 
-	return useMemo(() => {
+	return useComputed(() => {
 		const choices: DropdownChoiceInt[] = []
 
 		const listedVersions = new Set<string>()
@@ -407,13 +407,13 @@ export function useConnectionVersionSelectOptions(
 
 		if (
 			includeBeta &&
-			latestBetaVersionn &&
-			!listedVersions.has(latestBetaVersionn.id) &&
-			(!installedInfo?.betaVersion || semver.compare(latestBetaVersionn.id, installedInfo.betaVersion.versionId) > 0)
+			latestBetaVersion &&
+			!listedVersions.has(latestBetaVersion.id) &&
+			(!installedInfo?.betaVersion || semver.compare(latestBetaVersion.id, installedInfo.betaVersion.versionId) > 0)
 		) {
 			choices.push({
-				value: latestBetaVersionn.id,
-				label: `v${latestBetaVersionn.id} (Install latest beta)`,
+				value: latestBetaVersion.id,
+				label: `v${latestBetaVersion.id} (Install latest beta)`,
 			})
 		}
 
@@ -438,7 +438,7 @@ export function useConnectionVersionSelectOptions(
 		}
 
 		return [...replacementChoices, ...choices]
-	}, [installedInfo, upgradeToVersions, latestStableVersion, latestBetaVersionn, includeBeta])
+	}, [installedInfo, upgradeToVersions, latestStableVersion, latestBetaVersion, includeBeta])
 }
 
 export function doesConnectionVersionExist(

webui/src/Modules/ModuleManagePanel.tsx

@@ -85,9 +85,13 @@ export function useModuleStoreInfo(moduleId: string | undefined): ModuleStoreMod
 		if (!moduleId) return
 
 		return modules.storeVersions.subscribeToModuleStoreVersions(moduleId)
-	}, [modules.storeVersions])
+	}, [modules.storeVersions, moduleId])
 
-	return useComputed(() => (moduleId ? modules.storeVersions.getModuleStoreVersions(moduleId) : null), [moduleId])
+	if (moduleId) {
+		return modules.storeVersions.getModuleStoreVersions(moduleId)
+	} else {
+		return null
+	}
 }
 
 export function useModuleUpgradeToVersions(moduleId: string | undefined): ModuleUpgradeToOtherVersion[] {

webui/src/Stores/ModuleInfoStore.tsx

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx'
+import { action, observable, runInAction } from 'mobx'
 import type {
 	ModuleInfoUpdate,
 	ClientModuleInfo,
@@ -100,12 +100,16 @@ export class ModuleStoreVersionsStore {
 		socket.on('modules-store:info:data', (msgModuleId, data) => {
 			if (!this.#versionsSubscribers.has(msgModuleId)) return
 
-			this.#versionsState.set(msgModuleId, data)
+			runInAction(() => {
+				this.#versionsState.set(msgModuleId, data)
+			})
 		})
 		socket.on('modules-upgrade-to-other:data', (msgModuleId, data) => {
 			if (!this.#upgradeToVersionsSubscribers.has(msgModuleId)) return
 
-			this.#upgradeToVersionsState.set(msgModuleId, data)
+			runInAction(() => {
+				this.#upgradeToVersionsState.set(msgModuleId, data)
+			})
 		})
 	}
 
@@ -147,7 +151,9 @@ export class ModuleStoreVersionsStore {
 			.then((data) => {
 				if (!data || !this.#versionsSubscribers.has(moduleId)) return
 
-				this.#versionsState.set(moduleId, data)
+				runInAction(() => {
+					this.#versionsState.set(moduleId, data)
+				})
 			})
 			.catch((err) => {
 				console.error('Failed to subscribe to module store', err)
@@ -194,7 +200,9 @@ export class ModuleStoreVersionsStore {
 			.then((data) => {
 				if (!data || !this.#upgradeToVersionsSubscribers.has(moduleId)) return
 
-				this.#upgradeToVersionsState.set(moduleId, data)
+				runInAction(() => {
+					this.#upgradeToVersionsState.set(moduleId, data)
+				})
 			})
 			.catch((err) => {
 				console.error('Failed to subscribe to modules-upgrade-to-other', err)