Merge branch 'master' into issues/467

client/src/components/app.js

@@ -10,6 +10,7 @@ import Content from './content/content';
 import Masthead from './masthead/masthead';
 import ToastNotificationsList from './toastNotificationList/toastNotificatinsList';
 import VerticalNavigation from './verticalNavigation/verticalNavigation';
+import ConfirmationModal from './confirmationModal/confirmationModal';
 
 import logo from '../logo.svg';
 
@@ -41,7 +42,8 @@ class App extends React.Component {
           <AboutModal.VersionItem label="Label" versionText="Version" />
         </AboutModal.Versions>
       </AboutModal>,
-      <ToastNotificationsList key="toastList" />
+      <ToastNotificationsList key="toastList" />,
+      <ConfirmationModal key="confirmationModal" />
     ];
   }
 }

client/src/components/confirmationModal/confirmationModal.js

@@ -0,0 +1,100 @@
+import { connect } from 'react-redux';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Modal, Button, Icon } from 'patternfly-react';
+
+import { bindMethods } from '../../common/helpers';
+import Store from '../../redux/store';
+import { confirmationModalTypes } from '../../redux/constants';
+
+class ConfirmationModal extends React.Component {
+  constructor() {
+    super();
+
+    bindMethods(this, ['cancel']);
+  }
+
+  cancel() {
+    if (this.props.onCancel) {
+      this.props.onCancel();
+    } else {
+      Store.dispatch({
+        type: confirmationModalTypes.CONFIRMATION_MODAL_HIDE
+      });
+    }
+  }
+
+  render() {
+    const {
+      show,
+      confirmTitle,
+      confirmHeading,
+      confirmBody,
+      confirmButtonText,
+      onConfirm
+    } = this.props;
+
+    return (
+      <Modal show={show} onHide={this.cancel}>
+        <Modal.Header>
+          <button
+            className="close"
+            onClick={this.cancel}
+            aria-hidden="true"
+            aria-label="Close"
+          >
+            <Icon type="pf" name="close" />
+          </button>
+          <Modal.Title>{confirmTitle}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {confirmHeading}
+          <p>{confirmBody}</p>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            bsStyle="default"
+            className="btn-cancel"
+            onClick={this.cancel}
+          >
+            Cancel
+          </Button>
+          <Button bsStyle="primary" onClick={onConfirm}>
+            {confirmButtonText}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+ConfirmationModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  confirmTitle: PropTypes.string,
+  confirmHeading: PropTypes.object,
+  confirmBody: PropTypes.object,
+  confirmButtonText: PropTypes.string,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func
+};
+ConfirmationModal.defaultProps = {
+  confirmTitle: 'Confirm',
+  confirmHeading: null,
+  confirmBody: null,
+  confirmButtonText: 'Confirm'
+};
+
+function mapStateToProps(state, ownProps) {
+  return {
+    show: state.confirmationModal.show,
+    confirmTitle: state.confirmationModal.title,
+    confirmHeading: state.confirmationModal.heading,
+    confirmBody: state.confirmationModal.body,
+    confirmButtonText: state.confirmationModal.confirmButtonText,
+    onConfirm: state.confirmationModal.onConfirm,
+    onCancel: state.confirmationModal.onCancel
+  };
+}
+
+export default connect(mapStateToProps)(ConfirmationModal);

client/src/components/credentials/credentialListItem.js

@@ -1,17 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import JSONPretty from 'react-json-pretty';
 import { ListView, Button, Icon, Checkbox } from 'patternfly-react';
 
 class CredentialListItem extends React.Component {
-  renderExpansionContents() {
-    const { item } = this.props;
-
-    return <JSONPretty json={item} />;
-  }
-
   render() {
-    const { item, onItemSelectChange } = this.props;
+    const { item, onItemSelectChange, onEdit, onDelete } = this.props;
 
     let itemIcon;
     switch (item.cred_type) {
@@ -52,10 +45,22 @@ class CredentialListItem extends React.Component {
         }
         actions={
           <span>
-            <Button className="unavailable" bsStyle="link" key="editButton">
+            <Button
+              onClick={() => {
+                onEdit(item);
+              }}
+              bsStyle="link"
+              key="editButton"
+            >
               <Icon type="pf" name="edit" />
             </Button>
-            <Button className="unavailable" bsStyle="link" key="removeButton">
+            <Button
+              onClick={() => {
+                onDelete(item);
+              }}
+              bsStyle="link"
+              key="removeButton"
+            >
               <Icon type="pf" name="delete" />
             </Button>
           </span>
@@ -77,16 +82,16 @@ class CredentialListItem extends React.Component {
             {item.authType === 'becomeUser' ? item.become_method : ''}
           </ListView.InfoItem>
         ]}
-      >
-        {this.renderExpansionContents()}
-      </ListView.Item>
+      />
     );
   }
 }
 
 CredentialListItem.propTypes = {
   item: PropTypes.object,
-  onItemSelectChange: PropTypes.func
+  onItemSelectChange: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func
 };
 
 export { CredentialListItem };

client/src/components/credentials/credentials.js

@@ -17,7 +17,10 @@ import CredentialsToolbar from './credentialsToolbar';
 import CredentialsEmptyState from './credentialsEmptyState';
 import { CredentialListItem } from './credentialListItem';
 import Store from '../../redux/store';
-import { toastNotificationTypes } from '../../redux/constants';
+import {
+  confirmationModalTypes,
+  toastNotificationTypes
+} from '../../redux/constants';
 import { bindMethods } from '../../common/helpers';
 
 class Credentials extends React.Component {
@@ -28,6 +31,8 @@ class Credentials extends React.Component {
       'addCredential',
       'deleteCredentials',
       'itemSelectChange',
+      'editCredential',
+      'deleteCredential',
       'addSource',
       'importSources',
       'refresh'
@@ -176,6 +181,47 @@ class Credentials extends React.Component {
     this.setState({ selectedItems: selectedItems });
   }
 
+  editCredential(item) {
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: item.name,
+      message: 'Editing credentials is not yet implemented'
+    });
+  }
+
+  doDeleteCredential(item) {
+    Store.dispatch({
+      type: confirmationModalTypes.CONFIRMATION_MODAL_HIDE
+    });
+
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: item.name,
+      message: 'Deleting credentials is not yet implemented'
+    });
+  }
+
+  deleteCredential(item) {
+    let heading = (
+      <h3>
+        Are you sure you want to delete the credential{' '}
+        <strong>{item.name}</strong>?
+      </h3>
+    );
+
+    let onConfirm = () => this.doDeleteCredential(item);
+
+    Store.dispatch({
+      type: confirmationModalTypes.CONFIRMATION_MODAL_SHOW,
+      title: 'Delete Source',
+      heading: heading,
+      confirmButtonText: 'Delete',
+      onConfirm: onConfirm
+    });
+  }
+
   addSource() {
     Store.dispatch({
       type: toastNotificationTypes.TOAST_ADD,
@@ -207,6 +253,8 @@ class Credentials extends React.Component {
               item={item}
               key={index}
               onItemSelectChange={this.itemSelectChange}
+              onEdit={this.editCredential}
+              onDelete={this.deleteCredential}
             />
           ))}
         </ListView>

client/src/components/scans/scanListItem.js

@@ -42,7 +42,14 @@ class ScanListItem extends React.Component {
   }
 
   render() {
-    const { item, onSummaryDownload, onDetailedDownload } = this.props;
+    const {
+      item,
+      onSummaryDownload,
+      onDetailedDownload,
+      onPause,
+      onCancel,
+      onStart
+    } = this.props;
     const { expanded, expandType } = this.state;
 
     let sourcesCount = item.sources ? item.sources.length : 0;
@@ -147,10 +154,10 @@ class ScanListItem extends React.Component {
               key="kebab"
               pullRight
             >
-              <MenuItem className="unavailable">Pause</MenuItem>
-              <MenuItem className="unavailable">Cancel</MenuItem>
+              <MenuItem onClick={() => onPause(item)}>Pause</MenuItem>
+              <MenuItem onClick={() => onCancel(item)}>Cancel</MenuItem>
               <MenuItem divider />
-              <MenuItem className="unavailable">Start Scan</MenuItem>
+              <MenuItem onClick={() => onStart(item)}>Start Scan</MenuItem>
             </DropdownKebab>
           </span>
         }
@@ -242,7 +249,10 @@ class ScanListItem extends React.Component {
 ScanListItem.propTypes = {
   item: PropTypes.object,
   onSummaryDownload: PropTypes.func,
-  onDetailedDownload: PropTypes.func
+  onDetailedDownload: PropTypes.func,
+  onPause: PropTypes.func,
+  onCancel: PropTypes.func,
+  onStart: PropTypes.func
 };
 
 export { ScanListItem };

client/src/components/scans/scans.js

@@ -27,6 +27,9 @@ class Scans extends React.Component {
     bindMethods(this, [
       'downloadSummaryReport',
       'downloadDetailedReport',
+      'pauseScan',
+      'cancelScan',
+      'startScan',
       'addSource',
       'importSources',
       'refresh'
@@ -158,15 +161,31 @@ class Scans extends React.Component {
     });
   }
 
-  itemSelectChange(item) {
-    const { filteredItems } = this.state;
+  pauseScan(item) {
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: item.id,
+      message: 'Pausing scans is not yet implemented'
+    });
+  }
 
-    item.selected = !item.selected;
-    let selectedItems = filteredItems.filter(item => {
-      return item.selected === true;
+  cancelScan(item) {
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: item.id,
+      message: 'Cancelling scans is not yet implemented'
     });
+  }
 
-    this.setState({ selectedItems: selectedItems });
+  startScan(item) {
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: item.id,
+      message: 'Starting scans is not yet implemented'
+    });
   }
 
   addSource() {
@@ -201,6 +220,9 @@ class Scans extends React.Component {
               key={index}
               onSummaryDownload={this.downloadSummaryReport}
               onDetailedDownload={this.downloadDetailedReport}
+              onPause={this.pauseScan}
+              onCancel={this.cancelScan}
+              onStart={this.startScan}
             />
           ))}
         </ListView>