From 84b7aca7aea654bbd85021c274c280946d624c8b Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 6 Nov 2024 13:56:56 -0300
Subject: [PATCH 1/3] cockpit-actions: Expose actions-manager and data-lake
 methods globally

This way free JavaScript functions, for example, can take advantage of them.
---
 src/libs/cosmos.ts | 68 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/src/libs/cosmos.ts b/src/libs/cosmos.ts
index fe128bb33..29c488404 100644
--- a/src/libs/cosmos.ts
+++ b/src/libs/cosmos.ts
@@ -1,5 +1,26 @@
 import { isBrowser } from 'browser-or-node'
 
+import {
+  cockpitActionVariableData,
+  createCockpitActionVariable,
+  deleteCockpitActionVariable,
+  getAllCockpitActionVariablesInfo,
+  getCockpitActionVariableData,
+  getCockpitActionVariableInfo,
+  listenCockpitActionVariable,
+  setCockpitActionVariableData,
+  unlistenCockpitActionVariable,
+  updateCockpitActionVariableInfo,
+} from './actions/data-lake'
+import {
+  availableCockpitActions,
+  deleteAction,
+  executeActionCallback,
+  registerActionCallback,
+  registerNewAction,
+  unregisterActionCallback,
+} from './joystick/protocols/cockpit-actions'
+
 declare global {
   /**
    * Running time assert for development
@@ -58,6 +79,31 @@ declare global {
      */
     sum(): number
   }
+
+  /* eslint-disable jsdoc/require-jsdoc */
+  interface Window {
+    cockpit: {
+      // Data lake:
+      cockpitActionVariableData: typeof cockpitActionVariableData
+      getCockpitActionVariableData: typeof getCockpitActionVariableData
+      listenCockpitActionVariable: typeof listenCockpitActionVariable
+      unlistenCockpitActionVariable: typeof unlistenCockpitActionVariable
+      getAllCockpitActionVariablesInfo: typeof getAllCockpitActionVariablesInfo
+      getCockpitActionVariableInfo: typeof getCockpitActionVariableInfo
+      setCockpitActionVariableData: typeof setCockpitActionVariableData
+      createCockpitActionVariable: typeof createCockpitActionVariable
+      updateCockpitActionVariableInfo: typeof updateCockpitActionVariableInfo
+      deleteCockpitActionVariable: typeof deleteCockpitActionVariable
+      // Cockpit actions:
+      availableCockpitActions: typeof availableCockpitActions
+      registerNewAction: typeof registerNewAction
+      deleteAction: typeof deleteAction
+      registerActionCallback: typeof registerActionCallback
+      unregisterActionCallback: typeof unregisterActionCallback
+      executeActionCallback: typeof executeActionCallback
+    }
+  }
+  /* eslint-enable jsdoc/require-jsdoc */
 }
 
 // Use global as window when running for browsers
@@ -65,6 +111,28 @@ if (isBrowser) {
   var global = window /* eslint-disable-line */
 }
 
+// Expose data-lake and cockpit action methods to the global scope under a "cockpit" property
+window.cockpit = {
+  // Data lake:
+  cockpitActionVariableData: cockpitActionVariableData,
+  getCockpitActionVariableData: getCockpitActionVariableData,
+  listenCockpitActionVariable: listenCockpitActionVariable,
+  unlistenCockpitActionVariable: unlistenCockpitActionVariable,
+  getAllCockpitActionVariablesInfo: getAllCockpitActionVariablesInfo,
+  getCockpitActionVariableInfo: getCockpitActionVariableInfo,
+  setCockpitActionVariableData: setCockpitActionVariableData,
+  createCockpitActionVariable: createCockpitActionVariable,
+  updateCockpitActionVariableInfo: updateCockpitActionVariableInfo,
+  deleteCockpitActionVariable: deleteCockpitActionVariable,
+  // Cockpit actions:
+  availableCockpitActions: availableCockpitActions,
+  registerNewAction: registerNewAction,
+  deleteAction: deleteAction,
+  registerActionCallback: registerActionCallback,
+  unregisterActionCallback: unregisterActionCallback,
+  executeActionCallback: executeActionCallback,
+}
+
 /* c8 ignore start */
 
 // Global functions

From 00948ee567d3d646fe8e712c462a8789fa62c8ca Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 6 Nov 2024 13:58:32 -0300
Subject: [PATCH 2/3] cockpit-actions: Add Vanilla JavaScript actions

With this, the user can create vanilla JavaScript methods that can be called from anywhere in the application. This basically allows one to extend Cockpit capabilities to anything.
---
 .../configuration/JavascriptActionConfig.vue  | 304 ++++++++++++++++++
 src/libs/actions/free-javascript.ts           |  98 ++++++
 src/views/ConfigurationActionsView.vue        |   2 +
 3 files changed, 404 insertions(+)
 create mode 100644 src/components/configuration/JavascriptActionConfig.vue
 create mode 100644 src/libs/actions/free-javascript.ts

