Add basic validation

app/components/index-setting.hbs

@@ -1,7 +1,10 @@
 <div class='mb-4'>
-  <Form::Element @label={{@label}} @errors={{array this.error}}>
+  {{!-- TODO: add link to meilisearch's documentation --}}
+  <Form::Element @label={{namelize @setting.name}} @errors={{array this.error}}>
     <MonacoEditor
       @value={{json-stringify this.value}}
+      @schema={{@setting.schema}}
+      @uri={{@setting.uri}}
       @language='json'
       @sendValue={{this.save}}
       @invoker={{this.invoker}}

app/components/index-setting.js

@@ -24,7 +24,7 @@ export default class FormIndexSettingComponent extends Component {
 
     try {
       return this.args.index
-        .updateSetting(JSON.parse(newValue), this.args.name)
+        .updateSetting(JSON.parse(newValue), this.args.setting.name)
         .then(this.toaster.taskToast);
     } catch (error) {
       this.error = error.error || error;
@@ -33,7 +33,7 @@ export default class FormIndexSettingComponent extends Component {
 
   @action
   async setInitialValue() {
-    this.value = await this.args.index.getSetting(this.args.name);
+    this.value = await this.args.index.getSetting(this.args.setting.name);
     this.error = null;
   }
 
@@ -43,7 +43,7 @@ export default class FormIndexSettingComponent extends Component {
 
     try {
       return this.args.index
-        .resetSetting(this.args.name)
+        .resetSetting(this.args.setting.name)
         .then(this.toaster.taskToast);
     } catch (error) {
       this.error = error.error || error;

app/components/monaco-editor.js

@@ -24,21 +24,30 @@ export default class MonacoEditorComponent extends Component {
 
   @action
   initEditor(el) {
-    // let codeModel = monaco.editor.createModel(this.args.code, this.args.language)
-    // let height = codeModel.getLineCount() * 20;
-    // el.style.height = height.toString() + "px";
+    const modelUri = monaco.Uri.parse(this.args.uri);
+    const model = monaco.editor.createModel(
+      this.args.value,
+      this.args.language,
+      modelUri
+    );
+
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemas: [
+        {
+          uri: this.args.uri,
+          fileMatch: this.args.uri,
+          schema: this.args.schema,
+        },
+      ],
+    });
 
     this.editor = monaco.editor.create(el, {
-      // model: codeModel,
-      // theme: 'vs-dark',
-      // readOnly: this.readOnly,
-      // minimap: { enabled: false },
-      // wordWrap: "on",
-      // scrollBeyondLastLine: false,
-      // wrappingIndent: 'same'
-
-      value: this.args.value,
-      language: this.args.language,
+      model,
+      // theme: 'vs-dark', //TODO: add checking global theme
+      readOnly: this.args.readOnly ?? false,
+      // wordWrap: 'on',
+      // wrappingIndent: 'same',
       lineNumbers: 'off',
       roundedSelection: false,
       scrollBeyondLastLine: false,

app/models/index.js

@@ -2,6 +2,39 @@ import query from '../utils/query';
 import Document from './document';
 import { dasherize } from '@ember/string';
 
+// const settingNames = [
+//   'displayedAttributes',
+//   'distinctAttribute',
+//   'faceting',
+//   'filterableAttributes',
+//   'pagination',
+//   'rankingRules',
+//   'searchableAttributes',
+//   'sortableAttributes',
+//   'stopWords',
+//   'synonyms',
+//   'typoTolerance',
+// ];
+
+const settings = [];
+const createSettingOption = (name, schema) => {
+  const uri = `https://docs.meilisearch.com/reference/api/settings/${dasherize(
+    name
+  )}`;
+
+  schema['$id'] = uri;
+
+  settings.push({ name, schema, uri });
+};
+
+createSettingOption('stopWords', {
+  type: 'array',
+  items: {
+    type: 'string',
+  },
+  uniqueItems: true,
+});
+
 export default class Index {
   constructor(data = {}) {
     for (const key in data) {
@@ -9,21 +42,7 @@ export default class Index {
     }
   }
 
-  get settingNames() {
-    return [
-      'displayedAttributes',
-      'distinctAttribute',
-      'faceting',
-      'filterableAttributes',
-      'pagination',
-      'rankingRules',
-      'searchableAttributes',
-      'sortableAttributes',
-      'stopWords',
-      'synonyms',
-      'typoTolerance',
-    ];
-  }
+  settings = settings;
 
   get path() {
     return `indexes/${this.uid}`;

app/templates/admin/indexes/item/settings/specific.hbs

@@ -1,3 +1,3 @@
-{{#each @model.settingNames as |name|}}
-  <IndexSetting @name={{name}} @label={{namelize name}} @index={{@model}} />
+{{#each @model.settings as |setting|}}
+  <IndexSetting @setting={{setting}} @index={{@model}} />
 {{/each}}