Add remove buttons only to user's settings

src/lang/en.js

@@ -381,6 +381,7 @@ export default {
     file: 'File',
     update: 'Update',
     remove: 'Remove',
+    removeFromDB: 'Remove setting from the DB',
     selectLocalPack: 'Select the local pack to copy to',
     localPack: 'Local pack',
     specifyShortcode: 'Specify a custom shortcode',

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 v-if="canBeDeleted" content="This would remove the setting from the DB" placement="bottom-end">
+      <el-tooltip v-if="canBeDeleted" :content="$t('settings.removeFromDB')" placement="bottom-end">
         <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
       </el-tooltip>
     </span>
@@ -85,6 +85,7 @@
 import i18n from '@/lang'
 import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, MultipleSelect, ProxyUrlInput, PruneInput, RateLimitInput } from './inputComponents'
 import { processNested } from '@/store/modules/normalizers'
+import _ from 'lodash'
 
 export default {
   name: 'Inputs',
@@ -99,12 +100,6 @@ export default {
     RateLimitInput
   },
   props: {
-    canBeDeleted: {
-      type: Boolean,
-      default: function() {
-        return false
-      }
-    },
     customLabelWidth: {
       type: String,
       default: function() {
@@ -159,6 +154,11 @@ export default {
     }
   },
   computed: {
+    canBeDeleted() {
+      const { group, key } = this.settingGroup
+      return _.get(this.$store.state.settings.db, [group, key]) &&
+        this.$store.state.settings.db[group][key].includes(this.setting.key)
+    },
     iconsData() {
       return Array.isArray(this.data[':icons']) ? this.data[':icons'] : []
     },

src/views/settings/components/Setting.vue

@@ -8,8 +8,7 @@
         <inputs
           :setting-group="settingGroup"
           :setting="setting"
-          :data="data"
-          :can-be-deleted="true"/>
+          :data="data"/>
       </div>
       <div
         v-for="setting in emailAdapterChildren"
@@ -17,8 +16,7 @@
         <inputs
           :setting-group="settingGroup"
           :setting="setting"
-          :data="data"
-          :can-be-deleted="true"/>
+          :data="data"/>
       </div>
     </div>
     <div v-else>
@@ -28,8 +26,7 @@
             :setting-group="settingGroup"
             :setting="setting"
             :data="data"
-            :nested="false"
-            :can-be-deleted="true"/>
+            :nested="false"/>
         </div>
         <div v-if="compound(setting)">
           <div v-if="!setting.children">
@@ -37,14 +34,13 @@
               :setting-group="settingGroup"
               :setting="setting"
               :data="data[setting.key]"
-              :nested="true"
-              :can-be-deleted="true"/>
+              :nested="true"/>
           </div>
           <div v-else>
             <el-form-item>
               <span slot="label">
                 {{ setting.label }}:
-                <el-tooltip content="This would remove the setting from the DB" placement="bottom-end">
+                <el-tooltip v-if="canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
                   <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>
                 </el-tooltip>
               </span>
@@ -68,6 +64,7 @@
 <script>
 import Inputs from './Inputs'
 import i18n from '@/lang'
+import _ from 'lodash'
 
 export default {
   name: 'Setting',
@@ -98,6 +95,12 @@ export default {
     }
   },
   methods: {
+    canBeDeleted(setting) {
+      const { group, key } = this.settingGroup
+      const keyExists = key || setting
+      return _.get(this.$store.state.settings.db, [group, keyExists]) &&
+        this.$store.state.settings.db[group][keyExists].includes(setting)
+    },
     compound({ type, key, children }) {
       return type === 'keyword' ||
         type === 'map' ||