joystick-config: Fix warning about manual-control message not being supported

src/components/ExpansiblePanel.vue

@@ -114,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, useSlots, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue'
 
 import { useAppInterfaceStore } from '@/stores/appInterface'
 
@@ -253,6 +253,21 @@ watch(isWarningOpen, (newValue) => {
   }
 })
 
+const hasWarningSlot = ref(false)
+const warningSlotObserver = ref<MutationObserver | null>(null)
+const updateHasWarningSlot = (): void => (hasWarningSlot.value = !!slots.warning?.())
+const hasInfoSlot = ref(false)
+const infoSlotObserver = ref<MutationObserver | null>(null)
+const updateHasInfoSlot = (): void => (hasInfoSlot.value = !!slots.info?.())
+
+const setupSlotObservers = (): void => {
+  warningSlotObserver.value = new MutationObserver(updateHasWarningSlot)
+  warningSlotObserver.value.observe(warningContent.value, { attributes: true, childList: true, subtree: true })
+
+  infoSlotObserver.value = new MutationObserver(updateHasInfoSlot)
+  infoSlotObserver.value.observe(infoContent.value, { attributes: true, childList: true, subtree: true })
+}
+
 onMounted(() => {
   if (content.value && !isPanelExpanded.value) {
     content.value.style.maxHeight = '0px'
@@ -263,10 +278,16 @@ onMounted(() => {
   if (warningContent.value && !isWarningOpen.value) {
     warningContent.value.style.maxHeight = '0px'
   }
+
+  updateHasWarningSlot()
+  updateHasInfoSlot()
+  setupSlotObservers()
 })
 
-const hasInfoSlot = computed(() => !!slots.info?.())
-const hasWarningSlot = computed(() => !!slots.warning?.())
+onBeforeUnmount(() => {
+  if (warningSlotObserver.value) warningSlotObserver.value.disconnect()
+  if (infoSlotObserver.value) infoSlotObserver.value.disconnect()
+})
 </script>
 
 <style scoped>

src/views/ConfigurationJoystickView.vue

@@ -592,20 +592,11 @@ const controllerStore = useControllerStore()
 const { globalAddress } = useMainVehicleStore()
 const interfaceStore = useAppInterfaceStore()
 
-const m2rSupportsExtendedManualControl = ref<boolean>()
-const ardupilotSupportsExtendedManualControl = ref<boolean>()
 const showJoystickWarningMessage = ref(false)
 
 onMounted(async () => {
   controllerStore.enableForwarding = false
-  const m2rVersion = await getMavlink2RestVersion(globalAddress)
-  m2rSupportsExtendedManualControl.value = semver.gte(m2rVersion, '0.11.19')
-  const ardupilotVersion = await getArdupilotVersion(globalAddress)
-  ardupilotSupportsExtendedManualControl.value = semver.gte(ardupilotVersion, '4.1.2')
-
-  if (m2rSupportsExtendedManualControl.value || ardupilotSupportsExtendedManualControl.value) {
-    showJoystickWarningMessage.value = true
-  }
+  warnIfJoystickDoesNotSupportExtendedManualControl()
 })
 
 // Does not let the joystick forwarding to be enabled while the user is in this page
@@ -658,6 +649,20 @@ const filteredProtocols = protocols.filter(
   (protocol) => protocol === JoystickProtocol.MAVLinkManualControl || protocol === JoystickProtocol.CockpitAction
 )
 
+const warnIfJoystickDoesNotSupportExtendedManualControl = async (): Promise<void> => {
+  try {
+    const m2rVersion = await getMavlink2RestVersion(globalAddress)
+    const m2rSupportsExtendedManualControl = semver.gte(m2rVersion, '0.11.19')
+    const ardupilotVersion = await getArdupilotVersion(globalAddress)
+    const ardupilotSupportsExtendedManualControl = semver.gte(ardupilotVersion, '4.1.2')
+
+    showJoystickWarningMessage.value = !m2rSupportsExtendedManualControl || !ardupilotSupportsExtendedManualControl
+  } catch (error) {
+    console.error(`Error getting Mavlink2Rest or Ardupilot version. ${error}. Will try again in 10 seconds.`)
+    setTimeout(warnIfJoystickDoesNotSupportExtendedManualControl, 10000)
+  }
+}
+
 const sortJoystickActions = (protocol: string): JoystickAction[] => {
   const searchTerm = searchTermsJoy[protocol].toLowerCase() || ''
   return buttonActionsToShow.value