adds overview and redux-promise-middleware skeleton (#1)

* adds overview and redux-promise-middleware skeleton

* refactor componentRegistry and add some action tests

* add some eslint configurations and ensure tests pass

.eslintrc.js

@@ -1,11 +1,44 @@
 module.exports = {
   env: {
     browser: true,
-    'jest/globals': true,
+    'jest/globals': true
   },
-  extends: ['airbnb', 'plugin:jest/recommended'],
-  plugins: ['jest', 'react'],
+  extends: [
+    'standard',
+    'standard-react',
+    'standard-jsx',
+    'airbnb',
+    'plugin:jest/recommended',
+    'prettier',
+    'prettier/react'
+  ],
+  plugins: ['prettier', 'jest', 'react'],
   rules: {
+    'prettier/prettier': [
+      'error',
+      { singleQuote: true, trailingComma: 'none' }
+    ],
     'react/jsx-filename-extension': 'off',
+    'react/prefer-stateless-function': 'warn',
+    'react/forbid-prop-types': 'off',
+    'import/prefer-default-export': 'off',
+    'no-underscore-dangle': 'off',
+    'no-param-reassign': 'off',
+    'no-return-assign': 'off',
+    'no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'none'
+      }
+    ],
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        // Allow importing devDependencies like @storybook
+        devDependencies: true
+      }
+    ]
   },
+  parser: 'babel-eslint'
 };

.gitignore

@@ -9,6 +9,21 @@ pkg/
 spec/reports/
 tmp/
 .rubocop-*
-.idea/
 .ruby-version
 /node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": true,
+  "prettier.eslintIntegration": true,
+  "prettier.singleQuote": true,
+  "prettier.trailingComma": "none"
+}

README.md

@@ -1,6 +1,6 @@
 # ManageIQ V2V UI plugin
 
