Просмотр исходного кода

Redirect to new item using HTML `a` tag

Use `a` HTML tag to redirect to new Migration or Replica, instead of
redirecting using Javascript.
This allows browser features such as right click to 'Open link in new
tab' and seeing the URL in the bottom status bar before opening it.
Sergiu Miclea 8 лет назад
Родитель
Сommit
f7a16fa042

+ 6 - 3
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} />

+ 2 - 2
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')
 })

+ 0 - 6
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 })