diff --git a/src/components/configuration/JavascriptActionConfig.vue b/src/components/configuration/JavascriptActionConfig.vue
new file mode 100644
index 000000000..96ec7febe
--- /dev/null
+++ b/src/components/configuration/JavascriptActionConfig.vue
@@ -0,0 +1,304 @@
+<template>
+  <ExpansiblePanel no-top-divider no-bottom-divider :is-expanded="!interfaceStore.isOnPhoneScreen">
+    <template #title>Vanilla JavaScript Actions</template>
+    <template #info>
+      <p>View, manage, and create vanilla JavaScript actions.</p>
+      <p>Take a look at <code>window.cockpit</code> to see available functions and variables.</p>
+    </template>
+    <template #content>
+      <div class="flex justify-center flex-col ml-2 mb-8 mt-2 w-[640px]">
+        <v-data-table
+          :items="allSavedActionConfigs"
+          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-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 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="2" 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 JavaScript 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="2" class="text-center flex items-center justify-center h-[50px] w-full">
+                <p class="text-[16px] ml-[170px] w-full">No JavaScript actions found</p>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
+      </div>
+    </template>
+  </ExpansiblePanel>
+
+  <v-dialog v-model="actionDialog.show" max-width="800px" persistent>
+    <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="createActionConfig">
+          <v-text-field
+            v-model="newActionConfig.name"
+            label="Action Name"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+
+          <div class="d-flex align-center justify-space-between mb-2">
+            <h3 class="text-subtitle-2 font-weight-bold">JavaScript Code</h3>
+            <div class="text-caption">Use getVariable('variableId') to access data lake variables</div>
+          </div>
+          <v-textarea
+            v-model="newActionConfig.code"
+            label="JavaScript Code"
+            :error-messages="codeError"
+            rows="10"
+            variant="outlined"
+            density="compact"
+            @update:model-value="validateCode"
+          ></v-textarea>
+        </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="testAction">Test Action</v-btn>
+            <v-btn @click="resetNewAction">Reset</v-btn>
+            <v-btn class="text-white" :disabled="!isFormValid" @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 {
+  deleteJavascriptActionConfig,
+  executeActionCode,
+  getAllJavascriptActionConfigs,
+  getJavascriptActionConfig,
+  JavascriptActionConfig,
+  registerJavascriptActionConfig,
+} from '@/libs/actions/free-javascript'
+import { executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
+
+const actionsConfigs = reactive<Record<string, JavascriptActionConfig>>({})
+const newActionConfig = ref<JavascriptActionConfig>({
+  name: '',
+  code: '',
+})
+
+const codeError = ref('')
+const editMode = ref(false)
+const actionDialog = ref({ show: false })
+
+const isFormValid = computed(() => {
+  return newActionConfig.value.name && newActionConfig.value.code && !codeError.value
+})
+
+const validateCode = (code: string): void => {
+  try {
+    new Function(code)
+    codeError.value = ''
+  } catch (error) {
+    codeError.value = `Invalid JavaScript: ${error}`
+  }
+}
+
+const editActionConfig = (id: string): void => {
+  editMode.value = true
+  newActionConfig.value = JSON.parse(JSON.stringify(actionsConfigs[id])) // Deep copy
+}
+
+const createActionConfig = (): void => {
+  editMode.value = false
+  registerJavascriptActionConfig(newActionConfig.value)
+  loadSavedActions()
+  resetNewAction()
+}
+
+const saveActionConfig = (): void => {
+  createActionConfig()
+  closeActionDialog()
+}
+
+const resetNewAction = (): void => {
+  newActionConfig.value = {
+    name: '',
+    code: '',
+  }
+  codeError.value = ''
+  editMode.value = false
+}
+
+const allSavedActionConfigs = computed(() => {
+  return Object.entries(actionsConfigs).map(([id, action]) => ({ id, ...action }))
+})
+
+const deleteActionConfig = (id: string): void => {
+  delete actionsConfigs[id]
+  deleteJavascriptActionConfig(id)
+  loadSavedActions()
+}
+
+const loadSavedActions = (): void => {
+  Object.assign(actionsConfigs, getAllJavascriptActionConfigs())
+}
+
+const runAction = (id: string): void => {
+  executeActionCallback(id)
+}
+
+const testAction = (): void => {
+  executeActionCode(newActionConfig.value.code)
+}
+
+const exportAction = (id: string): void => {
+  const action = getJavascriptActionConfig(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 json = JSON.parse(e.target?.result as string)
+          validateCode(json.code)
+
+          if (!json.name || !json.code || codeError.value) {
+            throw new Error('Invalid JavaScript action configuration file.')
+          }
+
+          registerJavascriptActionConfig(json as JavascriptActionConfig)
+          loadSavedActions()
+        } catch (error) {
+          openSnackbar({ message: `Cannot import action. ${error}`, variant: 'error', duration: 5000 })
+        }
+      }
+      reader.readAsText(file)
+    }
+  }
+  input.click()
+  input.remove()
+}
+
+const closeActionDialog = (): void => {
+  actionDialog.value.show = false
+  resetNewAction()
+}
+
+const openActionEditDialog = (id: string): void => {
+  editActionConfig(id)
+  actionDialog.value.show = true
+}
+
+const openNewActionDialog = (): void => {
+  resetNewAction()
+  actionDialog.value.show = true
+}
+
+onMounted(() => {
+  loadSavedActions()
+})
+</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/free-javascript.ts b/src/libs/actions/free-javascript.ts
new file mode 100644
index 000000000..72b18b58b
--- /dev/null
+++ b/src/libs/actions/free-javascript.ts
@@ -0,0 +1,98 @@
+import {
+  CockpitAction,
+  CockpitActionsFunction,
+  deleteAction,
+  registerActionCallback,
+  registerNewAction,
+} from '../joystick/protocols/cockpit-actions'
+
+const javascriptActionIdPrefix = 'javascript-action'
+
+export type JavascriptActionConfig = {
+  /**
+   * The name of the action
+   */
+  name: string
+  /**
+   * The JavaScript code to execute
+   */
+  code: string
+}
+
+let registeredJavascriptActionConfigs: Record<string, JavascriptActionConfig> = {}
+
+export const registerJavascriptActionConfig = (action: JavascriptActionConfig): void => {
+  const id = `${javascriptActionIdPrefix} (${action.name})`
+  registeredJavascriptActionConfigs[id] = action
+  saveJavascriptActionConfigs()
+  updateCockpitActions()
+}
+
+export const getJavascriptActionConfig = (id: string): JavascriptActionConfig | undefined => {
+  return registeredJavascriptActionConfigs[id]
+}
+
+export const getAllJavascriptActionConfigs = (): Record<string, JavascriptActionConfig> => {
+  return registeredJavascriptActionConfigs
+}
+
+export const deleteJavascriptActionConfig = (id: string): void => {
+  delete registeredJavascriptActionConfigs[id]
+  saveJavascriptActionConfigs()
+  updateCockpitActions()
+}
+
+export const updateCockpitActions = (): void => {
+  Object.entries(registeredJavascriptActionConfigs).forEach(([id]) => {
+    if (id.includes(javascriptActionIdPrefix)) {
+      deleteAction(id as CockpitActionsFunction)
+    }
+  })
+
+  const javascriptActions = getAllJavascriptActionConfigs()
+  for (const [id, action] of Object.entries(javascriptActions)) {
+    try {
+      const cockpitAction = new CockpitAction(id as CockpitActionsFunction, action.name)
+      registerNewAction(cockpitAction)
+      registerActionCallback(cockpitAction, getJavascriptActionCallback(id))
+    } catch (error) {
+      console.error(`Error registering action ${id}: ${error}`)
+    }
+  }
+}
+
+export const loadJavascriptActionConfigs = (): void => {
+  const savedActions = localStorage.getItem('cockpit-javascript-actions')
+  if (savedActions) {
+    registeredJavascriptActionConfigs = JSON.parse(savedActions)
+  }
+}
+
+export const saveJavascriptActionConfigs = (): void => {
+  localStorage.setItem('cockpit-javascript-actions', JSON.stringify(registeredJavascriptActionConfigs))
+}
+
+export type JavascriptActionCallback = () => void
+
+export const executeActionCode = (code: string): void => {
+  try {
+    // Execute the code
+    new Function(code)()
+  } catch (error) {
+    console.error(`Error executing JavaScript action:`, error)
+  }
+}
+
+export const getJavascriptActionCallback = (id: string): JavascriptActionCallback => {
+  const action = getJavascriptActionConfig(id)
+  if (!action) {
+    throw new Error(`Action with id ${id} not found.`)
+  }
+
+  return () => {
+    executeActionCode(action.code)
+  }
+}
+
+loadJavascriptActionConfigs()
+updateCockpitActions()
diff --git a/src/views/ConfigurationActionsView.vue b/src/views/ConfigurationActionsView.vue
index 4100b5e1f..0b80c61a8 100644
--- a/src/views/ConfigurationActionsView.vue
+++ b/src/views/ConfigurationActionsView.vue
@@ -106,6 +106,7 @@
           </template>
         </ExpansiblePanel>
         <MavlinkMessageActionConfig />
