foreman_acd 0.9.5 → 0.10.0

data/webpack/components/ParameterSelection/ParameterSelection.js

@@ -1,85 +1,68 @@
-import $ from 'jquery';
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as sort from 'sortabular';
-import { orderBy } from 'lodash';
+import { orderBy, findIndex, cloneDeep } from 'lodash';
 import * as resolve from 'table-resolver';
+import {
+  Button,
+  Table,
+  FormControl,
+  InputGroup,
+  customHeaderFormattersDefinition,
+  inlineEditFormatterFactory,
+} from 'patternfly-react';
+
 import Select from 'foremanReact/components/common/forms/Select';
+import { translate as __ } from 'foremanReact/common/I18n';
+import ForemanModal from 'foremanReact/components/ForemanModal';
+
 import AddTableEntry from '../common/AddTableEntry';
 import EditTableEntry from '../common/EditTableEntry';
 import DeleteTableEntry from '../common/DeleteTableEntry';
 import LockTableEntry from '../common/LockTableEntry';
-import ForemanModal from 'foremanReact/components/ForemanModal';
 import * as YamlValidator from '../../js-yaml';
 
-import {
-  transformForemanData,
-} from './ParameterSelectionHelper';
-
-import {
-  dropRight,
-  findIndex,
-  cloneDeep,
-} from 'lodash';
+import { transformForemanData } from './ParameterSelectionHelper';
 
 import {
   PARAMETER_SELECTION_TYPES,
   PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
-  PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
 } from './ParameterSelectionConstants';
 
