Merge pull request #93 from smiclea/CORWEB-141

Update Wizard Endpoint selection list CORWEB-141

src/components/atoms/Button/Button.jsx

@@ -33,6 +33,9 @@ const backgroundColor = (props) => {
 }
 
 const hoverBackgroundColor = (props) => {
+  if (props.hoverPrimary) {
+    return Palette.primary
+  }
   if (props.secondary) {
     return Palette.grayscale[3]
   }

src/components/atoms/EndpointLogos/EndpointLogos.jsx

@@ -30,6 +30,13 @@ import openstack45Image from './images/openstack-45.svg'
 import oraclevm45Image from './images/oraclevm-45.svg'
 import vmware45Image from './images/vmware-45.svg'
 
+import aws64Image from './images/aws-64.svg'
+import azure64Image from './images/azure-64.svg'
+import opc64Image from './images/opc-64.svg'
+import openstack64Image from './images/openstack-64.svg'
+import oraclevm64Image from './images/oraclevm-64.svg'
+import vmware64Image from './images/vmware-64.svg'
+
 import aws128Image from './images/aws-128.svg'
 import azure128Image from './images/azure-128.svg'
 import opc128Image from './images/opc-128.svg'
@@ -37,77 +44,75 @@ import openstack128Image from './images/openstack-128.svg'
 import oraclevm128Image from './images/oraclevm-128.svg'
 import vmware128Image from './images/vmware-128.svg'
 
-import aws64Image from './images/aws-64.svg'
-import azure64Image from './images/azure-64.svg'
-import opc64Image from './images/opc-64.svg'
-import openstack64Image from './images/openstack-64.svg'
-import oraclevm64Image from './images/oraclevm-64.svg'
-import vmware64Image from './images/vmware-64.svg'
+import aws128DisabledImage from './images/aws-128-disabled.svg'
+import azure128DisabledImage from './images/azure-128-disabled.svg'
+import opc128DisabledImage from './images/opc-128-disabled.svg'
+import openstack128DisabledImage from './images/openstack-128-disabled.svg'
+import oraclevm128DisabledImage from './images/oraclevm-128-disabled.svg'
+import vmware128DisabledImage from './images/vmware-128-disabled.svg'
 
 const endpointImages = {
-  azure: {
-    h32: azure32Image,
-    h45: azure45Image,
-    h128: azure128Image,
-    h64: azure64Image,
-  },
-  openstack: {
-    h32: openstack32Image,
-    h45: openstack45Image,
-    h128: openstack128Image,
-    h64: openstack64Image,
-  },
-  opc: {
-    h32: opc32Image,
-    h45: opc45Image,
-    h128: opc128Image,
-    h64: opc64Image,
-  },
-  oracle_vm: {
-    h32: oraclevm32Image,
-    h45: oraclevm45Image,
-    h128: oraclevm128Image,
-    h64: oraclevm64Image,
-  },
-  vmware_vsphere: {
-    h32: vmware32Image,
-    h45: vmware45Image,
-    h128: vmware128Image,
-    h64: vmware64Image,
-  },
-  aws: {
-    h32: aws32Image,
-    h45: aws45Image,
-    h128: aws128Image,
-    h64: aws64Image,
-  },
+  azure: [
+    { h: 32, image: azure32Image },
+    { h: 45, image: azure45Image },
+    { h: 64, image: azure64Image },
+    { h: 128, image: azure128Image },
+    { h: 128, image: azure128DisabledImage, disabled: true },
+  ],
+  openstack: [
+    { h: 32, image: openstack32Image },
+    { h: 45, image: openstack45Image },
+    { h: 64, image: openstack64Image },
+    { h: 128, image: openstack128Image },
+    { h: 128, image: openstack128DisabledImage, disabled: true },
+  ],
+  opc: [
+    { h: 32, image: opc32Image },
+    { h: 45, image: opc45Image },
+    { h: 64, image: opc64Image },
+    { h: 128, image: opc128Image },
+    { h: 128, image: opc128DisabledImage, disabled: true },
+  ],
+  oracle_vm: [
+    { h: 32, image: oraclevm32Image },
+    { h: 45, image: oraclevm45Image },
+    { h: 64, image: oraclevm64Image },
+    { h: 128, image: oraclevm128Image },
+    { h: 128, image: oraclevm128DisabledImage, disabled: true },
+  ],
+  vmware_vsphere: [
+    { h: 32, image: vmware32Image },
+    { h: 45, image: vmware45Image },
+    { h: 64, image: vmware64Image },
+    { h: 128, image: vmware128Image },
+    { h: 128, image: vmware128DisabledImage, disabled: true },
+  ],
+  aws: [
+    { h: 32, image: aws32Image },
+    { h: 45, image: aws45Image },
+    { h: 64, image: aws64Image },
+    { h: 128, image: aws128Image },
+    { h: 128, image: aws128DisabledImage, disabled: true },
+  ],
 }
 const Wrapper = styled.div``
-const Logo32 = styled.div`
-  width: 80px;
-  height: 32px;
-  background: url('${props => props.endpoint ? endpointImages[props.endpoint].h32 : ''}') no-repeat center;
-`
-const Logo45 = styled.div`
-  width: 112px;
-  height: 45px;
-  background: url('${props => props.endpoint ? endpointImages[props.endpoint].h45 : ''}') no-repeat center;
-`
-const Logo128 = styled.div`
-  width: 192px;
-  height: 128px;
-  background: url('${props => props.endpoint ? endpointImages[props.endpoint].h128 : ''}') no-repeat center;
-`
-const Logo64 = styled.div`
-  width: 192px;
-  height: 64px;
-  background: url('${props => props.endpoint ? endpointImages[props.endpoint].h64 : ''}') no-repeat center;
+const Logo = styled.div`
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+  ${props => props.imageInfo ? `background: url('${props.imageInfo.image}') no-repeat center;` : ''}  
 `
+const widthHeights = [
+  { w: 80, h: 32 },
+  { w: 112, h: 45 },
+  { w: 192, h: 128 },
+  { w: 192, h: 64 },
+]
 
 class EndpointLogos extends React.Component {
   static propTypes = {
     endpoint: PropTypes.string,
     height: PropTypes.number,
+    disabled: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -115,24 +120,24 @@ class EndpointLogos extends React.Component {
   }
 
   render() {
-    let logo
-    switch (this.props.height) {
-      case 32:
-        logo = <Logo32 endpoint={this.props.endpoint} />
-        break
-      case 45:
-        logo = <Logo45 endpoint={this.props.endpoint} />
-        break
-      case 128:
-        logo = <Logo128 endpoint={this.props.endpoint} />
-        break
-      default:
-        logo = <Logo64 endpoint={this.props.endpoint} />
+    let imageInfo = null
+    let size = widthHeights.find(wh => wh.h === this.props.height)
+
+    if (!size) {
+      return null
+    }
+
+    if (this.props.endpoint) {
+      imageInfo = endpointImages[this.props.endpoint].find(i => i.h === size.h && (!this.props.disabled || i.disabled === true))
     }
 
     return (
       <Wrapper {...this.props}>
-        {logo}
+        <Logo
+          width={size.w}
+          height={size.h}
+          imageInfo={imageInfo}
+        />
       </Wrapper>
     )
   }

src/components/atoms/EndpointLogos/story.jsx

@@ -28,7 +28,7 @@ const Wrapper = styled.div`
     margin-top: 32px;
   }
 `
-const wrap = (endpoint, height) => <EndpointLogos endpoint={endpoint} height={height} />
+const wrap = (endpoint, height, disabled = false) => <EndpointLogos endpoint={endpoint} height={height} disabled={disabled} />
 
 storiesOf('EndpointLogos', module)
   .add('32px', () => {
@@ -83,3 +83,16 @@ storiesOf('EndpointLogos', module)
       </Wrapper>
     )
   })
+  .add('128px - disabled', () => {
+    let height = 128
+    return (
+      <Wrapper>
+        {wrap('aws', height, true)}
+        {wrap('azure', height, true)}
+        {wrap('opc', height, true)}
+        {wrap('openstack', height, true)}
+        {wrap('oracle_vm', height, true)}
+        {wrap('vmware_vsphere', height, true)}
+      </Wrapper>
+    )
+  })

src/components/organisms/WizardEndpointList/WizardEndpointList.jsx

@@ -16,7 +16,7 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 import PropTypes from 'prop-types'
 
-import { EndpointLogos, Dropdown, StatusImage } from 'components'
+import { EndpointLogos, Dropdown, StatusImage, Button } from 'components'
 
 const Wrapper = styled.div`
   display: flex;
