ui: Make DataWriter also deal with more standard shaped errors (#14025)

* ui: Make DataWriter also deal with more standard shaped errors

* ui: Add error states/messages for peering establishment (#14026)

* ui: Add error states/messages for peering establishment

* Inspect state instead of asking about existence of error

ui/packages/consul-peerings/app/components/consul/peer/form/generate/index.hbs

@@ -17,7 +17,20 @@
       id={{id}}
     >
 
-      <fsm.State @matches={{array 'idle'}}>
+      <fsm.State @matches={{array 'idle' 'error'}}>
+        <fsm.State @matches={{'error'}}>
+          <Notice
+            @type="error"
+            role="alert"
+          as |notice|>
+            <notice.Body>
+              <p>
+                <strong>Error</strong><br />
+                {{fsm.state.context.error.message}}
+              </p>
+            </notice.Body>
+          </Notice>
+        </fsm.State>
         {{yield (hash
           Fieldsets=(component "consul/peer/form/generate/fieldsets"
             item=@item
@@ -43,6 +56,9 @@
             @onchange
             (pick 'data' (fn fsm.dispatch 'SUCCESS'))
           }}
+          @onerror={{queue
+            (fn fsm.dispatch 'ERROR')
+          }}
         />
       </fsm.State>
 

ui/packages/consul-peerings/app/components/consul/peer/form/initiate/index.hbs

@@ -17,6 +17,19 @@
     @label={{'peer'}}
     @onchange={{fn (optional @onsubmit) @item}}
     as |writer|>
+      <BlockSlot @name="error" as |after error|>
+        <Notice
+          @type="error"
+          role="alert"
+        as |notice|>
+          <notice.Body>
+            <p>
+              <strong>Error</strong><br />
+              {{error.message}}
+            </p>
+          </notice.Body>
+        </Notice>
+      </BlockSlot>
       <BlockSlot @name="content">
 {{#let
   (unique-id)
@@ -27,15 +40,15 @@ as |id|}}
         >
           {{yield (hash
             Fieldsets=(component "consul/peer/form/initiate/fieldsets"
-             item=@item
+              item=@item
             )
             Actions=(component "consul/peer/form/initiate/actions"
-             item=@item
-             id=id
+              item=@item
+              id=id
             )
           )}}
         </form>
 {{/let}}
-      </BlockSlot>
+    </BlockSlot>
   </DataWriter>
 </div>

ui/packages/consul-ui/app/components/data-writer/index.hbs

@@ -19,7 +19,7 @@
       @item={{data}}
       @data={{null}}
       @onchange={{action dispatch "SUCCESS"}}
-      @onerror={{queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR")}}
+      @onerror={{action "error"}}
     />
   </State>
 
@@ -28,7 +28,7 @@
       @sink={{sink}}
       @item={{data}}
       @onchange={{action dispatch "SUCCESS"}}
-      @onerror={{queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR")}}
+      @onerror={{action "error"}}
     />
   </State>
 

ui/packages/consul-ui/app/components/data-writer/index.js

@@ -21,5 +21,17 @@ export default Component.extend(Slotted, {
       set(this, 'data', data);
       this.dispatch('PERSIST');
     },
+    error: function(data, e) {
+      if (e && typeof e.preventDefault === 'function') {
+        e.preventDefault();
+      }
+      set(
+        this,
+        'error',
+        typeof data.error.errors !== 'undefined' ?
+          data.error.errors.firstObject : data.error
+      );
+      this.dispatch('ERROR');
+    },
   },
 });