refactor v2v, basicSettings and CreateVmDialog + fix bugs (#417)

- renamed basiceSettings -> vmSettings
- updated enhancedK8sMethods

sass/components/Wizard/create-vm-wizard.scss

@@ -23,10 +23,8 @@
   min-height: 100px;
 }
 
-.kubevirt-create-vm-wizard__import-vmware-passwordcheck-button-section {
-  margin-top: 10px; /* More compact, higher-level sections are 15px */
-  display: inline-flex;
-  width: 100%;
+.kubevirt-create-vm-wizard__import-vmware-password {
+  margin-bottom: 10px; /* More compact, higher-level sections are 15px */
 }
 
 .kubevirt-create-vm-wizard__import-vmware-passwordcheck-button {

src/components/Form/Dropdown.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import { isObject } from 'lodash';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { ButtonGroup, DropdownButton, MenuItem, noop, Tooltip, OverlayTrigger } from 'patternfly-react';
 
 export const Dropdown = ({ id, value, disabled, onChange, choices, className, withTooltips }) => {
-  const title = typeof value === 'object' ? value.name || value.id : value;
+  const title = isObject(value) ? value.name || value.id : value;
   return (
     <ButtonGroup justified key={id}>
       <DropdownButton
@@ -16,9 +17,8 @@ export const Dropdown = ({ id, value, disabled, onChange, choices, className, wi
         onSelect={onChange}
       >
         {choices.map(choice => {
-          const isObject = typeof choice === 'object';
-          const key = isObject ? choice.id || choice.name : choice;
-          const val = isObject ? choice.name : choice;
+          const key = isObject(choice) ? choice.id || choice.name : choice;
+          const val = isObject(choice) ? choice.name : choice;
 
           const content = (
             <MenuItem key={key} eventKey={choice}>

src/components/Form/FormRow.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Col, ControlLabel, FormGroup, HelpBlock, FieldLevelHelp } from 'patternfly-react';
+import { get } from 'lodash';
+
+import { VALIDATION_INFO_TYPE } from '../../constants';
+import { prefixedId } from '../../utils';
+
+export const FormControlLabel = ({ isRequired, title, help }) => (
+  <React.Fragment>
+    <ControlLabel className={isRequired ? 'required-pf' : null}>{title}</ControlLabel>
+    {help && <FieldLevelHelp className="kubevirt-form-group__field-help" placement="right" content={help} />}
+  </React.Fragment>
+);
+
+FormControlLabel.defaultProps = {
+  isRequired: false,
+  title: '',
+  help: '',
+};
+
+FormControlLabel.propTypes = {
+  isRequired: PropTypes.bool,
+  title: PropTypes.string,
+  help: PropTypes.string,
+};
+
+export const ValidationFormRow = ({
+  children,
+  id,
+  className,
+  isHidden,
+  validation,
+  controlSize,
+  labelSize,
+  textPosition,
+  ...props
+}) => {
+  if (isHidden) {
+    return null;
+  }
+
+  return (
+    <FormGroup
+      id={prefixedId(id, 'id-form-row')}
+      validationState={validation && validation.type !== VALIDATION_INFO_TYPE ? validation.type : null}
+      className={classNames('kubevirt-form-group', className)}
+    >
+      <Col sm={labelSize} className={textPosition}>
+        <FormControlLabel {...props} />
+      </Col>
+      <Col sm={controlSize}>{children}</Col>
+    </FormGroup>
+  );
+};
+
+ValidationFormRow.defaultProps = {
+  ...FormControlLabel.defaultProps,
+  children: null,
+  id: null,
+  className: null,
+  isHidden: false,
+  validation: {},
+  controlSize: 5,
+  labelSize: 3,
+  textPosition: 'text-right',
+};
+
+ValidationFormRow.propTypes = {
+  ...FormControlLabel.propTypes,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  id: PropTypes.string,
+  className: PropTypes.string,
+  isHidden: PropTypes.bool,
+  validation: PropTypes.object,
+  controlSize: PropTypes.number,
+  labelSize: PropTypes.number,
+  textPosition: PropTypes.string,
+};
+
+export const FormRow = ({ children, validation, ...props }) => {
+  const validationMessage = get(validation, 'message', null);
+
+  return (
+    <ValidationFormRow validation={validation} {...props}>
+      {children}
+      {validationMessage && <HelpBlock>{validationMessage}</HelpBlock>}
+    </ValidationFormRow>
+  );
+};
+
+FormRow.defaultProps = ValidationFormRow.defaultProps;
+
+FormRow.propTypes = ValidationFormRow.propTypes;

src/components/Form/fixtures/FormRow.fixture.js

@@ -0,0 +1,27 @@
+import { FormRow, ValidationFormRow } from '../FormRow';
+import { VALIDATION_ERROR_TYPE } from '../../../constants';
+
+export default [
+  {
+    component: FormRow,
+    name: 'FormRow',
+    props: {
+      id: '1',
+      children: 'text',
+      onChange: () => {},
+    },
+  },
+  {
+    component: ValidationFormRow,
+    name: 'error ValidationFormRow',
+    props: {
+      id: '1',
+      children: 'test',
+      validation: {
+        message: 'error validation',
+        type: VALIDATION_ERROR_TYPE,
+      },
+      onChange: () => {},
+    },
+  },
+];

src/components/Form/tests/FormRow.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { FormRow, ValidationFormRow, FormControlLabel } from '../FormRow';
+
+describe('<FormRow />', () => {
+  it('renders FormRow correctly', () => {
+    const component = shallow(<FormRow>test</FormRow>);
+    expect(component).toMatchSnapshot();
+  });
+  it('renders ValidationFormRow correctly', () => {
+    const component = shallow(<ValidationFormRow>test</ValidationFormRow>);
+    expect(component).toMatchSnapshot();
+  });
+  it('renders FormControlLabel correctly', () => {
+    const component = shallow(<FormControlLabel title="test" />);
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/Form/tests/__snapshots__/FormRow.test.js.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FormRow /> renders FormControlLabel correctly 1`] = `
+<Fragment>
+  <ControlLabel
+    bsClass="control-label"
+    className={null}
+    srOnly={false}
+  >
+    test
+  </ControlLabel>
+</Fragment>
+`;
+
+exports[`<FormRow /> renders FormRow correctly 1`] = `
+<ValidationFormRow
+  className={null}
+  controlSize={5}
+  help=""
+  id={null}
+  isHidden={false}
+  isRequired={false}
+  labelSize={3}
+  textPosition="text-right"
+  title=""
+  validation={Object {}}
+>
+  test
+</ValidationFormRow>
+`;
+
+exports[`<FormRow /> renders ValidationFormRow correctly 1`] = `
+<FormGroup
+  bsClass="form-group"
+  className="kubevirt-form-group"
+  id={null}
+>
+  <Col
+    bsClass="col"
+    className="text-right"
+    componentClass="div"
+    sm={3}
+  >
+    <FormControlLabel
+      help=""
+      isRequired={false}
+      title=""
+    />
+  </Col>
+  <Col
+    bsClass="col"
+    componentClass="div"
+    sm={5}
+  >
+    test
+  </Col>
+</FormGroup>
+`;