-[![Build Status](https://travis-ci.org/travis-ci/travis-web.svg?branch=ps-repo-filtering-slug-refactoring)](https://travis-ci.org/travis-ci/travis-web)
+[![Build Status](https://travis-ci.org/priley86/miq_v2v_ui_plugin.svg?branch=master)](https://travis-ci.org/priley86/miq_v2v_ui_plugin)
 
 The aim of this plugin is to provide UI infrastructure to ManageIQ for the V2V effort.
 

app/javascript/API.js

@@ -0,0 +1,39 @@
+import axios from 'axios';
+
+const getcsrfToken = () => {
+  const token = document.querySelector('meta[name="csrf-token"]');
+
+  return token ? token.content : '';
+};
+
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+axios.defaults.headers.common['X-CSRF-Token'] = getcsrfToken();
+
+export default {
+  get(url, headers = {}, params = {}) {
+    return axios.get(url, {
+      headers,
+      params
+    });
+  },
+  put(url, data = {}, headers = {}) {
+    return axios.put(url, data, {
+      headers
+    });
+  },
+  post(url, data = {}, headers = {}) {
+    return axios.post(url, data, {
+      headers
+    });
+  },
+  delete(url, headers = {}) {
+    return axios.delete(url, {
+      headers
+    });
+  },
+  patch(url, data = {}, headers = {}) {
+    return axios.patch(url, data, {
+      headers
+    });
+  }
+};

app/javascript/common/helpers.js

@@ -0,0 +1,8 @@
+// todo: expose this from patternfly-react instead?
+export const bindMethods = (context, methods) => {
+  methods.forEach(method => {
+    context[method] = context[method].bind(context);
+  });
+};
+
+export const noop = Function.prototype;

app/javascript/components/MappingWizard/index.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import {
+  Button,
+  Icon,
+  EmptyState,
+  Modal,
+  Spinner,
+  Wizard
+} from 'patternfly-react';
+import * as MappingWizardActions from '../../redux/actions/mappingWizard';
+import { noop } from '../../common/helpers';
+
+const loadingContents = () => (
+  <EmptyState>
+    <Spinner size="lg" className="blank-slate-pf-icon" loading />
+    <EmptyState.Action>
+      <h3>Loading Wizard</h3>
+    </EmptyState.Action>
+    <EmptyState.Action secondary>
+      <p>
+        Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus,
+        lorem sociosqu eget nunc amet.{' '}
+      </p>
+    </EmptyState.Action>
+  </EmptyState>
+);
+
+class MappingWizardContainer extends React.Component {
+  componentDidMount() {
+    const { url, fetchSourceClusters } = this.props;
+
+    fetchSourceClusters(url);
+  }
+  render() {
+    const { showWizard, onHide, onExited, sourceClusters } = this.props;
+
+    console.log(sourceClusters);
+
+    return (
+      <Modal
+        show={showWizard}
+        onHide={onHide}
+        onExited={onExited}
+        dialogClassName="modal-lg wizard-pf"
+      >
+        <Wizard>
+          <Modal.Header>
+            <button
+              className="close"
+              onClick={onHide}
+              aria-hidden="true"
+              aria-label="Close"
+            >
+              <Icon type="pf" name="close" />
+            </button>
+            <Modal.Title>Infrastructure Mapping Wizard</Modal.Title>
+          </Modal.Header>
+          <Modal.Body className="wizard-pf-body clearfix">
+            <Wizard.Row>
+              <Wizard.Main>{loadingContents()}</Wizard.Main>
+            </Wizard.Row>
+          </Modal.Body>
+          <Modal.Footer className="wizard-pf-footer">
+            <Button bsStyle="default" className="btn-cancel" onClick={onHide}>
+              Cancel
+            </Button>
+            <Button bsStyle="default" disabled>
+              <Icon type="fa" name="angle-left" />Back
+            </Button>
+            <Button bsStyle="primary" disabled>
+              Next<Icon type="fa" name="angle-right" />
+            </Button>
+          </Modal.Footer>
+        </Wizard>
+      </Modal>
+    );
+  }
+}
+MappingWizardContainer.propTypes = {
+  onHide: PropTypes.func,
+  onExited: PropTypes.func,
+  showWizard: PropTypes.bool,
+  url: PropTypes.string,
+  fetchSourceClusters: PropTypes.func,
+  sourceClusters: PropTypes.arrayOf(PropTypes.object)
+};
+MappingWizardContainer.defaultProps = {
+  onHide: noop,
+  onExited: noop,
+  showWizard: false,
+  url: '',
+  fetchSourceClusters: noop,
+  sourceClusters: []
+};
+
+const mapStateToProps = (state, ownProps) => ({
+  ...state.mappingWizard,
+  ...ownProps.data
+});
+
+const mergeProps = (stateProps, dispatchProps, ownProps) =>
+  Object.assign(stateProps, ownProps.data, dispatchProps);
+
+export default connect(mapStateToProps, MappingWizardActions, mergeProps)(
+  MappingWizardContainer
+);

app/javascript/components/PlanWizard/index.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import {
+  Button,
+  EmptyState,
+  Icon,
+  Modal,
+  Spinner,
+  Wizard
+} from 'patternfly-react';
+import { noop } from '../../common/helpers';
+
+const loadingContents = () => (
+  <EmptyState>
+    <Spinner size="lg" className="blank-slate-pf-icon" loading />
+    <EmptyState.Action>
+      <h3>Loading Wizard</h3>
+    </EmptyState.Action>
+    <EmptyState.Action secondary>
+      <p>
+        Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus,
+        lorem sociosqu eget nunc amet.{' '}
+      </p>
+    </EmptyState.Action>
+  </EmptyState>
+);
+
+class PlanWizardContainer extends React.Component {
+  render() {
+    const { showWizard, onHide, onExited } = this.props;
+
+    return (
+      <Modal
+        show={showWizard}
+        onHide={onHide}
+        onExited={onExited}
+        dialogClassName="modal-lg wizard-pf"
+      >
+        <Wizard>
+          <Modal.Header>
+            <button
+              className="close"
+              onClick={onHide}
+              aria-hidden="true"
+              aria-label="Close"
+            >
+              <Icon type="pf" name="close" />
+            </button>
+            <Modal.Title>Infrastructure Mapping Wizard</Modal.Title>
+          </Modal.Header>
+          <Modal.Body className="wizard-pf-body clearfix">
+            <Wizard.Row>
+              <Wizard.Main>{loadingContents()}</Wizard.Main>
+            </Wizard.Row>
+          </Modal.Body>
+          <Modal.Footer className="wizard-pf-footer">
+            <Button bsStyle="default" className="btn-cancel" onClick={onHide}>
+              Cancel
+            </Button>
+            <Button bsStyle="default" disabled>
+              <Icon type="fa" name="angle-left" />Back
+            </Button>
+            <Button bsStyle="primary" disabled>
+              Next<Icon type="fa" name="angle-right" />
+            </Button>
+          </Modal.Footer>
+        </Wizard>
+      </Modal>
+    );
+  }
+}
+PlanWizardContainer.propTypes = {
+  onHide: PropTypes.func,
+  onExited: PropTypes.func,
+  showWizard: PropTypes.bool
+};
+PlanWizardContainer.defaultProps = {
+  onHide: noop,
+  onExited: noop,
+  showWizard: false
+};
+
+const mapStateToProps = (state, ownProps) => ({
+  ...state.planWizard,
+  ...ownProps.data
+});
+
+const mergeProps = (stateProps, dispatchProps, ownProps) =>
+  Object.assign(stateProps, ownProps.data, dispatchProps);
+
+export default connect(mapStateToProps, {}, mergeProps)(PlanWizardContainer);