Browser: Update UI with new components and elements (#5671)

browser/app/js/alert/Alert.js

@@ -21,9 +21,10 @@ const Alert = ({ show, type, message, onDismiss }) => (
   <AlertComponent
     className={"alert animated " + (show ? "fadeInDown" : "fadeOutUp")}
     bsStyle={type}
-    onDismiss={onDismiss}
+    closeLabel=""
   >
-    <div className="text-center">{message}</div>
+    <i className="close close--alt" onClick={onDismiss} />
+    {message}
   </AlertComponent>
 )
 

browser/app/js/alert/AlertContainer.js

@@ -28,13 +28,13 @@ export const AlertContainer = ({ alert, clearAlert }) => {
 
 const mapStateToProps = state => {
   return {
-    alert: state.alert
+    alert: state.alert,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    clearAlert: () => dispatch(alertActions.clear())
+    clearAlert: () => dispatch(alertActions.clear()),
   }
 }
 

browser/app/js/alert/__tests___/Alert.test.js

@@ -26,9 +26,11 @@ describe("Alert", () => {
   it("should call onDismiss when close button is clicked", () => {
     const onDismiss = jest.fn()
     const wrapper = mount(
-      <Alert show={true} type="danger" message="test" onDismiss={onDismiss} />
+      <Alert show={true} type="danger" message="test" onDismiss={onDismiss} />,
     )
-    wrapper.find("button").simulate("click", { preventDefault: jest.fn() })
+    wrapper.find("button").simulate("click", {
+      preventDefault: jest.fn(),
+    })
     expect(onDismiss).toHaveBeenCalled()
   })
 })

browser/app/js/alert/__tests___/AlertContainer.test.js

@@ -21,13 +21,15 @@ import { AlertContainer } from "../AlertContainer"
 describe("Alert", () => {
   it("should render without crashing", () => {
     shallow(
-      <AlertContainer alert={{ show: true, type: "danger", message: "Test" }} />
+      <AlertContainer
+        alert={{ show: true, type: "danger", message: "Test" }}
+      />,
     )
   })
 
   it("should render nothing if message is empty", () => {
     const wrapper = shallow(
-      <AlertContainer alert={{ show: true, type: "danger", message: "" }} />
+      <AlertContainer alert={{ show: true, type: "danger", message: "" }} />,
     )
     expect(wrapper.find("Alert").length).toBe(0)
   })

browser/app/js/alert/__tests___/actions.test.js

@@ -29,10 +29,19 @@ describe("Alert actions", () => {
     const expectedActions = [
       {
         type: "alert/SET",
-        alert: { id: 0, message: "Test alert", type: "danger" }
-      }
+        alert: {
+          id: 0,
+          message: "Test alert",
+          type: "danger",
+        },
+      },
     ]
-    store.dispatch(actionsAlert.set({ message: "Test alert", type: "danger" }))
+    store.dispatch(
+      actionsAlert.set({
+        message: "Test alert",
+        type: "danger",
+      }),
+    )
     const actions = store.getActions()
     expect(actions).toEqual(expectedActions)
   })
@@ -42,14 +51,23 @@ describe("Alert actions", () => {
     const expectedActions = [
       {
         type: "alert/SET",
-        alert: { id: 1, message: "Test alert" }
+        alert: {
+          id: 1,
+          message: "Test alert",
+        },
       },
       {
         type: "alert/CLEAR",
-        alert: { id: 1 }
-      }
+        alert: {
+          id: 1,
+        },
+      },
     ]
-    store.dispatch(actionsAlert.set({ message: "Test alert" }))
+    store.dispatch(
+      actionsAlert.set({
+        message: "Test alert",
+      }),
+    )
     jest.runAllTimers()
     const actions = store.getActions()
     expect(actions).toEqual(expectedActions)
@@ -59,8 +77,8 @@ describe("Alert actions", () => {
     const store = mockStore()
     const expectedActions = [
       {
-        type: "alert/CLEAR"
-      }
+        type: "alert/CLEAR",
+      },
     ]
     store.dispatch(actionsAlert.clear())
     const actions = store.getActions()

browser/app/js/alert/__tests___/reducer.test.js

@@ -21,7 +21,7 @@ describe("alert reducer", () => {
   it("should return the initial state", () => {
     expect(reducer(undefined, {})).toEqual({
       show: false,
-      type: "danger"
+      type: "danger",
     })
   })
 
@@ -29,59 +29,81 @@ describe("alert reducer", () => {
     expect(
       reducer(undefined, {
         type: actionsAlert.SET,
-        alert: { id: 1, type: "danger", message: "Test message" }
-      })
+        alert: {
+          id: 1,
+          type: "danger",
+          message: "Test message",
+        },
+      }),
     ).toEqual({
       show: true,
       id: 1,
       type: "danger",
-      message: "Test message"
+      message: "Test message",
     })
   })
 
   it("should clear alert if id not passed", () => {
     expect(
       reducer(
-        { show: true, type: "danger", message: "Test message" },
         {
-          type: actionsAlert.CLEAR
-        }
-      )
+          show: true,
+          type: "danger",
+          message: "Test message",
+        },
+        {
+          type: actionsAlert.CLEAR,
+        },
+      ),
     ).toEqual({
       show: false,
-      type: "danger"
+      type: "danger",
     })
   })
 
   it("should clear alert if id is matching", () => {
     expect(
       reducer(
-        { show: true, id: 1, type: "danger", message: "Test message" },
+        {
+          show: true,
+          id: 1,
+          type: "danger",
+          message: "Test message",
+        },
         {
           type: actionsAlert.CLEAR,
-          alert: { id: 1 }
-        }
-      )
+          alert: {
+            id: 1,
+          },
+        },
+      ),
     ).toEqual({
       show: false,
-      type: "danger"
+      type: "danger",
     })
   })
 
   it("should not clear alert if id is not matching", () => {
     expect(
       reducer(
-        { show: true, id: 1, type: "danger", message: "Test message" },
+        {
+          show: true,
+          id: 1,
+          type: "danger",
+          message: "Test message",
+        },
         {
           type: actionsAlert.CLEAR,
-          alert: { id: 2 }
-        }
-      )
+          alert: {
+            id: 2,
+          },
+        },
+      ),
     ).toEqual({
       show: true,
       id: 1,
       type: "danger",
-      message: "Test message"
+      message: "Test message",
     })
   })
 })

browser/app/js/alert/actions.js

@@ -27,20 +27,22 @@ export const set = alert => {
         dispatch({
           type: CLEAR,
           alert: {
-            id
-          }
+            id,
+          },
         })
       }, 5000)
     }
     dispatch({
       type: SET,
       alert: Object.assign({}, alert, {
-        id
-      })
+        id,
+      }),
     })
   }
 }
 
 export const clear = () => {
-  return { type: CLEAR }
+  return {
+    type: CLEAR,
+  }
 }

browser/app/js/alert/reducer.js

@@ -18,7 +18,7 @@ import * as actionsAlert from "./actions"
 
 const initialState = {
   show: false,
-  type: "danger"
+  type: "danger",
 }
 export default (state = initialState, action) => {
   switch (action.type) {
@@ -27,7 +27,7 @@ export default (state = initialState, action) => {
         show: true,
         id: action.alert.id,
         type: action.alert.type,
-        message: action.alert.message
+        message: action.alert.message,
       }
     case actionsAlert.CLEAR:
       if (action.alert && action.alert.id != state.id) {