+        <JavascriptActionConfig />
       </div>
     </template>
   </BaseConfigurationView>
@@ -315,6 +316,7 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 
+import JavascriptActionConfig from '@/components/configuration/JavascriptActionConfig.vue'
 import MavlinkMessageActionConfig from '@/components/configuration/MavlinkMessageActionConfig.vue'
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import { openSnackbar } from '@/composables/snackbar'

From be481126cfc3e1176db3eace118c8ff2db87630f Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 11 Nov 2024 12:34:30 -0300
Subject: [PATCH 3/3] cockpit-actions: Segregate HTTP Request actions on its
 own component

For the sake of code maintainability.
---
 .../configuration/HttpRequestActionConfig.vue | 662 ++++++++++++++++++
 src/views/ConfigurationActionsView.vue        | 657 +----------------
 2 files changed, 664 insertions(+), 655 deletions(-)
 create mode 100644 src/components/configuration/HttpRequestActionConfig.vue

diff --git a/src/components/configuration/HttpRequestActionConfig.vue b/src/components/configuration/HttpRequestActionConfig.vue
new file mode 100644
index 000000000..f1f757334
--- /dev/null
+++ b/src/components/configuration/HttpRequestActionConfig.vue
@@ -0,0 +1,662 @@
+<template>
+  <ExpansiblePanel no-top-divider no-bottom-divider :is-expanded="!interfaceStore.isOnPhoneScreen">
+    <template #title>HTTP Request Actions</template>
+    <template #info>
+      <p>View, manage, and create HTTP request actions.</p>
+    </template>
+    <template #content>
+      <div class="flex justify-center flex-col ml-2 mb-8 mt-2 w-[640px]">
+        <v-data-table
+          :items="allSavedActionConfigs"
+          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">URL</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.url }}</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 HTTP 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 HTTP request actions found</p>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
+      </div>
+    </template>
+  </ExpansiblePanel>
+
+  <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="createActionConfig">
+          <v-text-field
+            v-model="newActionConfig.name"
+            label="Action Name"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+          <v-select
+            v-model="newActionConfig.method"
+            :items="availableHttpRequestMethods"
+            label="Request Type"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-select>
+          <v-text-field
+            v-model="newActionConfig.url"
+            label="URL"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+
+          <div class="d-flex align-center justify-space-between">
+            <h3 class="text-subtitle-2 font-weight-bold">URL Parameters</h3>
+            <v-btn variant="text" class="px-2 py-1" density="compact" @click="openUrlParamDialog">
+              <v-icon size="small">mdi-plus</v-icon>
+              Add
+            </v-btn>
+          </div>
+          <div v-if="Object.keys(newActionConfig.urlParams).length > 0" class="mb-2">
+            <v-chip-group>
+              <v-chip
+                v-for="(param, index) in Object.entries(newActionConfig.urlParams)"
+                :key="`param-${index}`"
+                closable
+                size="x-small"
+                class="m-1"
+                @click:close="removeUrlParam(param[0])"
+              >
+                {{ param[0] }}: {{ param[1] }}
+              </v-chip>
+            </v-chip-group>
+          </div>
+
+          <div class="d-flex align-center justify-space-between">
+            <h3 class="text-subtitle-2 font-weight-bold">Headers</h3>
+            <v-btn variant="text" class="px-2 py-1" density="compact" @click="openHeaderDialog">
+              <v-icon size="small">mdi-plus</v-icon>
+              Add
+            </v-btn>
+          </div>
+          <div v-if="Object.keys(newActionConfig.headers).length > 0" class="mb-2">
+            <v-chip-group>
+              <v-chip
+                v-for="(header, index) in Object.entries(newActionConfig.headers)"
+                :key="`header-${index}`"
+                closable
+                size="x-small"
+                class="m-1"
+                @click:close="removeHeader(header[0])"
+              >
+                {{ header[0] }}: {{ header[1] }}
+              </v-chip>
+            </v-chip-group>
+          </div>
+
+          <div class="d-flex align-center justify-space-between">
+            <h3 class="text-subtitle-2 font-weight-bold">JSON Body</h3>
+            <v-btn variant="text" class="px-2 py-1" density="compact" @click="openJsonDialog">
+              <v-icon size="small">mdi-code-json</v-icon>
+              Edit
+            </v-btn>
+          </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">
+          <v-btn color="white" variant="text" @click="closeActionDialog">Cancel</v-btn>
+          <div class="flex gap-x-10">
+            <v-btn variant="text" @click="resetNewAction">Reset</v-btn>
+            <v-btn color="primary" :disabled="!isFormValid" variant="text" @click="saveActionConfig">
+              {{ editMode ? 'Save' : 'Create' }}
+            </v-btn>
+          </div>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- URL Parameter Dialog -->
+  <v-dialog v-model="urlParamDialog.show" max-width="400px">
+    <v-card class="rounded-lg px-6 py-2" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 text-center font-weight-bold pb-6">Add URL parameter</v-card-title>
+      <v-card-text class="pa-2">
+        <v-form class="d-flex flex-column gap-2" @submit.prevent="addUrlParameter">
+          <v-text-field
+            v-model="urlParamDialog.key"
+            label="Parameter Key"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+          <v-select
+            v-model="urlParamDialog.valueType"
+            :items="paramValueOptions"
+            label="Parameter Value"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-select>
+          <v-text-field
+            v-if="urlParamDialog.valueType === 'fixed'"
+            v-model="urlParamDialog.fixedValue"
+            label="Fixed Value"
+            required
+            variant="outlined"
+            density="compact"
+            placeholder="Non-dynamic value."
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+      <v-divider class="m-2" />
+      <v-card-actions class="pa-2 -mb-1">
+        <div class="flex w-full justify-between">
+          <v-btn color="white" variant="text" size="small" @click="closeUrlParamDialog">Cancel</v-btn>
+          <v-btn color="white" size="small" @click="saveUrlParameter()"> Save </v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- Header Dialog -->
+  <v-dialog v-model="headerDialog.show" max-width="400px">
+    <v-card class="rounded-lg p-3" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold pb-4 text-center">Add header</v-card-title>
+      <v-card-text class="pa-4">
+        <v-form class="d-flex flex-column gap-2" @submit.prevent="addHeader">
+          <v-text-field
+            v-model="headerDialog.key"
+            label="Header Key"
+            required
+            variant="outlined"
+            :error-messages="headerDialog.error"
+            density="compact"
+          ></v-text-field>
+          <v-text-field
+            v-model="headerDialog.value"
+            label="Header Value"
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+      <v-divider class="m-2" />
+      <v-card-actions class="pa-2 -mb-1">
+        <div class="flex w-full justify-between">
+          <v-btn color="white" variant="text" size="small" @click="closeHeaderDialog">Cancel</v-btn>
+          <v-btn color="white" size="small" @click="addHeader">Save</v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- JSON Body Dialog -->
+  <v-dialog v-model="bodyDialog.show" max-width="520px">
+    <v-card class="rounded-lg p-3" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold pa-2 text-center">Edit JSON body template</v-card-title>
+      <v-card-text class="px-6">
+        <v-form class="d-flex flex-column gap-2" @submit.prevent="saveJsonBody">
+          <v-textarea
+            v-model="bodyDialog.bodyText"
+            label="JSON Body Template"
+            hint="Use {{ inputId }} for dynamic values."
+            persistent-hint
+            :error-messages="bodyDialog.error"
+            rows="12"
+            variant="outlined"
+            density="compact"
+            @update:model-value="validateJsonTemplateForDialog"
+          ></v-textarea>
+        </v-form>
+      </v-card-text>
+      <v-divider class="m-2" />
+      <v-card-actions class="pa-2 -mb-1">
+        <div class="flex w-full justify-between">
+          <v-btn color="white" variant="text" @click="closeJsonDialog">Cancel</v-btn>
+          <v-btn color="white" :disabled="!bodyDialog.isValid" @click="saveJsonBody">Save</v-btn>
+        </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 { getAllCockpitActionVariablesInfo } from '@/libs/actions/data-lake'
+import {
+  availableHttpRequestMethods,
+  deleteHttpRequestActionConfig,
+  getAllHttpRequestActionConfigs,
+  getHttpRequestActionConfig,
+  HttpRequestActionConfig,
+  HttpRequestMethod,
+  registerHttpRequestActionConfig,
+} from '@/libs/actions/http-request'
+import { executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+const interfaceStore = useAppInterfaceStore()
+
+const actionsConfigs = reactive<Record<string, HttpRequestActionConfig>>({})
+const newActionConfig = ref<HttpRequestActionConfig>({
+  name: '',
+  method: HttpRequestMethod.GET,
+  url: '',
+  headers: {},
+  urlParams: {},
+  body: '',
+})
+
+const bodyInputError = ref('')
+
+const urlParamDialog = ref({
+  show: false,
+  key: '',
+  valueType: 'fixed',
+  fixedValue: '',
+})
+
+const bodyDialog = ref({
+  show: false,
+  bodyText: '',
+  error: '',
+  isValid: false,
+})
+
+const headerDialog = ref({
+  show: false,
+  key: '',
+  value: '',
+  error: '',
+})
+
+const paramValueOptions = computed(() => {
+  const options = [{ title: 'Fixed (specify below)', value: 'fixed' }]
+  const availableInputParameters = getAllCockpitActionVariablesInfo()
+  Object.values(availableInputParameters).forEach((parameter) => {
+    options.push({ title: parameter.id, value: parameter.id })
+  })
+  return options
+})
+
+const isFormValid = computed(() => {
+  return isValidRequestConfig(newActionConfig.value)
+})
+
+const isValidRequestConfig = (config: HttpRequestActionConfig): boolean => {
+  return (
+    !!config.name &&
+    !!config.method &&
+    !!config.url &&
+    isValidUrlParams(config.urlParams) &&
+    isValidHeaders(config.headers).isValid &&
+    isValidJsonTemplate(config.body)
+  )
+}
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+const validateJsonTemplate = (template: string): { isValid: boolean; error: string } => {
+  if (!template.trim()) {
+    return { isValid: true, error: '' }
+  }
+
+  // Check if all placeholders are properly formatted
+  const placeholderRegex = /\{\{\s*([^}]+)\s*\}\}/g
+  const placeholders = template.match(placeholderRegex)
+  if (placeholders) {
+    const availableInputs = paramValueOptions.value.map((option) => option.value).filter((option) => option !== 'fixed')
+    for (const placeholder of placeholders) {
+      const inputName = placeholder.match(/\{\{\s*([^}]+)\s*\}\}/)?.[1]?.trim()
+      if (!inputName) {
+        return { isValid: false, error: `Invalid placeholder format: ${placeholder}` }
+      }
+      if (!availableInputs.includes(inputName)) {
+        return {
+          isValid: false,
+          error: `Invalid input name in placeholder: ${inputName}. Available inputs are: ${availableInputs.join(', ')}`,
+        }
+      }
+    }
+  }
+
+  // Replace placeholders with a valid JSON value temporarily
+  const tempTemplate = template.replace(placeholderRegex, 'PLACEHOLDER')
+
+  try {
+    const parsed = JSON.parse(tempTemplate)
+    if (typeof parsed !== 'object' || parsed === null) {
+      return { isValid: false, error: 'Invalid JSON structure' }
+    }
+
+    return { isValid: true, error: '' }
+  } catch (error) {
+    return { isValid: false, error: 'Invalid JSON: ' + (error as Error).message }
+  }
+}
+
+const isValidJsonTemplate = (template: string): boolean => {
+  const { isValid } = validateJsonTemplate(template)
+  return isValid
+}
+
+const validateJsonTemplateForDialog = (template: string): void => {
+  const { isValid, error } = validateJsonTemplate(template)
+  bodyDialog.value.error = error
+  bodyDialog.value.isValid = isValid
+}
+
+const isValidUrlParams = (params: Record<string, string>): boolean => {
+  return Object.entries(params).every(([key, value]) => {
+    if (value.startsWith('{{') && value.endsWith('}}')) {
+      const parsedValue = value.replace('{{', '').replace('}}', '').trim()
+      return key !== '' && value !== '' && paramValueOptions.value.map((option) => option.value).includes(parsedValue)
+    }
+    return key !== '' && value !== ''
+  })
+}
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+const isValidHeaders = (headers: Record<string, string>): { isValid: boolean; error: string } => {
+  for (const [key, value] of Object.entries(headers)) {
+    // Header keys should be non-empty and contain valid characters
+    const validKeyRegex = /^[a-zA-Z0-9!#$%&'*+-.^_`|~]+$/
+    if (!key || !validKeyRegex.test(key)) {
+      const error = 'Invalid header key. Use only letters, numbers, and common punctuation. No spaces allowed.'
+      return { isValid: false, error }
+    }
+
+    // Header values can be empty, but if not, they should not contain newlines
+    if (value && /[\r\n]/.test(value)) {
+      return { isValid: false, error: 'Header value cannot contain newlines.' }
+    }
+  }
+  return { isValid: true, error: '' }
+}
+
+const openUrlParamDialog = (): void => {
+  urlParamDialog.value = {
+    show: true,
+    key: '',
+    valueType: 'fixed',
+    fixedValue: '',
+  }
+}
+
+const closeUrlParamDialog = (): void => {
+  urlParamDialog.value.show = false
+}
+
+const addUrlParameter = (): void => {
+  const parsedValue = `{{ ${urlParamDialog.value.valueType} }}`
+  const value = urlParamDialog.value.valueType === 'fixed' ? urlParamDialog.value.fixedValue : parsedValue
+  newActionConfig.value.urlParams[urlParamDialog.value.key] = value
+  closeUrlParamDialog()
+}
+
+const openJsonDialog = (): void => {
+  bodyDialog.value = {
+    show: true,
+    bodyText: newActionConfig.value.body,
+    error: '',
+    isValid: isValidJsonTemplate(newActionConfig.value.body),
+  }
+}
+
+const closeJsonDialog = (): void => {
+  bodyDialog.value.show = false
+}
+
+const saveJsonBody = (): void => {
+  if (bodyDialog.value.isValid) {
+    newActionConfig.value.body = bodyDialog.value.bodyText
+    closeJsonDialog()
+  }
+}
+
+const removeUrlParam = (key: string): void => {
+  delete newActionConfig.value.urlParams[key]
+}
+
+const openHeaderDialog = (): void => {
+  headerDialog.value = {
+    show: true,
+    key: '',
+    value: '',
+    error: '',
+  }
+}
+
+const closeHeaderDialog = (): void => {
+  headerDialog.value.show = false
+  headerDialog.value.error = ''
+}
+
+const addHeader = (): void => {
+  const { isValid, error } = isValidHeaders({ [headerDialog.value.key]: headerDialog.value.value })
+  if (isValid) {
+    newActionConfig.value.headers[headerDialog.value.key] = headerDialog.value.value
+    closeHeaderDialog()
+  } else {
+    headerDialog.value.error = error
+  }
+}
+
+const removeHeader = (key: string): void => {
+  delete newActionConfig.value.headers[key]
+}
+
+const editMode = ref(false)
+
+const editActionConfig = (id: string): void => {
+  editMode.value = true
+  newActionConfig.value = JSON.parse(JSON.stringify(actionsConfigs[id])) // Deep copy
+}
+
+const createActionConfig = (): void => {
+  editMode.value = false
+  registerHttpRequestActionConfig(newActionConfig.value)
+  loadSavedActions()
+  resetNewAction()
+}
+
+const saveActionConfig = (): void => {
+  createActionConfig()
+  closeActionDialog()
+}
+
+const resetNewAction = (): void => {
+  newActionConfig.value = {
+    name: '',
+    method: HttpRequestMethod.GET,
+    url: '',
+    headers: {},
+    urlParams: {},
+    body: '',
+  }
+  bodyInputError.value = ''
+  editMode.value = false
+}
+
+const allSavedActionConfigs = computed(() => {
+  return Object.entries(actionsConfigs).map(([id, action]) => ({ id, ...action }))
+})
+
+const deleteActionConfig = (id: string): void => {
+  delete actionsConfigs[id]
+  deleteHttpRequestActionConfig(id)
+  loadSavedActions()
+}
+
+const loadSavedActions = (): void => {
+  Object.assign(actionsConfigs, getAllHttpRequestActionConfigs())
+}
+
+const runAction = (id: string): void => {
+  executeActionCallback(id)
+}
+
+const exportAction = (id: string): void => {
+  const action = getHttpRequestActionConfig(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 json = JSON.parse(e.target?.result as string)
+
+          if (!isValidRequestConfig(json)) {
+            throw new Error('Invalid request configuration file.')
+          }
+
+          registerHttpRequestActionConfig(json as HttpRequestActionConfig)
+          loadSavedActions()
+        } catch (error) {
+          openSnackbar({ message: `Cannot import action. ${error}`, variant: 'error', duration: 5000 })
+        }
+      }
+      reader.readAsText(file)
+    }
+  }
+  input.click()
+  input.remove()
+}
+
+const actionDialog = ref({
+  show: false,
+})
+
+const closeActionDialog = (): void => {
+  actionDialog.value.show = false
+  resetNewAction()
+}
+
+const openActionEditDialog = (id: string): void => {
+  editActionConfig(id)
+  actionDialog.value.show = true
+}
+
+const openNewActionDialog = (): void => {
+  resetNewAction()
+  actionDialog.value.show = true
+}
+
+const saveUrlParameter = (): void => {
+  addUrlParameter()
+  closeUrlParamDialog()
+}
+
+onMounted(() => {
+  loadSavedActions()
+})
+</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/views/ConfigurationActionsView.vue b/src/views/ConfigurationActionsView.vue
index 0b80c61a8..375f79d58 100644
--- a/src/views/ConfigurationActionsView.vue
+++ b/src/views/ConfigurationActionsView.vue
@@ -6,674 +6,21 @@
         class="flex-col h-full overflow-y-auto ml-[10px] pr-3 -mr-[10px] -mb-[10px]"
         :class="interfaceStore.isOnSmallScreen ? 'max-w-[80vw] max-h-[90vh]' : 'max-w-[680px] max-h-[85vh]'"
       >
