Add erros catcher to index-setting component

app/components/form/element.hbs

@@ -15,6 +15,14 @@
     {{@value}}
   {{/if}}
 
+  {{#if @errors.length}}
+    {{#each @errors as |item|}}
+      <div class='mt-1 text-sm text-red'>
+        {{item}}
+      </div>
+    {{/each}}
+  {{/if}}
+
   {{#if @helper}}
     <div class='mt-1 text-sm'>
       {{@helper}}

app/components/index-setting.hbs

@@ -1,4 +1,4 @@
-<Form::Element @label={{namelize @name}}>
+<Form::Element @label={{namelize @name}} @errors={{array this.error}}>
   <MonacoEditor
     @value={{json-stringify this.value}}
     @language='json'

app/components/index-setting.js

@@ -4,6 +4,7 @@ import { tracked } from '@glimmer/tracking';
 
 export default class FormIndexSettingComponent extends Component {
   @tracked value;
+  @tracked error;
 
   constructor() {
     super(...arguments);
@@ -13,16 +14,24 @@ export default class FormIndexSettingComponent extends Component {
 
   @action
   save(newValue) {
-    this.args.index.updateSetting(this.args.name, JSON.parse(newValue));
+    this.error = null;
+
+    try {
+      this.args.index.updateSetting(this.args.name, JSON.parse(newValue));
+    } catch (error) {
+      this.error = error.error || error;
+    }
   }
 
   @action
   async setInitialValue() {
     this.value = await this.args.index.getSetting(this.args.name);
+    this.error = null;
   }
 
   @action
   async reset() {
-    this.args.index.resetSetting(this.args.name);
+    await this.args.index.resetSetting(this.args.name);
+    this.error = null;
   }
 }

config/tailwind.config.js

@@ -35,7 +35,7 @@ module.exports = {
         },
         red: {
           light: colors.red['100'],
-          DEFAULT: colors.red['400'],
+          DEFAULT: colors.red['500'],
           dark: colors.red['800'],
         },
       },