Add support for specifying alert type.

[#106346840]

Signed-off-by: Adrian Zankich <azankich@pivotal.io>

frontend/app/js/components/alert.js

@@ -6,9 +6,10 @@ export default class Alert extends React.Component {
     }
     render() {
         return this.hasContent() && (
-            <div className="alert alert-info" role="alert">
+            <div className={`alert alert-${this.props.type}`} role="alert">
                 {this.props.message}
             </div>
         );
     }
 }
+

frontend/app/js/reducers/alert.js

@@ -3,9 +3,12 @@ import { CREATE_PROJECT_SUCCESS, CREATE_PROJECT_FAILURE } from '../actions';
 export default function alert(state={}, action={}) {
     switch(action.type) {
         case CREATE_PROJECT_SUCCESS:
-            return {message: `${action.payload.name} was created`};
+            return {type: 'info', message: `${action.payload.name} was created`};
         case CREATE_PROJECT_FAILURE:
-            return {message: `There was a problem creating ${action.payload.name}: ${action.payload.data}`}
+            return {
+                type: 'danger',
+                message: `There was a problem creating ${action.payload.name}: ${action.payload.data}`
+            };
         default:
             return state;
     }

frontend/test/components/alert_spec.js

@@ -13,12 +13,19 @@ describe('Alert component', () => {
     }
 
     it('should render with a success alert', () => {
-        let alert = createAlert({message: 'This is the message'});
+        let alert = createAlert({message: 'This is the message', type: 'info'});
         let domNode = findDOMNode(alert);
-        expect(domNode.className).toMatch(/\balert\b/);
+        expect(domNode.className).toMatch(/\balert-info\b/);
         expect(domNode.textContent).toMatch(/This is the message/);
     });
 
+    it('should render with an error alert', () => {
+        let alert = createAlert({message: 'This is an error message', type: 'danger'});
+        let domNode = findDOMNode(alert);
+        expect(domNode.className).toMatch(/\balert-danger\b/);
+        expect(domNode.textContent).toMatch(/This is an error message/);
+    });
+
     it('should not display if no message is defined', () => {
         let alert = createAlert();
         expect(alert.render()).toBe(false);

frontend/test/reducers/alert_spec.js

@@ -11,13 +11,13 @@ describe('alert reducer', () => {
         expect(reducer({}, {
             type: CREATE_PROJECT_SUCCESS,
             payload: {name: 'George', id: 12345}
-        })).toEqual({message: 'George was created'});
+        })).toEqual({type: 'info', message: 'George was created'});
     });
 
     it('creates a new alert upon receiving a CREATE_PROJECT_FAILURE action', () => {
         expect(reducer({}, {
             type: CREATE_PROJECT_FAILURE,
             payload: {name: 'George', data: "db error"}
-        })).toEqual({message: 'There was a problem creating George: db error'});
+        })).toEqual({type: 'danger', message: 'There was a problem creating George: db error'});
     });
 });

integration_tests/spec/project_spec.rb

@@ -13,7 +13,9 @@
 
   it 'displays an error alert on project name duplicate' do
     navigates_to_new_project_page
-    saves_duplicate_project_name
+    name = saves_project
+    navigates_to_new_project_page
+    saves_duplicate_project_name(name)
   end
 end
 
@@ -28,19 +30,23 @@ def navigates_to_new_project_page
 end
 
 def saves_project
-  fill_in 'Name', with: 'My Lovely Project'
+  name = 'My Lovely Project' + Time.now.to_f.to_s
+  fill_in 'Name', with: name
   click_on 'Submit'
 
   expect(page.status_code).to eq 200
-  expect(page).to have_content(/My Lovely Project was created/)
+  expect(page).to have_css('.alert-info')
+  expect(page).to have_content(/#{name}/)
   expect(current_path).to eq '/'
+  name
 end
 
-def saves_duplicate_project_name
-  fill_in 'Name', with: 'My Lovely Project'
+def saves_duplicate_project_name(name)
+  fill_in 'Name', with: name
   click_on 'Submit'
 
   expect(page.status_code).to eq 200
+  expect(page).to have_css('.alert-danger')
   expect(page).to have_content(/Project name already exists/)
   expect(current_path).to eq '/projects/new'
 end