From 5147655434a6e79bb807c3e3273362329e0bdd2f Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 5 Nov 2024 14:13:47 -0300
Subject: [PATCH] cockpit-actions: Add MAVLink message actions

Any message is accepted as long as it's a valid MAVLink message.

For COMMAND_LONG and COMMAND_INT messages, the message fields are pre-defined in the UI. For all other messages, the user should specify the JSON message config manually.
---
 .../MavlinkMessageActionConfig.vue            | 352 ++++++++++++++++++
 ...ink-message-actions-message-definitions.ts | 164 ++++++++
 src/libs/actions/mavlink-message-actions.ts   | 163 ++++++++
 src/views/ConfigurationActionsView.vue        |   2 +
 4 files changed, 681 insertions(+)
 create mode 100644 src/components/configuration/MavlinkMessageActionConfig.vue
 create mode 100644 src/libs/actions/mavlink-message-actions-message-definitions.ts
 create mode 100644 src/libs/actions/mavlink-message-actions.ts

diff --git a/src/components/configuration/MavlinkMessageActionConfig.vue b/src/components/configuration/MavlinkMessageActionConfig.vue
new file mode 100644
index 000000000..589861af6
--- /dev/null
+++ b/src/components/configuration/MavlinkMessageActionConfig.vue
@@ -0,0 +1,352 @@
+<template>
+  <ExpansiblePanel no-top-divider no-bottom-divider :is-expanded="!interfaceStore.isOnPhoneScreen">
+    <template #title>MAVLink Message Actions</template>
+    <template #info>
+      <p>View, manage, and create MAVLink message actions.</p>
+    </template>
+    <template #content>
+      <div class="flex justify-center flex-col ml-2 mb-8 mt-2 w-[640px]">
+        <v-data-table
+          :items="allActionsConfigs"
+          items-per-page="10"
+          class="elevation-1 bg-transparent rounded-lg"
+          theme="dark"
+          :style="interfaceStore.globalGlassMenuStyles"
+        >
+          <template #headers>
+            <tr>
+              <th class="text-left">
+                <p class="text-[16px] font-bold">Name</p>
+              </th>
+              <th class="text-center">
+                <p class="text-[16px] font-bold">Message Type</p>
+              </th>
+              <th class="text-right">
+                <p class="text-[16px] font-bold">Actions</p>
+              </th>
+            </tr>
+          </template>
+          <template #item="{ item }">
+            <tr>
+              <td>
+                <div :id="item.id" class="flex items-center justify-left rounded-xl mx-1 w-[140px]">
+                  <p class="whitespace-nowrap overflow-hidden text-overflow-ellipsis">{{ item.name }}</p>
+                </div>
+              </td>
+              <td>
+                <div :id="item.id" class="flex items-center justify-center rounded-xl mx-1 w-[200px]">
+                  <p class="whitespace-nowrap overflow-hidden text-overflow-ellipsis">{{ item.messageType }}</p>
+                </div>
+              </td>
+              <td class="w-[200px] text-right">
+                <div class="flex items-center justify-center">
+                  <v-btn
+                    variant="outlined"
+                    class="rounded-full mx-1"
+                    icon="mdi-pencil"
+                    size="x-small"
+                    @click="openActionEditDialog(item.id)"
+                  />
+                  <v-btn
+                    variant="outlined"
+                    class="rounded-full mx-1"
+                    icon="mdi-play"
+                    size="x-small"
+                    @click="runAction(item.id)"
+                  />
+                  <v-btn
+                    variant="outlined"
+                    class="rounded-full mx-1 pl-[3px] pt-[1px]"
+                    icon="mdi-export"
+                    size="x-small"
+                    @click="exportAction(item.id)"
+                  />
+                  <v-btn
+                    variant="outlined"
+                    class="rounded-full mx-1"
+                    color="error"
+                    icon="mdi-delete"
+                    size="x-small"
+                    @click="deleteActionConfig(item.id)"
+                  />
+                </div>
+              </td>
+            </tr>
+          </template>
+          <template #bottom>
+            <tr class="w-full">
+              <td colspan="3" class="text-center flex items-center justify-center h-[50px] mb-3 w-full gap-2">
+                <v-btn variant="outlined" class="rounded-lg" @click="openNewActionDialog()">
+                  <v-icon start>mdi-plus</v-icon>
+                  New MAVLink action
+                </v-btn>
+                <v-btn variant="outlined" class="rounded-lg" @click="importAction">
+                  <v-icon start>mdi-import</v-icon>
+                  Import action
+                </v-btn>
+              </td>
+            </tr>
+          </template>
+          <template #no-data>
+            <tr>
+              <td colspan="3" class="text-center flex items-center justify-center h-[50px] w-full">
+                <p class="text-[16px] ml-[170px] w-full">No MAVLink message actions found</p>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
+      </div>
+    </template>
+  </ExpansiblePanel>
+
+  <!-- Action Dialog -->
+  <v-dialog v-model="actionDialog.show" max-width="500px">
+    <v-card class="rounded-lg" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold py-4 text-center">
+        {{ editMode ? 'Edit action' : 'Create new action' }}
+      </v-card-title>
+      <v-card-text class="px-8">
+        <v-form class="d-flex flex-column gap-2" @submit.prevent="saveActionConfig">
+          <v-text-field
+            v-model="newActionConfig.name"
+            label="Action Name"
+            required
+            variant="outlined"
+            density="compact"
+          />
+          <v-select
+            v-model="newActionConfig.messageType"
+            :items="availableMessageTypes"
+            label="Message Type"
+            required
+            variant="outlined"
+            density="compact"
+            @update:model-value="resetActionConfig(newActionConfig.messageType)"
+          />
+
+          <div v-if="newActionConfig.messageType" class="mt-4">
+            <h3 class="text-subtitle-1 font-weight-bold mb-2">Message Configuration</h3>
+            <div v-if="typeof messageFields !== 'string' && Object.keys(messageFields).length > 0">
+              <div v-for="(field, key) in messageFields" :key="key" class="mb-1">
+                <v-text-field
+                  v-model.trim="newActionConfig.messageConfig[key].value"
+                  :label="field.description + (field.units ? ` (${field.units})` : '')"
+                  :placeholder="field.type"
+                  variant="outlined"
+                  density="compact"
+                  :rules="[field.required ? (v) => !!v || 'This field is required' : () => true]"
+                />
+              </div>
+            </div>
+            <div v-else>
+              <v-textarea
+                v-model="newActionConfig.messageConfig"
+                label="Message fields object"
+                variant="outlined"
+                density="compact"
+                hint="Insert a JSON object with the message fields here. Use {{ data_lake_key }} for dynamic values. Use { type: 'ENUM_VALUE' } for enum values (e.g.: MAV_CMD_COMPONENT_ARM_DISARM)."
+                persistent-hint
+                rows="12"
+              />
+            </div>
+          </div>
+        </v-form>
+      </v-card-text>
+      <v-divider class="mt-2 mx-10" />
+      <v-card-actions>
+        <div class="flex justify-between items-center pa-2 w-full h-full" style="color: rgba(255, 255, 255, 0.5)">
+          <v-btn @click="closeActionDialog">Cancel</v-btn>
+          <div class="flex gap-x-10">
+            <v-btn @click="resetNewAction">Reset</v-btn>
+            <v-btn :disabled="!isFormValid" class="text-white" @click="saveActionConfig">
+              {{ editMode ? 'Save' : 'Create' }}
+            </v-btn>
+          </div>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+
+import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import { openSnackbar } from '@/composables/snackbar'
+import {
+  type MavlinkMessageActionConfig,
+  deleteMavlinkMessageActionConfig,
+  getAllMavlinkMessageActionConfigs,
+  getMavlinkMessageActionConfig,
+  registerMavlinkMessageActionConfig,
+} from '@/libs/actions/mavlink-message-actions'
+import { messageFieldDefinitions } from '@/libs/actions/mavlink-message-actions-message-definitions'
+import { MAVLinkType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
+import { executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
+
+const defaultMessageType = MAVLinkType.COMMAND_LONG
+const defaultActionConfig = {
+  name: '',
+  messageType: defaultMessageType,
+  messageConfig: messageFieldDefinitions[defaultMessageType] || '',
+}
+
+const actionDialog = ref({ show: false })
+const actionsConfigs = reactive<Record<string, MavlinkMessageActionConfig>>({})
+const editMode = ref(false)
+const newActionConfig = ref<MavlinkMessageActionConfig>(defaultActionConfig)
+
+const availableMessageTypes = Object.values(MAVLinkType)
+
+const messageFields = computed(() => {
+  const selectedType = newActionConfig.value.messageType
+  return messageFieldDefinitions[selectedType] || ''
+})
+
+const isFormValid = computed(() => {
+  if (!newActionConfig.value.name || !newActionConfig.value.messageType) {
+    return false
+  }
+
+  // If the message config is a string, it must be a valid JSON string
+  if (typeof newActionConfig.value.messageConfig === 'string') {
+    try {
+      JSON.parse(newActionConfig.value.messageConfig)
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+
+  // Check if all required fields are filled
+  const fields = messageFieldDefinitions[newActionConfig.value.messageType] || {}
+  return Object.entries(fields).every(([key, field]) => {
+    return !field.required || newActionConfig.value.messageConfig[key] !== undefined
+  })
+})
+
+const loadActionsConfigs = (): void => {
+  Object.assign(actionsConfigs, getAllMavlinkMessageActionConfigs())
+}
+
+const allActionsConfigs = computed(() => {
+  return Object.entries(actionsConfigs).map(([id, action]) => ({ id, ...action }))
+})
+
+const deleteActionConfig = (id: string): void => {
+  delete actionsConfigs[id]
+  deleteMavlinkMessageActionConfig(id)
+  loadActionsConfigs()
+}
+
+const openNewActionDialog = (): void => {
+  editMode.value = false
+  resetNewAction()
+  actionDialog.value.show = true
+}
+
+const editActionConfig = (id: string): void => {
+  editMode.value = true
+  newActionConfig.value = JSON.parse(JSON.stringify(actionsConfigs[id]))
+}
+
+const openActionEditDialog = (id: string): void => {
+  editActionConfig(id)
+  actionDialog.value.show = true
+}
+
+const closeActionDialog = (): void => {
+  actionDialog.value.show = false
+  resetNewAction()
+}
+
+const resetActionConfig = (messageType: MAVLinkType = defaultMessageType): void => {
+  const exampleStringConfig = JSON.stringify(
+    {
+      target: 1,
+      exampleNumberField: 123,
+      exampleStringField: 'exampleStringValue',
+      exampleEnumField: { type: 'MAV_CMD_NAV_WAYPOINT' },
+    },
+    null,
+    2
+  )
+  newActionConfig.value.messageConfig = messageFieldDefinitions[messageType] || exampleStringConfig
+}
+
+const resetNewAction = (): void => {
+  newActionConfig.value = { ...defaultActionConfig }
+}
+
+const createActionConfig = (): void => {
+  editMode.value = false
+  registerMavlinkMessageActionConfig(newActionConfig.value)
+  loadActionsConfigs()
+  resetNewAction()
+}
+
+const saveActionConfig = (): void => {
+  createActionConfig()
+  closeActionDialog()
+}
+
+const runAction = (id: string): void => {
+  executeActionCallback(id)
+}
+
+const exportAction = (id: string): void => {
+  const action = getMavlinkMessageActionConfig(id)
+  if (!action) {
+    console.error('Action not found')
+    return
+  }
+  const json = JSON.stringify(action, null, 2)
+  const blob = new Blob([json], { type: 'application/json' })
+  const url = window.URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.style.display = 'none'
+  a.href = url
+  a.download = `${id}.json`
+  document.body.appendChild(a)
+  a.click()
+  window.URL.revokeObjectURL(url)
+  a.remove()
+}
+
+const importAction = (): void => {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = 'application/json'
+  input.onchange = (event) => {
+    const file = (event.target as HTMLInputElement).files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        try {
+          const action = JSON.parse(e.target?.result as string) as MavlinkMessageActionConfig
+          registerMavlinkMessageActionConfig(action)
+          loadActionsConfigs()
+        } catch (error) {
+          openSnackbar({ message: `Cannot import action. ${error}`, variant: 'error', duration: 5000 })
+        }
+      }
+      reader.readAsText(file)
+    }
+  }
+  input.click()
+  input.remove()
+}
+
+onMounted(() => {
+  loadActionsConfigs()
+})
+</script>
+
+<style scoped>
+.v-data-table ::v-deep tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+</style>
diff --git a/src/libs/actions/mavlink-message-actions-message-definitions.ts b/src/libs/actions/mavlink-message-actions-message-definitions.ts
new file mode 100644
index 000000000..95055f7d2
--- /dev/null
+++ b/src/libs/actions/mavlink-message-actions-message-definitions.ts
@@ -0,0 +1,164 @@
+import { MAVLinkType } from '../connection/m2r/messages/mavlink2rest-enum'
+import { MessageFieldType } from './mavlink-message-actions'
+
+/* eslint-disable jsdoc/require-jsdoc */
+interface MessageField {
+  value: number | string | boolean
+  type: MessageFieldType
+  description: string
+  units?: string
+  required: boolean
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
+// Partial message field definitions for each MAVLink message type
+export const messageFieldDefinitions: Partial<Record<MAVLinkType, Record<string, MessageField>>> = {
+  [MAVLinkType.COMMAND_LONG]: {
+    target_system: {
+      value: 1,
+      type: MessageFieldType.NUMBER,
+      description: 'System ID of target system',
+      required: true,
+    },
+    target_component: {
+      value: 1,
+      type: MessageFieldType.NUMBER,
+      description: 'Component ID of target component',
+      required: true,
+    },
+    command: {
+      value: 'MAV_CMD_COMPONENT_ARM_DISARM',
+      type: MessageFieldType.TYPE_STRUCT_ENUM,
+      description: 'Command ID',
+      required: true,
+    },
+    confirmation: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Confirmation value (0: first transmission, 1-255: confirmations)',
+      required: true,
+    },
+    param1: {
+      value: 1,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 1',
+      required: false,
+    },
+    param2: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 2',
+      required: false,
+    },
+    param3: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 3',
+      required: false,
+    },
+    param4: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 4',
+      required: false,
+    },
+    param5: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 5',
+      required: false,
+    },
+    param6: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 6',
+      required: false,
+    },
+    param7: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 7',
+      required: false,
+    },
+  },
+  [MAVLinkType.COMMAND_INT]: {
+    target_system: {
+      value: 1,
+      type: MessageFieldType.NUMBER,
+      description: 'System ID of target system',
+      required: true,
+    },
+    target_component: {
+      value: 1,
+      type: MessageFieldType.NUMBER,
+      description: 'Component ID of target component',
+      required: true,
+    },
+    command: {
+      value: 'MAV_CMD_DO_REPOSITION',
+      type: MessageFieldType.TYPE_STRUCT_ENUM,
+      description: 'Command ID',
+      required: true,
+    },
+    frame: {
+      value: 'MAV_FRAME_GLOBAL',
+      type: MessageFieldType.TYPE_STRUCT_ENUM,
+      description: 'Coordinate frame',
+      required: true,
+    },
+    current: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Current sequence number',
+      required: true,
+    },
+    autocontinue: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Autocontinue bit',
+      required: true,
+    },
+    param1: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 1',
+      required: false,
+    },
+    param2: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 2',
+      required: false,
+    },
+    param3: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 3',
+      required: false,
+    },
+    param4: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Parameter 4',
+      required: false,
+    },
+    x: {
+      value: -275600000,
+      type: MessageFieldType.NUMBER,
+      description: 'Latitude',
+      required: false,
+    },
+    y: {
+      value: -484500000,
+      type: MessageFieldType.NUMBER,
+      description: 'Longitude',
+      required: false,
+    },
+    z: {
+      value: 0,
+      type: MessageFieldType.NUMBER,
+      description: 'Altitude',
+      required: false,
+    },
+  },
+} as const
diff --git a/src/libs/actions/mavlink-message-actions.ts b/src/libs/actions/mavlink-message-actions.ts
new file mode 100644
index 000000000..6cdcf8579
--- /dev/null
+++ b/src/libs/actions/mavlink-message-actions.ts
@@ -0,0 +1,163 @@
+import { sendMavlinkMessage } from '../communication/mavlink'
+import type { Message } from '../connection/m2r/messages/mavlink2rest'
+import { MAVLinkType } from '../connection/m2r/messages/mavlink2rest-enum'
+import {
+  availableCockpitActions,
+  CockpitAction,
+  CockpitActionsFunction,
+  deleteAction,
+  registerActionCallback,
+  registerNewAction,
+} from '../joystick/protocols/cockpit-actions'
+import { getCockpitActionVariableData } from './data-lake'
+
+const mavlinkMessageActionIdPrefix = 'mavlink-message-action'
+
+/**
+ * Enum with the possible message field types
+ */
+export enum MessageFieldType {
+  NUMBER = 'number',
+  STRING = 'string',
+  BOOLEAN = 'boolean',
+  TYPE_STRUCT_ENUM = 'type_struct_enum',
+}
+
+export type MavlinkMessageConfigField = {
+  /**
+   * The type of the field
+   * Determines how the value is processed
+   */
+  type: MessageFieldType
+  /**
+   * The value of the field
+   */
+  value: any
+}
+
+export type MavlinkMessageConfig = Record<string, MavlinkMessageConfigField> | string
+
+export type MavlinkMessageActionConfig = {
+  /**
+   * The name of the action
+   */
+  name: string
+  /**
+   * The type of MAVLink message to send
+   */
+  messageType: MAVLinkType
+  /**
+   * The key-value pairs of the message fields
+   */
+  messageConfig: MavlinkMessageConfig
+}
+
+let registeredMavlinkMessageActionConfigs: Record<string, MavlinkMessageActionConfig> = {}
+
+export const registerMavlinkMessageActionConfig = (action: MavlinkMessageActionConfig): void => {
+  const id = `${mavlinkMessageActionIdPrefix} (${action.name})`
+  registeredMavlinkMessageActionConfigs[id] = action
+  saveMavlinkMessageActionConfigs()
+  updateCockpitActions()
+}
+
+export const getMavlinkMessageActionConfig = (id: string): MavlinkMessageActionConfig | undefined => {
+  return registeredMavlinkMessageActionConfigs[id]
+}
+
+export const getAllMavlinkMessageActionConfigs = (): Record<string, MavlinkMessageActionConfig> => {
+  return registeredMavlinkMessageActionConfigs
+}
+
+export const deleteMavlinkMessageActionConfig = (id: string): void => {
+  delete registeredMavlinkMessageActionConfigs[id]
+  saveMavlinkMessageActionConfigs()
+  updateCockpitActions()
+}
+
+export const updateMavlinkMessageActionConfig = (id: string, updatedAction: MavlinkMessageActionConfig): void => {
+  registeredMavlinkMessageActionConfigs[id] = updatedAction
+  saveMavlinkMessageActionConfigs()
+  updateCockpitActions()
+}
+
+export const updateCockpitActions = (): void => {
+  // Remove existing MAVLink message actions
+  Object.entries(availableCockpitActions).forEach(([id]) => {
+    if (id.includes(mavlinkMessageActionIdPrefix)) {
+      deleteAction(id as CockpitActionsFunction)
+    }
+  })
+
+  // Register new actions
+  const mavlinkActions = getAllMavlinkMessageActionConfigs()
+  for (const [id, action] of Object.entries(mavlinkActions)) {
+    try {
+      const cockpitAction = new CockpitAction(id as CockpitActionsFunction, action.name)
+      registerNewAction(cockpitAction)
+      registerActionCallback(cockpitAction, getMavlinkMessageActionCallback(id))
+    } catch (error) {
+      console.error(`Error registering action ${id}: ${error}`)
+    }
+  }
+}
+
+export const loadMavlinkMessageActionConfigs = (): void => {
+  const savedActions = localStorage.getItem('cockpit-mavlink-message-actions')
+  if (savedActions) {
+    registeredMavlinkMessageActionConfigs = JSON.parse(savedActions)
+  }
+}
+
+export const saveMavlinkMessageActionConfigs = (): void => {
+  localStorage.setItem('cockpit-mavlink-message-actions', JSON.stringify(registeredMavlinkMessageActionConfigs))
+}
+
+export type MavlinkMessageActionCallback = () => void
+
+export const getMavlinkMessageActionCallback = (id: string): MavlinkMessageActionCallback => {
+  const action = getMavlinkMessageActionConfig(id)
+  if (!action) {
+    throw new Error(`Action with id ${id} not found.`)
+  }
+
+  return () => {
+    const message: Message = {
+      type: action.messageType,
+      ...processMessageConfig(action.messageConfig),
+    }
+    sendMavlinkMessage(message)
+  }
+}
+
+const processMessageConfig = (config: MavlinkMessageConfig): Record<string, any> => {
+  let processedConfig: Record<string, any> = {}
+
+  if (typeof config === 'string') {
+    const configWithDynamicValues = config.replace(/{{\s*([^{}\s]+)\s*}}/g, (match, p1) => {
+      const variableValue = getCockpitActionVariableData(p1)
+      return variableValue ? variableValue.toString() : match
+    })
+    processedConfig = JSON.parse(configWithDynamicValues)
+  } else {
+    for (const [k, v] of Object.entries(config)) {
+      if (typeof v.value === 'string' && v.value.startsWith('{{') && v.value.endsWith('}}')) {
+        const variableName = v.value.slice(2, -2).trim()
+        const variableValue = getCockpitActionVariableData(variableName)
+        processedConfig[k] = variableValue
+      } else if (v.type === MessageFieldType.TYPE_STRUCT_ENUM) {
+        processedConfig[k] = { type: v.value }
+      } else if (v.type === MessageFieldType.NUMBER) {
+        processedConfig[k] = Number(v.value)
+      } else {
+        processedConfig[k] = v.value
+      }
+    }
+  }
+
+  return processedConfig
+}
+
+// Initialize actions on module load
+loadMavlinkMessageActionConfigs()
+updateCockpitActions()
diff --git a/src/views/ConfigurationActionsView.vue b/src/views/ConfigurationActionsView.vue
index 171fea4f7..4100b5e1f 100644
--- a/src/views/ConfigurationActionsView.vue
+++ b/src/views/ConfigurationActionsView.vue
@@ -105,6 +105,7 @@
             </div>
           </template>
         </ExpansiblePanel>
+        <MavlinkMessageActionConfig />
       </div>
     </template>
   </BaseConfigurationView>
@@ -314,6 +315,7 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 
+import MavlinkMessageActionConfig from '@/components/configuration/MavlinkMessageActionConfig.vue'
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import { openSnackbar } from '@/composables/snackbar'
 import { getAllCockpitActionVariablesInfo } from '@/libs/actions/data-lake'