Merge pull request #107 from smiclea/new-item-href

Redirect to new item using HTML `a` tag

src/components/molecules/NewItemDropdown/NewItemDropdown.jsx

@@ -38,11 +38,13 @@ const List = styled.div`
   top: 45px;
   z-index: 10;
 `
-const ListItem = styled.div`
+const ListItem = styled.a`
   display: flex;
   align-items: center;
   border-bottom: 1px solid white;
   transition: all ${StyleProps.animations.swift};
+  text-decoration: none;
+  color: ${Palette.black};
   &:hover {
     background: ${Palette.grayscale[0]};
   }
@@ -151,12 +153,12 @@ class NewItemDropdown extends React.Component {
 
     let items = [{
       title: 'Migration',
-      value: 'migration',
+      href: '/#/wizard/migration',
       description: 'Migrate VMs between two clouds',
       icon: { migration: true },
     }, {
       title: 'Replica',
-      value: 'replica',
+      href: '/#/wizard/replica',
       description: 'Incrementally replicate VMs between two clouds',
       icon: { replica: true },
     }, {
@@ -174,6 +176,7 @@ class NewItemDropdown extends React.Component {
               key={item.title}
               onMouseDown={() => { this.itemMouseDown = true }}
               onMouseUp={() => { this.itemMouseDown = false }}
+              href={item.href}
               onClick={() => { this.handleItemClick(item) }}
             >
               <Icon {...item.icon} />

src/components/molecules/NewItemDropdown/test.jsx

@@ -31,6 +31,6 @@ it('dispatches change on item click with correct args', () => {
   let onChange = sinon.spy()
   let wrapper = wrap({ onChange })
   wrapper.childAt(0).simulate('click')
-  wrapper.childAt(1).childAt(1).simulate('click')
-  expect(onChange.args[0][0].value).toBe('replica')
+  wrapper.childAt(1).childAt(2).simulate('click')
+  expect(onChange.args[0][0].value).toBe('endpoint')
 })

src/components/organisms/PageHeader/PageHeader.jsx

@@ -117,12 +117,6 @@ class PageHeader extends React.Component {
 
   handleNewItem(item) {
     switch (item.value) {
-      case 'migration':
-        window.location.href = '/#/wizard/migration'
-        break
-      case 'replica':
-        window.location.href = '/#/wizard/replica'
-        break
       case 'endpoint':
         ProviderActions.loadProviders()
         this.setState({ showChooseProviderModal: true })