Remove delete buttons from settings that can't be deleted

src/views/settings/components/Inputs.vue

@@ -2,7 +2,7 @@
   <el-form-item :label-width="customLabelWidth" :class="labelClass">
     <span slot="label">
       {{ setting.label }}
-      <el-tooltip content="This would remove the setting from the DB" placement="right">
+      <el-tooltip v-if="canBeDeleted" content="This would remove the setting from the DB" placement="right">
         <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
       </el-tooltip>
     </span>
@@ -99,6 +99,12 @@ export default {
     RateLimitInput
   },
   props: {
+    canBeDeleted: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
     customLabelWidth: {
       type: String,
       default: function() {
@@ -202,12 +208,9 @@ export default {
         { group, key: parentKey, input: setting.key, value: valueForState })
     },
     async removeSetting() {
-      const config = [{
-        group: this.settingGroup.group,
-        key: this.settingGroup.key,
-        delete: true,
-        subkeys: [this.setting.key]
-      }]
+      const config = this.settingGroup.key
+        ? [{ group: this.settingGroup.group, key: this.settingGroup.key, delete: true, subkeys: [this.setting.key] }]
+        : [{ group: this.settingGroup.group, key: this.setting.key, delete: true }]
       try {
         await this.$store.dispatch('RemoveSetting', config)
       } catch (e) {

src/views/settings/components/Setting.vue

@@ -8,7 +8,8 @@
         <inputs
           :setting-group="settingGroup"
           :setting="setting"
-          :data="data"/>
+          :data="data"
+          :can-be-deleted="true"/>
       </div>
       <div
         v-for="setting in emailAdapterChildren"
@@ -16,7 +17,8 @@
         <inputs
           :setting-group="settingGroup"
           :setting="setting"
-          :data="data"/>
+          :data="data"
+          :can-be-deleted="true"/>
       </div>
     </div>
     <div v-else>
@@ -26,20 +28,35 @@
             :setting-group="settingGroup"
             :setting="setting"
             :data="data"
-            :nested="false"/>
+            :nested="false"
+            :can-be-deleted="true"/>
         </div>
         <div v-if="compound(setting)">
-          <el-form-item :label="`${setting.label}:`"/>
-          <div v-for="subSetting in setting.children" :key="subSetting.key">
+          <div v-if="!setting.children">
             <inputs
               :setting-group="settingGroup"
-              :setting-parent="[setting, subSetting]"
-              :setting="subSetting"
+              :setting="setting"
               :data="data[setting.key]"
-              :nested="true"/>
+              :nested="true"
+              :can-be-deleted="true"/>
           </div>
-          <div v-if="!setting.children">
-            <inputs :setting-group="settingGroup" :setting="setting" :data="data[setting.key]" :nested="true"/>
+          <div v-else>
+            <el-form-item>
+              <span slot="label">
+                {{ setting.label }}:
+                <el-tooltip content="This would remove the setting from the DB" placement="right">
+                  <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>
+                </el-tooltip>
+              </span>
+            </el-form-item>
+            <div v-for="subSetting in setting.children" :key="subSetting.key">
+              <inputs
+                :setting-group="settingGroup"
+                :setting-parent="[setting, subSetting]"
+                :setting="subSetting"
+                :data="data[setting.key]"
+                :nested="true"/>
+            </div>
           </div>
           <div class="line"/>
         </div>
@@ -50,6 +67,7 @@
 
 <script>
 import Inputs from './Inputs'
+import i18n from '@/lang'
 
 export default {
   name: 'Setting',
@@ -86,6 +104,20 @@ export default {
         type.includes('keyword') ||
         key === ':replace'
     },
+    async removeSetting(key) {
+      const config = this.settingGroup.key
+        ? [{ group: this.settingGroup.group, key: this.settingGroup.key, delete: true, subkeys: [key] }]
+        : [{ group: this.settingGroup.group, key, delete: true }]
+      try {
+        await this.$store.dispatch('RemoveSetting', config)
+      } catch (e) {
+        return
+      }
+      this.$message({
+        type: 'success',
+        message: i18n.t('settings.successfullyRemoved')
+      })
+    },
     updateSetting(value, tab, input) {
       this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
     }