Merge pull request RedHatInsights#84 from Hyperkid123/order-table-pf4

Use PF4 data list to show orders.

package.json

@@ -5,10 +5,10 @@
   "dependencies": {
     "@data-driven-forms/pf4-component-mapper": "^0.3.0",
     "@data-driven-forms/react-form-renderer": "^1.4.3",
-    "@manageiq/service-portal-api": "^1.1.0",
+    "@manageiq/service-portal-api": "^1.2.0",
     "@manageiq/topological_inventory": "^1.0.3",
     "@patternfly/patternfly-next": "^1.0.131",
-    "@patternfly/react-core": "^1.49.1",
+    "@patternfly/react-core": "^1.51.6",
     "@patternfly/react-icons": "^2.10.0",
     "@patternfly/react-tokens": "^1.10.0",
     "@red-hat-insights/insights-frontend-components": "^3.33.4",

src/App.scss

@@ -41,3 +41,7 @@ ul.navigation-secondary {
   }
   cursor: pointer;
 }
+
+.text-align-right {
+  text-align: right;
+}

src/Routes.js

@@ -42,7 +42,6 @@ const InsightsRoute = ({ rootClass, ...rest }) => {
 };
 
 InsightsRoute.propTypes = {
-  component: PropTypes.func,
   rootClass: PropTypes.string
 };
 

src/SmartComponents/Order/OrderServiceFormStepConfiguration.js

