add config action mecanism and filter form without action args in config apply

app/src/components/ConfigPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <abstract-form
     v-bind="{ id: panel.id + '-form', validation, serverError: panel.serverError }"
-    @submit.prevent.stop="$emit('submit', panel.id)"
+    @submit.prevent.stop="onApply"
   >
     <slot name="tab-top" />
 
@@ -35,6 +35,7 @@
 </template>
 
 <script>
+import { filterObject } from '@/helpers/commons'
 
 
 export default {
@@ -58,6 +59,30 @@ export default {
   },
 
   methods: {
+    onApply () {
+      const panelId = this.panel.id
+      const nonActionKeys = this.panel.sections.filter(section => {
+        return !section.isActionSection
+      }).reduce((keys, { fields }) => {
+        return keys.concat(Object.keys(fields))
+      }, [])
+
+      this.$emit('submit', {
+        id: this.panel.id,
+        form: filterObject(this.forms[panelId], ([key]) => nonActionKeys.includes(key))
+      })
+    },
+
+    onAction (sectionId, actionId, actionArgs) {
+      const panelId = this.panel.id
+
+      this.$emit('submit', {
+        id: panelId,
+        form: filterObject(this.forms[panelId], ([key]) => actionArgs.includes(key)),
+        action: [panelId, sectionId, actionId].join('.'),
+        name: actionId
+      })
+    }
   }
 }
 </script>

app/src/components/globals/formItems/ButtonItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <b-button
+    :id="id"
+    :variant="type"
+    @click="$emit('action', $event)"
+    :disabled="!enabled"
+  >
+    <icon :iname="icon_" class="mr-2" />
+    <span v-html="label" />
+  </b-button>
+</template>
+
+<script>
+
+export default {
+  name: 'ButtonItem',
+
+  props: {
+    label: { type: String, default: null },
+    id: { type: String, default: null },
+    type: { type: String, default: 'success' },
+    icon: { type: String, default: null },
+    enabled: { type: [Boolean, String], default: true }
+  },
+
+  computed: {
+    icon_ () {
+      const icons = {
+        success: 'thumbs-up',
+        info: 'info',
+        warning: 'exclamation',
+        danger: 'times'
+      }
+
+      return this.icon || icons[this.type]
+    }
+  }
+}
+</script>

app/src/helpers/commons.js

@@ -63,6 +63,19 @@ export function flattenObjectLiteral (obj, flattened = {}) {
 }
 
 
+/**
+ * Returns an new Object filtered with passed filter function.
+ * Each entry `[key, value]` will be forwarded to the `filter` function.
+ *
+ * @param {Object} obj - object to filter.
+ * @param {Function} filter - the filter function to call for each entry.
+ * @return {Object}
+ */
+export function filterObject (obj, filter) {
+  return Object.fromEntries(Object.entries(obj).filter((...args) => filter(...args)))
+}
+
+
 /**
  * Returns an new array containing items that are in first array but not in the other.
  *

app/src/helpers/yunohostArguments.js

@@ -229,6 +229,12 @@ export function formatYunoHostArgument (arg) {
       name: 'MarkdownItem',
       props: ['label:ask'],
       renderSelf: true
+    },
+    {
+      types: ['button'],
+      name: 'ButtonItem',
+      props: ['type:style', 'label:ask', 'icon', 'enabled', 'args'],
+      renderSelf: true
     }
   ]
 
@@ -328,6 +334,10 @@ export function formatYunoHostArguments (args, forms) {
     if ('visible' in arg && ![false, '"false"'].includes(arg.visible)) {
       addEvaluationGetter('visible', field, arg.visible, forms)
     }
+
+    if ('enabled' in arg) {
+      addEvaluationGetter('enabled', field.props, arg.enabled, forms)
+    }
   }
 
   return { form, fields, validations, errors }
@@ -354,6 +364,7 @@ export function formatYunoHostConfigPanels (data) {
     for (const _section of sections) {
       const section = {
         id: _section.id,
+        isActionSection: _section.is_action_section,
         visible: [undefined, true, '"true"'].includes(_section.visible)
       }
       if (_section.help) section.help = formatI18nField(_section.help)