Przeglądaj źródła

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 lat temu
rodzic
commit
f7a16fa042

+ 6 - 3
src/components/molecules/NewItemDropdown/NewItemDropdown.jsx

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