From cb5dfccb719ce667db9802b500fd268f4defc0ab Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 21 Nov 2024 00:27:59 -0300
Subject: [PATCH 1/2] joystick-config: Fix warning about manual-control message
 not being supported

It was mistakenly warning about the `MANUAL_CONTROL` message not being supported when it failed to fetch the information from BlueOS.
---
 src/views/ConfigurationJoystickView.vue | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/views/ConfigurationJoystickView.vue b/src/views/ConfigurationJoystickView.vue
index 665166507..cd40b38e3 100644
--- a/src/views/ConfigurationJoystickView.vue
+++ b/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

From fbad3a07f23cdb34495308bd15d857600a3261f2 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 22 Nov 2024 14:24:19 -0300
Subject: [PATCH 2/2] expansible-panel: Make component reactive to changes in
 the existence of info and warning slots

As it was, once the component was rendered, the existence of info and warning slots would never change.

We had a case where the joystick panel was initiated without a warning, but once an external API was consulted, the component tried to show the warning (with a change in a `v-if` for the slot), but the panel never rendered the warning, as it was not reactive.
---
 src/components/ExpansiblePanel.vue | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/ExpansiblePanel.vue b/src/components/ExpansiblePanel.vue
index 43f3a3318..b4585d060 100644
--- a/src/components/ExpansiblePanel.vue
+++ b/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>