-        <ExpansiblePanel no-top-divider no-bottom-divider :is-expanded="!interfaceStore.isOnPhoneScreen">
-          <template #title>HTTP Request Actions</template>
-          <template #info>
-            <p>View, manage, and create HTTP request actions.</p>
-          </template>
-          <template #content>
-            <div class="flex justify-center flex-col ml-2 mb-8 mt-2 w-[640px]">
-              <v-data-table
-                :items="allSavedActionConfigs"
-                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">URL</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.url }}</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 HTTP 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 HTTP request actions found</p>
-                    </td>
-                  </tr>
-                </template>
-              </v-data-table>
-            </div>
-          </template>
-        </ExpansiblePanel>
+        <HttpRequestActionConfig />
         <MavlinkMessageActionConfig />
         <JavascriptActionConfig />
       </div>
     </template>
   </BaseConfigurationView>
-
-  <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="createActionConfig">
-          <v-text-field
-            v-model="newActionConfig.name"
-            label="Action Name"
-            required
-            variant="outlined"
-            density="compact"
-          ></v-text-field>
-          <v-select
-            v-model="newActionConfig.method"
-            :items="availableHttpRequestMethods"
-            label="Request Type"
-            required
-            variant="outlined"
-            density="compact"
-          ></v-select>
-          <v-text-field
-            v-model="newActionConfig.url"
-            label="URL"
-            required
-            variant="outlined"
-            density="compact"
-          ></v-text-field>
-
-          <div class="d-flex align-center justify-space-between">
-            <h3 class="text-subtitle-2 font-weight-bold">URL Parameters</h3>
-            <v-btn variant="text" class="px-2 py-1" density="compact" @click="openUrlParamDialog">
-              <v-icon size="small">mdi-plus</v-icon>
-              Add
-            </v-btn>
-          </div>
-          <div v-if="Object.keys(newActionConfig.urlParams).length > 0" class="mb-2">
-            <v-chip-group>
-              <v-chip
-                v-for="(param, index) in Object.entries(newActionConfig.urlParams)"
-                :key="`param-${index}`"
-                closable
-                size="x-small"
-                class="m-1"
-                @click:close="removeUrlParam(param[0])"
-              >
-                {{ param[0] }}: {{ param[1] }}
-              </v-chip>
-            </v-chip-group>
-          </div>
-
-          <div class="d-flex align-center justify-space-between">
-            <h3 class="text-subtitle-2 font-weight-bold">Headers</h3>
-            <v-btn variant="text" class="px-2 py-1" density="compact" @click="openHeaderDialog">
-              <v-icon size="small">mdi-plus</v-icon>
-              Add
-            </v-btn>
-          </div>
-          <div v-if="Object.keys(newActionConfig.headers).length > 0" class="mb-2">
-            <v-chip-group>
-              <v-chip
-                v-for="(header, index) in Object.entries(newActionConfig.headers)"
-                :key="`header-${index}`"
-                closable
-                size="x-small"
-                class="m-1"
-                @click:close="removeHeader(header[0])"
-              >
-                {{ header[0] }}: {{ header[1] }}
-              </v-chip>
-            </v-chip-group>
-          </div>
-
-          <div class="d-flex align-center justify-space-between">
-            <h3 class="text-subtitle-2 font-weight-bold">JSON Body</h3>
-            <v-btn variant="text" class="px-2 py-1" density="compact" @click="openJsonDialog">
-              <v-icon size="small">mdi-code-json</v-icon>
-              Edit
-            </v-btn>
-          </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">
-          <v-btn color="white" variant="text" @click="closeActionDialog">Cancel</v-btn>
-          <div class="flex gap-x-10">
-            <v-btn variant="text" @click="resetNewAction">Reset</v-btn>
-            <v-btn color="primary" :disabled="!isFormValid" variant="text" @click="saveActionConfig">
-              {{ editMode ? 'Save' : 'Create' }}
-            </v-btn>
-          </div>
-        </div>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-
-  <!-- URL Parameter Dialog -->
-  <v-dialog v-model="urlParamDialog.show" max-width="400px">
-    <v-card class="rounded-lg px-6 py-2" :style="interfaceStore.globalGlassMenuStyles">
-      <v-card-title class="text-h6 text-center font-weight-bold pb-6">Add URL parameter</v-card-title>
-      <v-card-text class="pa-2">
-        <v-form class="d-flex flex-column gap-2" @submit.prevent="addUrlParameter">
-          <v-text-field
-            v-model="urlParamDialog.key"
-            label="Parameter Key"
-            required
-            variant="outlined"
-            density="compact"
-          ></v-text-field>
-          <v-select
-            v-model="urlParamDialog.valueType"
-            :items="paramValueOptions"
-            label="Parameter Value"
-            required
-            variant="outlined"
-            density="compact"
-          ></v-select>
-          <v-text-field
-            v-if="urlParamDialog.valueType === 'fixed'"
-            v-model="urlParamDialog.fixedValue"
-            label="Fixed Value"
-            required
-            variant="outlined"
-            density="compact"
-            placeholder="Non-dynamic value."
-          ></v-text-field>
-        </v-form>
-      </v-card-text>
-      <v-divider class="m-2" />
-      <v-card-actions class="pa-2 -mb-1">
-        <div class="flex w-full justify-between">
-          <v-btn color="white" variant="text" size="small" @click="closeUrlParamDialog">Cancel</v-btn>
-          <v-btn color="white" size="small" @click="saveUrlParameter()"> Save </v-btn>
-        </div>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-
-  <!-- Header Dialog -->
-  <v-dialog v-model="headerDialog.show" max-width="400px">
-    <v-card class="rounded-lg p-3" :style="interfaceStore.globalGlassMenuStyles">
-      <v-card-title class="text-h6 font-weight-bold pb-4 text-center">Add header</v-card-title>
-      <v-card-text class="pa-4">
-        <v-form class="d-flex flex-column gap-2" @submit.prevent="addHeader">
-          <v-text-field
-            v-model="headerDialog.key"
-            label="Header Key"
-            required
-            variant="outlined"
-            :error-messages="headerDialog.error"
-            density="compact"
-          ></v-text-field>
-          <v-text-field
-            v-model="headerDialog.value"
-            label="Header Value"
-            variant="outlined"
-            density="compact"
-          ></v-text-field>
-        </v-form>
-      </v-card-text>
-      <v-divider class="m-2" />
-      <v-card-actions class="pa-2 -mb-1">
-        <div class="flex w-full justify-between">
-          <v-btn color="white" variant="text" size="small" @click="closeHeaderDialog">Cancel</v-btn>
-          <v-btn color="white" size="small" @click="addHeader">Save</v-btn>
-        </div>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-
-  <!-- JSON Body Dialog -->
-  <v-dialog v-model="bodyDialog.show" max-width="520px">
-    <v-card class="rounded-lg p-3" :style="interfaceStore.globalGlassMenuStyles">
-      <v-card-title class="text-h6 font-weight-bold pa-2 text-center">Edit JSON body template</v-card-title>
-      <v-card-text class="px-6">
-        <v-form class="d-flex flex-column gap-2" @submit.prevent="saveJsonBody">
-          <v-textarea
-            v-model="bodyDialog.bodyText"
-            label="JSON Body Template"
-            hint="Use {{ inputId }} for dynamic values."
-            persistent-hint
-            :error-messages="bodyDialog.error"
-            rows="12"
-            variant="outlined"
-            density="compact"
-            @update:model-value="validateJsonTemplateForDialog"
-          ></v-textarea>
-        </v-form>
-      </v-card-text>
-      <v-divider class="m-2" />
-      <v-card-actions class="pa-2 -mb-1">
-        <div class="flex w-full justify-between">
-          <v-btn color="white" variant="text" @click="closeJsonDialog">Cancel</v-btn>
-          <v-btn color="white" :disabled="!bodyDialog.isValid" @click="saveJsonBody">Save</v-btn>
-        </div>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
-
+import HttpRequestActionConfig from '@/components/configuration/HttpRequestActionConfig.vue'
 import JavascriptActionConfig from '@/components/configuration/JavascriptActionConfig.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'
