More detailed error messages for duplicate intentions

ui-v2/app/mixins/intention/with-actions.js

@@ -2,6 +2,7 @@ import Mixin from '@ember/object/mixin';
 import { get } from '@ember/object';
 import WithFeedback from 'consul-ui/mixins/with-feedback';
 
+import { INTERNAL_SERVER_ERROR as HTTP_INTERNAL_SERVER_ERROR } from 'consul-ui/utils/http/status';
 export default Mixin.create(WithFeedback, {
   actions: {
     create: function(item) {
@@ -14,7 +15,17 @@ export default Mixin.create(WithFeedback, {
             });
         },
         `Your intention has been added.`,
-        `There was an error adding your intention.`
+        function(e) {
+          if (e.errors && e.errors[0]) {
+            const error = e.errors[0];
+            if (parseInt(error.status) === HTTP_INTERNAL_SERVER_ERROR) {
+              if (error.detail.indexOf('duplicate intention found:') === 0) {
+                return `An intention already exists for this Source-Destination pair. Please enter a different combination of Services, or search the intentions to edit an existing intention.`;
+              }
+            }
+          }
+          return `There was an error adding your intention.`;
+        }
       );
     },
     update: function(item) {

ui-v2/app/services/confirm.js

@@ -1,6 +1,6 @@
 import Service from '@ember/service';
 import confirm from 'consul-ui/utils/confirm';
-
+// TODO: This can go?
 export default Service.extend({
   execute: function(message) {
     return confirm(message);

ui-v2/app/services/error.js

@@ -1,5 +1,5 @@
 import Service from '@ember/service';
-
+// TODO: This can go?
 import error from 'consul-ui/utils/error';
 export default Service.extend({
   execute: function(obj) {

ui-v2/app/services/feedback.js

@@ -1,35 +1,43 @@
 import Service, { inject as service } from '@ember/service';
 import { get, set } from '@ember/object';
+import callableType from 'consul-ui/utils/callable-type';
 
 export default Service.extend({
   notify: service('flashMessages'),
   logger: service('logger'),
   execute: function(handle, success, error, controller) {
     set(controller, 'isLoading', true);
+    const displaySuccess = callableType(success);
+    const displayError = callableType(error);
     const notify = get(this, 'notify');
-    return handle()
-      .then(() => {
-        notify.add({
-          type: 'success',
-          message: success,
-        });
-      })
-      .catch(e => {
-        get(this, 'logger').execute(e);
-        if (e.name === 'TransitionAborted') {
+    return (
+      handle()
+        //TODO: pass this through to display success..
+        .then(() => {
           notify.add({
             type: 'success',
-            message: success,
+            // here..
+            message: displaySuccess(),
           });
-        } else {
-          notify.add({
-            type: 'error',
-            message: error,
-          });
-        }
-      })
-      .finally(function() {
-        set(controller, 'isLoading', false);
-      });
+        })
+        .catch(e => {
+          get(this, 'logger').execute(e);
+          if (e.name === 'TransitionAborted') {
+            notify.add({
+              type: 'success',
+              // and here
+              message: displaySuccess(),
+            });
+          } else {
+            notify.add({
+              type: 'error',
+              message: displayError(e),
+            });
+          }
+        })
+        .finally(function() {
+          set(controller, 'isLoading', false);
+        })
+    );
   },
 });

ui-v2/app/styles/components/flash-message.scss

@@ -6,7 +6,7 @@
 }
 %flash-message p.success {
   border-color: $green;
-  background-color: rgba($green, 0.1);
+  background-color: $green-050;
 }
 %flash-message p {
   color: $green;
@@ -16,7 +16,7 @@
 }
 %flash-message p.error {
   border-color: $red;
-  background-color: rgba($red, 0.1);
+  background-color: $red-050;
 }
 %flash-message p.error {
   color: $red;
@@ -29,10 +29,12 @@
 %flash-message {
   display: flex;
   position: relative;
+  z-index: 2;
   justify-content: center;
+  margin: 0 15%;
 }
 %flash-message p {
-  bottom: -10px;
+  top: -46px;
   position: absolute;
   padding: 9px 15px;
 }
@@ -46,4 +48,5 @@
 }
 %flash-message p strong::before {
   left: 0;
+  margin-top: -0.5em !important;
 }

ui-v2/app/styles/variables/color.scss

@@ -2,6 +2,9 @@ $magenta-50: #f9ebf2;
 $magenta-600: #9e2159;
 $magenta-800: #5a1434;
 
+$green-050: #ecf7ed;
+
+$red-050: #f9ecee;
 $red-500: #c73445;
 $red-700: #7f222c;
 

ui-v2/app/utils/callable-type.js

@@ -0,0 +1,9 @@
+export default function(obj) {
+  if (typeof obj !== 'function') {
+    return function() {
+      return obj;
+    };
+  } else {
+    return obj;
+  }
+}

ui-v2/app/utils/http/status.js

@@ -1,2 +1,3 @@
 export const OK = 200;
 export const UNAUTHORIZED = 401;
+export const INTERNAL_SERVER_ERROR = 500;

ui-v2/tests/unit/utils/callable-type-test.js

@@ -0,0 +1,10 @@
+import callableType from 'consul-ui/utils/callable-type';
+import { module, test } from 'qunit';
+// TODO: Sure there's a better name for this
+module('Unit | Utility | callable type');
+
+test('returns a function returning the string', function(assert) {
+  const expected = 'hi';
+  const actual = callableType(expected)();
+  assert.equal(actual, expected);
+});