Fixes crc-org#35 redesign of the Actions component

src/components/Actions.jsx

@@ -2,33 +2,56 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
     Button,
+    Spinner
 } from '@patternfly/react-core';
+import {
+    PlayIcon,
+    PauseIcon,
+    TrashIcon,
+} from '@patternfly/react-icons/dist/esm/icons'
 
-import "./Actions.scss";
+import styles from "./Actions.module.scss";
 
 export default class Actions extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            CrcStatus: this.props.status
         };
     }
 
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            CrcStatus: nextProps.status
+        })
+    }
+
     render() {
+        const isRunning = this.state.CrcStatus === "Running";
+        const isStarting = this.state.CrcStatus === "Starting";
+
         return (
-            <div className="crc-actions">
-                <Button onClick={this.props.onStartClicked}
-                    variant="primary">Start</Button>{' '}
-                <Button onClick={this.props.onStopClicked}
-                    variant="secondary">Stop</Button>{' '}
-                <Button onClick={this.props.onDeleteClicked}
-                    variant="danger">Delete</Button>
+            <div className={styles.crcActions}>
+                <Button className={styles.playPauseButton}
+                    onClick={this.props.onPlayPauseClicked}
+                    variant={ isRunning || isStarting ? "secondary" : "primary" } >
+                        {
+                            isStarting ? <Spinner diameter="16px" isSVG /> : 
+                                ( isRunning ? <PauseIcon /> : <PlayIcon /> )
+                        }
+                </Button>{' '}
+                <Button className={styles.deleteButton}
+                    onClick={this.props.onDeleteClicked}
+                    variant="danger">
+                        <TrashIcon />
+                </Button>
             </div>
         );
     }
 }
 
 Actions.propTypes = {
-    onStartClicked: PropTypes.func,
-    onStopClicked: PropTypes.func,
+    status: PropTypes.string,
+    onPlayPauseClicked: PropTypes.func,
     onDeleteClicked: PropTypes.func
 };

src/components/Actions.module.scss

@@ -0,0 +1,7 @@
+.playPauseButton {
+  width: 256px;
+}
+
+.deleteButton {
+  width: 50px;
+}

src/components/ControlCard.jsx

@@ -11,6 +11,9 @@ import "./ControlCard.scss";
 export default class ControlCard extends React.Component {
     constructor(props) {
         super(props);
+        this.state = {
+            CrcStatus: this.props.status
+        };
 
         this.updateStatus = this.updateStatus.bind(this);
         this.status = React.createRef();
@@ -21,6 +24,12 @@ export default class ControlCard extends React.Component {
         this.status.current.updateStatus(values);
     }
 
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            CrcStatus: nextProps.status
+        })
+    }
+
     render() {
         return (
             <Card className="crc-controlcard">
@@ -31,8 +40,8 @@ export default class ControlCard extends React.Component {
                 </CardBody>
                 <CardFooter>
                     <Actions ref={this.actions}
-                        onStartClicked={this.props.onStartClicked}
-                        onStopClicked={this.props.onStopClicked}
+                        status={this.state.CrcStatus}
+                        onPlayPauseClicked={this.props.onPlayPauseClicked}
                         onDeleteClicked={this.props.onDeleteClicked} />
                 </CardFooter>
             </Card>
@@ -42,7 +51,7 @@ export default class ControlCard extends React.Component {
 
 ControlCard.propTypes = {
     preset: PropTypes.string,
-    onStartClicked: PropTypes.func,
-    onStopClicked: PropTypes.func,
+    status: PropTypes.string,
+    onPlayPauseClicked: PropTypes.func,
     onDeleteClicked: PropTypes.func
 };