-import {
-  availableHttpRequestMethods,
-  deleteHttpRequestActionConfig,
-  getAllHttpRequestActionConfigs,
-  getHttpRequestActionConfig,
-  HttpRequestActionConfig,
-  HttpRequestMethod,
-  registerHttpRequestActionConfig,
-} from '@/libs/actions/http-request'
-import { executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
 import { useAppInterfaceStore } from '@/stores/appInterface'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
 
 const interfaceStore = useAppInterfaceStore()
-
-const actionsConfigs = reactive<Record<string, HttpRequestActionConfig>>({})
-const newActionConfig = ref<HttpRequestActionConfig>({
-  name: '',
-  method: HttpRequestMethod.GET,
-  url: '',
-  headers: {},
-  urlParams: {},
-  body: '',
-})
-
-const bodyInputError = ref('')
-
-const urlParamDialog = ref({
-  show: false,
-  key: '',
-  valueType: 'fixed',
-  fixedValue: '',
-})
-
-const bodyDialog = ref({
-  show: false,
-  bodyText: '',
-  error: '',
-  isValid: false,
-})
-
-const headerDialog = ref({
-  show: false,
-  key: '',
-  value: '',
-  error: '',
-})
-
-const paramValueOptions = computed(() => {
-  const options = [{ title: 'Fixed (specify below)', value: 'fixed' }]
-  const availableInputParameters = getAllCockpitActionVariablesInfo()
-  Object.values(availableInputParameters).forEach((parameter) => {
-    options.push({ title: parameter.id, value: parameter.id })
-  })
-  return options
-})
-
-const isFormValid = computed(() => {
-  return isValidRequestConfig(newActionConfig.value)
-})
-
-const isValidRequestConfig = (config: HttpRequestActionConfig): boolean => {
-  return (
-    !!config.name &&
-    !!config.method &&
-    !!config.url &&
-    isValidUrlParams(config.urlParams) &&
-    isValidHeaders(config.headers).isValid &&
-    isValidJsonTemplate(config.body)
-  )
-}
-
-// eslint-disable-next-line jsdoc/require-jsdoc
-const validateJsonTemplate = (template: string): { isValid: boolean; error: string } => {
-  if (!template.trim()) {
-    return { isValid: true, error: '' }
-  }
-
-  // Check if all placeholders are properly formatted
-  const placeholderRegex = /\{\{\s*([^}]+)\s*\}\}/g
-  const placeholders = template.match(placeholderRegex)
-  if (placeholders) {
-    const availableInputs = paramValueOptions.value.map((option) => option.value).filter((option) => option !== 'fixed')
-    for (const placeholder of placeholders) {
-      const inputName = placeholder.match(/\{\{\s*([^}]+)\s*\}\}/)?.[1]?.trim()
-      if (!inputName) {
-        return { isValid: false, error: `Invalid placeholder format: ${placeholder}` }
-      }
-      if (!availableInputs.includes(inputName)) {
-        return {
-          isValid: false,
-          error: `Invalid input name in placeholder: ${inputName}. Available inputs are: ${availableInputs.join(', ')}`,
-        }
-      }
-    }
-  }
-
-  // Replace placeholders with a valid JSON value temporarily
-  const tempTemplate = template.replace(placeholderRegex, 'PLACEHOLDER')
-
-  try {
-    const parsed = JSON.parse(tempTemplate)
-    if (typeof parsed !== 'object' || parsed === null) {
-      return { isValid: false, error: 'Invalid JSON structure' }
-    }
-
-    return { isValid: true, error: '' }
-  } catch (error) {
-    return { isValid: false, error: 'Invalid JSON: ' + (error as Error).message }
-  }
-}
-
-const isValidJsonTemplate = (template: string): boolean => {
-  const { isValid } = validateJsonTemplate(template)
-  return isValid
-}
-
-const validateJsonTemplateForDialog = (template: string): void => {
-  const { isValid, error } = validateJsonTemplate(template)
-  bodyDialog.value.error = error
-  bodyDialog.value.isValid = isValid
-}
-
-const isValidUrlParams = (params: Record<string, string>): boolean => {
-  return Object.entries(params).every(([key, value]) => {
-    if (value.startsWith('{{') && value.endsWith('}}')) {
-      const parsedValue = value.replace('{{', '').replace('}}', '').trim()
-      return key !== '' && value !== '' && paramValueOptions.value.map((option) => option.value).includes(parsedValue)
-    }
-    return key !== '' && value !== ''
-  })
-}
-
-// eslint-disable-next-line jsdoc/require-jsdoc
-const isValidHeaders = (headers: Record<string, string>): { isValid: boolean; error: string } => {
-  for (const [key, value] of Object.entries(headers)) {
-    // Header keys should be non-empty and contain valid characters
-    const validKeyRegex = /^[a-zA-Z0-9!#$%&'*+-.^_`|~]+$/
-    if (!key || !validKeyRegex.test(key)) {
-      const error = 'Invalid header key. Use only letters, numbers, and common punctuation. No spaces allowed.'
-      return { isValid: false, error }
-    }
-
-    // Header values can be empty, but if not, they should not contain newlines
-    if (value && /[\r\n]/.test(value)) {
-      return { isValid: false, error: 'Header value cannot contain newlines.' }
-    }
-  }
-  return { isValid: true, error: '' }
-}
-
-const openUrlParamDialog = (): void => {
-  urlParamDialog.value = {
-    show: true,
-    key: '',
-    valueType: 'fixed',
-    fixedValue: '',
-  }
-}
-
-const closeUrlParamDialog = (): void => {
-  urlParamDialog.value.show = false
-}
-
-const addUrlParameter = (): void => {
-  const parsedValue = `{{ ${urlParamDialog.value.valueType} }}`
-  const value = urlParamDialog.value.valueType === 'fixed' ? urlParamDialog.value.fixedValue : parsedValue
-  newActionConfig.value.urlParams[urlParamDialog.value.key] = value
-  closeUrlParamDialog()
-}
-
-const openJsonDialog = (): void => {
-  bodyDialog.value = {
-    show: true,
-    bodyText: newActionConfig.value.body,
-    error: '',
-    isValid: isValidJsonTemplate(newActionConfig.value.body),
-  }
-}
-
-const closeJsonDialog = (): void => {
-  bodyDialog.value.show = false
-}
-
-const saveJsonBody = (): void => {
-  if (bodyDialog.value.isValid) {
-    newActionConfig.value.body = bodyDialog.value.bodyText
-    closeJsonDialog()
-  }
-}
-
-const removeUrlParam = (key: string): void => {
-  delete newActionConfig.value.urlParams[key]
-}
-
-const openHeaderDialog = (): void => {
-  headerDialog.value = {
-    show: true,
-    key: '',
-    value: '',
-    error: '',
-  }
-}
-
-const closeHeaderDialog = (): void => {
-  headerDialog.value.show = false
-  headerDialog.value.error = ''
-}
-
-const addHeader = (): void => {
-  const { isValid, error } = isValidHeaders({ [headerDialog.value.key]: headerDialog.value.value })
-  if (isValid) {
-    newActionConfig.value.headers[headerDialog.value.key] = headerDialog.value.value
-    closeHeaderDialog()
-  } else {
-    headerDialog.value.error = error
-  }
-}
-
-const removeHeader = (key: string): void => {
-  delete newActionConfig.value.headers[key]
-}
-
-const editMode = ref(false)
-
-const editActionConfig = (id: string): void => {
-  editMode.value = true
-  newActionConfig.value = JSON.parse(JSON.stringify(actionsConfigs[id])) // Deep copy
-}
-
-const createActionConfig = (): void => {
-  editMode.value = false
-  registerHttpRequestActionConfig(newActionConfig.value)
-  loadSavedActions()
-  resetNewAction()
-}
-
-const saveActionConfig = (): void => {
-  createActionConfig()
-  closeActionDialog()
-}
-
-const resetNewAction = (): void => {
-  newActionConfig.value = {
-    name: '',
-    method: HttpRequestMethod.GET,
-    url: '',
-    headers: {},
-    urlParams: {},
-    body: '',
-  }
-  bodyInputError.value = ''
-  editMode.value = false
-}
-
-const allSavedActionConfigs = computed(() => {
-  return Object.entries(actionsConfigs).map(([id, action]) => ({ id, ...action }))
-})
-
-const deleteActionConfig = (id: string): void => {
-  delete actionsConfigs[id]
-  deleteHttpRequestActionConfig(id)
-  loadSavedActions()
-}
-
-const loadSavedActions = (): void => {
-  Object.assign(actionsConfigs, getAllHttpRequestActionConfigs())
-}
-
-const runAction = (id: string): void => {
-  executeActionCallback(id)
-}
-
-const exportAction = (id: string): void => {
-  const action = getHttpRequestActionConfig(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 json = JSON.parse(e.target?.result as string)
-
-          if (!isValidRequestConfig(json)) {
-            throw new Error('Invalid request configuration file.')
-          }
-
-          registerHttpRequestActionConfig(json as HttpRequestActionConfig)
-          loadSavedActions()
-        } catch (error) {
-          openSnackbar({ message: `Cannot import action. ${error}`, variant: 'error', duration: 5000 })
-        }
-      }
-      reader.readAsText(file)
-    }
-  }
-  input.click()
-  input.remove()
-}
-
-const actionDialog = ref({
-  show: false,
-})
-
-const closeActionDialog = (): void => {
-  actionDialog.value.show = false
-  resetNewAction()
-}
-
-const openActionEditDialog = (id: string): void => {
-  editActionConfig(id)
-  actionDialog.value.show = true
-}
-
-const openNewActionDialog = (): void => {
-  resetNewAction()
-  actionDialog.value.show = true
-}
-
-const saveUrlParameter = (): void => {
-  addUrlParameter()
-  closeUrlParamDialog()
-}
-
-onMounted(() => {
-  loadSavedActions()
-})
 </script>
-
-<style scoped>
-.v-data-table ::v-deep tbody tr:hover {
-  background-color: rgba(0, 0, 0, 0.1) !important;
-}
-</style>