fixes for diabled state, tri-state boolean and access control

src/components/settings_modal/helpers/boolean_setting.js

@@ -3,13 +3,28 @@ import Setting from './setting.js'
 
 export default {
   ...Setting,
+  props: {
+    ...Setting.props,
+    indeterminateState: [String, Object]
+  },
   components: {
     ...Setting.components,
     Checkbox
   },
+  computed: {
+    ...Setting.computed,
+    isIndeterminate () {
+      return this.visibleState === this.indeterminateState
+    }
+  },
   methods: {
     ...Setting.methods,
     getValue (e) {
+      // Basic tri-state toggle implementation
+      if (!!this.indeterminateState && !e && this.visibleState === true) {
+        // If we have indeterminate state, switching from true to false first goes through indeterminate
+        return this.indeterminateState
+      }
       return e
     }
   }

src/components/settings_modal/helpers/boolean_setting.vue

@@ -4,13 +4,15 @@
     class="BooleanSetting"
   >
     <Checkbox
-      :model-value="draftMode ? draft :state"
+      :model-value="visibleState"
       :disabled="shouldBeDisabled"
+      :indeterminate="isIndeterminate"
       @update:modelValue="update"
     >
       <span
         v-if="!!$slots.default"
         class="label"
+        :class="{ 'faint': shouldBeDisabled }"
       >
         <template v-if="backendDescription">
           {{ backendDescriptionLabel }}
@@ -29,6 +31,7 @@
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>

src/components/settings_modal/helpers/draft_buttons.vue

@@ -49,13 +49,13 @@
       </template>
     </Popover>
     <Popover
+      v-if="$parent.canHardReset"
       trigger="hover"
       :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
     >
       <template #trigger>
         &nbsp;
         <button
-          v-if="$parent.canHardReset"
           class="button button-default btn"
           type="button"
           :title="$t('settings.hard_reset_value')"

src/components/settings_modal/helpers/number_setting.vue

@@ -3,7 +3,7 @@
     v-if="matchesExpertLevel"
     class="NumberSetting"
   >
-    <label :for="path">
+    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
       <template v-if="backendDescription">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -16,7 +16,7 @@
       class="number-input"
       type="number"
       :step="step || 1"
-      :disabled="disabled"
+      :disabled="shouldBeDisabled"
       :min="min || 0"
       :value="realDraftMode ? draft :state"
       @change="update"
@@ -31,6 +31,7 @@
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>

src/components/settings_modal/helpers/setting.js

@@ -65,6 +65,9 @@ export default {
         return value
       }
     },
+    visibleState () {
+      return this.realDraftMode ? this.draft : this.state
+    },
     realSource () {
       return this.source || this.defaultSource
     },
@@ -88,7 +91,6 @@ export default {
       return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
     },
     configSource () {
-      console.log('SRC', this.realSource)
       switch (this.realSource) {
         case 'profile':
           return this.$store.state.profileConfig

src/components/settings_modal/helpers/string_setting.vue

@@ -3,7 +3,7 @@
     v-if="matchesExpertLevel"
     class="StringSetting"
   >
-    <label :for="path">
+    <label :for="path" :class="{ 'faint': shouldBeDisabled }">
       <template v-if="backendDescription">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -15,7 +15,7 @@
       :id="path"
       class="string-input"
       step="1"
-      :disabled="disabled"
+      :disabled="shouldBeDisabled"
       :value="realDraftMode ? draft : state"
       @change="update"
     >
@@ -29,6 +29,7 @@
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>