@@ -29,7 +29,6 @@ class OrderServiceFormStepConfiguration extends React.Component {
 
   handlePlanChange = (arg, event) =>  {
     const planId = event.currentTarget.value;
-    console.log('Plan value received:', planId);
     this.setState({ selectedPlanIdx: this.props.servicePlans.findIndex(plan=> plan.id === planId) });
   };
 
@@ -48,6 +47,7 @@ class OrderServiceFormStepConfiguration extends React.Component {
   };
 
   render() {
+    console.log('service plan', this.props);
     if (!this.props.isLoading) {
       return (
         <React.Fragment>
@@ -106,6 +106,10 @@ OrderServiceFormStepConfiguration.propTypes = {
   sendSubmitOrder: propTypes.func.isRequired
 };
 
+OrderServiceFormStepConfiguration.defaultProps = {
+  servicePlans: []
+};
+
 const mapStateToProps = ({ orderReducer: { isLoading, servicePlans }}) => ({
   isLoading,
   servicePlans

src/SmartComponents/Order/Orders.js

@@ -1,23 +1,95 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import {
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListToggle,
+  DataListContent,
+  Tabs,
+  Tab,
+  Text,
+  TextVariants,
+  TextContent
+} from '@patternfly/react-core';
 import { fetchOrderList } from '../../redux/Actions/OrderActions';
-import ContentList from '../ContentGallery/ContentList';
 import propTypes from 'prop-types';
+import OrdersToolbar from './orders-toolbar';
+import './orders.scss';
 
 class Orders extends Component {
+  state = {
+    orders: [],
+    activeTabKey: 0,
+    dataListExpanded: {}
+  }
 
   componentDidMount() {
-    this.props.fetchOrders();
+    this.props.fetchOrders()
+    .then(() => this.setState({ orders: this.props.orderList.items }));
   }
 
+  handleTabClick = (_event, activeTabKey) => this.setState({ activeTabKey })
+
+  handleDataItemToggle = id => this.setState(({ dataListExpanded }) => ({
+    dataListExpanded: { ...dataListExpanded, [id]: !dataListExpanded[id] }
+  }))
+
+  renderDataListItems = data => data.map((item, index) => (
+    <DataListItem key={ item.id } aria-labelledby={ `${item.id}-expand` } isExpanded={ this.state.dataListExpanded[item.id] }>
+      { data.id }
+      <DataListToggle
+        id={ item.id }
+        aria-label={ `${item.id}-expand` }
+        aria-labelledby={ `${item.id}-expand` }
+        onClick={ () => this.handleDataItemToggle(item.id) }
+        isExpanded={ this.state.dataListExpanded[item.id] }
+      />
+      <DataListCell>
+        <TextContent>
+          <Text component={ TextVariants.h4 }>Order { index }</Text>
+          <Text style={ { marginBottom: 0 } } component={ TextVariants.small }>{ item.created_at.toString() }</Text>
+        </TextContent>
+      </DataListCell>
+      <DataListCell className="order-cell" style={ { alignSelf: 'center' } }>
+        <TextContent className="text-align-right">
+          <Text component={ TextVariants.h5 }>{ item.state }</Text>
+        </TextContent>
+      </DataListCell>
+      <DataListContent aria-label={ `${item.id}-content` } isHidden={ !this.state.dataListExpanded[item.id] }>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+          dolore magna aliqua.
+        </p>
+      </DataListContent>
+    </DataListItem>
+  ))
+
   render() {
-    let orderList = {
-      ...this.props.orderList,
-      isLoading: this.props.isLoading
-    };
+    const { isLoading } = this.props.isLoading;
+    if (isLoading) {
+      return <div>Loading</div>;
+    }
+
+    const { orders, activeTabKey } = this.state;
+
     return (
-      <div className="pf-l-stack__item pf-m-secondary ">
-        <ContentList { ...orderList } />
+      <div>
+        <OrdersToolbar />
+        <div>
+          <Tabs className="order-tabs" activeKey={ activeTabKey } onSelect={ this.handleTabClick }>
+            <Tab eventKey={ 0 } title="My orders" className="pf-u-p-lg">
+              <DataList aria-label="all-orders">
+                { this.renderDataListItems(orders) }
+              </DataList>
+            </Tab>
+            <Tab eventKey={ 1 } title="All orders" className="pf-u-p-lg">
+              <DataList aria-label="all-orders">
+                { this.renderDataListItems(orders) }
+              </DataList>
+            </Tab>
+          </Tabs>
+        </div>
       </div>
     );
   }

src/SmartComponents/Order/orders-toolbar.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink, withRouter } from 'react-router-dom';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSection,
+  ToolbarItem,
+  TextContent,
+  Text,
+  TextVariants
+} from '@patternfly/react-core';
+import './orders.scss';
+
+const OrdersToolbar = ({ match: { path }}) => (
+  <Toolbar className="pf-u-pt-xl pf-u-pr-xl pf-u-pl-xl order-toolbar-breadcrumbs" style={ { backgroundColor: '#FFFFFF' } }>
+    <ToolbarSection aria-label="order-toolbar-breadcrumbs">
+      <ToolbarGroup>
+        <ToolbarItem>
+          <Breadcrumb>
+            <BreadcrumbItem isActive={ path === '/portfolios' }>
+              <NavLink exact to="/portfolios">All Portfolios</NavLink>
+            </BreadcrumbItem>
+            <BreadcrumbItem isActive={ path === '/orders' }>
+              <NavLink exact to="/orders">Orders</NavLink>
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </ToolbarSection>
+    <ToolbarSection aria-label="order-toolbar-heading">
+      <ToolbarGroup>
+        <ToolbarItem>
+          <TextContent>
+            <Text component={ TextVariants.h1 }>Orders</Text>
+          </TextContent>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </ToolbarSection>
+  </Toolbar>
+);
+
+OrdersToolbar.propTypes = {
+  match: PropTypes.shape({
+    path: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export default withRouter(OrdersToolbar);

src/SmartComponents/Order/orders.scss

@@ -1 +1,25 @@
 @import "../../App";
+
+.order-tabs {
+ background-color: #FFFFFF;
+ padding: 32px 32px 0 32px;
+ li {
+   padding: initial
+ }
+}
+
+.order-data-list {
+  .order-cell {
+    align-self: center
+  }
+}
+
+.order-toolbar-breadcrumbs {
+  .pf-c-breadcrumb__item {
+    .active{ 
+      color: var(--pf-c-breadcrumb__item--Color);
+      text-decoration: none;
+      pointer-events: none;
+    }
+  }
+}

src/test/redux/actions/portfolio-actions.test.js

@@ -1,6 +1,7 @@
 import configureStore from 'redux-mock-store' ;
 import thunk from 'redux-thunk';
 import promiseMiddleware from 'redux-promise-middleware';
+import { Portfolio } from '@manageiq/service-portal-api';
 import { notificationsMiddleware, ADD_NOTIFICATION } from '@red-hat-insights/insights-frontend-components/components/Notifications';
 import {
   FETCH_PORTFOLIOS,
@@ -41,14 +42,11 @@ describe('Portfolio actions', () => {
       type: `${FETCH_PORTFOLIOS}_PENDING`
     }, {
       type: `${FETCH_PORTFOLIOS}_FULFILLED`,
-      payload: [{ id: '1', name: 'foo' }]
+      payload: [ new Portfolio('name', 'description') ]
     }];
 
     apiClientMock.get(SERVICE_PORTAL_API_BASE + '/portfolios', mockOnce({
-      body: [{
-        id: '1',
-        name: 'foo'
-      }]
+      body: [ new Portfolio('name', 'description') ]
     }));
 
     return store.dispatch(fetchPortfolios())