Merge pull request #133 from smiclea/fix-wizard-scroll

Fix wizard's providers list when scroll is visible

src/components/organisms/WizardEndpointList/WizardEndpointList.jsx

@@ -20,24 +20,40 @@ import { EndpointLogos, Dropdown, StatusImage, Button } from 'components'
 
 const Wrapper = styled.div`
   display: flex;
-  flex-wrap: wrap;
-  ${props => !props.loading ? css`
-    margin-left: -112px;
-    margin-top: -96px;
-  ` : null}
-  align-items: center;
-  margin-bottom: 64px;
+  flex-direction: column;
+  width: 100%;
+  ${props => props.isCentered ? css`
+    justify-content: center;
+    align-items: center;
+  ` : ''}
 `
 const Item = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-left: 112px;
-  margin-top: 96px;
 `
 const EndpointLogosStyled = styled(EndpointLogos) `
   margin-bottom: 32px;
 `
+const Row = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  margin-bottom: 96px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  ${props => props.isIncomplete ? css`
+    justify-content: center;
+    ${Item} {
+      margin-right: 112px;
+      &:last-child {
+        margin-right: 0px;
+      }
+    }
+  ` : css`
+    justify-content: space-between;
+  `}
+`
 
 class WizardEndpointList extends React.Component {
   static propTypes = {
@@ -59,52 +75,70 @@ class WizardEndpointList extends React.Component {
     this.props.onAddEndpoint(selectedItem.provider)
   }
 
+  renderProvider(provider) {
+    let otherEndpoint = this.props.otherEndpoint
+    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 },
+      ]
+
+      actionInput = (
+        <Dropdown
+          primary={Boolean(selectedItem)}
+          items={items}
+          labelField="name"
+          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>
+    )
+  }
+
   renderProviders() {
     if (this.props.loading) {
       return null
     }
 
-    return this.props.providers.map(provider => {
-      let otherEndpoint = this.props.otherEndpoint
-      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 },
-        ]
-
-        actionInput = (
-          <Dropdown
-            primary={Boolean(selectedItem)}
-            items={items}
-            labelField="name"
-            noSelectionMessage="Select"
-            centered
-            selectedItem={selectedItem}
-            onChange={selectedItem => { this.handleOnChange(selectedItem) }}
-          />
-        )
-      } else {
-        actionInput = (
-          <Button
-            secondary
-            hollow
-            hoverPrimary
-            onClick={() => { this.handleOnChange({ id: 'addNew', provider }) }}
-          >Add</Button>
-        )
+    const itemsPerRow = 3
+    let lastItems = []
+    let rows = []
+    this.props.providers.forEach((provider, i) => {
+      lastItems.push(this.renderProvider(provider))
+      let isIncomplete = i === this.props.providers.length - 1 && lastItems.length < itemsPerRow
+      if (i % itemsPerRow === itemsPerRow - 1 || isIncomplete) {
+        rows.push((
+          <Row key={i} isIncomplete={isIncomplete}>
+            {lastItems}
+          </Row>
+        ))
+        lastItems = []
       }
-
-      return (
-        <Item key={provider}>
-          <EndpointLogosStyled height={128} endpoint={provider} disabled={items.length === 0} />
-          {actionInput}
-        </Item>
-      )
     })
+
+    return rows
   }
 
   renderLoading() {
@@ -112,12 +146,12 @@ class WizardEndpointList extends React.Component {
       return null
     }
 
-    return <StatusImage loading />
+    return <StatusImage style={{ marginTop: '-48px' }} loading />
   }
 
   render() {
     return (
-      <Wrapper loading={this.props.loading}>
+      <Wrapper isCentered={this.props.loading}>
         {this.renderLoading()}
         {this.renderProviders()}
       </Wrapper>

src/components/organisms/WizardInstances/WizardInstances.jsx

@@ -46,6 +46,7 @@ const LoadingWrapper = styled.div`
 const InstancesWrapper = styled.div`
   margin-left: -32px;
   flex-grow: 1;
+  overflow: auto;
 `
 const InstanceContent = styled.div`
   display: flex;
@@ -120,8 +121,8 @@ const FilterSeparator = styled.div`
 const Pagination = styled.div`
   display: flex;
   justify-content: center;
-  margin-bottom: 64px;
-  margin-top: 32px;
+  margin: 32px 0 16px 0;
+  flex-shrink: 0;
 `
 const Page = styled.div`
   width: 30px;