Use OpenAPI definitions as configuration schema

src/components/ConfigEditor.vue

@@ -44,7 +44,6 @@
         required: true,
       },
       categories: Array,
-      descriptions: Object,
       extendedFields: Object,
     },
     computed: {
@@ -76,26 +75,24 @@
     },
     methods: {
       componentFromField(field) {
+        if (field.format === 'flags') return InputFlag;
+        if (field.enum) return InputEnum;
+
         switch (field.type) {
           case 'string':
-          case 'uint64':
             return InputString;
           case 'boolean':
             return InputBoolean;
-          case 'uint32':
-          case 'uint16':
-          case 'byte':
+          case 'integer':
             return InputNumber;
-          case 'flag':
-            return InputFlag;
-          case 'enum':
-            return InputEnum;
-          case 'hashSet':
-          case 'list':
-            if (['enum'].includes(field.values.type)) return field.type === 'list' ? InputList : InputSet;
-            if (['byte', 'uint16', 'uint32', 'uint64', 'string'].includes(field.values.type)) return InputTag;
-            return InputUnknown;
-          case 'dictionary':
+          case 'array':
+            if (field.items.enum) {
+              if (field.uniqueItems) return InputSet;
+              return InputList;
+            }
+
+            return InputTag;
+          case 'object':
             return InputDictionary;
           default:
             return InputUnknown;
@@ -150,16 +147,16 @@
 </script>
 
 <style lang="scss">
-	.config-editor {
-		margin-bottom: 1em;
+  .config-editor {
+    margin-bottom: 1em;
 
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 
-	.config-uncategorized {
-		border: 0 solid var(--color-border);
-		padding: 0 1em 1em;
-	}
+  .config-uncategorized {
+    border: 0 solid var(--color-border);
+    padding: 0 1em 1em;
+  }
 </style>

src/components/ConfigFields/Input.vue

@@ -13,25 +13,22 @@
       currentValue: true,
     },
     data() {
-      const initialValue = typeof this.currentValue !== 'undefined' ? this.currentValue : this.schema.defaultValue;
+      const initialValue = typeof this.currentValue !== 'undefined' ? this.currentValue : null;
 
       return {
         value: typeof initialValue === 'object' ? JSON.parse(JSON.stringify(initialValue)) : initialValue,
         showDescription: false,
       };
     },
     computed: {
-      defaultValue() {
-        return this.schema.defaultValue;
-      },
       label() {
         return this.schema.label || this.schema.param || this.schema.paramName;
       },
       field() {
         return this.schema.paramName;
       },
       placeholder() {
-        return this.schema.placeholder || this.schema.defaultValue;
+        return this.schema.placeholder;
       },
       description() {
         return this.schema.description;

src/components/ConfigFields/InputDictionary.vue

@@ -4,23 +4,17 @@
 
     <div class="form-item__value">
       <div class="input-option__field input-option__field--three">
-        <input v-if="keyIsString" :id="`${field}-key`" v-model="elementKey" class="form-item__input" type="text" @keydown.enter="addElement">
+        <input :id="`${field}-key`" v-model="elementKey" class="form-item__input" type="text" @keydown.enter="addElement">
 
-        <select v-if="valueIsEnum" :id="`${field}-value`" v-model="elementValue" class="form-item__input">
-          <option v-for="(enumValue, name) in schema.value.values" :value="enumValue">
-            {{ name }}
-          </option>
+        <select :id="`${field}-value`" v-model="elementValue" class="form-item__input">
+          <option v-for="{ label, value } in availableEnumValues" :value="value">{{ label }}</option>
         </select>
 
-        <button class="button" @click.prevent="addElement">
-          {{ $t('add') }}
-        </button>
+        <button class="button" @click.prevent="addElement">{{ $t('add') }}</button>
       </div>
 
       <div class="input-option__items">
-        <button v-for="(keyValue, key) in value" class="button input-option__item" @click.prevent="removeElement(key)">
-          {{ key }} => {{ resolveValue(keyValue) }}
-        </button>
+        <button v-for="(keyValue, key) in value" class="button input-option__item" @click.prevent="removeElement(key)">{{ key }} => {{ resolveValue(keyValue) }}</button>
       </div>
     </div>
 
@@ -41,20 +35,18 @@
       };
     },
     computed: {
-      keyIsString() {
-        return ['string', 'uint64'].includes(this.schema.key.type);
+      availableEnumValues() {
+        return this.enumValues;
       },
-      valueIsEnum() {
-        return this.schema.value.type === 'enum';
+      enumValues() {
+        return Object.entries(this.schema.additionalProperties['x-definition']).map(([label, value]) => ({ label, value }));
       },
-      valueAvailableEnumValues() {
-        const availableEnumValues = [];
-
-        for (const key of Object.keys(this.schema.value.values)) {
-          availableEnumValues.push(this.schema.value.values[key]);
-        }
-
-        return availableEnumValues;
+      resolveValue() {
+        return value => {
+          const enumValue = this.enumValues.find(({ value: enumValue }) => value === enumValue);
+          if (!enumValue) return value;
+          return enumValue.label;
+        };
       },
     },
     created() {
@@ -66,12 +58,7 @@
         return null;
       },
       getDefaultValue() {
-        if (this.valueIsEnum) return this.valueAvailableEnumValues[0];
-        return null;
-      },
-      resolveValue(value) {
-        if (!this.valueIsEnum) return value;
-        return Object.keys(this.schema.value.values).find(key => this.schema.value.values[key] === value);
+        return this.availableEnumValues[0].value;
       },
       addElement() {
         if ((!this.elementValue && this.elementValue !== 0) || (!this.elementKey && this.elementKey !== 0)) return;

src/components/ConfigFields/InputEnum.vue

@@ -4,9 +4,7 @@
 
     <div class="form-item__value">
       <select :id="field" v-model="value" class="form-item__input" :name="field">
-        <option v-for="(enumValue, name) in values" v-if="!(name === 'Max' && isLastValue(enumValue))" :value="enumValue">
-          {{ name }}
-        </option>
+        <option v-for="{ label, value } in enums" :value="value">{{ label }}</option>
       </select>
     </div>
 
@@ -21,13 +19,8 @@
     name: 'input-enum',
     mixins: [Input],
     computed: {
-      values() {
-        return this.schema.values;
-      },
-    },
-    methods: {
-      isLastValue(value) {
-        return value === Math.max(...Object.values(this.values));
+      enums() {
+        return Object.entries(this.schema['x-definition']).map(([label, value]) => ({ label, value }));
       },
     },
   };

src/components/ConfigFields/InputFlag.vue

@@ -4,11 +4,11 @@
 
     <div class="form-item__value">
       <div class="input-option__field">
-        <select :id="field" v-model="flagValue" class="form-item__input">
-          <option v-for="(flagValue, name) in flags" v-show="flagValue === 0 || !((value & flagValue) === flagValue)" :value="flagValue">
-            {{ name }}
-          </option>
+        <select :id="field" v-model="flagValue" class="form-item__input" :disabled="!availableFlags.length">
+          <option v-for="{ label, flag } in availableFlags" :value="flag">{{ label }}</option>
+          <option v-if="!availableFlags.length" :value="null" disabled>{{ $t('input-all-selected') }}</option>
         </select>
+
         <button class="button" @click.prevent="addFlag">
           {{ $t('add') }}
         </button>
@@ -33,27 +33,42 @@
     mixins: [Input],
     data() {
       return {
-        flagValue: this.schema.defaultValue,
+        flagValue: null,
       };
     },
     computed: {
+      availableFlags() {
+        return this.flags.filter(({ flag }) => (flag & this.value) !== flag);
+      },
       flags() {
-        return this.schema.values;
+        return Object.entries(this.schema['x-definition'])
+          .map(([label, flag]) => ({ label, flag, }))
+          .filter(definition => !!Number.isInteger(Math.log2(definition.flag))); // The double bang is used to silence invalid IDE error "Type boolean is not assignable to type boolean"
       },
     },
+    created() {
+      this.setDefaultFlag();
+    },
     methods: {
+      setDefaultFlag() {
+        this.flagValue = !this.availableFlags.length ? null : this.availableFlags[0].flag;
+      },
       addFlag() {
+        if (!this.flagValue) return;
         if (!this.flagValue && this.flagValue !== 0) return;
-
         if (this.flagValue === 0) this.value = 0;
+
         this.value |= this.flagValue;
-        this.flagValue = this.schema.defaultValue;
+        this.setDefaultFlag();
       },
       removeFlag(value) {
         this.value &= ~value;
+        if (!this.flagValue) this.setDefaultFlag();
       },
       resolveFlagName(value) {
-        return Object.keys(this.flags).find(key => this.flags[key] === value);
+        const flag = this.flags.find(({ flag }) => flag === value);
+        if (!flag) return value;
+        return flag.label;
       },
     },
   };

src/components/ConfigFields/InputList.vue

@@ -5,12 +5,8 @@
     <div class="form-item__value">
       <div class="input-option__field">
         <select :id="field" v-model="element" class="form-item__input" :disabled="!availableEnumValues.length">
-          <option v-for="(enumValue, name) in enumValues" v-show="!value.includes(enumValue)" :value="enumValue">
-            {{ name }}
-          </option>
-          <option v-if="!availableEnumValues.length" :value="undefined" disabled>
-            {{ $t('input-all-selected') }}
-          </option>
+          <option v-for="{ label, value } in availableEnumValues" :value="value">{{ label }}</option>
+          <option v-if="!availableEnumValues.length" :value="null" disabled>{{ $t('input-all-selected') }}</option>
         </select>
 
         <button class="button" @click.prevent="addElement">
@@ -20,7 +16,7 @@
 
       <div class="input-option__items">
         <button v-for="(item, index) in value" class="button input-option__item" @click.prevent="removeElement(index)">
-          {{ resolveOption(item) }}
+          {{ resolveValue(item) }}
         </button>
       </div>
     </div>
@@ -42,25 +38,25 @@
     },
     computed: {
       availableEnumValues() {
-        const availableEnumValues = [];
-
-        for (const key of Object.keys(this.enumValues)) {
-          if (this.value.includes(this.enumValues[key])) continue;
-          availableEnumValues.push(this.enumValues[key]);
-        }
-
-        return availableEnumValues;
+        return this.enumValues.filter(({ value }) => !this.value.includes(value));
       },
       enumValues() {
-        return this.schema.values.values;
+        return Object.entries(this.schema.items['x-definition']).map(([label, value]) => ({ label, value }));
+      },
+      resolveValue() {
+        return value => {
+          const enumValue = this.enumValues.find(({ value: enumValue }) => value === enumValue);
+          if (!enumValue) return value;
+          return enumValue.label;
+        };
       },
     },
     created() {
       this.element = this.getDefaultElement();
     },
     methods: {
       getDefaultElement() {
-        return this.availableEnumValues[0];
+        return this.availableEnumValues[0] ? this.availableEnumValues[0].value : null;
       },
       addElement() {
         if (!this.element && this.element !== 0) return;
@@ -73,9 +69,6 @@
         this.value.splice(index, 1);
         this.element = this.getDefaultElement();
       },
-      resolveOption(value) {
-        return Object.keys(this.enumValues).find(key => this.enumValues[key] === value);
-      },
     },
   };
 </script>

src/components/ConfigFields/InputNumber.vue

@@ -3,7 +3,7 @@
     <input-label :label="label" :has-description="hasDescription"></input-label>
 
     <div class="form-item__value">
-      <input :id="field" v-model.number="value" class="form-item__input" type="number" :name="field" :placeholder="placeholder" @blur="onBlur">
+      <input :id="field" v-model.number="value" class="form-item__input" type="number" :name="field" :placeholder="placeholder">
       <span v-if="hasErrors" class="form-item__error">{{ errorText }}</span>
     </div>
 
@@ -17,10 +17,5 @@
   export default {
     name: 'input-number',
     mixins: [Input],
-    methods: {
-      onBlur() {
-        if (this.value === '') this.value = this.defaultValue;
-      },
-    },
   };
 </script>