-import {
-  Icon,
-  Button,
-  Table,
-  FormControl,
-  InputGroup,
-  defaultSortingOrder,
-  customHeaderFormattersDefinition,
-  inlineEditFormatterFactory,
-} from 'patternfly-react';
-
-const theme = {
-  scheme: 'foreman',
-  backgroundColor: 'rgba(0, 0, 0, 255)',
-  base00: 'rgba(0, 0, 0, 0)',
-};
-
 class ParameterSelection extends React.Component {
-
   constructor(props) {
     super(props);
-    this.state = {textValue: ''};
+    this.state = { textValue: '' };
   }
 
   handleChange = event => {
-    this.setState({textValue: event.target.value});
+    this.setState({ textValue: event.target.value });
   };
 
-  isEditing({rowData}) {
-    return (rowData.backup !== undefined);
+  static isEditing({ rowData }) {
+    return rowData.backup !== undefined;
   }
 
   yamlValidator() {
     let result = true;
-    let msg = "";
+    let msg = '';
     try {
-      const doc = YamlValidator.load(this.state.textValue);
+      YamlValidator.load(this.state.textValue);
     } catch (e) {
       result = false;
-      msg = "Invalid Yaml: " + e.name + ": " + e.message;
+      msg = `Invalid Yaml: ${e.name}: ${e.message}`;
     }
     return {
       validateResult: result,
-      validateMsg: msg
-    }
+      validateMsg: msg,
+    };
   }
 
   yamlValue() {
-    if (this.props.editParamsRowIndex != undefined) {
-      let id = this.props.editParamsRowIndex;
-      if (this.props.parameters[id] != undefined) {
-        return this.props.parameters[id]['value'];
+    if (this.props.editParamsRowIndex !== undefined) {
+      const id = this.props.editParamsRowIndex;
+      if (this.props.parameters[id] !== undefined) {
+        return this.props.parameters[id].value;
       }
     }
     return '';
@@ -90,9 +73,14 @@ class ParameterSelection extends React.Component {
 
   componentDidMount() {
     const {
-      data: { useDefaultValue, allowRowAdjustment, allowNameAdjustment, allowDescriptionAdjustment, parameters, paramDefinition },
-      location,
-      organization,
+      data: {
+        useDefaultValue,
+        allowRowAdjustment,
+        allowNameAdjustment,
+        allowDescriptionAdjustment,
+        parameters,
+        paramDefinition,
+      },
       paramType,
       paramDataUrl,
       hiddenParameterTypes,
@@ -103,17 +91,21 @@ class ParameterSelection extends React.Component {
       activateEditParameter,
       changeEditParameter,
       openParameterSelectionDialogBox,
-      closeParameterSelectionDialogBox,
       loadParamData,
     } = this.props;
 
     if (paramDataUrl !== undefined) {
       switch (paramType) {
         case PARAMETER_SELECTION_PARAM_TYPE_FOREMAN: {
-          loadParamData({ paramDefinition: paramDefinition, url: paramDataUrl, dataType: paramType, clearParameters: false });
+          loadParamData({
+            paramDefinition,
+            url: paramDataUrl,
+            dataType: paramType,
+            clearParameters: false,
+          });
           break;
         }
-        default: { }
+        default:
       }
     }
 
@@ -146,26 +138,28 @@ class ParameterSelection extends React.Component {
       renderEdit: (value, additionalData) => (
         <td style={{ padding: '2px' }}>
           <EditTableEntry
-            disabled={true}
+            hidden={false}
+            handleLocking={false}
+            disabled
             onEditTableEntry={() => activateEditParameter(additionalData)}
             additionalData={additionalData}
           />
           &nbsp;
           <LockTableEntry
             hidden={!allowRowAdjustment}
-            disabled={true}
+            disabled
             onLockTableEntry={lockParameter}
             additionalData={additionalData}
           />
           &nbsp;
           <DeleteTableEntry
             hidden={!allowRowAdjustment}
-            disabled={true}
+            disabled
             onDeleteTableEntry={deleteParameter}
             additionalData={additionalData}
           />
         </td>
-      )
+      ),
     });
     this.inlineEditButtonsFormatter = inlineEditButtonsFormatter;
 
@@ -173,7 +167,8 @@ class ParameterSelection extends React.Component {
 
     const sortableTransform = sort.sort({
       getSortingColumns,
-      onSort: (selectedColumn, defaultSortingOrder) => sortParameter(selectedColumn, defaultSortingOrder),
+      onSort: (selectedColumn, defaultSortingOrder) =>
+        sortParameter(selectedColumn, defaultSortingOrder),
       strategy: sort.strategies.byProperty,
     });
     this.sortableTransform = sortableTransform;
@@ -191,36 +186,39 @@ class ParameterSelection extends React.Component {
           <span className="static">{value}</span>
         </td>
       ),
-      renderEditText: (value, additionalData, subtype='text') => (
+      renderEditText: (value, additionalData, subtype = 'text') => (
         <td className="editing">
           <FormControl
             type={subtype}
             defaultValue={value}
-            onBlur={e => changeEditParameter(e.target.value, additionalData) }
+            onBlur={e => changeEditParameter(e.target.value, additionalData)}
           />
         </td>
       ),
-      renderEditComplexText: (value, additionalData, subtype='text') => (
+      renderEditComplexText: (value, additionalData, subtype = 'text') => (
         <td className="editing">
-        <InputGroup>
-          <FormControl
-            type={subtype}
-            defaultValue={additionalData.rowData.isYaml == true ? '' : value}
-            onBlur={e => changeEditParameter(e.target.value, additionalData) }
-            readOnly={additionalData.rowData.isYaml}
-            placeholder={'Press YAML button for Yaml Data'}
-          />
-          <InputGroup.Button>
-            <Button onClick= {e => openParameterSelectionDialogBox(e)}> YAML </Button>
-          </InputGroup.Button>
-        </InputGroup>
+          <InputGroup>
+            <FormControl
+              type={subtype}
+              defaultValue={additionalData.rowData.isYaml === true ? '' : value}
+              onBlur={e => changeEditParameter(e.target.value, additionalData)}
+              readOnly={additionalData.rowData.isYaml}
+              placeholder="Press YAML button for Yaml Data"
+            />
+            <InputGroup.Button>
+              <Button onClick={e => openParameterSelectionDialogBox(e)}>
+                {' '}
+                YAML{' '}
+              </Button>
+            </InputGroup.Button>
+          </InputGroup>
         </td>
       ),
       renderEditSelect: (value, additionalData, options) => (
         <td className="editing">
           <Select
             value={value.toString()}
-            onChange={e => changeEditParameter(e.target.value, additionalData) }
+            onChange={e => changeEditParameter(e.target.value, additionalData)}
             options={options}
             allowClear
             key="key"
@@ -232,73 +230,127 @@ class ParameterSelection extends React.Component {
     // TODO: should we differentiate between paramType FOREMAN and ANSIBLE?
 
     const inlineEditFormatter = inlineEditFormatterFactory({
-      isEditing: additionalData => this.isEditing(additionalData),
+      isEditing: additionalData => this.constructor.isEditing(additionalData),
       renderValue: (value, additionalData) => {
         let prettyValue = value;
-        if (additionalData.property == 'type') {
+        if (additionalData.property === 'type') {
           prettyValue = PARAMETER_SELECTION_TYPES[value];
-        } else if (additionalData.property == 'value') {
+        } else if (additionalData.property === 'value') {
           switch (additionalData.rowData.type) {
             case 'computeprofile':
-              prettyValue = transformForemanData(this.props.paramData['computeprofiles'])[value]
+              prettyValue = transformForemanData(
+                this.props.paramData.computeprofiles
+              )[value];
               break;
             case 'domain':
-              prettyValue = transformForemanData(this.props.paramData['domains'])[value]
+              prettyValue = transformForemanData(this.props.paramData.domains)[
+                value
+              ];
               break;
             case 'lifecycleenv':
-              prettyValue = transformForemanData(this.props.paramData['lifecycle_environments'])[value]
+              prettyValue = transformForemanData(
+                this.props.paramData.lifecycle_environments
+              )[value];
               break;
             case 'ptable':
-              prettyValue = transformForemanData(this.props.paramData['ptables'])[value]
+              prettyValue = transformForemanData(this.props.paramData.ptables)[
+                value
+              ];
               break;
             case 'password':
-              prettyValue = '****************'
+              prettyValue = '****************';
               break;
             case 'puppetenv':
-              prettyValue = transformForemanData(this.props.paramData['environments'])[value]
+              prettyValue = transformForemanData(
+                this.props.paramData.environments
+              )[value];
               break;
             case 'text':
-              prettyValue = value
+              prettyValue = value;
               break;
             case 'complex':
-              prettyValue = additionalData.rowData.isYaml ? 'YAML value' : value;
+              prettyValue = additionalData.rowData.isYaml
+                ? 'YAML value'
+                : value;
               break;
-
+            default:
           }
         }
-        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData);
       },
       renderEdit: (value, additionalData) => {
         switch (additionalData.property) {
           case 'type':
             if (additionalData.rowData.newEntry === true) {
-              return inlineEditFormatterImpl.renderEditSelect(value, additionalData, this.props.parameterTypes);
+              return inlineEditFormatterImpl.renderEditSelect(
+                value,
+                additionalData,
+                this.props.parameterTypes
+              );
             }
-            return inlineEditFormatterImpl.renderValue(PARAMETER_SELECTION_TYPES[value], additionalData)
+            return inlineEditFormatterImpl.renderValue(
+              PARAMETER_SELECTION_TYPES[value],
+              additionalData
+            );
           case 'value':
             switch (additionalData.rowData.type) {
               case 'computeprofile':
-                return inlineEditFormatterImpl.renderEditSelect(value, additionalData, transformForemanData(this.props.paramData['computeprofiles']));
+                return inlineEditFormatterImpl.renderEditSelect(
+                  value,
+                  additionalData,
+                  transformForemanData(this.props.paramData.computeprofiles)
+                );
               case 'domain':
-                return inlineEditFormatterImpl.renderEditSelect(value, additionalData, transformForemanData(this.props.paramData['domains']));
+                return inlineEditFormatterImpl.renderEditSelect(
+                  value,
+                  additionalData,
+                  transformForemanData(this.props.paramData.domains)
+                );
               case 'lifecycleenv':
-                return inlineEditFormatterImpl.renderEditSelect(value, additionalData, transformForemanData(this.props.paramData['lifecycle_environments']));
+                return inlineEditFormatterImpl.renderEditSelect(
+                  value,
+                  additionalData,
+                  transformForemanData(
+                    this.props.paramData.lifecycle_environments
+                  )
+                );
               case 'puppetenv':
-                return inlineEditFormatterImpl.renderEditSelect(value, additionalData, transformForemanData(this.props.paramData['environments']));
+                return inlineEditFormatterImpl.renderEditSelect(
+                  value,
+                  additionalData,
+                  transformForemanData(this.props.paramData.environments)
+                );
               case 'ptable':
-                return inlineEditFormatterImpl.renderEditSelect(value, additionalData, transformForemanData(this.props.paramData['ptables']));
+                return inlineEditFormatterImpl.renderEditSelect(
+                  value,
+                  additionalData,
+                  transformForemanData(this.props.paramData.ptables)
+                );
               case 'password':
-                return inlineEditFormatterImpl.renderEditText(value, additionalData, 'password');
+                return inlineEditFormatterImpl.renderEditText(
+                  value,
+                  additionalData,
+                  'password'
+                );
               case 'text':
               case 'complex':
-                return inlineEditFormatterImpl.renderEditComplexText(value, additionalData);
+                return inlineEditFormatterImpl.renderEditComplexText(
+                  value,
+                  additionalData
+                );
               default:
-                return inlineEditFormatterImpl.renderEditText(value, additionalData);
+                return inlineEditFormatterImpl.renderEditText(
+                  value,
+                  additionalData
+                );
             }
           default:
-            return inlineEditFormatterImpl.renderEditText(value, additionalData)
+            return inlineEditFormatterImpl.renderEditText(
+              value,
+              additionalData
+            );
         }
-      }
+      },
     });
 
     this.inlineEditFormatter = inlineEditFormatter;
@@ -314,22 +366,23 @@ class ParameterSelection extends React.Component {
       this.sortingFormatter,
       this.sortableTransform,
       this.inlineEditFormatter,
-      this.inlineEditButtonsFormatter,
+      this.inlineEditButtonsFormatter
     );
   }
 
   // workaround because Recompose JS doesn't work -> webpack issues
-  compose = (...funcs) => funcs.reduce((a, b) => (...args) => a(b(...args)), arg => arg)
+  compose = (...funcs) =>
+    funcs.reduce(
+      (a, b) => (...args) => a(b(...args)),
+      arg => arg
+    );
 
   render() {
     const {
-      data: { allowRowAdjustment, applications },
-      location,
-      organization,
+      data: { allowRowAdjustment },
       parameters,
       columns,
       sortingColumns,
-      loading,
       addParameter,
       confirmEditParameter,
       cancelEditParameter,
@@ -352,7 +405,7 @@ class ParameterSelection extends React.Component {
           columns,
           sortingColumns,
           sort: orderBy,
-          strategy: sort.strategies.byProperty
+          strategy: sort.strategies.byProperty,
         })
       )(tmpParameters);
       sortedParameters.push(newEntry);
@@ -362,7 +415,7 @@ class ParameterSelection extends React.Component {
           columns,
           sortingColumns,
           sort: orderBy,
-          strategy: sort.strategies.byProperty
+          strategy: sort.strategies.byProperty,
         })
       )(parameters);
     }
@@ -373,9 +426,9 @@ class ParameterSelection extends React.Component {
       editModeCallback(this.props.editMode);
     }
 
-    let { validateResult, validateMsg } = this.yamlValidator();
+    const { validateResult, validateMsg } = this.yamlValidator();
 
-    return(
+    return (
       <div>
         <div className="clearfix">
           <div className="form-group">
@@ -392,13 +445,13 @@ class ParameterSelection extends React.Component {
                     this.customHeaderFormatters({
                       cellProps,
                       columns,
-                      sortingColumns
-                    })
+                      sortingColumns,
+                    }),
                 },
                 body: {
                   row: Table.InlineEditRow,
-                  cell: cellProps => cellProps.children
-                }
+                  cell: cellProps => cellProps.children,
+                },
               }}
             >
               <Table.Header headerRows={resolve.headerRows({ columns })} />
@@ -407,51 +460,72 @@ class ParameterSelection extends React.Component {
                 rowKey="id"
                 onRow={(rowData, { rowIndex }) => ({
                   role: 'row',
-                  isEditing: () => this.isEditing({ rowData }),
+                  isEditing: () => this.constructor.isEditing({ rowData }),
                   onCancel: () => cancelEditParameter({ rowData, rowIndex }),
                   onConfirm: () => confirmEditParameter({ rowData, rowIndex }),
-                  last: rowIndex === sortedParameters.length - 1
+                  last: rowIndex === sortedParameters.length - 1,
                 })}
               />
             </Table.PfProvider>
             <AddTableEntry
-               hidden={!allowRowAdjustment}
-               disabled={ this.props.editMode }
-               onAddTableEntry={ addParameter }
+              hidden={!allowRowAdjustment}
+              disabled={this.props.editMode}
+              onAddTableEntry={addParameter}
             />
           </div>
         </div>
         <div>
-        <ForemanModal
-          id="ParameterSelectionComplexDataModal"
-          dialogClassName="complex_data_modal"
-          title={__("YAML Data Input")}
-
-        >
-          <ForemanModal.Header closeButton={false}>
-          </ForemanModal.Header>
-          <textarea id='yamlData'
-            defaultValue= {this.yamlValue()}
-            onChange={this.handleChange}
-            style={{width: "550px", height: "350px", fontFamily: "Courier"}}  />
-          <ForemanModal.Footer>
-            <div>
-            {validateResult == false ? (
-                <div className="form-group">
-                <div class="alert alert-danger alert-dismissable">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-                <span class="pficon pficon-close"></span>
-                </button>
-                <span class="pficon pficon-error-circle-o"></span>
-                  {validateMsg}
-                </div>
-                </div>
-            ) : (<div></div>)}
-              <Button bsStyle="primary" onClick ={() => closeParameterSelectionDialogBox({ mode: 'save' })}>{__("Save")}</Button>
-              <Button bsStyle="default" onClick={() => closeParameterSelectionDialogBox({ mode: 'cancel' })}>{__("Cancel")}</Button>
-            </div>
-          </ForemanModal.Footer>
-        </ForemanModal>
+          <ForemanModal
+            id="ParameterSelectionComplexDataModal"
+            dialogClassName="complex_data_modal"
+            title={__('YAML Data Input')}
+          >
+            <ForemanModal.Header closeButton={false} />
+            <textarea
+              id="yamlData"
+              defaultValue={this.yamlValue()}
+              onChange={this.handleChange}
+              style={{ width: '550px', height: '350px', fontFamily: 'Courier' }}
+            />
+            <ForemanModal.Footer>
+              <div>
+                {validateResult === false ? (
+                  <div className="form-group">
+                    <div className="alert alert-danger alert-dismissable">
+                      <button
+                        type="button"
+                        className="close"
+                        data-dismiss="alert"
+                        aria-label="Close"
+                      >
+                        <span className="pficon pficon-close" />
+                      </button>
+                      <span className="pficon pficon-error-circle-o" />
+                      {validateMsg}
+                    </div>
+                  </div>
+                ) : (
+                  <div />
+                )}
+                <Button
+                  bsStyle="primary"
+                  onClick={() =>
+                    closeParameterSelectionDialogBox({ mode: 'save' })
+                  }
+                >
+                  {__('Save')}
+                </Button>
+                <Button
+                  bsStyle="default"
+                  onClick={() =>
+                    closeParameterSelectionDialogBox({ mode: 'cancel' })
+                  }
+                >
+                  {__('Cancel')}
+                </Button>
+              </div>
+            </ForemanModal.Footer>
+          </ForemanModal>
         </div>
       </div>
     );
@@ -459,51 +533,61 @@ class ParameterSelection extends React.Component {
 }
 
 ParameterSelection.defaultProps = {
-  error: {},
-  editMode: false,
-  loading: false,
-  paramData: {},
-  parameters: [],
+  // error: {},
   columns: [],
+  editParamsRowIndex: undefined,
   hiddenParameterTypes: [],
+  paramData: {},
+  paramDataUrl: undefined,
+  paramDefinition: undefined,
+  parameters: [],
+  parameterTypes: {},
   sortingColumns: {},
-  editParamsRowIndex: [],
-  editModeCallback: undefined,
 };
 
 ParameterSelection.propTypes = {
+  // error: PropTypes.object,
+  paramDataUrl: PropTypes.string,
+  hiddenParameterTypes: PropTypes.array,
+
+  // from ParameterSelectionActions
+  initParameterSelection: PropTypes.func.isRequired,
+  addParameter: PropTypes.func.isRequired,
+  deleteParameter: PropTypes.func.isRequired,
+  lockParameter: PropTypes.func.isRequired,
+  activateEditParameter: PropTypes.func.isRequired,
+  confirmEditParameter: PropTypes.func.isRequired,
+  cancelEditParameter: PropTypes.func.isRequired,
+  changeEditParameter: PropTypes.func.isRequired,
+  sortParameter: PropTypes.func.isRequired,
+  openParameterSelectionDialogBox: PropTypes.func.isRequired,
+  closeParameterSelectionDialogBox: PropTypes.func.isRequired,
+  loadParamData: PropTypes.func.isRequired,
+
+  // from ApplicationInstance
+  editModeCallback: PropTypes.func.isRequired,
+  paramType: PropTypes.string.isRequired,
+  // location: PropTypes.string.isRequired,
+  // organization: PropTypes.string.isRequired,
   data: PropTypes.shape({
+    useDefaultValue: PropTypes.bool,
+    allowRowAdjustment: PropTypes.bool,
+    allowNameAdjustment: PropTypes.bool,
+    allowDescriptionAdjustment: PropTypes.bool,
     parameters: PropTypes.array,
     paramDefinition: PropTypes.object,
-    applications: PropTypes.object,
   }).isRequired,
-  location: PropTypes.string.isRequired,
-  organization: PropTypes.string.isRequired,
-  paramDataUrl: PropTypes.string,
-  initParameterSelection: PropTypes.func,
+
+  // from redux-state
+  // loading: PropTypes.bool.isRequired,
   editMode: PropTypes.bool.isRequired,
-  loading: PropTypes.bool.isRequired,
-  paramData: PropTypes.object.isRequired,
-  hiddenParameterTypes: PropTypes.array.isRequired,
-  allowedParameterTypes: PropTypes.object,
+  paramData: PropTypes.object,
   parameterTypes: PropTypes.object,
   parameters: PropTypes.array,
   sortingColumns: PropTypes.object,
-  editModeCallback: PropTypes.func,
   columns: PropTypes.array,
-  sortParameter: PropTypes.func,
-  addParameter: PropTypes.func,
-  deleteParameter: PropTypes.func,
-  lockParameter: PropTypes.func,
-  activateEditParameter: PropTypes.func,
-  confirmEditParameter: PropTypes.func,
-  cancelEditParameter: PropTypes.func,
-  changeEditParameter: PropTypes.func,
-  openParameterSelectionDialogBox: PropTypes.func,
-  closeParameterSelectionDialogBox: PropTypes.func,
-  loadParamData: PropTypes.func,
   paramDefinition: PropTypes.object,
-  editParamsRowIndex: PropTypes.array,
+  editParamsRowIndex: PropTypes.number,
 };
 
 export default ParameterSelection;