joystick: extension-suggestions: Add protocol filtering and use under-case on API

Author: rafaellehmkuhl

src/components/ExternalFeaturesDiscoveryModal.vue

@@ -842,7 +842,9 @@ const applyAllSuggestions = (): void => {
 
   // Apply each suggestion
   extensionGroup.suggestions.forEach((suggestion) => {
-    const matchingAction = availableActions.find((action) => action.id === suggestion.actionId)
+    const matchingAction = availableActions.find(
+      (action) => action.id === suggestion.actionId && action.protocol === suggestion.actionProtocol
+    )
     if (matchingAction) {
       // Apply to selected profiles
       selectedProfiles.value.forEach((profileHash) => {
@@ -893,7 +895,10 @@ const applyJoystickSuggestion = (): void => {
 
   // Find a matching action from available actions
   const availableActions = allAvailableButtons()
-  const matchingAction = availableActions.find((action) => action.id === selectedSuggestion.value!.actionId)
+  const matchingAction = availableActions.find(
+    (action) =>
+      action.id === selectedSuggestion.value!.actionId && action.protocol === selectedSuggestion.value!.actionProtocol
+  )
 
   if (!matchingAction) {
     openSnackbar({

src/libs/blueos.ts

@@ -5,7 +5,7 @@ import { type ActionConfig } from '@/libs/joystick/protocols/cockpit-actions'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
 import { type RawCpuLoadInfo, type RawCpuTempInfo, type RawNetworkInfo } from '@/types/blueos'
-import { JoystickMapSuggestion, JoystickMapSuggestionsFromExtension } from '@/types/joystick'
+import { JoystickMapSuggestion, JoystickMapSuggestionAPI, JoystickMapSuggestionsFromExtension } from '@/types/joystick'
 import { ExternalWidgetSetupInfo } from '@/types/widgets'
 
 /**
@@ -31,7 +31,7 @@ interface ExtrasJson {
   /**
    * A list of joystick map suggestions offered by the extension.
    */
-  joystick_suggestions?: JoystickMapSuggestion[]
+  joystick_suggestions?: JoystickMapSuggestionAPI[]
 }
 
 /**
@@ -231,7 +231,10 @@ export const getJoystickSuggestionsFromBlueOS = async (): Promise<JoystickMapSug
 
           const suggestions: JoystickMapSuggestion[] = extraJson.joystick_suggestions.map((suggestion, index) => ({
             ...suggestion,
-            id: `${extensionName}-${index}-${suggestion.actionName.replace(/\s+/g, '-').toLowerCase()}`,
+            actionProtocol: suggestion.action_protocol,
+            actionName: suggestion.action_name,
+            actionId: suggestion.action_id,
+            id: `${extensionName}-${index}-${suggestion.action_protocol}-${suggestion.action_id}`,
           }))
 
           suggestionsMap.set(extensionName, {

src/types/joystick.ts

@@ -539,6 +539,10 @@ export interface JoystickMapSuggestion {
    * Unique identifier for this suggestion
    */
   id: string
+  /**
+   * Protocol of the action to be mapped (e.g. cockpit-action, data-lake-variable, etc.)
+   */
+  actionProtocol: JoystickProtocol
   /**
    * Human-readable name of the action to be mapped
    */
@@ -561,6 +565,22 @@ export interface JoystickMapSuggestion {
   description?: string
 }
 
+/* eslint-disable jsdoc/require-jsdoc */
+/**
+ * Interface for the API response of a Joystick map suggestion from BlueOS extensions
+ * Replicates the JoystickMapSuggestion interface, but with snake_case field names to match the API response
+ */
+export interface JoystickMapSuggestionAPI {
+  id: string
+  action_protocol: JoystickProtocol
+  action_name: string
+  action_id: string
+  button: number
+  modifier: CockpitModifierKeyOption
+  description?: string
+}
+/* eslint-enable jsdoc/require-jsdoc */
+
 /**
  * Joystick map suggestions grouped by extension
  */