@@ -69,25 +69,39 @@ class WizardEndpointList extends React.Component {
       let items = this.props.endpoints.filter(e => e.type === provider && (!otherEndpoint || otherEndpoint.id !== e.id))
       let selectedItem = this.props.selectedEndpoint && this.props.selectedEndpoint.type === provider
         ? this.props.selectedEndpoint : null
+      let actionInput = null
+      if (items.length > 0) {
+        items = [
+          ...items,
+          { id: 'addNew', name: 'Add new ...', provider },
+        ]
 
-      items = [
-        ...items,
-        { id: 'addNew', name: 'Add new ...', provider },
-      ]
-
-      return (
-        <Item key={provider}>
-          <EndpointLogosStyled height={128} endpoint={provider} />
+        actionInput = (
           <Dropdown
             primary={Boolean(selectedItem)}
             items={items}
             labelField="name"
-            noItemsMessage="Add"
             noSelectionMessage="Select"
             centered
             selectedItem={selectedItem}
             onChange={selectedItem => { this.handleOnChange(selectedItem) }}
           />
+        )
+      } else {
+        actionInput = (
+          <Button
+            secondary
+            hollow
+            hoverPrimary
+            onClick={() => { this.handleOnChange({ id: 'addNew', provider }) }}
+          >Add</Button>
+        )
+      }
+
+      return (
+        <Item key={provider}>
+          <EndpointLogosStyled height={128} endpoint={provider} disabled={items.length === 0} />
+          {actionInput}
         </Item>
       )
     })