diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..bcaa1393
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+webpack/js-yaml.js
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 00000000..6c79457e
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,13 @@
+{
+  "plugins": ["@theforeman/foreman"],
+  "extends": [
+    "plugin:@theforeman/foreman/core",
+    "plugin:@theforeman/foreman/plugins",
+  ],
+  "rules": {
+    // avoid https://github.com/prettier/eslint-config-prettier/issues/29
+    "standard/computed-property-even-spacing": 0,
+    //"eqeqeq": "warn",
+    "max-lines": ["error", {"max": 650, "skipBlankLines": true, "skipComments": true}],
+  },
+}
diff --git a/.github/workflows/javascript_tests.yml b/.github/workflows/javascript_tests.yml
index cf480099..d377c3f6 100644
--- a/.github/workflows/javascript_tests.yml
+++ b/.github/workflows/javascript_tests.yml
@@ -22,8 +22,7 @@ jobs:
       - run: npm install
       - name: Linting
         run: |
-          # FIXME: we need to fix the findings, first
-          #npm run lint
+          npm run lint
           npm run stylelint
       - name: Testing
         run: npm run test
diff --git a/jest.config.js b/jest.config.js
index 0eca6d15..ca60d8a5 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -12,6 +12,7 @@ module.exports = {
   collectCoverage: true,
   collectCoverageFrom: [
     'webpack/**/*.js',
+    '!webpack/js-yaml.js',
     '!webpack/index.js',
     '!webpack/test_setup.js',
     '!webpack/**/bundle*',
diff --git a/package.json b/package.json
index dbfc9b33..ac0d450a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "eslint": "^6.7.2",
+    "eslint-plugin-react": "^7.34.1",
     "jest": "^23.6.0",
     "jest-prop-type-error": "^1.1.0",
     "lodash": "^4.17.11",
@@ -26,8 +27,8 @@
     "table-resolver": "^3.2.0"
   },
   "scripts": {
-    "lint": "tfm-lint --plugin -d *.js,webpack",
-    "lint-fix": "tfm-lint --plugin -d *.js,webpack --fix",
+    "lint": "eslint *.js webpack",
+    "lint-fix": "eslint --fix *.js webpack",
     "stylelint": "stylelint webpack/**/*.scss",
     "stylelint-fix": "stylelint webpack/**/*.scss --fix",
     "test": "jest --no-cache"
diff --git a/webpack/components/ApplicationDefinition/ApplicationDefinition.js b/webpack/components/ApplicationDefinition/ApplicationDefinition.js
index 3eec140b..4c4d2a6c 100644
--- a/webpack/components/ApplicationDefinition/ApplicationDefinition.js
+++ b/webpack/components/ApplicationDefinition/ApplicationDefinition.js
@@ -1,50 +1,43 @@
-import $ from 'jquery';
-import React, { useState } from 'react'
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Icon,
   Button,
   MessageDialog,
+  Table,
+  FormControl,
+  inlineEditFormatterFactory,
 } from 'patternfly-react';
 import * as resolve from 'table-resolver';
 import ForemanModal from 'foremanReact/components/ForemanModal';
 import Select from 'foremanReact/components/common/forms/Select';
+import { translate as __ } from 'foremanReact/common/I18n';
 import ParameterSelection from '../ParameterSelection';
 import AddTableEntry from '../common/AddTableEntry';
 import DeleteTableEntry from '../common/DeleteTableEntry';
 import RailsData from '../common/RailsData';
 import AnsiblePlaybookSelector from './components/AnsiblePlaybookSelector';
-import { translate as __ } from 'foremanReact/common/I18n';
 import { EasyHeaderFormatter } from '../../helper';
 
-import {
-  Table,
-  FormControl,
-  inlineEditFormatterFactory,
-} from 'patternfly-react';
-
 import {
   PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
   PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
 } from '../ParameterSelection/ParameterSelectionConstants';
 
 class ApplicationDefinition extends React.Component {
-
-  constructor(props) {
-    super(props);
-  }
-
-  isEditing({rowData}) {
-    return (rowData.backup !== undefined);
+  static isEditing({ rowData }) {
+    return rowData.backup !== undefined;
   }
 
-  createAnsibleGroupObject(ansibleGroups, withAll=false) {
+  static createAnsibleGroupObject(ansibleGroups, withAll = false) {
     const ansibleGroupObj = {};
 
     const ansibleGroupArray = Object.keys(ansibleGroups);
-    ansibleGroupArray.forEach(e => (ansibleGroupObj[e] = e));
+    ansibleGroupArray.forEach(e => {
+      ansibleGroupObj[e] = e;
+    });
 
-    if ((withAll === false) && (ansibleGroupObj.hasOwnProperty('all'))) {
+    if (withAll === false && ansibleGroupObj.hasOwnProperty('all')) {
       delete ansibleGroupObj.all;
     }
 
@@ -52,20 +45,24 @@ class ApplicationDefinition extends React.Component {
   }
 
   addTableEntryAllowed() {
-    return this.props.editMode || this.props.ansiblePlaybook.id == ''
+    return this.props.editMode || this.props.ansiblePlaybook.id === '';
   }
 
   componentDidMount() {
     const {
-      data: { mode, ansiblePlaybook, ansibleDataUrl, services, ansibleVarsAll, hostgroups, supportedPlugins },
+      data: {
+        ansiblePlaybook,
+        services,
+        ansibleVarsAll,
+        hostgroups,
+        supportedPlugins,
+      },
       initApplicationDefinition,
-      addApplicationDefinitionService,
       deleteApplicationDefinitionService,
       activateEditApplicationDefinitionService,
       changeEditApplicationDefinitionService,
       openForemanParameterSelectionModal,
       openAnsibleParameterSelectionModal,
-      loadAnsibleData,
     } = this.props;
 
     const inlineEditButtonsFormatter = inlineEditFormatterFactory({
@@ -74,23 +71,25 @@ class ApplicationDefinition extends React.Component {
         <td style={{ padding: '2px' }}>
           <Button
             bsStyle="default"
-            onClick={() => activateEditApplicationDefinitionService(additionalData)}
+            onClick={() =>
+              activateEditApplicationDefinitionService(additionalData)
+            }
           >
-            <Icon type="pf" name="edit" title={__("Edit entry")} />
+            <Icon type="pf" name="edit" title={__('Edit entry')} />
           </Button>
           &nbsp;
           <Button
             bsStyle="default"
             onClick={() => openForemanParameterSelectionModal(additionalData)}
           >
-            <Icon type="pf" name="settings" title={__("Change parameters")} />
+            <Icon type="pf" name="settings" title={__('Change parameters')} />
           </Button>
           &nbsp;
           <Button
             bsStyle="default"
             onClick={() => openAnsibleParameterSelectionModal(additionalData)}
           >
-            <span title={__("Change ansible variables")}>A</span>
+            <span title={__('Change ansible variables')}>A</span>
           </Button>
           &nbsp;
           <DeleteTableEntry
@@ -104,26 +103,25 @@ class ApplicationDefinition extends React.Component {
       renderEdit: (value, additionalData) => (
         <td style={{ padding: '2px' }}>
           <Button bsStyle="default" disabled>
-            <Icon type="pf" name={__("edit")} />
+            <Icon type="pf" name={__('edit')} />
           </Button>
           &nbsp;
           <Button bsStyle="default" disabled>
-            <Icon type="pf" name={__("settings")} />
+            <Icon type="pf" name={__('settings')} />
           </Button>
           &nbsp;
-          <Button
-            bsStyle="default" disabled>
+          <Button bsStyle="default" disabled>
             <span>A</span>
           </Button>
           &nbsp;
           <DeleteTableEntry
             hidden={false}
-            disabled={true}
+            disabled
             onDeleteTableEntry={deleteApplicationDefinitionService}
             additionalData={additionalData}
           />
         </td>
-      )
+      ),
     });
     this.inlineEditButtonsFormatter = inlineEditButtonsFormatter;
 
@@ -135,12 +133,17 @@ class ApplicationDefinition 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 => changeEditApplicationDefinitionService(e.target.value, additionalData) }
+            onBlur={e =>
+              changeEditApplicationDefinitionService(
+                e.target.value,
+                additionalData
+              )
+            }
           />
         </td>
       ),
@@ -148,45 +151,63 @@ class ApplicationDefinition extends React.Component {
         <td className="editing">
           <Select
             value={value.toString()}
-            onChange={e => changeEditApplicationDefinitionService(e.target.value, additionalData) }
+            onChange={e =>
+              changeEditApplicationDefinitionService(
+                e.target.value,
+                additionalData
+              )
+            }
             options={options}
             allowClear
             key="key"
           />
         </td>
-      )
+      ),
     };
 
     const inlineEditFormatter = inlineEditFormatterFactory({
-      isEditing: additionalData => this.isEditing(additionalData),
+      isEditing: additionalData => this.constructor.isEditing(additionalData),
       renderValue: (value, additionalData) => {
         let prettyValue = value;
-        if (additionalData.property == 'hostgroup') {
+        if (additionalData.property === 'hostgroup') {
           prettyValue = hostgroups[value];
-        }
-        else if (additionalData.property == 'ansibleGroup') {
-          const ag = this.createAnsibleGroupObject(this.props.ansiblePlaybook.groups);
+        } else if (additionalData.property === 'ansibleGroup') {
+          const ag = this.constructor.createAnsibleGroupObject(
+            this.props.ansiblePlaybook.groups
+          );
           prettyValue = ag[value];
         }
-        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData);
       },
       renderEdit: (value, additionalData) => {
-        if (additionalData.property == 'hostgroup') {
+        if (additionalData.property === 'hostgroup') {
           if (additionalData.rowData.newEntry === true) {
-            return inlineEditFormatterImpl.renderEditSelect(value, additionalData, hostgroups);
+            return inlineEditFormatterImpl.renderEditSelect(
+              value,
+              additionalData,
+              hostgroups
+            );
           }
-          return inlineEditFormatterImpl.renderValue(hostgroups[value], additionalData)
-        }
-        else if (additionalData.property == 'ansibleGroup') {
-          const ag = this.createAnsibleGroupObject(this.props.ansiblePlaybook.groups);
+          return inlineEditFormatterImpl.renderValue(
+            hostgroups[value],
+            additionalData
+          );
+        } else if (additionalData.property === 'ansibleGroup') {
+          const ag = this.constructor.createAnsibleGroupObject(
+            this.props.ansiblePlaybook.groups
+          );
 
           if (additionalData.rowData.newEntry === true) {
-            return inlineEditFormatterImpl.renderEditSelect(value, additionalData, ag);
+            return inlineEditFormatterImpl.renderEditSelect(
+              value,
+              additionalData,
+              ag
+            );
           }
           return inlineEditFormatterImpl.renderValue(ag[value], additionalData);
         }
         return inlineEditFormatterImpl.renderEditText(value, additionalData);
-      }
+      },
     });
     this.inlineEditFormatter = inlineEditFormatter;
 
@@ -197,14 +218,24 @@ class ApplicationDefinition extends React.Component {
       supportedPlugins,
       this.headerFormatter,
       this.inlineEditFormatter,
-      this.inlineEditButtonsFormatter,
+      this.inlineEditButtonsFormatter
     );
-  };
+  }
 
   render() {
     const {
-      data: { organization, location, mode, ansiblePlaybooks, foremanDataUrl, ansibleDataUrl },
-      showAlertModal, alertModalText, alertModalTitle, closeAlertModal,
+      data: {
+        organization,
+        location,
+        mode,
+        ansiblePlaybooks,
+        foremanDataUrl,
+        ansibleDataUrl,
+      },
+      showAlertModal,
+      alertModalText,
+      alertModalTitle,
+      closeAlertModal,
       ansiblePlaybook,
       services,
       columns,
@@ -216,7 +247,6 @@ class ApplicationDefinition extends React.Component {
       openAnsibleParameterSelectionModal,
       closeAnsibleParameterSelectionModal,
       changeParameterSelectionMode,
-      ParameterSelectionModal,
       loadAnsibleData,
     } = this.props;
 
@@ -227,7 +257,7 @@ class ApplicationDefinition extends React.Component {
           onHide={closeAlertModal}
           primaryAction={closeAlertModal}
           primaryActionButtonContent={__('OK')}
-          primaryActionButtonBsStyle={"danger"}
+          primaryActionButtonBsStyle="danger"
           icon={<Icon type="pf" name="error-circle-o" />}
           title={alertModalTitle}
           primaryContent={alertModalText}
@@ -235,20 +265,21 @@ class ApplicationDefinition extends React.Component {
         <div>
           <AnsiblePlaybookSelector
             label="Ansible Playbook"
-            hidden={ false }
-            editable={ mode == 'newDefinition' }
-            viewText={ ansiblePlaybook.name }
-            options={ ansiblePlaybooks }
-            onChange={ loadAnsibleData }
-            selectValue={ ansiblePlaybook.id.toString() }
-            additionalData={{url: ansibleDataUrl }}
+            hidden={false}
+            editable={mode === 'newDefinition'}
+            viewText={ansiblePlaybook.name}
+            options={ansiblePlaybooks}
+            onChange={loadAnsibleData}
+            selectValue={ansiblePlaybook.id.toString()}
+            additionalData={{ url: ansibleDataUrl }}
           />
-          {ansiblePlaybook.id == '' ? (
-          <div style={{ paddingTop: 25 }}>
-            <pre>{ "Ansible Playbook can't be blank" }</pre>
-          </div>
-        ) : (<div></div>)}
-
+          {ansiblePlaybook.id === '' ? (
+            <div style={{ paddingTop: 25 }}>
+              <pre>Ansible Playbook can&apos;t be blank</pre>
+            </div>
+          ) : (
+            <div />
+          )}
         </div>
         <div className="form-group">
           <Table.PfProvider
@@ -261,8 +292,8 @@ class ApplicationDefinition extends React.Component {
             components={{
               body: {
                 row: Table.InlineEditRow,
-                cell: cellProps => cellProps.children
-              }
+                cell: cellProps => cellProps.children,
+              },
             }}
           >
             <Table.Header headerRows={resolve.headerRows({ columns })} />
@@ -271,27 +302,34 @@ class ApplicationDefinition extends React.Component {
               rowKey="id"
               onRow={(rowData, { rowIndex }) => ({
                 role: 'row',
-                isEditing: () => this.isEditing({ rowData }),
-                onCancel: () => cancelEditApplicationDefinitionService({ rowData, rowIndex }),
-                onConfirm: () => confirmEditApplicationDefinitionService({ rowData, rowIndex }),
-                last: rowIndex === services.length - 1
+                isEditing: () => this.constructor.isEditing({ rowData }),
+                onCancel: () =>
+                  cancelEditApplicationDefinitionService({ rowData, rowIndex }),
+                onConfirm: () =>
+                  confirmEditApplicationDefinitionService({
+                    rowData,
+                    rowIndex,
+                  }),
+                last: rowIndex === services.length - 1,
               })}
             />
           </Table.PfProvider>
           <AddTableEntry
-            hidden={ false }
-            disabled={ this.addTableEntryAllowed() }
-            onAddTableEntry={ addApplicationDefinitionService }
+            hidden={false}
+            disabled={this.addTableEntryAllowed()}
+            onAddTableEntry={addApplicationDefinitionService}
           />
           <span style={{ marginLeft: 30 }}>
-            Ansible group vars 'all':
+            Ansible group vars &apos;all&apos;:
             <Button
               style={{ marginLeft: 10 }}
               bsStyle="default"
-              disabled={ this.props.editMode }
-              onClick={() => openAnsibleParameterSelectionModal({
-                isAllGroup: true
-              })}
+              disabled={this.props.editMode}
+              onClick={() =>
+                openAnsibleParameterSelectionModal({
+                  isAllGroup: true,
+                })
+              }
             >
               <span title={__("Change ansible variables for 'all'")}>A</span>
             </Button>
@@ -301,27 +339,48 @@ class ApplicationDefinition extends React.Component {
           <ForemanModal
             id="AppDefinitionForemanParamSelection"
             dialogClassName="param_selection_modal"
-            title={__("Foreman Parameter definition for Application Definition")}
+            title={__(
+              'Foreman Parameter definition for Application Definition'
+            )}
           >
             <ForemanModal.Header closeButton={false}>
               Parameter definition
             </ForemanModal.Header>
             {this.props.parametersData ? (
               <ParameterSelection
-                editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
-                paramType={ PARAMETER_SELECTION_PARAM_TYPE_FOREMAN }
-                hiddenParameterTypes={ hiddenForemanParameterTypes }
-                location={ location }
-                organization={ organization }
-                paramDataUrl= { foremanDataUrl }
-                data={ this.props.parametersData }
+                editModeCallback={hide =>
+                  changeParameterSelectionMode({ mode: hide })
+                }
+                paramType={PARAMETER_SELECTION_PARAM_TYPE_FOREMAN}
+                hiddenParameterTypes={hiddenForemanParameterTypes}
+                location={location}
+                organization={organization}
+                paramDataUrl={foremanDataUrl}
+                data={this.props.parametersData}
               />
-            ) : (<span>Empty</span>)
-            }
+            ) : (
+              <span>Empty</span>
+            )}
             <ForemanModal.Footer>
               <div>
-                <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeForemanParameterSelectionModal({ mode: 'save' })}>{__("Save")}</Button>
-                <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeForemanParameterSelectionModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
+                <Button
+                  bsStyle="primary"
+                  disabled={this.props.paramEditMode}
+                  onClick={() =>
+                    closeForemanParameterSelectionModal({ mode: 'save' })
+                  }
+                >
+                  {__('Save')}
+                </Button>
+                <Button
+                  bsStyle="default"
+                  disabled={this.props.paramEditMode}
+                  onClick={() =>
+                    closeForemanParameterSelectionModal({ mode: 'cancel' })
+                  }
+                >
+                  {__('Cancel')}
+                </Button>
               </div>
             </ForemanModal.Footer>
           </ForemanModal>
@@ -330,74 +389,104 @@ class ApplicationDefinition extends React.Component {
           <ForemanModal
             id="AppDefinitionAnsibleParamSelection"
             dialogClassName="param_selection_modal"
-            title={__("Ansible variables for Application Definition")}
+            title={__('Ansible variables for Application Definition')}
           >
             <ForemanModal.Header closeButton={false}>
               Parameter definition
             </ForemanModal.Header>
             {this.props.parametersData ? (
               <ParameterSelection
-                editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
-                paramType={ PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE }
-                location={ location }
-                organization={ organization }
-                data={ this.props.parametersData }
+                editModeCallback={hide =>
+                  changeParameterSelectionMode({ mode: hide })
+                }
+                paramType={PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE}
+                location={location}
+                organization={organization}
+                data={this.props.parametersData}
               />
-            ) : (<span>Empty</span>)
-            }
+            ) : (
+              <span>Empty</span>
+            )}
             <ForemanModal.Footer>
               <div>
-                <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeAnsibleParameterSelectionModal({ mode: 'save' })}>{__("Save")}</Button>
-                <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeAnsibleParameterSelectionModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
+                <Button
+                  bsStyle="primary"
+                  disabled={this.props.paramEditMode}
+                  onClick={() =>
+                    closeAnsibleParameterSelectionModal({ mode: 'save' })
+                  }
+                >
+                  {__('Save')}
+                </Button>
+                <Button
+                  bsStyle="default"
+                  disabled={this.props.paramEditMode}
+                  onClick={() =>
+                    closeAnsibleParameterSelectionModal({ mode: 'cancel' })
+                  }
+                >
+                  {__('Cancel')}
+                </Button>
               </div>
             </ForemanModal.Footer>
           </ForemanModal>
         </div>
         <RailsData
-          key='application_definition_services_data'
-          view='app_definition'
-          parameter='services'
+          key="application_definition_services_data"
+          view="app_definition"
+          parameter="services"
           value={JSON.stringify(this.props.services)}
         />
         <RailsData
-          key='application_definition_ansible_data'
-          view='app_definition'
-          parameter='ansible_vars_all'
+          key="application_definition_ansible_data"
+          view="app_definition"
+          parameter="ansible_vars_all"
           value={JSON.stringify(this.props.ansibleVarsAll)}
         />
       </span>
-    )};
+    );
+  }
 }
 
 ApplicationDefinition.defaultProps = {
-  error: {},
   showAlertModal: false,
   alertModalText: '',
   alertModalTitle: '',
   editMode: false,
-  ansiblePlaybook: { "id": '', "name": '' },
+  ansiblePlaybook: { id: '', name: '' },
   services: [],
   ansibleVarsAll: [],
   parametersData: {},
   columns: [],
   hiddenForemanParameterTypes: [],
-  editParamsOfRowId: null,
   paramEditMode: false,
-}
+  deleteApplicationDefinitionService: undefined,
+  activateEditApplicationDefinitionService: undefined,
+  confirmEditApplicationDefinitionService: undefined,
+  cancelEditApplicationDefinitionService: undefined,
+  changeEditApplicationDefinitionService: undefined,
+  openForemanParameterSelectionModal: undefined,
+  closeForemanParameterSelectionModal: undefined,
+  openAnsibleParameterSelectionModal: undefined,
+  closeAnsibleParameterSelectionModal: undefined,
+  changeParameterSelectionMode: undefined,
+};
 
 ApplicationDefinition.propTypes = {
-  initApplicationDefinition: PropTypes.func,
+  data: PropTypes.object.isRequired,
+  loadAnsibleData: PropTypes.func.isRequired,
+  initApplicationDefinition: PropTypes.func.isRequired,
   showAlertModal: PropTypes.bool,
   alertModalText: PropTypes.string,
   alertModalTitle: PropTypes.string,
-  editMode: PropTypes.bool.isRequired,
+  editMode: PropTypes.bool,
   ansiblePlaybook: PropTypes.object,
   services: PropTypes.array,
   ansibleVarsAll: PropTypes.array,
   columns: PropTypes.array,
   hiddenForemanParameterTypes: PropTypes.array,
-  closeAlertModal: PropTypes.func,
-  addApplicationDefinitionService: PropTypes.func,
+  closeAlertModal: PropTypes.func.isRequired,
+  addApplicationDefinitionService: PropTypes.func.isRequired,
   deleteApplicationDefinitionService: PropTypes.func,
   activateEditApplicationDefinitionService: PropTypes.func,
   confirmEditApplicationDefinitionService: PropTypes.func,
diff --git a/webpack/components/ApplicationDefinition/ApplicationDefinitionActions.js b/webpack/components/ApplicationDefinition/ApplicationDefinitionActions.js
index bc0c5e1c..c048877a 100644
--- a/webpack/components/ApplicationDefinition/ApplicationDefinitionActions.js
+++ b/webpack/components/ApplicationDefinition/ApplicationDefinitionActions.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import api from 'foremanReact/API';
 
 import {
@@ -6,14 +5,7 @@ import {
   setModalClosed,
 } from 'foremanReact/components/ForemanModal/ForemanModalActions';
 
-import {
-  actionHeaderCellFormatter,
-} from 'patternfly-react';
-
-import {
-  propsToSnakeCase,
-  propsToCamelCase,
-} from 'foremanReact/common/helpers';
+import { actionHeaderCellFormatter } from 'patternfly-react';
 
 import {
   APPLICATION_DEFINITION_INIT,
@@ -34,13 +26,9 @@ import {
   APPLICATION_DEFINITION_CHANGE_PARAMETER_SELECTION_MODE,
 } from './ApplicationDefinitionConstants';
 
-import {
-  supportedPluginsToHiddenParameterTypes,
-} from '../../helper';
+import { supportedPluginsToHiddenParameterTypes } from '../../helper';
 
-import {
-  transformAnsiblePlaybook,
-} from './ApplicationDefinitionHelper';
+import { transformAnsiblePlaybook } from './ApplicationDefinitionHelper';
 
 export const initApplicationDefinition = (
   ansiblePlaybook,
@@ -49,7 +37,7 @@ export const initApplicationDefinition = (
   supportedPlugins,
   headerFormatter,
   inlineEditFormatter,
-  inlineEditButtonsFormatter,
+  inlineEditButtonsFormatter
 ) => dispatch => {
   const initialState = {};
 
@@ -62,13 +50,13 @@ export const initApplicationDefinition = (
         props: {
           index: 0,
           style: {
-            width: '15%'
-          }
+            width: '15%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'description',
@@ -78,13 +66,13 @@ export const initApplicationDefinition = (
         props: {
           index: 1,
           style: {
-            width: '10%'
-          }
+            width: '10%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'hostgroup',
@@ -94,13 +82,13 @@ export const initApplicationDefinition = (
         props: {
           index: 2,
           style: {
-            width: '20%'
-          }
+            width: '20%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'ansibleGroup',
@@ -110,13 +98,13 @@ export const initApplicationDefinition = (
         props: {
           index: 3,
           style: {
-            width: '20%'
-          }
+            width: '20%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'minCount',
@@ -126,13 +114,13 @@ export const initApplicationDefinition = (
         props: {
           index: 4,
           style: {
-            width: '10%'
-          }
+            width: '10%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'maxCount',
@@ -142,13 +130,13 @@ export const initApplicationDefinition = (
         props: {
           index: 5,
           style: {
-            width: '10%'
-          }
+            width: '10%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'actions',
@@ -158,14 +146,14 @@ export const initApplicationDefinition = (
         props: {
           index: 6,
           style: {
-            width: '15%'
-          }
+            width: '15%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditButtonsFormatter]
-      }
-    }
+        formatters: [inlineEditButtonsFormatter],
+      },
+    },
   ];
 
   if (ansiblePlaybook !== undefined) {
@@ -173,7 +161,9 @@ export const initApplicationDefinition = (
   }
   initialState.services = services;
   initialState.ansibleVarsAll = ansibleVarsAll;
-  initialState.hiddenForemanParameterTypes = supportedPluginsToHiddenParameterTypes(supportedPlugins);
+  initialState.hiddenForemanParameterTypes = supportedPluginsToHiddenParameterTypes(
+    supportedPlugins
+  );
 
   dispatch({
     type: APPLICATION_DEFINITION_INIT,
@@ -191,65 +181,71 @@ const errorHandler = (msg, err) => {
 
 export const closeAlertModal = () => ({
   type: APPLICATION_DEFINITION_CLOSE_ALERT_MODAL,
-  payload: {}
+  payload: {},
 });
 
 export const loadAnsibleData = (
   ansiblePlaybookId,
   additionalData
-) => dispatch => {
+) => async dispatch => {
   dispatch({ type: APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST });
 
-  const baseUrl = additionalData.url;
-  const realUrl = baseUrl.replace("__id__", ansiblePlaybookId);
+  try {
+    const baseUrl = additionalData.url;
+    const realUrl = baseUrl.replace('__id__', ansiblePlaybookId);
+
+    const { data } = await api.get(realUrl, {}, {});
 
-  return api
-    .get(realUrl, {}, {})
-    .then(({ data }) =>
-      dispatch({
-        type: APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS,
-        payload: { ...data }
-      })
-    )
-    .catch(error => dispatch(errorHandler(APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE, error)));
+    dispatch({
+      type: APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS,
+      payload: { ...data },
+    });
+  } catch (error) {
+    dispatch(
+      errorHandler(APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE, error)
+    );
+  }
 };
 
-export const addApplicationDefinitionService = (additionalData) => ({
+export const addApplicationDefinitionService = additionalData => ({
   type: APPLICATION_DEFINITION_SERVICE_ADD,
   payload: {
     ...additionalData,
   },
 });
 
-export const deleteApplicationDefinitionService = (additionalData) => ({
+export const deleteApplicationDefinitionService = additionalData => ({
   type: APPLICATION_DEFINITION_SERVICE_DELETE,
   payload: {
     ...additionalData,
   },
 });
 
-export const activateEditApplicationDefinitionService = (additionalData) => ({
+export const activateEditApplicationDefinitionService = additionalData => ({
   type: APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE,
   payload: {
     ...additionalData,
   },
 });
 
-export const confirmEditApplicationDefinitionService = (rowData) => ({
+export const confirmEditApplicationDefinitionService = rowData => ({
   type: APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM,
   payload: {
     ...rowData,
   },
 });
 
-export const cancelEditApplicationDefinitionService = (rowData) => ({
+export const cancelEditApplicationDefinitionService = rowData => ({
   type: APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL,
   payload: {
     ...rowData,
   },
 });
 
-export const changeEditApplicationDefinitionService = (value, additionalData) => ({
+export const changeEditApplicationDefinitionService = (
+  value,
+  additionalData
+) => ({
   type: APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE,
   payload: {
     value,
@@ -257,59 +253,51 @@ export const changeEditApplicationDefinitionService = (value, additionalData) =>
   },
 });
 
-export const openForemanParameterSelectionModal = (additionalData) => dispatch => {
+export const openForemanParameterSelectionModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN,
     payload: {
       ...additionalData,
-    }
+    },
   });
-  dispatch(
-    setModalOpen({ id: 'AppDefinitionForemanParamSelection' })
-  );
-}
+  dispatch(setModalOpen({ id: 'AppDefinitionForemanParamSelection' }));
+};
 
-export const closeForemanParameterSelectionModal = (additionalData) => dispatch => {
+export const closeForemanParameterSelectionModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE,
     payload: {
       ...additionalData,
-    }
+    },
   });
 
-  dispatch(
-    setModalClosed({ id: 'AppDefinitionForemanParamSelection' })
-  );
-}
+  dispatch(setModalClosed({ id: 'AppDefinitionForemanParamSelection' }));
+};
 
-export const openAnsibleParameterSelectionModal = (additionalData) => dispatch => {
+export const openAnsibleParameterSelectionModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN,
     payload: {
       ...additionalData,
-    }
+    },
   });
-  dispatch(
-    setModalOpen({ id: 'AppDefinitionAnsibleParamSelection' })
-  );
-}
+  dispatch(setModalOpen({ id: 'AppDefinitionAnsibleParamSelection' }));
+};
 
-export const closeAnsibleParameterSelectionModal = (additionalData) => dispatch => {
+export const closeAnsibleParameterSelectionModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE,
     payload: {
       ...additionalData,
-    }
+    },
   });
 
-  dispatch(
-    setModalClosed({ id: 'AppDefinitionAnsibleParamSelection' })
-  );
-}
+  dispatch(setModalClosed({ id: 'AppDefinitionAnsibleParamSelection' }));
+};
 
-export const changeParameterSelectionMode = (additionalData) => ({
+export const changeParameterSelectionMode = additionalData => ({
   type: APPLICATION_DEFINITION_CHANGE_PARAMETER_SELECTION_MODE,
   payload: {
     ...additionalData,
   },
-})
+});
diff --git a/webpack/components/ApplicationDefinition/ApplicationDefinitionConstants.js b/webpack/components/ApplicationDefinition/ApplicationDefinitionConstants.js
index 9fe27bf7..1f945bfa 100644
--- a/webpack/components/ApplicationDefinition/ApplicationDefinitionConstants.js
+++ b/webpack/components/ApplicationDefinition/ApplicationDefinitionConstants.js
@@ -1,16 +1,31 @@
 export const APPLICATION_DEFINITION_INIT = 'INIT_APPLICATION_DEFINITION_INIT';
-export const APPLICATION_DEFINITION_CLOSE_ALERT_MODAL = 'APPLICATION_DEFINITION_CLOSE_ALERT_MODAL';
-export const APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST = 'APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST';
-export const APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS = 'APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS';
-export const APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE = 'APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE';
-export const APPLICATION_DEFINITION_SERVICE_DELETE = 'APPLICATION_DEFINITION_SERVICE_DELETE';
-export const APPLICATION_DEFINITION_SERVICE_ADD = 'APPLICATION_DEFINITION_SERVICE_ADD';
-export const APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE = 'APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE';
-export const APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM = 'APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM';
-export const APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE = 'APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE';
-export const APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL = 'APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL';
-export const APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN = 'APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN';
-export const APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE = 'APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE';
-export const APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN = 'APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN';
-export const APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE = 'APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE';
-export const APPLICATION_DEFINITION_CHANGE_PARAMETER_SELECTION_MODE = 'APPLICATION_DEFINITION_CHANGE_PARAMETER_SELECTION_MODE';
+export const APPLICATION_DEFINITION_CLOSE_ALERT_MODAL =
+  'APPLICATION_DEFINITION_CLOSE_ALERT_MODAL';
+export const APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST =
+  'APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST';
+export const APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS =
+  'APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_SUCCESS';
+export const APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE =
+  'APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE';
+export const APPLICATION_DEFINITION_SERVICE_DELETE =
+  'APPLICATION_DEFINITION_SERVICE_DELETE';
+export const APPLICATION_DEFINITION_SERVICE_ADD =
+  'APPLICATION_DEFINITION_SERVICE_ADD';
+export const APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE =
+  'APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE';
+export const APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM =
+  'APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM';
+export const APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE =
+  'APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE';
+export const APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL =
+  'APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL';
+export const APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN =
+  'APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN';
+export const APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE =
+  'APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE';
+export const APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN =
+  'APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN';
+export const APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE =
+  'APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE';
+export const APPLICATION_DEFINITION_CHANGE_PARAMETER_SELECTION_MODE =
+  'APPLICATION_DEFINITION_CHANGE_PARAMETER_SELECTION_MODE';
diff --git a/webpack/components/ApplicationDefinition/ApplicationDefinitionHelper.js b/webpack/components/ApplicationDefinition/ApplicationDefinitionHelper.js
index ec0cb558..3192d4ac 100644
--- a/webpack/components/ApplicationDefinition/ApplicationDefinitionHelper.js
+++ b/webpack/components/ApplicationDefinition/ApplicationDefinitionHelper.js
@@ -1,22 +1,22 @@
 export function transformAnsiblePlaybook(playbook) {
-
-  const ansiblePlaybook = new Object;
-  ansiblePlaybook.id = playbook.id;
-  ansiblePlaybook.name = playbook.name;
-  ansiblePlaybook.groups = {};
+  const ansiblePlaybook = {
+    id: playbook.id,
+    name: playbook.name,
+    groups: {},
+  };
 
   if (playbook.hasOwnProperty('groups')) {
-    Object.entries(playbook.groups).forEach(([group_name,group_vars]) => {
-      ansiblePlaybook.groups[group_name] = [];
+    Object.entries(playbook.groups).forEach(([groupName, groupVars]) => {
+      ansiblePlaybook.groups[groupName] = [];
 
-      let id=0;
-      Object.entries(group_vars).forEach(([var_name,var_value]) => {
-        let entry = {
-          id: id,
-          name: var_name,
-          value: var_value
-        }
-        ansiblePlaybook.groups[group_name].push(entry);
+      let id = 0;
+      Object.entries(groupVars).forEach(([varName, varValue]) => {
+        const entry = {
+          id,
+          name: varName,
+          value: varValue,
+        };
+        ansiblePlaybook.groups[groupName].push(entry);
         id += 1;
       });
     });
diff --git a/webpack/components/ApplicationDefinition/ApplicationDefinitionReducer.js b/webpack/components/ApplicationDefinition/ApplicationDefinitionReducer.js
index 8705ea98..94874052 100644
--- a/webpack/components/ApplicationDefinition/ApplicationDefinitionReducer.js
+++ b/webpack/components/ApplicationDefinition/ApplicationDefinitionReducer.js
@@ -1,11 +1,7 @@
 import Immutable from 'seamless-immutable';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import {
-  cloneDeep,
-  findIndex,
-  findLastIndex,
-} from 'lodash';
+import { cloneDeep, findIndex } from 'lodash';
 
 import {
   APPLICATION_DEFINITION_INIT,
@@ -31,9 +27,7 @@ import {
   PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
 } from '../ParameterSelection/ParameterSelectionConstants';
 
-import {
-  transformAnsiblePlaybook,
-} from './ApplicationDefinitionHelper';
+import { transformAnsiblePlaybook } from './ApplicationDefinitionHelper';
 
 export const initialState = Immutable({
   name: false,
@@ -54,9 +48,14 @@ const applicationDefinitionConf = (state = initialState, action) => {
         alertModalText: '',
       });
     }
-   case APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE: {
-      console.log("Error while loading ansible data: "+ payload.error);
-      return state.merge({ error: payload.error, loading: false });
+    case APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_FAILURE: {
+      return state.merge({
+        showAlertModal: true,
+        alertModalTitle: __('Error'),
+        alertModalText:
+          __('Failed to load Playbooks: ') + payload.error.errorMsg,
+        loading: false,
+      });
     }
     case APPLICATION_DEFINITION_LOAD_ANSIBLE_DATA_REQUEST: {
       return state.set('loading', true);
@@ -68,13 +67,14 @@ const applicationDefinitionConf = (state = initialState, action) => {
       const ansiblePlaybook = transformAnsiblePlaybook(payload);
 
       if (ansiblePlaybook.hasOwnProperty('groups')) {
-        allVars = ansiblePlaybook.groups['all']
+        allVars = ansiblePlaybook.groups.all;
       }
 
       newState = {
-        ansiblePlaybook: ansiblePlaybook,
-        ansibleVarsAll: allVars
-      }
+        ansiblePlaybook,
+        ansibleVarsAll: allVars,
+        loading: false,
+      };
 
       return state.merge(newState);
     }
@@ -82,27 +82,40 @@ const applicationDefinitionConf = (state = initialState, action) => {
       let services = [];
       let index = 1;
 
-      if ('services' in state && state.services !== undefined && state.services.length > 0) {
+      if (
+        'services' in state &&
+        state.services !== undefined &&
+        state.services.length > 0
+      ) {
         services = cloneDeep(state.services);
         index = Math.max(...services.map(e => e.id)) + 1;
       }
 
-      const newRow = { id: index, name: "", description: '', hostgroup: '',
-                       ansibleGroup: '', minCount: '', maxCount: '',
-                       foremanParameters: [], ansibleParameters: [], newEntry: true };
-      newRow.backup = cloneDeep(newRow)
+      const newRow = {
+        id: index,
+        name: '',
+        description: '',
+        hostgroup: '',
+        ansibleGroup: '',
+        minCount: '',
+        maxCount: '',
+        foremanParameters: [],
+        ansibleParameters: [],
+        newEntry: true,
+      };
+      newRow.backup = cloneDeep(newRow);
       services.push(newRow);
 
       return state.merge({
         editMode: true,
-        services: services
+        services,
       });
     }
     case APPLICATION_DEFINITION_SERVICE_DELETE: {
       const services = state.services.filter(v => v.id !== payload.rowData.id);
       return state.merge({
-        services: services,
-      })
+        services,
+      });
     }
     case APPLICATION_DEFINITION_SERVICE_EDIT_ACTIVATE: {
       const services = cloneDeep(state.services);
@@ -112,7 +125,7 @@ const applicationDefinitionConf = (state = initialState, action) => {
 
       return state.merge({
         editMode: true,
-        services: services
+        services,
       });
     }
     case APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM: {
@@ -121,51 +134,61 @@ const applicationDefinitionConf = (state = initialState, action) => {
 
       const thisService = services[index];
 
-      if (thisService.name == '') {
+      if (thisService.name === '') {
         return state.merge({
           showAlertModal: true,
-          alertModalTitle: __("Error"),
-          alertModalText: __("Every service needs to have a valid name."),
+          alertModalTitle: __('Error'),
+          alertModalText: __('Every service needs to have a valid name.'),
         });
       }
 
-      if (thisService.hostgroup == '') {
+      if (thisService.hostgroup === '') {
         return state.merge({
           showAlertModal: true,
-          alertModalTitle: __("Error"),
-          alertModalText: __("Every service needs to be assigned to a hostgroup."),
+          alertModalTitle: __('Error'),
+          alertModalText: __(
+            'Every service needs to be assigned to a hostgroup.'
+          ),
         });
       }
 
-      if (thisService.ansibleGroup == '') {
+      if (thisService.ansibleGroup === '') {
         return state.merge({
           showAlertModal: true,
-          alertModalTitle: __("Error"),
-          alertModalText: __("Every service needs to be assigned to an ansible group."),
+          alertModalTitle: __('Error'),
+          alertModalText: __(
+            'Every service needs to be assigned to an ansible group.'
+          ),
         });
       }
 
-      if (state.services.filter(v => v.name === thisService.name && v.id != thisService.id).length > 0) {
+      if (
+        state.services.filter(
+          v => v.name === thisService.name && v.id !== thisService.id
+        ).length > 0
+      ) {
         return state.merge({
           showAlertModal: true,
-          alertModalTitle: __("Error"),
-          alertModalText: __("Service name already used in this Application Definition. Please make sure that every service name is unique."),
+          alertModalTitle: __('Error'),
+          alertModalText: __(
+            'Service name already used in this Application Definition. Please make sure that every service name is unique.'
+          ),
         });
       }
 
       delete services[index].backup;
       delete services[index].newEntry;
 
-      let ansibleParameters = [];
       const selectedGroup = services[index].ansibleGroup;
 
       if (selectedGroup) {
-        services[index].ansibleParameters = state.ansiblePlaybook.groups[selectedGroup];
+        services[index].ansibleParameters =
+          state.ansiblePlaybook.groups[selectedGroup];
       }
 
       return state.merge({
         editMode: false,
-        services: services,
+        services,
       });
     }
     case APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE: {
@@ -189,17 +212,17 @@ const applicationDefinitionConf = (state = initialState, action) => {
 
       return state.merge({
         editMode: false,
-        services: services
+        services,
       });
     }
     case APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN: {
-      let parametersData = {};
+      const parametersData = {};
 
       parametersData.paramDefinition = {
         id: payload.rowData.id,
         name: payload.rowData.name,
-        dataId: payload.rowData.hostgroup
-      }
+        dataId: payload.rowData.hostgroup,
+      };
 
       parametersData.type = PARAMETER_SELECTION_PARAM_TYPE_FOREMAN;
       parametersData.parameters = payload.rowData.foremanParameters;
@@ -209,39 +232,42 @@ const applicationDefinitionConf = (state = initialState, action) => {
       parametersData.allowDescriptionAdjustment = true;
 
       return state.merge({
-        parametersData: parametersData,
+        parametersData,
       });
     }
     case APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE: {
-      if (payload.mode == 'save') {
+      if (payload.mode === 'save') {
         const services = cloneDeep(state.services);
-        const index = findIndex(services, { id: state.parametersData.paramDefinition.id });
-        services[index].foremanParameters = cloneDeep(payload.parameterSelection);
-
-        return state.merge({
-          parametersData: null,
-          services: services,
+        const index = findIndex(services, {
+          id: state.parametersData.paramDefinition.id,
         });
-      } else {
+        services[index].foremanParameters = cloneDeep(
+          payload.parameterSelection
+        );
+
         return state.merge({
           parametersData: null,
+          services,
         });
       }
+      return state.merge({
+        parametersData: null,
+      });
     }
     case APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN: {
-      let parametersData = {};
+      const parametersData = {};
 
-      if ((payload.hasOwnProperty('isAllGroup')) && (payload.isAllGroup == true)) {
+      if (payload.hasOwnProperty('isAllGroup') && payload.isAllGroup === true) {
         parametersData.parameters = state.ansibleVarsAll;
         parametersData.paramDefinition = {
           isAllGroup: true,
-        }
-      } else  {
+        };
+      } else {
         parametersData.parameters = payload.rowData.ansibleParameters;
         parametersData.paramDefinition = {
           id: payload.rowData.id,
           name: payload.rowData.name,
-        }
+        };
       }
 
       parametersData.type = PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE;
@@ -251,25 +277,32 @@ const applicationDefinitionConf = (state = initialState, action) => {
       parametersData.allowDescriptionAdjustment = true;
 
       return state.merge({
-        parametersData: parametersData,
+        parametersData,
       });
     }
     case APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE: {
       let newState = {};
-      if (payload.mode == 'save') {
-        if ((state.parametersData.paramDefinition.hasOwnProperty('isAllGroup')) && (state.parametersData.paramDefinition.isAllGroup == true)) {
+      if (payload.mode === 'save') {
+        if (
+          state.parametersData.paramDefinition.hasOwnProperty('isAllGroup') &&
+          state.parametersData.paramDefinition.isAllGroup === true
+        ) {
           newState = {
             parametersData: null,
             ansibleVarsAll: cloneDeep(payload.parameterSelection),
           };
         } else {
           const services = cloneDeep(state.services);
-          const index = findIndex(services, { id: state.parametersData.paramDefinition.id });
-          services[index].ansibleParameters = cloneDeep(payload.parameterSelection);
+          const index = findIndex(services, {
+            id: state.parametersData.paramDefinition.id,
+          });
+          services[index].ansibleParameters = cloneDeep(
+            payload.parameterSelection
+          );
 
           newState = {
             parametersData: null,
-            services: services,
+            services,
           };
         }
       } else {
diff --git a/webpack/components/ApplicationDefinition/ApplicationDefinitionSelectors.js b/webpack/components/ApplicationDefinition/ApplicationDefinitionSelectors.js
index 976348d7..3b38b6d5 100644
--- a/webpack/components/ApplicationDefinition/ApplicationDefinitionSelectors.js
+++ b/webpack/components/ApplicationDefinition/ApplicationDefinitionSelectors.js
@@ -1,13 +1,24 @@
-const applicationDefinitionConf = state => state.foremanAcd.applicationDefinitionConf;
+const applicationDefinitionConf = state =>
+  state.foremanAcd.applicationDefinitionConf;
 
-export const selectShowAlertModal = state => applicationDefinitionConf(state).showAlertModal;
-export const selectAlertModalText = state => applicationDefinitionConf(state).alertModalText;
-export const selectAlertModalTitle = state => applicationDefinitionConf(state).alertModalTitle;
-export const selectEditMode = state => applicationDefinitionConf(state).editMode;
-export const selectAnsiblePlaybook = state => applicationDefinitionConf(state).ansiblePlaybook;
-export const selectServices = state => applicationDefinitionConf(state).services;
+export const selectShowAlertModal = state =>
+  applicationDefinitionConf(state).showAlertModal;
+export const selectAlertModalText = state =>
+  applicationDefinitionConf(state).alertModalText;
+export const selectAlertModalTitle = state =>
+  applicationDefinitionConf(state).alertModalTitle;
+export const selectEditMode = state =>
+  applicationDefinitionConf(state).editMode;
+export const selectAnsiblePlaybook = state =>
+  applicationDefinitionConf(state).ansiblePlaybook;
+export const selectServices = state =>
+  applicationDefinitionConf(state).services;
 export const selectColumns = state => applicationDefinitionConf(state).columns;
-export const selectHiddenForemanParameterTypes = state => applicationDefinitionConf(state).hiddenForemanParameterTypes;
-export const selectParametersData = state => applicationDefinitionConf(state).parametersData;
-export const selectAnsibleVarsAll = state => applicationDefinitionConf(state).ansibleVarsAll;
-export const selectParamEditMode = state => applicationDefinitionConf(state).paramEditMode;
+export const selectHiddenForemanParameterTypes = state =>
+  applicationDefinitionConf(state).hiddenForemanParameterTypes;
+export const selectParametersData = state =>
+  applicationDefinitionConf(state).parametersData;
+export const selectAnsibleVarsAll = state =>
+  applicationDefinitionConf(state).ansibleVarsAll;
+export const selectParamEditMode = state =>
+  applicationDefinitionConf(state).paramEditMode;
diff --git a/webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionConfData_1.fixtures.js b/webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionConfData1.fixtures.js
similarity index 64%
rename from webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionConfData_1.fixtures.js
rename to webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionConfData1.fixtures.js
index a748e83f..837d308c 100644
--- a/webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionConfData_1.fixtures.js
+++ b/webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionConfData1.fixtures.js
@@ -1,151 +1,123 @@
-export const applicationDefinitionConfData_1 = {
+export const applicationDefinitionConfData1 = {
   name: false,
   error: {
     errorMsg: '',
     status: '',
-    statusText: ''
+    statusText: '',
   },
   columns: [
     {
       property: 'name',
       header: {
         label: 'Name',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 0,
           style: {
-            width: '15%'
-          }
-        }
+            width: '15%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'description',
       header: {
         label: 'Description',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 1,
           style: {
-            width: '10%'
-          }
-        }
+            width: '10%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'hostgroup',
       header: {
         label: 'Hostgroup',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 2,
           style: {
-            width: '20%'
-          }
-        }
+            width: '20%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'ansibleGroup',
       header: {
         label: 'Ansible Group',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 3,
           style: {
-            width: '20%'
-          }
-        }
+            width: '20%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'minCount',
       header: {
         label: 'min count',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 4,
           style: {
-            width: '10%'
-          }
-        }
+            width: '10%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'maxCount',
       header: {
         label: 'max count',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 5,
           style: {
-            width: '10%'
-          }
-        }
+            width: '10%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'actions',
       header: {
         label: 'Actions',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 6,
           style: {
-            width: '15%'
-          }
-        }
+            width: '15%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
-    }
+        formatters: [null],
+      },
+    },
   ],
   ansiblePlaybook: {
     id: 2,
@@ -155,49 +127,49 @@ export const applicationDefinitionConfData_1 = {
         {
           id: 0,
           name: 'dummy_var',
-          value: '0'
-        }
+          value: '0',
+        },
       ],
       dbservers: [
         {
           id: 0,
           name: 'mysqlservice',
-          value: 'mysqld'
+          value: 'mysqld',
         },
         {
           id: 1,
           name: 'mysql_port',
-          value: '3306'
+          value: '3306',
         },
         {
           id: 2,
           name: 'dbuser',
-          value: 'webapp'
+          value: 'webapp',
         },
         {
           id: 3,
           name: 'dbname',
-          value: 'ANSAP01'
+          value: 'ANSAP01',
         },
         {
           id: 4,
           name: 'upassword',
-          value: 'Bond@007'
+          value: 'Bond@007',
         },
         {
           id: 5,
           name: 'masterpassword',
-          value: 'MySQL@007'
-        }
+          value: 'MySQL@007',
+        },
       ],
       all: [
         {
           id: 0,
           name: 'repository',
-          value: 'https://github.com/bennojoy/mywebapp.git'
-        }
-      ]
-    }
+          value: 'https://github.com/bennojoy/mywebapp.git',
+        },
+      ],
+    },
   },
   services: [
     {
@@ -215,7 +187,7 @@ export const applicationDefinitionConfData_1 = {
           name: 'CP',
           description: '',
           type: 'computeprofile',
-          value: '1'
+          value: '1',
         },
         {
           id: 2,
@@ -223,16 +195,16 @@ export const applicationDefinitionConfData_1 = {
           name: 'LE',
           description: '',
           type: 'lifecycleenv',
-          value: '1'
-        }
+          value: '1',
+        },
       ],
       ansibleParameters: [
         {
           id: 0,
           name: 'dummy_var',
-          value: '0'
-        }
-      ]
+          value: '0',
+        },
+      ],
     },
     {
       id: 2,
@@ -247,42 +219,42 @@ export const applicationDefinitionConfData_1 = {
         {
           id: 0,
           name: 'mysqlservice',
-          value: 'mysqld'
+          value: 'mysqld',
         },
         {
           id: 1,
           name: 'mysql_port',
           value: '3306',
-          locked: true
+          locked: true,
         },
         {
           id: 2,
           name: 'dbuser',
-          value: 'webapp'
+          value: 'webapp',
         },
         {
           id: 3,
           name: 'dbname',
-          value: 'ANSAP01'
+          value: 'ANSAP01',
         },
         {
           id: 4,
           name: 'upassword',
-          value: 'Bond@007'
+          value: 'Bond@007',
         },
         {
           id: 5,
           name: 'masterpassword',
-          value: 'MySQL@007'
-        }
-      ]
-    }
+          value: 'MySQL@007',
+        },
+      ],
+    },
   ],
   ansibleVarsAll: [
     {
       id: 0,
       name: 'repository',
-      value: 'https://github.com/bennojoy/mywebapp.git'
-    }
-  ]
-}
+      value: 'https://github.com/bennojoy/mywebapp.git',
+    },
+  ],
+};
diff --git a/webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionReducer.fixtures.js b/webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionReducer.fixtures.js
index 66e46111..bba8545e 100644
--- a/webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionReducer.fixtures.js
+++ b/webpack/components/ApplicationDefinition/__fixtures__/applicationDefinitionReducer.fixtures.js
@@ -1,26 +1,20 @@
 import Immutable from 'seamless-immutable';
-import {
-   cloneDeep,
-   findIndex,
-   findLastIndex,
-} from 'lodash';
+import { cloneDeep, findIndex } from 'lodash';
 
-import {
-  applicationDefinitionConfData_1,
-} from '../__fixtures__/applicationDefinitionConfData_1.fixtures';
+import { applicationDefinitionConfData1 } from '../__fixtures__/applicationDefinitionConfData1.fixtures';
 
-export const successState = Immutable(applicationDefinitionConfData_1);
+export const successState = Immutable(applicationDefinitionConfData1);
 
 const EDIT_ROW_ID = 2;
 
-const editClone = applicationDefinitionConfData_1;
-const editIndex = findIndex(editClone.services, { id: EDIT_ROW_ID })
-editClone["services"][editIndex].backup = cloneDeep(editClone["services"][editIndex]);
+const editClone = applicationDefinitionConfData1;
+const editIndex = findIndex(editClone.services, { id: EDIT_ROW_ID });
+editClone.services[editIndex].backup = cloneDeep(editClone.services[editIndex]);
 export const editState = Immutable(editClone);
 
 // Payload Data
-export const initApplicationDefinitionPayload = applicationDefinitionConfData_1;
-export const addServicePayload = { };
+export const initApplicationDefinitionPayload = applicationDefinitionConfData1;
+export const addServicePayload = {};
 export const deleteServicePayload = {
   rowData: {
     id: EDIT_ROW_ID,
@@ -42,11 +36,11 @@ export const cancelEditServicePayload = {
   },
 };
 export const changeEditServicePayload = {
-  value: "helloworld",
-  property: "name",
+  value: 'helloworld',
+  property: 'name',
   rowData: {
     id: EDIT_ROW_ID,
-  }
+  },
 };
 
 export const loadAnsibleDataRequestPayload = {
@@ -55,25 +49,51 @@ export const loadAnsibleDataRequestPayload = {
 
 export const loadAnsibleDataSuccessPayload = {
   id: 2,
-  name: "LAMP",
+  name: 'LAMP',
   groups: {
     webservers: {
-      dummy_var: "0"
+      dummy_var: '0',
     },
     dbservers: {
-      mysqlservice: "mysqld",
-      mysql_port: "3306",
-      dbuser: "webapp",
-      dbname: "ANSAP01",
-      upassword: "Bond@007",
-      masterpassword: "MySQL@007"
+      mysqlservice: 'mysqld',
+      mysql_port: '3306',
+      dbuser: 'webapp',
+      dbname: 'ANSAP01',
+      upassword: 'Bond@007',
+      masterpassword: 'MySQL@007',
     },
     all: {
-      repository: "https://github.com/bennojoy/mywebapp.git"
-    }
-  }
+      repository: 'https://github.com/bennojoy/mywebapp.git',
+    },
+  },
 };
 
 export const loadAnsibleDataFailurePayload = {
-  error: "Something really bad happend",
+  error: {
+    errorMsg: 'Something really bad happend',
+    statusText: {
+      message: 'Request failed with status code 500',
+      name: 'Error',
+      stack:
+        'Error: Request failed with status code 500\n    at createError (https://alma8-katello-devel.example.com/webpack/foreman-vendor.bundle-v13.0.1-development-5d3e5360b2af8f65b096.js:406679:15)\n    at settle (https://alma8-katello-devel.example.com/webpack/foreman-vendor.bundle-v13.0.1-development-5d3e5360b2af8f65b096.js:406954:12)\n    at XMLHttpRequest.handleLoad (https://alma8-katello-devel.example.com/webpack/foreman-vendor.bundle-v13.0.1-development-5d3e5360b2af8f65b096.js:406146:7)',
+      config: {
+        url: '/acd/ui_acd_ansible_data/1',
+        method: 'get',
+        headers: {
+          Accept: 'application/json, text/plain, */*',
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-CSRF-Token':
+            'gDtRPi6lnKE-V65O-datPQ2mGRQwbw3i-y_hAjjKAYQ5WC_oqTwluCJZfsGkpihmJAi3IvAi1ZAc9N47KcjCbQ',
+        },
+        params: {},
+        transformRequest: [null],
+        transformResponse: [null],
+        timeout: 0,
+        xsrfCookieName: 'XSRF-TOKEN',
+        xsrfHeaderName: 'X-XSRF-TOKEN',
+        maxContentLength: -1,
+        maxBodyLength: -1,
+      },
+    },
+  },
 };
diff --git a/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinition.test.js b/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinition.test.js
index de31d981..9a821d5d 100644
--- a/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinition.test.js
+++ b/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinition.test.js
@@ -7,11 +7,11 @@ const noop = () => {};
 const fixtures = {
   'should render application definition': {
     data: {
-      location: "Default Location",
-      organization: "Default Organization",
+      location: 'Default Location',
+      organization: 'Default Organization',
       hostgroups: [],
-      foremanDataUrl: "url/does/not/exist",
-      ansibleDataUrl: "url/does/not/exist",
+      foremanDataUrl: 'url/does/not/exist',
+      ansibleDataUrl: 'url/does/not/exist',
       services: [],
       ansibleVarsAll: [],
     },
diff --git a/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionHelper.test.js b/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionHelper.test.js
new file mode 100644
index 00000000..28e32ce1
--- /dev/null
+++ b/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionHelper.test.js
@@ -0,0 +1,16 @@
+import { transformAnsiblePlaybook } from '../ApplicationDefinitionHelper';
+
+describe('transformAnsiblePlaybook()', () => {
+  const playbook = {
+    id: 42,
+    name: "Don't Panic",
+  };
+
+  it('returns empty playbook for invalid input', () => {
+    expect(transformAnsiblePlaybook(playbook)).toEqual({
+      id: playbook.id,
+      name: playbook.name,
+      groups: {},
+    });
+  });
+});
diff --git a/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionReducer.test.js b/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionReducer.test.js
index 3550a188..293f06e4 100644
--- a/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionReducer.test.js
+++ b/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionReducer.test.js
@@ -27,11 +27,6 @@ import {
   APPLICATION_DEFINITION_SERVICE_EDIT_CONFIRM,
   APPLICATION_DEFINITION_SERVICE_EDIT_CHANGE,
   APPLICATION_DEFINITION_SERVICE_EDIT_CANCEL,
-  APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN,
-  APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE,
-  APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN,
-  APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE,
-  APPLICATION_DEFINITION_CHANGE_PARAMETER_SELECTION_MODE,
 } from '../ApplicationDefinitionConstants';
 
 const fixtures = {
diff --git a/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionSelectors.test.js b/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionSelectors.test.js
index 289ad715..8af7415b 100644
--- a/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionSelectors.test.js
+++ b/webpack/components/ApplicationDefinition/__tests__/ApplicationDefinitionSelectors.test.js
@@ -14,9 +14,7 @@ import {
   selectParamEditMode,
 } from '../ApplicationDefinitionSelectors';
 
-import {
-  applicationDefinitionConfData_1,
-} from '../__fixtures__/applicationDefinitionConfData_1.fixtures';
+import { applicationDefinitionConfData1 } from '../__fixtures__/applicationDefinitionConfData1.fixtures';
 
 const stateFactory = obj => ({
   foremanAcd: {
@@ -25,28 +23,30 @@ const stateFactory = obj => ({
 });
 
 const fixtures = {
-  'should return showAlertModal from applicationDefinitionConfData_1 fixtures': () =>
-    selectShowAlertModal(stateFactory(applicationDefinitionConfData_1)),
-  'should return alertModalText from applicationDefinitionConfData_1 fixtures': () =>
-    selectAlertModalText(stateFactory(applicationDefinitionConfData_1)),
-  'should return alertModalTitle from applicationDefinitionConfData_1 fixtures': () =>
-    selectAlertModalTitle(stateFactory(applicationDefinitionConfData_1)),
-  'should return editMode from applicationDefinitionConfData_1 fixtures': () =>
-    selectEditMode(stateFactory(applicationDefinitionConfData_1)),
-  'should return ansiblePlaybook from applicationDefinitionConfData_1 fixtures': () =>
-    selectAnsiblePlaybook(stateFactory(applicationDefinitionConfData_1)),
-  'should return services from applicationDefinitionConfData_1 fixtures': () =>
-    selectServices(stateFactory(applicationDefinitionConfData_1)),
-  'should return parametersData from applicationDefinitionConfData_1 fixtures': () =>
-    selectParametersData(stateFactory(applicationDefinitionConfData_1)),
-  'should return columns from applicationDefinitionConfData_1 fixtures': () =>
-    selectColumns(stateFactory(applicationDefinitionConfData_1)),
-  'should return hiddenForemanParameterTypes from applicationDefinitionConfData_1 fixtures': () =>
-    selectHiddenForemanParameterTypes(stateFactory(applicationDefinitionConfData_1)),
-  'should return ansibleVarsAll from applicationDefinitionConfData_1 fixtures': () =>
-    selectAnsibleVarsAll(stateFactory(applicationDefinitionConfData_1)),
-  'should return ParamEditMode from applicationDefinitionConfData_1 fixtures': () =>
-    selectParamEditMode(stateFactory(applicationDefinitionConfData_1)),
+  'should return showAlertModal from applicationDefinitionConfData1 fixtures': () =>
+    selectShowAlertModal(stateFactory(applicationDefinitionConfData1)),
+  'should return alertModalText from applicationDefinitionConfData1 fixtures': () =>
+    selectAlertModalText(stateFactory(applicationDefinitionConfData1)),
+  'should return alertModalTitle from applicationDefinitionConfData1 fixtures': () =>
+    selectAlertModalTitle(stateFactory(applicationDefinitionConfData1)),
+  'should return editMode from applicationDefinitionConfData1 fixtures': () =>
+    selectEditMode(stateFactory(applicationDefinitionConfData1)),
+  'should return ansiblePlaybook from applicationDefinitionConfData1 fixtures': () =>
+    selectAnsiblePlaybook(stateFactory(applicationDefinitionConfData1)),
+  'should return services from applicationDefinitionConfData1 fixtures': () =>
+    selectServices(stateFactory(applicationDefinitionConfData1)),
+  'should return parametersData from applicationDefinitionConfData1 fixtures': () =>
+    selectParametersData(stateFactory(applicationDefinitionConfData1)),
+  'should return columns from applicationDefinitionConfData1 fixtures': () =>
+    selectColumns(stateFactory(applicationDefinitionConfData1)),
+  'should return hiddenForemanParameterTypes from applicationDefinitionConfData1 fixtures': () =>
+    selectHiddenForemanParameterTypes(
+      stateFactory(applicationDefinitionConfData1)
+    ),
+  'should return ansibleVarsAll from applicationDefinitionConfData1 fixtures': () =>
+    selectAnsibleVarsAll(stateFactory(applicationDefinitionConfData1)),
+  'should return ParamEditMode from applicationDefinitionConfData1 fixtures': () =>
+    selectParamEditMode(stateFactory(applicationDefinitionConfData1)),
 };
 
 describe('ApplicationDefinitionSelectors', () =>
diff --git a/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinitionReducer.test.js.snap b/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinitionReducer.test.js.snap
index a8b02ade..af7f1237 100644
--- a/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinitionReducer.test.js.snap
+++ b/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinitionReducer.test.js.snap
@@ -2152,6 +2152,8 @@ Object {
 
 exports[`ApplicationDefintionReducer should load param data be erroneous 1`] = `
 Object {
+  "alertModalText": "Failed to load Playbooks: Something really bad happend",
+  "alertModalTitle": "Error",
   "ansiblePlaybook": Object {
     "groups": Object {
       "all": Array [
@@ -2353,7 +2355,11 @@ Object {
       "property": "actions",
     },
   ],
-  "error": "Something really bad happend",
+  "error": Object {
+    "errorMsg": "",
+    "status": "",
+    "statusText": "",
+  },
   "loading": false,
   "name": false,
   "services": Array [
@@ -2435,6 +2441,7 @@ Object {
       "name": "db",
     },
   ],
+  "showAlertModal": true,
 }
 `;
 
@@ -2646,6 +2653,7 @@ Object {
     "status": "",
     "statusText": "",
   },
+  "loading": false,
   "name": false,
   "services": Array [
     Object {
diff --git a/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinitionSelectors.test.js.snap b/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinitionSelectors.test.js.snap
index cc4b9377..f8faeb1a 100644
--- a/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinitionSelectors.test.js.snap
+++ b/webpack/components/ApplicationDefinition/__tests__/__snapshots__/ApplicationDefinitionSelectors.test.js.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ApplicationDefinitionSelectors should return ParamEditMode from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationDefinitionSelectors should return ParamEditMode from applicationDefinitionConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationDefinitionSelectors should return alertModalText from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationDefinitionSelectors should return alertModalText from applicationDefinitionConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationDefinitionSelectors should return alertModalTitle from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationDefinitionSelectors should return alertModalTitle from applicationDefinitionConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationDefinitionSelectors should return ansiblePlaybook from applicationDefinitionConfData_1 fixtures 1`] = `
+exports[`ApplicationDefinitionSelectors should return ansiblePlaybook from applicationDefinitionConfData1 fixtures 1`] = `
 Object {
   "groups": Object {
     "all": Array [
@@ -61,7 +61,7 @@ Object {
 }
 `;
 
-exports[`ApplicationDefinitionSelectors should return ansibleVarsAll from applicationDefinitionConfData_1 fixtures 1`] = `
+exports[`ApplicationDefinitionSelectors should return ansibleVarsAll from applicationDefinitionConfData1 fixtures 1`] = `
 Array [
   Object {
     "id": 0,
@@ -71,7 +71,7 @@ Array [
 ]
 `;
 
-exports[`ApplicationDefinitionSelectors should return columns from applicationDefinitionConfData_1 fixtures 1`] = `
+exports[`ApplicationDefinitionSelectors should return columns from applicationDefinitionConfData1 fixtures 1`] = `
 Array [
   Object {
     "cell": Object {
@@ -216,13 +216,13 @@ Array [
 ]
 `;
 
-exports[`ApplicationDefinitionSelectors should return editMode from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationDefinitionSelectors should return editMode from applicationDefinitionConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationDefinitionSelectors should return hiddenForemanParameterTypes from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationDefinitionSelectors should return hiddenForemanParameterTypes from applicationDefinitionConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationDefinitionSelectors should return parametersData from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationDefinitionSelectors should return parametersData from applicationDefinitionConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationDefinitionSelectors should return services from applicationDefinitionConfData_1 fixtures 1`] = `
+exports[`ApplicationDefinitionSelectors should return services from applicationDefinitionConfData1 fixtures 1`] = `
 Array [
   Object {
     "ansibleGroup": "webservers",
@@ -304,4 +304,4 @@ Array [
 ]
 `;
 
-exports[`ApplicationDefinitionSelectors should return showAlertModal from applicationDefinitionConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationDefinitionSelectors should return showAlertModal from applicationDefinitionConfData1 fixtures 1`] = `undefined`;
diff --git a/webpack/components/ApplicationDefinition/components/AnsiblePlaybookSelector.js b/webpack/components/ApplicationDefinition/components/AnsiblePlaybookSelector.js
index 0c57ad9e..c75743cd 100644
--- a/webpack/components/ApplicationDefinition/components/AnsiblePlaybookSelector.js
+++ b/webpack/components/ApplicationDefinition/components/AnsiblePlaybookSelector.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExtSelect from '../../common/ExtSelect';
-import RailsData from '../../common/RailsData'
+import RailsData from '../../common/RailsData';
 
-const AnsiblePlaybookSelector= ({
+const AnsiblePlaybookSelector = ({
   label,
   hidden,
   editable,
@@ -12,39 +12,44 @@ const AnsiblePlaybookSelector= ({
   onChange,
   options,
   additionalData,
-}) =>{
-  return (
-    <div className="form-group">
-      <label className="col-md-2 control-label">{label}</label>
-      <div className="col-md-4">
-        <ExtSelect
-          hidden={hidden}
-          editable={editable}
-          viewText={viewText}
-          selectValue={selectValue}
-          onChange={onChange}
-          options={options}
-          additionalData={additionalData}
-        />
-        <RailsData
-          key='ansible_playbook_data'
-          view='app_definition'
-          parameter='acd_ansible_playbook_id'
-          value={selectValue}
-        />
-      </div>
+}) => (
+  <div className="form-group">
+    <label className="col-md-2 control-label">{label}</label>
+    <div className="col-md-4">
+      <ExtSelect
+        hidden={hidden}
+        editable={editable}
+        viewText={viewText}
+        selectValue={selectValue}
+        onChange={onChange}
+        options={options}
+        additionalData={additionalData}
+      />
+      <RailsData
+        key="ansible_playbook_data"
+        view="app_definition"
+        parameter="acd_ansible_playbook_id"
+        value={selectValue}
+      />
     </div>
-  );
-};
+  </div>
+);
 
 AnsiblePlaybookSelector.propTypes = {
   label: PropTypes.string.isRequired,
   editable: PropTypes.bool.isRequired,
   viewText: PropTypes.string,
   selectValue: PropTypes.string,
+  hidden: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   options: PropTypes.object,
   additionalData: PropTypes.object,
 };
+AnsiblePlaybookSelector.defaultProps = {
+  viewText: '',
+  selectValue: '',
+  options: undefined,
+  additionalData: undefined,
+};
 
 export default AnsiblePlaybookSelector;
diff --git a/webpack/components/ApplicationDefinition/components/__tests__/AnsiblePlaybookSelector.test.js b/webpack/components/ApplicationDefinition/components/__tests__/AnsiblePlaybookSelector.test.js
index 62eb88e6..c71b7063 100644
--- a/webpack/components/ApplicationDefinition/components/__tests__/AnsiblePlaybookSelector.test.js
+++ b/webpack/components/ApplicationDefinition/components/__tests__/AnsiblePlaybookSelector.test.js
@@ -12,7 +12,7 @@ const fixtures = {
     viewText: 'myText',
     selectValue: '1',
     onChange: noop,
-    options: { first: 'first', second: 'second'},
+    options: { first: 'first', second: 'second' },
     additionalData: { moreData: 'moooore' },
   },
   'should render hidden ansible playbook selector': {
@@ -22,7 +22,7 @@ const fixtures = {
     viewText: 'myText',
     selectValue: '1',
     onChange: noop,
-    options: { first: 'first', second: 'second'},
+    options: { first: 'first', second: 'second' },
     additionalData: { moreData: 'moooore' },
   },
   'should render not editable ansible playbook selector': {
@@ -32,7 +32,7 @@ const fixtures = {
     viewText: 'myText',
     selectValue: '1',
     onChange: noop,
-    options: { first: 'first', second: 'second'},
+    options: { first: 'first', second: 'second' },
     additionalData: { moreData: 'moooore' },
   },
 };
diff --git a/webpack/components/ApplicationDefinition/index.js b/webpack/components/ApplicationDefinition/index.js
index 4463185a..764d9007 100644
--- a/webpack/components/ApplicationDefinition/index.js
+++ b/webpack/components/ApplicationDefinition/index.js
@@ -40,4 +40,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(ApplicationDefinition);
-
diff --git a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImport.js b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImport.js
index c6669900..d70b5357 100644
--- a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImport.js
+++ b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImport.js
@@ -1,58 +1,35 @@
-import React, { useState } from 'react';
-import {
-  cloneDeep,
-} from 'lodash';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Icon,
   Button,
   MessageDialog,
+  Table,
+  inlineEditFormatterFactory,
 } from 'patternfly-react';
 import * as resolve from 'table-resolver';
+import { translate as __ } from 'foremanReact/common/I18n';
 import Select from 'foremanReact/components/common/forms/Select';
 import CommonForm from 'foremanReact/components/common/forms/CommonForm';
-import AddTableEntry from '../common/AddTableEntry';
-import DeleteTableEntry from '../common/DeleteTableEntry';
 import RailsData from '../common/RailsData';
 import { EasyHeaderFormatter } from '../../helper';
-import { translate as __ } from 'foremanReact/common/I18n';
-
-import {
-  Table,
-  FormControl,
-  inlineEditFormatterFactory,
-} from 'patternfly-react';
 
 class ApplicationDefinitionImport extends React.Component {
-
-  constructor(props) {
-    super(props);
-  }
-
   onFileChange = event => {
     // Update the state
     this.setState({ selectedFile: event.target.files[0] });
-
   };
 
-  isEditing({rowData}) {
-    return (rowData.backup !== undefined);
-  }
-
-  setAnsiblePlaybookServices() {
-    this.setState({ansiblePlaybookServices: this.props.ansiblePlaybookServices});
+  static isEditing({ rowData }) {
+    return rowData.backup !== undefined;
   }
 
   componentDidMount() {
-    const {
-      mode,
-      ansiblePlaybookServices,
-      hostgroups, } = this.props;
+    const { ansiblePlaybookServices, hostgroups } = this.props;
 
     const {
       initApplicationDefinitionImport,
       changeEditApplicationDefinitionImportService,
-      handleImportAnsiblePlaybook,
     } = this.props;
 
     this.headerFormatter = EasyHeaderFormatter;
@@ -67,50 +44,56 @@ class ApplicationDefinitionImport extends React.Component {
         <td className="editing">
           <Select
             value={value.toString()}
-            onChange={e => changeEditApplicationDefinitionImportService(e.target.value, additionalData) }
+            onChange={e =>
+              changeEditApplicationDefinitionImportService(
+                e.target.value,
+                additionalData
+              )
+            }
             options={options}
             allowClear
             key="key"
           />
         </td>
-      )
+      ),
     };
 
     const inlineEditFormatter = inlineEditFormatterFactory({
-      isEditing: additionalData => this.isEditing(additionalData),
+      isEditing: additionalData => this.constructor.isEditing(additionalData),
       renderValue: (value, additionalData) => {
         let prettyValue = value;
-        if (additionalData.property == 'hostgroup') {
+        if (additionalData.property === 'hostgroup') {
           prettyValue = hostgroups[value];
         }
-        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData);
       },
       renderEdit: (value, additionalData) => {
-        if (additionalData.property == 'hostgroup') {
+        if (additionalData.property === 'hostgroup') {
           if (additionalData.rowData) {
-            return inlineEditFormatterImpl.renderEditSelect(value, additionalData, hostgroups);
+            return inlineEditFormatterImpl.renderEditSelect(
+              value,
+              additionalData,
+              hostgroups
+            );
           }
-          return inlineEditFormatterImpl.renderValue(hostgroups[value], additionalData)
+          return inlineEditFormatterImpl.renderValue(
+            hostgroups[value],
+            additionalData
+          );
         }
         return inlineEditFormatterImpl.renderValue(value, additionalData);
-      }
+      },
     });
     this.inlineEditFormatter = inlineEditFormatter;
 
     initApplicationDefinitionImport(
       ansiblePlaybookServices,
       this.headerFormatter,
-      this.inlineEditFormatter,
+      this.inlineEditFormatter
     );
-  };
+  }
 
   render() {
-    const {
-      organization,
-      location,
-      foremanDataUrl,
-      mode,} = this.props;
-
     const {
       showAlertModal,
       alertModalText,
@@ -120,95 +103,98 @@ class ApplicationDefinitionImport extends React.Component {
       columns,
       handleImportAnsiblePlaybook,
     } = this.props;
-    let ansibleServices;
 
     return (
       <span>
-      {ansibleServices = this.setAnsiblePlaybookServices}
-      {ansibleServices}
-      <MessageDialog
+        <MessageDialog
           show={showAlertModal}
           onHide={closeAlertModal}
           primaryAction={closeAlertModal}
           primaryActionButtonContent={__('OK')}
-          primaryActionButtonBsStyle={"danger"}
+          primaryActionButtonBsStyle="danger"
           icon={<Icon type="pf" name="error-circle-o" />}
           title={alertModalTitle}
           primaryContent={alertModalText}
         />
-      <div>
-        <CommonForm label="Application Definition file" className="custom-file-upload">
-        <input
-          type="file"
-          onChange={this.onFileChange}
-        />
-        </CommonForm>
-        <CommonForm>
-        <Button
-          bsStyle="default"
-          onClick={e => handleImportAnsiblePlaybook(this.state.selectedFile, e)}
+        <div>
+          <CommonForm
+            label="Application Definition file"
+            className="custom-file-upload"
           >
-          {__('Import')} </Button>
-        </CommonForm>
+            <input type="file" onChange={this.onFileChange} />
+          </CommonForm>
+          <CommonForm>
+            <Button
+              bsStyle="default"
+              onClick={e =>
+                handleImportAnsiblePlaybook(this.state.selectedFile, e)
+              }
+            >
+              {__('Import')}{' '}
+            </Button>
+          </CommonForm>
         </div>
 
-        {(Object.keys(this.props.ansiblePlaybookServices).length > 0) ? (
+        {ansiblePlaybookServices.length > 0 ? (
           <div className="form-group">
-          <Table.PfProvider
-            striped
-            bordered
-            hover
-            dataTable
-            columns={columns}
-            components={{
-              body: {
-                cell: cellProps => cellProps.children
-              }
-            }}
-          >
-            <Table.Header headerRows={resolve.headerRows({ columns })} />
-            <Table.Body
-              rows={this.props.ansiblePlaybookServices}
-              rowKey="id"
-              onRow={(rowData, { rowIndex }) => ({
-                role: 'row',
-                isEditing: () => this.isEditing({ rowData }),
-                last: rowIndex === this.props.ansiblePlaybookServices.length - 1
-              })}
-            />
-          </Table.PfProvider>
-        </div>) : null }
+            <Table.PfProvider
+              striped
+              bordered
+              hover
+              dataTable
+              columns={columns}
+              components={{
+                body: {
+                  cell: cellProps => cellProps.children,
+                },
+              }}
+            >
+              <Table.Header headerRows={resolve.headerRows({ columns })} />
+              <Table.Body
+                rows={ansiblePlaybookServices}
+                rowKey="id"
+                onRow={(rowData, { rowIndex }) => ({
+                  role: 'row',
+                  isEditable: () => this.isEditing({ rowData }),
+                  last: ansiblePlaybookServices.length - 1,
+                })}
+              />
+            </Table.PfProvider>
+          </div>
+        ) : null}
         <RailsData
-          key='applications_definition_import'
-          view='app_definition_import'
-          parameter='services'
-          value={JSON.stringify(this.props.ansiblePlaybookServices)}
+          key="applications_definition_import"
+          view="app_definition_import"
+          parameter="services"
+          value={JSON.stringify(ansiblePlaybookServices)}
         />
       </span>
-    )};
+    );
+  }
 }
 
 ApplicationDefinitionImport.defaultProps = {
-  error: {},
+  // error: {},
   showAlertModal: false,
   alertModalText: '',
   alertModalTitle: '',
-  editMode: false,
   columns: [],
-  ansiblePlaybookServices: {},
-  editParamsOfRowId: null,
-}
+  ansiblePlaybookServices: [],
+};
 
 ApplicationDefinitionImport.propTypes = {
-  initApplicationDefinitionImport: PropTypes.func,
-  editMode: PropTypes.bool.isRequired,
+  hostgroups: PropTypes.object.isRequired,
+  // error: PropTypes.object,
+  ansiblePlaybookServices: PropTypes.array,
+  // editMode: PropTypes.bool.isRequired,
   columns: PropTypes.array,
   showAlertModal: PropTypes.bool,
   alertModalText: PropTypes.string,
   alertModalTitle: PropTypes.string,
-  closeAlertModal: PropTypes.func,
-  handleImportAnsiblePlaybook: PropTypes.func,
-  changeEditApplicationDefinitionImportService: PropTypes.func,
+  changeEditApplicationDefinitionImportService: PropTypes.func.isRequired,
+  closeAlertModal: PropTypes.func.isRequired,
+  handleImportAnsiblePlaybook: PropTypes.func.isRequired,
+  initApplicationDefinitionImport: PropTypes.func.isRequired,
 };
 
 export default ApplicationDefinitionImport;
diff --git a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportActions.js b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportActions.js
index 38feb173..79b703b7 100644
--- a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportActions.js
+++ b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportActions.js
@@ -1,23 +1,7 @@
-import React from 'react';
-import { API, actionTypeGenerator } from 'foremanReact/redux/API';
+import { API } from 'foremanReact/redux/API';
 import { addToast } from 'foremanReact/components/ToastsList';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 
-
-import {
-  setModalOpen,
-  setModalClosed,
-} from 'foremanReact/components/ForemanModal/ForemanModalActions';
-
-import {
-  actionHeaderCellFormatter,
-} from 'patternfly-react';
-
-import {
-  propsToSnakeCase,
-  propsToCamelCase,
-} from 'foremanReact/common/helpers';
-
 import {
   APPLICATION_DEFINITION_IMPORT_INIT,
   APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL,
@@ -27,11 +11,10 @@ import {
   APPLICATION_DEFINITION_IMPORT_FILE_FAILURE,
 } from './ApplicationDefinitionImportConstants';
 
-
 export const initApplicationDefinitionImport = (
   ansiblePlaybookServices,
   headerFormatter,
-  inlineEditFormatter,
+  inlineEditFormatter
 ) => dispatch => {
   const initialState = {};
 
@@ -44,16 +27,16 @@ export const initApplicationDefinitionImport = (
         props: {
           index: 0,
           style: {
-            width: '20%'
-          }
+            width: '20%',
+          },
         },
       },
       cell: {
         props: {
-              index: 0,
-            },
-        formatters: [inlineEditFormatter]
-      }
+          index: 0,
+        },
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'hostgroup',
@@ -63,17 +46,17 @@ export const initApplicationDefinitionImport = (
         props: {
           index: 1,
           style: {
-            width: '20%'
-          }
+            width: '20%',
+          },
         },
       },
       cell: {
         props: {
-              index: 1,
-            },
-        formatters: [inlineEditFormatter]
-      }
-    }
+          index: 1,
+        },
+        formatters: [inlineEditFormatter],
+      },
+    },
   ];
 
   initialState.ansiblePlaybookServices = ansiblePlaybookServices;
@@ -84,21 +67,15 @@ export const initApplicationDefinitionImport = (
   });
 };
 
-
-const errorHandler = (msg, err) => {
-  const error = {
-    errorMsg: __('Failed to fetch data from server.'),
-    statusText: err,
-  };
-  return { type: msg, payload: { error } };
-};
-
 export const closeAlertModal = () => ({
   type: APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL,
-  payload: {}
+  payload: {},
 });
 
-export const changeEditApplicationDefinitionImportService = (value, additionalData) => ({
+export const changeEditApplicationDefinitionImportService = (
+  value,
+  additionalData
+) => ({
   type: APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE,
   payload: {
     value,
@@ -106,56 +83,54 @@ export const changeEditApplicationDefinitionImportService = (value, additionalDa
   },
 });
 
-
-export const handleImportAnsiblePlaybook = (
-  file, e,) => async dispatch => {
+export const handleImportAnsiblePlaybook = (file, e) => async dispatch => {
   e.preventDefault();
   dispatch({
     type: APPLICATION_DEFINITION_IMPORT_FILE_REQUEST,
     payload: {
       app_definition_file: file,
-    }});
+    },
+  });
   try {
     const formData = new FormData();
 
     // Update the formData object
-    formData.append(
-      "app_definition_file",
-      file,
-      file.name
-    );
+    formData.append('app_definition_file', file, file.name);
     const { data } = await API.post(
-      '/acd/app_definitions/handle_file_upload', formData);
+      '/acd/app_definitions/handle_file_upload',
+      formData
+    );
     dispatch(
-        addToast({
-          type: 'success',
-          message: sprintf(
-            __('Sucessfully synced imported app template')
-          ),
-          key: APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS,
-        })
-      );
-      return dispatch({
-        type: APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS,
-        payload: {
-          ansiblePlaybookServices: data,
-        },
-        response: data,
-      });
-    } catch (error) {
-      dispatch(
-        addToast({
-          type: 'error',
-          message: sprintf(__('Error occurred while importing app template: %s'), error.response.data.message),
-          key: APPLICATION_DEFINITION_IMPORT_FILE_FAILURE,
-        })
-      );
-      return dispatch({
-        type: APPLICATION_DEFINITION_IMPORT_FILE_FAILURE,
-        payload: {
-          error: error,
-        },
-        response: error,
-      });
-    }
+      addToast({
+        type: 'success',
+        message: sprintf(__('Sucessfully synced imported app template')),
+        key: APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS,
+      })
+    );
+    return dispatch({
+      type: APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS,
+      payload: {
+        ansiblePlaybookServices: data,
+      },
+      response: data,
+    });
+  } catch (error) {
+    dispatch(
+      addToast({
+        type: 'error',
+        message: sprintf(
+          __('Error occurred while importing app template: %s'),
+          error.response.data.message
+        ),
+        key: APPLICATION_DEFINITION_IMPORT_FILE_FAILURE,
+      })
+    );
+    return dispatch({
+      type: APPLICATION_DEFINITION_IMPORT_FILE_FAILURE,
+      payload: {
+        error,
+      },
+      response: error,
+    });
+  }
 };
diff --git a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportConstants.js b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportConstants.js
index 7251080f..964fae04 100644
--- a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportConstants.js
+++ b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportConstants.js
@@ -1,6 +1,12 @@
-export const APPLICATION_DEFINITION_IMPORT_INIT = 'INIT_APPLICATION_DEFINITION_IMPORT_INIT';
-export const APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE = 'APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE';
-export const APPLICATION_DEFINITION_IMPORT_FILE_FAILURE = 'APPLICATION_DEFINITION_IMPORT_FILE_FAILURE';
-export const APPLICATION_DEFINITION_IMPORT_FILE_REQUEST = 'APPLICATION_DEFINITION_IMPORT_FILE_REQUEST';
-export const APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS = 'APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS';
-export const APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL = 'APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL';
+export const APPLICATION_DEFINITION_IMPORT_INIT =
+  'INIT_APPLICATION_DEFINITION_IMPORT_INIT';
+export const APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE =
+  'APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE';
+export const APPLICATION_DEFINITION_IMPORT_FILE_FAILURE =
+  'APPLICATION_DEFINITION_IMPORT_FILE_FAILURE';
+export const APPLICATION_DEFINITION_IMPORT_FILE_REQUEST =
+  'APPLICATION_DEFINITION_IMPORT_FILE_REQUEST';
+export const APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS =
+  'APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS';
+export const APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL =
+  'APPLICATION_DEFINITION_IMPORT_CLOSE_ALERT_MODAL';
diff --git a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportReducer.js b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportReducer.js
index e9554b75..efb86455 100644
--- a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportReducer.js
+++ b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportReducer.js
@@ -1,12 +1,6 @@
 import Immutable from 'seamless-immutable';
 
-import {
-  cloneDeep,
-  findIndex,
-  findLastIndex,
-} from 'lodash';
-
-import { translate as __ } from 'foremanReact/common/I18n';
+import { cloneDeep, findIndex } from 'lodash';
 
 import {
   APPLICATION_DEFINITION_IMPORT_INIT,
@@ -48,29 +42,29 @@ const applicationDefinitionImportConf = (state = initialState, action) => {
     }
 
     case APPLICATION_DEFINITION_IMPORT_FILE_FAILURE: {
-       return state.merge({ error: payload.error, loading: false });
-     }
-     case APPLICATION_DEFINITION_IMPORT_FILE_REQUEST: {
-       return state.set('loading', true);
-     }
-     case APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS: {
-       let newState = {};
-       let ansibleServices = [];
-       const ansiblePlaybookServices = payload.ansiblePlaybookServices['ansible_services'];
+      return state.merge({ error: payload.error, loading: false });
+    }
+    case APPLICATION_DEFINITION_IMPORT_FILE_REQUEST: {
+      return state.set('loading', true);
+    }
+    case APPLICATION_DEFINITION_IMPORT_FILE_SUCCESS: {
+      let newState = {};
+      const ansibleServices = [];
+      const ansiblePlaybookServices =
+        payload.ansiblePlaybookServices.ansible_services;
 
-       for (var ind in ansiblePlaybookServices) {
-         const value = ansiblePlaybookServices[ind];
-         const newRow = { id: value['id'], name: value['value'], hostgroup: '' };
-         newRow.backup = cloneDeep(newRow);
-         ansibleServices.push(newRow);
-       }
+      ansiblePlaybookServices.forEach(value => {
+        const newRow = { id: value.id, name: value.value, hostgroup: '' };
+        newRow.backup = cloneDeep(newRow);
+        ansibleServices.push(newRow);
+      });
 
-       newState = {
-         ansiblePlaybookServices: ansibleServices,
-       };
+      newState = {
+        ansiblePlaybookServices: ansibleServices,
+      };
 
-       return state.merge(newState);
-     }
+      return state.merge(newState);
+    }
     default:
       return state;
   }
diff --git a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportSelectors.js b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportSelectors.js
index ebf8f567..2b54d4ad 100644
--- a/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportSelectors.js
+++ b/webpack/components/ApplicationDefinitionImport/ApplicationDefinitionImportSelectors.js
@@ -1,8 +1,15 @@
-const applicationDefinitionImportConf = state => state.foremanAcd.applicationDefinitionImportConf;
+const applicationDefinitionImportConf = state =>
+  state.foremanAcd.applicationDefinitionImportConf;
 
-export const selectEditMode = state => applicationDefinitionImportConf(state).editMode;
-export const selectColumns = state => applicationDefinitionImportConf(state).columns;
-export const selectAnsiblePlaybookServices = state => applicationDefinitionImportConf(state).ansiblePlaybookServices;
-export const selectShowAlertModal = state => applicationDefinitionImportConf(state).showAlertModal;
-export const selectAlertModalText = state => applicationDefinitionImportConf(state).alertModalText;
-export const selectAlertModalTitle = state => applicationDefinitionImportConf(state).alertModalTitle;
+export const selectEditMode = state =>
+  applicationDefinitionImportConf(state).editMode;
+export const selectColumns = state =>
+  applicationDefinitionImportConf(state).columns;
+export const selectAnsiblePlaybookServices = state =>
+  applicationDefinitionImportConf(state).ansiblePlaybookServices;
+export const selectShowAlertModal = state =>
+  applicationDefinitionImportConf(state).showAlertModal;
+export const selectAlertModalText = state =>
+  applicationDefinitionImportConf(state).alertModalText;
+export const selectAlertModalTitle = state =>
+  applicationDefinitionImportConf(state).alertModalTitle;
diff --git a/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportConfData_1.fixtures.js b/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportConfData1.fixtures.js
similarity index 71%
rename from webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportConfData_1.fixtures.js
rename to webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportConfData1.fixtures.js
index 3d7ad080..98bde2a0 100644
--- a/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportConfData_1.fixtures.js
+++ b/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportConfData1.fixtures.js
@@ -1,51 +1,43 @@
-export const applicationDefinitionImportConfData_1 = {
+export const applicationDefinitionImportConfData1 = {
   name: false,
   error: {
     errorMsg: '',
     status: '',
-    statusText: ''
+    statusText: '',
   },
   columns: [
     {
       property: 'name',
       header: {
         label: 'Service name',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 3,
           style: {
-            width: '20%'
-          }
-        }
+            width: '20%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'hostgroup',
       header: {
         label: 'Hostgroup',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 2,
           style: {
-            width: '20%'
-          }
-        }
+            width: '20%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
-    }
+        formatters: [null],
+      },
+    },
   ],
   ansiblePlaybookServices: [
     {
@@ -63,7 +55,7 @@ export const applicationDefinitionImportConfData_1 = {
           name: 'CP',
           description: '',
           type: 'computeprofile',
-          value: '1'
+          value: '1',
         },
         {
           id: 2,
@@ -71,16 +63,16 @@ export const applicationDefinitionImportConfData_1 = {
           name: 'LE',
           description: '',
           type: 'lifecycleenv',
-          value: '1'
-        }
+          value: '1',
+        },
       ],
       ansibleParameters: [
         {
           id: 0,
           name: 'dummy_var',
-          value: '0'
-        }
-      ]
+          value: '0',
+        },
+      ],
     },
     {
       id: 2,
@@ -95,35 +87,35 @@ export const applicationDefinitionImportConfData_1 = {
         {
           id: 0,
           name: 'mysqlservice',
-          value: 'mysqld'
+          value: 'mysqld',
         },
         {
           id: 1,
           name: 'mysql_port',
           value: '3306',
-          locked: true
+          locked: true,
         },
         {
           id: 2,
           name: 'dbuser',
-          value: 'webapp'
+          value: 'webapp',
         },
         {
           id: 3,
           name: 'dbname',
-          value: 'ANSAP01'
+          value: 'ANSAP01',
         },
         {
           id: 4,
           name: 'upassword',
-          value: 'Bond@007'
+          value: 'Bond@007',
         },
         {
           id: 5,
           name: 'masterpassword',
-          value: 'MySQL@007'
-        }
-      ]
-    }
-  ]
-}
+          value: 'MySQL@007',
+        },
+      ],
+    },
+  ],
+};
diff --git a/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportReducer.fixtures.js b/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportReducer.fixtures.js
index b6489a14..1cc70797 100644
--- a/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportReducer.fixtures.js
+++ b/webpack/components/ApplicationDefinitionImport/__fixtures__/applicationDefinitionImportReducer.fixtures.js
@@ -1,29 +1,27 @@
 import Immutable from 'seamless-immutable';
-import {
-   cloneDeep,
-   findIndex,
-   findLastIndex,
-} from 'lodash';
+import { cloneDeep, findIndex } from 'lodash';
 
-import {
-  applicationDefinitionImportConfData_1,
-} from '../__fixtures__/applicationDefinitionImportConfData_1.fixtures';
+import { applicationDefinitionImportConfData1 } from '../__fixtures__/applicationDefinitionImportConfData1.fixtures';
 
-export const successState = Immutable(applicationDefinitionImportConfData_1);
+export const successState = Immutable(applicationDefinitionImportConfData1);
 
 const EDIT_ROW_ID = 2;
 
-const editClone = applicationDefinitionImportConfData_1;
-const editIndex = findIndex(editClone.ansiblePlaybookServices, { id: EDIT_ROW_ID })
-editClone["ansiblePlaybookServices"][editIndex].backup = cloneDeep(editClone["ansiblePlaybookServices"][editIndex]);
+const editClone = applicationDefinitionImportConfData1;
+const editIndex = findIndex(editClone.ansiblePlaybookServices, {
+  id: EDIT_ROW_ID,
+});
+editClone.ansiblePlaybookServices[editIndex].backup = cloneDeep(
+  editClone.ansiblePlaybookServices[editIndex]
+);
 export const editState = Immutable(editClone);
 
 // Payload Data
-export const initApplicationDefinitionImportPayload = applicationDefinitionImportConfData_1;
+export const initApplicationDefinitionImportPayload = applicationDefinitionImportConfData1;
 export const changeEditServicePayload = {
-  value: "helloworld",
-  property: "name",
+  value: 'helloworld',
+  property: 'name',
   rowData: {
     id: EDIT_ROW_ID,
-  }
+  },
 };
diff --git a/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImport.test.js b/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImport.test.js
index dd97e64b..f3af90c2 100644
--- a/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImport.test.js
+++ b/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImport.test.js
@@ -4,15 +4,45 @@ import ApplicationDefinitionImport from '../ApplicationDefinitionImport';
 
 const noop = () => {};
 
+const baseFixtures = {
+  location: 'Default Location',
+  organization: 'Default Organization',
+  hostgroups: { '1': 'alma8' },
+  ansiblePlaybookServices: [],
+  initApplicationDefinitionImport: noop,
+  addApplicationDefinitionImportService: noop,
+  closeAlertModal: noop,
+  changeEditApplicationDefinitionImportService: noop,
+  handleImportAnsiblePlaybook: noop,
+};
+
 const fixtures = {
-  'should render application definition import': {
-      location: "Default Location",
-      organization: "Default Organization",
-      hostgroups: [],
-      ansiblePlaybookServices: [],
-    initApplicationDefinitionImport: noop,
-    addApplicationDefinitionImportService: noop,
-    closeAlertModal: noop,
+  'should render application definition import': baseFixtures,
+
+  'should render application definition import with loaded archive': {
+    ...baseFixtures,
+    ansiblePlaybookServices: [
+      {
+        id: 1,
+        name: 'Service1',
+        hostgroup: '',
+        backup: {
+          id: 1,
+          name: 'Service1',
+          hostgroup: '',
+        },
+      },
+      {
+        id: 2,
+        name: 'Service2',
+        hostgroup: '',
+        backup: {
+          id: 2,
+          name: 'Service2',
+          hostgroup: '',
+        },
+      },
+    ],
   },
 };
 
diff --git a/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImportReducer.test.js b/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImportReducer.test.js
index 444ab7db..714c4357 100644
--- a/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImportReducer.test.js
+++ b/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImportReducer.test.js
@@ -2,7 +2,6 @@ import { testReducerSnapshotWithFixtures } from 'react-redux-test-utils';
 import reducer, { initialState } from '../ApplicationDefinitionImportReducer';
 
 import {
-  successState,
   editState,
   initApplicationDefinitionImportPayload,
   changeEditServicePayload,
@@ -11,7 +10,6 @@ import {
 import {
   APPLICATION_DEFINITION_IMPORT_INIT,
   APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CHANGE,
-  APPLICATION_DEFINITION_IMPORT_SERVICE_EDIT_CANCEL,
 } from '../ApplicationDefinitionImportConstants';
 
 const fixtures = {
diff --git a/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImportSelectors.test.js b/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImportSelectors.test.js
index 34672afb..86134c97 100644
--- a/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImportSelectors.test.js
+++ b/webpack/components/ApplicationDefinitionImport/__tests__/ApplicationDefinitionImportSelectors.test.js
@@ -6,9 +6,7 @@ import {
   selectColumns,
 } from '../ApplicationDefinitionImportSelectors';
 
-import {
-  applicationDefinitionImportConfData_1,
-} from '../__fixtures__/applicationDefinitionImportConfData_1.fixtures';
+import { applicationDefinitionImportConfData1 } from '../__fixtures__/applicationDefinitionImportConfData1.fixtures';
 
 const stateFactory = obj => ({
   foremanAcd: {
@@ -17,12 +15,14 @@ const stateFactory = obj => ({
 });
 
 const fixtures = {
-  'should return editMode from applicationDefinitionImportConfData_1 fixtures': () =>
-    selectEditMode(stateFactory(applicationDefinitionImportConfData_1)),
-  'should return services from applicationDefinitionImportConfData_1 fixtures': () =>
-    selectAnsiblePlaybookServices(stateFactory(applicationDefinitionImportConfData_1)),
-  'should return columns from applicationDefinitionImportConfData_1 fixtures': () =>
-    selectColumns(stateFactory(applicationDefinitionImportConfData_1)),
+  'should return editMode from applicationDefinitionImportConfData1 fixtures': () =>
+    selectEditMode(stateFactory(applicationDefinitionImportConfData1)),
+  'should return services from applicationDefinitionImportConfData1 fixtures': () =>
+    selectAnsiblePlaybookServices(
+      stateFactory(applicationDefinitionImportConfData1)
+    ),
+  'should return columns from applicationDefinitionImportConfData1 fixtures': () =>
+    selectColumns(stateFactory(applicationDefinitionImportConfData1)),
 };
 
 describe('ApplicationDefinitionImportSelectors', () =>
diff --git a/webpack/components/ApplicationDefinitionImport/__tests__/__snapshots__/ApplicationDefinitionImport.test.js.snap b/webpack/components/ApplicationDefinitionImport/__tests__/__snapshots__/ApplicationDefinitionImport.test.js.snap
index 2925a9d5..4eaf34ec 100644
--- a/webpack/components/ApplicationDefinitionImport/__tests__/__snapshots__/ApplicationDefinitionImport.test.js.snap
+++ b/webpack/components/ApplicationDefinitionImport/__tests__/__snapshots__/ApplicationDefinitionImport.test.js.snap
@@ -2,8 +2,6 @@
 
 exports[`ApplicationDefinitionImport should render application definition import 1`] = `
 <span>
-  <Component />
-  <Component />
   <MessageDialog
     accessibleDescription=""
     accessibleName=""
@@ -60,3 +58,119 @@ exports[`ApplicationDefinitionImport should render application definition import
   />
 </span>
 `;
+
+exports[`ApplicationDefinitionImport should render application definition import with loaded archive 1`] = `
+<span>
+  <MessageDialog
+    accessibleDescription=""
+    accessibleName=""
+    className=""
+    enforceFocus={true}
+    footer={null}
+    icon={
+      <Icon
+        name="error-circle-o"
+        type="pf"
+      />
+    }
+    onHide={[Function]}
+    primaryAction={[Function]}
+    primaryActionButtonBsStyle="danger"
+    primaryActionButtonContent="OK"
+    primaryContent=""
+    secondaryAction={[Function]}
+    secondaryActionButtonBsStyle="default"
+    secondaryActionButtonContent={null}
+    secondaryContent={null}
+    show={false}
+    title=""
+  />
+  <div>
+    <CommonForm
+      className="custom-file-upload"
+      label="Application Definition file"
+    >
+      <input
+        onChange={[Function]}
+        type="file"
+      />
+    </CommonForm>
+    <CommonForm>
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="default"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Import
+         
+      </Button>
+    </CommonForm>
+  </div>
+  <div
+    className="form-group"
+  >
+    <TablePfProvider
+      bordered={true}
+      className=""
+      columns={Array []}
+      components={
+        Object {
+          "body": Object {
+            "cell": [Function],
+          },
+        }
+      }
+      condensed={false}
+      dataTable={true}
+      hover={true}
+      inlineEdit={false}
+      striped={true}
+    >
+      <Header
+        headerRows={
+          Array [
+            Array [],
+          ]
+        }
+      />
+      <Body
+        onRow={[Function]}
+        rowKey="id"
+        rows={
+          Array [
+            Object {
+              "backup": Object {
+                "hostgroup": "",
+                "id": 1,
+                "name": "Service1",
+              },
+              "hostgroup": "",
+              "id": 1,
+              "name": "Service1",
+            },
+            Object {
+              "backup": Object {
+                "hostgroup": "",
+                "id": 2,
+                "name": "Service2",
+              },
+              "hostgroup": "",
+              "id": 2,
+              "name": "Service2",
+            },
+          ]
+        }
+      />
+    </TablePfProvider>
+  </div>
+  <RailsData
+    key="applications_definition_import"
+    parameter="services"
+    value="[{\\"id\\":1,\\"name\\":\\"Service1\\",\\"hostgroup\\":\\"\\",\\"backup\\":{\\"id\\":1,\\"name\\":\\"Service1\\",\\"hostgroup\\":\\"\\"}},{\\"id\\":2,\\"name\\":\\"Service2\\",\\"hostgroup\\":\\"\\",\\"backup\\":{\\"id\\":2,\\"name\\":\\"Service2\\",\\"hostgroup\\":\\"\\"}}]"
+    view="app_definition_import"
+  />
+</span>
+`;
diff --git a/webpack/components/ApplicationDefinitionImport/__tests__/__snapshots__/ApplicationDefinitionImportSelectors.test.js.snap b/webpack/components/ApplicationDefinitionImport/__tests__/__snapshots__/ApplicationDefinitionImportSelectors.test.js.snap
index d8d9dfa7..472c9195 100644
--- a/webpack/components/ApplicationDefinitionImport/__tests__/__snapshots__/ApplicationDefinitionImportSelectors.test.js.snap
+++ b/webpack/components/ApplicationDefinitionImport/__tests__/__snapshots__/ApplicationDefinitionImportSelectors.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ApplicationDefinitionImportSelectors should return columns from applicationDefinitionImportConfData_1 fixtures 1`] = `
+exports[`ApplicationDefinitionImportSelectors should return columns from applicationDefinitionImportConfData1 fixtures 1`] = `
 Array [
   Object {
     "cell": Object {
@@ -45,9 +45,9 @@ Array [
 ]
 `;
 
-exports[`ApplicationDefinitionImportSelectors should return editMode from applicationDefinitionImportConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationDefinitionImportSelectors should return editMode from applicationDefinitionImportConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationDefinitionImportSelectors should return services from applicationDefinitionImportConfData_1 fixtures 1`] = `
+exports[`ApplicationDefinitionImportSelectors should return services from applicationDefinitionImportConfData1 fixtures 1`] = `
 Array [
   Object {
     "ansibleGroup": "webservers",
diff --git a/webpack/components/ApplicationInstance/ApplicationInstance.js b/webpack/components/ApplicationInstance/ApplicationInstance.js
index e816698c..158d10c9 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstance.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstance.js
@@ -1,16 +1,17 @@
-import React, { useState } from 'react'
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Icon,
   Button,
   MessageDialog,
+  Table,
+  FormControl,
+  inlineEditFormatterFactory,
 } from 'patternfly-react';
 import * as resolve from 'table-resolver';
+import $ from 'jquery';
 import ForemanModal from 'foremanReact/components/ForemanModal';
-import {
-  sprintf,
-  translate as __
-} from 'foremanReact/common/I18n';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import Select from 'foremanReact/components/common/forms/Select';
 import ParameterSelection from '../ParameterSelection';
 import ExistingHostSelection from '../ExistingHostSelection';
@@ -19,14 +20,7 @@ import DeleteTableEntry from '../common/DeleteTableEntry';
 import RailsData from '../common/RailsData';
 import AppDefinitionSelector from './components/AppDefinitionSelector';
 import ServiceCounter from './components/ServiceCounter';
-import { arrayToObject } from '../../helper';
-import { EasyHeaderFormatter } from '../../helper';
-
-import {
-  Table,
-  FormControl,
-  inlineEditFormatterFactory,
-} from 'patternfly-react';
+import { arrayToObject, EasyHeaderFormatter } from '../../helper';
 
 import {
   PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
@@ -34,67 +28,84 @@ import {
 } from '../ParameterSelection/ParameterSelectionConstants';
 
 class ApplicationInstance extends React.Component {
-
-  constructor(props) {
-    super(props);
-  }
-
-  isEditing({rowData}) {
-    return (rowData.backup !== undefined);
+  static isEditing({ rowData }) {
+    return rowData.backup !== undefined;
   }
 
   changeDataAllowed() {
-    return this.props.editMode || this.props.appDefinition.id == ''
+    return this.props.editMode || this.props.appDefinition.id === '';
   }
 
   validateParameters() {
     let result = true;
-    let msg = "";
+    let msg = '';
 
     this.props.hosts.forEach(h => {
-      if (h.foremanParameters.map(e => e.value).filter(i => i == "").length > 0) {
+      if (
+        h.foremanParameters.map(e => e.value).filter(i => i === '').length > 0
+      ) {
         result = false;
 
-        if (msg == "") {
-          msg += __("For some hosts the values for some parameters are missing. Check the values for these hosts:\n");
+        if (msg === '') {
+          msg += __(
+            'For some hosts the values for some parameters are missing. Check the values for these hosts:\n'
+          );
         }
-        msg += "- "+ h.hostname +"\n";
+        msg += `- ${h.hostname}\n`;
       }
     });
 
-    const invalidMinServices = this.props.services.filter(s => (Number(s.minCount) != 0) && (s.currentCount < s.minCount));
-    const invalidMaxServices = this.props.services.filter(s => (Number(s.maxCount) != 0) && (s.currentCount > s.maxCount));
+    const invalidMinServices = this.props.services.filter(
+      s => Number(s.minCount) !== 0 && s.currentCount < s.minCount
+    );
+    const invalidMaxServices = this.props.services.filter(
+      s => Number(s.maxCount) !== 0 && s.currentCount > s.maxCount
+    );
 
     if (invalidMinServices.length > 0 || invalidMaxServices.length > 0) {
       result = false;
 
-      if (msg != "") {
-        msg += "\n";
+      if (msg !== '') {
+        msg += '\n';
       }
 
-      msg += __("Unachieved service counts:");
-      msg += "\n";
-
-      invalidMinServices.map(s => { msg += sprintf(
-        __(`- service ${s.name} expects at ${s.minCount} least configured hosts\n`)
-      )});
-
-      invalidMaxServices.map(s => { msg += sprintf(
-        __(`- service ${s.name} expects no more than ${s.axCount} configured hosts\n`)
-      )});
+      msg += __('Unachieved service counts:');
+      msg += '\n';
+
+      invalidMinServices.forEach(s => {
+        msg += sprintf(
+          __(
+            `- service ${s.name} expects at ${s.minCount} least configured hosts\n`
+          )
+        );
+      });
+
+      invalidMaxServices.forEach(s => {
+        msg += sprintf(
+          __(
+            `- service ${s.name} expects no more than ${s.axCount} configured hosts\n`
+          )
+        );
+      });
     }
 
     return {
       validateResult: result,
-      validateMsg: msg
-    }
+      validateMsg: msg,
+    };
   }
 
   componentDidMount() {
     const {
-      data: { mode, appDefinition, hosts, ansibleVarsAll, appDefinitionUrl, supportedPlugins },
+      data: {
+        mode,
+        appDefinition,
+        hosts,
+        ansibleVarsAll,
+        appDefinitionUrl,
+        supportedPlugins,
+      },
       initApplicationInstance,
-      addApplicationInstanceHost,
       deleteApplicationInstanceHost,
       activateEditApplicationInstanceHost,
       changeEditApplicationInstanceHost,
@@ -107,36 +118,47 @@ class ApplicationInstance extends React.Component {
       loadApplicationDefinition(appDefinition.id, { url: appDefinitionUrl });
     }
 
-    const already_deployed_msg = __("This is an already deployed host. Changing the parameters is not possible!");
+    const alreadyDeployedMsg = __(
+      'This is an already deployed host. Changing the parameters is not possible!'
+    );
 
     const inlineEditButtonsFormatter = inlineEditFormatterFactory({
       isEditing: additionalData => this.props.editMode,
       renderValue: (value, additionalData) => (
         <td style={{ padding: '2px' }}>
-          { additionalData.rowData.isExistingHost == true ? (
-            <Icon style={{marginRight: 8, marginLeft: 2}} type="pf" name="info" title={already_deployed_msg} />
-          ) : (<span></span>)}
+          {additionalData.rowData.isExistingHost === true ? (
+            <Icon
+              style={{ marginRight: 8, marginLeft: 2 }}
+              type="pf"
+              name="info"
+              title={alreadyDeployedMsg}
+            />
+          ) : (
+            <span />
+          )}
           <Button
             bsStyle="default"
             onClick={() => activateEditApplicationInstanceHost(additionalData)}
           >
-            <Icon type="pf" name="edit" title={__("Edit entry")} />
+            <Icon type="pf" name="edit" title={__('Edit entry')} />
           </Button>
           &nbsp;
-          { additionalData.rowData.isExistingHost == false ? (
+          {additionalData.rowData.isExistingHost === false ? (
             <Button
               bsStyle="default"
               onClick={() => openForemanParameterSelectionModal(additionalData)}
             >
-              <Icon type="pf" name="settings" title={__("Change parameters")} />
+              <Icon type="pf" name="settings" title={__('Change parameters')} />
             </Button>
-          ) : (<span></span>)}
+          ) : (
+            <span />
+          )}
           &nbsp;
           <Button
             bsStyle="default"
             onClick={() => openAnsibleParameterSelectionModal(additionalData)}
           >
-            <span title={__("Change ansible variables")}>A</span>
+            <span title={__('Change ansible variables')}>A</span>
           </Button>
           &nbsp;
           <DeleteTableEntry
@@ -149,18 +171,27 @@ class ApplicationInstance extends React.Component {
       ),
       renderEdit: (value, additionalData) => (
         <td style={{ padding: '2px' }}>
-          { additionalData.rowData.isExistingHost == true ? (
-            <Icon style={{marginRight: 8, marginLeft: 2}} type="pf" name="info" title={already_deployed_msg} />
-          ) : (<span></span>)}
+          {additionalData.rowData.isExistingHost === true ? (
+            <Icon
+              style={{ marginRight: 8, marginLeft: 2 }}
+              type="pf"
+              name="info"
+              title={alreadyDeployedMsg}
+            />
+          ) : (
+            <span />
+          )}
           <Button bsStyle="default" disabled>
-            <Icon type="pf" name={__("edit")} />
+            <Icon type="pf" name={__('edit')} />
           </Button>
           &nbsp;
-          { additionalData.rowData.isExistingHost == false ? (
+          {additionalData.rowData.isExistingHost === false ? (
             <Button bsStyle="default" disabled>
-              <Icon type="pf" name={__("settings")} />
+              <Icon type="pf" name={__('settings')} />
             </Button>
-          ) : (<span></span>)}
+          ) : (
+            <span />
+          )}
           &nbsp;
           <Button bsStyle="default" disabled>
             <span>A</span>
@@ -168,12 +199,12 @@ class ApplicationInstance extends React.Component {
           &nbsp;
           <DeleteTableEntry
             hidden={false}
-            disabled={true}
+            disabled
             onDeleteTableEntry={deleteApplicationInstanceHost}
             additionalData={additionalData}
           />
         </td>
-      )
+      ),
     });
     this.inlineEditButtonsFormatter = inlineEditButtonsFormatter;
 
@@ -185,12 +216,14 @@ class ApplicationInstance 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 => changeEditApplicationInstanceHost(e.target.value, additionalData) }
+            onBlur={e =>
+              changeEditApplicationInstanceHost(e.target.value, additionalData)
+            }
           />
         </td>
       ),
@@ -198,45 +231,67 @@ class ApplicationInstance extends React.Component {
         <td className="editing">
           <Select
             value={value.toString()}
-            onChange={e => changeEditApplicationInstanceHost(e.target.value, additionalData) }
+            onChange={e =>
+              changeEditApplicationInstanceHost(e.target.value, additionalData)
+            }
             options={options}
             allowClear
             key="key"
           />
         </td>
-      )
+      ),
     };
 
     const inlineEditFormatter = inlineEditFormatterFactory({
-      isEditing: additionalData => this.isEditing(additionalData),
+      isEditing: additionalData => this.constructor.isEditing(additionalData),
       renderValue: (value, additionalData) => {
         let prettyValue = value;
-        if (additionalData.property == 'service') {
-          const serviceList = arrayToObject(this.props.services, "id", "name");
+        if (additionalData.property === 'service') {
+          const serviceList = arrayToObject(this.props.services, 'id', 'name');
           prettyValue = serviceList[value];
         }
-        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+        return inlineEditFormatterImpl.renderValue(prettyValue, additionalData);
       },
       renderEdit: (value, additionalData) => {
         let prettyValue = value;
-        if (additionalData.property == 'service') {
-          const availableServices = this.props.services.filter(service => ((Number(service['maxCount']) == 0) || (service['currentCount'] < service['maxCount'])));
-          const serviceList = arrayToObject(availableServices, "id", "name");
+        if (additionalData.property === 'service') {
+          const availableServices = this.props.services.filter(
+            service =>
+              Number(service.maxCount) === 0 ||
+              service.currentCount < service.maxCount
+          );
+          const serviceList = arrayToObject(availableServices, 'id', 'name');
 
           if (additionalData.rowData.newEntry === true) {
-            return inlineEditFormatterImpl.renderEditSelect(value, additionalData, serviceList);
+            return inlineEditFormatterImpl.renderEditSelect(
+              value,
+              additionalData,
+              serviceList
+            );
           }
           prettyValue = serviceList[value];
-          return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+          return inlineEditFormatterImpl.renderValue(
+            prettyValue,
+            additionalData
+          );
         }
-        if (additionalData.property == 'hostname') {
+        if (additionalData.property === 'hostname') {
           if (additionalData.rowData.newEntry === true) {
-            return inlineEditFormatterImpl.renderEditText(value, additionalData);
+            return inlineEditFormatterImpl.renderEditText(
+              value,
+              additionalData
+            );
           }
-          return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+          return inlineEditFormatterImpl.renderValue(
+            prettyValue,
+            additionalData
+          );
         }
-        return inlineEditFormatterImpl.renderEditText(prettyValue, additionalData);
-      }
+        return inlineEditFormatterImpl.renderEditText(
+          prettyValue,
+          additionalData
+        );
+      },
     });
     this.inlineEditFormatter = inlineEditFormatter;
 
@@ -247,14 +302,24 @@ class ApplicationInstance extends React.Component {
       supportedPlugins,
       this.headerFormatter,
       this.inlineEditFormatter,
-      this.inlineEditButtonsFormatter,
+      this.inlineEditButtonsFormatter
     );
-  };
+  }
 
   render() {
     const {
-      data: { mode, applications, organization, location, foremanDataUrl, appDefinitionUrl },
-      showAlertModal, alertModalText, alertModalTitle, closeAlertModal,
+      data: {
+        mode,
+        applications,
+        organization,
+        location,
+        foremanDataUrl,
+        appDefinitionUrl,
+      },
+      showAlertModal,
+      alertModalText,
+      alertModalTitle,
+      closeAlertModal,
       appDefinition,
       services,
       hosts,
@@ -272,13 +337,15 @@ class ApplicationInstance extends React.Component {
       loadApplicationDefinition,
     } = this.props;
 
-    let { validateResult, validateMsg } = this.validateParameters();
+    const { validateResult, validateMsg } = this.validateParameters();
 
-    if (validateResult == false) {
-      $('input[type="submit"][name="commit"]').attr("disabled", true);
+    /* eslint-disable jquery/no-attr */
+    if (validateResult === false) {
+      $('input[type="submit"][name="commit"]').attr('disabled', true);
     } else {
-      $('input[type="submit"][name="commit"]').attr("disabled", false);
+      $('input[type="submit"][name="commit"]').attr('disabled', false);
     }
+    /* eslint-enable jquery/no-attr */
 
     return (
       <span>
@@ -287,7 +354,7 @@ class ApplicationInstance extends React.Component {
           onHide={closeAlertModal}
           primaryAction={closeAlertModal}
           primaryActionButtonContent={__('OK')}
-          primaryActionButtonBsStyle={"danger"}
+          primaryActionButtonBsStyle="danger"
           icon={<Icon type="pf" name="error-circle-o" />}
           title={alertModalTitle}
           primaryContent={alertModalText}
@@ -295,26 +362,28 @@ class ApplicationInstance extends React.Component {
         <div className="service-counter">
           <ServiceCounter
             title="Service counts"
-            serviceList={ services }
-            hostList={ hosts }
+            serviceList={services}
+            hostList={hosts}
           />
         </div>
         <div>
           <AppDefinitionSelector
             label="Application Definition"
-            hidden={ false }
-            editable={ mode == 'newInstance' }
-            viewText={ appDefinition.name }
-            options={ applications }
-            onChange={ loadApplicationDefinition }
-            selectValue={ appDefinition.id.toString() }
-            additionalData={{url: appDefinitionUrl}}
+            hidden={false}
+            editable={mode === 'newInstance'}
+            viewText={appDefinition.name}
+            options={applications}
+            onChange={loadApplicationDefinition}
+            selectValue={appDefinition.id.toString()}
+            additionalData={{ url: appDefinitionUrl }}
           />
-          {appDefinition.id == '' ? (
-          <div style={{ paddingTop: 25 }}>
-            <pre>{ "App Definition can't be blank" }</pre>
-          </div>
-        ) : (<div></div>)}
+          {appDefinition.id === '' ? (
+            <div style={{ paddingTop: 25 }}>
+              <pre>App Definition can&apos;t be blank</pre>
+            </div>
+          ) : (
+            <div />
+          )}
         </div>
         <div className="form-group">
           <Table.PfProvider
@@ -327,8 +396,8 @@ class ApplicationInstance extends React.Component {
             components={{
               body: {
                 row: Table.InlineEditRow,
-                cell: cellProps => cellProps.children
-              }
+                cell: cellProps => cellProps.children,
+              },
             }}
           >
             <Table.Header headerRows={resolve.headerRows({ columns })} />
@@ -337,38 +406,48 @@ class ApplicationInstance extends React.Component {
               rowKey="id"
               onRow={(rowData, { rowIndex }) => ({
                 role: 'row',
-                isEditing: () => this.isEditing({ rowData }),
-                onCancel: () => cancelEditApplicationInstanceHost({ rowData, rowIndex }),
-                onConfirm: () => confirmEditApplicationInstanceHost({ rowData, rowIndex, appDefinition }),
-                last: rowIndex === services.length - 1
+                isEditing: () => this.constructor.isEditing({ rowData }),
+                onCancel: () =>
+                  cancelEditApplicationInstanceHost({ rowData, rowIndex }),
+                onConfirm: () =>
+                  confirmEditApplicationInstanceHost({
+                    rowData,
+                    rowIndex,
+                    appDefinition,
+                  }),
+                last: rowIndex === services.length - 1,
               })}
             />
           </Table.PfProvider>
           <AddTableEntry
-            hidden={ false }
-            disabled={ this.changeDataAllowed() }
-            onAddTableEntry={ addApplicationInstanceHost }
+            hidden={false}
+            disabled={this.changeDataAllowed()}
+            onAddTableEntry={addApplicationInstanceHost}
           />
           <span style={{ marginLeft: 10 }}>
             <Button
               bsStyle="default"
-              disabled={ this.changeDataAllowed() }
-              onClick={() => openAddExistingHostsModal({
-                isAllGroup: true
-              })}
+              disabled={this.changeDataAllowed()}
+              onClick={() =>
+                openAddExistingHostsModal({
+                  isAllGroup: true,
+                })
+              }
             >
-              <Icon title={__("Add existing hosts")} type="pf" name="server" />
+              <Icon title={__('Add existing hosts')} type="pf" name="server" />
             </Button>
           </span>
           <span style={{ marginLeft: 30 }}>
-            Ansible group vars 'all':
+            Ansible group vars &lsquo;all&rsquo;:
             <Button
               style={{ marginLeft: 10 }}
               bsStyle="default"
-              disabled={ this.changeDataAllowed() }
-              onClick={() => openAnsibleParameterSelectionModal({
-                isAllGroup: true
-              })}
+              disabled={this.changeDataAllowed()}
+              onClick={() =>
+                openAnsibleParameterSelectionModal({
+                  isAllGroup: true,
+                })
+              }
             >
               <span title={__("Change ansible variables for 'all'")}>A</span>
             </Button>
@@ -378,27 +457,48 @@ class ApplicationInstance extends React.Component {
           <ForemanModal
             id="AppInstanceForemanParamSelection"
             dialogClassName="param_selection_modal"
-            title={__("Foreman Parameter specification for Application Instance")}
+            title={__(
+              'Foreman Parameter specification for Application Instance'
+            )}
           >
             <ForemanModal.Header closeButton={false}>
-              {__("Parameter specification")}
+              {__('Parameter specification')}
             </ForemanModal.Header>
             {this.props.parametersData ? (
               <ParameterSelection
-                editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
-                paramType={ PARAMETER_SELECTION_PARAM_TYPE_FOREMAN }
-                hiddenParameterTypes={ hiddenForemanParameterTypes }
-                location={ location }
-                organization={ organization }
-                paramDataUrl= { foremanDataUrl }
-                data={ this.props.parametersData }
+                editModeCallback={hide =>
+                  changeParameterSelectionMode({ mode: hide })
+                }
+                paramType={PARAMETER_SELECTION_PARAM_TYPE_FOREMAN}
+                hiddenParameterTypes={hiddenForemanParameterTypes}
+                location={location}
+                organization={organization}
+                paramDataUrl={foremanDataUrl}
+                data={this.props.parametersData}
               />
-            ) : (<span>Empty</span>)
-            }
+            ) : (
+              <span>Empty</span>
+            )}
             <ForemanModal.Footer>
               <div>
-                <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeForemanParameterSelectionModal({ mode: 'save' })}>{__("Save")}</Button>
-                <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeForemanParameterSelectionModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
+                <Button
+                  bsStyle="primary"
+                  disabled={this.props.paramEditMode}
+                  onClick={() =>
+                    closeForemanParameterSelectionModal({ mode: 'save' })
+                  }
+                >
+                  {__('Save')}
+                </Button>
+                <Button
+                  bsStyle="default"
+                  disabled={this.props.paramEditMode}
+                  onClick={() =>
+                    closeForemanParameterSelectionModal({ mode: 'cancel' })
+                  }
+                >
+                  {__('Cancel')}
+                </Button>
               </div>
             </ForemanModal.Footer>
           </ForemanModal>
@@ -407,25 +507,44 @@ class ApplicationInstance extends React.Component {
           <ForemanModal
             id="AppInstanceAnsibleParamSelection"
             dialogClassName="param_selection_modal"
-            title={__("Ansible group variables for Application Instance")}
+            title={__('Ansible group variables for Application Instance')}
           >
             <ForemanModal.Header closeButton={false}>
-              {__("Parameter specification")}
+              {__('Parameter specification')}
             </ForemanModal.Header>
             {this.props.parametersData ? (
               <ParameterSelection
-                editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
-                paramType={ PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE }
-                location={ location }
-                organization={ organization }
-                data={ this.props.parametersData }
+                editModeCallback={hide =>
+                  changeParameterSelectionMode({ mode: hide })
+                }
+                paramType={PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE}
+                location={location}
+                organization={organization}
+                data={this.props.parametersData}
               />
-            ) : (<span>Empty</span>)
-            }
+            ) : (
+              <span>Empty</span>
+            )}
             <ForemanModal.Footer>
               <div>
-                <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeAnsibleParameterSelectionModal({ mode: 'save' })}>{__("Save")}</Button>
-                <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeAnsibleParameterSelectionModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
+                <Button
+                  bsStyle="primary"
+                  disabled={this.props.paramEditMode}
+                  onClick={() =>
+                    closeAnsibleParameterSelectionModal({ mode: 'save' })
+                  }
+                >
+                  {__('Save')}
+                </Button>
+                <Button
+                  bsStyle="default"
+                  disabled={this.props.paramEditMode}
+                  onClick={() =>
+                    closeAnsibleParameterSelectionModal({ mode: 'cancel' })
+                  }
+                >
+                  {__('Cancel')}
+                </Button>
               </div>
             </ForemanModal.Footer>
           </ForemanModal>
@@ -434,92 +553,124 @@ class ApplicationInstance extends React.Component {
           <ForemanModal
             id="AppInstanceAddExistingHosts"
             dialogClassName="add_existing_hosts_modal"
-            title={__("Add existing hosts to an Application Instance")}
+            title={__('Add existing hosts to an Application Instance')}
           >
             <ForemanModal.Header closeButton={false}>
-              {__("Existing hosts selection")}
+              {__('Existing hosts selection')}
             </ForemanModal.Header>
             <ExistingHostSelection
-              location={ location }
-              organization={ organization }
-              services={ services }
-              allHosts={ this.props.hosts }
+              location={location}
+              organization={organization}
+              services={services}
+              allHosts={this.props.hosts}
             />
             <ForemanModal.Footer>
               <div>
-                <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeAddExistingHostsModal({ mode: 'save' })}>{__("Save")}</Button>
-                <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeAddExistingHostsModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
+                <Button
+                  bsStyle="primary"
+                  disabled={this.props.paramEditMode}
+                  onClick={() => closeAddExistingHostsModal({ mode: 'save' })}
+                >
+                  {__('Save')}
+                </Button>
+                <Button
+                  bsStyle="default"
+                  disabled={this.props.paramEditMode}
+                  onClick={() => closeAddExistingHostsModal({ mode: 'cancel' })}
+                >
+                  {__('Cancel')}
+                </Button>
               </div>
             </ForemanModal.Footer>
           </ForemanModal>
         </div>
-        {validateResult == false ? (
+        {validateResult === false ? (
           <div style={{ paddingTop: 25 }}>
-            <pre>{ validateMsg }</pre>
+            <pre>{validateMsg}</pre>
           </div>
-        ) : (<div></div>)}
+        ) : (
+          <div />
+        )}
         <RailsData
-          key='application_instance_hosts_data'
-          view='app_instance'
-          parameter='hosts'
+          key="application_instance_hosts_data"
+          view="app_instance"
+          parameter="hosts"
           value={JSON.stringify(this.props.hosts)}
         />
         <RailsData
-          key='application_instance_ansible_data'
-          view='app_instance'
-          parameter='ansible_vars_all'
+          key="application_instance_ansible_data"
+          view="app_instance"
+          parameter="ansible_vars_all"
           value={JSON.stringify(this.props.ansibleVarsAll)}
         />
       </span>
-    )};
+    );
+  }
 }
 
 ApplicationInstance.defaultProps = {
-  error: {},
-  showAlertModal: false,
   alertModalText: '',
   alertModalTitle: '',
-  appDefinition: { "id": '', "name": '' },
-  editMode: false,
-  services: [],
-  hosts: [],
   ansibleVarsAll: [],
-  parametersData: {},
+  appDefinition: { id: '', name: '' },
   columns: [],
+  data: {
+    appDefinitionUrl: '',
+    appDefinition: undefined,
+    applications: undefined,
+    foremanDataUrl: '',
+    supportedPlugins: {},
+  },
+  editMode: false,
   hiddenForemanParameterTypes: [],
-  editParamsOfRowId: null,
+  hosts: [],
+  parametersData: {},
   paramEditMode: false,
-}
+  services: [],
+  showAlertModal: false,
+};
 
 ApplicationInstance.propTypes = {
-  initApplicationInstance: PropTypes.func,
-  showAlertModal: PropTypes.bool,
   alertModalText: PropTypes.string,
   alertModalTitle: PropTypes.string,
-  editMode: PropTypes.bool.isRequired,
-  services: PropTypes.array,
+  ansibleVarsAll: PropTypes.array,
   appDefinition: PropTypes.object,
   columns: PropTypes.array,
+  data: PropTypes.shape({
+    appDefinitionUrl: PropTypes.string,
+    ansibleVarsAll: PropTypes.array.isRequired,
+    appDefinition: PropTypes.object,
+    applications: PropTypes.object,
+    foremanDataUrl: PropTypes.string,
+    hosts: PropTypes.array.isRequired,
+    location: PropTypes.string.isRequired,
+    mode: PropTypes.string.isRequired,
+    organization: PropTypes.string.isRequired,
+    supportedPlugins: PropTypes.object,
+  }),
+  editMode: PropTypes.bool,
   hiddenForemanParameterTypes: PropTypes.array,
   hosts: PropTypes.array,
-  ansibleVarsAll: PropTypes.array,
-  closeAlertModal: PropTypes.func,
-  loadApplicationDefinition: PropTypes.func,
-  addApplicationInstanceHost: PropTypes.func,
-  deleteApplicationInstanceHost: PropTypes.func,
-  activateEditApplicationInstanceHost: PropTypes.func,
-  confirmEditApplicationInstanceHost: PropTypes.func,
-  cancelEditApplicationInstanceHost: PropTypes.func,
-  changeEditApplicationInstanceHost: PropTypes.func,
-  openForemanParameterSelectionModal: PropTypes.func,
-  closeForemanParameterSelectionModal: PropTypes.func,
-  openAnsibleParameterSelectionModal: PropTypes.func,
-  closeAnsibleParameterSelectionModal: PropTypes.func,
-  openAddExistingHostsModal: PropTypes.func,
-  closeAddExistingHostsModal: PropTypes.func,
-  changeParameterSelectionMode: PropTypes.func,
   parametersData: PropTypes.object,
   paramEditMode: PropTypes.bool,
+  services: PropTypes.array,
+  showAlertModal: PropTypes.bool,
+  activateEditApplicationInstanceHost: PropTypes.func.isRequired,
+  addApplicationInstanceHost: PropTypes.func.isRequired,
+  cancelEditApplicationInstanceHost: PropTypes.func.isRequired,
+  changeEditApplicationInstanceHost: PropTypes.func.isRequired,
+  changeParameterSelectionMode: PropTypes.func.isRequired,
+  closeAddExistingHostsModal: PropTypes.func.isRequired,
+  closeAlertModal: PropTypes.func.isRequired,
+  closeAnsibleParameterSelectionModal: PropTypes.func.isRequired,
+  closeForemanParameterSelectionModal: PropTypes.func.isRequired,
+  confirmEditApplicationInstanceHost: PropTypes.func.isRequired,
+  deleteApplicationInstanceHost: PropTypes.func.isRequired,
+  initApplicationInstance: PropTypes.func.isRequired,
+  loadApplicationDefinition: PropTypes.func.isRequired,
+  openForemanParameterSelectionModal: PropTypes.func.isRequired,
+  openAnsibleParameterSelectionModal: PropTypes.func.isRequired,
+  openAddExistingHostsModal: PropTypes.func.isRequired,
 };
 
 export default ApplicationInstance;
diff --git a/webpack/components/ApplicationInstance/ApplicationInstanceActions.js b/webpack/components/ApplicationInstance/ApplicationInstanceActions.js
index 141f5174..1e03f40e 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstanceActions.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstanceActions.js
@@ -1,19 +1,11 @@
-import React from 'react';
+import { actionHeaderCellFormatter } from 'patternfly-react';
 import api from 'foremanReact/API';
+import { translate as __ } from 'foremanReact/common/I18n';
 import {
   setModalOpen,
   setModalClosed,
 } from 'foremanReact/components/ForemanModal/ForemanModalActions';
 
-import {
-  actionHeaderCellFormatter,
-} from 'patternfly-react';
-
-import {
-  propsToSnakeCase,
-  propsToCamelCase,
-} from 'foremanReact/common/helpers';
-
 import {
   APPLICATION_INSTANCE_INIT,
   APPLICATION_INSTANCE_CLOSE_ALERT_MODAL,
@@ -36,9 +28,7 @@ import {
   APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE,
 } from './ApplicationInstanceConstants';
 
-import {
-  supportedPluginsToHiddenParameterTypes,
-} from '../../helper';
+import { supportedPluginsToHiddenParameterTypes } from '../../helper';
 
 export const initApplicationInstance = (
   appDefinition,
@@ -47,7 +37,7 @@ export const initApplicationInstance = (
   supportedPlugins,
   headerFormatter,
   inlineEditFormatter,
-  inlineEditButtonsFormatter,
+  inlineEditButtonsFormatter
 ) => dispatch => {
   const initialState = {};
 
@@ -60,13 +50,13 @@ export const initApplicationInstance = (
         props: {
           index: 0,
           style: {
-            width: '30%'
-          }
+            width: '30%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'description',
@@ -76,13 +66,13 @@ export const initApplicationInstance = (
         props: {
           index: 1,
           style: {
-            width: '30%'
-          }
+            width: '30%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'service',
@@ -92,13 +82,13 @@ export const initApplicationInstance = (
         props: {
           index: 2,
           style: {
-            width: '20%'
-          }
+            width: '20%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
+        formatters: [inlineEditFormatter],
+      },
     },
     {
       property: 'actions',
@@ -108,20 +98,22 @@ export const initApplicationInstance = (
         props: {
           index: 4,
           style: {
-            width: '20%'
-          }
+            width: '20%',
+          },
         },
       },
       cell: {
-        formatters: [inlineEditButtonsFormatter]
-      }
-    }
+        formatters: [inlineEditButtonsFormatter],
+      },
+    },
   ];
 
   initialState.appDefinition = appDefinition;
   initialState.hosts = hosts;
   initialState.ansibleVarsAll = ansibleVarsAll;
-  initialState.hiddenForemanParameterTypes = supportedPluginsToHiddenParameterTypes(supportedPlugins);
+  initialState.hiddenForemanParameterTypes = supportedPluginsToHiddenParameterTypes(
+    supportedPlugins
+  );
 
   dispatch({
     type: APPLICATION_INSTANCE_INIT,
@@ -139,59 +131,62 @@ const errorHandler = (msg, err) => {
 
 export const closeAlertModal = () => ({
   type: APPLICATION_INSTANCE_CLOSE_ALERT_MODAL,
-  payload: {}
+  payload: {},
 });
 
 export const loadApplicationDefinition = (
   applicationDefinitionId,
-  additionalData,
-) => dispatch => {
+  additionalData
+) => async dispatch => {
   dispatch({ type: APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST });
 
-  const realUrl = additionalData.url.replace("__id__", applicationDefinitionId);
+  const realUrl = additionalData.url.replace('__id__', applicationDefinitionId);
 
-  return api
-    .get(realUrl, {}, {})
-    .then(({ data }) =>
-      dispatch({
-        type: APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS,
-        payload: data,
-      })
-    )
-    .catch(error => dispatch(errorHandler(APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE, error)));
+  try {
+    const { data } = await api.get(realUrl, {}, {});
+
+    dispatch({
+      type: APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS,
+      payload: data,
+    });
+  } catch (error) {
+    dispatch(
+      errorHandler(
+        APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE,
+        error
+      )
+    );
+  }
 };
 
-export const addApplicationInstanceHost = (additionalData) => ({
+export const addApplicationInstanceHost = additionalData => ({
   type: APPLICATION_INSTANCE_HOST_ADD,
   payload: {
     ...additionalData,
   },
 });
 
-export const deleteApplicationInstanceHost = (additionalData) => ({
+export const deleteApplicationInstanceHost = additionalData => ({
   type: APPLICATION_INSTANCE_HOST_DELETE,
   payload: {
     ...additionalData,
   },
 });
 
-export const activateEditApplicationInstanceHost = (additionalData) => ({
+export const activateEditApplicationInstanceHost = additionalData => ({
   type: APPLICATION_INSTANCE_HOST_EDIT_ACTIVATE,
   payload: {
     ...additionalData,
   },
 });
 
-export const confirmEditApplicationInstanceHost = (
-  allData
-) => async(dispatch) => {
-
+export const confirmEditApplicationInstanceHost = allData => async dispatch => {
   // Host name can not be empty
 
-  if (allData.rowData.hostname == '') {
+  if (allData.rowData.hostname === '') {
     dispatch({
       type: APPLICATION_INSTANCE_HOST_EDIT_ERROR,
-      payload: __("Every host needs to have a valid name"),
+      payload: __('Every host needs to have a valid name'),
     });
     return;
   }
@@ -199,34 +194,36 @@ export const confirmEditApplicationInstanceHost = (
   // Host name can only have specific characters
 
   const hostname = allData.rowData.hostname.toLowerCase();
-  const hostnameRegex = /^[0-9a-z]([0-9a-z\-]{0,61}[0-9a-z])$/;
+  const hostnameRegex = /^[0-9a-z]([0-9a-z-]{0,61}[0-9a-z])$/;
 
-  if (hostname.match(hostnameRegex) == undefined) {
+  if (hostname.match(hostnameRegex) === undefined) {
     dispatch({
       type: APPLICATION_INSTANCE_HOST_EDIT_ERROR,
-      payload: __("The hostname uses not allowed characters. See https://en.wikipedia.org/wiki/Hostname#Syntax for more details."),
+      payload: __(
+        'The hostname uses not allowed characters. See https://en.wikipedia.org/wiki/Hostname#Syntax for more details.'
+      ),
     });
     return;
   }
 
   // Service can not be empty
 
-  if (allData.rowData.service == '') {
+  if (allData.rowData.service === '') {
     dispatch({
       type: APPLICATION_INSTANCE_HOST_EDIT_ERROR,
-      payload: __("Every host needs to be assigned to a service."),
+      payload: __('Every host needs to be assigned to a service.'),
     });
     return;
   }
 
   // Validation if host name is already used (only for new host entrys)
 
-  const url = '/acd/ui_acd_validate_hostname'
+  const url = '/acd/ui_acd_validate_hostname';
   const validationData = {};
 
-  validationData['appDefId'] = allData.appDefinition.id;
-  validationData['serviceId'] = allData.rowData.service;
-  validationData['hostname'] = allData.rowData.hostname;
+  validationData.appDefId = allData.appDefinition.id;
+  validationData.serviceId = allData.rowData.service;
+  validationData.hostname = allData.rowData.hostname;
 
   if (allData.rowData.newEntry === true) {
     try {
@@ -237,12 +234,14 @@ export const confirmEditApplicationInstanceHost = (
           type: APPLICATION_INSTANCE_HOST_EDIT_CONFIRM,
           payload: {
             ...allData,
-          }
+          },
         });
       } else {
         dispatch({
           type: APPLICATION_INSTANCE_HOST_EDIT_ERROR,
-          payload: __('Hostname \''+ allData.rowData.hostname +'\' is already used. This check also includes hosts outside this application instance.'),
+          payload: __(
+            `Hostname '${allData.rowData.hostname}' is already used. This check also includes hosts outside this application instance.`
+          ),
         });
       }
     } catch (error) {
@@ -256,12 +255,12 @@ export const confirmEditApplicationInstanceHost = (
       type: APPLICATION_INSTANCE_HOST_EDIT_CONFIRM,
       payload: {
         ...allData,
-      }
+      },
     });
   }
 };
 
-export const cancelEditApplicationInstanceHost = (rowData) => ({
+export const cancelEditApplicationInstanceHost = rowData => ({
   type: APPLICATION_INSTANCE_HOST_EDIT_CANCEL,
   payload: {
     ...rowData,
@@ -276,84 +275,72 @@ export const changeEditApplicationInstanceHost = (value, additionalData) => ({
   },
 });
 
-export const openForemanParameterSelectionModal = (additionalData) => dispatch => {
+export const openForemanParameterSelectionModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN,
     payload: {
       ...additionalData,
-    }
+    },
   });
-  dispatch(
-    setModalOpen({ id: 'AppInstanceForemanParamSelection' })
-  );
-}
+  dispatch(setModalOpen({ id: 'AppInstanceForemanParamSelection' }));
+};
 
-export const closeForemanParameterSelectionModal = (additionalData) => dispatch => {
+export const closeForemanParameterSelectionModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE,
     payload: {
       ...additionalData,
-    }
+    },
   });
 
-  dispatch(
-    setModalClosed({ id: 'AppInstanceForemanParamSelection' })
-  );
-}
+  dispatch(setModalClosed({ id: 'AppInstanceForemanParamSelection' }));
+};
 
-export const openAnsibleParameterSelectionModal = (additionalData) => dispatch => {
+export const openAnsibleParameterSelectionModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN,
     payload: {
       ...additionalData,
-    }
+    },
   });
-  dispatch(
-    setModalOpen({ id: 'AppInstanceAnsibleParamSelection' })
-  );
-}
+  dispatch(setModalOpen({ id: 'AppInstanceAnsibleParamSelection' }));
+};
 
-export const closeAnsibleParameterSelectionModal = (additionalData) => dispatch => {
+export const closeAnsibleParameterSelectionModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE,
     payload: {
       ...additionalData,
-    }
+    },
   });
 
-  dispatch(
-    setModalClosed({ id: 'AppInstanceAnsibleParamSelection' })
-  );
-}
+  dispatch(setModalClosed({ id: 'AppInstanceAnsibleParamSelection' }));
+};
 
-export const openAddExistingHostsModal = (additionalData) => dispatch => {
+export const openAddExistingHostsModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN,
     payload: {
       ...additionalData,
-    }
+    },
   });
-  dispatch(
-    setModalOpen({ id: 'AppInstanceAddExistingHosts' })
-  );
-}
+  dispatch(setModalOpen({ id: 'AppInstanceAddExistingHosts' }));
+};
 
-export const closeAddExistingHostsModal = (additionalData) => dispatch => {
+export const closeAddExistingHostsModal = additionalData => dispatch => {
   dispatch({
     type: APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE,
     payload: {
       ...additionalData,
-    }
+    },
   });
 
-  dispatch(
-    setModalClosed({ id: 'AppInstanceAddExistingHosts' })
-  );
-}
+  dispatch(setModalClosed({ id: 'AppInstanceAddExistingHosts' }));
+};
 
-export const changeParameterSelectionMode = (additionalData) => ({
+export const changeParameterSelectionMode = additionalData => ({
   type: APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE,
   payload: {
     ...additionalData,
   },
-})
+});
diff --git a/webpack/components/ApplicationInstance/ApplicationInstanceConstants.js b/webpack/components/ApplicationInstance/ApplicationInstanceConstants.js
index cb8cd9df..7ff8b0fa 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstanceConstants.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstanceConstants.js
@@ -1,19 +1,36 @@
 export const APPLICATION_INSTANCE_INIT = 'APPLICATION_INSTANCE_INIT';
-export const APPLICATION_INSTANCE_CLOSE_ALERT_MODAL = 'APPLICATION_INSTANCE_CLOSE_ALERT_MODAL';
-export const APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST = 'APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST';
-export const APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS = 'APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS';
-export const APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE = 'APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE';
-export const APPLICATION_INSTANCE_HOST_DELETE = 'APPLICATION_INSTANCE_HOST_DELETE';
+export const APPLICATION_INSTANCE_CLOSE_ALERT_MODAL =
+  'APPLICATION_INSTANCE_CLOSE_ALERT_MODAL';
+export const APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST =
+  'APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST';
+export const APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS =
+  'APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS';
+export const APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE =
+  'APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE';
+export const APPLICATION_INSTANCE_HOST_DELETE =
+  'APPLICATION_INSTANCE_HOST_DELETE';
 export const APPLICATION_INSTANCE_HOST_ADD = 'APPLICATION_INSTANCE_HOST_ADD';
-export const APPLICATION_INSTANCE_HOST_EDIT_ACTIVATE = 'APPLICATION_INSTANCE_HOST_EDIT_ACTIVATE';
-export const APPLICATION_INSTANCE_HOST_EDIT_CONFIRM = 'APPLICATION_INSTANCE_HOST_EDIT_CONFIRM';
-export const APPLICATION_INSTANCE_HOST_EDIT_CHANGE = 'APPLICATION_INSTANCE_HOST_EDIT_CHANGE';
-export const APPLICATION_INSTANCE_HOST_EDIT_CANCEL = 'APPLICATION_INSTANCE_HOST_EDIT_CANCEL';
-export const APPLICATION_INSTANCE_HOST_EDIT_ERROR = 'APPLICATION_INSTANCE_HOST_EDIT_ERROR';
-export const APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN = 'APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN';
-export const APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE = 'APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE';
-export const APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN = 'APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN';
-export const APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE = 'APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE';
-export const APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN = 'APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN';
-export const APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE = 'APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE';
-export const APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE = 'APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE';
+export const APPLICATION_INSTANCE_HOST_EDIT_ACTIVATE =
+  'APPLICATION_INSTANCE_HOST_EDIT_ACTIVATE';
+export const APPLICATION_INSTANCE_HOST_EDIT_CONFIRM =
+  'APPLICATION_INSTANCE_HOST_EDIT_CONFIRM';
+export const APPLICATION_INSTANCE_HOST_EDIT_CHANGE =
+  'APPLICATION_INSTANCE_HOST_EDIT_CHANGE';
+export const APPLICATION_INSTANCE_HOST_EDIT_CANCEL =
+  'APPLICATION_INSTANCE_HOST_EDIT_CANCEL';
+export const APPLICATION_INSTANCE_HOST_EDIT_ERROR =
+  'APPLICATION_INSTANCE_HOST_EDIT_ERROR';
+export const APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN =
+  'APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN';
+export const APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE =
+  'APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE';
+export const APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN =
+  'APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN';
+export const APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE =
+  'APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE';
+export const APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN =
+  'APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN';
+export const APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE =
+  'APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE';
+export const APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE =
+  'APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE';
diff --git a/webpack/components/ApplicationInstance/ApplicationInstanceHelper.js b/webpack/components/ApplicationInstance/ApplicationInstanceHelper.js
index a568c4c0..646761f6 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstanceHelper.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstanceHelper.js
@@ -1,15 +1,12 @@
-
 function calculateServiceUsage(hostServiceId, services) {
-  const service = services.find(serv => serv['id'] == hostServiceId);
+  const service = services.find(serv => serv.id === hostServiceId);
   if ('currentCount' in service) {
-    service['currentCount'] += 1;
+    service.currentCount += 1;
   } else {
-    service['currentCount'] = 1;
+    service.currentCount = 1;
   }
 
   return services;
 }
 
-export {
-  calculateServiceUsage,
-};
+export { calculateServiceUsage };
diff --git a/webpack/components/ApplicationInstance/ApplicationInstanceReducer.js b/webpack/components/ApplicationInstance/ApplicationInstanceReducer.js
index c42b3bf7..ca9b738e 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstanceReducer.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstanceReducer.js
@@ -1,13 +1,9 @@
 import Immutable from 'seamless-immutable';
+import { cloneDeep, findIndex } from 'lodash';
+
 import { translate as __ } from 'foremanReact/common/I18n';
 import { calculateServiceUsage } from './ApplicationInstanceHelper';
 
-import {
-  cloneDeep,
-  findIndex,
-  findLastIndex,
-} from 'lodash';
-
 import {
   APPLICATION_INSTANCE_INIT,
   APPLICATION_INSTANCE_CLOSE_ALERT_MODAL,
@@ -54,40 +50,43 @@ const applicationInstanceConf = (state = initialState, action) => {
         alertModalText: '',
       });
     }
-   case APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE: {
-      console.log("Error while loading application definition data: "+ payload.error);
-      return state.merge({ error: payload.error, loading: false });
+    case APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_FAILURE: {
+      return state.merge({
+        error: payload.error,
+        loading: false,
+      });
     }
     case APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST: {
       return state.set('loading', true);
     }
     case APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_SUCCESS: {
-      let newState = {};
       const services = JSON.parse(payload.app_definition.services);
 
       // initialize all services count with 0
-      services.map(serv => {
-        serv['currentCount'] = 0;
-      })
+      services.forEach(serv => {
+        serv.currentCount = 0;
+      });
 
       // Update count
       if (state.hosts !== undefined) {
-        state.hosts.map((host, index) => {
+        state.hosts.forEach(host => {
           const hostServiceId = Number(host.service);
-          const service = services.find(serv => serv['id'] == hostServiceId);
-          service['currentCount'] += 1;
+          const service = services.find(serv => serv.id === hostServiceId);
+          service.currentCount += 1;
         });
       }
 
-      newState = {
+      const newState = {
         appDefinition: payload.app_definition,
-        services: services,
+        services,
         loading: false,
       };
 
       // Initialize ansibleVarsAll if there is no data available in app instance
       if (state.ansibleVarsAll.length <= 0) {
-        newState['ansibleVarsAll'] = JSON.parse(payload.app_definition.ansible_vars_all);
+        newState.ansibleVarsAll = JSON.parse(
+          payload.app_definition.ansible_vars_all
+        );
       }
 
       return state.merge(newState);
@@ -96,34 +95,47 @@ const applicationInstanceConf = (state = initialState, action) => {
       let hosts = [];
       let index = 1;
 
-      if ('hosts' in state && state.hosts !== undefined && state.hosts.length > 0) {
+      if (
+        'hosts' in state &&
+        state.hosts !== undefined &&
+        state.hosts.length > 0
+      ) {
         hosts = cloneDeep(state.hosts);
         index = Math.max(...hosts.map(e => e.id)) + 1;
       }
 
-      const newRow = {id: index, hostname: "", description: '', service: '', isExistingHost: false, foremanParameters: [], ansibleParameters: [], newEntry: true };
-      newRow.backup = cloneDeep(newRow)
+      const newRow = {
+        id: index,
+        hostname: '',
+        description: '',
+        service: '',
+        isExistingHost: false,
+        foremanParameters: [],
+        ansibleParameters: [],
+        newEntry: true,
+      };
+      newRow.backup = cloneDeep(newRow);
       hosts.push(newRow);
 
       return state.merge({
         editMode: true,
-        hosts: hosts
+        hosts,
       });
     }
     case APPLICATION_INSTANCE_HOST_DELETE: {
       const services = cloneDeep(state.services);
-      const host = state.hosts.find(v => v.id == payload.rowData.id);
+      const host = state.hosts.find(v => v.id === payload.rowData.id);
       const hostServiceId = Number(host.service);
       const hosts = state.hosts.filter(v => v.id !== host.id);
 
       // Update count
-      const service = services.find(serv => serv['id'] == hostServiceId);
-      service['currentCount'] -= 1;
+      const service = services.find(serv => serv.id === hostServiceId);
+      service.currentCount -= 1;
 
       return state.merge({
-        hosts: hosts,
-        services: services,
-      })
+        hosts,
+        services,
+      });
     }
     case APPLICATION_INSTANCE_HOST_EDIT_ACTIVATE: {
       const hosts = cloneDeep(state.hosts);
@@ -133,7 +145,7 @@ const applicationInstanceConf = (state = initialState, action) => {
 
       return state.merge({
         editMode: true,
-        hosts: hosts
+        hosts,
       });
     }
     case APPLICATION_INSTANCE_HOST_EDIT_CONFIRM: {
@@ -146,21 +158,29 @@ const applicationInstanceConf = (state = initialState, action) => {
       // hostnames are lower case
       thisHost.hostname = thisHost.hostname.toLowerCase();
 
-      if (state.hosts.filter(v => v.hostname === thisHost.hostname && v.id != thisHost.id).length > 0) {
+      if (
+        state.hosts.filter(
+          v => v.hostname === thisHost.hostname && v.id !== thisHost.id
+        ).length > 0
+      ) {
         return state.merge({
           showAlertModal: true,
-          alertModalTitle: __("Error"),
-          alertModalText: __("Host name already used in this Application Instance. Please make sure that every host name is unique."),
+          alertModalTitle: __('Error'),
+          alertModalText: __(
+            'Host name already used in this Application Instance. Please make sure that every host name is unique.'
+          ),
         });
       }
 
       // Initialize the new Instance with the parameters of the Application Definition.
       if (thisHost.newEntry === true) {
-          const hostServiceId = Number(thisHost.service);
-          const selectedService = services.filter(entry => entry.id == hostServiceId)[0];
-          hosts[index].foremanParameters = selectedService.foremanParameters;
-          hosts[index].ansibleParameters = selectedService.ansibleParameters;
-          services = calculateServiceUsage(hostServiceId, services);
+        const hostServiceId = Number(thisHost.service);
+        const selectedService = services.filter(
+          entry => entry.id === hostServiceId
+        )[0];
+        hosts[index].foremanParameters = selectedService.foremanParameters;
+        hosts[index].ansibleParameters = selectedService.ansibleParameters;
+        services = calculateServiceUsage(hostServiceId, services);
       }
 
       delete hosts[index].backup;
@@ -168,8 +188,8 @@ const applicationInstanceConf = (state = initialState, action) => {
 
       return state.merge({
         editMode: false,
-        services: services,
-        hosts: hosts
+        services,
+        hosts,
       });
     }
     case APPLICATION_INSTANCE_HOST_EDIT_CHANGE: {
@@ -193,20 +213,22 @@ const applicationInstanceConf = (state = initialState, action) => {
 
       return state.merge({
         editMode: false,
-        hosts: hosts
+        hosts,
       });
     }
     case APPLICATION_INSTANCE_HOST_EDIT_ERROR: {
       return state.merge({
         showAlertModal: true,
-        alertModalTitle: __("Error"),
+        alertModalTitle: __('Error'),
         alertModalText: payload,
       });
     }
     case APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN: {
-      let parametersData = {};
+      const parametersData = {};
 
-      const selectedService = state.services.filter(entry => entry.id == payload.rowData.service)[0];
+      const selectedService = state.services.filter(
+        entry => entry.id === payload.rowData.service
+      )[0];
 
       parametersData.paramDefinition = {
         id: selectedService.id,
@@ -214,7 +236,7 @@ const applicationInstanceConf = (state = initialState, action) => {
         dataId: selectedService.hostgroup,
         hostId: payload.rowData.id,
         // TODO: is this really correct? Guess it shoud be dataId and we should get rid of them
-        //hostgroup_id: selectedService.hostgroup,
+        // hostgroup_id: selectedService.hostgroup,
       };
       parametersData.type = PARAMETER_SELECTION_PARAM_TYPE_FOREMAN;
       parametersData.parameters = payload.rowData.foremanParameters;
@@ -224,42 +246,45 @@ const applicationInstanceConf = (state = initialState, action) => {
       parametersData.allowDescriptionAdjustment = false;
 
       return state.merge({
-        parametersData: parametersData,
+        parametersData,
       });
     }
     case APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE: {
-      if (payload.mode == 'save') {
+      if (payload.mode === 'save') {
         const hosts = cloneDeep(state.hosts);
-        const index = findIndex(hosts, { id: state.parametersData.paramDefinition.hostId });
+        const index = findIndex(hosts, {
+          id: state.parametersData.paramDefinition.hostId,
+        });
         hosts[index].foremanParameters = cloneDeep(payload.parameterSelection);
 
         return state.merge({
           parametersData: null,
-          hosts: hosts
-        });
-      } else {
-        return state.merge({
-          parametersData: null,
+          hosts,
         });
       }
+      return state.merge({
+        parametersData: null,
+      });
     }
     case APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN: {
-      let parametersData = {};
+      const parametersData = {};
 
-      if ((payload.hasOwnProperty('isAllGroup')) && (payload.isAllGroup == true)) {
+      if (payload.hasOwnProperty('isAllGroup') && payload.isAllGroup === true) {
         parametersData.parameters = state.ansibleVarsAll;
         parametersData.paramDefinition = {
           isAllGroup: true,
-        }
+        };
       } else {
-        const selectedService = state.services.filter(entry => entry.id == payload.rowData.service)[0];
+        const selectedService = state.services.filter(
+          entry => entry.id === payload.rowData.service
+        )[0];
 
         parametersData.paramDefinition = {
           id: selectedService.id,
           name: selectedService.name,
           hostId: payload.rowData.id,
           // TODO: is this really correct? Guess it shoud be dataId and we should get rid of them
-          //hostgroup_id: selectedService.hostgroup,
+          // hostgroup_id: selectedService.hostgroup,
         };
         parametersData.parameters = payload.rowData.ansibleParameters;
       }
@@ -271,25 +296,32 @@ const applicationInstanceConf = (state = initialState, action) => {
       parametersData.allowDescriptionAdjustment = false;
 
       return state.merge({
-        parametersData: parametersData,
+        parametersData,
       });
     }
     case APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE: {
       let newState = {};
-      if (payload.mode == 'save') {
-        if ((state.parametersData.paramDefinition.hasOwnProperty('isAllGroup')) && (state.parametersData.paramDefinition.isAllGroup == true)) {
+      if (payload.mode === 'save') {
+        if (
+          state.parametersData.paramDefinition.hasOwnProperty('isAllGroup') &&
+          state.parametersData.paramDefinition.isAllGroup === true
+        ) {
           newState = {
             parametersData: null,
             ansibleVarsAll: cloneDeep(payload.parameterSelection),
           };
         } else {
           const hosts = cloneDeep(state.hosts);
-          const index = findIndex(hosts, { id: state.parametersData.paramDefinition.hostId });
-          hosts[index].ansibleParameters = cloneDeep(payload.parameterSelection);
+          const index = findIndex(hosts, {
+            id: state.parametersData.paramDefinition.hostId,
+          });
+          hosts[index].ansibleParameters = cloneDeep(
+            payload.parameterSelection
+          );
 
           newState = {
             parametersData: null,
-            hosts: hosts
+            hosts,
           };
         }
       } else {
@@ -300,23 +332,32 @@ const applicationInstanceConf = (state = initialState, action) => {
       return state.merge(newState);
     }
     case APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN: {
+      return state;
     }
     case APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE: {
-      if (payload.mode == 'save') {
-        let newState;
+      if (payload.mode === 'save') {
         let hosts = [];
         let index = 1;
         let services = cloneDeep(state.services);
 
-        if ('hosts' in state && state.hosts !== undefined && state.hosts.length > 0) {
+        if (
+          'hosts' in state &&
+          state.hosts !== undefined &&
+          state.hosts.length > 0
+        ) {
           hosts = cloneDeep(state.hosts);
           index = Math.max(...hosts.map(e => e.id));
         }
 
         payload.selectedHosts.forEach(host => {
-          if ((state.hosts == undefined) || (state.hosts.find(h => h.hostname == host.hostname) == undefined)) {
+          if (
+            state.hosts === undefined ||
+            state.hosts.find(h => h.hostname === host.hostname) === undefined
+          ) {
             index += 1;
-            const selectedService = services.filter(entry => entry.id == host.serviceId)[0];
+            const selectedService = services.filter(
+              entry => entry.id === host.serviceId
+            )[0];
             const newRow = {
               id: index,
               hostname: host.hostname,
@@ -325,19 +366,18 @@ const applicationInstanceConf = (state = initialState, action) => {
               isExistingHost: true,
               foremanParameters: [], // we will never set this because we don't want to change a already existing host.
               ansibleParameters: selectedService.ansibleParameters,
-            }
+            };
             hosts.push(newRow);
             services = calculateServiceUsage(host.serviceId, services);
           }
         });
 
         return state.merge({
-          hosts: hosts,
-          services, services
+          hosts,
+          services,
         });
-      } else {
-        return state;
       }
+      return state;
     }
     case APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE: {
       return state.merge({ paramEditMode: payload.mode });
diff --git a/webpack/components/ApplicationInstance/ApplicationInstanceSelectors.js b/webpack/components/ApplicationInstance/ApplicationInstanceSelectors.js
index ad8f622d..600ce086 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstanceSelectors.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstanceSelectors.js
@@ -1,14 +1,23 @@
-const applicationInstanceConf = state => state.foremanAcd.applicationInstanceConf;
+const applicationInstanceConf = state =>
+  state.foremanAcd.applicationInstanceConf;
 
-export const selectShowAlertModal = state => applicationInstanceConf(state).showAlertModal;
-export const selectAlertModalText = state => applicationInstanceConf(state).alertModalText;
-export const selectAlertModalTitle = state => applicationInstanceConf(state).alertModalTitle;
+export const selectShowAlertModal = state =>
+  applicationInstanceConf(state).showAlertModal;
+export const selectAlertModalText = state =>
+  applicationInstanceConf(state).alertModalText;
+export const selectAlertModalTitle = state =>
+  applicationInstanceConf(state).alertModalTitle;
 export const selectEditMode = state => applicationInstanceConf(state).editMode;
-export const selectAppDefinition = state => applicationInstanceConf(state).appDefinition;
+export const selectAppDefinition = state =>
+  applicationInstanceConf(state).appDefinition;
 export const selectHosts = state => applicationInstanceConf(state).hosts;
 export const selectColumns = state => applicationInstanceConf(state).columns;
-export const selectHiddenForemanParameterTypes = state => applicationInstanceConf(state).hiddenForemanParameterTypes;
+export const selectHiddenForemanParameterTypes = state =>
+  applicationInstanceConf(state).hiddenForemanParameterTypes;
 export const selectServices = state => applicationInstanceConf(state).services;
-export const selectParametersData = state => applicationInstanceConf(state).parametersData;
-export const selectAnsibleVarsAll = state => applicationInstanceConf(state).ansibleVarsAll;
-export const selectParamEditMode = state => applicationInstanceConf(state).paramEditMode;
+export const selectParametersData = state =>
+  applicationInstanceConf(state).parametersData;
+export const selectAnsibleVarsAll = state =>
+  applicationInstanceConf(state).ansibleVarsAll;
+export const selectParamEditMode = state =>
+  applicationInstanceConf(state).paramEditMode;
diff --git a/webpack/components/ApplicationInstance/__fixtures__/applicationInstanceConfData_1.fixtures.js b/webpack/components/ApplicationInstance/__fixtures__/applicationInstanceConfData1.fixtures.js
similarity index 57%
rename from webpack/components/ApplicationInstance/__fixtures__/applicationInstanceConfData_1.fixtures.js
rename to webpack/components/ApplicationInstance/__fixtures__/applicationInstanceConfData1.fixtures.js
index be00975b..a751b4da 100644
--- a/webpack/components/ApplicationInstance/__fixtures__/applicationInstanceConfData_1.fixtures.js
+++ b/webpack/components/ApplicationInstance/__fixtures__/applicationInstanceConfData1.fixtures.js
@@ -1,9 +1,9 @@
-export const applicationInstanceConfData_1 = {
+export const applicationInstanceConfData1 = {
   name: false,
   error: {
     errorMsg: '',
     status: '',
-    statusText: ''
+    statusText: '',
   },
   loading: false,
   columns: [
@@ -11,97 +11,79 @@ export const applicationInstanceConfData_1 = {
       property: 'hostname',
       header: {
         label: 'Hostname',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 0,
           style: {
-            width: '30%'
-          }
-        }
+            width: '30%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'description',
       header: {
         label: 'Description',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 1,
           style: {
-            width: '30%'
-          }
-        }
+            width: '30%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'service',
       header: {
         label: 'Service',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 2,
           style: {
-            width: '20%'
-          }
-        }
+            width: '20%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'actions',
       header: {
         label: 'Actions',
-        formatters: [
-          null
-        ],
+        formatters: [null],
         props: {
           index: 4,
           style: {
-            width: '20%'
-          }
-        }
+            width: '20%',
+          },
+        },
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
-    }
+        formatters: [null],
+      },
+    },
   ],
   appDefinition: {
     id: 1,
     name: 'LAMP',
     description: '',
-    services: '[{"id":1,"name":"web","description":"","hostgroup":"1","ansibleGroup":"webservers","minCount":"2","maxCount":"","foremanParameters":[{"id":1,"locked":false,"name":"CP","description":"","type":"computeprofile","value":"1"},{"id":2,"locked":true,"name":"LE","description":"","type":"lifecycleenv","value":"1"}],"ansibleParameters":[{"id":0,"name":"dummy_var","value":"0"}]},{"id":2,"name":"db","description":"","hostgroup":"1","ansibleGroup":"dbservers","minCount":"1","maxCount":"","foremanParameters":[],"ansibleParameters":[{"id":0,"name":"mysqlservice","value":"mysqld"},{"id":1,"name":"mysql_port","value":"3306","locked":true},{"id":2,"name":"dbuser","value":"webapp"},{"id":3,"name":"dbname","value":"ANSAP01"},{"id":4,"name":"upassword","value":"Bond@007"},{"id":5,"name":"masterpassword","value":"MySQL@007"}]}]',
-    ansible_vars_all: '[{"id":0,"name":"repository","value":"https://github.com/bennojoy/mywebapp.git"}]',
-    location_ids: [
-      2
-    ],
-    organization_ids: [
-      1
-    ],
+    services:
+      '[{"id":1,"name":"web","description":"","hostgroup":"1","ansibleGroup":"webservers","minCount":"2","maxCount":"","foremanParameters":[{"id":1,"locked":false,"name":"CP","description":"","type":"computeprofile","value":"1"},{"id":2,"locked":true,"name":"LE","description":"","type":"lifecycleenv","value":"1"}],"ansibleParameters":[{"id":0,"name":"dummy_var","value":"0"}]},{"id":2,"name":"db","description":"","hostgroup":"1","ansibleGroup":"dbservers","minCount":"1","maxCount":"","foremanParameters":[],"ansibleParameters":[{"id":0,"name":"mysqlservice","value":"mysqld"},{"id":1,"name":"mysql_port","value":"3306","locked":true},{"id":2,"name":"dbuser","value":"webapp"},{"id":3,"name":"dbname","value":"ANSAP01"},{"id":4,"name":"upassword","value":"Bond@007"},{"id":5,"name":"masterpassword","value":"MySQL@007"}]}]',
+    ansible_vars_all:
+      '[{"id":0,"name":"repository","value":"https://github.com/bennojoy/mywebapp.git"}]',
+    location_ids: [2],
+    organization_ids: [1],
     created_at: '2021-03-11 12:51:34 +0100',
-    updated_at: '2021-03-13 00:06:12 +0100'
+    updated_at: '2021-03-13 00:06:12 +0100',
   },
   hosts: [
     {
@@ -114,34 +96,34 @@ export const applicationInstanceConfData_1 = {
         {
           id: 0,
           name: 'mysqlservice',
-          value: 'mysqld'
+          value: 'mysqld',
         },
         {
           id: 1,
           name: 'mysql_port',
-          value: '3306'
+          value: '3306',
         },
         {
           id: 2,
           name: 'dbuser',
-          value: 'webapp'
+          value: 'webapp',
         },
         {
           id: 3,
           name: 'dbname',
-          value: 'ANSAP01'
+          value: 'ANSAP01',
         },
         {
           id: 4,
           name: 'upassword',
-          value: 'Bond@007'
+          value: 'Bond@007',
         },
         {
           id: 5,
           name: 'masterpassword',
-          value: 'MySQL@007'
-        }
-      ]
+          value: 'MySQL@007',
+        },
+      ],
     },
     {
       id: 1,
@@ -153,9 +135,9 @@ export const applicationInstanceConfData_1 = {
         {
           id: 0,
           name: 'dummy_var',
-          value: '0'
-        }
-      ]
+          value: '0',
+        },
+      ],
     },
     {
       id: 2,
@@ -167,17 +149,17 @@ export const applicationInstanceConfData_1 = {
         {
           id: 0,
           name: 'dummy_var',
-          value: '0'
-        }
-      ]
-    }
+          value: '0',
+        },
+      ],
+    },
   ],
   ansibleVarsAll: [
     {
       id: 0,
       name: 'repository',
-      value: 'https://github.com/bennojoy/mywebapp.git'
-    }
+      value: 'https://github.com/bennojoy/mywebapp.git',
+    },
   ],
   services: [
     {
@@ -195,7 +177,7 @@ export const applicationInstanceConfData_1 = {
           name: 'CP',
           description: '',
           type: 'computeprofile',
-          value: '1'
+          value: '1',
         },
         {
           id: 2,
@@ -203,17 +185,17 @@ export const applicationInstanceConfData_1 = {
           name: 'LE',
           description: '',
           type: 'lifecycleenv',
-          value: '1'
-        }
+          value: '1',
+        },
       ],
       ansibleParameters: [
         {
           id: 0,
           name: 'dummy_var',
-          value: '0'
-        }
+          value: '0',
+        },
       ],
-      currentCount: 2
+      currentCount: 2,
     },
     {
       id: 2,
@@ -228,36 +210,36 @@ export const applicationInstanceConfData_1 = {
         {
           id: 0,
           name: 'mysqlservice',
-          value: 'mysqld'
+          value: 'mysqld',
         },
         {
           id: 1,
           name: 'mysql_port',
           value: '3306',
-          locked: true
+          locked: true,
         },
         {
           id: 2,
           name: 'dbuser',
-          value: 'webapp'
+          value: 'webapp',
         },
         {
           id: 3,
           name: 'dbname',
-          value: 'ANSAP01'
+          value: 'ANSAP01',
         },
         {
           id: 4,
           name: 'upassword',
-          value: 'Bond@007'
+          value: 'Bond@007',
         },
         {
           id: 5,
           name: 'masterpassword',
-          value: 'MySQL@007'
-        }
+          value: 'MySQL@007',
+        },
       ],
-      currentCount: 1
-    }
-  ]
-}
+      currentCount: 1,
+    },
+  ],
+};
diff --git a/webpack/components/ApplicationInstance/__fixtures__/applicationInstanceReducer.fixtures.js b/webpack/components/ApplicationInstance/__fixtures__/applicationInstanceReducer.fixtures.js
index c7f970b8..6f1f14dd 100644
--- a/webpack/components/ApplicationInstance/__fixtures__/applicationInstanceReducer.fixtures.js
+++ b/webpack/components/ApplicationInstance/__fixtures__/applicationInstanceReducer.fixtures.js
@@ -1,28 +1,22 @@
 import Immutable from 'seamless-immutable';
-import {
-   cloneDeep,
-   findIndex,
-   findLastIndex,
-} from 'lodash';
+import { cloneDeep, findIndex } from 'lodash';
 
-import {
-  applicationInstanceConfData_1,
-} from '../__fixtures__/applicationInstanceConfData_1.fixtures';
+import { applicationInstanceConfData1 } from '../__fixtures__/applicationInstanceConfData1.fixtures';
 
-export const successState = Immutable(applicationInstanceConfData_1);
+export const successState = Immutable(applicationInstanceConfData1);
 
 const EDIT_ROW_ID = 2;
 
-const editClone = applicationInstanceConfData_1;
-const editIndex = findIndex(editClone.hosts, { id: EDIT_ROW_ID })
-editClone["hosts"][editIndex].backup = cloneDeep(editClone["hosts"][editIndex]);
+const editClone = applicationInstanceConfData1;
+const editIndex = findIndex(editClone.hosts, { id: EDIT_ROW_ID });
+editClone.hosts[editIndex].backup = cloneDeep(editClone.hosts[editIndex]);
 export const editState = Immutable(editClone);
 
 // Payload Data
-export const initApplicationInstancePayload = applicationInstanceConfData_1;
+export const initApplicationInstancePayload = applicationInstanceConfData1;
 
-export const closeAlertModalPayload = { };
-export const addHostPayload = { };
+export const closeAlertModalPayload = {};
+export const addHostPayload = {};
 export const deleteHostPayload = {
   rowData: {
     id: EDIT_ROW_ID,
@@ -44,11 +38,11 @@ export const cancelEditHostPayload = {
   },
 };
 export const changeEditHostPayload = {
-  value: "helloworld",
-  property: "name",
+  value: 'helloworld',
+  property: 'name',
   rowData: {
     id: EDIT_ROW_ID,
-  }
+  },
 };
 
 export const loadApplicationDefinitionRequestPayload = {
@@ -58,23 +52,21 @@ export const loadApplicationDefinitionRequestPayload = {
 export const loadApplicationDefinitionSuccessPayload = {
   app_definition: {
     id: 1,
-    name: "LAMP",
-    description: "",
-    services: "[{\"id\":1,\"name\":\"web\",\"description\":\"\",\"hostgroup\":\"1\",\"ansibleGroup\":\"webservers\",\"minCount\":\"2\",\"maxCount\":\"\",\"foremanParameters\":[{\"id\":1,\"locked\":false,\"name\":\"CP\",\"description\":\"\",\"type\":\"computeprofile\",\"value\":\"1\"},{\"id\":2,\"locked\":true,\"name\":\"LE\",\"description\":\"\",\"type\":\"lifecycleenv\",\"value\":\"1\"}],\"ansibleParameters\":[{\"id\":0,\"name\":\"dummy_var\",\"value\":\"0\"}]},{\"id\":2,\"name\":\"db\",\"description\":\"\",\"hostgroup\":\"1\",\"ansibleGroup\":\"dbservers\",\"minCount\":\"1\",\"maxCount\":\"\",\"foremanParameters\":[],\"ansibleParameters\":[{\"id\":0,\"name\":\"mysqlservice\",\"value\":\"mysqld\"},{\"id\":1,\"name\":\"mysql_port\",\"value\":\"3306\",\"locked\":true},{\"id\":2,\"name\":\"dbuser\",\"value\":\"webapp\"},{\"id\":3,\"name\":\"dbname\",\"value\":\"ANSAP01\"},{\"id\":4,\"name\":\"upassword\",\"value\":\"Bond@007\"},{\"id\":5,\"name\":\"masterpassword\",\"value\":\"MySQL@007\"}]}]",
-    "ansible_vars_all": "[{\"id\":0,\"name\":\"repository\",\"value\":\"https://github.com/bennojoy/mywebapp.git\"}]",
-    location_ids: [
-      2
-    ],
-    organization_ids: [
-      1
-    ],
-    created_at: "2021-03-11 12:51:34 +0100",
-    updated_at: "2021-03-13 00:06:12 +0100"
+    name: 'LAMP',
+    description: '',
+    services:
+      '[{"id":1,"name":"web","description":"","hostgroup":"1","ansibleGroup":"webservers","minCount":"2","maxCount":"","foremanParameters":[{"id":1,"locked":false,"name":"CP","description":"","type":"computeprofile","value":"1"},{"id":2,"locked":true,"name":"LE","description":"","type":"lifecycleenv","value":"1"}],"ansibleParameters":[{"id":0,"name":"dummy_var","value":"0"}]},{"id":2,"name":"db","description":"","hostgroup":"1","ansibleGroup":"dbservers","minCount":"1","maxCount":"","foremanParameters":[],"ansibleParameters":[{"id":0,"name":"mysqlservice","value":"mysqld"},{"id":1,"name":"mysql_port","value":"3306","locked":true},{"id":2,"name":"dbuser","value":"webapp"},{"id":3,"name":"dbname","value":"ANSAP01"},{"id":4,"name":"upassword","value":"Bond@007"},{"id":5,"name":"masterpassword","value":"MySQL@007"}]}]',
+    ansible_vars_all:
+      '[{"id":0,"name":"repository","value":"https://github.com/bennojoy/mywebapp.git"}]',
+    location_ids: [2],
+    organization_ids: [1],
+    created_at: '2021-03-11 12:51:34 +0100',
+    updated_at: '2021-03-13 00:06:12 +0100',
   },
   foreman_data: null,
-  ansible_data: null
+  ansible_data: null,
 };
 
 export const loadApplicationDefinitionFailurePayload = {
-  error: "Something really bad happend",
+  error: 'Something really bad happend',
 };
diff --git a/webpack/components/ApplicationInstance/__tests__/ApplicationInstance.test.js b/webpack/components/ApplicationInstance/__tests__/ApplicationInstance.test.js
index 52ac0e4a..6439dd4c 100644
--- a/webpack/components/ApplicationInstance/__tests__/ApplicationInstance.test.js
+++ b/webpack/components/ApplicationInstance/__tests__/ApplicationInstance.test.js
@@ -4,19 +4,84 @@ import ApplicationInstance from '../ApplicationInstance';
 
 const noop = () => {};
 
+const baseFixtures = {
+  data: {
+    mode: '',
+    location: 'Default Location',
+    organization: 'Default Organization',
+    appDefinition: {},
+    hosts: [],
+    ansibleVarsAll: [],
+  },
+  activateEditApplicationInstanceHost: noop,
+  addApplicationInstanceHost: noop,
+  cancelEditApplicationInstanceHost: noop,
+  changeEditApplicationInstanceHost: noop,
+  changeParameterSelectionMode: noop,
+  closeAddExistingHostsModal: noop,
+  closeAlertModal: noop,
+  closeAnsibleParameterSelectionModal: noop,
+  closeForemanParameterSelectionModal: noop,
+  confirmEditApplicationInstanceHost: noop,
+  deleteApplicationInstanceHost: noop,
+  initApplicationInstance: noop,
+  loadApplicationDefinition: noop,
+  openForemanParameterSelectionModal: noop,
+  openAnsibleParameterSelectionModal: noop,
+  openAddExistingHostsModal: noop,
+};
+
 const fixtures = {
-  'should render application instance': {
+  'should render without optional-values': baseFixtures,
+  'should render newInstance': {
+    ...baseFixtures,
+    data: {
+      ...baseFixtures.data,
+      mode: 'newInstance',
+      applications: {
+        '1': 'dummy-definition',
+        '2': 'test-definition',
+      },
+      supportedPlugins: {
+        puppet: false,
+        katello: true,
+      },
+    },
+  },
+  'should render editInstance': {
+    ...baseFixtures,
     data: {
-      location: "Default Location",
-      organization: "Default Organization",
-      appDefinition: {},
-      hosts: [],
-      ansibleVarsAll: [],
+      ...baseFixtures.data,
+      mode: 'editInstance',
+      appDefinition: {
+        id: 2,
+        name: 'test-definition',
+      },
+      hosts: [
+        {
+          id: 1,
+          hostname: 'grafana-host',
+          service: '1',
+          description: '',
+          isExistingHost: false,
+          foremanParameters: [],
+          ansibleParameters: [],
+        },
+        {
+          id: 2,
+          hostname: 'prometheus-host',
+          service: '2',
+          description: '',
+          isExistingHost: false,
+          foremanParameters: [],
+          ansibleParameters: [],
+        },
+      ],
+      supportedPlugins: {
+        puppet: false,
+        katello: true,
+      },
     },
-    closeAlertModal: noop,
-    loadApplicationDefinition: noop,
-    initApplicationInstance: noop,
-    addApplicationInstanceHost: noop,
   },
 };
 
diff --git a/webpack/components/ApplicationInstance/__tests__/ApplicationInstanceReducer.test.js b/webpack/components/ApplicationInstance/__tests__/ApplicationInstanceReducer.test.js
index e6ef6bf9..fbd07cd9 100644
--- a/webpack/components/ApplicationInstance/__tests__/ApplicationInstanceReducer.test.js
+++ b/webpack/components/ApplicationInstance/__tests__/ApplicationInstanceReducer.test.js
@@ -29,14 +29,6 @@ import {
   APPLICATION_INSTANCE_HOST_EDIT_CONFIRM,
   APPLICATION_INSTANCE_HOST_EDIT_CHANGE,
   APPLICATION_INSTANCE_HOST_EDIT_CANCEL,
-  APPLICATION_INSTANCE_HOST_EDIT_ERROR,
-  APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_OPEN,
-  APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE,
-  APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN,
-  APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE,
-  APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_OPEN,
-  APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE,
-  APPLICATION_INSTANCE_CHANGE_PARAMETER_SELECTION_MODE,
 } from '../ApplicationInstanceConstants';
 
 const fixtures = {
diff --git a/webpack/components/ApplicationInstance/__tests__/ApplicationInstanceSelectors.test.js b/webpack/components/ApplicationInstance/__tests__/ApplicationInstanceSelectors.test.js
index b6f576a6..6653aef8 100644
--- a/webpack/components/ApplicationInstance/__tests__/ApplicationInstanceSelectors.test.js
+++ b/webpack/components/ApplicationInstance/__tests__/ApplicationInstanceSelectors.test.js
@@ -15,9 +15,7 @@ import {
   selectParamEditMode,
 } from '../ApplicationInstanceSelectors';
 
-import {
-  applicationInstanceConfData_1,
-} from '../__fixtures__/applicationInstanceConfData_1.fixtures';
+import { applicationInstanceConfData1 } from '../__fixtures__/applicationInstanceConfData1.fixtures';
 
 const stateFactory = obj => ({
   foremanAcd: {
@@ -26,30 +24,32 @@ const stateFactory = obj => ({
 });
 
 const fixtures = {
-  'should return showAlertModal from applicationInstanceConfData_1 fixtures': () =>
-    selectShowAlertModal(stateFactory(applicationInstanceConfData_1)),
-  'should return alertModalText from applicationInstanceConfData_1 fixtures': () =>
-    selectAlertModalText(stateFactory(applicationInstanceConfData_1)),
-  'should return alertModalTitle from applicationInstanceConfData_1 fixtures': () =>
-    selectAlertModalTitle(stateFactory(applicationInstanceConfData_1)),
-  'should return editMode from applicationInstanceConfData_1 fixtures': () =>
-    selectEditMode(stateFactory(applicationInstanceConfData_1)),
-  'should return appDefinition from applicationInstanceConfData_1 fixtures': () =>
-    selectAppDefinition(stateFactory(applicationInstanceConfData_1)),
-  'should return hosts from applicationInstanceConfData_1 fixtures': () =>
-    selectHosts(stateFactory(applicationInstanceConfData_1)),
-  'should return columns from applicationInstanceConfData_1 fixtures': () =>
-    selectColumns(stateFactory(applicationInstanceConfData_1)),
-  'should return hiddenForemanParameterTypes from applicationInstanceConfData_1 fixtures': () =>
-    selectHiddenForemanParameterTypes(stateFactory(applicationInstanceConfData_1)),
-  'should return services from applicationInstanceConfData_1 fixtures': () =>
-    selectServices(stateFactory(applicationInstanceConfData_1)),
-  'should return parametersData from applicationInstanceConfData_1 fixtures': () =>
-    selectParametersData(stateFactory(applicationInstanceConfData_1)),
-  'should return ansibleVarsAll from applicationInstanceConfData_1 fixtures': () =>
-    selectAnsibleVarsAll(stateFactory(applicationInstanceConfData_1)),
-  'should return ParamEditMode from applicationInstanceConfData_1 fixtures': () =>
-    selectParamEditMode(stateFactory(applicationInstanceConfData_1)),
+  'should return showAlertModal from applicationInstanceConfData1 fixtures': () =>
+    selectShowAlertModal(stateFactory(applicationInstanceConfData1)),
+  'should return alertModalText from applicationInstanceConfData1 fixtures': () =>
+    selectAlertModalText(stateFactory(applicationInstanceConfData1)),
+  'should return alertModalTitle from applicationInstanceConfData1 fixtures': () =>
+    selectAlertModalTitle(stateFactory(applicationInstanceConfData1)),
+  'should return editMode from applicationInstanceConfData1 fixtures': () =>
+    selectEditMode(stateFactory(applicationInstanceConfData1)),
+  'should return appDefinition from applicationInstanceConfData1 fixtures': () =>
+    selectAppDefinition(stateFactory(applicationInstanceConfData1)),
+  'should return hosts from applicationInstanceConfData1 fixtures': () =>
+    selectHosts(stateFactory(applicationInstanceConfData1)),
+  'should return columns from applicationInstanceConfData1 fixtures': () =>
+    selectColumns(stateFactory(applicationInstanceConfData1)),
+  'should return hiddenForemanParameterTypes from applicationInstanceConfData1 fixtures': () =>
+    selectHiddenForemanParameterTypes(
+      stateFactory(applicationInstanceConfData1)
+    ),
+  'should return services from applicationInstanceConfData1 fixtures': () =>
+    selectServices(stateFactory(applicationInstanceConfData1)),
+  'should return parametersData from applicationInstanceConfData1 fixtures': () =>
+    selectParametersData(stateFactory(applicationInstanceConfData1)),
+  'should return ansibleVarsAll from applicationInstanceConfData1 fixtures': () =>
+    selectAnsibleVarsAll(stateFactory(applicationInstanceConfData1)),
+  'should return ParamEditMode from applicationInstanceConfData1 fixtures': () =>
+    selectParamEditMode(stateFactory(applicationInstanceConfData1)),
 };
 
 describe('ApplicationInstanceSelectors', () =>
diff --git a/webpack/components/ApplicationInstance/__tests__/__snapshots__/ApplicationInstance.test.js.snap b/webpack/components/ApplicationInstance/__tests__/__snapshots__/ApplicationInstance.test.js.snap
index fdfb576b..6e7acdf9 100644
--- a/webpack/components/ApplicationInstance/__tests__/__snapshots__/ApplicationInstance.test.js.snap
+++ b/webpack/components/ApplicationInstance/__tests__/__snapshots__/ApplicationInstance.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ApplicationInstance should render application instance 1`] = `
+exports[`ApplicationInstance should render editInstance 1`] = `
 <span>
   <MessageDialog
     accessibleDescription=""
@@ -129,7 +129,611 @@ exports[`ApplicationInstance should render application instance 1`] = `
         }
       }
     >
-      Ansible group vars 'all':
+      Ansible group vars ‘all’:
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="default"
+        disabled={true}
+        onClick={[Function]}
+        style={
+          Object {
+            "marginLeft": 10,
+          }
+        }
+      >
+        <span
+          title="Change ansible variables for 'all'"
+        >
+          A
+        </span>
+      </Button>
+    </span>
+  </div>
+  <div>
+    <ForemanModal
+      dialogClassName="param_selection_modal"
+      id="AppInstanceForemanParamSelection"
+      title="Foreman Parameter specification for Application Instance"
+    >
+      <Header
+        closeButton={false}
+      >
+        Parameter specification
+      </Header>
+      <Connect(ParameterSelection)
+        data={Object {}}
+        editModeCallback={[Function]}
+        hiddenParameterTypes={Array []}
+        location="Default Location"
+        organization="Default Organization"
+        paramType="PARAMETER_SELECTION_PARAM_TYPE_FOREMAN"
+      />
+      <Footer>
+        <div>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="primary"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Save
+          </Button>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="default"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Footer>
+    </ForemanModal>
+  </div>
+  <div>
+    <ForemanModal
+      dialogClassName="param_selection_modal"
+      id="AppInstanceAnsibleParamSelection"
+      title="Ansible group variables for Application Instance"
+    >
+      <Header
+        closeButton={false}
+      >
+        Parameter specification
+      </Header>
+      <Connect(ParameterSelection)
+        data={Object {}}
+        editModeCallback={[Function]}
+        location="Default Location"
+        organization="Default Organization"
+        paramType="PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE"
+      />
+      <Footer>
+        <div>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="primary"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Save
+          </Button>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="default"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Footer>
+    </ForemanModal>
+  </div>
+  <div>
+    <ForemanModal
+      dialogClassName="add_existing_hosts_modal"
+      id="AppInstanceAddExistingHosts"
+      title="Add existing hosts to an Application Instance"
+    >
+      <Header
+        closeButton={false}
+      >
+        Existing hosts selection
+      </Header>
+      <Connect(ExistingHostSelection)
+        allHosts={Array []}
+        location="Default Location"
+        organization="Default Organization"
+        services={Array []}
+      />
+      <Footer>
+        <div>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="primary"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Save
+          </Button>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="default"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Footer>
+    </ForemanModal>
+  </div>
+  <div />
+  <RailsData
+    key="application_instance_hosts_data"
+    parameter="hosts"
+    value="[]"
+    view="app_instance"
+  />
+  <RailsData
+    key="application_instance_ansible_data"
+    parameter="ansible_vars_all"
+    value="[]"
+    view="app_instance"
+  />
+</span>
+`;
+
+exports[`ApplicationInstance should render newInstance 1`] = `
+<span>
+  <MessageDialog
+    accessibleDescription=""
+    accessibleName=""
+    className=""
+    enforceFocus={true}
+    footer={null}
+    icon={
+      <Icon
+        name="error-circle-o"
+        type="pf"
+      />
+    }
+    onHide={[Function]}
+    primaryAction={[Function]}
+    primaryActionButtonBsStyle="danger"
+    primaryActionButtonContent="OK"
+    primaryContent=""
+    secondaryAction={[Function]}
+    secondaryActionButtonBsStyle="default"
+    secondaryActionButtonContent={null}
+    secondaryContent={null}
+    show={false}
+    title=""
+  />
+  <div
+    className="service-counter"
+  >
+    <ServiceCounter
+      hostList={Array []}
+      serviceList={Array []}
+      title="Service counts"
+    />
+  </div>
+  <div>
+    <AppDefinitionSelector
+      additionalData={
+        Object {
+          "url": undefined,
+        }
+      }
+      editable={true}
+      hidden={false}
+      label="Application Definition"
+      onChange={[Function]}
+      options={
+        Object {
+          "1": "dummy-definition",
+          "2": "test-definition",
+        }
+      }
+      selectValue=""
+      viewText=""
+    />
+    <div
+      style={
+        Object {
+          "paddingTop": 25,
+        }
+      }
+    >
+      <pre>
+        App Definition can't be blank
+      </pre>
+    </div>
+  </div>
+  <div
+    className="form-group"
+  >
+    <TablePfProvider
+      bordered={true}
+      className=""
+      columns={Array []}
+      components={
+        Object {
+          "body": Object {
+            "cell": [Function],
+            "row": [Function],
+          },
+        }
+      }
+      condensed={false}
+      dataTable={true}
+      hover={true}
+      inlineEdit={true}
+      striped={true}
+    >
+      <Header
+        headerRows={
+          Array [
+            Array [],
+          ]
+        }
+      />
+      <Body
+        onRow={[Function]}
+        rowKey="id"
+        rows={Array []}
+      />
+    </TablePfProvider>
+    <AddTableEntry
+      disabled={true}
+      hidden={false}
+      onAddTableEntry={[Function]}
+    />
+    <span
+      style={
+        Object {
+          "marginLeft": 10,
+        }
+      }
+    >
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="default"
+        disabled={true}
+        onClick={[Function]}
+      >
+        <Icon
+          name="server"
+          title="Add existing hosts"
+          type="pf"
+        />
+      </Button>
+    </span>
+    <span
+      style={
+        Object {
+          "marginLeft": 30,
+        }
+      }
+    >
+      Ansible group vars ‘all’:
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="default"
+        disabled={true}
+        onClick={[Function]}
+        style={
+          Object {
+            "marginLeft": 10,
+          }
+        }
+      >
+        <span
+          title="Change ansible variables for 'all'"
+        >
+          A
+        </span>
+      </Button>
+    </span>
+  </div>
+  <div>
+    <ForemanModal
+      dialogClassName="param_selection_modal"
+      id="AppInstanceForemanParamSelection"
+      title="Foreman Parameter specification for Application Instance"
+    >
+      <Header
+        closeButton={false}
+      >
+        Parameter specification
+      </Header>
+      <Connect(ParameterSelection)
+        data={Object {}}
+        editModeCallback={[Function]}
+        hiddenParameterTypes={Array []}
+        location="Default Location"
+        organization="Default Organization"
+        paramType="PARAMETER_SELECTION_PARAM_TYPE_FOREMAN"
+      />
+      <Footer>
+        <div>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="primary"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Save
+          </Button>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="default"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Footer>
+    </ForemanModal>
+  </div>
+  <div>
+    <ForemanModal
+      dialogClassName="param_selection_modal"
+      id="AppInstanceAnsibleParamSelection"
+      title="Ansible group variables for Application Instance"
+    >
+      <Header
+        closeButton={false}
+      >
+        Parameter specification
+      </Header>
+      <Connect(ParameterSelection)
+        data={Object {}}
+        editModeCallback={[Function]}
+        location="Default Location"
+        organization="Default Organization"
+        paramType="PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE"
+      />
+      <Footer>
+        <div>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="primary"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Save
+          </Button>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="default"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Footer>
+    </ForemanModal>
+  </div>
+  <div>
+    <ForemanModal
+      dialogClassName="add_existing_hosts_modal"
+      id="AppInstanceAddExistingHosts"
+      title="Add existing hosts to an Application Instance"
+    >
+      <Header
+        closeButton={false}
+      >
+        Existing hosts selection
+      </Header>
+      <Connect(ExistingHostSelection)
+        allHosts={Array []}
+        location="Default Location"
+        organization="Default Organization"
+        services={Array []}
+      />
+      <Footer>
+        <div>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="primary"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Save
+          </Button>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="default"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Footer>
+    </ForemanModal>
+  </div>
+  <div />
+  <RailsData
+    key="application_instance_hosts_data"
+    parameter="hosts"
+    value="[]"
+    view="app_instance"
+  />
+  <RailsData
+    key="application_instance_ansible_data"
+    parameter="ansible_vars_all"
+    value="[]"
+    view="app_instance"
+  />
+</span>
+`;
+
+exports[`ApplicationInstance should render without optional-values 1`] = `
+<span>
+  <MessageDialog
+    accessibleDescription=""
+    accessibleName=""
+    className=""
+    enforceFocus={true}
+    footer={null}
+    icon={
+      <Icon
+        name="error-circle-o"
+        type="pf"
+      />
+    }
+    onHide={[Function]}
+    primaryAction={[Function]}
+    primaryActionButtonBsStyle="danger"
+    primaryActionButtonContent="OK"
+    primaryContent=""
+    secondaryAction={[Function]}
+    secondaryActionButtonBsStyle="default"
+    secondaryActionButtonContent={null}
+    secondaryContent={null}
+    show={false}
+    title=""
+  />
+  <div
+    className="service-counter"
+  >
+    <ServiceCounter
+      hostList={Array []}
+      serviceList={Array []}
+      title="Service counts"
+    />
+  </div>
+  <div>
+    <AppDefinitionSelector
+      additionalData={
+        Object {
+          "url": undefined,
+        }
+      }
+      editable={false}
+      hidden={false}
+      label="Application Definition"
+      onChange={[Function]}
+      selectValue=""
+      viewText=""
+    />
+    <div
+      style={
+        Object {
+          "paddingTop": 25,
+        }
+      }
+    >
+      <pre>
+        App Definition can't be blank
+      </pre>
+    </div>
+  </div>
+  <div
+    className="form-group"
+  >
+    <TablePfProvider
+      bordered={true}
+      className=""
+      columns={Array []}
+      components={
+        Object {
+          "body": Object {
+            "cell": [Function],
+            "row": [Function],
+          },
+        }
+      }
+      condensed={false}
+      dataTable={true}
+      hover={true}
+      inlineEdit={true}
+      striped={true}
+    >
+      <Header
+        headerRows={
+          Array [
+            Array [],
+          ]
+        }
+      />
+      <Body
+        onRow={[Function]}
+        rowKey="id"
+        rows={Array []}
+      />
+    </TablePfProvider>
+    <AddTableEntry
+      disabled={true}
+      hidden={false}
+      onAddTableEntry={[Function]}
+    />
+    <span
+      style={
+        Object {
+          "marginLeft": 10,
+        }
+      }
+    >
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="default"
+        disabled={true}
+        onClick={[Function]}
+      >
+        <Icon
+          name="server"
+          title="Add existing hosts"
+          type="pf"
+        />
+      </Button>
+    </span>
+    <span
+      style={
+        Object {
+          "marginLeft": 30,
+        }
+      }
+    >
+      Ansible group vars ‘all’:
       <Button
         active={false}
         block={false}
diff --git a/webpack/components/ApplicationInstance/__tests__/__snapshots__/ApplicationInstanceSelectors.test.js.snap b/webpack/components/ApplicationInstance/__tests__/__snapshots__/ApplicationInstanceSelectors.test.js.snap
index 99280db7..3206e2a9 100644
--- a/webpack/components/ApplicationInstance/__tests__/__snapshots__/ApplicationInstanceSelectors.test.js.snap
+++ b/webpack/components/ApplicationInstance/__tests__/__snapshots__/ApplicationInstanceSelectors.test.js.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ApplicationInstanceSelectors should return ParamEditMode from applicationInstanceConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationInstanceSelectors should return ParamEditMode from applicationInstanceConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationInstanceSelectors should return alertModalText from applicationInstanceConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationInstanceSelectors should return alertModalText from applicationInstanceConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationInstanceSelectors should return alertModalTitle from applicationInstanceConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationInstanceSelectors should return alertModalTitle from applicationInstanceConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationInstanceSelectors should return ansibleVarsAll from applicationInstanceConfData_1 fixtures 1`] = `
+exports[`ApplicationInstanceSelectors should return ansibleVarsAll from applicationInstanceConfData1 fixtures 1`] = `
 Array [
   Object {
     "id": 0,
@@ -16,7 +16,7 @@ Array [
 ]
 `;
 
-exports[`ApplicationInstanceSelectors should return appDefinition from applicationInstanceConfData_1 fixtures 1`] = `
+exports[`ApplicationInstanceSelectors should return appDefinition from applicationInstanceConfData1 fixtures 1`] = `
 Object {
   "ansible_vars_all": "[{\\"id\\":0,\\"name\\":\\"repository\\",\\"value\\":\\"https://github.com/bennojoy/mywebapp.git\\"}]",
   "created_at": "2021-03-11 12:51:34 +0100",
@@ -34,7 +34,7 @@ Object {
 }
 `;
 
-exports[`ApplicationInstanceSelectors should return columns from applicationInstanceConfData_1 fixtures 1`] = `
+exports[`ApplicationInstanceSelectors should return columns from applicationInstanceConfData1 fixtures 1`] = `
 Array [
   Object {
     "cell": Object {
@@ -119,11 +119,11 @@ Array [
 ]
 `;
 
-exports[`ApplicationInstanceSelectors should return editMode from applicationInstanceConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationInstanceSelectors should return editMode from applicationInstanceConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationInstanceSelectors should return hiddenForemanParameterTypes from applicationInstanceConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationInstanceSelectors should return hiddenForemanParameterTypes from applicationInstanceConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationInstanceSelectors should return hosts from applicationInstanceConfData_1 fixtures 1`] = `
+exports[`ApplicationInstanceSelectors should return hosts from applicationInstanceConfData1 fixtures 1`] = `
 Array [
   Object {
     "ansibleParameters": Array [
@@ -195,9 +195,9 @@ Array [
 ]
 `;
 
-exports[`ApplicationInstanceSelectors should return parametersData from applicationInstanceConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationInstanceSelectors should return parametersData from applicationInstanceConfData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationInstanceSelectors should return services from applicationInstanceConfData_1 fixtures 1`] = `
+exports[`ApplicationInstanceSelectors should return services from applicationInstanceConfData1 fixtures 1`] = `
 Array [
   Object {
     "ansibleGroup": "webservers",
@@ -281,4 +281,4 @@ Array [
 ]
 `;
 
-exports[`ApplicationInstanceSelectors should return showAlertModal from applicationInstanceConfData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationInstanceSelectors should return showAlertModal from applicationInstanceConfData1 fixtures 1`] = `undefined`;
diff --git a/webpack/components/ApplicationInstance/components/AppDefinitionSelector.js b/webpack/components/ApplicationInstance/components/AppDefinitionSelector.js
index 4d61c97f..66386dab 100644
--- a/webpack/components/ApplicationInstance/components/AppDefinitionSelector.js
+++ b/webpack/components/ApplicationInstance/components/AppDefinitionSelector.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExtSelect from '../../common/ExtSelect';
-import RailsData from '../../common/RailsData'
+import RailsData from '../../common/RailsData';
 
-const AppDefinitionSelector= ({
+const AppDefinitionSelector = ({
   label,
   hidden,
   editable,
@@ -12,33 +12,32 @@ const AppDefinitionSelector= ({
   onChange,
   options,
   additionalData,
-}) =>{
-  return (
-    <div className="form-group">
-      <label className="col-md-2 control-label">{label}</label>
-      <div className="col-md-4">
-        <ExtSelect
-          hidden={hidden}
-          editable={editable}
-          viewText={viewText}
-          selectValue={selectValue}
-          onChange={onChange}
-          options={options}
-          additionalData={additionalData}
-        />
-        <RailsData
-          key='app_instance_id'
-          view='app_instance'
-          parameter='app_definition_id'
-          value={selectValue}
-        />
-      </div>
+}) => (
+  <div className="form-group">
+    <label className="col-md-2 control-label">{label}</label>
+    <div className="col-md-4">
+      <ExtSelect
+        hidden={hidden}
+        editable={editable}
+        viewText={viewText}
+        selectValue={selectValue}
+        onChange={onChange}
+        options={options}
+        additionalData={additionalData}
+      />
+      <RailsData
+        key="app_instance_id"
+        view="app_instance"
+        parameter="app_definition_id"
+        value={selectValue}
+      />
     </div>
-  );
-};
+  </div>
+);
 
 AppDefinitionSelector.propTypes = {
   label: PropTypes.string.isRequired,
+  hidden: PropTypes.bool,
   editable: PropTypes.bool.isRequired,
   viewText: PropTypes.string,
   selectValue: PropTypes.string,
@@ -47,4 +46,12 @@ AppDefinitionSelector.propTypes = {
   additionalData: PropTypes.object,
 };
 
+AppDefinitionSelector.defaultProps = {
+  hidden: false,
+  viewText: undefined,
+  selectValue: undefined,
+  options: undefined,
+  additionalData: undefined,
+};
+
 export default AppDefinitionSelector;
diff --git a/webpack/components/ApplicationInstance/components/Service.js b/webpack/components/ApplicationInstance/components/Service.js
index 80d393b6..95601796 100644
--- a/webpack/components/ApplicationInstance/components/Service.js
+++ b/webpack/components/ApplicationInstance/components/Service.js
@@ -1,24 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 
-const Service= ({
-  name,
-  currentCount,
-  minCount,
-  maxCount,
-}) =>{
-  return (
-    <div>
-      <label>{name}:</label> {currentCount} ({__("Min/Max")}: {minCount}/{maxCount})
-    </div>
-  );
-};
-
-Service.defaultProps = {
-  minCount: 0,
-  maxCount: 0,
-  currentCount: 0,
-};
+const Service = ({ name, currentCount, minCount, maxCount }) => (
+  <div>
+    <label>{name}:</label> {currentCount} ({__('Min/Max')}: {minCount}/
+    {maxCount})
+  </div>
+);
 
 Service.propTypes = {
   name: PropTypes.string.isRequired,
diff --git a/webpack/components/ApplicationInstance/components/ServiceCounter.js b/webpack/components/ApplicationInstance/components/ServiceCounter.js
index 4efb66a7..750659d5 100644
--- a/webpack/components/ApplicationInstance/components/ServiceCounter.js
+++ b/webpack/components/ApplicationInstance/components/ServiceCounter.js
@@ -1,37 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Service from './Service';
-import { arrayToObjectObj } from '../../../helper';
-import { cloneDeep } from 'lodash';
 
-const ServiceCounter= ({
-  title,
-  serviceList,
-}) =>{
-  if (serviceList == undefined || serviceList.length == 0) {
+const ServiceCounter = ({ title, serviceList }) => {
+  if (serviceList === undefined || serviceList.length === 0) {
     return null;
   }
-  const services = cloneDeep(arrayToObjectObj(serviceList, "id"));
+  const services = serviceList.map(service => (
+    <Service
+      key={service.id}
+      name={service.name}
+      currentCount={service.currentCount}
+      minCount={Number(service.minCount)}
+      maxCount={Number(service.maxCount)}
+    />
+  ));
 
   return (
     <div>
       <label className="service-counter-title">{title}</label>
-    {Object.keys(services).map(key => (
-      <Service
-        key={services[key].id}
-        name={services[key].name}
-        currentCount={services[key].currentCount}
-        minCount={Number(services[key].minCount)}
-        maxCount={Number(services[key].maxCount)}
-      />)
-    )}
+      {services}
     </div>
   );
 };
 
 ServiceCounter.propTypes = {
   title: PropTypes.string.isRequired,
-  serviceList: PropTypes.array,
+  serviceList: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      currentCount: PropTypes.number.isRequired,
+      minCount: PropTypes.string.isRequired,
+      maxCount: PropTypes.string.isRequired,
+    })
+  ),
+};
+
+ServiceCounter.defaultProps = {
+  serviceList: undefined,
 };
 
 export default ServiceCounter;
diff --git a/webpack/components/ApplicationInstance/index.js b/webpack/components/ApplicationInstance/index.js
index 6455c51d..d1878722 100644
--- a/webpack/components/ApplicationInstance/index.js
+++ b/webpack/components/ApplicationInstance/index.js
@@ -42,4 +42,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(ApplicationInstance);
-
diff --git a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.js b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.js
index 023be966..24caa8ab 100644
--- a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.js
+++ b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReport.js
@@ -1,48 +1,46 @@
-import React, { useState } from 'react'
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  Icon,
-  Spinner,
-} from 'patternfly-react';
+import { Icon, Spinner } from 'patternfly-react';
 
-import {
-  VerticalTabs,
-} from 'patternfly-react-extensions';
+import { VerticalTabs } from 'patternfly-react-extensions';
 
-import {
-  translate as __
-} from 'foremanReact/common/I18n';
+import { translate as __ } from 'foremanReact/common/I18n';
 
 import PowerStatus from 'foremanReact/components/hosts/powerStatus';
 import ReportViewer from './components/ReportViewer';
 
 class ApplicationInstanceReport extends React.Component {
-
-  constructor(props) {
-    super(props);
-  }
-
   componentDidMount() {
     const {
-      data: { hosts, deploymentState, initialConfigureState, initialConfigureJobUrl },
+      data: {
+        hosts,
+        deploymentState,
+        initialConfigureState,
+        initialConfigureJobUrl,
+      },
       initApplicationInstanceReport,
-      setActiveHost,
     } = this.props;
 
-    initApplicationInstanceReport(hosts, deploymentState, initialConfigureState, initialConfigureJobUrl);
+    initApplicationInstanceReport(
+      hosts,
+      deploymentState,
+      initialConfigureState,
+      initialConfigureJobUrl
+    );
     this.reloadReportData();
-  };
+  }
 
   reloadReportData() {
     const {
       data: { appInstanceId, reportDataUrl },
-      deploymentState, initialConfigureState,
+      deploymentState,
+      initialConfigureState,
       loadReportData,
     } = this.props;
 
     // if both states are unknown, it means, that the component was just loaded. try again after a short timeout.
-    if (deploymentState == 'unknown' && initialConfigureState == 'unknown') {
+    if (deploymentState === 'unknown' && initialConfigureState === 'unknown') {
       setTimeout(() => {
         this.reloadReportData();
       }, 1000);
@@ -50,9 +48,14 @@ class ApplicationInstanceReport extends React.Component {
       return;
     }
 
-    if ((deploymentState != 'new' && deploymentState != 'finished' && deploymentState != 'failed') ||
-        (initialConfigureState == 'unconfigured' || initialConfigureState == 'scheduled' || initialConfigureState == 'pending')) {
-
+    if (
+      (deploymentState !== 'new' &&
+        deploymentState !== 'finished' &&
+        deploymentState !== 'failed') ||
+      initialConfigureState === 'unconfigured' ||
+      initialConfigureState === 'scheduled' ||
+      initialConfigureState === 'pending'
+    ) {
       loadReportData(reportDataUrl, appInstanceId);
 
       setTimeout(() => {
@@ -62,85 +65,104 @@ class ApplicationInstanceReport extends React.Component {
   }
 
   isActive(id) {
-    return (this.props.activeHostId === id);
+    return this.props.activeHostId === id;
   }
 
   collectLastReportData(hosts) {
-    const {
-      setActiveHost,
-    } = this.props;
+    const { setActiveHost } = this.props;
 
-    const tabs = []
-    for (const [index, value] of hosts.entries()) {
+    const tabs = [];
+    // for (const [index, value] of hosts.entries()) {
+    hosts.forEach((value, index) => {
       tabs.push(
         <VerticalTabs.Tab
           id={index}
-          key={"vt_tab_"+index}
-          title={ value.name }
-          wrapStyle='nowrap'
+          key={`vt_tab_${index}`}
+          title={value.name}
+          wrapStyle="nowrap"
           onActivate={() => setActiveHost(index)}
           active={this.isActive(index)}
         />
       );
-    }
+    });
 
     return tabs;
   }
 
+  // eslint-disable-next-line class-methods-use-this
   lastReportStatus(host) {
-    if (!host['id']) {
+    if (!host.id) {
       return (
         <div>
-          <span>Host: { host['name'] }</span>
+          <span>Host: {host.name}</span>
           <span>&nbsp;|&nbsp;</span>
-          <span>State: { __('not build') }</span>
+          <span>State: {__('not build')}</span>
           <span>&nbsp;|&nbsp;</span>
-          <span>Power Status: { __('unknown') }</span>
+          <span>Power Status: {__('unknown')}</span>
         </div>
-      )
-    } else {
-      const already_deployed_msg = __("Already existing host which was added to the application instance");
-      return (
-        <div>
-          <span>Host: <a href={ host['hostUrl'] }>{ host['name'] }</a></span>
-          <span>&nbsp;|&nbsp;</span>
-          <span>State: { host['build'] == true ? "in Build" : "Deployed" }</span>
-          <span>&nbsp;|&nbsp;</span>
-          <span>Power Status: <PowerStatus key={ "power_status_"+ host['id'] } id={ host['id'] } url={ host['powerStatusUrl'] } data={{ id: host['id'], url: host['powerStatusUrl'] }} /></span>
-          {host['isExistingHost'] ? (
-            <span>
-              &nbsp;|&nbsp; Existing host &nbsp;
-              <Icon style={{marginRight: 8, marginLeft: 2}} type="pf" name="info" title={already_deployed_msg} />
-            </span>
-          ) : (<span></span>)}
-        </div>
-      )
+      );
     }
+    const alreadyDeployedMsg = __(
+      'Already existing host which was added to the application instance'
+    );
+    return (
+      <div>
+        <span>
+          Host: <a href={host.hostUrl}>{host.name}</a>
+        </span>
+        <span>&nbsp;|&nbsp;</span>
+        <span>State: {host.build === true ? 'in Build' : 'Deployed'}</span>
+        <span>&nbsp;|&nbsp;</span>
+        <span>
+          Power Status:{' '}
+          <PowerStatus
+            key={`power_status_${host.id}`}
+            id={host.id}
+            url={host.powerStatusUrl}
+            data={{ id: host.id, url: host.powerStatusUrl }}
+          />
+        </span>
+        {host.isExistingHost ? (
+          <span>
+            &nbsp;|&nbsp; Existing host &nbsp;
+            <Icon
+              style={{ marginRight: 8, marginLeft: 2 }}
+              type="pf"
+              name="info"
+              title={alreadyDeployedMsg}
+            />
+          </span>
+        ) : (
+          <span />
+        )}
+      </div>
+    );
   }
 
   render() {
     const {
-      data: { appInstanceId, appInstanceName, deployTaskUrl, configureJobUrl, reportDataUrl },
-      activeHostId, hosts,
+      data: { deployTaskUrl, configureJobUrl },
+      activeHostId,
       deploymentState,
-      initialConfigureState, initialConfigureJobUrl, showInitialConfigureJob,
-      loadReportData,
+      hosts,
+      initialConfigureJobUrl,
+      initialConfigureState,
+      loading,
+      showInitialConfigureJob,
     } = this.props;
 
-    let tabs = [];
-    let reportStatus = undefined;
-    let report = undefined;
+    let report;
 
     // This handles the first call to render() in which the state hosts is always empty
-    if (hosts.length == 0) {
-      return (<span>No host</span>);
+    if (hosts.length === 0) {
+      return <span>No host</span>;
     }
 
-    tabs = this.collectLastReportData(hosts);
-    reportStatus = this.lastReportStatus(hosts[activeHostId]);
+    const tabs = this.collectLastReportData(hosts);
+    const reportStatus = this.lastReportStatus(hosts[activeHostId]);
 
-    if (hosts[activeHostId]['progress_report']) {
-      report = hosts[activeHostId]['progress_report'];
+    if (hosts[activeHostId].progress_report) {
+      report = hosts[activeHostId].progress_report;
     }
 
     return (
@@ -149,75 +171,110 @@ class ApplicationInstanceReport extends React.Component {
           <div>
             <div className="deploy_status_head">Host deployment state</div>
             <div className="deploy_status_content">
-              { (deploymentState != 'new' && deploymentState != 'finished' && deploymentState != 'failed') ? (<span><Spinner loading size='sm' /> &nbsp;</span>) : (<span></span>) }
-              { deploymentState }
+              {loading ||
+              (deploymentState !== 'new' &&
+                deploymentState !== 'finished' &&
+                deploymentState !== 'failed') ? (
+                <span>
+                  <Spinner loading size="sm" /> &nbsp;
+                </span>
+              ) : (
+                <span />
+              )}
+              {deploymentState}
             </div>
           </div>
           <div>
             <div className="deploy_status_head">Deployment task</div>
-            <div className="deploy_status_content"><a href={ deployTaskUrl } >Last deployment task</a></div>
-          </div>
-          { (showInitialConfigureJob == true) ? (
-          <div>
-            <div className="deploy_status_head">Configuration job</div>
             <div className="deploy_status_content">
-              { (initialConfigureState == 'scheduled' || initialConfigureState == 'pending') ? (<span><Spinner loading size='sm' /> &nbsp;</span>) : (<span></span>) }
-              { (initialConfigureState != 'unconfigured' && initialConfigureState != 'scheduled') ? (<a href={ initialConfigureJobUrl }>Configuration job</a>) : (<span></span>) }
-              { (initialConfigureState != 'unconfigured') ? (<span>&nbsp; State: { initialConfigureState }</span>) : (<span></span>) }
+              <a href={deployTaskUrl}>Last deployment task</a>
             </div>
           </div>
+          {showInitialConfigureJob === true ? (
+            <div>
+              <div className="deploy_status_head">Configuration job</div>
+              <div className="deploy_status_content">
+                {initialConfigureState === 'scheduled' ||
+                initialConfigureState === 'pending' ? (
+                  <span>
+                    <Spinner loading size="sm" /> &nbsp;
+                  </span>
+                ) : (
+                  <span />
+                )}
+                {initialConfigureState !== 'unconfigured' &&
+                initialConfigureState !== 'scheduled' ? (
+                  <a href={initialConfigureJobUrl}>Configuration job</a>
+                ) : (
+                  <span />
+                )}
+                {initialConfigureState !== 'unconfigured' ? (
+                  <span>&nbsp; State: {initialConfigureState}</span>
+                ) : (
+                  <span />
+                )}
+              </div>
+            </div>
           ) : (
-          <div>
-            <div className="deploy_status_head">Configuration job</div>
-            <div className="deploy_status_content"><a href={ configureJobUrl }>Configuration jobs</a></div>
-          </div>
-          ) }
+            <div>
+              <div className="deploy_status_head">Configuration job</div>
+              <div className="deploy_status_content">
+                <a href={configureJobUrl}>Configuration jobs</a>
+              </div>
+            </div>
+          )}
         </div>
         <div className="deploy_report_hosts">
           Hosts
-          <VerticalTabs id="vertical_tabs">
-            {tabs}
-          </VerticalTabs>
-        </div>
-        <div className="deploy_report_status">
-          {reportStatus}
+          <VerticalTabs id="vertical_tabs">{tabs}</VerticalTabs>
         </div>
+        <div className="deploy_report_status">{reportStatus}</div>
         <div className="deploy_report_tasks">
           <ReportViewer report={report} />
         </div>
       </span>
-    )};
+    );
+  }
 }
 
 ApplicationInstanceReport.defaultProps = {
-  error: {},
-  appInstanceName: '',
-  deployTaskUrl: '',
-  configureJobUrl: '',
-  hosts: [],
-  report: [],
+  data: {
+    initialConfigureJobUrl: undefined,
+  },
   activeHostId: 0,
+  configureJobUrl: '',
   deploymentState: 'unknown',
-  initialConfigureState: 'unknown',
+  deployTaskUrl: '',
+  hosts: [],
   initialConfigureJobUrl: '',
+  initialConfigureState: 'unknown',
+  loading: false,
   showInitialConfigureJob: false,
-}
+};
 
 ApplicationInstanceReport.propTypes = {
-  initApplicationInstanceReport: PropTypes.func,
-  appInstanceName: PropTypes.string,
-  deployTaskUrl: PropTypes.string,
+  data: PropTypes.shape({
+    hosts: PropTypes.array.isRequired,
+    deploymentState: PropTypes.string.isRequired,
+    appInstanceId: PropTypes.number.isRequired,
+    reportDataUrl: PropTypes.string.isRequired,
+    deployTaskUrl: PropTypes.string.isRequired,
+    configureJobUrl: PropTypes.string.isRequired,
+    initialConfigureState: PropTypes.string.isRequired,
+    initialConfigureJobUrl: PropTypes.string,
+  }),
+  activeHostId: PropTypes.number,
   configureJobUrl: PropTypes.string,
   deploymentState: PropTypes.string,
-  initialConfigureState: PropTypes.string,
+  deployTaskUrl: PropTypes.string,
+  hosts: PropTypes.array,
   initialConfigureJobUrl: PropTypes.string,
+  initialConfigureState: PropTypes.string,
+  loading: PropTypes.bool,
   showInitialConfigureJob: PropTypes.bool,
-  hosts: PropTypes.array,
-  deploymentState: PropTypes.string,
-  report: PropTypes.array,
-  setActiveHost: PropTypes.func,
-  loadReportData: PropTypes.func,
-  activeHostId: PropTypes.number,
+  initApplicationInstanceReport: PropTypes.func.isRequired,
+  loadReportData: PropTypes.func.isRequired,
+  setActiveHost: PropTypes.func.isRequired,
 };
 
 export default ApplicationInstanceReport;
diff --git a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportActions.js b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportActions.js
index 60fc5dca..a0628b44 100644
--- a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportActions.js
+++ b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportActions.js
@@ -1,15 +1,5 @@
-import React from 'react';
 import api from 'foremanReact/API';
 
-import {
-  actionHeaderCellFormatter,
-} from 'patternfly-react';
-
-import {
-  propsToSnakeCase,
-  propsToCamelCase,
-} from 'foremanReact/common/helpers';
-
 import {
   APPLICATION_INSTANCE_REPORT_INIT,
   APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST,
@@ -19,7 +9,10 @@ import {
 } from './ApplicationInstanceReportConstants';
 
 export const initApplicationInstanceReport = (
-  hosts, deploymentState, initialConfigureState, initialConfigureJobUrl,
+  hosts,
+  deploymentState,
+  initialConfigureState,
+  initialConfigureJobUrl
 ) => dispatch => {
   const initialState = {};
 
@@ -30,7 +23,7 @@ export const initApplicationInstanceReport = (
 
   // Decide if it should show only the initial Configure job state + URL or
   // the URL to all configuration jobs
-  if (initialConfigureState == 'unconfigured') {
+  if (initialConfigureState === 'unconfigured') {
     initialState.showInitialConfigureJob = true;
   } else {
     initialState.showInitialConfigureJob = false;
@@ -44,22 +37,24 @@ export const initApplicationInstanceReport = (
 
 export const loadReportData = (
   reportDataUrl,
-  appInstanceId,
-) => dispatch => {
+  appInstanceId
+) => async dispatch => {
   dispatch({ type: APPLICATION_INSTANCE_REPORT_LOAD_REPORT_REQUEST });
 
   const baseUrl = reportDataUrl;
-  const realUrl = baseUrl.replace("__id__", appInstanceId);
+  const realUrl = baseUrl.replace('__id__', appInstanceId);
 
-  return api
-    .get(realUrl, {}, {})
-    .then(({ data }) =>
-      dispatch({
-        type: APPLICATION_INSTANCE_REPORT_LOAD_REPORT_SUCCESS,
-        payload: { ...data }
-      })
-    )
-    .catch(error => dispatch(errorHandler(APPLICATION_INSTANCE_REPORT_LOAD_REPORT_FAILURE, error)));
+  try {
+    const { data } = await api.get(realUrl, {}, {});
+    dispatch({
+      type: APPLICATION_INSTANCE_REPORT_LOAD_REPORT_SUCCESS,
+      payload: { ...data },
+    });
+  } catch (error) {
+    dispatch(
+      errorHandler(APPLICATION_INSTANCE_REPORT_LOAD_REPORT_FAILURE, error)
+    );
+  }
 };
 
 const errorHandler = (msg, err) => {
@@ -70,7 +65,7 @@ const errorHandler = (msg, err) => {
   return { type: msg, payload: { error } };
 };
 
-export const setActiveHost = (id) => ({
+export const setActiveHost = id => ({
   type: APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST,
   payload: { activeHostId: id },
 });
diff --git a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportConstants.js b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportConstants.js
index 85b007ab..0a769db7 100644
--- a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportConstants.js
+++ b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportConstants.js
@@ -1,5 +1,10 @@
-export const APPLICATION_INSTANCE_REPORT_INIT = 'APPLICATION_INSTANCE_REPORT_INIT';
-export const APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST = 'APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST';
-export const APPLICATION_INSTANCE_REPORT_LOAD_REPORT_REQUEST = 'APPLICATION_INSTANCE_REPORT_LOAD_REPORT_REQUEST';
-export const APPLICATION_INSTANCE_REPORT_LOAD_REPORT_SUCCESS = 'APPLICATION_INSTANCE_REPORT_LOAD_REPORT_SUCCESS';
-export const APPLICATION_INSTANCE_REPORT_LOAD_REPORT_FAILURE = 'APPLICATION_INSTANCE_REPORT_LOAD_REPORT_FAILURE';
+export const APPLICATION_INSTANCE_REPORT_INIT =
+  'APPLICATION_INSTANCE_REPORT_INIT';
+export const APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST =
+  'APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST';
+export const APPLICATION_INSTANCE_REPORT_LOAD_REPORT_REQUEST =
+  'APPLICATION_INSTANCE_REPORT_LOAD_REPORT_REQUEST';
+export const APPLICATION_INSTANCE_REPORT_LOAD_REPORT_SUCCESS =
+  'APPLICATION_INSTANCE_REPORT_LOAD_REPORT_SUCCESS';
+export const APPLICATION_INSTANCE_REPORT_LOAD_REPORT_FAILURE =
+  'APPLICATION_INSTANCE_REPORT_LOAD_REPORT_FAILURE';
diff --git a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportReducer.js b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportReducer.js
index 480fbdcf..964bb160 100644
--- a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportReducer.js
+++ b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportReducer.js
@@ -1,11 +1,5 @@
 import Immutable from 'seamless-immutable';
 
-import {
-  cloneDeep,
-  findIndex,
-  findLastIndex,
-} from 'lodash';
-
 import {
   APPLICATION_INSTANCE_REPORT_INIT,
   APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST,
@@ -28,13 +22,13 @@ const applicationInstanceReport = (state = initialState, action) => {
     }
     case APPLICATION_INSTANCE_REPORT_SET_ACTIVE_HOST: {
       return state.merge({
-        loading: true,
         activeHostId: payload.activeHostId,
-      })
+      });
     }
     case APPLICATION_INSTANCE_REPORT_LOAD_REPORT_REQUEST: {
-      // Nothing to do
-      return state;
+      return state.merge({
+        loading: true,
+      });
     }
     case APPLICATION_INSTANCE_REPORT_LOAD_REPORT_SUCCESS: {
       return state.merge({
@@ -42,11 +36,14 @@ const applicationInstanceReport = (state = initialState, action) => {
         initialConfigureState: payload.initialConfigureState,
         initialConfigureJobUrl: payload.initialConfigureJobUrl,
         hosts: payload.hosts,
+        loading: false,
       });
     }
     case APPLICATION_INSTANCE_REPORT_LOAD_REPORT_FAILURE: {
-      console.log("Error while loading report data: "+ payload.error);
-      return state.merge({ error: payload.error});
+      return state.merge({
+        error: payload.error,
+        loading: false,
+      });
     }
     default: {
       return state;
diff --git a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportSelectors.js b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportSelectors.js
index 57651a28..901d4b44 100644
--- a/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportSelectors.js
+++ b/webpack/components/ApplicationInstanceReport/ApplicationInstanceReportSelectors.js
@@ -1,8 +1,14 @@
-const applicationInstanceReport = state => state.foremanAcd.applicationInstanceReport;
+const applicationInstanceReport = state =>
+  state.foremanAcd.applicationInstanceReport;
 
 export const selectHosts = state => applicationInstanceReport(state).hosts;
-export const selectActiveHostId = state => applicationInstanceReport(state).activeHostId;
-export const selectDeploymentState = state => applicationInstanceReport(state).deploymentState;
-export const selectInitialConfigureState = state => applicationInstanceReport(state).initialConfigureState;
-export const selectInitialConfigureJobUrl = state => applicationInstanceReport(state).initialConfigureJobUrl;
-export const selectShowInitialConfigureJob = state => applicationInstanceReport(state).showInitialConfigureJob;
+export const selectActiveHostId = state =>
+  applicationInstanceReport(state).activeHostId;
+export const selectDeploymentState = state =>
+  applicationInstanceReport(state).deploymentState;
+export const selectInitialConfigureState = state =>
+  applicationInstanceReport(state).initialConfigureState;
+export const selectInitialConfigureJobUrl = state =>
+  applicationInstanceReport(state).initialConfigureJobUrl;
+export const selectShowInitialConfigureJob = state =>
+  applicationInstanceReport(state).showInitialConfigureJob;
diff --git a/webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportData_1.fixtures.js b/webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportData1.fixtures.js
similarity index 55%
rename from webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportData_1.fixtures.js
rename to webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportData1.fixtures.js
index 5b35c4e5..2175682f 100644
--- a/webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportData_1.fixtures.js
+++ b/webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportData1.fixtures.js
@@ -1,9 +1,9 @@
-export const applicationInstanceReportData_1 = {
+export const applicationInstanceReportData1 = {
   name: false,
   error: {
     errorMsg: '',
     status: '',
-    statusText: ''
+    statusText: '',
   },
   hosts: [
     {
@@ -18,15 +18,16 @@ export const applicationInstanceReportData_1 = {
           timestamp: '2021-03-12T09:52:10.190Z',
           status: 'completed',
           priority: 3,
-          created: 1615542728.8466988
+          created: 1615542728.8466988,
         },
         {
           id: 'Query instance details for great-web-app-db-1.deploy3.dev.atix',
-          name: 'Query instance details for great-web-app-db-1.deploy3.dev.atix',
+          name:
+            'Query instance details for great-web-app-db-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:10.385Z',
           status: 'completed',
           priority: 5,
-          created: 1615542728.8474095
+          created: 1615542728.8474095,
         },
         {
           id: 'dhcp_create_192.168.171.103',
@@ -34,55 +35,65 @@ export const applicationInstanceReportData_1 = {
           timestamp: '2021-03-12T09:52:10.584Z',
           status: 'completed',
           priority: 10,
-          created: 1615542728.0081317
+          created: 1615542728.0081317,
         },
         {
           id: 'Create IPv4 DNS record for great-web-app-db-1.deploy3.dev.atix',
-          name: 'Create IPv4 DNS record for great-web-app-db-1.deploy3.dev.atix',
+          name:
+            'Create IPv4 DNS record for great-web-app-db-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:10.679Z',
           status: 'completed',
           priority: 10,
-          created: 1615542728.04177
+          created: 1615542728.04177,
         },
         {
-          id: 'Create Reverse IPv4 DNS record for great-web-app-db-1.deploy3.dev.atix',
-          name: 'Create Reverse IPv4 DNS record for great-web-app-db-1.deploy3.dev.atix',
+          id:
+            'Create Reverse IPv4 DNS record for great-web-app-db-1.deploy3.dev.atix',
+          name:
+            'Create Reverse IPv4 DNS record for great-web-app-db-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:10.798Z',
           status: 'completed',
           priority: 10,
-          created: 1615542728.0424814
+          created: 1615542728.0424814,
         },
         {
-          id: 'Deploy TFTP PXELinux config for great-web-app-db-1.deploy3.dev.atix',
-          name: 'Deploy TFTP PXELinux config for great-web-app-db-1.deploy3.dev.atix',
+          id:
+            'Deploy TFTP PXELinux config for great-web-app-db-1.deploy3.dev.atix',
+          name:
+            'Deploy TFTP PXELinux config for great-web-app-db-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:11.178Z',
           status: 'completed',
           priority: 20,
-          created: 1615542728.0881674
+          created: 1615542728.0881674,
         },
         {
-          id: 'Deploy TFTP PXEGrub2 config for great-web-app-db-1.deploy3.dev.atix',
-          name: 'Deploy TFTP PXEGrub2 config for great-web-app-db-1.deploy3.dev.atix',
+          id:
+            'Deploy TFTP PXEGrub2 config for great-web-app-db-1.deploy3.dev.atix',
+          name:
+            'Deploy TFTP PXEGrub2 config for great-web-app-db-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:11.615Z',
           status: 'completed',
           priority: 20,
-          created: 1615542728.0883749
+          created: 1615542728.0883749,
         },
         {
-          id: 'Deploy TFTP PXEGrub config for great-web-app-db-1.deploy3.dev.atix',
-          name: 'Deploy TFTP PXEGrub config for great-web-app-db-1.deploy3.dev.atix',
+          id:
+            'Deploy TFTP PXEGrub config for great-web-app-db-1.deploy3.dev.atix',
+          name:
+            'Deploy TFTP PXEGrub config for great-web-app-db-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:11.642Z',
           status: 'completed',
           priority: 20,
-          created: 1615542728.088634
+          created: 1615542728.088634,
         },
         {
           id: 'Deploy TFTP iPXE config for great-web-app-db-1.deploy3.dev.atix',
-          name: 'Deploy TFTP iPXE config for great-web-app-db-1.deploy3.dev.atix',
+          name:
+            'Deploy TFTP iPXE config for great-web-app-db-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:11.874Z',
           status: 'completed',
           priority: 20,
-          created: 1615542728.0888274
+          created: 1615542728.0888274,
         },
         {
           id: 'Fetch TFTP boot files for great-web-app-db-1.deploy3.dev.atix',
@@ -90,7 +101,7 @@ export const applicationInstanceReportData_1 = {
           timestamp: '2021-03-12T09:52:11.981Z',
           status: 'completed',
           priority: 25,
-          created: 1615542728.0894718
+          created: 1615542728.0894718,
         },
         {
           id: 'Power up compute instance great-web-app-db-1.deploy3.dev.atix',
@@ -98,26 +109,30 @@ export const applicationInstanceReportData_1 = {
           timestamp: '2021-03-12T09:52:12.950Z',
           status: 'completed',
           priority: 1000,
-          created: 1615542728.8482428
+          created: 1615542728.8482428,
         },
         {
-          id: 'Cleanup PuppetCA certificates for great-web-app-db-1.deploy3.dev.atix',
-          name: 'Cleanup PuppetCA certificates for great-web-app-db-1.deploy3.dev.atix',
+          id:
+            'Cleanup PuppetCA certificates for great-web-app-db-1.deploy3.dev.atix',
+          name:
+            'Cleanup PuppetCA certificates for great-web-app-db-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:13.390Z',
           status: 'completed',
           priority: 51,
-          created: 1615542728.8508224
+          created: 1615542728.8508224,
         },
         {
-          id: 'Enable PuppetCA autosigning for great-web-app-db-1.deploy3.dev.atix',
-          name: 'Enable PuppetCA autosigning for great-web-app-db-1.deploy3.dev.atix',
+          id:
+            'Enable PuppetCA autosigning for great-web-app-db-1.deploy3.dev.atix',
+          name:
+            'Enable PuppetCA autosigning for great-web-app-db-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:13.442Z',
           status: 'completed',
           priority: 55,
-          created: 1615542728.8514216
-        }
+          created: 1615542728.8514216,
+        },
       ],
-      powerStatusUrl: '/api/v2/hosts/great-web-app-db-1.deploy3.dev.atix/power'
+      powerStatusUrl: '/api/v2/hosts/great-web-app-db-1.deploy3.dev.atix/power',
     },
     {
       id: 9,
@@ -131,15 +146,16 @@ export const applicationInstanceReportData_1 = {
           timestamp: '2021-03-12T09:52:14.825Z',
           status: 'completed',
           priority: 3,
-          created: 1615542733.824889
+          created: 1615542733.824889,
         },
         {
           id: 'Query instance details for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Query instance details for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Query instance details for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:15.007Z',
           status: 'completed',
           priority: 5,
-          created: 1615542733.825672
+          created: 1615542733.825672,
         },
         {
           id: 'dhcp_create_192.168.171.104',
@@ -147,90 +163,108 @@ export const applicationInstanceReportData_1 = {
           timestamp: '2021-03-12T09:52:15.181Z',
           status: 'completed',
           priority: 10,
-          created: 1615542733.5710943
+          created: 1615542733.5710943,
         },
         {
           id: 'Create IPv4 DNS record for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Create IPv4 DNS record for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Create IPv4 DNS record for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:15.251Z',
           status: 'completed',
           priority: 10,
-          created: 1615542733.599793
+          created: 1615542733.599793,
         },
         {
-          id: 'Create Reverse IPv4 DNS record for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Create Reverse IPv4 DNS record for great-web-app-web-1.deploy3.dev.atix',
+          id:
+            'Create Reverse IPv4 DNS record for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Create Reverse IPv4 DNS record for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:15.328Z',
           status: 'completed',
           priority: 10,
-          created: 1615542733.600369
+          created: 1615542733.600369,
         },
         {
-          id: 'Deploy TFTP PXELinux config for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Deploy TFTP PXELinux config for great-web-app-web-1.deploy3.dev.atix',
+          id:
+            'Deploy TFTP PXELinux config for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Deploy TFTP PXELinux config for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:15.681Z',
           status: 'completed',
           priority: 20,
-          created: 1615542733.6356068
+          created: 1615542733.6356068,
         },
         {
-          id: 'Deploy TFTP PXEGrub2 config for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Deploy TFTP PXEGrub2 config for great-web-app-web-1.deploy3.dev.atix',
+          id:
+            'Deploy TFTP PXEGrub2 config for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Deploy TFTP PXEGrub2 config for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:16.152Z',
           status: 'completed',
           priority: 20,
-          created: 1615542733.635817
+          created: 1615542733.635817,
         },
         {
-          id: 'Deploy TFTP PXEGrub config for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Deploy TFTP PXEGrub config for great-web-app-web-1.deploy3.dev.atix',
+          id:
+            'Deploy TFTP PXEGrub config for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Deploy TFTP PXEGrub config for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:16.183Z',
           status: 'completed',
           priority: 20,
-          created: 1615542733.6360064
+          created: 1615542733.6360064,
         },
         {
-          id: 'Deploy TFTP iPXE config for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Deploy TFTP iPXE config for great-web-app-web-1.deploy3.dev.atix',
+          id:
+            'Deploy TFTP iPXE config for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Deploy TFTP iPXE config for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:16.417Z',
           status: 'completed',
           priority: 20,
-          created: 1615542733.6362345
+          created: 1615542733.6362345,
         },
         {
           id: 'Fetch TFTP boot files for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Fetch TFTP boot files for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Fetch TFTP boot files for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:16.523Z',
           status: 'completed',
           priority: 25,
-          created: 1615542733.6365006
+          created: 1615542733.6365006,
         },
         {
           id: 'Power up compute instance great-web-app-web-1.deploy3.dev.atix',
-          name: 'Power up compute instance great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Power up compute instance great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:17.533Z',
           status: 'completed',
           priority: 1000,
-          created: 1615542733.8267431
+          created: 1615542733.8267431,
         },
         {
-          id: 'Cleanup PuppetCA certificates for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Cleanup PuppetCA certificates for great-web-app-web-1.deploy3.dev.atix',
+          id:
+            'Cleanup PuppetCA certificates for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Cleanup PuppetCA certificates for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:17.944Z',
           status: 'completed',
           priority: 51,
-          created: 1615542733.8292165
+          created: 1615542733.8292165,
         },
         {
-          id: 'Enable PuppetCA autosigning for great-web-app-web-1.deploy3.dev.atix',
-          name: 'Enable PuppetCA autosigning for great-web-app-web-1.deploy3.dev.atix',
+          id:
+            'Enable PuppetCA autosigning for great-web-app-web-1.deploy3.dev.atix',
+          name:
+            'Enable PuppetCA autosigning for great-web-app-web-1.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:17.995Z',
           status: 'completed',
           priority: 55,
-          created: 1615542733.8294067
-        }
+          created: 1615542733.8294067,
+        },
       ],
-      powerStatusUrl: '/api/v2/hosts/great-web-app-web-1.deploy3.dev.atix/power'
+      powerStatusUrl:
+        '/api/v2/hosts/great-web-app-web-1.deploy3.dev.atix/power',
     },
     {
       id: 10,
@@ -244,15 +278,16 @@ export const applicationInstanceReportData_1 = {
           timestamp: '2021-03-12T09:52:19.221Z',
           status: 'completed',
           priority: 3,
-          created: 1615542738.3446305
+          created: 1615542738.3446305,
         },
         {
           id: 'Query instance details for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Query instance details for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Query instance details for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:19.419Z',
           status: 'completed',
           priority: 5,
-          created: 1615542738.3449144
+          created: 1615542738.3449144,
         },
         {
           id: 'dhcp_create_192.168.171.105',
@@ -260,90 +295,108 @@ export const applicationInstanceReportData_1 = {
           timestamp: '2021-03-12T09:52:19.668Z',
           status: 'completed',
           priority: 10,
-          created: 1615542738.1321318
+          created: 1615542738.1321318,
         },
         {
           id: 'Create IPv4 DNS record for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Create IPv4 DNS record for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Create IPv4 DNS record for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:19.749Z',
           status: 'completed',
           priority: 10,
-          created: 1615542738.1576574
+          created: 1615542738.1576574,
         },
         {
-          id: 'Create Reverse IPv4 DNS record for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Create Reverse IPv4 DNS record for great-web-app-web-2.deploy3.dev.atix',
+          id:
+            'Create Reverse IPv4 DNS record for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Create Reverse IPv4 DNS record for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:19.859Z',
           status: 'completed',
           priority: 10,
-          created: 1615542738.1582346
+          created: 1615542738.1582346,
         },
         {
-          id: 'Deploy TFTP PXELinux config for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Deploy TFTP PXELinux config for great-web-app-web-2.deploy3.dev.atix',
+          id:
+            'Deploy TFTP PXELinux config for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Deploy TFTP PXELinux config for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:20.221Z',
           status: 'completed',
           priority: 20,
-          created: 1615542738.1885784
+          created: 1615542738.1885784,
         },
         {
-          id: 'Deploy TFTP PXEGrub2 config for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Deploy TFTP PXEGrub2 config for great-web-app-web-2.deploy3.dev.atix',
+          id:
+            'Deploy TFTP PXEGrub2 config for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Deploy TFTP PXEGrub2 config for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:20.604Z',
           status: 'completed',
           priority: 20,
-          created: 1615542738.1888642
+          created: 1615542738.1888642,
         },
         {
-          id: 'Deploy TFTP PXEGrub config for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Deploy TFTP PXEGrub config for great-web-app-web-2.deploy3.dev.atix',
+          id:
+            'Deploy TFTP PXEGrub config for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Deploy TFTP PXEGrub config for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:20.636Z',
           status: 'completed',
           priority: 20,
-          created: 1615542738.1890883
+          created: 1615542738.1890883,
         },
         {
-          id: 'Deploy TFTP iPXE config for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Deploy TFTP iPXE config for great-web-app-web-2.deploy3.dev.atix',
+          id:
+            'Deploy TFTP iPXE config for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Deploy TFTP iPXE config for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:20.895Z',
           status: 'completed',
           priority: 20,
-          created: 1615542738.1892834
+          created: 1615542738.1892834,
         },
         {
           id: 'Fetch TFTP boot files for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Fetch TFTP boot files for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Fetch TFTP boot files for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:20.992Z',
           status: 'completed',
           priority: 25,
-          created: 1615542738.1898031
+          created: 1615542738.1898031,
         },
         {
           id: 'Power up compute instance great-web-app-web-2.deploy3.dev.atix',
-          name: 'Power up compute instance great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Power up compute instance great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:21.864Z',
           status: 'completed',
           priority: 1000,
-          created: 1615542738.3453662
+          created: 1615542738.3453662,
         },
         {
-          id: 'Cleanup PuppetCA certificates for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Cleanup PuppetCA certificates for great-web-app-web-2.deploy3.dev.atix',
+          id:
+            'Cleanup PuppetCA certificates for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Cleanup PuppetCA certificates for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:22.316Z',
           status: 'completed',
           priority: 51,
-          created: 1615542738.34748
+          created: 1615542738.34748,
         },
         {
-          id: 'Enable PuppetCA autosigning for great-web-app-web-2.deploy3.dev.atix',
-          name: 'Enable PuppetCA autosigning for great-web-app-web-2.deploy3.dev.atix',
+          id:
+            'Enable PuppetCA autosigning for great-web-app-web-2.deploy3.dev.atix',
+          name:
+            'Enable PuppetCA autosigning for great-web-app-web-2.deploy3.dev.atix',
           timestamp: '2021-03-12T09:52:22.368Z',
           status: 'completed',
           priority: 55,
-          created: 1615542738.3476808
-        }
+          created: 1615542738.3476808,
+        },
       ],
-      powerStatusUrl: '/api/v2/hosts/great-web-app-web-2.deploy3.dev.atix/power'
-    }
-  ]
-}
+      powerStatusUrl:
+        '/api/v2/hosts/great-web-app-web-2.deploy3.dev.atix/power',
+    },
+  ],
+};
diff --git a/webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportReducer.fixtures.js b/webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportReducer.fixtures.js
index b3db199b..ad3be9a2 100644
--- a/webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportReducer.fixtures.js
+++ b/webpack/components/ApplicationInstanceReport/__fixtures__/applicationInstanceReportReducer.fixtures.js
@@ -1,20 +1,13 @@
 import Immutable from 'seamless-immutable';
-import {
-   cloneDeep,
-   findIndex,
-   findLastIndex,
-} from 'lodash';
 
-import {
-  applicationInstanceReportData_1,
-} from '../__fixtures__/applicationInstanceReportData_1.fixtures';
+import { applicationInstanceReportData1 } from '../__fixtures__/applicationInstanceReportData1.fixtures';
 
-export const successState = Immutable(applicationInstanceReportData_1);
+export const successState = Immutable(applicationInstanceReportData1);
 
 const ACTIVE_HOST_ID = 2;
 
 // Payload Data
-export const initApplicationInstanceReportPayload = applicationInstanceReportData_1;
+export const initApplicationInstanceReportPayload = applicationInstanceReportData1;
 export const setActiveHostPayload = {
   activeHostId: ACTIVE_HOST_ID,
 };
diff --git a/webpack/components/ApplicationInstanceReport/__tests__/ApplicationInstanceReport.test.js b/webpack/components/ApplicationInstanceReport/__tests__/ApplicationInstanceReport.test.js
index 9dbda820..14a70a7e 100644
--- a/webpack/components/ApplicationInstanceReport/__tests__/ApplicationInstanceReport.test.js
+++ b/webpack/components/ApplicationInstanceReport/__tests__/ApplicationInstanceReport.test.js
@@ -6,40 +6,46 @@ const noop = () => {};
 
 const hostData = [
   {
-    "id": 8,
-    "name": "great-web-app-db-1",
-    "build": false,
-    "hostUrl": "/hosts/great-web-app-db-1.deploy3.dev.atix",
-    "progress_report": [],
-    "powerStatusUrl": "/api/v2/hosts/great-web-app-db-1.deploy3.dev.atix/power"
+    id: 8,
+    name: 'great-web-app-db-1',
+    build: false,
+    hostUrl: '/hosts/great-web-app-db-1.deploy3.dev.atix',
+    progress_report: [],
+    powerStatusUrl: '/api/v2/hosts/great-web-app-db-1.deploy3.dev.atix/power',
   },
   {
-    "id": 9,
-    "name": "great-web-app-web-1",
-    "build": false,
-    "hostUrl": "/hosts/great-web-app-web-1.deploy3.dev.atix",
-    "progress_report": [],
-    "powerStatusUrl": "/api/v2/hosts/great-web-app-web-1.deploy3.dev.atix/power"
+    id: 9,
+    name: 'great-web-app-web-1',
+    build: false,
+    hostUrl: '/hosts/great-web-app-web-1.deploy3.dev.atix',
+    progress_report: [],
+    powerStatusUrl: '/api/v2/hosts/great-web-app-web-1.deploy3.dev.atix/power',
   },
   {
-    "id": 10,
-    "name": "great-web-app-web-2",
-    "build": false,
-    "hostUrl": "/hosts/great-web-app-web-2.deploy3.dev.atix",
-    "progress_report": [],
-    "powerStatusUrl": "/api/v2/hosts/great-web-app-web-2.deploy3.dev.atix/power"
-  }
+    id: 10,
+    name: 'great-web-app-web-2',
+    build: false,
+    hostUrl: '/hosts/great-web-app-web-2.deploy3.dev.atix',
+    progress_report: [],
+    powerStatusUrl: '/api/v2/hosts/great-web-app-web-2.deploy3.dev.atix/power',
+  },
 ];
 
 const fixtures = {
   'should render application instance report': {
     data: {
-      appInstanceName: "instance name",
-      deployTaskUrl: "deploy/task/url",
-      configureJobUrl: "configure/job/url",
+      appInstanceName: 'instance name',
+      deployTaskUrl: 'deploy/task/url',
+      configureJobUrl: 'configure/job/url',
       hosts: hostData,
+      deploymentState: 'finished',
+      appInstanceId: 1,
+      reportDataUrl: '/acd/ui_acd_report_data/__id__',
+      initialConfigureState: 'unconfigured',
     },
     initApplicationInstanceReport: noop,
+    loadReportData: noop,
+    setActiveHost: noop,
   },
 };
 
diff --git a/webpack/components/ApplicationInstanceReport/__tests__/ApplicationInstanceReportSelectors.test.js b/webpack/components/ApplicationInstanceReport/__tests__/ApplicationInstanceReportSelectors.test.js
index 7a0218bb..d20d6222 100644
--- a/webpack/components/ApplicationInstanceReport/__tests__/ApplicationInstanceReportSelectors.test.js
+++ b/webpack/components/ApplicationInstanceReport/__tests__/ApplicationInstanceReportSelectors.test.js
@@ -5,9 +5,7 @@ import {
   selectActiveHostId,
 } from '../ApplicationInstanceReportSelectors';
 
-import {
-  applicationInstanceReportData_1,
-} from '../__fixtures__/applicationInstanceReportData_1.fixtures';
+import { applicationInstanceReportData1 } from '../__fixtures__/applicationInstanceReportData1.fixtures';
 
 const stateFactory = obj => ({
   foremanAcd: {
@@ -16,10 +14,10 @@ const stateFactory = obj => ({
 });
 
 const fixtures = {
-  'should return hosts from applicationInstanceReportData_1 fixtures': () =>
-    selectHosts(stateFactory(applicationInstanceReportData_1)),
-  'should return activeHostId from applicationInstanceReportData_1 fixtures': () =>
-    selectActiveHostId(stateFactory(applicationInstanceReportData_1)),
+  'should return hosts from applicationInstanceReportData1 fixtures': () =>
+    selectHosts(stateFactory(applicationInstanceReportData1)),
+  'should return activeHostId from applicationInstanceReportData1 fixtures': () =>
+    selectActiveHostId(stateFactory(applicationInstanceReportData1)),
 };
 
 describe('ApplicationInstanceSelectors', () =>
diff --git a/webpack/components/ApplicationInstanceReport/__tests__/__snapshots__/ApplicationInstanceReportReducer.test.js.snap b/webpack/components/ApplicationInstanceReport/__tests__/__snapshots__/ApplicationInstanceReportReducer.test.js.snap
index 9e3335f3..fb434582 100644
--- a/webpack/components/ApplicationInstanceReport/__tests__/__snapshots__/ApplicationInstanceReportReducer.test.js.snap
+++ b/webpack/components/ApplicationInstanceReport/__tests__/__snapshots__/ApplicationInstanceReportReducer.test.js.snap
@@ -712,7 +712,6 @@ Object {
       ],
     },
   ],
-  "loading": true,
   "name": false,
 }
 `;
diff --git a/webpack/components/ApplicationInstanceReport/__tests__/__snapshots__/ApplicationInstanceReportSelectors.test.js.snap b/webpack/components/ApplicationInstanceReport/__tests__/__snapshots__/ApplicationInstanceReportSelectors.test.js.snap
index 71b823b9..7b3065ba 100644
--- a/webpack/components/ApplicationInstanceReport/__tests__/__snapshots__/ApplicationInstanceReportSelectors.test.js.snap
+++ b/webpack/components/ApplicationInstanceReport/__tests__/__snapshots__/ApplicationInstanceReportSelectors.test.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ApplicationInstanceSelectors should return activeHostId from applicationInstanceReportData_1 fixtures 1`] = `undefined`;
+exports[`ApplicationInstanceSelectors should return activeHostId from applicationInstanceReportData1 fixtures 1`] = `undefined`;
 
-exports[`ApplicationInstanceSelectors should return hosts from applicationInstanceReportData_1 fixtures 1`] = `
+exports[`ApplicationInstanceSelectors should return hosts from applicationInstanceReportData1 fixtures 1`] = `
 Array [
   Object {
     "build": false,
diff --git a/webpack/components/ApplicationInstanceReport/components/ReportViewer.js b/webpack/components/ApplicationInstanceReport/components/ReportViewer.js
index bfd33aff..83efcf6a 100644
--- a/webpack/components/ApplicationInstanceReport/components/ReportViewer.js
+++ b/webpack/components/ApplicationInstanceReport/components/ReportViewer.js
@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ReportViewer= ({
-  hidden,
-  report,
-}) =>{
+const ReportViewer = ({ hidden, report }) => {
   if (hidden) {
     return null;
   }
@@ -14,7 +11,9 @@ const ReportViewer= ({
   }
 
   return report.map((task, id) => (
-    <div key={"report_task_"+id} className="report_task">{task.name} -- {task.status}</div>
+    <div key={`report_task_${id}`} className="report_task">
+      {task.name} -- {task.status}
+    </div>
   ));
 };
 
@@ -23,4 +22,9 @@ ReportViewer.propTypes = {
   report: PropTypes.array,
 };
 
+ReportViewer.defaultProps = {
+  hidden: false,
+  report: undefined,
+};
+
 export default ReportViewer;
diff --git a/webpack/components/ApplicationInstanceReport/components/__tests__/ReportViewer.test.js b/webpack/components/ApplicationInstanceReport/components/__tests__/ReportViewer.test.js
index bebbf5f9..db51cf16 100644
--- a/webpack/components/ApplicationInstanceReport/components/__tests__/ReportViewer.test.js
+++ b/webpack/components/ApplicationInstanceReport/components/__tests__/ReportViewer.test.js
@@ -2,11 +2,9 @@ import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 
 import ReportViewer from '../ReportViewer';
 
-const noop = () => {};
-
 const data = [
   { name: 'report 1', status: 'done' },
-  { name: 'report 2', status: 'pending' }
+  { name: 'report 2', status: 'pending' },
 ];
 
 const fixtures = {
diff --git a/webpack/components/ExistingHostSelection/ExistingHostSelection.js b/webpack/components/ExistingHostSelection/ExistingHostSelection.js
index d75e7954..2c7cf99f 100644
--- a/webpack/components/ExistingHostSelection/ExistingHostSelection.js
+++ b/webpack/components/ExistingHostSelection/ExistingHostSelection.js
@@ -1,41 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { orderBy } from 'lodash';
+import { cloneDeep } from 'lodash';
+import { DualListControlled } from 'patternfly-react';
+import { translate as __ } from 'foremanReact/common/I18n';
 import ServiceSelector from './components/ServiceSelector';
 import { arrayToObject } from '../../helper';
 
-import {
-  cloneDeep,
-} from 'lodash';
-
-import {
-  Icon,
-  Button,
-  DualListControlled,
-} from 'patternfly-react';
-
 class ExistingHostSelection extends React.Component {
-
-  constructor(props) {
-    super(props);
-  }
-
   componentDidMount() {
-    const {
-      location,
-      organization,
-      services,
-      initExistingHostSelection,
-      allHosts,
-    } = this.props;
+    const { allHosts, initExistingHostSelection } = this.props;
 
     initExistingHostSelection(allHosts);
   }
 
   render() {
     const {
-      location,
-      organization,
       services,
       serviceId,
       availableHosts,
@@ -44,35 +23,39 @@ class ExistingHostSelection extends React.Component {
       hostSelectionChanged,
     } = this.props;
 
-    const serviceList = arrayToObject(services, "id", "name");
-    const load_hostgroup_url = "/api/v2/hostgroups/__hostgroup_id__/hosts"
+    const serviceList = arrayToObject(services, 'id', 'name');
+    const loadHostgroupUrl = '/api/v2/hostgroups/__hostgroup_id__/hosts';
 
-    return(
+    return (
       <div>
         <div className="row">
           <ServiceSelector
             label="Service"
-            hidden={ false }
-            selectValue={ this.props.serviceId ? this.props.serviceId.toString() : '0'}
-            options={ serviceList }
-            onChange={ loadHostsOfHostgroup }
-            additionalData={{ url: load_hostgroup_url, services: services }} />
+            hidden={false}
+            selectValue={serviceId ? serviceId.toString() : '0'}
+            options={serviceList}
+            onChange={loadHostsOfHostgroup}
+            additionalData={{ url: loadHostgroupUrl, services }}
+          />
         </div>
         <div className="row">
-          <label className="col-md-2 control-label">{ __("Hosts") }</label>
-          {this.props.serviceId != undefined ? (
-          <div className="col-md-6">
-            <DualListControlled
-              onChange={ hostSelectionChanged }
-              left={{
-                items: cloneDeep(availableHosts),
-              }}
-              right={{
-                items: cloneDeep(alreadyUsedHosts),
-              }}
-              allowHiddenInputs={false}
-            />
-          </div>) : (<span>{ __("Please select service first.") }</span>)}
+          <label className="col-md-2 control-label">{__('Hosts')}</label>
+          {serviceId !== undefined ? (
+            <div className="col-md-6">
+              <DualListControlled
+                onChange={hostSelectionChanged}
+                left={{
+                  items: cloneDeep(availableHosts),
+                }}
+                right={{
+                  items: cloneDeep(alreadyUsedHosts),
+                }}
+                allowHiddenInputs={false}
+              />
+            </div>
+          ) : (
+            <span>{__('Please select service first.')}</span>
+          )}
         </div>
       </div>
     );
@@ -80,25 +63,21 @@ class ExistingHostSelection extends React.Component {
 }
 
 ExistingHostSelection.defaultProps = {
+  allHosts: [],
   serviceId: undefined,
-  hostsInHostgroup: {},
   availableHosts: [],
   alreadyUsedHosts: [],
-  selectedHosts: [],
 };
 
 ExistingHostSelection.propTypes = {
-  location: PropTypes.string.isRequired,
-  organization: PropTypes.string.isRequired,
+  allHosts: PropTypes.array,
   services: PropTypes.array.isRequired,
-  initExistingHostSelection: PropTypes.func,
+  initExistingHostSelection: PropTypes.func.isRequired,
   serviceId: PropTypes.number,
-  hostsInHostgroup: PropTypes.object,
   availableHosts: PropTypes.array,
   alreadyUsedHosts: PropTypes.array,
-  selectedHosts: PropTypes.array,
-  loadHostsOfHostgroup: PropTypes.func,
-  hostSelectionChanged: PropTypes.func,
+  loadHostsOfHostgroup: PropTypes.func.isRequired,
+  hostSelectionChanged: PropTypes.func.isRequired,
 };
 
 export default ExistingHostSelection;
diff --git a/webpack/components/ExistingHostSelection/ExistingHostSelectionActions.js b/webpack/components/ExistingHostSelection/ExistingHostSelectionActions.js
index 5ec273da..b3dea650 100644
--- a/webpack/components/ExistingHostSelection/ExistingHostSelectionActions.js
+++ b/webpack/components/ExistingHostSelection/ExistingHostSelectionActions.js
@@ -1,14 +1,7 @@
-import React from 'react';
-import * as sort from 'sortabular';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 import api from 'foremanReact/API';
 
-import {
-  propsToSnakeCase,
-  propsToCamelCase,
-} from 'foremanReact/common/helpers';
-
 import {
   EXISTING_HOST_SELECTION_INIT,
   EXISTING_HOST_SELECTION_LOAD_HOSTS_SUCCESS,
@@ -16,9 +9,7 @@ import {
   EXISTING_HOST_SELECTION_SELECTION_CHANGED,
 } from './ExistingHostSelectionConstants';
 
-export const initExistingHostSelection = (
-  allHosts,
-) => dispatch => {
+export const initExistingHostSelection = allHosts => dispatch => {
   const initialState = {};
 
   initialState.alreadyUsedHosts = undefined;
@@ -31,35 +22,37 @@ export const initExistingHostSelection = (
     type: EXISTING_HOST_SELECTION_INIT,
     payload: initialState,
   });
-}
+};
 
 export const loadHostsOfHostgroup = (
   serviceId,
   additionalData
-) => dispatch => {
+) => async dispatch => {
+  const selService = additionalData.services.filter(s => s.id === serviceId)[0];
+  const realUrl = additionalData.url.replace(
+    '__hostgroup_id__',
+    selService.hostgroup
+  );
 
-  const selService = additionalData.services.filter(s => (s.id == serviceId))[0];
-  const realUrl = additionalData.url.replace("__hostgroup_id__", selService.hostgroup);
-
-  return api
-    .get(realUrl, {}, {})
-    .then(({ data }) =>
-      dispatch({
-        type: EXISTING_HOST_SELECTION_LOAD_HOSTS_SUCCESS,
-        payload: {
-          hosts: data.results,
-          serviceId: parseInt(serviceId),
-        }
-      })
-    )
-    .catch(error => dispatch(errorHandler(EXISTING_HOST_SELECTION_LOAD_HOSTS_FAILURE, error)));
+  try {
+    const { data } = await api.get(realUrl, {}, {});
+    dispatch({
+      type: EXISTING_HOST_SELECTION_LOAD_HOSTS_SUCCESS,
+      payload: {
+        hosts: data.results,
+        serviceId: parseInt(serviceId, 10),
+      },
+    });
+  } catch (error) {
+    dispatch(errorHandler(EXISTING_HOST_SELECTION_LOAD_HOSTS_FAILURE, error));
+  }
 };
 
 export const hostSelectionChanged = ({ left, right }) => ({
   type: EXISTING_HOST_SELECTION_SELECTION_CHANGED,
   payload: {
     selection: right.items,
-  }
+  },
 });
 
 const errorHandler = (msg, err) => {
diff --git a/webpack/components/ExistingHostSelection/ExistingHostSelectionConstants.js b/webpack/components/ExistingHostSelection/ExistingHostSelectionConstants.js
index 90050c4a..d2e43610 100644
--- a/webpack/components/ExistingHostSelection/ExistingHostSelectionConstants.js
+++ b/webpack/components/ExistingHostSelection/ExistingHostSelectionConstants.js
@@ -1,4 +1,7 @@
 export const EXISTING_HOST_SELECTION_INIT = 'EXISTING_HOST_SELECTION_INIT';
-export const EXISTING_HOST_SELECTION_LOAD_HOSTS_SUCCESS = 'EXISTING_HOST_SELECTION_LOAD_HOSTS_SUCCESS';
-export const EXISTING_HOST_SELECTION_LOAD_HOSTS_FAILURE = 'EXISTING_HOST_SELECTION_LOAD_HOSTS_FAILURE';
-export const EXISTING_HOST_SELECTION_SELECTION_CHANGED = 'EXISTING_HOST_SELECTION_SELECTION_CHANGED';
+export const EXISTING_HOST_SELECTION_LOAD_HOSTS_SUCCESS =
+  'EXISTING_HOST_SELECTION_LOAD_HOSTS_SUCCESS';
+export const EXISTING_HOST_SELECTION_LOAD_HOSTS_FAILURE =
+  'EXISTING_HOST_SELECTION_LOAD_HOSTS_FAILURE';
+export const EXISTING_HOST_SELECTION_SELECTION_CHANGED =
+  'EXISTING_HOST_SELECTION_SELECTION_CHANGED';
diff --git a/webpack/components/ExistingHostSelection/ExistingHostSelectionReducer.js b/webpack/components/ExistingHostSelection/ExistingHostSelectionReducer.js
index 61a41669..5bb86ab6 100644
--- a/webpack/components/ExistingHostSelection/ExistingHostSelectionReducer.js
+++ b/webpack/components/ExistingHostSelection/ExistingHostSelectionReducer.js
@@ -1,13 +1,7 @@
 import Immutable from 'seamless-immutable';
-
-import {
-  cloneDeep,
-  findIndex,
-  findLastIndex,
-} from 'lodash';
+import { translate as __ } from 'foremanReact/common/I18n';
 
 import { shortHostname } from '../../helper';
-import * as sort from 'sortabular';
 
 import {
   EXISTING_HOST_SELECTION_INIT,
@@ -29,10 +23,13 @@ const existingHostSelectionConf = (state = initialState, action) => {
       return state.merge(payload);
     }
     case EXISTING_HOST_SELECTION_LOAD_HOSTS_SUCCESS: {
-      let alreadyUsedHosts = [];
+      const alreadyUsedHosts = [];
 
       state.allHosts.forEach(host => {
-        if ((host.service == payload.serviceId) && (host.isExistingHost == true)) {
+        if (
+          host.service === payload.serviceId &&
+          host.isExistingHost === true
+        ) {
           alreadyUsedHosts.push({
             value: host.hostname,
             label: host.hostname,
@@ -42,11 +39,11 @@ const existingHostSelectionConf = (state = initialState, action) => {
         }
       });
 
-      let availableHosts = [];
-      let hostsInHostgroup = {};
+      const availableHosts = [];
+      const hostsInHostgroup = {};
       payload.hosts.forEach(host => {
-        let shortName = shortHostname(host.name);
-        if (state.allHosts.find(h => h.hostname == shortName) == undefined) {
+        const shortName = shortHostname(host.name);
+        if (state.allHosts.find(h => h.hostname === shortName) === undefined) {
           availableHosts.push({
             value: shortName,
             label: shortName,
@@ -56,9 +53,9 @@ const existingHostSelectionConf = (state = initialState, action) => {
       });
 
       return state.merge({
-        hostsInHostgroup: hostsInHostgroup,
-        availableHosts: availableHosts,
-        alreadyUsedHosts: alreadyUsedHosts,
+        hostsInHostgroup,
+        availableHosts,
+        alreadyUsedHosts,
         serviceId: payload.serviceId,
       });
     }
@@ -66,10 +63,10 @@ const existingHostSelectionConf = (state = initialState, action) => {
       return state.merge({ error: payload.error });
     }
     case EXISTING_HOST_SELECTION_SELECTION_CHANGED: {
-      let selectedHosts = [];
+      const selectedHosts = [];
 
       payload.selection.forEach(selHost => {
-        let hostData = state.hostsInHostgroup[selHost.value];
+        const hostData = state.hostsInHostgroup[selHost.value];
         selectedHosts.push({
           fqdn: hostData.name,
           hostname: shortHostname(hostData.name),
@@ -79,7 +76,7 @@ const existingHostSelectionConf = (state = initialState, action) => {
       });
 
       return state.merge({
-        selectedHosts: selectedHosts,
+        selectedHosts,
       });
     }
     default:
diff --git a/webpack/components/ExistingHostSelection/ExistingHostSelectionSelectors.js b/webpack/components/ExistingHostSelection/ExistingHostSelectionSelectors.js
index 53536be1..fd227632 100644
--- a/webpack/components/ExistingHostSelection/ExistingHostSelectionSelectors.js
+++ b/webpack/components/ExistingHostSelection/ExistingHostSelectionSelectors.js
@@ -2,7 +2,11 @@ const existingHostState = state => state.foremanAcd.existingHostSelectionConf;
 
 export const selectServiceId = state => existingHostState(state).serviceId;
 export const selectAllHosts = state => existingHostState(state).allHosts;
-export const selectHostsInHostgroup = state => existingHostState(state).selectHostsInHostgroup;
-export const selectAvailableHosts = state => existingHostState(state).availableHosts;
-export const selectAlreadyUsedHosts = state => existingHostState(state).alreadyUsedHosts;
-export const selectSelectedHosts = state => existingHostState(state).selectedHosts;
+export const selectHostsInHostgroup = state =>
+  existingHostState(state).selectHostsInHostgroup;
+export const selectAvailableHosts = state =>
+  existingHostState(state).availableHosts;
+export const selectAlreadyUsedHosts = state =>
+  existingHostState(state).alreadyUsedHosts;
+export const selectSelectedHosts = state =>
+  existingHostState(state).selectedHosts;
diff --git a/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionConfData1.fixtures.js b/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionConfData1.fixtures.js
new file mode 100644
index 00000000..e895a4cd
--- /dev/null
+++ b/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionConfData1.fixtures.js
@@ -0,0 +1,187 @@
+export const existingHostSelectionConfData1 = {
+  serviceId: 2,
+  error: {
+    errorMsg: '',
+    status: '',
+    statusText: '',
+  },
+  allHosts: [
+    {
+      id: 5,
+      hostname: 'isaac-anselm',
+      service: '1',
+      description: '',
+      foremanParameters: [],
+      ansibleParameters: [],
+    },
+  ],
+  alreadyUsedHosts: [
+    {
+      value: 'isaac-anselm',
+      label: 'isaac-anselm',
+      disabled: true,
+      tooltipText: 'Host already used for this application instance',
+    },
+  ],
+  selectedHosts: [],
+  hostsInHostgroup: {
+    '3': {
+      ip: null,
+      ip6: '',
+      environment_id: null,
+      environment_name: null,
+      last_report: null,
+      mac: '00:11:22:33:44:a1',
+      realm_id: null,
+      realm_name: null,
+      sp_mac: null,
+      sp_ip: null,
+      sp_name: null,
+      domain_id: 1,
+      domain_name: 'mylocal',
+      architecture_id: 1,
+      architecture_name: 'x86_64',
+      operatingsystem_id: 1,
+      operatingsystem_name: 'centos 7',
+      subnet_id: 1,
+      subnet_name: 'mylocal',
+      subnet6_id: null,
+      subnet6_name: null,
+      sp_subnet_id: null,
+      ptable_id: 118,
+      ptable_name: 'Kickstart default',
+      medium_id: 1,
+      medium_name: 'CentOS 7 mirror',
+      pxe_loader: 'PXELinux BIOS',
+      build: true,
+      comment: '',
+      disk: '',
+      installed_at: null,
+      model_id: null,
+      hostgroup_id: 1,
+      owner_id: 4,
+      owner_name: 'Admin User',
+      owner_type: 'User',
+      enabled: true,
+      managed: true,
+      use_image: null,
+      image_file: '',
+      uuid: null,
+      compute_resource_id: null,
+      compute_resource_name: null,
+      compute_profile_id: null,
+      compute_profile_name: null,
+      capabilities: ['build'],
+      provision_method: 'build',
+      certname: 'isaac-anselm.mylocal',
+      image_id: null,
+      image_name: null,
+      created_at: '2021-08-05 11:16:34 +0200',
+      updated_at: '2021-08-05 11:16:34 +0200',
+      last_compile: null,
+      global_status: 0,
+      global_status_label: 'Error',
+      uptime_seconds: null,
+      organization_id: 1,
+      organization_name: 'Default Organization',
+      location_id: 2,
+      location_name: 'Default Location',
+      puppet_status: 0,
+      model_name: null,
+      build_status: 2,
+      build_status_label: 'Token expired',
+      name: 'isaac-anselm.mylocal',
+      id: 3,
+      puppet_proxy_id: null,
+      puppet_proxy_name: null,
+      puppet_ca_proxy_id: null,
+      puppet_ca_proxy_name: null,
+      puppet_proxy: null,
+      puppet_ca_proxy: null,
+      hostgroup_name: 'base',
+      hostgroup_title: 'base',
+    },
+    '7': {
+      ip: null,
+      ip6: null,
+      environment_id: null,
+      environment_name: null,
+      last_report: null,
+      mac: '00:11:22:33:60:15',
+      realm_id: null,
+      realm_name: null,
+      sp_mac: null,
+      sp_ip: null,
+      sp_name: null,
+      domain_id: 1,
+      domain_name: 'mylocal',
+      architecture_id: 1,
+      architecture_name: 'x86_64',
+      operatingsystem_id: 1,
+      operatingsystem_name: 'centos 7',
+      subnet_id: 1,
+      subnet_name: 'mylocal',
+      subnet6_id: null,
+      subnet6_name: null,
+      sp_subnet_id: null,
+      ptable_id: 118,
+      ptable_name: 'Kickstart default',
+      medium_id: 1,
+      medium_name: 'CentOS 7 mirror',
+      pxe_loader: 'PXELinux BIOS',
+      build: true,
+      comment: null,
+      disk: null,
+      installed_at: null,
+      model_id: null,
+      hostgroup_id: 1,
+      owner_id: 4,
+      owner_name: 'Admin User',
+      owner_type: 'User',
+      enabled: true,
+      managed: true,
+      use_image: null,
+      image_file: '',
+      uuid: null,
+      compute_resource_id: null,
+      compute_resource_name: null,
+      compute_profile_id: null,
+      compute_profile_name: null,
+      capabilities: ['build'],
+      provision_method: 'build',
+      certname: 'lllllll.mylocal',
+      image_id: null,
+      image_name: null,
+      created_at: '2021-08-19 14:00:20 +0200',
+      updated_at: '2021-08-19 14:00:20 +0200',
+      last_compile: null,
+      global_status: 0,
+      global_status_label: 'Error',
+      uptime_seconds: null,
+      organization_id: 1,
+      organization_name: 'Default Organization',
+      location_id: 2,
+      location_name: 'Default Location',
+      puppet_status: 0,
+      model_name: null,
+      build_status: 2,
+      build_status_label: 'Token expired',
+      name: 'lllllll.mylocal',
+      id: 7,
+      puppet_proxy_id: null,
+      puppet_proxy_name: null,
+      puppet_ca_proxy_id: null,
+      puppet_ca_proxy_name: null,
+      puppet_proxy: null,
+      puppet_ca_proxy: null,
+      hostgroup_name: 'base',
+      hostgroup_title: 'base',
+    },
+  },
+  availableHosts: [
+    {
+      value: 'lllllll',
+      label: 'lllllll',
+    },
+  ],
+};
diff --git a/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionConfData_1.fixtures.js b/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionConfData_1.fixtures.js
deleted file mode 100644
index de4fd979..00000000
--- a/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionConfData_1.fixtures.js
+++ /dev/null
@@ -1,191 +0,0 @@
-export const existingHostSelectionConfData_1 = {
-    serviceId: 2,
-    error: {
-      errorMsg: '',
-      status: '',
-      statusText: ''
-    },
-    allHosts: [
-      {
-        id: 5,
-        hostname: 'isaac-anselm',
-        service: '1',
-        description: '',
-        foremanParameters: [],
-        ansibleParameters: [],
-      }
-    ],
-    alreadyUsedHosts: [
-      {
-        value: 'isaac-anselm',
-        label: 'isaac-anselm',
-        disabled: true,
-        tooltipText: 'Host already used for this application instance'
-      }
-    ],
-    selectedHosts: [],
-    hostsInHostgroup: {
-      '3': {
-        ip: null,
-        ip6: '',
-        environment_id: null,
-        environment_name: null,
-        last_report: null,
-        mac: '00:11:22:33:44:a1',
-        realm_id: null,
-        realm_name: null,
-        sp_mac: null,
-        sp_ip: null,
-        sp_name: null,
-        domain_id: 1,
-        domain_name: 'mylocal',
-        architecture_id: 1,
-        architecture_name: 'x86_64',
-        operatingsystem_id: 1,
-        operatingsystem_name: 'centos 7',
-        subnet_id: 1,
-        subnet_name: 'mylocal',
-        subnet6_id: null,
-        subnet6_name: null,
-        sp_subnet_id: null,
-        ptable_id: 118,
-        ptable_name: 'Kickstart default',
-        medium_id: 1,
-        medium_name: 'CentOS 7 mirror',
-        pxe_loader: 'PXELinux BIOS',
-        build: true,
-        comment: '',
-        disk: '',
-        installed_at: null,
-        model_id: null,
-        hostgroup_id: 1,
-        owner_id: 4,
-        owner_name: 'Admin User',
-        owner_type: 'User',
-        enabled: true,
-        managed: true,
-        use_image: null,
-        image_file: '',
-        uuid: null,
-        compute_resource_id: null,
-        compute_resource_name: null,
-        compute_profile_id: null,
-        compute_profile_name: null,
-        capabilities: [
-          'build'
-        ],
-        provision_method: 'build',
-        certname: 'isaac-anselm.mylocal',
-        image_id: null,
-        image_name: null,
-        created_at: '2021-08-05 11:16:34 +0200',
-        updated_at: '2021-08-05 11:16:34 +0200',
-        last_compile: null,
-        global_status: 0,
-        global_status_label: 'Error',
-        uptime_seconds: null,
-        organization_id: 1,
-        organization_name: 'Default Organization',
-        location_id: 2,
-        location_name: 'Default Location',
-        puppet_status: 0,
-        model_name: null,
-        build_status: 2,
-        build_status_label: 'Token expired',
-        name: 'isaac-anselm.mylocal',
-        id: 3,
-        puppet_proxy_id: null,
-        puppet_proxy_name: null,
-        puppet_ca_proxy_id: null,
-        puppet_ca_proxy_name: null,
-        puppet_proxy: null,
-        puppet_ca_proxy: null,
-        hostgroup_name: 'base',
-        hostgroup_title: 'base'
-      },
-      '7': {
-        ip: null,
-        ip6: null,
-        environment_id: null,
-        environment_name: null,
-        last_report: null,
-        mac: '00:11:22:33:60:15',
-        realm_id: null,
-        realm_name: null,
-        sp_mac: null,
-        sp_ip: null,
-        sp_name: null,
-        domain_id: 1,
-        domain_name: 'mylocal',
-        architecture_id: 1,
-        architecture_name: 'x86_64',
-        operatingsystem_id: 1,
-        operatingsystem_name: 'centos 7',
-        subnet_id: 1,
-        subnet_name: 'mylocal',
-        subnet6_id: null,
-        subnet6_name: null,
-        sp_subnet_id: null,
-        ptable_id: 118,
-        ptable_name: 'Kickstart default',
-        medium_id: 1,
-        medium_name: 'CentOS 7 mirror',
-        pxe_loader: 'PXELinux BIOS',
-        build: true,
-        comment: null,
-        disk: null,
-        installed_at: null,
-        model_id: null,
-        hostgroup_id: 1,
-        owner_id: 4,
-        owner_name: 'Admin User',
-        owner_type: 'User',
-        enabled: true,
-        managed: true,
-        use_image: null,
-        image_file: '',
-        uuid: null,
-        compute_resource_id: null,
-        compute_resource_name: null,
-        compute_profile_id: null,
-        compute_profile_name: null,
-        capabilities: [
-          'build'
-        ],
-        provision_method: 'build',
-        certname: 'lllllll.mylocal',
-        image_id: null,
-        image_name: null,
-        created_at: '2021-08-19 14:00:20 +0200',
-        updated_at: '2021-08-19 14:00:20 +0200',
-        last_compile: null,
-        global_status: 0,
-        global_status_label: 'Error',
-        uptime_seconds: null,
-        organization_id: 1,
-        organization_name: 'Default Organization',
-        location_id: 2,
-        location_name: 'Default Location',
-        puppet_status: 0,
-        model_name: null,
-        build_status: 2,
-        build_status_label: 'Token expired',
-        name: 'lllllll.mylocal',
-        id: 7,
-        puppet_proxy_id: null,
-        puppet_proxy_name: null,
-        puppet_ca_proxy_id: null,
-        puppet_ca_proxy_name: null,
-        puppet_proxy: null,
-        puppet_ca_proxy: null,
-        hostgroup_name: 'base',
-        hostgroup_title: 'base'
-      }
-    },
-    availableHosts: [
-      {
-        value: 'lllllll',
-        label: 'lllllll'
-      }
-    ]
-}
diff --git a/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionReducer.fixtures.js b/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionReducer.fixtures.js
index a7a0ec45..eeb1cbdc 100644
--- a/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionReducer.fixtures.js
+++ b/webpack/components/ExistingHostSelection/__fixtures__/existingHostSelectionReducer.fixtures.js
@@ -1,15 +1,8 @@
 import Immutable from 'seamless-immutable';
-import {
-   cloneDeep,
-   findIndex,
-   findLastIndex,
-} from 'lodash';
 
-import {
-  existingHostSelectionConfData_1,
-} from '../__fixtures__/existingHostSelectionConfData_1.fixtures';
+import { existingHostSelectionConfData1 } from '../__fixtures__/existingHostSelectionConfData1.fixtures';
 
-export const successState = Immutable(existingHostSelectionConfData_1);
+export const successState = Immutable(existingHostSelectionConfData1);
 
 export const initExistingHostSelectionPayload = {
   payload: {
@@ -19,12 +12,12 @@ export const initExistingHostSelectionPayload = {
         value: 5,
         label: 'isaac-anselm',
         disabled: true,
-        tooltipText: 'Host already used for this application instance'
-      }
+        tooltipText: 'Host already used for this application instance',
+      },
     ],
     selectedHosts: [],
     hostsInHostgroup: {},
-  }
+  },
 };
 
 export const existingHostSelectionSelectionChangedPayload = {
@@ -33,7 +26,7 @@ export const existingHostSelectionSelectionChangedPayload = {
       label: 'isaar-anselm',
       value: 3,
     },
-  ]
+  ],
 };
 
 export const loadExistingHostSelectionSuccessPayload = {
@@ -84,9 +77,7 @@ export const loadExistingHostSelectionSuccessPayload = {
       compute_resource_name: null,
       compute_profile_id: null,
       compute_profile_name: null,
-      capabilities: [
-        'build'
-      ],
+      capabilities: ['build'],
       provision_method: 'build',
       certname: 'isaac-anselm.mylocal',
       image_id: null,
@@ -114,7 +105,7 @@ export const loadExistingHostSelectionSuccessPayload = {
       puppet_proxy: null,
       puppet_ca_proxy: null,
       hostgroup_name: 'base',
-      hostgroup_title: 'base'
+      hostgroup_title: 'base',
     },
     {
       ip: null,
@@ -162,9 +153,7 @@ export const loadExistingHostSelectionSuccessPayload = {
       compute_resource_name: null,
       compute_profile_id: null,
       compute_profile_name: null,
-      capabilities: [
-        'build'
-      ],
+      capabilities: ['build'],
       provision_method: 'build',
       certname: 'lllllll.mylocal',
       image_id: null,
@@ -192,12 +181,12 @@ export const loadExistingHostSelectionSuccessPayload = {
       puppet_proxy: null,
       puppet_ca_proxy: null,
       hostgroup_name: 'base',
-      hostgroup_title: 'base'
-    }
+      hostgroup_title: 'base',
+    },
   ],
-  serviceId: 1
+  serviceId: 1,
 };
 
 export const loadExistingHostSelectionFailurePayload = {
-  error: "Something really bad happend",
+  error: 'Something really bad happend',
 };
diff --git a/webpack/components/ExistingHostSelection/__tests__/ExistingHostSelection.test.js b/webpack/components/ExistingHostSelection/__tests__/ExistingHostSelection.test.js
index 1b2443e5..2db4e1f0 100644
--- a/webpack/components/ExistingHostSelection/__tests__/ExistingHostSelection.test.js
+++ b/webpack/components/ExistingHostSelection/__tests__/ExistingHostSelection.test.js
@@ -6,12 +6,13 @@ const noop = () => {};
 
 const fixtures = {
   'should render existing host selection': {
-    location: "Default Location",
-    organization: "Default Organization",
+    location: 'Default Location',
+    organization: 'Default Organization',
     services: [],
     allHosts: [],
     initExistingHostSelection: noop,
     loadHostsOfHostgroup: noop,
+    hostSelectionChanged: noop,
   },
 };
 
diff --git a/webpack/components/ExistingHostSelection/__tests__/ExistingHostSelectionSelectors.test.js b/webpack/components/ExistingHostSelection/__tests__/ExistingHostSelectionSelectors.test.js
index 0fbbcef1..dd0b04a4 100644
--- a/webpack/components/ExistingHostSelection/__tests__/ExistingHostSelectionSelectors.test.js
+++ b/webpack/components/ExistingHostSelection/__tests__/ExistingHostSelectionSelectors.test.js
@@ -8,9 +8,7 @@ import {
   selectHostsInHostgroup,
 } from '../ExistingHostSelectionSelectors';
 
-import {
-  existingHostSelectionConfData_1,
-} from '../__fixtures__/existingHostSelectionConfData_1.fixtures';
+import { existingHostSelectionConfData1 } from '../__fixtures__/existingHostSelectionConfData1.fixtures';
 
 const stateFactory = obj => ({
   foremanAcd: {
@@ -19,18 +17,17 @@ const stateFactory = obj => ({
 });
 
 const fixtures = {
-  'should return serviceId from existingHostSelectionConfData_1 fixtures': () =>
-    selectServiceId(stateFactory(existingHostSelectionConfData_1)),
-  'should return availableHosts from existingHostSelectionConfData_1 fixtures': () =>
-    selectAvailableHosts(stateFactory(existingHostSelectionConfData_1)),
-  'should return alreadyUsedHosts from existingHostSelectionConfData_1 fixtures': () =>
-    selectAlreadyUsedHosts(stateFactory(existingHostSelectionConfData_1)),
-  'should return selectedHosts from existingHostSelectionConfData_1 fixtures': () =>
-    selectSelectedHosts(stateFactory(existingHostSelectionConfData_1)),
-  'should return hostsInHostgroup from existingHostSelectionConfData_1 fixtures': () =>
-    selectHostsInHostgroup(stateFactory(existingHostSelectionConfData_1)),
+  'should return serviceId from existingHostSelectionConfData1 fixtures': () =>
+    selectServiceId(stateFactory(existingHostSelectionConfData1)),
+  'should return availableHosts from existingHostSelectionConfData1 fixtures': () =>
+    selectAvailableHosts(stateFactory(existingHostSelectionConfData1)),
+  'should return alreadyUsedHosts from existingHostSelectionConfData1 fixtures': () =>
+    selectAlreadyUsedHosts(stateFactory(existingHostSelectionConfData1)),
+  'should return selectedHosts from existingHostSelectionConfData1 fixtures': () =>
+    selectSelectedHosts(stateFactory(existingHostSelectionConfData1)),
+  'should return hostsInHostgroup from existingHostSelectionConfData1 fixtures': () =>
+    selectHostsInHostgroup(stateFactory(existingHostSelectionConfData1)),
 };
 
 describe('ExistingHostSelectionSelectors', () =>
   testSelectorsSnapshotWithFixtures(fixtures));
-
diff --git a/webpack/components/ExistingHostSelection/__tests__/__snapshots__/ExistingHostSelectionSelectors.test.js.snap b/webpack/components/ExistingHostSelection/__tests__/__snapshots__/ExistingHostSelectionSelectors.test.js.snap
index 83ed10c7..79e8227f 100644
--- a/webpack/components/ExistingHostSelection/__tests__/__snapshots__/ExistingHostSelectionSelectors.test.js.snap
+++ b/webpack/components/ExistingHostSelection/__tests__/__snapshots__/ExistingHostSelectionSelectors.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ExistingHostSelectionSelectors should return alreadyUsedHosts from existingHostSelectionConfData_1 fixtures 1`] = `
+exports[`ExistingHostSelectionSelectors should return alreadyUsedHosts from existingHostSelectionConfData1 fixtures 1`] = `
 Array [
   Object {
     "disabled": true,
@@ -11,7 +11,7 @@ Array [
 ]
 `;
 
-exports[`ExistingHostSelectionSelectors should return availableHosts from existingHostSelectionConfData_1 fixtures 1`] = `
+exports[`ExistingHostSelectionSelectors should return availableHosts from existingHostSelectionConfData1 fixtures 1`] = `
 Array [
   Object {
     "label": "lllllll",
@@ -20,8 +20,8 @@ Array [
 ]
 `;
 
-exports[`ExistingHostSelectionSelectors should return hostsInHostgroup from existingHostSelectionConfData_1 fixtures 1`] = `undefined`;
+exports[`ExistingHostSelectionSelectors should return hostsInHostgroup from existingHostSelectionConfData1 fixtures 1`] = `undefined`;
 
-exports[`ExistingHostSelectionSelectors should return selectedHosts from existingHostSelectionConfData_1 fixtures 1`] = `Array []`;
+exports[`ExistingHostSelectionSelectors should return selectedHosts from existingHostSelectionConfData1 fixtures 1`] = `Array []`;
 
-exports[`ExistingHostSelectionSelectors should return serviceId from existingHostSelectionConfData_1 fixtures 1`] = `2`;
+exports[`ExistingHostSelectionSelectors should return serviceId from existingHostSelectionConfData1 fixtures 1`] = `2`;
diff --git a/webpack/components/ExistingHostSelection/components/ServiceSelector.js b/webpack/components/ExistingHostSelection/components/ServiceSelector.js
index 658cbaf4..229c7394 100644
--- a/webpack/components/ExistingHostSelection/components/ServiceSelector.js
+++ b/webpack/components/ExistingHostSelection/components/ServiceSelector.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExtSelect from '../../common/ExtSelect';
-import RailsData from '../../common/RailsData'
+import RailsData from '../../common/RailsData';
 
-const ServiceSelector= ({
+const ServiceSelector = ({
   label,
   hidden,
   viewText,
@@ -11,32 +11,31 @@ const ServiceSelector= ({
   onChange,
   options,
   additionalData,
-}) =>{
-  return (
-    <div className="form-group">
-      <label className="col-md-2 control-label">{label}</label>
-      <div className="col-md-4">
-        <ExtSelect
-          hidden={hidden}
-          editable={true}
-          viewText={viewText}
-          selectValue={selectValue}
-          onChange={onChange}
-          options={options}
-          additionalData={additionalData}
-        />
-        <RailsData
-          key='service_id'
-          view='existing_host_selection'
-          parameter='service_id'
-          value={selectValue}
-        />
-      </div>
+}) => (
+  <div className="form-group">
+    <label className="col-md-2 control-label">{label}</label>
+    <div className="col-md-4">
+      <ExtSelect
+        hidden={hidden}
+        editable
+        viewText={viewText}
+        selectValue={selectValue}
+        onChange={onChange}
+        options={options}
+        additionalData={additionalData}
+      />
+      <RailsData
+        key="service_id"
+        view="existing_host_selection"
+        parameter="service_id"
+        value={selectValue}
+      />
     </div>
-  );
-};
+  </div>
+);
 
 ServiceSelector.propTypes = {
+  hidden: PropTypes.bool.isRequired,
   label: PropTypes.string.isRequired,
   viewText: PropTypes.string,
   selectValue: PropTypes.string,
@@ -45,4 +44,11 @@ ServiceSelector.propTypes = {
   additionalData: PropTypes.object,
 };
 
+ServiceSelector.defaultProps = {
+  additionalData: {},
+  options: {},
+  selectValue: '',
+  viewText: undefined,
+};
+
 export default ServiceSelector;
diff --git a/webpack/components/ExistingHostSelection/components/__tests__/ServiceSelector.test.js b/webpack/components/ExistingHostSelection/components/__tests__/ServiceSelector.test.js
index a814bb21..55d0af33 100644
--- a/webpack/components/ExistingHostSelection/components/__tests__/ServiceSelector.test.js
+++ b/webpack/components/ExistingHostSelection/components/__tests__/ServiceSelector.test.js
@@ -4,11 +4,6 @@ import ServiceSelector from '../ServiceSelector';
 
 const noop = () => {};
 
-const data = [
-  { name: 'report 1', status: 'done' },
-  { name: 'report 2', status: 'pending' }
-];
-
 const fixtures = {
   'should render the service selector': {
     hidden: false,
@@ -16,7 +11,7 @@ const fixtures = {
     viewText: 'view service',
     selectValue: '1',
     onChange: noop,
-    options: { first: 'first', second: 'second'},
+    options: { first: 'first', second: 'second' },
     additionalData: { moreData: 'moooore' },
   },
   'should render the hidden service selector': {
@@ -25,11 +20,10 @@ const fixtures = {
     viewText: 'view service',
     selectValue: '1',
     onChange: noop,
-    options: { first: 'first', second: 'second'},
-    additionalData: { },
+    options: { first: 'first', second: 'second' },
+    additionalData: {},
   },
 };
 
 describe('ServiceSelector', () =>
   testComponentSnapshotsWithFixtures(ServiceSelector, fixtures));
-
diff --git a/webpack/components/ParameterSelection/ParameterSelection.js b/webpack/components/ParameterSelection/ParameterSelection.js
index 2eb9792f..9808740f 100644
--- a/webpack/components/ParameterSelection/ParameterSelection.js
+++ b/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;
diff --git a/webpack/components/ParameterSelection/ParameterSelectionActions.js b/webpack/components/ParameterSelection/ParameterSelectionActions.js
index e7566bf6..bbbba02c 100644
--- a/webpack/components/ParameterSelection/ParameterSelectionActions.js
+++ b/webpack/components/ParameterSelection/ParameterSelectionActions.js
@@ -1,30 +1,21 @@
-import React from 'react';
-import * as sort from 'sortabular';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 import {
   actionHeaderCellFormatter,
   sortableHeaderCellFormatter,
   tableCellFormatter,
-  TABLE_SORT_DIRECTION
+  TABLE_SORT_DIRECTION,
 } from 'patternfly-react';
 
 import api from 'foremanReact/API';
 
-import {
-  propsToSnakeCase,
-  propsToCamelCase,
-} from 'foremanReact/common/helpers';
-
-import {
-  filterParameterTypes,
-} from './ParameterSelectionHelper';
-
 import {
   setModalOpen,
   setModalClosed,
 } from 'foremanReact/components/ForemanModal/ForemanModalActions';
 
+import { filterParameterTypes } from './ParameterSelectionHelper';
+
 import {
   PARAMETER_SELECTION_INIT,
   PARAMETER_SELECTION_TYPES,
@@ -37,7 +28,6 @@ import {
   PARAMETER_SELECTION_EDIT_CANCEL,
   PARAMETER_SELECTION_SORT,
   PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
-  PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
   PARAMETER_SELECTION_LOAD_PARAM_DATA_REQUEST,
   PARAMETER_SELECTION_LOAD_PARAM_DATA_SUCCESS,
   PARAMETER_SELECTION_LOAD_PARAM_DATA_FAILURE,
@@ -56,15 +46,15 @@ export const initParameterSelection = (
   sortingFormatter,
   sortableTransform,
   inlineEditFormatter,
-  inlineEditButtonsFormatter,
+  inlineEditButtonsFormatter
 ) => dispatch => {
   const initialState = {};
 
   initialState.sortingColumns = {
     name: {
       direction: TABLE_SORT_DIRECTION.ASC,
-        position: 0
-    }
+      position: 0,
+    },
   };
   initialState.paramDefinition = paramDefinition;
 
@@ -73,117 +63,136 @@ export const initParameterSelection = (
     valueLabel = __('Default value');
   }
 
-  initialState.columns = []
+  initialState.columns = [];
   const addToColumns = (obj, idx) => {
     obj.header.props.index = idx;
     initialState.columns.push(obj);
-  }
+  };
 
   let idx = 0;
-  addToColumns( {
+  addToColumns(
+    {
       property: 'name',
       header: {
         label: __('Name'),
         props: {
           sort: true,
           style: {
-            width: '25%'
-          }
+            width: '25%',
+          },
         },
         transforms: [sortableTransform],
         formatters: [sortingFormatter],
-        customFormatters: [sortableHeaderCellFormatter]
+        customFormatters: [sortableHeaderCellFormatter],
       },
       cell: {
-        formatters: [allowNameAdjustment ? inlineEditFormatter : tableCellFormatter]
-      }
-    }, idx++);
+        formatters: [
+          allowNameAdjustment ? inlineEditFormatter : tableCellFormatter,
+        ],
+      },
+    },
+    idx++
+  );
 
-  addToColumns( {
+  addToColumns(
+    {
       property: 'description',
       header: {
         label: __('Description'),
         props: {
           sort: true,
           style: {
-            width: '25%'
-          }
+            width: '25%',
+          },
         },
         transforms: [sortableTransform],
         formatters: [sortingFormatter],
-        customFormatters: [sortableHeaderCellFormatter]
+        customFormatters: [sortableHeaderCellFormatter],
       },
       cell: {
         props: {
-          index: 1
+          index: 1,
         },
-        formatters: [allowDescriptionAdjustment ? inlineEditFormatter : tableCellFormatter]
-      }
-    }, idx++);
+        formatters: [
+          allowDescriptionAdjustment ? inlineEditFormatter : tableCellFormatter,
+        ],
+      },
+    },
+    idx++
+  );
 
-  if (paramType == PARAMETER_SELECTION_PARAM_TYPE_FOREMAN) {
-    addToColumns( {
-      property: 'type',
-      header: {
-        label: __('Type'),
-        props: {
-          sort: true,
-          style: {
-            width: '20%'
-          }
+  if (paramType === PARAMETER_SELECTION_PARAM_TYPE_FOREMAN) {
+    addToColumns(
+      {
+        property: 'type',
+        header: {
+          label: __('Type'),
+          props: {
+            sort: true,
+            style: {
+              width: '20%',
+            },
+          },
+          transforms: [sortableTransform],
+          formatters: [sortingFormatter],
+          customFormatters: [sortableHeaderCellFormatter],
+        },
+        cell: {
+          // we are always using the inlineEditFormatter so that
+          // the well formatted type name is shown
+          formatters: [inlineEditFormatter],
         },
-        transforms: [sortableTransform],
-        formatters: [sortingFormatter],
-        customFormatters: [sortableHeaderCellFormatter]
       },
-      cell: {
-        // we are always using the inlineEditFormatter so that
-        // the well formatted type name is shown
-        formatters: [inlineEditFormatter]
-      }
-    }, idx++);
+      idx++
+    );
   }
 
-  addToColumns( {
+  addToColumns(
+    {
       property: 'value',
       header: {
         label: valueLabel,
         props: {
           sort: true,
           style: {
-            width: '20%'
-          }
+            width: '20%',
+          },
         },
         transforms: [sortableTransform],
         formatters: [sortingFormatter],
-        customFormatters: [sortableHeaderCellFormatter]
+        customFormatters: [sortableHeaderCellFormatter],
       },
       cell: {
-        formatters: [inlineEditFormatter]
-      }
-    }, idx++);
+        formatters: [inlineEditFormatter],
+      },
+    },
+    idx++
+  );
 
-  addToColumns( {
+  addToColumns(
+    {
       property: 'actions',
       header: {
         label: __('Actions'),
         props: {
           style: {
-            width: '10%'
-          }
+            width: '10%',
+          },
         },
-        formatters: [actionHeaderCellFormatter]
+        formatters: [actionHeaderCellFormatter],
       },
       cell: {
-        formatters: [inlineEditButtonsFormatter]
-      }
-    }, idx++);
+        formatters: [inlineEditButtonsFormatter],
+      },
+    },
+    idx++
+  );
 
   initialState.parameters = parameters;
-  initialState.allowedParameterTypes = [];
+  initialState.allowedParameterTypes = {};
 
-  if ((paramType == PARAMETER_SELECTION_PARAM_TYPE_FOREMAN) && (parameters)) {
-    let pTypes = PARAMETER_SELECTION_TYPES;
+  if (paramType === PARAMETER_SELECTION_PARAM_TYPE_FOREMAN && parameters) {
+    const pTypes = PARAMETER_SELECTION_TYPES;
 
     // filter hidden parameters
     hiddenParameterTypes.forEach(item => delete pTypes[item]);
@@ -199,7 +208,7 @@ export const initParameterSelection = (
     type: PARAMETER_SELECTION_INIT,
     payload: initialState,
   });
-}
+};
 
 const errorHandler = (msg, err) => {
   const error = {
@@ -209,68 +218,63 @@ const errorHandler = (msg, err) => {
   return { type: msg, payload: { error } };
 };
 
-export const lockParameter = (additionalData) => ({
+export const lockParameter = additionalData => ({
   type: PARAMETER_SELECTION_LOCK,
   payload: {
     ...additionalData,
   },
 });
 
-export const openParameterSelectionDialogBox = (additionalData) => dispatch => {
+export const openParameterSelectionDialogBox = additionalData => dispatch => {
   dispatch({
     type: PARAMETER_SELECTION_COMPLEX_DATA_MODAL_OPEN,
     payload: {
       ...additionalData,
-    }
+    },
   });
-  dispatch(
-    setModalOpen({ id: 'ParameterSelectionComplexDataModal' })
-  );
+  dispatch(setModalOpen({ id: 'ParameterSelectionComplexDataModal' }));
 };
 
-export const closeParameterSelectionDialogBox = (additionalData) => dispatch => {
+export const closeParameterSelectionDialogBox = additionalData => dispatch => {
   dispatch({
     type: PARAMETER_SELECTION_COMPLEX_DATA_MODAL_CLOSE,
     payload: {
       ...additionalData,
-    }
+    },
   });
 
-  dispatch(
-    setModalClosed({ id: 'ParameterSelectionComplexDataModal' })
-  );
+  dispatch(setModalClosed({ id: 'ParameterSelectionComplexDataModal' }));
 };
 
-export const addParameter = (additionalData) => (
-  {
+export const addParameter = additionalData => ({
   type: PARAMETER_SELECTION_ADD,
   payload: {
     ...additionalData,
   },
 });
 
-export const deleteParameter = (additionalData) => ({
+export const deleteParameter = additionalData => ({
   type: PARAMETER_SELECTION_DELETE,
   payload: {
     ...additionalData,
   },
 });
 
-export const activateEditParameter = (additionalData) => ({
+export const activateEditParameter = additionalData => ({
   type: PARAMETER_SELECTION_EDIT_ACTIVATE,
   payload: {
     ...additionalData,
   },
 });
 
-export const confirmEditParameter = (rowData) => ({
+export const confirmEditParameter = rowData => ({
   type: PARAMETER_SELECTION_EDIT_CONFIRM,
   payload: {
     ...rowData,
   },
 });
 
-export const cancelEditParameter = (rowData) => ({
+export const cancelEditParameter = rowData => ({
   type: PARAMETER_SELECTION_EDIT_CANCEL,
   payload: {
     ...rowData,
@@ -293,22 +297,28 @@ export const sortParameter = (selectedColumn, defaultSortingOrder) => ({
   },
 });
 
-export const loadParamData = (attr) => dispatch => {
-  dispatch( { type: PARAMETER_SELECTION_LOAD_PARAM_DATA_REQUEST, payload: { dataType: attr.dataType, clearParameters: attr.clearParameters } });
+export const loadParamData = attr => async dispatch => {
+  dispatch({
+    type: PARAMETER_SELECTION_LOAD_PARAM_DATA_REQUEST,
+    payload: { dataType: attr.dataType, clearParameters: attr.clearParameters },
+  });
 
-  let realUrl = attr.url.replace("__id__", attr.paramDefinition.dataId);
+  let realUrl = attr.url.replace('__id__', attr.paramDefinition.dataId);
 
   if (attr.paramDefinition.hasOwnProperty('dataSubId')) {
-    realUrl = realUrl.replace("__subid__", attr.paramDefinition.dataSubId);
+    realUrl = realUrl.replace('__subid__', attr.paramDefinition.dataSubId);
   }
 
-  return api
-    .get(realUrl, {}, {})
-    .then(({ data }) =>
-      dispatch({
-        type: PARAMETER_SELECTION_LOAD_PARAM_DATA_SUCCESS,
-        payload: { ...data, dataType: attr.dataType }
-      })
-    )
-    .catch(error => dispatch(errorHandler(PARAMETER_SELECTION_LOAD_PARAM_DATA_FAILURE, error)));
+  try {
+    const { data } = await api.get(realUrl, {}, {});
+
+    return dispatch({
+      type: PARAMETER_SELECTION_LOAD_PARAM_DATA_SUCCESS,
+      payload: { ...data, dataType: attr.dataType },
+    });
+  } catch (error) {
+    return dispatch(
+      errorHandler(PARAMETER_SELECTION_LOAD_PARAM_DATA_FAILURE, error)
+    );
+  }
 };
diff --git a/webpack/components/ParameterSelection/ParameterSelectionConstants.js b/webpack/components/ParameterSelection/ParameterSelectionConstants.js
index 4490f41f..8d102071 100644
--- a/webpack/components/ParameterSelection/ParameterSelectionConstants.js
+++ b/webpack/components/ParameterSelection/ParameterSelectionConstants.js
@@ -2,18 +2,29 @@ export const PARAMETER_SELECTION_INIT = 'INIT_PARAMETER_SELECTION_INIT';
 export const PARAMETER_SELECTION_LOCK = 'PARAMETER_SELECTION_LOCK';
 export const PARAMETER_SELECTION_DELETE = 'PARAMETER_SELECTION_DELETE';
 export const PARAMETER_SELECTION_ADD = 'PARAMETER_SELECTION_ADD';
-export const PARAMETER_SELECTION_EDIT_ACTIVATE = 'PARAMETER_SELECTION_EDIT_ACTIVATE';
-export const PARAMETER_SELECTION_EDIT_CONFIRM = 'PARAMETER_SELECTION_EDIT_CONFIRM';
-export const PARAMETER_SELECTION_EDIT_CHANGE = 'PARAMETER_SELECTION_EDIT_CHANGE';
-export const PARAMETER_SELECTION_EDIT_CANCEL = 'PARAMETER_SELECTION_EDIT_CANCEL';
+export const PARAMETER_SELECTION_EDIT_ACTIVATE =
+  'PARAMETER_SELECTION_EDIT_ACTIVATE';
+export const PARAMETER_SELECTION_EDIT_CONFIRM =
+  'PARAMETER_SELECTION_EDIT_CONFIRM';
+export const PARAMETER_SELECTION_EDIT_CHANGE =
+  'PARAMETER_SELECTION_EDIT_CHANGE';
+export const PARAMETER_SELECTION_EDIT_CANCEL =
+  'PARAMETER_SELECTION_EDIT_CANCEL';
 export const PARAMETER_SELECTION_SORT = 'PARAMETER_SELECTION_SORT';
-export const PARAMETER_SELECTION_LOAD_PARAM_DATA_REQUEST = 'PARAMETER_SELECTION_LOAD_PARAM_DATA_REQUEST';
-export const PARAMETER_SELECTION_LOAD_PARAM_DATA_SUCCESS = 'PARAMETER_SELECTION_LOAD_PARAM_DATA_SUCCESS';
-export const PARAMETER_SELECTION_LOAD_PARAM_DATA_FAILURE = 'PARAMETER_SELECTION_LOAD_PARAM_DATA_FAILURE';
-export const PARAMETER_SELECTION_PARAM_TYPE_FOREMAN = 'PARAMETER_SELECTION_PARAM_TYPE_FOREMAN';
-export const PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE = 'PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE';
-export const PARAMETER_SELECTION_COMPLEX_DATA_MODAL_OPEN = 'PARAMETER_SELECTION_COMPLEX_DATA_MODAL_OPEN';
-export const PARAMETER_SELECTION_COMPLEX_DATA_MODAL_CLOSE = 'PARAMETER_SELECTION_COMPLEX_DATA_MODAL_CLOSE';
+export const PARAMETER_SELECTION_LOAD_PARAM_DATA_REQUEST =
+  'PARAMETER_SELECTION_LOAD_PARAM_DATA_REQUEST';
+export const PARAMETER_SELECTION_LOAD_PARAM_DATA_SUCCESS =
+  'PARAMETER_SELECTION_LOAD_PARAM_DATA_SUCCESS';
+export const PARAMETER_SELECTION_LOAD_PARAM_DATA_FAILURE =
+  'PARAMETER_SELECTION_LOAD_PARAM_DATA_FAILURE';
+export const PARAMETER_SELECTION_PARAM_TYPE_FOREMAN =
+  'PARAMETER_SELECTION_PARAM_TYPE_FOREMAN';
+export const PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE =
+  'PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE';
+export const PARAMETER_SELECTION_COMPLEX_DATA_MODAL_OPEN =
+  'PARAMETER_SELECTION_COMPLEX_DATA_MODAL_OPEN';
+export const PARAMETER_SELECTION_COMPLEX_DATA_MODAL_CLOSE =
+  'PARAMETER_SELECTION_COMPLEX_DATA_MODAL_CLOSE';
 
 // Make sure the object is sorted by value
 //   (Compute Profile -> Partition table -> Root password)
diff --git a/webpack/components/ParameterSelection/ParameterSelectionHelper.js b/webpack/components/ParameterSelection/ParameterSelectionHelper.js
index f9ef2488..93f45073 100644
--- a/webpack/components/ParameterSelection/ParameterSelectionHelper.js
+++ b/webpack/components/ParameterSelection/ParameterSelectionHelper.js
@@ -1,24 +1,26 @@
-import {
-  cloneDeep,
-} from 'lodash';
+import { cloneDeep } from 'lodash';
 
-export const transformForemanData = (fdata) => {
+export const transformForemanData = fdata => {
   if (fdata === undefined) {
-    return "";
+    return '';
   }
   const result = {};
-  fdata.map(item => result[item.id] = item.name)
-  return (result);
-}
+  fdata.forEach(item => {
+    result[item.id] = item.name;
+  });
+  return result;
+};
 
 export const filterParameterTypes = (options, parameters) => {
   const newOptions = cloneDeep(options);
 
   // hostparam can be used multiple times
-  const alreadyUsed = parameters.map(item => item["type"]).filter(item => item != 'hostparam');
+  const alreadyUsed = parameters
+    .map(item => item.type)
+    .filter(item => item !== 'hostparam');
 
   // remove already used items
-  alreadyUsed.forEach(item => delete newOptions[item])
+  alreadyUsed.forEach(item => delete newOptions[item]);
 
   return newOptions;
-}
+};
diff --git a/webpack/components/ParameterSelection/ParameterSelectionReducer.js b/webpack/components/ParameterSelection/ParameterSelectionReducer.js
index ab3299ee..f21364f2 100644
--- a/webpack/components/ParameterSelection/ParameterSelectionReducer.js
+++ b/webpack/components/ParameterSelection/ParameterSelectionReducer.js
@@ -1,20 +1,13 @@
 import Immutable from 'seamless-immutable';
 
-import {
-  cloneDeep,
-  findIndex,
-  findLastIndex,
-} from 'lodash';
-
-import {
-  filterParameterTypes,
-} from './ParameterSelectionHelper';
+import { cloneDeep, findIndex } from 'lodash';
 
 import * as sort from 'sortabular';
 
+import { filterParameterTypes } from './ParameterSelectionHelper';
+
 import {
   PARAMETER_SELECTION_INIT,
-  PARAMETER_SELECTION_TYPES,
   PARAMETER_SELECTION_LOCK,
   PARAMETER_SELECTION_DELETE,
   PARAMETER_SELECTION_ADD,
@@ -33,6 +26,7 @@ import {
 } from './ParameterSelectionConstants';
 
 export const initialState = Immutable({
+  loading: true,
   editMode: false,
   error: { errorMsg: '', status: '', statusText: '' },
 });
@@ -48,20 +42,33 @@ const parameterSelectionParameters = (state = initialState, action) => {
       let parameters = [];
       let index = 1;
 
-      if ('parameters' in state && state.parameters !== undefined && state.parameters.length > 0) {
+      if (
+        'parameters' in state &&
+        state.parameters !== undefined &&
+        state.parameters.length > 0
+      ) {
         parameters = cloneDeep(state.parameters);
         index = Math.max(...parameters.map(e => e.id)) + 1;
       }
 
-      const newRow = {id: index, locked: false, name: "", description: '', type: '', value: '', isYaml: false, newEntry: true };
-      if (state.paramType == 'PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE') {
-        newRow['type'] = 'complex';
+      const newRow = {
+        id: index,
+        locked: false,
+        name: '',
+        description: '',
+        type: '',
+        value: '',
+        isYaml: false,
+        newEntry: true,
+      };
+      if (state.paramType === 'PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE') {
+        newRow.type = 'complex';
       }
-      newRow.backup = cloneDeep(newRow)
+      newRow.backup = cloneDeep(newRow);
       parameters.push(newRow);
       return state.merge({
         editMode: true,
-        parameters: parameters,
+        parameters,
         editParamsRowIndex: index,
       });
     }
@@ -76,15 +83,20 @@ const parameterSelectionParameters = (state = initialState, action) => {
       }
 
       return state.merge({
-        parameters: parameters
+        parameters,
       });
     }
     case PARAMETER_SELECTION_DELETE: {
-      const parameters = state.parameters.filter(v => v.id !== payload.rowData.id);
+      const parameters = state.parameters.filter(
+        v => v.id !== payload.rowData.id
+      );
       return state.merge({
-        parameters: parameters,
-        parameterTypes: filterParameterTypes(state.allowedParameterTypes, parameters),
-      })
+        parameters,
+        parameterTypes: filterParameterTypes(
+          state.allowedParameterTypes,
+          parameters
+        ),
+      });
     }
     case PARAMETER_SELECTION_EDIT_ACTIVATE: {
       const parameters = cloneDeep(state.parameters);
@@ -93,7 +105,7 @@ const parameterSelectionParameters = (state = initialState, action) => {
       parameters[index].backup = cloneDeep(parameters[index]);
       return state.merge({
         editMode: true,
-        parameters: parameters,
+        parameters,
         editParamsRowIndex: index,
       });
     }
@@ -106,22 +118,25 @@ const parameterSelectionParameters = (state = initialState, action) => {
 
       return state.merge({
         editMode: false,
-        parameterTypes: filterParameterTypes(state.allowedParameterTypes, parameters),
-        parameters: parameters
+        parameterTypes: filterParameterTypes(
+          state.allowedParameterTypes,
+          parameters
+        ),
+        parameters,
       });
     }
     case PARAMETER_SELECTION_EDIT_CHANGE: {
       const parameters = cloneDeep(state.parameters);
       const index = findIndex(parameters, { id: payload.rowData.id });
 
-      if (!parameters[index]['isYaml'] && payload.property == 'value') {
-        parameters[index]['value'] = payload.value;
-      } else if (payload.property != 'value') {
+      if (!parameters[index].isYaml && payload.property === 'value') {
+        parameters[index].value = payload.value;
+      } else if (payload.property !== 'value') {
         parameters[index][payload.property] = payload.value;
       }
       return state.merge({
-        parameters: parameters,
-        editParamsRowIndex: index
+        parameters,
+        editParamsRowIndex: index,
       });
     }
     case PARAMETER_SELECTION_EDIT_CANCEL: {
@@ -137,38 +152,38 @@ const parameterSelectionParameters = (state = initialState, action) => {
 
       return state.merge({
         editMode: false,
-        parameters: parameters
+        parameters,
       });
     }
     case PARAMETER_SELECTION_SORT: {
-      const selectedColumn = payload.selectedColumn;
+      const { selectedColumn } = payload;
       return state.set(
         'sortingColumns',
         sort.byColumn({
           sortingColumns: state.sortingColumns,
           sortingOrder: payload.defaultSortingOrder,
-          selectedColumn
+          selectedColumn,
         })
       );
     }
     case PARAMETER_SELECTION_LOAD_PARAM_DATA_FAILURE: {
       return state.merge({
         error: payload.error,
-        loading: false
+        loading: false,
       });
     }
     case PARAMETER_SELECTION_LOAD_PARAM_DATA_REQUEST: {
       let newState = {};
 
-      if (payload.dataType == PARAMETER_SELECTION_PARAM_TYPE_FOREMAN) {
+      if (payload.dataType === PARAMETER_SELECTION_PARAM_TYPE_FOREMAN) {
         newState = {
           paramData: {},
           hostgroupId: -1,
-          loading: true
+          loading: true,
         };
-      } else if (payload.dataType == PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE) {
+      } else if (payload.dataType === PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE) {
         newState = {
-          loading: true
+          loading: true,
         };
       }
 
@@ -181,7 +196,7 @@ const parameterSelectionParameters = (state = initialState, action) => {
     case PARAMETER_SELECTION_LOAD_PARAM_DATA_SUCCESS: {
       let newState = {};
 
-      if (payload.dataType == PARAMETER_SELECTION_PARAM_TYPE_FOREMAN) {
+      if (payload.dataType === PARAMETER_SELECTION_PARAM_TYPE_FOREMAN) {
         newState = {
           loading: false,
           paramData: payload,
@@ -196,25 +211,24 @@ const parameterSelectionParameters = (state = initialState, action) => {
     }
     case PARAMETER_SELECTION_COMPLEX_DATA_MODAL_CLOSE: {
       let str;
-      let element = document.getElementById('yamlData');
-      if (element != null) {
+      const element = document.getElementById('yamlData');
+      if (element !== null) {
         str = element.value;
-      }
-      else {
+      } else {
         str = '';
       }
       let newState = {};
-      let index = state.editParamsRowIndex;
+      const index = state.editParamsRowIndex;
       const parameters = cloneDeep(state.parameters);
-      if (payload.mode == 'save') {
-        parameters[index]['value'] = str;
-        if (str == '') {
-          parameters[index]['isYaml'] = false;
+      if (payload.mode === 'save') {
+        parameters[index].value = str;
+        if (str === '') {
+          parameters[index].isYaml = false;
         } else {
-          parameters[index]['isYaml'] = true;
+          parameters[index].isYaml = true;
         }
         newState = {
-          parameters: parameters,
+          parameters,
         };
       } else {
         newState = {};
diff --git a/webpack/components/ParameterSelection/ParameterSelectionSelectors.js b/webpack/components/ParameterSelection/ParameterSelectionSelectors.js
index e025b61c..5beb7208 100644
--- a/webpack/components/ParameterSelection/ParameterSelectionSelectors.js
+++ b/webpack/components/ParameterSelection/ParameterSelectionSelectors.js
@@ -3,11 +3,16 @@ const parameterState = state => state.foremanAcd.parameterSelectionParameters;
 export const selectLoading = state => parameterState(state).loading;
 export const selectEditMode = state => parameterState(state).editMode;
 export const selectParamData = state => parameterState(state).paramData;
-export const selectAllowedParameterTypes = state => parameterState(state).allowedParameterTypes;
-export const selectParameterTypes = state => parameterState(state).parameterTypes;
+export const selectAllowedParameterTypes = state =>
+  parameterState(state).allowedParameterTypes;
+export const selectParameterTypes = state =>
+  parameterState(state).parameterTypes;
 export const selectParameters = state => parameterState(state).parameters;
-export const selectSortingColumns = state => parameterState(state).sortingColumns;
+export const selectSortingColumns = state =>
+  parameterState(state).sortingColumns;
 export const selectColumns = state => parameterState(state).columns;
-export const selectParamDefinition = state => parameterState(state).paramDefinition;
+export const selectParamDefinition = state =>
+  parameterState(state).paramDefinition;
 export const selectHostgroupId = state => parameterState(state).hostgroupId;
-export const selectEditParamsRowIndex = state => parameterState(state).editParamsRowIndex;
+export const selectEditParamsRowIndex = state =>
+  parameterState(state).editParamsRowIndex;
diff --git a/webpack/components/ParameterSelection/__fixtures__/parameterSelection.fixtures.js b/webpack/components/ParameterSelection/__fixtures__/parameterSelection.fixtures.js
deleted file mode 100644
index c73eb224..00000000
--- a/webpack/components/ParameterSelection/__fixtures__/parameterSelection.fixtures.js
+++ /dev/null
@@ -1,153 +0,0 @@
-export const newDefinition = {
-  mode: "newDefinition",
-  serviceDefinition: {
-    id: 1,
-    name: "Test123",
-    hostgroup_id: 1
-  },
-};
-export const editDefinition = {
-  mode: "editDefinition",
-  serviceDefinition: {
-    id: 1,
-    name: "Test123",
-    hostgroup_id: 1
-  },
-  parameters: [
-    {
-      id: 1,
-      name: "PuppetEnv",
-      description: "",
-      type: "puppetenv",
-      value: "2"
-    },
-    {
-      id: 2,
-      name: "PW",
-      description: "",
-      type: "password",
-      value: "rooot"
-    },
-    {
-      id: 3,
-      name: "Blub",
-      description: "",
-      type: "hostparam",
-      value: "awesome"
-    },
-    {
-      id: 4,
-      name: "111allo",
-      description: "",
-      type: "ip",
-      value: "1.1.1.1"
-    },
-    {
-      id: 5,
-      name: "1111aasdfasf",
-      description: "",
-      type: "hostname",
-      value: "dername"
-    },
-    {
-      id: 6,
-      name: "222nocheiner",
-      description: "",
-      type: "hostparam",
-      value: ""
-    },
-    {
-      id: 7,
-      name: "aaaaa",
-      description: "aa",
-      type: "ptable",
-      value: ""
-    },
-    {
-      id: 8,
-      name: "aaa",
-      description: "",
-      type: "hostparam",
-      value: "2134234"
-    }
-  ]
-};
-
-export const newInstance = {
-  mode: "newInstance",
-  applications: {
-    "1": "Test123",
-    "2": "sowasvonneu"
-  },
-  serviceDefinition: {
-    id: 1,
-    name: "Test123",
-    hostgroup_id: 1
-  },
-};
-export const editInstance = {
-  mode: "editInstance",
-  serviceDefinition: {
-    id: 1,
-    name: "Test123",
-    hostgroup_id: 1
-  },
-  parameters: [
-    {
-      id: 1,
-      name: "PuppetEnv",
-      description: "",
-      type: "puppetenv",
-      value: "2"
-    },
-    {
-      id: 2,
-      name: "PW",
-      description: "",
-      type: "password",
-      value: "rooot"
-    },
-    {
-      id: 3,
-      name: "Blub",
-      description: "",
-      type: "hostparam",
-      value: "awesome"
-    },
-    {
-      id: 4,
-      name: "111allo",
-      description: "",
-      type: "ip",
-      value: "1.1.1.1"
-    },
-    {
-      id: 5,
-      name: "1111aasdfasf",
-      description: "",
-      type: "hostname",
-      value: "dername"
-    },
-    {
-      id: 6,
-      name: "222nocheiner",
-      description: "",
-      type: "hostparam",
-      value: "adfasdf"
-    },
-    {
-      id: 7,
-      name: "aaaaa",
-      description: "aa",
-      type: "ptable",
-      value: "104"
-    },
-    {
-      id: 8,
-      name: "aaa",
-      description: "",
-      type: "hostparam",
-      value: "2134234"
-    }
-  ]
-};
diff --git a/webpack/components/ParameterSelection/__fixtures__/parameterSelectionData_1.fixtures.js b/webpack/components/ParameterSelection/__fixtures__/parameterSelectionData1.fixtures.js
similarity index 52%
rename from webpack/components/ParameterSelection/__fixtures__/parameterSelectionData_1.fixtures.js
rename to webpack/components/ParameterSelection/__fixtures__/parameterSelectionData1.fixtures.js
index d9b08c2d..adbdb390 100644
--- a/webpack/components/ParameterSelection/__fixtures__/parameterSelectionData_1.fixtures.js
+++ b/webpack/components/ParameterSelection/__fixtures__/parameterSelectionData1.fixtures.js
@@ -1,68 +1,68 @@
-export const parameterSelectionData_1 = {
+export const parameterSelectionData1 = {
   editMode: false,
   error: {
     errorMsg: '',
     status: '',
-    statusText: ''
+    statusText: '',
   },
   paramData: {
     hostgroup_id: 1,
     environments: [
       {
         id: 1,
-        name: 'production'
-      }
+        name: 'production',
+      },
     ],
     lifecycle_environments: [
       {
         id: 1,
-        name: 'Library'
-      }
+        name: 'Library',
+      },
     ],
     domains: [
       {
         id: 1,
-        name: 'deploy3.dev.atix'
-      }
+        name: 'deploy3.dev.atix',
+      },
     ],
     computeprofiles: [
       {
         id: 1,
-        name: '1-Small'
+        name: '1-Small',
       },
       {
         id: 2,
-        name: '2-Medium'
+        name: '2-Medium',
       },
       {
         id: 3,
-        name: '3-Large'
+        name: '3-Large',
       },
       {
         id: 4,
-        name: 'Orchahosts-VM'
-      }
+        name: 'Orchahosts-VM',
+      },
     ],
     ptables: [
       {
         id: 125,
-        name: 'Kickstart default'
-      }
+        name: 'Kickstart default',
+      },
     ],
-    dataType: 'PARAMETER_SELECTION_PARAM_TYPE_FOREMAN'
+    dataType: 'PARAMETER_SELECTION_PARAM_TYPE_FOREMAN',
   },
   hostgroupId: 1,
   loading: false,
   sortingColumns: {
     name: {
       direction: 'asc',
-      position: 0
-    }
+      position: 0,
+    },
   },
   paramDefinition: {
     id: 1,
     name: 'web',
-    dataId: '1'
+    dataId: '1',
   },
   columns: [
     {
@@ -72,25 +72,17 @@ export const parameterSelectionData_1 = {
         props: {
           sort: true,
           style: {
-            width: '25%'
+            width: '25%',
           },
-          index: 0
+          index: 0,
         },
-        transforms: [
-          null
-        ],
-        formatters: [
-          null
-        ],
-        customFormatters: [
-          null
-        ]
+        transforms: [null],
+        formatters: [null],
+        customFormatters: [null],
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'description',
@@ -99,28 +91,20 @@ export const parameterSelectionData_1 = {
         props: {
           sort: true,
           style: {
-            width: '25%'
+            width: '25%',
           },
-          index: 1
+          index: 1,
         },
-        transforms: [
-          null
-        ],
-        formatters: [
-          null
-        ],
-        customFormatters: [
-          null
-        ]
+        transforms: [null],
+        formatters: [null],
+        customFormatters: [null],
       },
       cell: {
         props: {
-          index: 1
+          index: 1,
         },
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'type',
@@ -129,25 +113,17 @@ export const parameterSelectionData_1 = {
         props: {
           sort: true,
           style: {
-            width: '20%'
+            width: '20%',
           },
-          index: 2
+          index: 2,
         },
-        transforms: [
-          null
-        ],
-        formatters: [
-          null
-        ],
-        customFormatters: [
-          null
-        ]
+        transforms: [null],
+        formatters: [null],
+        customFormatters: [null],
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'value',
@@ -156,25 +132,17 @@ export const parameterSelectionData_1 = {
         props: {
           sort: true,
           style: {
-            width: '20%'
+            width: '20%',
           },
-          index: 3
+          index: 3,
         },
-        transforms: [
-          null
-        ],
-        formatters: [
-          null
-        ],
-        customFormatters: [
-          null
-        ]
+        transforms: [null],
+        formatters: [null],
+        customFormatters: [null],
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
+        formatters: [null],
+      },
     },
     {
       property: 'actions',
@@ -182,20 +150,16 @@ export const parameterSelectionData_1 = {
         label: 'Actions',
         props: {
           style: {
-            width: '10%'
+            width: '10%',
           },
-          index: 4
+          index: 4,
         },
-        formatters: [
-          null
-        ]
+        formatters: [null],
       },
       cell: {
-        formatters: [
-          null
-        ]
-      }
-    }
+        formatters: [null],
+      },
+    },
   ],
   parameters: [
     {
@@ -204,7 +168,7 @@ export const parameterSelectionData_1 = {
       name: 'CP',
       description: '',
       type: 'computeprofile',
-      value: '1'
+      value: '1',
     },
     {
       id: 2,
@@ -212,23 +176,22 @@ export const parameterSelectionData_1 = {
       name: 'LE',
       description: '',
       type: 'lifecycleenv',
-      value: '1'
-    }
-  ],
-  allowedParameterTypes: [
-    'domain',
-    'hostparam',
-    'ip',
-    'ptable',
-    'puppetenv',
-    'password',
+      value: '1',
+    },
   ],
+  allowedParameterTypes: {
+    domain: 'Domain',
+    hostparam: 'Host parameter',
+    ip: 'IP',
+    ptable: 'Partition table',
+    puppetenv: 'Puppet environment',
+  },
   parameterTypes: {
     domain: 'Domain',
     hostparam: 'Host parameter',
     ip: 'IP',
     ptable: 'Partition table',
     puppetenv: 'Puppet environment',
-    password: 'Root password'
-  }
-}
+    password: 'Root password',
+  },
+};
diff --git a/webpack/components/ParameterSelection/__fixtures__/parameterSelectionReducer.fixtures.js b/webpack/components/ParameterSelection/__fixtures__/parameterSelectionReducer.fixtures.js
index 455e5ae4..ba2910ac 100644
--- a/webpack/components/ParameterSelection/__fixtures__/parameterSelectionReducer.fixtures.js
+++ b/webpack/components/ParameterSelection/__fixtures__/parameterSelectionReducer.fixtures.js
@@ -1,26 +1,22 @@
 import Immutable from 'seamless-immutable';
-import {
-   cloneDeep,
-   findIndex,
-   findLastIndex,
-} from 'lodash';
+import { cloneDeep, findIndex } from 'lodash';
 
-import {
-  parameterSelectionData_1,
-} from '../__fixtures__/parameterSelectionData_1.fixtures';
+import { parameterSelectionData1 } from '../__fixtures__/parameterSelectionData1.fixtures';
 
-export const successState = Immutable(parameterSelectionData_1);
+export const successState = Immutable(parameterSelectionData1);
 
 const EDIT_ROW_ID = 2;
 
-const editClone = parameterSelectionData_1;
-const editIndex = findIndex(editClone.parameters, { id: EDIT_ROW_ID })
-editClone["parameters"][editIndex].backup = cloneDeep(editClone["parameters"][editIndex]);
+const editClone = parameterSelectionData1;
+const editIndex = findIndex(editClone.parameters, { id: EDIT_ROW_ID });
+editClone.parameters[editIndex].backup = cloneDeep(
+  editClone.parameters[editIndex]
+);
 export const editState = Immutable(editClone);
 
 // Payload Data
-export const initParameterSelectionPayload = parameterSelectionData_1;
-export const addParameterPayload = { };
+export const initParameterSelectionPayload = parameterSelectionData1;
+export const addParameterPayload = {};
 export const lockParameterPayload = {
   rowData: {
     id: EDIT_ROW_ID,
@@ -47,14 +43,14 @@ export const cancelEditParameterPayload = {
   },
 };
 export const changeEditParameterPayload = {
-  value: "helloworld",
-  property: "value",
+  value: 'helloworld',
+  property: 'value',
   rowData: {
     id: EDIT_ROW_ID,
-  }
+  },
 };
 export const sortParameterPayload = {
-  selectedColumn: "type",
+  selectedColumn: 'type',
 };
 
 export const loadParamDataRequestPayload = {
@@ -65,12 +61,12 @@ export const loadParamDataSuccessPayload = {
   environments: [
     {
       id: 1,
-      name: "production"
+      name: 'production',
     },
     {
       id: 2,
-      name: "test"
-    }
+      name: 'test',
+    },
   ],
   lifecycle_environments: [],
   domains: [],
@@ -78,14 +74,14 @@ export const loadParamDataSuccessPayload = {
   ptables: [
     {
       id: 105,
-      name: "Kickstart default"
+      name: 'Kickstart default',
     },
     {
       id: 104,
-      name: "Kickstart default thin"
-    }
-  ]
+      name: 'Kickstart default thin',
+    },
+  ],
 };
 export const loadParamDataFailurePayload = {
-  error: "Something really bad happend",
+  error: 'Something really bad happend',
 };
diff --git a/webpack/components/ParameterSelection/__tests__/ParameterSelection.test.js b/webpack/components/ParameterSelection/__tests__/ParameterSelection.test.js
index 5d96d471..431e816b 100644
--- a/webpack/components/ParameterSelection/__tests__/ParameterSelection.test.js
+++ b/webpack/components/ParameterSelection/__tests__/ParameterSelection.test.js
@@ -9,49 +9,63 @@ import {
 
 const noop = () => {};
 
+const baseFixtures = {
+  loading: true,
+  location: 'Default Location',
+  organization: 'Default Organization',
+  editMode: false,
+  editModeCallback: noop,
+  paramDataUrl: '/acd/ui_acd_fdata/__id__',
+  paramType: '',
+  data: {},
+  initParameterSelection: noop,
+  addParameter: noop,
+  deleteParameter: noop,
+  lockParameter: noop,
+  activateEditParameter: noop,
+  confirmEditParameter: noop,
+  cancelEditParameter: noop,
+  changeEditParameter: noop,
+  sortParameter: noop,
+  openParameterSelectionDialogBox: noop,
+  closeParameterSelectionDialogBox: noop,
+  loadParamData: noop,
+};
+
 const fixtures = {
+  'should render loading': baseFixtures,
+
   'should render foreman parameter selection': {
-    location: "Default Location",
-    organization: "Default Organization",
-    editModeCallback: noop,
-    paramDataUrl: "/acd/ui_acd_fdata/__id__",
-    paramType: PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
-    data: {
-      type: PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
-      parameters: [],
-      useDefaultValue: true,
-      allowRowAdjustment: true,
-      allowNameAdjustment: true,
-      allowDescriptionAdjustment: true,
+    ...baseFixtures,
+    ...{
+      loading: false,
+      paramType: PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
+      data: {
+        type: PARAMETER_SELECTION_PARAM_TYPE_FOREMAN,
+        parameters: [],
+        useDefaultValue: true,
+        allowRowAdjustment: true,
+        allowNameAdjustment: true,
+        allowDescriptionAdjustment: true,
+      },
     },
-    addParameter: noop,
-    confirmEditParametre: noop,
-    cancelEditParameter: noop,
-    editModeCallback: noop,
-    loadParamData: noop,
-    initParameterSelection: noop,
   },
 
   'should render ansible parameter selection': {
-    location: "Default Location",
-    organization: "Default Organization",
-    editModeCallback: noop,
-    paramType: PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
-    data: {
-      type: PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
-      parameters: [],
-      useDefaultValue: false,
-      allowRowAdjustment: true,
-      allowNameAdjustment: true,
-      allowDescriptionAdjustment: true,
+    ...baseFixtures,
+    ...{
+      loading: false,
+      paramType: PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
+      data: {
+        type: PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE,
+        parameters: [],
+        useDefaultValue: false,
+        allowRowAdjustment: true,
+        allowNameAdjustment: true,
+        allowDescriptionAdjustment: true,
+      },
     },
-    addParameter: noop,
-    confirmEditParametre: noop,
-    cancelEditParameter: noop,
-    editModeCallback: noop,
-    loadParamData: noop,
-    initParameterSelection: noop,
-  }
+  },
 };
 
 describe('ParameterSelection', () =>
diff --git a/webpack/components/ParameterSelection/__tests__/ParameterSelectionHelper.test.js b/webpack/components/ParameterSelection/__tests__/ParameterSelectionHelper.test.js
new file mode 100644
index 00000000..b158e06c
--- /dev/null
+++ b/webpack/components/ParameterSelection/__tests__/ParameterSelectionHelper.test.js
@@ -0,0 +1,76 @@
+// import {expect, jest, test} from '@jest/globals';
+import {
+  transformForemanData,
+  filterParameterTypes,
+} from '../ParameterSelectionHelper';
+
+describe('transformForemanData', () => {
+  const fdata = [
+    { id: 1, name: '1-Small' },
+    { id: 2, name: '2-Medium' },
+    { id: 3, name: '3-Large' },
+  ];
+
+  it('returns empty on undefined', () => {
+    expect(transformForemanData(undefined)).toEqual('');
+  });
+
+  it('returns object with "id" as key and "name" as value', () => {
+    expect(transformForemanData(fdata)).toEqual({
+      1: '1-Small',
+      2: '2-Medium',
+      3: '3-Large',
+    });
+  });
+});
+
+describe('filterParameterTypes', () => {
+  const parameters = [
+    {
+      id: 1,
+      locked: false,
+      name: 'Password',
+      description: '',
+      type: 'password',
+      value: '1234',
+      isYaml: false,
+    },
+    {
+      id: 2,
+      locked: false,
+      name: 'NotAllowed',
+      description: '',
+      type: 'not_allowed',
+      value: '1234',
+      isYaml: false,
+    },
+    {
+      id: 3,
+      locked: false,
+      name: 'HostParameter1',
+      description: '',
+      type: 'hostparam',
+      value: '1234',
+      isYaml: false,
+    },
+    {
+      id: 4,
+      locked: false,
+      name: 'HostParameter2',
+      description: '',
+      type: 'hostparam',
+      value: '1234',
+      isYaml: false,
+    },
+  ];
+
+  it('removes parameter-types present in parameters', () => {
+    expect(filterParameterTypes({ password: '' }, parameters)).toEqual({});
+  });
+
+  it('keeps "hostparam" in parameter-types', () => {
+    expect(filterParameterTypes({ hostparam: '' }, parameters)).toEqual({
+      hostparam: '',
+    });
+  });
+});
diff --git a/webpack/components/ParameterSelection/__tests__/ParameterSelectionReducer.test.js b/webpack/components/ParameterSelection/__tests__/ParameterSelectionReducer.test.js
index e233a764..2fe71d11 100644
--- a/webpack/components/ParameterSelection/__tests__/ParameterSelectionReducer.test.js
+++ b/webpack/components/ParameterSelection/__tests__/ParameterSelectionReducer.test.js
@@ -31,8 +31,6 @@ import {
   PARAMETER_SELECTION_LOAD_PARAM_DATA_REQUEST,
   PARAMETER_SELECTION_LOAD_PARAM_DATA_SUCCESS,
   PARAMETER_SELECTION_LOAD_PARAM_DATA_FAILURE,
-  PARAMETER_SELECTION_COMPLEX_DATA_MODAL_OPEN,
-  PARAMETER_SELECTION_COMPLEX_DATA_MODAL_CLOSE,
 } from '../ParameterSelectionConstants';
 
 const fixtures = {
diff --git a/webpack/components/ParameterSelection/__tests__/ParameterSelectionSelectors.test.js b/webpack/components/ParameterSelection/__tests__/ParameterSelectionSelectors.test.js
index 08be7dc9..3417805b 100644
--- a/webpack/components/ParameterSelection/__tests__/ParameterSelectionSelectors.test.js
+++ b/webpack/components/ParameterSelection/__tests__/ParameterSelectionSelectors.test.js
@@ -14,9 +14,7 @@ import {
   selectEditParamsRowIndex,
 } from '../ParameterSelectionSelectors';
 
-import {
-  parameterSelectionData_1,
-} from '../__fixtures__/parameterSelectionData_1.fixtures';
+import { parameterSelectionData1 } from '../__fixtures__/parameterSelectionData1.fixtures';
 
 const stateFactory = obj => ({
   foremanAcd: {
@@ -25,28 +23,28 @@ const stateFactory = obj => ({
 });
 
 const fixtures = {
-  'should return loading from parameterSelectionData_1 fixtures': () =>
-    selectLoading(stateFactory(parameterSelectionData_1)),
-  'should return editMode from parameterSelectionData_1 fixtures': () =>
-    selectEditMode(stateFactory(parameterSelectionData_1)),
-  'should return paramData from parameterSelectionData_1 fixtures': () =>
-    selectParamData(stateFactory(parameterSelectionData_1)),
-  'should return allowedParameterTypes from parameterSelectionData_1 fixtures': () =>
-    selectAllowedParameterTypes(stateFactory(parameterSelectionData_1)),
-  'should return parameterTypes from parameterSelectionData_1 fixtures': () =>
-    selectParameterTypes(stateFactory(parameterSelectionData_1)),
-  'should return parameters from parameterSelectionData_1 fixtures': () =>
-    selectParameters(stateFactory(parameterSelectionData_1)),
-  'should return sortingColumns from parameterSelectionData_1 fixtures': () =>
-    selectSortingColumns(stateFactory(parameterSelectionData_1)),
-  'should return columns from parameterSelectionData_1 fixtures': () =>
-    selectColumns(stateFactory(parameterSelectionData_1)),
-  'should return ParamDefinition from parameterSelectionData_1 fixtures': () =>
-    selectParamDefinition(stateFactory(parameterSelectionData_1)),
-  'should return hostgroupId from parameterSelectionData_1 fixtures': () =>
-    selectHostgroupId(stateFactory(parameterSelectionData_1)),
-  'should return editParamsRowIndex from parameterSelectionData_1 fixtures': () =>
-    selectEditParamsRowIndex(stateFactory(parameterSelectionData_1)),
+  'should return loading from parameterSelectionData1 fixtures': () =>
+    selectLoading(stateFactory(parameterSelectionData1)),
+  'should return editMode from parameterSelectionData1 fixtures': () =>
+    selectEditMode(stateFactory(parameterSelectionData1)),
+  'should return paramData from parameterSelectionData1 fixtures': () =>
+    selectParamData(stateFactory(parameterSelectionData1)),
+  'should return allowedParameterTypes from parameterSelectionData1 fixtures': () =>
+    selectAllowedParameterTypes(stateFactory(parameterSelectionData1)),
+  'should return parameterTypes from parameterSelectionData1 fixtures': () =>
+    selectParameterTypes(stateFactory(parameterSelectionData1)),
+  'should return parameters from parameterSelectionData1 fixtures': () =>
+    selectParameters(stateFactory(parameterSelectionData1)),
+  'should return sortingColumns from parameterSelectionData1 fixtures': () =>
+    selectSortingColumns(stateFactory(parameterSelectionData1)),
+  'should return columns from parameterSelectionData1 fixtures': () =>
+    selectColumns(stateFactory(parameterSelectionData1)),
+  'should return ParamDefinition from parameterSelectionData1 fixtures': () =>
+    selectParamDefinition(stateFactory(parameterSelectionData1)),
+  'should return hostgroupId from parameterSelectionData1 fixtures': () =>
+    selectHostgroupId(stateFactory(parameterSelectionData1)),
+  'should return editParamsRowIndex from parameterSelectionData1 fixtures': () =>
+    selectEditParamsRowIndex(stateFactory(parameterSelectionData1)),
 };
 
 describe('ParameterSelectionSelectors', () =>
diff --git a/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelection.test.js.snap b/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelection.test.js.snap
index 93eac221..d90a8c4c 100644
--- a/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelection.test.js.snap
+++ b/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelection.test.js.snap
@@ -199,3 +199,103 @@ exports[`ParameterSelection should render foreman parameter selection 1`] = `
   </div>
 </div>
 `;
+
+exports[`ParameterSelection should render loading 1`] = `
+<div>
+  <div
+    className="clearfix"
+  >
+    <div
+      className="form-group"
+    >
+      <TablePfProvider
+        bordered={true}
+        className=""
+        columns={Array []}
+        components={
+          Object {
+            "body": Object {
+              "cell": [Function],
+              "row": [Function],
+            },
+            "header": Object {
+              "cell": [Function],
+            },
+          }
+        }
+        condensed={false}
+        dataTable={true}
+        hover={true}
+        inlineEdit={true}
+        striped={true}
+      >
+        <Header
+          headerRows={
+            Array [
+              Array [],
+            ]
+          }
+        />
+        <Body
+          onRow={[Function]}
+          rowKey="id"
+          rows={Array []}
+        />
+      </TablePfProvider>
+      <AddTableEntry
+        disabled={false}
+        hidden={true}
+        onAddTableEntry={[Function]}
+      />
+    </div>
+  </div>
+  <div>
+    <ForemanModal
+      dialogClassName="complex_data_modal"
+      id="ParameterSelectionComplexDataModal"
+      title="YAML Data Input"
+    >
+      <Header
+        closeButton={false}
+      />
+      <textarea
+        defaultValue=""
+        id="yamlData"
+        onChange={[Function]}
+        style={
+          Object {
+            "fontFamily": "Courier",
+            "height": "350px",
+            "width": "550px",
+          }
+        }
+      />
+      <Footer>
+        <div>
+          <div />
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="primary"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Save
+          </Button>
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="default"
+            disabled={false}
+            onClick={[Function]}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Footer>
+    </ForemanModal>
+  </div>
+</div>
+`;
diff --git a/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelectionReducer.test.js.snap b/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelectionReducer.test.js.snap
index 38d36069..5ef0b217 100644
--- a/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelectionReducer.test.js.snap
+++ b/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelectionReducer.test.js.snap
@@ -2,14 +2,13 @@
 
 exports[`ParameterSelectionReducer should activate edit parameter 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -248,14 +247,13 @@ Object {
 
 exports[`ParameterSelectionReducer should add a parameter 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -506,14 +504,13 @@ Object {
 
 exports[`ParameterSelectionReducer should cancel edit parameter 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -743,14 +740,13 @@ Object {
 
 exports[`ParameterSelectionReducer should change edit parameter 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -989,14 +985,13 @@ Object {
 
 exports[`ParameterSelectionReducer should confirm edit parameter 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -1189,14 +1184,13 @@ Object {
     "id": 1,
     "name": "web",
   },
-  "parameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "parameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "parameters": Array [
     Object {
       "description": "",
@@ -1226,14 +1220,13 @@ Object {
 
 exports[`ParameterSelectionReducer should delete a parameter 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -1426,14 +1419,13 @@ Object {
     "id": 1,
     "name": "web",
   },
-  "parameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "parameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "parameters": Array [
     Object {
       "description": "",
@@ -1455,14 +1447,13 @@ Object {
 
 exports[`ParameterSelectionReducer should initialize component 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -1700,14 +1691,13 @@ Object {
 
 exports[`ParameterSelectionReducer should load param data be erroneous 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -1933,14 +1923,13 @@ Object {
 
 exports[`ParameterSelectionReducer should load param data be successful 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -2170,14 +2159,13 @@ Object {
 
 exports[`ParameterSelectionReducer should lock a parameter 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -2407,14 +2395,13 @@ Object {
 
 exports[`ParameterSelectionReducer should request load param data 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
@@ -2650,19 +2637,19 @@ Object {
     "status": "",
     "statusText": "",
   },
+  "loading": true,
 }
 `;
 
 exports[`ParameterSelectionReducer should sort parameter 1`] = `
 Object {
-  "allowedParameterTypes": Array [
-    "domain",
-    "hostparam",
-    "ip",
-    "ptable",
-    "puppetenv",
-    "password",
-  ],
+  "allowedParameterTypes": Object {
+    "domain": "Domain",
+    "hostparam": "Host parameter",
+    "ip": "IP",
+    "ptable": "Partition table",
+    "puppetenv": "Puppet environment",
+  },
   "columns": Array [
     Object {
       "cell": Object {
diff --git a/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelectionSelectors.test.js.snap b/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelectionSelectors.test.js.snap
index f0e8d136..5e3e3eaf 100644
--- a/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelectionSelectors.test.js.snap
+++ b/webpack/components/ParameterSelection/__tests__/__snapshots__/ParameterSelectionSelectors.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ParameterSelectionSelectors should return ParamDefinition from parameterSelectionData_1 fixtures 1`] = `
+exports[`ParameterSelectionSelectors should return ParamDefinition from parameterSelectionData1 fixtures 1`] = `
 Object {
   "dataId": "1",
   "id": 1,
@@ -8,18 +8,17 @@ Object {
 }
 `;
 
-exports[`ParameterSelectionSelectors should return allowedParameterTypes from parameterSelectionData_1 fixtures 1`] = `
-Array [
-  "domain",
-  "hostparam",
-  "ip",
-  "ptable",
-  "puppetenv",
-  "password",
-]
+exports[`ParameterSelectionSelectors should return allowedParameterTypes from parameterSelectionData1 fixtures 1`] = `
+Object {
+  "domain": "Domain",
+  "hostparam": "Host parameter",
+  "ip": "IP",
+  "ptable": "Partition table",
+  "puppetenv": "Puppet environment",
+}
 `;
 
-exports[`ParameterSelectionSelectors should return columns from parameterSelectionData_1 fixtures 1`] = `
+exports[`ParameterSelectionSelectors should return columns from parameterSelectionData1 fixtures 1`] = `
 Array [
   Object {
     "cell": Object {
@@ -155,15 +154,15 @@ Array [
 ]
 `;
 
-exports[`ParameterSelectionSelectors should return editMode from parameterSelectionData_1 fixtures 1`] = `false`;
+exports[`ParameterSelectionSelectors should return editMode from parameterSelectionData1 fixtures 1`] = `false`;
 
-exports[`ParameterSelectionSelectors should return editParamsRowIndex from parameterSelectionData_1 fixtures 1`] = `undefined`;
+exports[`ParameterSelectionSelectors should return editParamsRowIndex from parameterSelectionData1 fixtures 1`] = `undefined`;
 
-exports[`ParameterSelectionSelectors should return hostgroupId from parameterSelectionData_1 fixtures 1`] = `1`;
+exports[`ParameterSelectionSelectors should return hostgroupId from parameterSelectionData1 fixtures 1`] = `1`;
 
-exports[`ParameterSelectionSelectors should return loading from parameterSelectionData_1 fixtures 1`] = `false`;
+exports[`ParameterSelectionSelectors should return loading from parameterSelectionData1 fixtures 1`] = `false`;
 
-exports[`ParameterSelectionSelectors should return paramData from parameterSelectionData_1 fixtures 1`] = `
+exports[`ParameterSelectionSelectors should return paramData from parameterSelectionData1 fixtures 1`] = `
 Object {
   "computeprofiles": Array [
     Object {
@@ -212,7 +211,7 @@ Object {
 }
 `;
 
-exports[`ParameterSelectionSelectors should return parameterTypes from parameterSelectionData_1 fixtures 1`] = `
+exports[`ParameterSelectionSelectors should return parameterTypes from parameterSelectionData1 fixtures 1`] = `
 Object {
   "domain": "Domain",
   "hostparam": "Host parameter",
@@ -223,7 +222,7 @@ Object {
 }
 `;
 
-exports[`ParameterSelectionSelectors should return parameters from parameterSelectionData_1 fixtures 1`] = `
+exports[`ParameterSelectionSelectors should return parameters from parameterSelectionData1 fixtures 1`] = `
 Array [
   Object {
     "description": "",
@@ -244,7 +243,7 @@ Array [
 ]
 `;
 
-exports[`ParameterSelectionSelectors should return sortingColumns from parameterSelectionData_1 fixtures 1`] = `
+exports[`ParameterSelectionSelectors should return sortingColumns from parameterSelectionData1 fixtures 1`] = `
 Object {
   "name": Object {
     "direction": "asc",
diff --git a/webpack/components/ParameterSelection/index.js b/webpack/components/ParameterSelection/index.js
index 811e8e0f..5a28dffc 100644
--- a/webpack/components/ParameterSelection/index.js
+++ b/webpack/components/ParameterSelection/index.js
@@ -34,7 +34,4 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch =>
   bindActionCreators(ParameterSelectionActions, dispatch);
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ParameterSelection);
+export default connect(mapStateToProps, mapDispatchToProps)(ParameterSelection);
diff --git a/webpack/components/SyncGitRepo/SyncGitRepo.js b/webpack/components/SyncGitRepo/SyncGitRepo.js
index f7c64e1b..c11ff713 100644
--- a/webpack/components/SyncGitRepo/SyncGitRepo.js
+++ b/webpack/components/SyncGitRepo/SyncGitRepo.js
@@ -1,69 +1,52 @@
-import React, { useState } from 'react'
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Icon,
-  Button,
-} from 'patternfly-react';
-import {
-  sprintf,
-  translate as __
-} from 'foremanReact/common/I18n';
-import {Select, TextInput} from 'foremanReact/components/common/forms/Select';
-import ScmTypeSelector from './components/ScmTypeSelector';
-import FormTextInput from './components/FormTextInput'
-import { arrayToObject } from '../../helper';
-import CommonForm from 'foremanReact/components/common/forms/CommonForm';
+import { Button } from 'patternfly-react';
 import $ from 'jquery';
-
-import {
-  FormControl,
-  inlineEditFormatterFactory,
-} from 'patternfly-react';
+import CommonForm from 'foremanReact/components/common/forms/CommonForm';
+import { translate as __ } from 'foremanReact/common/I18n';
+import ScmTypeSelector from './components/ScmTypeSelector';
+import FormTextInput from './components/FormTextInput';
 
 class SyncGitRepo extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
   validateParameters() {
     let result = true;
-    let msg = "";
+    let msg = '';
 
-    if (this.props.path === "" && this.props.scmType === 'directory') {
+    if (this.props.path === '' && this.props.scmType === 'directory') {
       result = false;
 
-      if (msg == "") {
-        msg += __("Directory path cannot be blank");
+      if (msg === '') {
+        msg += __('Directory path cannot be blank');
       }
     }
 
     if (this.props.scmType === 'git') {
-      if (this.props.gitUrl === "") {
+      if (this.props.gitUrl === '') {
         result = false;
 
-        if (msg == "") {
-          msg += __("Git URL cannot be blank");
+        if (msg === '') {
+          msg += __('Git URL cannot be blank');
         }
       }
     }
 
-    if (this.props.scmType !== "git" && this.props.scmType !== "directory" ) {
+    if (this.props.scmType !== 'git' && this.props.scmType !== 'directory') {
       result = false;
 
-      if (msg == "") {
-        msg += __("SCM Type cannot be blank");
+      if (msg === '') {
+        msg += __('SCM Type cannot be blank');
       }
     }
 
     return {
       validateResult: result,
-      validateMsg: msg
-    }
+      validateMsg: msg,
+    };
   }
 
   componentDidMount() {
     const {
-      data: {mode, scmType, path, gitCommit, gitUrl, appDefinitions},
+      data: { mode, scmType, path, gitCommit, gitUrl },
       initSyncGitRepo,
       loadScmType,
       loadPath,
@@ -77,20 +60,19 @@ class SyncGitRepo extends React.Component {
       loadPath(path);
       loadGitCommit(gitCommit);
       loadGitUrl(gitUrl);
-      handleGitRepoSync(this.props.scmType, this.props.path, this.props.gitCommit)
+      handleGitRepoSync(
+        this.props.scmType,
+        this.props.path,
+        this.props.gitCommit
+      );
     }
 
-    initSyncGitRepo(
-      scmType,
-      path,
-      gitCommit,
-      gitUrl,
-    );
-  };
+    initSyncGitRepo(scmType, path, gitCommit, gitUrl);
+  }
 
   render() {
     const {
-      data: {mode, scmTypes, organization, location, appDefinitions},
+      data: { scmTypes, appDefinitions },
       scmType,
       path,
       gitCommit,
@@ -102,101 +84,126 @@ class SyncGitRepo extends React.Component {
       handleGitRepoSync,
     } = this.props;
 
-    var url_validator = /^(ftp|http|https):\/\/[^ "]+$/;
+    const urlValidator = /^(ftp|http|https):\/\/[^ "]+$/;
 
-    let { validateResult, validateMsg } = this.validateParameters();
+    const { validateResult, validateMsg } = this.validateParameters();
 
+    /* eslint-disable jquery/no-attr */
     if (validateResult === false) {
-      $('input[type="submit"][name="commit"]').attr("disabled", true);
+      $('input[type="submit"][name="commit"]').attr('disabled', true);
     } else {
-      $('input[type="submit"][name="commit"]').attr("disabled", false);
+      $('input[type="submit"][name="commit"]').attr('disabled', false);
     }
+    /* eslint-enable jquery/no-attr */
 
     return (
       <span>
         <div>
           <ScmTypeSelector
             label="SCM Type *"
-            hidden={ false }
-            editable={ appDefinitions.length == 0 }
-            viewText={ scmTypes[scmType] }
-            options={ scmTypes }
-            onChange={ loadScmType }
-            selectValue={ scmType }
+            hidden={false}
+            editable={appDefinitions.length === 0}
+            viewText={scmTypes[scmType]}
+            options={scmTypes}
+            onChange={loadScmType}
+            selectValue={scmType}
           />
-          {(scmType === 'directory') ? (
-          <FormTextInput
-            label= 'Directory Path *'
-            editable= { appDefinitions.length == 0 }
-            viewText={ path }
-            onChange={ loadPath }
-            parameter="path"
-          /> ) : null }
-          {(scmType === 'git') ? (
-          <FormTextInput
-            label= 'Git Url *'
-            editable= { appDefinitions.length == 0 }
-            viewText={ gitUrl }
-            onChange={ loadGitUrl }
-            parameter="git_url"
-          /> ) : null }
-          {(!url_validator.test(gitUrl) && gitUrl)? (
-          <div className="form-group">
-            <div className="col-md-2"></div>
-            <div className="col-md-4"><pre>{ __("Git URL is wrong") }</pre></div>
-          </div>
-        ) : (<div></div>)}
-        {validateResult == false ? (
+          {scmType === 'directory' ? (
+            <FormTextInput
+              label="Directory Path *"
+              editable={appDefinitions.length === 0}
+              viewText={path}
+              onChange={loadPath}
+              parameter="path"
+            />
+          ) : null}
+          {scmType === 'git' ? (
+            <FormTextInput
+              label="Git Url *"
+              editable={appDefinitions.length === 0}
+              viewText={gitUrl}
+              onChange={loadGitUrl}
+              parameter="git_url"
+            />
+          ) : null}
+          {!urlValidator.test(gitUrl) && gitUrl ? (
             <div className="form-group">
-              <div className="col-md-2"></div>
-              <div className="col-md-4"><pre>{validateMsg}</pre></div>
+              <div className="col-md-2" />
+              <div className="col-md-4">
+                <pre>{__('Git URL is wrong')}</pre>
+              </div>
             </div>
-        ) : (<div></div>)}
-          {(scmType === "git") ? (
-          <FormTextInput
-            label="Git Branch/Commit/Tag"
-            editable= { appDefinitions.length == 0 }
-            viewText={ gitCommit }
-            onChange={ loadGitCommit }
-            parameter="git_commit"
-          /> ) : null }
-          {(scmType === "git") ? (
-          <CommonForm>
-          <span className="help-block help-inline">
-          <Button
-            bsStyle="default"
-            onClick={ (e) => handleGitRepoSync(gitUrl, gitCommit, scmType, e) }
-            >
-            {__('Sync Repository')} </Button>
-            </span>
+          ) : (
+            <div />
+          )}
+          {validateResult === false ? (
+            <div className="form-group">
+              <div className="col-md-2" />
+              <div className="col-md-4">
+                <pre>{validateMsg}</pre>
+              </div>
+            </div>
+          ) : (
+            <div />
+          )}
+          {scmType === 'git' ? (
+            <FormTextInput
+              label="Git Branch/Commit/Tag"
+              editable={appDefinitions.length === 0}
+              viewText={gitCommit}
+              onChange={loadGitCommit}
+              parameter="git_commit"
+            />
+          ) : null}
+          {scmType === 'git' ? (
+            <CommonForm>
+              <span className="help-block help-inline">
+                <Button
+                  bsStyle="default"
+                  onClick={e =>
+                    handleGitRepoSync(gitUrl, gitCommit, scmType, e)
+                  }
+                >
+                  {__('Sync Repository')}{' '}
+                </Button>
+              </span>
             </CommonForm>
-        ) : null }
-
+          ) : null}
         </div>
-          </span>
-        )};
+      </span>
+    );
+  }
 }
 
 SyncGitRepo.defaultProps = {
-  error: {},
-  scmType: "",
-  path: "",
-  gitCommit: "",
-  gitUrl: "",
-
-}
+  scmType: '',
+  path: '',
+  gitCommit: '',
+  gitUrl: '',
+};
 
 SyncGitRepo.propTypes = {
-  initSyncGitRepo: PropTypes.func,
-  loadScmType: PropTypes.func,
-  loadGitCommit: PropTypes.func,
-  loadPath: PropTypes.func,
-  loadGitUrl: PropTypes.func,
-  handleGitRepoSync: PropTypes.func,
-  scmType: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
+  data: PropTypes.shape({
+    appDefinitions: PropTypes.array.isRequired,
+    gitCommit: PropTypes.string.isRequired,
+    gitUrl: PropTypes.string.isRequired,
+    location: PropTypes.string,
+    mode: PropTypes.string,
+    organization: PropTypes.string,
+    path: PropTypes.string.isRequired,
+    scmType: PropTypes.string.isRequired,
+    scmTypes: PropTypes.object.isRequired,
+  }).isRequired,
   gitCommit: PropTypes.string,
   gitUrl: PropTypes.string,
+  handleGitRepoSync: PropTypes.func.isRequired,
+  initSyncGitRepo: PropTypes.func.isRequired,
+  loadScmType: PropTypes.func.isRequired,
+  loadGitCommit: PropTypes.func.isRequired,
+  loadPath: PropTypes.func.isRequired,
+  loadGitUrl: PropTypes.func.isRequired,
+  path: PropTypes.string,
+  scmType: PropTypes.string,
 };
 
 export default SyncGitRepo;
diff --git a/webpack/components/SyncGitRepo/SyncGitRepoActions.js b/webpack/components/SyncGitRepo/SyncGitRepoActions.js
index e066fd47..a7f66da1 100644
--- a/webpack/components/SyncGitRepo/SyncGitRepoActions.js
+++ b/webpack/components/SyncGitRepo/SyncGitRepoActions.js
@@ -1,5 +1,4 @@
-import React from 'react';
-import { API, actionTypeGenerator } from 'foremanReact/redux/API';
+import { API } from 'foremanReact/redux/API';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import { addToast } from 'foremanReact/components/ToastsList';
 
@@ -18,7 +17,7 @@ export const initSyncGitRepo = (
   scmType,
   path,
   gitCommit,
-  gitUrl,
+  gitUrl
 ) => dispatch => {
   const initialState = {};
 
@@ -33,91 +32,82 @@ export const initSyncGitRepo = (
   });
 };
 
-const errorHandler = (msg, err) => {
-  const error = {
-    errorMsg: __('Failed to fetch data from server.'),
-    statusText: err,
-  };
-  return { type: msg, payload: { error } };
-};
-
 export const handleGitRepoSync = (
-  gitUrl, gitCommit, scmType, e,
+  gitUrl,
+  gitCommit,
+  scmType,
+  e
 ) => async dispatch => {
   e.preventDefault();
-  //const { REQUEST, SUCCESS, FAILURE } = actionTypeGenerator(SYNC_GIT_REPOSITORY);
   dispatch({
     type: SYNC_GIT_REPO_REQUEST,
     payload: {
       git_commit: gitCommit,
       scm_type: scmType,
       git_url: gitUrl,
-    }});
+    },
+  });
   try {
-    const { data } = await API.post(
-      '/acd/ansible_playbooks/sync_git_repo', {"ansible_playbook": {"git_commit":gitCommit, "scm_type":scmType, "git_url":gitUrl}}
+    const { data } = await API.post('/acd/ansible_playbooks/sync_git_repo', {
+      ansible_playbook: {
+        git_commit: gitCommit,
+        scm_type: scmType,
+        git_url: gitUrl,
+      },
+    });
+    dispatch(
+      addToast({
+        type: 'success',
+        message: sprintf(__('Sucessfully synced git repository ')),
+        key: SYNC_GIT_REPO_SUCCESS,
+      })
     );
+    return dispatch({
+      type: SYNC_GIT_REPO_SUCCESS,
+      payload: {
+        git_commit: gitCommit,
+        git_url: gitUrl,
+        scm_type: scmType,
+      },
+      response: data,
+    });
+  } catch (error) {
     dispatch(
-        addToast({
-          type: 'success',
-          message: sprintf(
-            __('Sucessfully synced git repository ')
-          ),
-          key: SYNC_GIT_REPO_SUCCESS,
-        })
-      );
-      return dispatch({
-        type: SYNC_GIT_REPO_SUCCESS,
-        payload: {
-          git_commit: gitCommit,
-          git_url: gitUrl,
-          scm_type: scmType,
-        },
-        response: data,
-      });
-    } catch (error) {
-      dispatch(
-        addToast({
-          type: 'error',
-          message: sprintf(__('Error occurred while syncing git repository: %s'), error.response.data.message),
-          key: SYNC_GIT_REPO_FAILURE,
-        })
-      );
-      return dispatch({
-        type: SYNC_GIT_REPO_FAILURE,
-        payload: {
-          error: error,
-        },
-        response: error,
-      });
-    }
+      addToast({
+        type: 'error',
+        message: sprintf(
+          __('Error occurred while syncing git repository: %s'),
+          error.response.data.message
+        ),
+        key: SYNC_GIT_REPO_FAILURE,
+      })
+    );
+    return dispatch({
+      type: SYNC_GIT_REPO_FAILURE,
+      payload: {
+        error,
+      },
+      response: error,
+    });
+  }
 };
 
+export const loadScmType = scmType => ({
+  type: SYNC_GIT_REPO_LOAD_SCM_TYPE,
+  scmType,
+});
 
-export const loadScmType = (scmType) => {
-  return ({
-    type: SYNC_GIT_REPO_LOAD_SCM_TYPE,
-    scmType: scmType,
-})
-};
-
-export const loadPath = (path) => {
-  return ({
-    type: SYNC_GIT_REPO_LOAD_PATH,
-    path: path,
-})
-};
+export const loadPath = path => ({
+  type: SYNC_GIT_REPO_LOAD_PATH,
+  path,
+});
 
-export const loadGitCommit = (gitCommit) => {
-  return ({
-    type: SYNC_GIT_REPO_LOAD_GIT_COMMIT,
-    gitCommit: gitCommit,
-})
-};
+export const loadGitCommit = gitCommit => ({
+  type: SYNC_GIT_REPO_LOAD_GIT_COMMIT,
+  gitCommit,
+});
 
-export const loadGitUrl = (gitUrl) => {
-  return ({
-    type: SYNC_GIT_REPO_LOAD_GIT_URL,
-    gitUrl: gitUrl,
-})
-};
+export const loadGitUrl = gitUrl => ({
+  type: SYNC_GIT_REPO_LOAD_GIT_URL,
+  gitUrl,
+});
diff --git a/webpack/components/SyncGitRepo/SyncGitRepoReducer.js b/webpack/components/SyncGitRepo/SyncGitRepoReducer.js
index 1de230b8..0f106690 100644
--- a/webpack/components/SyncGitRepo/SyncGitRepoReducer.js
+++ b/webpack/components/SyncGitRepo/SyncGitRepoReducer.js
@@ -24,54 +24,54 @@ const syncGitRepoConf = (state = initialState, action) => {
     }
     case SYNC_GIT_REPO_LOAD_SCM_TYPE: {
       let newState = {};
-      const scmType = action.scmType;
+      const { scmType } = action;
 
       newState = {
-        scmType: scmType,
+        scmType,
       };
 
       return state.merge(newState);
     }
     case SYNC_GIT_REPO_LOAD_PATH: {
       let newState = {};
-      const path = action.path;
+      const { path } = action;
 
       newState = {
-        path: path,
+        path,
       };
 
       return state.merge(newState);
     }
     case SYNC_GIT_REPO_LOAD_GIT_COMMIT: {
       let newState = {};
-      const gitCommit = action.gitCommit;
+      const { gitCommit } = action;
 
       newState = {
-        gitCommit: gitCommit,
+        gitCommit,
       };
 
       return state.merge(newState);
     }
     case SYNC_GIT_REPO_LOAD_GIT_URL: {
       let newState = {};
-      const gitUrl = action.gitUrl;
+      const { gitUrl } = action;
 
       newState = {
-        gitUrl: gitUrl,
+        gitUrl,
       };
 
       return state.merge(newState);
     }
     case SYNC_GIT_REPO_FAILURE: {
-       return state.merge({ error: payload.error, loading: false });
-     }
-     case SYNC_GIT_REPO_REQUEST: {
-       return state.set('loading', true);
-     }
-     case SYNC_GIT_REPO_SUCCESS: {
-       let newState = {};
-       return state.merge(newState);
-     }
+      return state.merge({ error: payload.error, loading: false });
+    }
+    case SYNC_GIT_REPO_REQUEST: {
+      return state.set('loading', true);
+    }
+    case SYNC_GIT_REPO_SUCCESS: {
+      const newState = {};
+      return state.merge(newState);
+    }
     default:
       return state;
   }
diff --git a/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoConfData1.fixtures.js b/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoConfData1.fixtures.js
new file mode 100644
index 00000000..30a2635a
--- /dev/null
+++ b/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoConfData1.fixtures.js
@@ -0,0 +1,7 @@
+export const syncGitRepoConfData1 = {
+  path: 'https://example.com',
+  gitCommit: 'master',
+  scmType: { git: 'git' },
+  scmTypes: { git: 'git', directory: 'directory' },
+  gitUrl: 'https://github.com/alpha.git',
+};
diff --git a/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoConfData_1.fixtures.js b/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoConfData_1.fixtures.js
deleted file mode 100644
index b15acbcb..00000000
--- a/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoConfData_1.fixtures.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const syncGitRepoConfData_1 = {
-  path: 'https://example.com',
-  gitCommit: 'master',
-  scmType: { git: "git" },
-  scmTypes: { git: "git", directory: "directory"},
-  gitUrl: 'https://github.com/alpha.git'
-}
diff --git a/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoReducer.fixtures.js b/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoReducer.fixtures.js
index 34f32d31..dbf96321 100644
--- a/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoReducer.fixtures.js
+++ b/webpack/components/SyncGitRepo/__fixtures__/syncGitRepoReducer.fixtures.js
@@ -1,44 +1,36 @@
 import Immutable from 'seamless-immutable';
-import {
-   cloneDeep,
-   findIndex,
-   findLastIndex,
-} from 'lodash';
 
-import {
-  syncGitRepoConfData_1,
-} from '../__fixtures__/syncGitRepoConfData_1.fixtures';
+import { syncGitRepoConfData1 } from '../__fixtures__/syncGitRepoConfData1.fixtures';
 
-export const successState = Immutable(syncGitRepoConfData_1);
+export const successState = Immutable(syncGitRepoConfData1);
 
 // Payload Data
-export const initSyncGitRepoPayload = syncGitRepoConfData_1;
+export const initSyncGitRepoPayload = syncGitRepoConfData1;
 
 export const loadPathPayload = {
-  path: 'https://example.com'
+  path: 'https://example.com',
 };
 
 export const loadGitCommitPayload = {
-  gitCommit: 'master'
+  gitCommit: 'master',
 };
 
 export const loadGitUrlPayload = {
-  gitUrl: 'https://github.com/alpha.git'
+  gitUrl: 'https://github.com/alpha.git',
 };
 
 export const loadScmTypePayload = {
   scmType: {
-    git: "git",
-  }
+    git: 'git',
+  },
 };
 
 export const handleGitRepoSyncRequestPayload = {
   clearRows: false,
 };
 
-export const handleGitRepoSyncSuccessPayload = {
-};
+export const handleGitRepoSyncSuccessPayload = {};
 
 export const handleGitRepoSyncFailurePayload = {
-  error: "Something really bad happend",
+  error: 'Something really bad happend',
 };
diff --git a/webpack/components/SyncGitRepo/__tests__/SyncGitRepo.test.js b/webpack/components/SyncGitRepo/__tests__/SyncGitRepo.test.js
index 5233a07f..1d83ccbb 100644
--- a/webpack/components/SyncGitRepo/__tests__/SyncGitRepo.test.js
+++ b/webpack/components/SyncGitRepo/__tests__/SyncGitRepo.test.js
@@ -5,14 +5,14 @@ import SyncGitRepo from '../SyncGitRepo';
 const noop = () => {};
 
 const fixtures = {
-  'should render ansible playbook': {
+  'should render empty ansible playbook': {
     data: {
-      scmType: "",
-      path: "",
-      gitCommit: "",
-      appDefinitions: "",
-      gitUrl: "",
+      path: '',
+      gitCommit: '',
+      appDefinitions: [],
+      gitUrl: '',
       scmTypes: {},
+      scmType: '',
     },
     initSyncGitRepo: noop,
     loadScmType: noop,
@@ -21,6 +21,80 @@ const fixtures = {
     loadGitUrl: noop,
     handleGitRepoSync: noop,
   },
+  'should render ansible playbook git-form': {
+    data: {
+      path: '',
+      gitCommit: '',
+      appDefinitions: [],
+      gitUrl: '',
+      scmTypes: {},
+      scmType: '',
+    },
+    scmType: 'git',
+    initSyncGitRepo: noop,
+    loadScmType: noop,
+    loadPath: noop,
+    loadGitCommit: noop,
+    loadGitUrl: noop,
+    handleGitRepoSync: noop,
+  },
+  'should render ansible playbook directory-form': {
+    data: {
+      path: '',
+      gitCommit: '',
+      appDefinitions: [],
+      gitUrl: '',
+      scmTypes: {},
+      scmType: '',
+    },
+    scmType: 'directory',
+    initSyncGitRepo: noop,
+    loadScmType: noop,
+    loadPath: noop,
+    loadGitCommit: noop,
+    loadGitUrl: noop,
+    handleGitRepoSync: noop,
+  },
+  'should render ansible playbook git-form with server-data': {
+    data: {
+      path: '',
+      gitCommit: '',
+      appDefinitions: [],
+      gitUrl: '',
+      scmTypes: { directory: 'directory', git: 'git' },
+      scmType: '',
+    },
+    path: '/ansible/play_hello.yaml',
+    gitCommit: 'main',
+    gitUrl: 'https://git.example.com/playbooks.git',
+    scmType: 'git',
+    initSyncGitRepo: noop,
+    loadScmType: noop,
+    loadPath: noop,
+    loadGitCommit: noop,
+    loadGitUrl: noop,
+    handleGitRepoSync: noop,
+  },
+  'should render ansible playbook directory-form with server-data': {
+    data: {
+      path: '',
+      gitCommit: '',
+      appDefinitions: [],
+      gitUrl: '',
+      scmTypes: { directory: 'directory', git: 'git' },
+      scmType: 'directory',
+    },
+    gitUrl: '',
+    path: '/ansible/play_hello.yaml',
+    gitCommit: '',
+    scmType: 'directory',
+    initSyncGitRepo: noop,
+    loadScmType: noop,
+    loadPath: noop,
+    loadGitCommit: noop,
+    loadGitUrl: noop,
+    handleGitRepoSync: noop,
+  },
 };
 
 describe('SyncGitRepo', () =>
diff --git a/webpack/components/SyncGitRepo/__tests__/SyncGitRepoSelectors.test.js b/webpack/components/SyncGitRepo/__tests__/SyncGitRepoSelectors.test.js
index 071efd5c..c7f1dc66 100644
--- a/webpack/components/SyncGitRepo/__tests__/SyncGitRepoSelectors.test.js
+++ b/webpack/components/SyncGitRepo/__tests__/SyncGitRepoSelectors.test.js
@@ -7,9 +7,7 @@ import {
   selectGitUrl,
 } from '../SyncGitRepoSelectors';
 
-import {
-  syncGitRepoConfData_1,
-} from '../__fixtures__/syncGitRepoConfData_1.fixtures';
+import { syncGitRepoConfData1 } from '../__fixtures__/syncGitRepoConfData1.fixtures';
 
 const stateFactory = obj => ({
   foremanAcd: {
@@ -18,14 +16,14 @@ const stateFactory = obj => ({
 });
 
 const fixtures = {
-  'should return scmType from syncGitRepoConfData_1 fixtures': () =>
-    selectScmType(stateFactory(syncGitRepoConfData_1)),
-  'should return path from syncGitRepoConfData_1 fixtures': () =>
-    selectPath(stateFactory(syncGitRepoConfData_1)),
-  'should return gitCommit from syncGitRepoConfData_1 fixtures': () =>
-    selectGitCommit(stateFactory(syncGitRepoConfData_1)),
-  'should return gitUrl from syncGitRepoConfData_1 fixtures': () =>
-    selectGitUrl(stateFactory(syncGitRepoConfData_1)),
+  'should return scmType from syncGitRepoConfData1 fixtures': () =>
+    selectScmType(stateFactory(syncGitRepoConfData1)),
+  'should return path from syncGitRepoConfData1 fixtures': () =>
+    selectPath(stateFactory(syncGitRepoConfData1)),
+  'should return gitCommit from syncGitRepoConfData1 fixtures': () =>
+    selectGitCommit(stateFactory(syncGitRepoConfData1)),
+  'should return gitUrl from syncGitRepoConfData1 fixtures': () =>
+    selectGitUrl(stateFactory(syncGitRepoConfData1)),
 };
 
 describe('SyncGitRepoSelectors', () =>
diff --git a/webpack/components/SyncGitRepo/__tests__/__snapshots__/SyncGitRepo.test.js.snap b/webpack/components/SyncGitRepo/__tests__/__snapshots__/SyncGitRepo.test.js.snap
index cc999d3b..5f955c3f 100644
--- a/webpack/components/SyncGitRepo/__tests__/__snapshots__/SyncGitRepo.test.js.snap
+++ b/webpack/components/SyncGitRepo/__tests__/__snapshots__/SyncGitRepo.test.js.snap
@@ -1,6 +1,196 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SyncGitRepo should render ansible playbook 1`] = `
+exports[`SyncGitRepo should render ansible playbook directory-form 1`] = `
+<span>
+  <div>
+    <ScmTypeSelector
+      editable={true}
+      hidden={false}
+      label="SCM Type *"
+      onChange={[Function]}
+      options={Object {}}
+      selectValue="directory"
+      viewText=""
+    />
+    <FormTextInput
+      editable={true}
+      hidden={false}
+      label="Directory Path *"
+      onChange={[Function]}
+      parameter="path"
+      viewText=""
+    />
+    <div />
+    <div
+      className="form-group"
+    >
+      <div
+        className="col-md-2"
+      />
+      <div
+        className="col-md-4"
+      >
+        <pre>
+          Directory path cannot be blank
+        </pre>
+      </div>
+    </div>
+  </div>
+</span>
+`;
+
+exports[`SyncGitRepo should render ansible playbook directory-form with server-data 1`] = `
+<span>
+  <div>
+    <ScmTypeSelector
+      editable={true}
+      hidden={false}
+      label="SCM Type *"
+      onChange={[Function]}
+      options={
+        Object {
+          "directory": "directory",
+          "git": "git",
+        }
+      }
+      selectValue="directory"
+      viewText="directory"
+    />
+    <FormTextInput
+      editable={true}
+      hidden={false}
+      label="Directory Path *"
+      onChange={[Function]}
+      parameter="path"
+      viewText="/ansible/play_hello.yaml"
+    />
+    <div />
+    <div />
+  </div>
+</span>
+`;
+
+exports[`SyncGitRepo should render ansible playbook git-form 1`] = `
+<span>
+  <div>
+    <ScmTypeSelector
+      editable={true}
+      hidden={false}
+      label="SCM Type *"
+      onChange={[Function]}
+      options={Object {}}
+      selectValue="git"
+      viewText=""
+    />
+    <FormTextInput
+      editable={true}
+      hidden={false}
+      label="Git Url *"
+      onChange={[Function]}
+      parameter="git_url"
+      viewText=""
+    />
+    <div />
+    <div
+      className="form-group"
+    >
+      <div
+        className="col-md-2"
+      />
+      <div
+        className="col-md-4"
+      >
+        <pre>
+          Git URL cannot be blank
+        </pre>
+      </div>
+    </div>
+    <FormTextInput
+      editable={true}
+      hidden={false}
+      label="Git Branch/Commit/Tag"
+      onChange={[Function]}
+      parameter="git_commit"
+      viewText=""
+    />
+    <CommonForm>
+      <span
+        className="help-block help-inline"
+      >
+        <Button
+          active={false}
+          block={false}
+          bsClass="btn"
+          bsStyle="default"
+          disabled={false}
+          onClick={[Function]}
+        >
+          Sync Repository
+           
+        </Button>
+      </span>
+    </CommonForm>
+  </div>
+</span>
+`;
+
+exports[`SyncGitRepo should render ansible playbook git-form with server-data 1`] = `
+<span>
+  <div>
+    <ScmTypeSelector
+      editable={true}
+      hidden={false}
+      label="SCM Type *"
+      onChange={[Function]}
+      options={
+        Object {
+          "directory": "directory",
+          "git": "git",
+        }
+      }
+      selectValue="git"
+      viewText="git"
+    />
+    <FormTextInput
+      editable={true}
+      hidden={false}
+      label="Git Url *"
+      onChange={[Function]}
+      parameter="git_url"
+      viewText="https://git.example.com/playbooks.git"
+    />
+    <div />
+    <div />
+    <FormTextInput
+      editable={true}
+      hidden={false}
+      label="Git Branch/Commit/Tag"
+      onChange={[Function]}
+      parameter="git_commit"
+      viewText="main"
+    />
+    <CommonForm>
+      <span
+        className="help-block help-inline"
+      >
+        <Button
+          active={false}
+          block={false}
+          bsClass="btn"
+          bsStyle="default"
+          disabled={false}
+          onClick={[Function]}
+        >
+          Sync Repository
+           
+        </Button>
+      </span>
+    </CommonForm>
+  </div>
+</span>
+`;
+
+exports[`SyncGitRepo should render empty ansible playbook 1`] = `
 <span>
   <div>
     <ScmTypeSelector
@@ -10,6 +200,7 @@ exports[`SyncGitRepo should render ansible playbook 1`] = `
       onChange={[Function]}
       options={Object {}}
       selectValue=""
+      viewText=""
     />
     <div />
     <div
diff --git a/webpack/components/SyncGitRepo/__tests__/__snapshots__/SyncGitRepoSelectors.test.js.snap b/webpack/components/SyncGitRepo/__tests__/__snapshots__/SyncGitRepoSelectors.test.js.snap
index 8d404abb..56cd9789 100644
--- a/webpack/components/SyncGitRepo/__tests__/__snapshots__/SyncGitRepoSelectors.test.js.snap
+++ b/webpack/components/SyncGitRepo/__tests__/__snapshots__/SyncGitRepoSelectors.test.js.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SyncGitRepoSelectors should return gitCommit from syncGitRepoConfData_1 fixtures 1`] = `"master"`;
+exports[`SyncGitRepoSelectors should return gitCommit from syncGitRepoConfData1 fixtures 1`] = `"master"`;
 
-exports[`SyncGitRepoSelectors should return gitUrl from syncGitRepoConfData_1 fixtures 1`] = `"https://github.com/alpha.git"`;
+exports[`SyncGitRepoSelectors should return gitUrl from syncGitRepoConfData1 fixtures 1`] = `"https://github.com/alpha.git"`;
 
-exports[`SyncGitRepoSelectors should return path from syncGitRepoConfData_1 fixtures 1`] = `"https://example.com"`;
+exports[`SyncGitRepoSelectors should return path from syncGitRepoConfData1 fixtures 1`] = `"https://example.com"`;
 
-exports[`SyncGitRepoSelectors should return scmType from syncGitRepoConfData_1 fixtures 1`] = `
+exports[`SyncGitRepoSelectors should return scmType from syncGitRepoConfData1 fixtures 1`] = `
 Object {
   "git": "git",
 }
diff --git a/webpack/components/SyncGitRepo/components/FormTextInput.js b/webpack/components/SyncGitRepo/components/FormTextInput.js
index cee869f4..299ef710 100644
--- a/webpack/components/SyncGitRepo/components/FormTextInput.js
+++ b/webpack/components/SyncGitRepo/components/FormTextInput.js
@@ -1,42 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExtTextInput from '../../common/ExtTextInput';
-import RailsData from '../../common/RailsData'
+import RailsData from '../../common/RailsData';
 
-const FormTextInput= ({
+const FormTextInput = ({
   label,
   hidden,
   editable,
   viewText,
   onChange,
   parameter,
-}) =>{
-  return (
-    <div >
-      <div  >
-        <ExtTextInput
-          label={label}
-          editable={editable}
-          viewText={viewText}
-          onChange={onChange}
-        />
-        <RailsData
-          key='ansible_playbook_form_data'
-          view='ansible_playbook'
-          parameter={parameter}
-          value={viewText}
-        />
-      </div>
+}) => (
+  <div>
+    <div>
+      <ExtTextInput
+        hidden={false}
+        label={label}
+        editable={editable}
+        viewText={viewText}
+        onChange={onChange}
+      />
+      <RailsData
+        key="ansible_playbook_form_data"
+        view="ansible_playbook"
+        parameter={parameter}
+        value={viewText}
+      />
     </div>
-  );
-};
+  </div>
+);
 
 FormTextInput.propTypes = {
   label: PropTypes.string.isRequired,
+  hidden: PropTypes.bool,
   editable: PropTypes.bool.isRequired,
   viewText: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   parameter: PropTypes.string,
 };
+FormTextInput.defaultProps = {
+  hidden: false,
+  viewText: '',
+  parameter: '',
+};
 
 export default FormTextInput;
diff --git a/webpack/components/SyncGitRepo/components/ScmTypeSelector.js b/webpack/components/SyncGitRepo/components/ScmTypeSelector.js
index 2f987bfc..07d26dd2 100644
--- a/webpack/components/SyncGitRepo/components/ScmTypeSelector.js
+++ b/webpack/components/SyncGitRepo/components/ScmTypeSelector.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExtSelect from '../../common/ExtSelect';
-import RailsData from '../../common/RailsData'
+import RailsData from '../../common/RailsData';
 
-const ScmTypeSelector= ({
+const ScmTypeSelector = ({
   label,
   hidden,
   editable,
@@ -11,37 +11,42 @@ const ScmTypeSelector= ({
   selectValue,
   onChange,
   options,
-}) =>{
-  return (
-    <div className="form-group">
-      <label className="col-md-2 control-label">{label}</label>
-      <div className="col-md-4">
-        <ExtSelect
-          hidden={hidden}
-          editable={editable}
-          viewText={viewText}
-          selectValue={selectValue}
-          onChange={onChange}
-          options={options}
-        />
-        <RailsData
-          key='ansible_playbook_scm_data'
-          view='ansible_playbook'
-          parameter='scm_type'
-          value={selectValue}
-        />
-      </div>
+}) => (
+  <div className="form-group">
+    <label className="col-md-2 control-label">{label}</label>
+    <div className="col-md-4">
+      <ExtSelect
+        hidden={hidden}
+        editable={editable}
+        viewText={viewText}
+        selectValue={selectValue}
+        onChange={onChange}
+        options={options}
+      />
+      <RailsData
+        key="ansible_playbook_scm_data"
+        view="ansible_playbook"
+        parameter="scm_type"
+        value={selectValue}
+      />
     </div>
-  );
-};
+  </div>
+);
 
 ScmTypeSelector.propTypes = {
   label: PropTypes.string.isRequired,
+  hidden: PropTypes.bool,
   editable: PropTypes.bool.isRequired,
   viewText: PropTypes.string,
   selectValue: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   options: PropTypes.object,
 };
+ScmTypeSelector.defaultProps = {
+  hidden: false,
+  viewText: '',
+  selectValue: '',
+  options: {},
+};
 
 export default ScmTypeSelector;
diff --git a/webpack/components/SyncGitRepo/index.js b/webpack/components/SyncGitRepo/index.js
index b8362ead..7d9c7075 100644
--- a/webpack/components/SyncGitRepo/index.js
+++ b/webpack/components/SyncGitRepo/index.js
@@ -16,13 +16,10 @@ const mapStateToProps = state => ({
   scmType: selectScmType(state),
   gitCommit: selectGitCommit(state),
   path: selectPath(state),
-  gitUrl: selectGitUrl(state)
+  gitUrl: selectGitUrl(state),
 });
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(SyncGitRepoActions, dispatch);
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SyncGitRepo);
+export default connect(mapStateToProps, mapDispatchToProps)(SyncGitRepo);
diff --git a/webpack/components/common/AddTableEntry.js b/webpack/components/common/AddTableEntry.js
index dda6a5ba..bc57eadb 100644
--- a/webpack/components/common/AddTableEntry.js
+++ b/webpack/components/common/AddTableEntry.js
@@ -1,15 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Icon,
-  Button,
-} from 'patternfly-react';
+import { Icon, Button } from 'patternfly-react';
 
-const AddTableEntry = ({
-  hidden,
-  disabled,
-  onAddTableEntry,
-}) =>{
+const AddTableEntry = ({ hidden, disabled, onAddTableEntry }) => {
   if (hidden) {
     return null;
   }
@@ -24,7 +17,7 @@ const AddTableEntry = ({
 AddTableEntry.propTypes = {
   hidden: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
-  onAddTableEntry: PropTypes.func.isRequired
+  onAddTableEntry: PropTypes.func.isRequired,
 };
 
 export default AddTableEntry;
diff --git a/webpack/components/common/DeleteTableEntry.js b/webpack/components/common/DeleteTableEntry.js
index da1c10d3..cd55eabe 100644
--- a/webpack/components/common/DeleteTableEntry.js
+++ b/webpack/components/common/DeleteTableEntry.js
@@ -1,10 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import {
-  Icon,
-  Button,
-  MessageDialog,
-} from 'patternfly-react';
+import { Icon, Button, MessageDialog } from 'patternfly-react';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 const DeleteTableEntry = ({
@@ -12,14 +8,14 @@ const DeleteTableEntry = ({
   disabled,
   onDeleteTableEntry,
   additionalData,
-}) =>{
+}) => {
+  const [showModal, setShowModal] = useState(false);
+  const toggleModal = () => setShowModal(!showModal);
+
   if (hidden) {
     return null;
   }
 
-  const [showModal, setShowModal] = useState(false);
-  const toggleModal = () => setShowModal(!showModal);
-
   return (
     <span>
       <MessageDialog
@@ -32,12 +28,8 @@ const DeleteTableEntry = ({
         title={__('Confirm action')}
         primaryContent={__('Are you sure you wish to delete this item?')}
       />
-      <Button
-        bsStyle="default"
-        disabled={disabled}
-        onClick={toggleModal}
-      >
-        <Icon type="pf" name="delete" title={__("Delete entry")} />
+      <Button bsStyle="default" disabled={disabled} onClick={toggleModal}>
+        <Icon type="pf" name="delete" title={__('Delete entry')} />
       </Button>
     </span>
   );
diff --git a/webpack/components/common/EditTableEntry.js b/webpack/components/common/EditTableEntry.js
index ab08924d..5d79096c 100644
--- a/webpack/components/common/EditTableEntry.js
+++ b/webpack/components/common/EditTableEntry.js
@@ -1,9 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Icon,
-  Button,
-} from 'patternfly-react';
+import { Icon, Button } from 'patternfly-react';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 const EditTableEntry = ({
@@ -12,12 +9,12 @@ const EditTableEntry = ({
   handleLocking,
   onEditTableEntry,
   additionalData,
-}) =>{
+}) => {
   if (hidden) {
     return null;
   }
 
-  let title = 'edit this entry'
+  let title = 'edit this entry';
 
   if (handleLocking === true) {
     if (additionalData.rowData.locked === true) {
@@ -31,7 +28,7 @@ const EditTableEntry = ({
       <Button
         bsStyle="default"
         disabled={disabled}
-        onClick={() => onEditTableEntry(additionalData) }
+        onClick={() => onEditTableEntry(additionalData)}
       >
         <Icon type="pf" name="edit" title={__(title)} />
       </Button>
@@ -46,5 +43,8 @@ EditTableEntry.propTypes = {
   onEditTableEntry: PropTypes.func.isRequired,
   additionalData: PropTypes.object.isRequired,
 };
+EditTableEntry.defaultProps = {
+  hidden: false,
+};
 
 export default EditTableEntry;
diff --git a/webpack/components/common/ExtSelect.js b/webpack/components/common/ExtSelect.js
index a47cc6da..03e6c6bf 100644
--- a/webpack/components/common/ExtSelect.js
+++ b/webpack/components/common/ExtSelect.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'foremanReact/components/common/forms/Select';
 
-const ExtSelect= ({
+const ExtSelect = ({
   hidden,
   editable,
   viewText,
@@ -10,22 +10,20 @@ const ExtSelect= ({
   onChange,
   options,
   additionalData,
-}) =>{
+}) => {
   if (hidden) {
     return null;
   }
 
   if (!editable) {
-    return (
-     <div>{viewText}</div>
-    );
+    return <div>{viewText}</div>;
   }
 
   return (
     <Select
-       value={selectValue}
-       onChange={e => onChange(e.target.value, additionalData) }
-       options={options}
+      value={selectValue}
+      onChange={e => onChange(e.target.value, additionalData)}
+      options={options}
     />
   );
 };
@@ -39,5 +37,11 @@ ExtSelect.propTypes = {
   options: PropTypes.object,
   additionalData: PropTypes.object,
 };
+ExtSelect.defaultProps = {
+  viewText: '',
+  selectValue: '',
+  options: {},
+  additionalData: {},
+};
 
 export default ExtSelect;
diff --git a/webpack/components/common/ExtTextInput.js b/webpack/components/common/ExtTextInput.js
index dd9b7c28..10dda7b9 100644
--- a/webpack/components/common/ExtTextInput.js
+++ b/webpack/components/common/ExtTextInput.js
@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TextInput from 'foremanReact/components/common/forms/TextInput';
 
-const ExtTextInput= ({
+const ExtTextInput = ({
   hidden,
   editable,
   viewText,
   label,
   onChange,
   additionalData,
-}) =>{
+}) => {
   if (hidden) {
     return null;
   }
@@ -17,17 +17,17 @@ const ExtTextInput= ({
   if (!editable) {
     return (
       <div className="form-group">
-       <label className="col-md-2 control-label">{label}</label>
-       <div className="col-md-4">{viewText}</div>
+        <label className="col-md-2 control-label">{label}</label>
+        <div className="col-md-4">{viewText}</div>
       </div>
     );
   }
 
   return (
     <TextInput
-       label={label}
-       value={viewText}
-       onChange={e => onChange(e.target.value, additionalData) }
+      label={label}
+      value={viewText}
+      onChange={e => onChange(e.target.value, additionalData)}
     />
   );
 };
@@ -36,8 +36,13 @@ ExtTextInput.propTypes = {
   hidden: PropTypes.bool.isRequired,
   editable: PropTypes.bool.isRequired,
   viewText: PropTypes.string,
+  label: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   additionalData: PropTypes.object,
 };
+ExtTextInput.defaultProps = {
+  viewText: '',
+  additionalData: {},
+};
 
 export default ExtTextInput;
diff --git a/webpack/components/common/LockTableEntry.js b/webpack/components/common/LockTableEntry.js
index f2e5f668..e6fc2ecf 100644
--- a/webpack/components/common/LockTableEntry.js
+++ b/webpack/components/common/LockTableEntry.js
@@ -1,9 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Icon,
-  Button,
-} from 'patternfly-react';
+import { Icon, Button } from 'patternfly-react';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 const LockTableEntry = ({
@@ -11,7 +8,7 @@ const LockTableEntry = ({
   disabled,
   onLockTableEntry,
   additionalData,
-}) =>{
+}) => {
   if (hidden) {
     return null;
   }
@@ -42,7 +39,7 @@ const LockTableEntry = ({
       <Button
         bsStyle="default"
         disabled={disabled}
-        onClick={() => onLockTableEntry(additionalData) }
+        onClick={() => onLockTableEntry(additionalData)}
       >
         <Icon type="pf" name={lockButton} title={__(lockButtonTitle)} />
       </Button>
@@ -56,5 +53,8 @@ LockTableEntry.propTypes = {
   onLockTableEntry: PropTypes.func.isRequired,
   additionalData: PropTypes.object.isRequired,
 };
+LockTableEntry.defaultProps = {
+  hidden: false,
+};
 
 export default LockTableEntry;
diff --git a/webpack/components/common/RailsData.js b/webpack/components/common/RailsData.js
index 2b76fb70..05b5a7f2 100644
--- a/webpack/components/common/RailsData.js
+++ b/webpack/components/common/RailsData.js
@@ -1,27 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const RailsData = ({
-  view,
-  parameter,
-  value,
-}) => {
-  const id = "foreman_acd_"+ view +"_"+ parameter;
-  const name = "foreman_acd_"+ view +"["+ parameter +"]";
+const RailsData = ({ view, parameter, value }) => {
+  const id = `foreman_acd_${view}_${parameter}`;
+  const name = `foreman_acd_${view}[${parameter}]`;
 
-  return (
-    <input
-      id={id}
-      name={name}
-      value={value}
-      type="hidden"
-    />
-  );
-}
+  return <input id={id} name={name} value={value} type="hidden" />;
+};
 
 RailsData.propTypes = {
   view: PropTypes.string.isRequired,
   parameter: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
 };
 
 export default RailsData;
diff --git a/webpack/components/common/__tests__/ExtSelect.test.js b/webpack/components/common/__tests__/ExtSelect.test.js
index bc3997a1..7cfad39f 100644
--- a/webpack/components/common/__tests__/ExtSelect.test.js
+++ b/webpack/components/common/__tests__/ExtSelect.test.js
@@ -11,7 +11,7 @@ const fixtures = {
     viewText: '',
     selectValue: '1',
     onChange: noop,
-    options: { first: 'first', second: 'second'},
+    options: { first: 'first', second: 'second' },
     additionalData: { moreData: 'moooore' },
   },
   'should render hidden selection field': {
@@ -29,7 +29,7 @@ const fixtures = {
     viewText: 'Awesome Text',
     selectValue: '0',
     onChange: noop,
-    options: { first: 'first', second: 'second'},
+    options: { first: 'first', second: 'second' },
     additionalData: {},
   },
 };
diff --git a/webpack/components/common/__tests__/RailsData.test.js b/webpack/components/common/__tests__/RailsData.test.js
index a254cbe6..ebad2e80 100644
--- a/webpack/components/common/__tests__/RailsData.test.js
+++ b/webpack/components/common/__tests__/RailsData.test.js
@@ -2,8 +2,6 @@ import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 
 import RailsData from '../RailsData';
 
-const noop = () => {};
-
 const fixtures = {
   'should render rails data input field': {
     view: 'nice_view',
diff --git a/webpack/helper.js b/webpack/helper.js
index 9f1a7237..a801bca6 100644
--- a/webpack/helper.js
+++ b/webpack/helper.js
@@ -1,21 +1,11 @@
 import React from 'react';
-import {
-  Table,
-} from 'patternfly-react';
+import { Table } from 'patternfly-react';
 
 // Some small helper methods
 
 function arrayToObject(arr, id, value) {
-  var rv = {};
-  for (var i = 0; i < arr.length; ++i)
-    rv[arr[i][id]] = arr[i][value];
-  return rv;
-}
-
-function arrayToObjectObj(arr, id) {
-  var rv = {};
-  for (var i = 0; i < arr.length; ++i)
-    rv[arr[i][id]] = arr[i];
+  const rv = {};
+  for (let i = 0; i < arr.length; ++i) rv[arr[i][id]] = arr[i][value];
   return rv;
 }
 
@@ -26,20 +16,20 @@ function shortHostname(fqdn) {
 function EasyHeaderFormatter(value, { column }) {
   return (
     <Table.Heading aria-label={column.header.label} {...column.header.props}>
-    {value}
+      {value}
     </Table.Heading>
   );
 }
 
 function supportedPluginsToHiddenParameterTypes(supportedPlugins) {
-  let hiddenParameterTypes = [];
+  const hiddenParameterTypes = [];
 
-  if (supportedPlugins['puppet'] == false) {
-    hiddenParameterTypes.push("puppetenv");
+  if (supportedPlugins.puppet === false) {
+    hiddenParameterTypes.push('puppetenv');
   }
 
-  if (supportedPlugins['katello'] == false) {
-    hiddenParameterTypes.push("lifecycleenv");
+  if (supportedPlugins.katello === false) {
+    hiddenParameterTypes.push('lifecycleenv');
   }
 
   return hiddenParameterTypes;
@@ -47,8 +37,7 @@ function supportedPluginsToHiddenParameterTypes(supportedPlugins) {
 
 export {
   arrayToObject,
-  arrayToObjectObj,
   shortHostname,
   EasyHeaderFormatter,
-  supportedPluginsToHiddenParameterTypes
+  supportedPluginsToHiddenParameterTypes,
 };
diff --git a/webpack/helper.test.js b/webpack/helper.test.js
index 270958df..fc81ff7a 100644
--- a/webpack/helper.test.js
+++ b/webpack/helper.test.js
@@ -1,56 +1,44 @@
 import {
   arrayToObject,
-  arrayToObjectObj,
   EasyHeaderFormatter,
   supportedPluginsToHiddenParameterTypes,
 } from './helper';
 
 describe('helper', () => {
-  const testArray = []
+  const testArray = [];
   testArray[0] = { id: 'i1', value: 'v1' };
   testArray[1] = { id: 'i2', value: 'v2' };
   testArray[2] = { id: 'i3', value: 'v3' };
 
-  it('creates a object from an array', () => {
-    expect(arrayToObject(testArray, 'id', 'value')).toEqual(
-      {
-        i1: 'v1',
-        i2: 'v2',
-        i3: 'v3'
-      }
-    );
-  });
-
-  it('creates a object from an array', () => {
-    expect(arrayToObjectObj(testArray, 'id')).toEqual(
-      {
-        i1: { id: 'i1', value: 'v1' },
-        i2: { id: 'i2', value: 'v2' },
-        i3: { id: 'i3', value: 'v3' },
-      }
-    );
+  it('creates an object from an array and select value', () => {
+    expect(arrayToObject(testArray, 'id', 'value')).toEqual({
+      i1: 'v1',
+      i2: 'v2',
+      i3: 'v3',
+    });
   });
 
   it('formats a nice, easy header', () => {
-    expect(EasyHeaderFormatter('MyValue', { column: { header: { label: 'TheLabel', props: { p1: '1' } } } })).toMatchSnapshot();
+    expect(
+      EasyHeaderFormatter('MyValue', {
+        column: { header: { label: 'TheLabel', props: { p1: '1' } } },
+      })
+    ).toMatchSnapshot();
   });
 
   it('creates hidden parameter definition by supported plugins 1', () => {
-    expect(supportedPluginsToHiddenParameterTypes({ puppet: false})).toEqual(
-      ['puppetenv']
-    );
+    expect(supportedPluginsToHiddenParameterTypes({ puppet: false })).toEqual([
+      'puppetenv',
+    ]);
   });
 
   it('creates hidden parameter definition by supported plugins 2', () => {
-    expect(supportedPluginsToHiddenParameterTypes({ puppet: true})).toEqual(
+    expect(supportedPluginsToHiddenParameterTypes({ puppet: true })).toEqual(
       []
     );
   });
 
   it('creates hidden parameter definition by supported plugins 3', () => {
-    expect(supportedPluginsToHiddenParameterTypes({})).toEqual(
-      []
-    );
+    expect(supportedPluginsToHiddenParameterTypes({})).toEqual([]);
   });
 });
-
diff --git a/webpack/index.js b/webpack/index.js
index 755b735d..0011d399 100644
--- a/webpack/index.js
+++ b/webpack/index.js
@@ -12,10 +12,28 @@ import reducer from './reducer';
 
 injectReducer('foremanAcd', reducer);
 
-componentRegistry.register({ name: 'ParameterSelection', type: ParameterSelection, });
-componentRegistry.register({ name: 'SyncGitRepo', type: SyncGitRepo, });
-componentRegistry.register({ name: 'ApplicationDefinition', type: ApplicationDefinition, });
-componentRegistry.register({ name: 'ApplicationDefinitionImport', type: ApplicationDefinitionImport, });
-componentRegistry.register({ name: 'ApplicationInstance', type: ApplicationInstance, });
-componentRegistry.register({ name: 'ApplicationInstanceReport', type: ApplicationInstanceReport, });
-componentRegistry.register({ name: 'ExistingHostSelection', type: ExistingHostSelection, });
+componentRegistry.register({
+  name: 'ParameterSelection',
+  type: ParameterSelection,
+});
+componentRegistry.register({ name: 'SyncGitRepo', type: SyncGitRepo });
+componentRegistry.register({
+  name: 'ApplicationDefinition',
+  type: ApplicationDefinition,
+});
+componentRegistry.register({
+  name: 'ApplicationDefinitionImport',
+  type: ApplicationDefinitionImport,
+});
+componentRegistry.register({
+  name: 'ApplicationInstance',
+  type: ApplicationInstance,
+});
+componentRegistry.register({
+  name: 'ApplicationInstanceReport',
+  type: ApplicationInstanceReport,
+});
+componentRegistry.register({
+  name: 'ExistingHostSelection',
+  type: ExistingHostSelection,
+});
diff --git a/webpack/js-yaml.js b/webpack/js-yaml.js
index 4cc0ddf6..055233cb 100644
--- a/webpack/js-yaml.js
+++ b/webpack/js-yaml.js
@@ -1,31 +1,33 @@
-
 /*! js-yaml 4.1.0 https://github.com/nodeca/js-yaml @license MIT */
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.jsyaml = {}));
-}(this, (function (exports) { 'use strict';
-
+(function(global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined'
+    ? factory(exports)
+    : typeof define === 'function' && define.amd
+    ? define(['exports'], factory)
+    : ((global =
+        typeof globalThis !== 'undefined' ? globalThis : global || self),
+      factory((global.jsyaml = {})));
+})(this, exports => {
   function isNothing(subject) {
-    return (typeof subject === 'undefined') || (subject === null);
+    return typeof subject === 'undefined' || subject === null;
   }
 
-
   function isObject(subject) {
-    return (typeof subject === 'object') && (subject !== null);
+    return typeof subject === 'object' && subject !== null;
   }
 
-
   function toArray(sequence) {
     if (Array.isArray(sequence)) return sequence;
     else if (isNothing(sequence)) return [];
 
-    return [ sequence ];
+    return [sequence];
   }
 
-
   function extend(target, source) {
-    var index, length, key, sourceKeys;
+    let index;
+    let length;
+    let key;
+    let sourceKeys;
 
     if (source) {
       sourceKeys = Object.keys(source);
@@ -39,9 +41,9 @@
     return target;
   }
 
-
   function repeat(string, count) {
-    var result = '', cycle;
+    let result = '';
+    let cycle;
 
     for (cycle = 0; cycle < count; cycle += 1) {
       result += string;
@@ -50,50 +52,47 @@
     return result;
   }
 
-
   function isNegativeZero(number) {
-    return (number === 0) && (Number.NEGATIVE_INFINITY === 1 / number);
+    return number === 0 && Number.NEGATIVE_INFINITY === 1 / number;
   }
 
-
-  var isNothing_1      = isNothing;
-  var isObject_1       = isObject;
-  var toArray_1        = toArray;
-  var repeat_1         = repeat;
-  var isNegativeZero_1 = isNegativeZero;
-  var extend_1         = extend;
-
-  var common = {
-  	isNothing: isNothing_1,
-  	isObject: isObject_1,
-  	toArray: toArray_1,
-  	repeat: repeat_1,
-  	isNegativeZero: isNegativeZero_1,
-  	extend: extend_1
+  const isNothing_1 = isNothing;
+  const isObject_1 = isObject;
+  const toArray_1 = toArray;
+  const repeat_1 = repeat;
+  const isNegativeZero_1 = isNegativeZero;
+  const extend_1 = extend;
+
+  const common = {
+    isNothing: isNothing_1,
+    isObject: isObject_1,
+    toArray: toArray_1,
+    repeat: repeat_1,
+    isNegativeZero: isNegativeZero_1,
+    extend: extend_1,
   };
 
   // YAML error class. http://stackoverflow.com/questions/8458984
 
-
   function formatError(exception, compact) {
-    var where = '', message = exception.reason || '(unknown reason)';
+    let where = '';
+    const message = exception.reason || '(unknown reason)';
 
     if (!exception.mark) return message;
 
     if (exception.mark.name) {
-      where += 'in "' + exception.mark.name + '" ';
+      where += `in "${exception.mark.name}" `;
     }
 
-    where += '(' + (exception.mark.line + 1) + ':' + (exception.mark.column + 1) + ')';
+    where += `(${exception.mark.line + 1}:${exception.mark.column + 1})`;
 
     if (!compact && exception.mark.snippet) {
-      where += '\n\n' + exception.mark.snippet;
+      where += `\n\n${exception.mark.snippet}`;
     }
 
-    return message + ' ' + where;
+    return `${message} ${where}`;
   }
 
-
   function YAMLException$1(reason, mark) {
     // Super constructor
     Error.call(this);
@@ -109,28 +108,25 @@
       Error.captureStackTrace(this, this.constructor);
     } else {
       // FF, IE 10+ and Safari 6+. Fallback for others
-      this.stack = (new Error()).stack || '';
+      this.stack = new Error().stack || '';
     }
   }
 
-
   // Inherit from Error
   YAMLException$1.prototype = Object.create(Error.prototype);
   YAMLException$1.prototype.constructor = YAMLException$1;
 
-
   YAMLException$1.prototype.toString = function toString(compact) {
-    return this.name + ': ' + formatError(this, compact);
+    return `${this.name}: ${formatError(this, compact)}`;
   };
 
-
-  var exception = YAMLException$1;
+  const exception = YAMLException$1;
 
   // get snippet for a single line, respecting maxLength
   function getLine(buffer, lineStart, lineEnd, position, maxLineLength) {
-    var head = '';
-    var tail = '';
-    var maxHalfLength = Math.floor(maxLineLength / 2) - 1;
+    let head = '';
+    let tail = '';
+    const maxHalfLength = Math.floor(maxLineLength / 2) - 1;
 
     if (position - lineStart > maxHalfLength) {
       head = ' ... ';
@@ -144,31 +140,29 @@
 
     return {
       str: head + buffer.slice(lineStart, lineEnd).replace(/\t/g, '→') + tail,
-      pos: position - lineStart + head.length // relative position
+      pos: position - lineStart + head.length, // relative position
     };
   }
 
-
   function padStart(string, max) {
     return common.repeat(' ', max - string.length) + string;
   }
 
-
   function makeSnippet(mark, options) {
     options = Object.create(options || null);
 
     if (!mark.buffer) return null;
 
     if (!options.maxLength) options.maxLength = 79;
-    if (typeof options.indent      !== 'number') options.indent      = 1;
+    if (typeof options.indent !== 'number') options.indent = 1;
     if (typeof options.linesBefore !== 'number') options.linesBefore = 3;
-    if (typeof options.linesAfter  !== 'number') options.linesAfter  = 2;
+    if (typeof options.linesAfter !== 'number') options.linesAfter = 2;
 
-    var re = /\r?\n|\r|\0/g;
-    var lineStarts = [ 0 ];
-    var lineEnds = [];
-    var match;
-    var foundLineNo = -1;
+    const re = /\r?\n|\r|\0/g;
+    const lineStarts = [0];
+    const lineEnds = [];
+    let match;
+    let foundLineNo = -1;
 
     while ((match = re.exec(mark.buffer))) {
       lineEnds.push(match.index);
@@ -181,9 +175,15 @@
 
     if (foundLineNo < 0) foundLineNo = lineStarts.length - 1;
 
-    var result = '', i, line;
-    var lineNoLength = Math.min(mark.line + options.linesAfter, lineEnds.length).toString().length;
-    var maxLineLength = options.maxLength - (options.indent + lineNoLength + 3);
+    let result = '';
+    let i;
+    let line;
+    const lineNoLength = Math.min(
+      mark.line + options.linesAfter,
+      lineEnds.length
+    ).toString().length;
+    const maxLineLength =
+      options.maxLength - (options.indent + lineNoLength + 3);
 
     for (i = 1; i <= options.linesBefore; i++) {
       if (foundLineNo - i < 0) break;
@@ -194,14 +194,24 @@
         mark.position - (lineStarts[foundLineNo] - lineStarts[foundLineNo - i]),
         maxLineLength
       );
-      result = common.repeat(' ', options.indent) + padStart((mark.line - i + 1).toString(), lineNoLength) +
-        ' | ' + line.str + '\n' + result;
-    }
-
-    line = getLine(mark.buffer, lineStarts[foundLineNo], lineEnds[foundLineNo], mark.position, maxLineLength);
-    result += common.repeat(' ', options.indent) + padStart((mark.line + 1).toString(), lineNoLength) +
-      ' | ' + line.str + '\n';
-    result += common.repeat('-', options.indent + lineNoLength + 3 + line.pos) + '^' + '\n';
+      result = `${common.repeat(' ', options.indent) +
+        padStart((mark.line - i + 1).toString(), lineNoLength)} | ${
+        line.str
+      }\n${result}`;
+    }
+
+    line = getLine(
+      mark.buffer,
+      lineStarts[foundLineNo],
+      lineEnds[foundLineNo],
+      mark.position,
+      maxLineLength
+    );
+    result += `${common.repeat(' ', options.indent) +
+      padStart((mark.line + 1).toString(), lineNoLength)} | ${line.str}\n`;
+    result +=
+      `${common.repeat('-', options.indent + lineNoLength + 3 + line.pos)}^` +
+      `\n`;
 
     for (i = 1; i <= options.linesAfter; i++) {
       if (foundLineNo + i >= lineEnds.length) break;
@@ -212,17 +222,18 @@
         mark.position - (lineStarts[foundLineNo] - lineStarts[foundLineNo + i]),
         maxLineLength
       );
-      result += common.repeat(' ', options.indent) + padStart((mark.line + i + 1).toString(), lineNoLength) +
-        ' | ' + line.str + '\n';
+      result += `${common.repeat(' ', options.indent) +
+        padStart((mark.line + i + 1).toString(), lineNoLength)} | ${
+        line.str
+      }\n`;
     }
 
     return result.replace(/\n$/, '');
   }
 
+  const snippet = makeSnippet;
 
-  var snippet = makeSnippet;
-
-  var TYPE_CONSTRUCTOR_OPTIONS = [
+  const TYPE_CONSTRUCTOR_OPTIONS = [
     'kind',
     'multi',
     'resolve',
@@ -232,21 +243,17 @@
     'represent',
     'representName',
     'defaultStyle',
-    'styleAliases'
+    'styleAliases',
   ];
 
-  var YAML_NODE_KINDS = [
-    'scalar',
-    'sequence',
-    'mapping'
-  ];
+  const YAML_NODE_KINDS = ['scalar', 'sequence', 'mapping'];
 
   function compileStyleAliases(map) {
-    var result = {};
+    const result = {};
 
     if (map !== null) {
-      Object.keys(map).forEach(function (style) {
-        map[style].forEach(function (alias) {
+      Object.keys(map).forEach(style => {
+        map[style].forEach(alias => {
           result[String(alias)] = style;
         });
       });
@@ -258,50 +265,59 @@
   function Type$1(tag, options) {
     options = options || {};
 
-    Object.keys(options).forEach(function (name) {
+    Object.keys(options).forEach(name => {
       if (TYPE_CONSTRUCTOR_OPTIONS.indexOf(name) === -1) {
-        throw new exception('Unknown option "' + name + '" is met in definition of "' + tag + '" YAML type.');
+        throw new exception(
+          `Unknown option "${name}" is met in definition of "${tag}" YAML type.`
+        );
       }
     });
 
     // TODO: Add tag format check.
-    this.options       = options; // keep original options in case user wants to extend this type later
-    this.tag           = tag;
-    this.kind          = options['kind']          || null;
-    this.resolve       = options['resolve']       || function () { return true; };
-    this.construct     = options['construct']     || function (data) { return data; };
-    this.instanceOf    = options['instanceOf']    || null;
-    this.predicate     = options['predicate']     || null;
-    this.represent     = options['represent']     || null;
-    this.representName = options['representName'] || null;
-    this.defaultStyle  = options['defaultStyle']  || null;
-    this.multi         = options['multi']         || false;
-    this.styleAliases  = compileStyleAliases(options['styleAliases'] || null);
+    this.options = options; // keep original options in case user wants to extend this type later
+    this.tag = tag;
+    this.kind = options.kind || null;
+    this.resolve =
+      options.resolve ||
+      function() {
+        return true;
+      };
+    this.construct =
+      options.construct ||
+      function(data) {
+        return data;
+      };
+    this.instanceOf = options.instanceOf || null;
+    this.predicate = options.predicate || null;
+    this.represent = options.represent || null;
+    this.representName = options.representName || null;
+    this.defaultStyle = options.defaultStyle || null;
+    this.multi = options.multi || false;
+    this.styleAliases = compileStyleAliases(options.styleAliases || null);
 
     if (YAML_NODE_KINDS.indexOf(this.kind) === -1) {
-      throw new exception('Unknown kind "' + this.kind + '" is specified for "' + tag + '" YAML type.');
+      throw new exception(
+        `Unknown kind "${this.kind}" is specified for "${tag}" YAML type.`
+      );
     }
   }
 
-  var type = Type$1;
-
-  /*eslint-disable max-len*/
-
-
-
+  const type = Type$1;
 
+  /* eslint-disable max-len */
 
   function compileList(schema, name) {
-    var result = [];
-
-    schema[name].forEach(function (currentType) {
-      var newIndex = result.length;
+    const result = [];
 
-      result.forEach(function (previousType, previousIndex) {
-        if (previousType.tag === currentType.tag &&
-            previousType.kind === currentType.kind &&
-            previousType.multi === currentType.multi) {
+    schema[name].forEach(currentType => {
+      let newIndex = result.length;
 
+      result.forEach((previousType, previousIndex) => {
+        if (
+          previousType.tag === currentType.tag &&
+          previousType.kind === currentType.kind &&
+          previousType.multi === currentType.multi
+        ) {
           newIndex = previousIndex;
         }
       });
@@ -312,27 +328,28 @@
     return result;
   }
 
-
   function compileMap(/* lists... */) {
-    var result = {
-          scalar: {},
-          sequence: {},
-          mapping: {},
-          fallback: {},
-          multi: {
-            scalar: [],
-            sequence: [],
-            mapping: [],
-            fallback: []
-          }
-        }, index, length;
+    const result = {
+      scalar: {},
+      sequence: {},
+      mapping: {},
+      fallback: {},
+      multi: {
+        scalar: [],
+        sequence: [],
+        mapping: [],
+        fallback: [],
+      },
+    };
+    let index;
+    let length;
 
     function collectType(type) {
       if (type.multi) {
         result.multi[type.kind].push(type);
-        result.multi['fallback'].push(type);
+        result.multi.fallback.push(type);
       } else {
-        result[type.kind][type.tag] = result['fallback'][type.tag] = type;
+        result[type.kind][type.tag] = result.fallback[type.tag] = type;
       }
     }
 
@@ -342,99 +359,113 @@
     return result;
   }
 
-
   function Schema$1(definition) {
     return this.extend(definition);
   }
 
-
   Schema$1.prototype.extend = function extend(definition) {
-    var implicit = [];
-    var explicit = [];
+    let implicit = [];
+    let explicit = [];
 
     if (definition instanceof type) {
       // Schema.extend(type)
       explicit.push(definition);
-
     } else if (Array.isArray(definition)) {
       // Schema.extend([ type1, type2, ... ])
       explicit = explicit.concat(definition);
-
-    } else if (definition && (Array.isArray(definition.implicit) || Array.isArray(definition.explicit))) {
+    } else if (
+      definition &&
+      (Array.isArray(definition.implicit) || Array.isArray(definition.explicit))
+    ) {
       // Schema.extend({ explicit: [ type1, type2, ... ], implicit: [ type1, type2, ... ] })
       if (definition.implicit) implicit = implicit.concat(definition.implicit);
       if (definition.explicit) explicit = explicit.concat(definition.explicit);
-
     } else {
-      throw new exception('Schema.extend argument should be a Type, [ Type ], ' +
-        'or a schema definition ({ implicit: [...], explicit: [...] })');
+      throw new exception(
+        'Schema.extend argument should be a Type, [ Type ], ' +
+          'or a schema definition ({ implicit: [...], explicit: [...] })'
+      );
     }
 
-    implicit.forEach(function (type$1) {
+    implicit.forEach(type$1 => {
       if (!(type$1 instanceof type)) {
-        throw new exception('Specified list of YAML types (or a single Type object) contains a non-Type object.');
+        throw new exception(
+          'Specified list of YAML types (or a single Type object) contains a non-Type object.'
+        );
       }
 
       if (type$1.loadKind && type$1.loadKind !== 'scalar') {
-        throw new exception('There is a non-scalar type in the implicit list of a schema. Implicit resolving of such types is not supported.');
+        throw new exception(
+          'There is a non-scalar type in the implicit list of a schema. Implicit resolving of such types is not supported.'
+        );
       }
 
       if (type$1.multi) {
-        throw new exception('There is a multi type in the implicit list of a schema. Multi tags can only be listed as explicit.');
+        throw new exception(
+          'There is a multi type in the implicit list of a schema. Multi tags can only be listed as explicit.'
+        );
       }
     });
 
-    explicit.forEach(function (type$1) {
+    explicit.forEach(type$1 => {
       if (!(type$1 instanceof type)) {
-        throw new exception('Specified list of YAML types (or a single Type object) contains a non-Type object.');
+        throw new exception(
+          'Specified list of YAML types (or a single Type object) contains a non-Type object.'
+        );
       }
     });
 
-    var result = Object.create(Schema$1.prototype);
+    const result = Object.create(Schema$1.prototype);
 
     result.implicit = (this.implicit || []).concat(implicit);
     result.explicit = (this.explicit || []).concat(explicit);
 
     result.compiledImplicit = compileList(result, 'implicit');
     result.compiledExplicit = compileList(result, 'explicit');
-    result.compiledTypeMap  = compileMap(result.compiledImplicit, result.compiledExplicit);
+    result.compiledTypeMap = compileMap(
+      result.compiledImplicit,
+      result.compiledExplicit
+    );
 
     return result;
   };
 
+  const schema = Schema$1;
 
-  var schema = Schema$1;
-
-  var str = new type('tag:yaml.org,2002:str', {
+  const str = new type('tag:yaml.org,2002:str', {
     kind: 'scalar',
-    construct: function (data) { return data !== null ? data : ''; }
+    construct(data) {
+      return data !== null ? data : '';
+    },
   });
 
-  var seq = new type('tag:yaml.org,2002:seq', {
+  const seq = new type('tag:yaml.org,2002:seq', {
     kind: 'sequence',
-    construct: function (data) { return data !== null ? data : []; }
+    construct(data) {
+      return data !== null ? data : [];
+    },
   });
 
-  var map = new type('tag:yaml.org,2002:map', {
+  const map = new type('tag:yaml.org,2002:map', {
     kind: 'mapping',
-    construct: function (data) { return data !== null ? data : {}; }
+    construct(data) {
+      return data !== null ? data : {};
+    },
   });
 
-  var failsafe = new schema({
-    explicit: [
-      str,
-      seq,
-      map
-    ]
+  const failsafe = new schema({
+    explicit: [str, seq, map],
   });
 
   function resolveYamlNull(data) {
     if (data === null) return true;
 
-    var max = data.length;
+    const max = data.length;
 
-    return (max === 1 && data === '~') ||
-           (max === 4 && (data === 'null' || data === 'Null' || data === 'NULL'));
+    return (
+      (max === 1 && data === '~') ||
+      (max === 4 && (data === 'null' || data === 'Null' || data === 'NULL'))
+    );
   }
 
   function constructYamlNull() {
@@ -445,74 +476,92 @@
     return object === null;
   }
 
-  var _null = new type('tag:yaml.org,2002:null', {
+  const _null = new type('tag:yaml.org,2002:null', {
     kind: 'scalar',
     resolve: resolveYamlNull,
     construct: constructYamlNull,
     predicate: isNull,
     represent: {
-      canonical: function () { return '~';    },
-      lowercase: function () { return 'null'; },
-      uppercase: function () { return 'NULL'; },
-      camelcase: function () { return 'Null'; },
-      empty:     function () { return '';     }
+      canonical() {
+        return '~';
+      },
+      lowercase() {
+        return 'null';
+      },
+      uppercase() {
+        return 'NULL';
+      },
+      camelcase() {
+        return 'Null';
+      },
+      empty() {
+        return '';
+      },
     },
-    defaultStyle: 'lowercase'
+    defaultStyle: 'lowercase',
   });
 
   function resolveYamlBoolean(data) {
     if (data === null) return false;
 
-    var max = data.length;
+    const max = data.length;
 
-    return (max === 4 && (data === 'true' || data === 'True' || data === 'TRUE')) ||
-           (max === 5 && (data === 'false' || data === 'False' || data === 'FALSE'));
+    return (
+      (max === 4 && (data === 'true' || data === 'True' || data === 'TRUE')) ||
+      (max === 5 && (data === 'false' || data === 'False' || data === 'FALSE'))
+    );
   }
 
   function constructYamlBoolean(data) {
-    return data === 'true' ||
-           data === 'True' ||
-           data === 'TRUE';
+    return data === 'true' || data === 'True' || data === 'TRUE';
   }
 
   function isBoolean(object) {
     return Object.prototype.toString.call(object) === '[object Boolean]';
   }
 
-  var bool = new type('tag:yaml.org,2002:bool', {
+  const bool = new type('tag:yaml.org,2002:bool', {
     kind: 'scalar',
     resolve: resolveYamlBoolean,
     construct: constructYamlBoolean,
     predicate: isBoolean,
     represent: {
-      lowercase: function (object) { return object ? 'true' : 'false'; },
-      uppercase: function (object) { return object ? 'TRUE' : 'FALSE'; },
-      camelcase: function (object) { return object ? 'True' : 'False'; }
+      lowercase(object) {
+        return object ? 'true' : 'false';
+      },
+      uppercase(object) {
+        return object ? 'TRUE' : 'FALSE';
+      },
+      camelcase(object) {
+        return object ? 'True' : 'False';
+      },
     },
-    defaultStyle: 'lowercase'
+    defaultStyle: 'lowercase',
   });
 
   function isHexCode(c) {
-    return ((0x30/* 0 */ <= c) && (c <= 0x39/* 9 */)) ||
-           ((0x41/* A */ <= c) && (c <= 0x46/* F */)) ||
-           ((0x61/* a */ <= c) && (c <= 0x66/* f */));
+    return (
+      (c /* 0 */ >= 0x30 && c <= 0x39) /* 9 */ ||
+      (c /* A */ >= 0x41 && c <= 0x46) /* F */ ||
+      (c /* a */ >= 0x61 && c <= 0x66) /* f */
+    );
   }
 
   function isOctCode(c) {
-    return ((0x30/* 0 */ <= c) && (c <= 0x37/* 7 */));
+    return c /* 0 */ >= 0x30 && c <= 0x37 /* 7 */;
   }
 
   function isDecCode(c) {
-    return ((0x30/* 0 */ <= c) && (c <= 0x39/* 9 */));
+    return c /* 0 */ >= 0x30 && c <= 0x39 /* 9 */;
   }
 
   function resolveYamlInteger(data) {
     if (data === null) return false;
 
-    var max = data.length,
-        index = 0,
-        hasDigits = false,
-        ch;
+    const max = data.length;
+    let index = 0;
+    let hasDigits = false;
+    let ch;
 
     if (!max) return false;
 
@@ -543,7 +592,6 @@
         return hasDigits && ch !== '_';
       }
 
-
       if (ch === 'x') {
         // base 16
         index++;
@@ -557,7 +605,6 @@
         return hasDigits && ch !== '_';
       }
 
-
       if (ch === 'o') {
         // base 8
         index++;
@@ -593,7 +640,9 @@
   }
 
   function constructYamlInteger(data) {
-    var value = data, sign = 1, ch;
+    let value = data;
+    let sign = 1;
+    let ch;
 
     if (value.indexOf('_') !== -1) {
       value = value.replace(/_/g, '');
@@ -619,49 +668,72 @@
   }
 
   function isInteger(object) {
-    return (Object.prototype.toString.call(object)) === '[object Number]' &&
-           (object % 1 === 0 && !common.isNegativeZero(object));
+    return (
+      Object.prototype.toString.call(object) === '[object Number]' &&
+      object % 1 === 0 &&
+      !common.isNegativeZero(object)
+    );
   }
 
-  var int = new type('tag:yaml.org,2002:int', {
+  const int = new type('tag:yaml.org,2002:int', {
     kind: 'scalar',
     resolve: resolveYamlInteger,
     construct: constructYamlInteger,
     predicate: isInteger,
     represent: {
-      binary:      function (obj) { return obj >= 0 ? '0b' + obj.toString(2) : '-0b' + obj.toString(2).slice(1); },
-      octal:       function (obj) { return obj >= 0 ? '0o'  + obj.toString(8) : '-0o'  + obj.toString(8).slice(1); },
-      decimal:     function (obj) { return obj.toString(10); },
+      binary(obj) {
+        return obj >= 0
+          ? `0b${obj.toString(2)}`
+          : `-0b${obj.toString(2).slice(1)}`;
+      },
+      octal(obj) {
+        return obj >= 0
+          ? `0o${obj.toString(8)}`
+          : `-0o${obj.toString(8).slice(1)}`;
+      },
+      decimal(obj) {
+        return obj.toString(10);
+      },
       /* eslint-disable max-len */
-      hexadecimal: function (obj) { return obj >= 0 ? '0x' + obj.toString(16).toUpperCase() :  '-0x' + obj.toString(16).toUpperCase().slice(1); }
+      hexadecimal(obj) {
+        return obj >= 0
+          ? `0x${obj.toString(16).toUpperCase()}`
+          : `-0x${obj
+              .toString(16)
+              .toUpperCase()
+              .slice(1)}`;
+      },
     },
     defaultStyle: 'decimal',
     styleAliases: {
-      binary:      [ 2,  'bin' ],
-      octal:       [ 8,  'oct' ],
-      decimal:     [ 10, 'dec' ],
-      hexadecimal: [ 16, 'hex' ]
-    }
+      binary: [2, 'bin'],
+      octal: [8, 'oct'],
+      decimal: [10, 'dec'],
+      hexadecimal: [16, 'hex'],
+    },
   });
 
-  var YAML_FLOAT_PATTERN = new RegExp(
+  const YAML_FLOAT_PATTERN = new RegExp(
     // 2.5e4, 2.5 and integers
     '^(?:[-+]?(?:[0-9][0-9_]*)(?:\\.[0-9_]*)?(?:[eE][-+]?[0-9]+)?' +
-    // .2e4, .2
-    // special case, seems not from spec
-    '|\\.[0-9_]+(?:[eE][-+]?[0-9]+)?' +
-    // .inf
-    '|[-+]?\\.(?:inf|Inf|INF)' +
-    // .nan
-    '|\\.(?:nan|NaN|NAN))$');
+      // .2e4, .2
+      // special case, seems not from spec
+      '|\\.[0-9_]+(?:[eE][-+]?[0-9]+)?' +
+      // .inf
+      '|[-+]?\\.(?:inf|Inf|INF)' +
+      // .nan
+      '|\\.(?:nan|NaN|NAN))$'
+  );
 
   function resolveYamlFloat(data) {
     if (data === null) return false;
 
-    if (!YAML_FLOAT_PATTERN.test(data) ||
-        // Quick hack to not allow integers end with `_`
-        // Probably should update regexp & check speed
-        data[data.length - 1] === '_') {
+    if (
+      !YAML_FLOAT_PATTERN.test(data) ||
+      // Quick hack to not allow integers end with `_`
+      // Probably should update regexp & check speed
+      data[data.length - 1] === '_'
+    ) {
       return false;
     }
 
@@ -669,47 +741,55 @@
   }
 
   function constructYamlFloat(data) {
-    var value, sign;
+    let value;
+    let sign;
 
-    value  = data.replace(/_/g, '').toLowerCase();
-    sign   = value[0] === '-' ? -1 : 1;
+    value = data.replace(/_/g, '').toLowerCase();
+    sign = value[0] === '-' ? -1 : 1;
 
     if ('+-'.indexOf(value[0]) >= 0) {
       value = value.slice(1);
     }
 
     if (value === '.inf') {
-      return (sign === 1) ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
-
+      return sign === 1 ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
     } else if (value === '.nan') {
       return NaN;
     }
     return sign * parseFloat(value, 10);
   }
 
-
-  var SCIENTIFIC_WITHOUT_DOT = /^[-+]?[0-9]+e/;
+  const SCIENTIFIC_WITHOUT_DOT = /^[-+]?[0-9]+e/;
 
   function representYamlFloat(object, style) {
-    var res;
+    let res;
 
     if (isNaN(object)) {
       switch (style) {
-        case 'lowercase': return '.nan';
-        case 'uppercase': return '.NAN';
-        case 'camelcase': return '.NaN';
+        case 'lowercase':
+          return '.nan';
+        case 'uppercase':
+          return '.NAN';
+        case 'camelcase':
+          return '.NaN';
       }
     } else if (Number.POSITIVE_INFINITY === object) {
       switch (style) {
-        case 'lowercase': return '.inf';
-        case 'uppercase': return '.INF';
-        case 'camelcase': return '.Inf';
+        case 'lowercase':
+          return '.inf';
+        case 'uppercase':
+          return '.INF';
+        case 'camelcase':
+          return '.Inf';
       }
     } else if (Number.NEGATIVE_INFINITY === object) {
       switch (style) {
-        case 'lowercase': return '-.inf';
-        case 'uppercase': return '-.INF';
-        case 'camelcase': return '-.Inf';
+        case 'lowercase':
+          return '-.inf';
+        case 'uppercase':
+          return '-.INF';
+        case 'camelcase':
+          return '-.Inf';
       }
     } else if (common.isNegativeZero(object)) {
       return '-0.0';
@@ -724,46 +804,45 @@
   }
 
   function isFloat(object) {
-    return (Object.prototype.toString.call(object) === '[object Number]') &&
-           (object % 1 !== 0 || common.isNegativeZero(object));
+    return (
+      Object.prototype.toString.call(object) === '[object Number]' &&
+      (object % 1 !== 0 || common.isNegativeZero(object))
+    );
   }
 
-  var float = new type('tag:yaml.org,2002:float', {
+  const float = new type('tag:yaml.org,2002:float', {
     kind: 'scalar',
     resolve: resolveYamlFloat,
     construct: constructYamlFloat,
     predicate: isFloat,
     represent: representYamlFloat,
-    defaultStyle: 'lowercase'
+    defaultStyle: 'lowercase',
   });
 
-  var json = failsafe.extend({
-    implicit: [
-      _null,
-      bool,
-      int,
-      float
-    ]
+  const json = failsafe.extend({
+    implicit: [_null, bool, int, float],
   });
 
-  var core = json;
-
-  var YAML_DATE_REGEXP = new RegExp(
-    '^([0-9][0-9][0-9][0-9])'          + // [1] year
-    '-([0-9][0-9])'                    + // [2] month
-    '-([0-9][0-9])$');                   // [3] day
-
-  var YAML_TIMESTAMP_REGEXP = new RegExp(
-    '^([0-9][0-9][0-9][0-9])'          + // [1] year
-    '-([0-9][0-9]?)'                   + // [2] month
-    '-([0-9][0-9]?)'                   + // [3] day
-    '(?:[Tt]|[ \\t]+)'                 + // ...
-    '([0-9][0-9]?)'                    + // [4] hour
-    ':([0-9][0-9])'                    + // [5] minute
-    ':([0-9][0-9])'                    + // [6] second
-    '(?:\\.([0-9]*))?'                 + // [7] fraction
+  const core = json;
+
+  const YAML_DATE_REGEXP = new RegExp(
+    '^([0-9][0-9][0-9][0-9])' + // [1] year
+    '-([0-9][0-9])' + // [2] month
+      '-([0-9][0-9])$'
+  ); // [3] day
+
+  const YAML_TIMESTAMP_REGEXP = new RegExp(
+    '^([0-9][0-9][0-9][0-9])' + // [1] year
+    '-([0-9][0-9]?)' + // [2] month
+    '-([0-9][0-9]?)' + // [3] day
+    '(?:[Tt]|[ \\t]+)' + // ...
+    '([0-9][0-9]?)' + // [4] hour
+    ':([0-9][0-9])' + // [5] minute
+    ':([0-9][0-9])' + // [6] second
+    '(?:\\.([0-9]*))?' + // [7] fraction
     '(?:[ \\t]*(Z|([-+])([0-9][0-9]?)' + // [8] tz [9] tz_sign [10] tz_hour
-    '(?::([0-9][0-9]))?))?$');           // [11] tz_minute
+      '(?::([0-9][0-9]))?))?$'
+  ); // [11] tz_minute
 
   function resolveYamlTimestamp(data) {
     if (data === null) return false;
@@ -773,8 +852,18 @@
   }
 
   function constructYamlTimestamp(data) {
-    var match, year, month, day, hour, minute, second, fraction = 0,
-        delta = null, tz_hour, tz_minute, date;
+    let match;
+    let year;
+    let month;
+    let day;
+    let hour;
+    let minute;
+    let second;
+    let fraction = 0;
+    let delta = null;
+    let tz_hour;
+    let tz_minute;
+    let date;
 
     match = YAML_DATE_REGEXP.exec(data);
     if (match === null) match = YAML_TIMESTAMP_REGEXP.exec(data);
@@ -783,23 +872,25 @@
 
     // match: [1] year [2] month [3] day
 
-    year = +(match[1]);
-    month = +(match[2]) - 1; // JS month starts with 0
-    day = +(match[3]);
+    year = +match[1];
+    month = +match[2] - 1; // JS month starts with 0
+    day = +match[3];
 
-    if (!match[4]) { // no hour
+    if (!match[4]) {
+      // no hour
       return new Date(Date.UTC(year, month, day));
     }
 
     // match: [4] hour [5] minute [6] second [7] fraction
 
-    hour = +(match[4]);
-    minute = +(match[5]);
-    second = +(match[6]);
+    hour = +match[4];
+    minute = +match[5];
+    second = +match[6];
 
     if (match[7]) {
       fraction = match[7].slice(0, 3);
-      while (fraction.length < 3) { // milli-seconds
+      while (fraction.length < 3) {
+        // milli-seconds
         fraction += '0';
       }
       fraction = +fraction;
@@ -808,7 +899,7 @@
     // match: [8] tz [9] tz_sign [10] tz_hour [11] tz_minute
 
     if (match[9]) {
-      tz_hour = +(match[10]);
+      tz_hour = +match[10];
       tz_minute = +(match[11] || 0);
       delta = (tz_hour * 60 + tz_minute) * 60000; // delta in mili-seconds
       if (match[9] === '-') delta = -delta;
@@ -821,41 +912,41 @@
     return date;
   }
 
-  function representYamlTimestamp(object /*, style*/) {
+  function representYamlTimestamp(object /* , style */) {
     return object.toISOString();
   }
 
-  var timestamp = new type('tag:yaml.org,2002:timestamp', {
+  const timestamp = new type('tag:yaml.org,2002:timestamp', {
     kind: 'scalar',
     resolve: resolveYamlTimestamp,
     construct: constructYamlTimestamp,
     instanceOf: Date,
-    represent: representYamlTimestamp
+    represent: representYamlTimestamp,
   });
 
   function resolveYamlMerge(data) {
     return data === '<<' || data === null;
   }
 
-  var merge = new type('tag:yaml.org,2002:merge', {
+  const merge = new type('tag:yaml.org,2002:merge', {
     kind: 'scalar',
-    resolve: resolveYamlMerge
+    resolve: resolveYamlMerge,
   });
 
-  /*eslint-disable no-bitwise*/
-
-
-
-
+  /* eslint-disable no-bitwise */
 
   // [ 64, 65, 66 ] -> [ padding, CR, LF ]
-  var BASE64_MAP = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=\n\r';
-
+  const BASE64_MAP =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=\n\r';
 
   function resolveYamlBinary(data) {
     if (data === null) return false;
 
-    var code, idx, bitlen = 0, max = data.length, map = BASE64_MAP;
+    let code;
+    let idx;
+    let bitlen = 0;
+    const max = data.length;
+    const map = BASE64_MAP;
 
     // Convert one by one.
     for (idx = 0; idx < max; idx++) {
@@ -871,24 +962,25 @@
     }
 
     // If there are any bits left, source was corrupted
-    return (bitlen % 8) === 0;
+    return bitlen % 8 === 0;
   }
 
   function constructYamlBinary(data) {
-    var idx, tailbits,
-        input = data.replace(/[\r\n=]/g, ''), // remove CR/LF & padding to simplify scan
-        max = input.length,
-        map = BASE64_MAP,
-        bits = 0,
-        result = [];
+    let idx;
+    let tailbits;
+    const input = data.replace(/[\r\n=]/g, ''); // remove CR/LF & padding to simplify scan
+    const max = input.length;
+    const map = BASE64_MAP;
+    let bits = 0;
+    const result = [];
 
     // Collect by 6*4 bits (3 bytes)
 
     for (idx = 0; idx < max; idx++) {
-      if ((idx % 4 === 0) && idx) {
-        result.push((bits >> 16) & 0xFF);
-        result.push((bits >> 8) & 0xFF);
-        result.push(bits & 0xFF);
+      if (idx % 4 === 0 && idx) {
+        result.push((bits >> 16) & 0xff);
+        result.push((bits >> 8) & 0xff);
+        result.push(bits & 0xff);
       }
 
       bits = (bits << 6) | map.indexOf(input.charAt(idx));
@@ -899,32 +991,35 @@
     tailbits = (max % 4) * 6;
 
     if (tailbits === 0) {
-      result.push((bits >> 16) & 0xFF);
-      result.push((bits >> 8) & 0xFF);
-      result.push(bits & 0xFF);
+      result.push((bits >> 16) & 0xff);
+      result.push((bits >> 8) & 0xff);
+      result.push(bits & 0xff);
     } else if (tailbits === 18) {
-      result.push((bits >> 10) & 0xFF);
-      result.push((bits >> 2) & 0xFF);
+      result.push((bits >> 10) & 0xff);
+      result.push((bits >> 2) & 0xff);
     } else if (tailbits === 12) {
-      result.push((bits >> 4) & 0xFF);
+      result.push((bits >> 4) & 0xff);
     }
 
     return new Uint8Array(result);
   }
 
-  function representYamlBinary(object /*, style*/) {
-    var result = '', bits = 0, idx, tail,
-        max = object.length,
-        map = BASE64_MAP;
+  function representYamlBinary(object /* , style */) {
+    let result = '';
+    let bits = 0;
+    let idx;
+    let tail;
+    const max = object.length;
+    const map = BASE64_MAP;
 
     // Convert every three bytes to 4 ASCII characters.
 
     for (idx = 0; idx < max; idx++) {
-      if ((idx % 3 === 0) && idx) {
-        result += map[(bits >> 18) & 0x3F];
-        result += map[(bits >> 12) & 0x3F];
-        result += map[(bits >> 6) & 0x3F];
-        result += map[bits & 0x3F];
+      if (idx % 3 === 0 && idx) {
+        result += map[(bits >> 18) & 0x3f];
+        result += map[(bits >> 12) & 0x3f];
+        result += map[(bits >> 6) & 0x3f];
+        result += map[bits & 0x3f];
       }
 
       bits = (bits << 8) + object[idx];
@@ -935,18 +1030,18 @@
     tail = max % 3;
 
     if (tail === 0) {
-      result += map[(bits >> 18) & 0x3F];
-      result += map[(bits >> 12) & 0x3F];
-      result += map[(bits >> 6) & 0x3F];
-      result += map[bits & 0x3F];
+      result += map[(bits >> 18) & 0x3f];
+      result += map[(bits >> 12) & 0x3f];
+      result += map[(bits >> 6) & 0x3f];
+      result += map[bits & 0x3f];
     } else if (tail === 2) {
-      result += map[(bits >> 10) & 0x3F];
-      result += map[(bits >> 4) & 0x3F];
-      result += map[(bits << 2) & 0x3F];
+      result += map[(bits >> 10) & 0x3f];
+      result += map[(bits >> 4) & 0x3f];
+      result += map[(bits << 2) & 0x3f];
       result += map[64];
     } else if (tail === 1) {
-      result += map[(bits >> 2) & 0x3F];
-      result += map[(bits << 4) & 0x3F];
+      result += map[(bits >> 2) & 0x3f];
+      result += map[(bits << 4) & 0x3f];
       result += map[64];
       result += map[64];
     }
@@ -955,25 +1050,30 @@
   }
 
   function isBinary(obj) {
-    return Object.prototype.toString.call(obj) ===  '[object Uint8Array]';
+    return Object.prototype.toString.call(obj) === '[object Uint8Array]';
   }
 
-  var binary = new type('tag:yaml.org,2002:binary', {
+  const binary = new type('tag:yaml.org,2002:binary', {
     kind: 'scalar',
     resolve: resolveYamlBinary,
     construct: constructYamlBinary,
     predicate: isBinary,
-    represent: representYamlBinary
+    represent: representYamlBinary,
   });
 
-  var _hasOwnProperty$3 = Object.prototype.hasOwnProperty;
-  var _toString$2       = Object.prototype.toString;
+  const _hasOwnProperty$3 = Object.prototype.hasOwnProperty;
+  const _toString$2 = Object.prototype.toString;
 
   function resolveYamlOmap(data) {
     if (data === null) return true;
 
-    var objectKeys = [], index, length, pair, pairKey, pairHasKey,
-        object = data;
+    const objectKeys = [];
+    let index;
+    let length;
+    let pair;
+    let pairKey;
+    let pairHasKey;
+    const object = data;
 
     for (index = 0, length = object.length; index < length; index += 1) {
       pair = object[index];
@@ -1001,19 +1101,23 @@
     return data !== null ? data : [];
   }
 
-  var omap = new type('tag:yaml.org,2002:omap', {
+  const omap = new type('tag:yaml.org,2002:omap', {
     kind: 'sequence',
     resolve: resolveYamlOmap,
-    construct: constructYamlOmap
+    construct: constructYamlOmap,
   });
 
-  var _toString$1 = Object.prototype.toString;
+  const _toString$1 = Object.prototype.toString;
 
   function resolveYamlPairs(data) {
     if (data === null) return true;
 
-    var index, length, pair, keys, result,
-        object = data;
+    let index;
+    let length;
+    let pair;
+    let keys;
+    let result;
+    const object = data;
 
     result = new Array(object.length);
 
@@ -1026,7 +1130,7 @@
 
       if (keys.length !== 1) return false;
 
-      result[index] = [ keys[0], pair[keys[0]] ];
+      result[index] = [keys[0], pair[keys[0]]];
     }
 
     return true;
@@ -1035,8 +1139,12 @@
   function constructYamlPairs(data) {
     if (data === null) return [];
 
-    var index, length, pair, keys, result,
-        object = data;
+    let index;
+    let length;
+    let pair;
+    let keys;
+    let result;
+    const object = data;
 
     result = new Array(object.length);
 
@@ -1045,24 +1153,25 @@
 
       keys = Object.keys(pair);
 
-      result[index] = [ keys[0], pair[keys[0]] ];
+      result[index] = [keys[0], pair[keys[0]]];
     }
 
     return result;
   }
 
-  var pairs = new type('tag:yaml.org,2002:pairs', {
+  const pairs = new type('tag:yaml.org,2002:pairs', {
     kind: 'sequence',
     resolve: resolveYamlPairs,
-    construct: constructYamlPairs
+    construct: constructYamlPairs,
   });
 
-  var _hasOwnProperty$2 = Object.prototype.hasOwnProperty;
+  const _hasOwnProperty$2 = Object.prototype.hasOwnProperty;
 
   function resolveYamlSet(data) {
     if (data === null) return true;
 
-    var key, object = data;
+    let key;
+    const object = data;
 
     for (key in object) {
       if (_hasOwnProperty$2.call(object, key)) {
@@ -1077,90 +1186,78 @@
     return data !== null ? data : {};
   }
 
-  var set = new type('tag:yaml.org,2002:set', {
+  const set = new type('tag:yaml.org,2002:set', {
     kind: 'mapping',
     resolve: resolveYamlSet,
-    construct: constructYamlSet
+    construct: constructYamlSet,
   });
 
-  var _default = core.extend({
-    implicit: [
-      timestamp,
-      merge
-    ],
-    explicit: [
-      binary,
-      omap,
-      pairs,
-      set
-    ]
+  const _default = core.extend({
+    implicit: [timestamp, merge],
+    explicit: [binary, omap, pairs, set],
   });
 
-  /*eslint-disable max-len,no-use-before-define*/
-
-
-
-
-
-
+  /* eslint-disable max-len,no-use-before-define */
 
-  var _hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+  const _hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 
+  const CONTEXT_FLOW_IN = 1;
+  const CONTEXT_FLOW_OUT = 2;
+  const CONTEXT_BLOCK_IN = 3;
+  const CONTEXT_BLOCK_OUT = 4;
 
-  var CONTEXT_FLOW_IN   = 1;
-  var CONTEXT_FLOW_OUT  = 2;
-  var CONTEXT_BLOCK_IN  = 3;
-  var CONTEXT_BLOCK_OUT = 4;
+  const CHOMPING_CLIP = 1;
+  const CHOMPING_STRIP = 2;
+  const CHOMPING_KEEP = 3;
 
+  const PATTERN_NON_PRINTABLE = /[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\x84\x86-\x9F\uFFFE\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]/;
+  const PATTERN_NON_ASCII_LINE_BREAKS = /[\x85\u2028\u2029]/;
+  const PATTERN_FLOW_INDICATORS = /[,\[\]\{\}]/;
+  const PATTERN_TAG_HANDLE = /^(?:!|!!|![a-z\-]+!)$/i;
+  const PATTERN_TAG_URI = /^(?:!|[^,\[\]\{\}])(?:%[0-9a-f]{2}|[0-9a-z\-#;\/\?:@&=\+\$,_\.!~\*'\(\)\[\]])*$/i;
 
-  var CHOMPING_CLIP  = 1;
-  var CHOMPING_STRIP = 2;
-  var CHOMPING_KEEP  = 3;
-
-
-  var PATTERN_NON_PRINTABLE         = /[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\x84\x86-\x9F\uFFFE\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]/;
-  var PATTERN_NON_ASCII_LINE_BREAKS = /[\x85\u2028\u2029]/;
-  var PATTERN_FLOW_INDICATORS       = /[,\[\]\{\}]/;
-  var PATTERN_TAG_HANDLE            = /^(?:!|!!|![a-z\-]+!)$/i;
-  var PATTERN_TAG_URI               = /^(?:!|[^,\[\]\{\}])(?:%[0-9a-f]{2}|[0-9a-z\-#;\/\?:@&=\+\$,_\.!~\*'\(\)\[\]])*$/i;
-
-
-  function _class(obj) { return Object.prototype.toString.call(obj); }
+  function _class(obj) {
+    return Object.prototype.toString.call(obj);
+  }
 
   function is_EOL(c) {
-    return (c === 0x0A/* LF */) || (c === 0x0D/* CR */);
+    return c === 0x0a /* LF */ || c === 0x0d /* CR */;
   }
 
   function is_WHITE_SPACE(c) {
-    return (c === 0x09/* Tab */) || (c === 0x20/* Space */);
+    return c === 0x09 /* Tab */ || c === 0x20 /* Space */;
   }
 
   function is_WS_OR_EOL(c) {
-    return (c === 0x09/* Tab */) ||
-           (c === 0x20/* Space */) ||
-           (c === 0x0A/* LF */) ||
-           (c === 0x0D/* CR */);
+    return (
+      c === 0x09 /* Tab */ ||
+      c === 0x20 /* Space */ ||
+      c === 0x0a /* LF */ ||
+      c === 0x0d /* CR */
+    );
   }
 
   function is_FLOW_INDICATOR(c) {
-    return c === 0x2C/* , */ ||
-           c === 0x5B/* [ */ ||
-           c === 0x5D/* ] */ ||
-           c === 0x7B/* { */ ||
-           c === 0x7D/* } */;
+    return (
+      c === 0x2c /* , */ ||
+      c === 0x5b /* [ */ ||
+      c === 0x5d /* ] */ ||
+      c === 0x7b /* { */ ||
+      c === 0x7d /* } */
+    );
   }
 
   function fromHexCode(c) {
-    var lc;
+    let lc;
 
-    if ((0x30/* 0 */ <= c) && (c <= 0x39/* 9 */)) {
+    if (c /* 0 */ >= 0x30 && c <= 0x39 /* 9 */) {
       return c - 0x30;
     }
 
-    /*eslint-disable no-bitwise*/
+    /* eslint-disable no-bitwise */
     lc = c | 0x20;
 
-    if ((0x61/* a */ <= lc) && (lc <= 0x66/* f */)) {
+    if (lc /* a */ >= 0x61 && lc <= 0x66 /* f */) {
       return lc - 0x61 + 10;
     }
 
@@ -1168,14 +1265,20 @@
   }
 
   function escapedHexLen(c) {
-    if (c === 0x78/* x */) { return 2; }
-    if (c === 0x75/* u */) { return 4; }
-    if (c === 0x55/* U */) { return 8; }
+    if (c === 0x78 /* x */) {
+      return 2;
+    }
+    if (c === 0x75 /* u */) {
+      return 4;
+    }
+    if (c === 0x55 /* U */) {
+      return 8;
+    }
     return 0;
   }
 
   function fromDecimalCode(c) {
-    if ((0x30/* 0 */ <= c) && (c <= 0x39/* 9 */)) {
+    if (c /* 0 */ >= 0x30 && c <= 0x39 /* 9 */) {
       return c - 0x30;
     }
 
@@ -1184,66 +1287,84 @@
 
   function simpleEscapeSequence(c) {
     /* eslint-disable indent */
-    return (c === 0x30/* 0 */) ? '\x00' :
-          (c === 0x61/* a */) ? '\x07' :
-          (c === 0x62/* b */) ? '\x08' :
-          (c === 0x74/* t */) ? '\x09' :
-          (c === 0x09/* Tab */) ? '\x09' :
-          (c === 0x6E/* n */) ? '\x0A' :
-          (c === 0x76/* v */) ? '\x0B' :
-          (c === 0x66/* f */) ? '\x0C' :
-          (c === 0x72/* r */) ? '\x0D' :
-          (c === 0x65/* e */) ? '\x1B' :
-          (c === 0x20/* Space */) ? ' ' :
-          (c === 0x22/* " */) ? '\x22' :
-          (c === 0x2F/* / */) ? '/' :
-          (c === 0x5C/* \ */) ? '\x5C' :
-          (c === 0x4E/* N */) ? '\x85' :
-          (c === 0x5F/* _ */) ? '\xA0' :
-          (c === 0x4C/* L */) ? '\u2028' :
-          (c === 0x50/* P */) ? '\u2029' : '';
+    return c === 0x30 /* 0 */
+      ? '\x00'
+      : c === 0x61 /* a */
+      ? '\x07'
+      : c === 0x62 /* b */
+      ? '\x08'
+      : c === 0x74 /* t */
+      ? '\x09'
+      : c === 0x09 /* Tab */
+      ? '\x09'
+      : c === 0x6e /* n */
+      ? '\x0A'
+      : c === 0x76 /* v */
+      ? '\x0B'
+      : c === 0x66 /* f */
+      ? '\x0C'
+      : c === 0x72 /* r */
+      ? '\x0D'
+      : c === 0x65 /* e */
+      ? '\x1B'
+      : c === 0x20 /* Space */
+      ? ' '
+      : c === 0x22 /* " */
+      ? '\x22'
+      : c === 0x2f /* / */
+      ? '/'
+      : c === 0x5c /* \ */
+      ? '\x5C'
+      : c === 0x4e /* N */
+      ? '\x85'
+      : c === 0x5f /* _ */
+      ? '\xA0'
+      : c === 0x4c /* L */
+      ? '\u2028'
+      : c === 0x50 /* P */
+      ? '\u2029'
+      : '';
   }
 
   function charFromCodepoint(c) {
-    if (c <= 0xFFFF) {
+    if (c <= 0xffff) {
       return String.fromCharCode(c);
     }
     // Encode UTF-16 surrogate pair
     // https://en.wikipedia.org/wiki/UTF-16#Code_points_U.2B010000_to_U.2B10FFFF
     return String.fromCharCode(
-      ((c - 0x010000) >> 10) + 0xD800,
-      ((c - 0x010000) & 0x03FF) + 0xDC00
+      ((c - 0x010000) >> 10) + 0xd800,
+      ((c - 0x010000) & 0x03ff) + 0xdc00
     );
   }
 
-  var simpleEscapeCheck = new Array(256); // integer, for fast access
-  var simpleEscapeMap = new Array(256);
-  for (var i = 0; i < 256; i++) {
+  const simpleEscapeCheck = new Array(256); // integer, for fast access
+  const simpleEscapeMap = new Array(256);
+  for (let i = 0; i < 256; i++) {
     simpleEscapeCheck[i] = simpleEscapeSequence(i) ? 1 : 0;
     simpleEscapeMap[i] = simpleEscapeSequence(i);
   }
 
-
   function State$1(input, options) {
     this.input = input;
 
-    this.filename  = options['filename']  || null;
-    this.schema    = options['schema']    || _default;
-    this.onWarning = options['onWarning'] || null;
+    this.filename = options.filename || null;
+    this.schema = options.schema || _default;
+    this.onWarning = options.onWarning || null;
     // (Hidden) Remove? makes the loader to expect YAML 1.1 documents
     // if such documents have no explicit %YAML directive
-    this.legacy    = options['legacy']    || false;
+    this.legacy = options.legacy || false;
 
-    this.json      = options['json']      || false;
-    this.listener  = options['listener']  || null;
+    this.json = options.json || false;
+    this.listener = options.listener || null;
 
     this.implicitTypes = this.schema.compiledImplicit;
-    this.typeMap       = this.schema.compiledTypeMap;
+    this.typeMap = this.schema.compiledTypeMap;
 
-    this.length     = input.length;
-    this.position   = 0;
-    this.line       = 0;
-    this.lineStart  = 0;
+    this.length = input.length;
+    this.position = 0;
+    this.line = 0;
+    this.lineStart = 0;
     this.lineIndent = 0;
 
     // position of first leading tab in the current line,
@@ -1260,18 +1381,16 @@
     this.tag;
     this.anchor;
     this.kind;
-    this.result;*/
-
+    this.result; */
   }
 
-
   function generateError(state, message) {
-    var mark = {
-      name:     state.filename,
-      buffer:   state.input.slice(0, -1), // omit trailing \0
+    const mark = {
+      name: state.filename,
+      buffer: state.input.slice(0, -1), // omit trailing \0
       position: state.position,
-      line:     state.line,
-      column:   state.position - state.lineStart
+      line: state.line,
+      column: state.position - state.lineStart,
     };
 
     mark.snippet = snippet(mark);
@@ -1289,12 +1408,11 @@
     }
   }
 
-
-  var directiveHandlers = {
-
+  const directiveHandlers = {
     YAML: function handleYamlDirective(state, name, args) {
-
-      var match, major, minor;
+      let match;
+      let major;
+      let minor;
 
       if (state.version !== null) {
         throwError(state, 'duplication of %YAML directive');
@@ -1318,7 +1436,7 @@
       }
 
       state.version = args[0];
-      state.checkLineBreaks = (minor < 2);
+      state.checkLineBreaks = minor < 2;
 
       if (minor !== 1 && minor !== 2) {
         throwWarning(state, 'unsupported YAML version of the document');
@@ -1326,8 +1444,8 @@
     },
 
     TAG: function handleTagDirective(state, name, args) {
-
-      var handle, prefix;
+      let handle;
+      let prefix;
 
       if (args.length !== 2) {
         throwError(state, 'TAG directive accepts exactly two arguments');
@@ -1337,39 +1455,58 @@
       prefix = args[1];
 
       if (!PATTERN_TAG_HANDLE.test(handle)) {
-        throwError(state, 'ill-formed tag handle (first argument) of the TAG directive');
+        throwError(
+          state,
+          'ill-formed tag handle (first argument) of the TAG directive'
+        );
       }
 
       if (_hasOwnProperty$1.call(state.tagMap, handle)) {
-        throwError(state, 'there is a previously declared suffix for "' + handle + '" tag handle');
+        throwError(
+          state,
+          `there is a previously declared suffix for "${handle}" tag handle`
+        );
       }
 
       if (!PATTERN_TAG_URI.test(prefix)) {
-        throwError(state, 'ill-formed tag prefix (second argument) of the TAG directive');
+        throwError(
+          state,
+          'ill-formed tag prefix (second argument) of the TAG directive'
+        );
       }
 
       try {
         prefix = decodeURIComponent(prefix);
       } catch (err) {
-        throwError(state, 'tag prefix is malformed: ' + prefix);
+        throwError(state, `tag prefix is malformed: ${prefix}`);
       }
 
       state.tagMap[handle] = prefix;
-    }
+    },
   };
 
-
   function captureSegment(state, start, end, checkJson) {
-    var _position, _length, _character, _result;
+    let _position;
+    let _length;
+    let _character;
+    let _result;
 
     if (start < end) {
       _result = state.input.slice(start, end);
 
       if (checkJson) {
-        for (_position = 0, _length = _result.length; _position < _length; _position += 1) {
+        for (
+          _position = 0, _length = _result.length;
+          _position < _length;
+          _position += 1
+        ) {
           _character = _result.charCodeAt(_position);
-          if (!(_character === 0x09 ||
-                (0x20 <= _character && _character <= 0x10FFFF))) {
+          if (
+            !(
+              _character === 0x09 ||
+              (_character >= 0x20 && _character <= 0x10ffff)
+            )
+          ) {
             throwError(state, 'expected valid JSON character');
           }
         }
@@ -1382,15 +1519,25 @@
   }
 
   function mergeMappings(state, destination, source, overridableKeys) {
-    var sourceKeys, key, index, quantity;
+    let sourceKeys;
+    let key;
+    let index;
+    let quantity;
 
     if (!common.isObject(source)) {
-      throwError(state, 'cannot merge mappings; the provided source object is unacceptable');
+      throwError(
+        state,
+        'cannot merge mappings; the provided source object is unacceptable'
+      );
     }
 
     sourceKeys = Object.keys(source);
 
-    for (index = 0, quantity = sourceKeys.length; index < quantity; index += 1) {
+    for (
+      index = 0, quantity = sourceKeys.length;
+      index < quantity;
+      index += 1
+    ) {
       key = sourceKeys[index];
 
       if (!_hasOwnProperty$1.call(destination, key)) {
@@ -1400,10 +1547,19 @@
     }
   }
 
-  function storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, valueNode,
-    startLine, startLineStart, startPos) {
-
-    var index, quantity;
+  function storeMappingPair(
+    state,
+    _result,
+    overridableKeys,
+    keyTag,
+    keyNode,
+    valueNode,
+    startLine,
+    startLineStart,
+    startPos
+  ) {
+    let index;
+    let quantity;
 
     // The output is a plain object here, so keys can only be strings.
     // We need to convert keyNode to a string, but doing so can hang the process
@@ -1416,7 +1572,10 @@
           throwError(state, 'nested arrays are not supported inside keys');
         }
 
-        if (typeof keyNode === 'object' && _class(keyNode[index]) === '[object Object]') {
+        if (
+          typeof keyNode === 'object' &&
+          _class(keyNode[index]) === '[object Object]'
+        ) {
           keyNode[index] = '[object Object]';
         }
       }
@@ -1429,7 +1588,6 @@
       keyNode = '[object Object]';
     }
 
-
     keyNode = String(keyNode);
 
     if (_result === null) {
@@ -1438,16 +1596,22 @@
 
     if (keyTag === 'tag:yaml.org,2002:merge') {
       if (Array.isArray(valueNode)) {
-        for (index = 0, quantity = valueNode.length; index < quantity; index += 1) {
+        for (
+          index = 0, quantity = valueNode.length;
+          index < quantity;
+          index += 1
+        ) {
           mergeMappings(state, _result, valueNode[index], overridableKeys);
         }
       } else {
         mergeMappings(state, _result, valueNode, overridableKeys);
       }
     } else {
-      if (!state.json &&
-          !_hasOwnProperty$1.call(overridableKeys, keyNode) &&
-          _hasOwnProperty$1.call(_result, keyNode)) {
+      if (
+        !state.json &&
+        !_hasOwnProperty$1.call(overridableKeys, keyNode) &&
+        _hasOwnProperty$1.call(_result, keyNode)
+      ) {
         state.line = startLine || state.line;
         state.lineStart = startLineStart || state.lineStart;
         state.position = startPos || state.position;
@@ -1460,7 +1624,7 @@
           configurable: true,
           enumerable: true,
           writable: true,
-          value: valueNode
+          value: valueNode,
         });
       } else {
         _result[keyNode] = valueNode;
@@ -1472,15 +1636,15 @@
   }
 
   function readLineBreak(state) {
-    var ch;
+    let ch;
 
     ch = state.input.charCodeAt(state.position);
 
-    if (ch === 0x0A/* LF */) {
+    if (ch === 0x0a /* LF */) {
       state.position++;
-    } else if (ch === 0x0D/* CR */) {
+    } else if (ch === 0x0d /* CR */) {
       state.position++;
-      if (state.input.charCodeAt(state.position) === 0x0A/* LF */) {
+      if (state.input.charCodeAt(state.position) === 0x0a /* LF */) {
         state.position++;
       }
     } else {
@@ -1493,21 +1657,21 @@
   }
 
   function skipSeparationSpace(state, allowComments, checkIndent) {
-    var lineBreaks = 0,
-        ch = state.input.charCodeAt(state.position);
+    let lineBreaks = 0;
+    let ch = state.input.charCodeAt(state.position);
 
     while (ch !== 0) {
       while (is_WHITE_SPACE(ch)) {
-        if (ch === 0x09/* Tab */ && state.firstTabInLine === -1) {
+        if (ch === 0x09 /* Tab */ && state.firstTabInLine === -1) {
           state.firstTabInLine = state.position;
         }
         ch = state.input.charCodeAt(++state.position);
       }
 
-      if (allowComments && ch === 0x23/* # */) {
+      if (allowComments && ch === 0x23 /* # */) {
         do {
           ch = state.input.charCodeAt(++state.position);
-        } while (ch !== 0x0A/* LF */ && ch !== 0x0D/* CR */ && ch !== 0);
+        } while (ch !== 0x0a /* LF */ && ch !== 0x0d /* CR */ && ch !== 0);
       }
 
       if (is_EOL(ch)) {
@@ -1517,7 +1681,7 @@
         lineBreaks++;
         state.lineIndent = 0;
 
-        while (ch === 0x20/* Space */) {
+        while (ch === 0x20 /* Space */) {
           state.lineIndent++;
           ch = state.input.charCodeAt(++state.position);
         }
@@ -1526,7 +1690,11 @@
       }
     }
 
-    if (checkIndent !== -1 && lineBreaks !== 0 && state.lineIndent < checkIndent) {
+    if (
+      checkIndent !== -1 &&
+      lineBreaks !== 0 &&
+      state.lineIndent < checkIndent
+    ) {
       throwWarning(state, 'deficient indentation');
     }
 
@@ -1534,17 +1702,18 @@
   }
 
   function testDocumentSeparator(state) {
-    var _position = state.position,
-        ch;
+    let _position = state.position;
+    let ch;
 
     ch = state.input.charCodeAt(_position);
 
     // Condition state.position === state.lineStart is tested
     // in parent on each call, for efficiency. No needs to test here again.
-    if ((ch === 0x2D/* - */ || ch === 0x2E/* . */) &&
-        ch === state.input.charCodeAt(_position + 1) &&
-        ch === state.input.charCodeAt(_position + 2)) {
-
+    if (
+      (ch === 0x2d /* - */ || ch === 0x2e) /* . */ &&
+      ch === state.input.charCodeAt(_position + 1) &&
+      ch === state.input.charCodeAt(_position + 2)
+    ) {
       _position += 3;
 
       ch = state.input.charCodeAt(_position);
@@ -1565,43 +1734,46 @@
     }
   }
 
-
   function readPlainScalar(state, nodeIndent, withinFlowCollection) {
-    var preceding,
-        following,
-        captureStart,
-        captureEnd,
-        hasPendingContent,
-        _line,
-        _lineStart,
-        _lineIndent,
-        _kind = state.kind,
-        _result = state.result,
-        ch;
+    let preceding;
+    let following;
+    let captureStart;
+    let captureEnd;
+    let hasPendingContent;
+    let _line;
+    let _lineStart;
+    let _lineIndent;
+    const _kind = state.kind;
+    const _result = state.result;
+    let ch;
 
     ch = state.input.charCodeAt(state.position);
 
-    if (is_WS_OR_EOL(ch)      ||
-        is_FLOW_INDICATOR(ch) ||
-        ch === 0x23/* # */    ||
-        ch === 0x26/* & */    ||
-        ch === 0x2A/* * */    ||
-        ch === 0x21/* ! */    ||
-        ch === 0x7C/* | */    ||
-        ch === 0x3E/* > */    ||
-        ch === 0x27/* ' */    ||
-        ch === 0x22/* " */    ||
-        ch === 0x25/* % */    ||
-        ch === 0x40/* @ */    ||
-        ch === 0x60/* ` */) {
+    if (
+      is_WS_OR_EOL(ch) ||
+      is_FLOW_INDICATOR(ch) ||
+      ch === 0x23 /* # */ ||
+      ch === 0x26 /* & */ ||
+      ch === 0x2a /* * */ ||
+      ch === 0x21 /* ! */ ||
+      ch === 0x7c /* | */ ||
+      ch === 0x3e /* > */ ||
+      ch === 0x27 /* ' */ ||
+      ch === 0x22 /* " */ ||
+      ch === 0x25 /* % */ ||
+      ch === 0x40 /* @ */ ||
+      ch === 0x60 /* ` */
+    ) {
       return false;
     }
 
-    if (ch === 0x3F/* ? */ || ch === 0x2D/* - */) {
+    if (ch === 0x3f /* ? */ || ch === 0x2d /* - */) {
       following = state.input.charCodeAt(state.position + 1);
 
-      if (is_WS_OR_EOL(following) ||
-          withinFlowCollection && is_FLOW_INDICATOR(following)) {
+      if (
+        is_WS_OR_EOL(following) ||
+        (withinFlowCollection && is_FLOW_INDICATOR(following))
+      ) {
         return false;
       }
     }
@@ -1612,25 +1784,26 @@
     hasPendingContent = false;
 
     while (ch !== 0) {
-      if (ch === 0x3A/* : */) {
+      if (ch === 0x3a /* : */) {
         following = state.input.charCodeAt(state.position + 1);
 
-        if (is_WS_OR_EOL(following) ||
-            withinFlowCollection && is_FLOW_INDICATOR(following)) {
+        if (
+          is_WS_OR_EOL(following) ||
+          (withinFlowCollection && is_FLOW_INDICATOR(following))
+        ) {
           break;
         }
-
-      } else if (ch === 0x23/* # */) {
+      } else if (ch === 0x23 /* # */) {
         preceding = state.input.charCodeAt(state.position - 1);
 
         if (is_WS_OR_EOL(preceding)) {
           break;
         }
-
-      } else if ((state.position === state.lineStart && testDocumentSeparator(state)) ||
-                 withinFlowCollection && is_FLOW_INDICATOR(ch)) {
+      } else if (
+        (state.position === state.lineStart && testDocumentSeparator(state)) ||
+        (withinFlowCollection && is_FLOW_INDICATOR(ch))
+      ) {
         break;
-
       } else if (is_EOL(ch)) {
         _line = state.line;
         _lineStart = state.lineStart;
@@ -1676,12 +1849,13 @@
   }
 
   function readSingleQuotedScalar(state, nodeIndent) {
-    var ch,
-        captureStart, captureEnd;
+    let ch;
+    let captureStart;
+    let captureEnd;
 
     ch = state.input.charCodeAt(state.position);
 
-    if (ch !== 0x27/* ' */) {
+    if (ch !== 0x27 /* ' */) {
       return false;
     }
 
@@ -1691,46 +1865,52 @@
     captureStart = captureEnd = state.position;
 
     while ((ch = state.input.charCodeAt(state.position)) !== 0) {
-      if (ch === 0x27/* ' */) {
+      if (ch === 0x27 /* ' */) {
         captureSegment(state, captureStart, state.position, true);
         ch = state.input.charCodeAt(++state.position);
 
-        if (ch === 0x27/* ' */) {
+        if (ch === 0x27 /* ' */) {
           captureStart = state.position;
           state.position++;
           captureEnd = state.position;
         } else {
           return true;
         }
-
       } else if (is_EOL(ch)) {
         captureSegment(state, captureStart, captureEnd, true);
         writeFoldedLines(state, skipSeparationSpace(state, false, nodeIndent));
         captureStart = captureEnd = state.position;
-
-      } else if (state.position === state.lineStart && testDocumentSeparator(state)) {
-        throwError(state, 'unexpected end of the document within a single quoted scalar');
-
+      } else if (
+        state.position === state.lineStart &&
+        testDocumentSeparator(state)
+      ) {
+        throwError(
+          state,
+          'unexpected end of the document within a single quoted scalar'
+        );
       } else {
         state.position++;
         captureEnd = state.position;
       }
     }
 
-    throwError(state, 'unexpected end of the stream within a single quoted scalar');
+    throwError(
+      state,
+      'unexpected end of the stream within a single quoted scalar'
+    );
   }
 
   function readDoubleQuotedScalar(state, nodeIndent) {
-    var captureStart,
-        captureEnd,
-        hexLength,
-        hexResult,
-        tmp,
-        ch;
+    let captureStart;
+    let captureEnd;
+    let hexLength;
+    let hexResult;
+    let tmp;
+    let ch;
 
     ch = state.input.charCodeAt(state.position);
 
-    if (ch !== 0x22/* " */) {
+    if (ch !== 0x22 /* " */) {
       return false;
     }
 
@@ -1740,12 +1920,11 @@
     captureStart = captureEnd = state.position;
 
     while ((ch = state.input.charCodeAt(state.position)) !== 0) {
-      if (ch === 0x22/* " */) {
+      if (ch === 0x22 /* " */) {
         captureSegment(state, captureStart, state.position, true);
         state.position++;
         return true;
-
-      } else if (ch === 0x5C/* \ */) {
+      } else if (ch === 0x5c /* \ */) {
         captureSegment(state, captureStart, state.position, true);
         ch = state.input.charCodeAt(++state.position);
 
@@ -1756,7 +1935,6 @@
         } else if (ch < 256 && simpleEscapeCheck[ch]) {
           state.result += simpleEscapeMap[ch];
           state.position++;
-
         } else if ((tmp = escapedHexLen(ch)) > 0) {
           hexLength = tmp;
           hexResult = 0;
@@ -1766,7 +1944,6 @@
 
             if ((tmp = fromHexCode(ch)) >= 0) {
               hexResult = (hexResult << 4) + tmp;
-
             } else {
               throwError(state, 'expected hexadecimal character');
             }
@@ -1775,57 +1952,62 @@
           state.result += charFromCodepoint(hexResult);
 
           state.position++;
-
         } else {
           throwError(state, 'unknown escape sequence');
         }
 
         captureStart = captureEnd = state.position;
-
       } else if (is_EOL(ch)) {
         captureSegment(state, captureStart, captureEnd, true);
         writeFoldedLines(state, skipSeparationSpace(state, false, nodeIndent));
         captureStart = captureEnd = state.position;
-
-      } else if (state.position === state.lineStart && testDocumentSeparator(state)) {
-        throwError(state, 'unexpected end of the document within a double quoted scalar');
-
+      } else if (
+        state.position === state.lineStart &&
+        testDocumentSeparator(state)
+      ) {
+        throwError(
+          state,
+          'unexpected end of the document within a double quoted scalar'
+        );
       } else {
         state.position++;
         captureEnd = state.position;
       }
     }
 
-    throwError(state, 'unexpected end of the stream within a double quoted scalar');
+    throwError(
+      state,
+      'unexpected end of the stream within a double quoted scalar'
+    );
   }
 
   function readFlowCollection(state, nodeIndent) {
-    var readNext = true,
-        _line,
-        _lineStart,
-        _pos,
-        _tag     = state.tag,
-        _result,
-        _anchor  = state.anchor,
-        following,
-        terminator,
-        isPair,
-        isExplicitPair,
-        isMapping,
-        overridableKeys = Object.create(null),
-        keyNode,
-        keyTag,
-        valueNode,
-        ch;
+    let readNext = true;
+    let _line;
+    let _lineStart;
+    let _pos;
+    const _tag = state.tag;
+    let _result;
+    const _anchor = state.anchor;
+    let following;
+    let terminator;
+    let isPair;
+    let isExplicitPair;
+    let isMapping;
+    const overridableKeys = Object.create(null);
+    let keyNode;
+    let keyTag;
+    let valueNode;
+    let ch;
 
     ch = state.input.charCodeAt(state.position);
 
-    if (ch === 0x5B/* [ */) {
-      terminator = 0x5D;/* ] */
+    if (ch === 0x5b /* [ */) {
+      terminator = 0x5d; /* ] */
       isMapping = false;
       _result = [];
-    } else if (ch === 0x7B/* { */) {
-      terminator = 0x7D;/* } */
+    } else if (ch === 0x7b /* { */) {
+      terminator = 0x7d; /* } */
       isMapping = true;
       _result = {};
     } else {
@@ -1852,7 +2034,7 @@
         return true;
       } else if (!readNext) {
         throwError(state, 'missed comma between flow collection entries');
-      } else if (ch === 0x2C/* , */) {
+      } else if (ch === 0x2c /* , */) {
         // "flow collection entries can never be completely empty", as per YAML 1.2, section 7.4
         throwError(state, "expected the node content, but found ','");
       }
@@ -1860,7 +2042,7 @@
       keyTag = keyNode = valueNode = null;
       isPair = isExplicitPair = false;
 
-      if (ch === 0x3F/* ? */) {
+      if (ch === 0x3f /* ? */) {
         following = state.input.charCodeAt(state.position + 1);
 
         if (is_WS_OR_EOL(following)) {
@@ -1880,7 +2062,7 @@
 
       ch = state.input.charCodeAt(state.position);
 
-      if ((isExplicitPair || state.line === _line) && ch === 0x3A/* : */) {
+      if ((isExplicitPair || state.line === _line) && ch === 0x3a /* : */) {
         isPair = true;
         ch = state.input.charCodeAt(++state.position);
         skipSeparationSpace(state, true, nodeIndent);
@@ -1889,9 +2071,31 @@
       }
 
       if (isMapping) {
-        storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, valueNode, _line, _lineStart, _pos);
+        storeMappingPair(
+          state,
+          _result,
+          overridableKeys,
+          keyTag,
+          keyNode,
+          valueNode,
+          _line,
+          _lineStart,
+          _pos
+        );
       } else if (isPair) {
-        _result.push(storeMappingPair(state, null, overridableKeys, keyTag, keyNode, valueNode, _line, _lineStart, _pos));
+        _result.push(
+          storeMappingPair(
+            state,
+            null,
+            overridableKeys,
+            keyTag,
+            keyNode,
+            valueNode,
+            _line,
+            _lineStart,
+            _pos
+          )
+        );
       } else {
         _result.push(keyNode);
       }
@@ -1900,7 +2104,7 @@
 
       ch = state.input.charCodeAt(state.position);
 
-      if (ch === 0x2C/* , */) {
+      if (ch === 0x2c /* , */) {
         readNext = true;
         ch = state.input.charCodeAt(++state.position);
       } else {
@@ -1912,22 +2116,22 @@
   }
 
   function readBlockScalar(state, nodeIndent) {
-    var captureStart,
-        folding,
-        chomping       = CHOMPING_CLIP,
-        didReadContent = false,
-        detectedIndent = false,
-        textIndent     = nodeIndent,
-        emptyLines     = 0,
-        atMoreIndented = false,
-        tmp,
-        ch;
+    let captureStart;
+    let folding;
+    let chomping = CHOMPING_CLIP;
+    let didReadContent = false;
+    let detectedIndent = false;
+    let textIndent = nodeIndent;
+    let emptyLines = 0;
+    let atMoreIndented = false;
+    let tmp;
+    let ch;
 
     ch = state.input.charCodeAt(state.position);
 
-    if (ch === 0x7C/* | */) {
+    if (ch === 0x7c /* | */) {
       folding = false;
-    } else if (ch === 0x3E/* > */) {
+    } else if (ch === 0x3e /* > */) {
       folding = true;
     } else {
       return false;
@@ -1939,35 +2143,38 @@
     while (ch !== 0) {
       ch = state.input.charCodeAt(++state.position);
 
-      if (ch === 0x2B/* + */ || ch === 0x2D/* - */) {
+      if (ch === 0x2b /* + */ || ch === 0x2d /* - */) {
         if (CHOMPING_CLIP === chomping) {
-          chomping = (ch === 0x2B/* + */) ? CHOMPING_KEEP : CHOMPING_STRIP;
+          chomping = ch === 0x2b /* + */ ? CHOMPING_KEEP : CHOMPING_STRIP;
         } else {
           throwError(state, 'repeat of a chomping mode identifier');
         }
-
       } else if ((tmp = fromDecimalCode(ch)) >= 0) {
         if (tmp === 0) {
-          throwError(state, 'bad explicit indentation width of a block scalar; it cannot be less than one');
+          throwError(
+            state,
+            'bad explicit indentation width of a block scalar; it cannot be less than one'
+          );
         } else if (!detectedIndent) {
           textIndent = nodeIndent + tmp - 1;
           detectedIndent = true;
         } else {
           throwError(state, 'repeat of an indentation width identifier');
         }
-
       } else {
         break;
       }
     }
 
     if (is_WHITE_SPACE(ch)) {
-      do { ch = state.input.charCodeAt(++state.position); }
-      while (is_WHITE_SPACE(ch));
+      do {
+        ch = state.input.charCodeAt(++state.position);
+      } while (is_WHITE_SPACE(ch));
 
-      if (ch === 0x23/* # */) {
-        do { ch = state.input.charCodeAt(++state.position); }
-        while (!is_EOL(ch) && (ch !== 0));
+      if (ch === 0x23 /* # */) {
+        do {
+          ch = state.input.charCodeAt(++state.position);
+        } while (!is_EOL(ch) && ch !== 0);
       }
     }
 
@@ -1977,8 +2184,10 @@
 
       ch = state.input.charCodeAt(state.position);
 
-      while ((!detectedIndent || state.lineIndent < textIndent) &&
-             (ch === 0x20/* Space */)) {
+      while (
+        (!detectedIndent || state.lineIndent < textIndent) &&
+        ch === 0x20 /* Space */
+      ) {
         state.lineIndent++;
         ch = state.input.charCodeAt(++state.position);
       }
@@ -1994,12 +2203,15 @@
 
       // End of the scalar.
       if (state.lineIndent < textIndent) {
-
         // Perform the chomping.
         if (chomping === CHOMPING_KEEP) {
-          state.result += common.repeat('\n', didReadContent ? 1 + emptyLines : emptyLines);
+          state.result += common.repeat(
+            '\n',
+            didReadContent ? 1 + emptyLines : emptyLines
+          );
         } else if (chomping === CHOMPING_CLIP) {
-          if (didReadContent) { // i.e. only if the scalar is not empty.
+          if (didReadContent) {
+            // i.e. only if the scalar is not empty.
             state.result += '\n';
           }
         }
@@ -2010,33 +2222,39 @@
 
       // Folded style: use fancy rules to handle line breaks.
       if (folding) {
-
         // Lines starting with white space characters (more-indented lines) are not folded.
         if (is_WHITE_SPACE(ch)) {
           atMoreIndented = true;
           // except for the first content line (cf. Example 8.1)
-          state.result += common.repeat('\n', didReadContent ? 1 + emptyLines : emptyLines);
+          state.result += common.repeat(
+            '\n',
+            didReadContent ? 1 + emptyLines : emptyLines
+          );
 
-        // End of more-indented block.
+          // End of more-indented block.
         } else if (atMoreIndented) {
           atMoreIndented = false;
           state.result += common.repeat('\n', emptyLines + 1);
 
-        // Just one line break - perceive as the same line.
+          // Just one line break - perceive as the same line.
         } else if (emptyLines === 0) {
-          if (didReadContent) { // i.e. only if we have already read some scalar content.
+          if (didReadContent) {
+            // i.e. only if we have already read some scalar content.
             state.result += ' ';
           }
 
-        // Several line breaks - perceive as different lines.
+          // Several line breaks - perceive as different lines.
         } else {
           state.result += common.repeat('\n', emptyLines);
         }
 
-      // Literal style: just add exact number of line breaks between content lines.
+        // Literal style: just add exact number of line breaks between content lines.
       } else {
         // Keep all line breaks except the header line break.
-        state.result += common.repeat('\n', didReadContent ? 1 + emptyLines : emptyLines);
+        state.result += common.repeat(
+          '\n',
+          didReadContent ? 1 + emptyLines : emptyLines
+        );
       }
 
       didReadContent = true;
@@ -2044,7 +2262,7 @@
       emptyLines = 0;
       captureStart = state.position;
 
-      while (!is_EOL(ch) && (ch !== 0)) {
+      while (!is_EOL(ch) && ch !== 0) {
         ch = state.input.charCodeAt(++state.position);
       }
 
@@ -2055,13 +2273,13 @@
   }
 
   function readBlockSequence(state, nodeIndent) {
-    var _line,
-        _tag      = state.tag,
-        _anchor   = state.anchor,
-        _result   = [],
-        following,
-        detected  = false,
-        ch;
+    let _line;
+    const _tag = state.tag;
+    const _anchor = state.anchor;
+    const _result = [];
+    let following;
+    let detected = false;
+    let ch;
 
     // there is a leading tab before this token, so it can't be a block sequence/mapping;
     // it can still be flow sequence/mapping or a scalar
@@ -2079,7 +2297,7 @@
         throwError(state, 'tab characters must not be used in indentation');
       }
 
-      if (ch !== 0x2D/* - */) {
+      if (ch !== 0x2d /* - */) {
         break;
       }
 
@@ -2107,7 +2325,7 @@
 
       ch = state.input.charCodeAt(state.position);
 
-      if ((state.line === _line || state.lineIndent > nodeIndent) && (ch !== 0)) {
+      if ((state.line === _line || state.lineIndent > nodeIndent) && ch !== 0) {
         throwError(state, 'bad indentation of a sequence entry');
       } else if (state.lineIndent < nodeIndent) {
         break;
@@ -2125,22 +2343,22 @@
   }
 
   function readBlockMapping(state, nodeIndent, flowIndent) {
-    var following,
-        allowCompact,
-        _line,
-        _keyLine,
-        _keyLineStart,
-        _keyPos,
-        _tag          = state.tag,
-        _anchor       = state.anchor,
-        _result       = {},
-        overridableKeys = Object.create(null),
-        keyTag        = null,
-        keyNode       = null,
-        valueNode     = null,
-        atExplicitKey = false,
-        detected      = false,
-        ch;
+    let following;
+    let allowCompact;
+    let _line;
+    let _keyLine;
+    let _keyLineStart;
+    let _keyPos;
+    const _tag = state.tag;
+    const _anchor = state.anchor;
+    const _result = {};
+    const overridableKeys = Object.create(null);
+    let keyTag = null;
+    let keyNode = null;
+    let valueNode = null;
+    let atExplicitKey = false;
+    let detected = false;
+    let ch;
 
     // there is a leading tab before this token, so it can't be a block sequence/mapping;
     // it can still be flow sequence/mapping or a scalar
@@ -2165,33 +2383,46 @@
       // Explicit notation case. There are two separate blocks:
       // first for the key (denoted by "?") and second for the value (denoted by ":")
       //
-      if ((ch === 0x3F/* ? */ || ch === 0x3A/* : */) && is_WS_OR_EOL(following)) {
-
-        if (ch === 0x3F/* ? */) {
+      if (
+        (ch === 0x3f /* ? */ || ch === 0x3a /*: */) &&
+        is_WS_OR_EOL(following)
+      ) {
+        if (ch === 0x3f /* ? */) {
           if (atExplicitKey) {
-            storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, null, _keyLine, _keyLineStart, _keyPos);
+            storeMappingPair(
+              state,
+              _result,
+              overridableKeys,
+              keyTag,
+              keyNode,
+              null,
+              _keyLine,
+              _keyLineStart,
+              _keyPos
+            );
             keyTag = keyNode = valueNode = null;
           }
 
           detected = true;
           atExplicitKey = true;
           allowCompact = true;
-
         } else if (atExplicitKey) {
           // i.e. 0x3A/* : */ === character after the explicit key.
           atExplicitKey = false;
           allowCompact = true;
-
         } else {
-          throwError(state, 'incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line');
+          throwError(
+            state,
+            'incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line'
+          );
         }
 
         state.position += 1;
         ch = following;
 
-      //
-      // Implicit notation case. Flow-style node as the key first, then ":", and the value.
-      //
+        //
+        // Implicit notation case. Flow-style node as the key first, then ":", and the value.
+        //
       } else {
         _keyLine = state.line;
         _keyLineStart = state.lineStart;
@@ -2210,15 +2441,28 @@
             ch = state.input.charCodeAt(++state.position);
           }
 
-          if (ch === 0x3A/* : */) {
+          if (ch === 0x3a /* : */) {
             ch = state.input.charCodeAt(++state.position);
 
             if (!is_WS_OR_EOL(ch)) {
-              throwError(state, 'a whitespace character is expected after the key-value separator within a block mapping');
+              throwError(
+                state,
+                'a whitespace character is expected after the key-value separator within a block mapping'
+              );
             }
 
             if (atExplicitKey) {
-              storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, null, _keyLine, _keyLineStart, _keyPos);
+              storeMappingPair(
+                state,
+                _result,
+                overridableKeys,
+                keyTag,
+                keyNode,
+                null,
+                _keyLine,
+                _keyLineStart,
+                _keyPos
+              );
               keyTag = keyNode = valueNode = null;
             }
 
@@ -2227,19 +2471,21 @@
             allowCompact = false;
             keyTag = state.tag;
             keyNode = state.result;
-
           } else if (detected) {
-            throwError(state, 'can not read an implicit mapping pair; a colon is missed');
-
+            throwError(
+              state,
+              'can not read an implicit mapping pair; a colon is missed'
+            );
           } else {
             state.tag = _tag;
             state.anchor = _anchor;
             return true; // Keep the result of `composeNode`.
           }
-
         } else if (detected) {
-          throwError(state, 'can not read a block mapping entry; a multiline key may not be an implicit key');
-
+          throwError(
+            state,
+            'can not read a block mapping entry; a multiline key may not be an implicit key'
+          );
         } else {
           state.tag = _tag;
           state.anchor = _anchor;
@@ -2257,7 +2503,9 @@
           _keyPos = state.position;
         }
 
-        if (composeNode(state, nodeIndent, CONTEXT_BLOCK_OUT, true, allowCompact)) {
+        if (
+          composeNode(state, nodeIndent, CONTEXT_BLOCK_OUT, true, allowCompact)
+        ) {
           if (atExplicitKey) {
             keyNode = state.result;
           } else {
@@ -2266,7 +2514,17 @@
         }
 
         if (!atExplicitKey) {
-          storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, valueNode, _keyLine, _keyLineStart, _keyPos);
+          storeMappingPair(
+            state,
+            _result,
+            overridableKeys,
+            keyTag,
+            keyNode,
+            valueNode,
+            _keyLine,
+            _keyLineStart,
+            _keyPos
+          );
           keyTag = keyNode = valueNode = null;
         }
 
@@ -2274,7 +2532,7 @@
         ch = state.input.charCodeAt(state.position);
       }
 
-      if ((state.line === _line || state.lineIndent > nodeIndent) && (ch !== 0)) {
+      if ((state.line === _line || state.lineIndent > nodeIndent) && ch !== 0) {
         throwError(state, 'bad indentation of a mapping entry');
       } else if (state.lineIndent < nodeIndent) {
         break;
@@ -2287,7 +2545,17 @@
 
     // Special case: last mapping's node contains only the key in explicit notation.
     if (atExplicitKey) {
-      storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, null, _keyLine, _keyLineStart, _keyPos);
+      storeMappingPair(
+        state,
+        _result,
+        overridableKeys,
+        keyTag,
+        keyNode,
+        null,
+        _keyLine,
+        _keyLineStart,
+        _keyPos
+      );
     }
 
     // Expose the resulting mapping.
@@ -2302,16 +2570,16 @@
   }
 
   function readTagProperty(state) {
-    var _position,
-        isVerbatim = false,
-        isNamed    = false,
-        tagHandle,
-        tagName,
-        ch;
+    let _position;
+    let isVerbatim = false;
+    let isNamed = false;
+    let tagHandle;
+    let tagName;
+    let ch;
 
     ch = state.input.charCodeAt(state.position);
 
-    if (ch !== 0x21/* ! */) return false;
+    if (ch !== 0x21 /* ! */) return false;
 
     if (state.tag !== null) {
       throwError(state, 'duplication of a tag property');
@@ -2319,15 +2587,13 @@
 
     ch = state.input.charCodeAt(++state.position);
 
-    if (ch === 0x3C/* < */) {
+    if (ch === 0x3c /* < */) {
       isVerbatim = true;
       ch = state.input.charCodeAt(++state.position);
-
-    } else if (ch === 0x21/* ! */) {
+    } else if (ch === 0x21 /* ! */) {
       isNamed = true;
       tagHandle = '!!';
       ch = state.input.charCodeAt(++state.position);
-
     } else {
       tagHandle = '!';
     }
@@ -2335,8 +2601,9 @@
     _position = state.position;
 
     if (isVerbatim) {
-      do { ch = state.input.charCodeAt(++state.position); }
-      while (ch !== 0 && ch !== 0x3E/* > */);
+      do {
+        ch = state.input.charCodeAt(++state.position);
+      } while (ch !== 0 && ch !== 0x3e /* > */);
 
       if (state.position < state.length) {
         tagName = state.input.slice(_position, state.position);
@@ -2346,13 +2613,15 @@
       }
     } else {
       while (ch !== 0 && !is_WS_OR_EOL(ch)) {
-
-        if (ch === 0x21/* ! */) {
+        if (ch === 0x21 /* ! */) {
           if (!isNamed) {
             tagHandle = state.input.slice(_position - 1, state.position + 1);
 
             if (!PATTERN_TAG_HANDLE.test(tagHandle)) {
-              throwError(state, 'named tag handle cannot contain such characters');
+              throwError(
+                state,
+                'named tag handle cannot contain such characters'
+              );
             }
 
             isNamed = true;
@@ -2368,46 +2637,45 @@
       tagName = state.input.slice(_position, state.position);
 
       if (PATTERN_FLOW_INDICATORS.test(tagName)) {
-        throwError(state, 'tag suffix cannot contain flow indicator characters');
+        throwError(
+          state,
+          'tag suffix cannot contain flow indicator characters'
+        );
       }
     }
 
     if (tagName && !PATTERN_TAG_URI.test(tagName)) {
-      throwError(state, 'tag name cannot contain such characters: ' + tagName);
+      throwError(state, `tag name cannot contain such characters: ${tagName}`);
     }
 
     try {
       tagName = decodeURIComponent(tagName);
     } catch (err) {
-      throwError(state, 'tag name is malformed: ' + tagName);
+      throwError(state, `tag name is malformed: ${tagName}`);
     }
 
     if (isVerbatim) {
       state.tag = tagName;
-
     } else if (_hasOwnProperty$1.call(state.tagMap, tagHandle)) {
       state.tag = state.tagMap[tagHandle] + tagName;
-
     } else if (tagHandle === '!') {
-      state.tag = '!' + tagName;
-
+      state.tag = `!${tagName}`;
     } else if (tagHandle === '!!') {
-      state.tag = 'tag:yaml.org,2002:' + tagName;
-
+      state.tag = `tag:yaml.org,2002:${tagName}`;
     } else {
-      throwError(state, 'undeclared tag handle "' + tagHandle + '"');
+      throwError(state, `undeclared tag handle "${tagHandle}"`);
     }
 
     return true;
   }
 
   function readAnchorProperty(state) {
-    var _position,
-        ch;
+    let _position;
+    let ch;
 
     ch = state.input.charCodeAt(state.position);
 
-    if (ch !== 0x26/* & */) return false;
+    if (ch !== 0x26 /* & */) return false;
 
     if (state.anchor !== null) {
       throwError(state, 'duplication of an anchor property');
@@ -2421,7 +2689,10 @@
     }
 
     if (state.position === _position) {
-      throwError(state, 'name of an anchor node must contain at least one character');
+      throwError(
+        state,
+        'name of an anchor node must contain at least one character'
+      );
     }
 
     state.anchor = state.input.slice(_position, state.position);
@@ -2429,12 +2700,13 @@
   }
 
   function readAlias(state) {
-    var _position, alias,
-        ch;
+    let _position;
+    let alias;
+    let ch;
 
     ch = state.input.charCodeAt(state.position);
 
-    if (ch !== 0x2A/* * */) return false;
+    if (ch !== 0x2a /* * */) return false;
 
     ch = state.input.charCodeAt(++state.position);
     _position = state.position;
@@ -2444,13 +2716,16 @@
     }
 
     if (state.position === _position) {
-      throwError(state, 'name of an alias node must contain at least one character');
+      throwError(
+        state,
+        'name of an alias node must contain at least one character'
+      );
     }
 
     alias = state.input.slice(_position, state.position);
 
     if (!_hasOwnProperty$1.call(state.anchorMap, alias)) {
-      throwError(state, 'unidentified alias "' + alias + '"');
+      throwError(state, `unidentified alias "${alias}"`);
     }
 
     state.result = state.anchorMap[alias];
@@ -2458,32 +2733,37 @@
     return true;
   }
 
-  function composeNode(state, parentIndent, nodeContext, allowToSeek, allowCompact) {
-    var allowBlockStyles,
-        allowBlockScalars,
-        allowBlockCollections,
-        indentStatus = 1, // 1: this>parent, 0: this=parent, -1: this<parent
-        atNewLine  = false,
-        hasContent = false,
-        typeIndex,
-        typeQuantity,
-        typeList,
-        type,
-        flowIndent,
-        blockIndent;
+  function composeNode(
+    state,
+    parentIndent,
+    nodeContext,
+    allowToSeek,
+    allowCompact
+  ) {
+    let allowBlockStyles;
+    let allowBlockScalars;
+    let allowBlockCollections;
+    let indentStatus = 1; // 1: this>parent, 0: this=parent, -1: this<parent
+    let atNewLine = false;
+    let hasContent = false;
+    let typeIndex;
+    let typeQuantity;
+    let typeList;
+    let type;
+    let flowIndent;
+    let blockIndent;
 
     if (state.listener !== null) {
       state.listener('open', state);
     }
 
-    state.tag    = null;
+    state.tag = null;
     state.anchor = null;
-    state.kind   = null;
+    state.kind = null;
     state.result = null;
 
     allowBlockStyles = allowBlockScalars = allowBlockCollections =
-      CONTEXT_BLOCK_OUT === nodeContext ||
-      CONTEXT_BLOCK_IN  === nodeContext;
+      CONTEXT_BLOCK_OUT === nodeContext || CONTEXT_BLOCK_IN === nodeContext;
 
     if (allowToSeek) {
       if (skipSeparationSpace(state, true, -1)) {
@@ -2532,25 +2812,29 @@
       blockIndent = state.position - state.lineStart;
 
       if (indentStatus === 1) {
-        if (allowBlockCollections &&
+        if (
+          (allowBlockCollections &&
             (readBlockSequence(state, blockIndent) ||
-             readBlockMapping(state, blockIndent, flowIndent)) ||
-            readFlowCollection(state, flowIndent)) {
+              readBlockMapping(state, blockIndent, flowIndent))) ||
+          readFlowCollection(state, flowIndent)
+        ) {
           hasContent = true;
         } else {
-          if ((allowBlockScalars && readBlockScalar(state, flowIndent)) ||
-              readSingleQuotedScalar(state, flowIndent) ||
-              readDoubleQuotedScalar(state, flowIndent)) {
+          if (
+            (allowBlockScalars && readBlockScalar(state, flowIndent)) ||
+            readSingleQuotedScalar(state, flowIndent) ||
+            readDoubleQuotedScalar(state, flowIndent)
+          ) {
             hasContent = true;
-
           } else if (readAlias(state)) {
             hasContent = true;
 
             if (state.tag !== null || state.anchor !== null) {
               throwError(state, 'alias node should not have any properties');
             }
-
-          } else if (readPlainScalar(state, flowIndent, CONTEXT_FLOW_IN === nodeContext)) {
+          } else if (
+            readPlainScalar(state, flowIndent, CONTEXT_FLOW_IN === nodeContext)
+          ) {
             hasContent = true;
 
             if (state.tag === null) {
@@ -2565,7 +2849,8 @@
       } else if (indentStatus === 0) {
         // Special case: block sequences are allowed to have same indentation level as the parent.
         // http://www.yaml.org/spec/1.2/spec.html#id2799784
-        hasContent = allowBlockCollections && readBlockSequence(state, blockIndent);
+        hasContent =
+          allowBlockCollections && readBlockSequence(state, blockIndent);
       }
     }
 
@@ -2573,7 +2858,6 @@
       if (state.anchor !== null) {
         state.anchorMap[state.anchor] = state.result;
       }
-
     } else if (state.tag === '?') {
       // Implicit resolving is not allowed for non-scalar types, and '?'
       // non-specific tag is only automatically assigned to plain scalars.
@@ -2582,13 +2866,21 @@
       // tag, for example like this: "!<?> [0]"
       //
       if (state.result !== null && state.kind !== 'scalar') {
-        throwError(state, 'unacceptable node kind for !<?> tag; it should be "scalar", not "' + state.kind + '"');
+        throwError(
+          state,
+          `unacceptable node kind for !<?> tag; it should be "scalar", not "${state.kind}"`
+        );
       }
 
-      for (typeIndex = 0, typeQuantity = state.implicitTypes.length; typeIndex < typeQuantity; typeIndex += 1) {
+      for (
+        typeIndex = 0, typeQuantity = state.implicitTypes.length;
+        typeIndex < typeQuantity;
+        typeIndex += 1
+      ) {
         type = state.implicitTypes[typeIndex];
 
-        if (type.resolve(state.result)) { // `state.result` updated in resolver if matched
+        if (type.resolve(state.result)) {
+          // `state.result` updated in resolver if matched
           state.result = type.construct(state.result);
           state.tag = type.tag;
           if (state.anchor !== null) {
@@ -2598,15 +2890,27 @@
         }
       }
     } else if (state.tag !== '!') {
-      if (_hasOwnProperty$1.call(state.typeMap[state.kind || 'fallback'], state.tag)) {
+      if (
+        _hasOwnProperty$1.call(
+          state.typeMap[state.kind || 'fallback'],
+          state.tag
+        )
+      ) {
         type = state.typeMap[state.kind || 'fallback'][state.tag];
       } else {
         // looking for multi type
         type = null;
         typeList = state.typeMap.multi[state.kind || 'fallback'];
 
-        for (typeIndex = 0, typeQuantity = typeList.length; typeIndex < typeQuantity; typeIndex += 1) {
-          if (state.tag.slice(0, typeList[typeIndex].tag.length) === typeList[typeIndex].tag) {
+        for (
+          typeIndex = 0, typeQuantity = typeList.length;
+          typeIndex < typeQuantity;
+          typeIndex += 1
+        ) {
+          if (
+            state.tag.slice(0, typeList[typeIndex].tag.length) ===
+            typeList[typeIndex].tag
+          ) {
             type = typeList[typeIndex];
             break;
           }
@@ -2614,15 +2918,22 @@
       }
 
       if (!type) {
-        throwError(state, 'unknown tag !<' + state.tag + '>');
+        throwError(state, `unknown tag !<${state.tag}>`);
       }
 
       if (state.result !== null && type.kind !== state.kind) {
-        throwError(state, 'unacceptable node kind for !<' + state.tag + '> tag; it should be "' + type.kind + '", not "' + state.kind + '"');
+        throwError(
+          state,
+          `unacceptable node kind for !<${state.tag}> tag; it should be "${type.kind}", not "${state.kind}"`
+        );
       }
 
-      if (!type.resolve(state.result, state.tag)) { // `state.result` updated in resolver if matched
-        throwError(state, 'cannot resolve a node with !<' + state.tag + '> explicit tag');
+      if (!type.resolve(state.result, state.tag)) {
+        // `state.result` updated in resolver if matched
+        throwError(
+          state,
+          `cannot resolve a node with !<${state.tag}> explicit tag`
+        );
       } else {
         state.result = type.construct(state.result, state.tag);
         if (state.anchor !== null) {
@@ -2634,16 +2945,16 @@
     if (state.listener !== null) {
       state.listener('close', state);
     }
-    return state.tag !== null ||  state.anchor !== null || hasContent;
+    return state.tag !== null || state.anchor !== null || hasContent;
   }
 
   function readDocument(state) {
-    var documentStart = state.position,
-        _position,
-        directiveName,
-        directiveArgs,
-        hasDirectives = false,
-        ch;
+    const documentStart = state.position;
+    let _position;
+    let directiveName;
+    let directiveArgs;
+    let hasDirectives = false;
+    let ch;
 
     state.version = null;
     state.checkLineBreaks = state.legacy;
@@ -2655,7 +2966,7 @@
 
       ch = state.input.charCodeAt(state.position);
 
-      if (state.lineIndent > 0 || ch !== 0x25/* % */) {
+      if (state.lineIndent > 0 || ch !== 0x25 /* % */) {
         break;
       }
 
@@ -2671,7 +2982,10 @@
       directiveArgs = [];
 
       if (directiveName.length < 1) {
-        throwError(state, 'directive name must not be less than one character in length');
+        throwError(
+          state,
+          'directive name must not be less than one character in length'
+        );
       }
 
       while (ch !== 0) {
@@ -2679,9 +2993,10 @@
           ch = state.input.charCodeAt(++state.position);
         }
 
-        if (ch === 0x23/* # */) {
-          do { ch = state.input.charCodeAt(++state.position); }
-          while (ch !== 0 && !is_EOL(ch));
+        if (ch === 0x23 /* # */) {
+          do {
+            ch = state.input.charCodeAt(++state.position);
+          } while (ch !== 0 && !is_EOL(ch));
           break;
         }
 
@@ -2701,19 +3016,20 @@
       if (_hasOwnProperty$1.call(directiveHandlers, directiveName)) {
         directiveHandlers[directiveName](state, directiveName, directiveArgs);
       } else {
-        throwWarning(state, 'unknown document directive "' + directiveName + '"');
+        throwWarning(state, `unknown document directive "${directiveName}"`);
       }
     }
 
     skipSeparationSpace(state, true, -1);
 
-    if (state.lineIndent === 0 &&
-        state.input.charCodeAt(state.position)     === 0x2D/* - */ &&
-        state.input.charCodeAt(state.position + 1) === 0x2D/* - */ &&
-        state.input.charCodeAt(state.position + 2) === 0x2D/* - */) {
+    if (
+      state.lineIndent === 0 &&
+      state.input.charCodeAt(state.position) === 0x2d /* - */ &&
+      state.input.charCodeAt(state.position + 1) === 0x2d /* - */ &&
+      state.input.charCodeAt(state.position + 2) === 0x2d /* - */
+    ) {
       state.position += 3;
       skipSeparationSpace(state, true, -1);
-
     } else if (hasDirectives) {
       throwError(state, 'directives end mark is expected');
     }
@@ -2721,51 +3037,56 @@
     composeNode(state, state.lineIndent - 1, CONTEXT_BLOCK_OUT, false, true);
     skipSeparationSpace(state, true, -1);
 
-    if (state.checkLineBreaks &&
-        PATTERN_NON_ASCII_LINE_BREAKS.test(state.input.slice(documentStart, state.position))) {
+    if (
+      state.checkLineBreaks &&
+      PATTERN_NON_ASCII_LINE_BREAKS.test(
+        state.input.slice(documentStart, state.position)
+      )
+    ) {
       throwWarning(state, 'non-ASCII line breaks are interpreted as content');
     }
 
     state.documents.push(state.result);
 
     if (state.position === state.lineStart && testDocumentSeparator(state)) {
-
-      if (state.input.charCodeAt(state.position) === 0x2E/* . */) {
+      if (state.input.charCodeAt(state.position) === 0x2e /* . */) {
         state.position += 3;
         skipSeparationSpace(state, true, -1);
       }
       return;
     }
 
-    if (state.position < (state.length - 1)) {
-      throwError(state, 'end of the stream or a document separator is expected');
+    if (state.position < state.length - 1) {
+      throwError(
+        state,
+        'end of the stream or a document separator is expected'
+      );
     } else {
-      return;
     }
   }
 
-
   function loadDocuments(input, options) {
     input = String(input);
     options = options || {};
 
     if (input.length !== 0) {
-
       // Add tailing `\n` if not exists
-      if (input.charCodeAt(input.length - 1) !== 0x0A/* LF */ &&
-          input.charCodeAt(input.length - 1) !== 0x0D/* CR */) {
+      if (
+        input.charCodeAt(input.length - 1) !== 0x0a /* LF */ &&
+        input.charCodeAt(input.length - 1) !== 0x0d /* CR */
+      ) {
         input += '\n';
       }
 
       // Strip BOM
-      if (input.charCodeAt(0) === 0xFEFF) {
+      if (input.charCodeAt(0) === 0xfeff) {
         input = input.slice(1);
       }
     }
 
-    var state = new State$1(input, options);
+    const state = new State$1(input, options);
 
-    var nullpos = input.indexOf('\0');
+    const nullpos = input.indexOf('\0');
 
     if (nullpos !== -1) {
       state.position = nullpos;
@@ -2775,120 +3096,139 @@
     // Use 0 as string terminator. That significantly simplifies bounds check.
     state.input += '\0';
 
-    while (state.input.charCodeAt(state.position) === 0x20/* Space */) {
+    while (state.input.charCodeAt(state.position) === 0x20 /* Space */) {
       state.lineIndent += 1;
       state.position += 1;
     }
 
-    while (state.position < (state.length - 1)) {
+    while (state.position < state.length - 1) {
       readDocument(state);
     }
 
     return state.documents;
   }
 
-
   function loadAll$1(input, iterator, options) {
-    if (iterator !== null && typeof iterator === 'object' && typeof options === 'undefined') {
+    if (
+      iterator !== null &&
+      typeof iterator === 'object' &&
+      typeof options === 'undefined'
+    ) {
       options = iterator;
       iterator = null;
     }
 
-    var documents = loadDocuments(input, options);
+    const documents = loadDocuments(input, options);
 
     if (typeof iterator !== 'function') {
       return documents;
     }
 
-    for (var index = 0, length = documents.length; index < length; index += 1) {
+    for (let index = 0, { length } = documents; index < length; index += 1) {
       iterator(documents[index]);
     }
   }
 
-
   function load$1(input, options) {
-    var documents = loadDocuments(input, options);
+    const documents = loadDocuments(input, options);
 
     if (documents.length === 0) {
-      /*eslint-disable no-undefined*/
+      /* eslint-disable no-undefined */
       return undefined;
     } else if (documents.length === 1) {
       return documents[0];
     }
-    throw new exception('expected a single document in the stream, but found more');
+    throw new exception(
+      'expected a single document in the stream, but found more'
+    );
   }
 
+  const loadAll_1 = loadAll$1;
+  const load_1 = load$1;
 
-  var loadAll_1 = loadAll$1;
-  var load_1    = load$1;
-
-  var loader = {
-  	loadAll: loadAll_1,
-  	load: load_1
+  const loader = {
+    loadAll: loadAll_1,
+    load: load_1,
   };
 
-  /*eslint-disable no-use-before-define*/
-
-
-
-
-
-  var _toString       = Object.prototype.toString;
-  var _hasOwnProperty = Object.prototype.hasOwnProperty;
-
-  var CHAR_BOM                  = 0xFEFF;
-  var CHAR_TAB                  = 0x09; /* Tab */
-  var CHAR_LINE_FEED            = 0x0A; /* LF */
-  var CHAR_CARRIAGE_RETURN      = 0x0D; /* CR */
-  var CHAR_SPACE                = 0x20; /* Space */
-  var CHAR_EXCLAMATION          = 0x21; /* ! */
-  var CHAR_DOUBLE_QUOTE         = 0x22; /* " */
-  var CHAR_SHARP                = 0x23; /* # */
-  var CHAR_PERCENT              = 0x25; /* % */
-  var CHAR_AMPERSAND            = 0x26; /* & */
-  var CHAR_SINGLE_QUOTE         = 0x27; /* ' */
-  var CHAR_ASTERISK             = 0x2A; /* * */
-  var CHAR_COMMA                = 0x2C; /* , */
-  var CHAR_MINUS                = 0x2D; /* - */
-  var CHAR_COLON                = 0x3A; /* : */
-  var CHAR_EQUALS               = 0x3D; /* = */
-  var CHAR_GREATER_THAN         = 0x3E; /* > */
-  var CHAR_QUESTION             = 0x3F; /* ? */
-  var CHAR_COMMERCIAL_AT        = 0x40; /* @ */
-  var CHAR_LEFT_SQUARE_BRACKET  = 0x5B; /* [ */
-  var CHAR_RIGHT_SQUARE_BRACKET = 0x5D; /* ] */
-  var CHAR_GRAVE_ACCENT         = 0x60; /* ` */
-  var CHAR_LEFT_CURLY_BRACKET   = 0x7B; /* { */
-  var CHAR_VERTICAL_LINE        = 0x7C; /* | */
-  var CHAR_RIGHT_CURLY_BRACKET  = 0x7D; /* } */
-
-  var ESCAPE_SEQUENCES = {};
-
-  ESCAPE_SEQUENCES[0x00]   = '\\0';
-  ESCAPE_SEQUENCES[0x07]   = '\\a';
-  ESCAPE_SEQUENCES[0x08]   = '\\b';
-  ESCAPE_SEQUENCES[0x09]   = '\\t';
-  ESCAPE_SEQUENCES[0x0A]   = '\\n';
-  ESCAPE_SEQUENCES[0x0B]   = '\\v';
-  ESCAPE_SEQUENCES[0x0C]   = '\\f';
-  ESCAPE_SEQUENCES[0x0D]   = '\\r';
-  ESCAPE_SEQUENCES[0x1B]   = '\\e';
-  ESCAPE_SEQUENCES[0x22]   = '\\"';
-  ESCAPE_SEQUENCES[0x5C]   = '\\\\';
-  ESCAPE_SEQUENCES[0x85]   = '\\N';
-  ESCAPE_SEQUENCES[0xA0]   = '\\_';
+  /* eslint-disable no-use-before-define */
+
+  const _toString = Object.prototype.toString;
+  const _hasOwnProperty = Object.prototype.hasOwnProperty;
+
+  const CHAR_BOM = 0xfeff;
+  const CHAR_TAB = 0x09; /* Tab */
+  const CHAR_LINE_FEED = 0x0a; /* LF */
+  const CHAR_CARRIAGE_RETURN = 0x0d; /* CR */
+  const CHAR_SPACE = 0x20; /* Space */
+  const CHAR_EXCLAMATION = 0x21; /* ! */
+  const CHAR_DOUBLE_QUOTE = 0x22; /* " */
+  const CHAR_SHARP = 0x23; /* # */
+  const CHAR_PERCENT = 0x25; /* % */
+  const CHAR_AMPERSAND = 0x26; /* & */
+  const CHAR_SINGLE_QUOTE = 0x27; /* ' */
+  const CHAR_ASTERISK = 0x2a; /* * */
+  const CHAR_COMMA = 0x2c; /* , */
+  const CHAR_MINUS = 0x2d; /* - */
+  const CHAR_COLON = 0x3a; /* : */
+  const CHAR_EQUALS = 0x3d; /* = */
+  const CHAR_GREATER_THAN = 0x3e; /* > */
+  const CHAR_QUESTION = 0x3f; /* ? */
+  const CHAR_COMMERCIAL_AT = 0x40; /* @ */
+  const CHAR_LEFT_SQUARE_BRACKET = 0x5b; /* [ */
+  const CHAR_RIGHT_SQUARE_BRACKET = 0x5d; /* ] */
+  const CHAR_GRAVE_ACCENT = 0x60; /* ` */
+  const CHAR_LEFT_CURLY_BRACKET = 0x7b; /* { */
+  const CHAR_VERTICAL_LINE = 0x7c; /* | */
+  const CHAR_RIGHT_CURLY_BRACKET = 0x7d; /* } */
+
+  const ESCAPE_SEQUENCES = {};
+
+  ESCAPE_SEQUENCES[0x00] = '\\0';
+  ESCAPE_SEQUENCES[0x07] = '\\a';
+  ESCAPE_SEQUENCES[0x08] = '\\b';
+  ESCAPE_SEQUENCES[0x09] = '\\t';
+  ESCAPE_SEQUENCES[0x0a] = '\\n';
+  ESCAPE_SEQUENCES[0x0b] = '\\v';
+  ESCAPE_SEQUENCES[0x0c] = '\\f';
+  ESCAPE_SEQUENCES[0x0d] = '\\r';
+  ESCAPE_SEQUENCES[0x1b] = '\\e';
+  ESCAPE_SEQUENCES[0x22] = '\\"';
+  ESCAPE_SEQUENCES[0x5c] = '\\\\';
+  ESCAPE_SEQUENCES[0x85] = '\\N';
+  ESCAPE_SEQUENCES[0xa0] = '\\_';
   ESCAPE_SEQUENCES[0x2028] = '\\L';
   ESCAPE_SEQUENCES[0x2029] = '\\P';
 
-  var DEPRECATED_BOOLEANS_SYNTAX = [
-    'y', 'Y', 'yes', 'Yes', 'YES', 'on', 'On', 'ON',
-    'n', 'N', 'no', 'No', 'NO', 'off', 'Off', 'OFF'
+  const DEPRECATED_BOOLEANS_SYNTAX = [
+    'y',
+    'Y',
+    'yes',
+    'Yes',
+    'YES',
+    'on',
+    'On',
+    'ON',
+    'n',
+    'N',
+    'no',
+    'No',
+    'NO',
+    'off',
+    'Off',
+    'OFF',
   ];
 
-  var DEPRECATED_BASE60_SYNTAX = /^[-+]?[0-9_]+(?::[0-9_]+)+(?:\.[0-9_]*)?$/;
+  const DEPRECATED_BASE60_SYNTAX = /^[-+]?[0-9_]+(?::[0-9_]+)+(?:\.[0-9_]*)?$/;
 
   function compileStyleMap(schema, map) {
-    var result, keys, index, length, tag, style, type;
+    let result;
+    let keys;
+    let index;
+    let length;
+    let tag;
+    let style;
+    let type;
 
     if (map === null) return {};
 
@@ -2900,9 +3240,9 @@
       style = String(map[tag]);
 
       if (tag.slice(0, 2) === '!!') {
-        tag = 'tag:yaml.org,2002:' + tag.slice(2);
+        tag = `tag:yaml.org,2002:${tag.slice(2)}`;
       }
-      type = schema.compiledTypeMap['fallback'][tag];
+      type = schema.compiledTypeMap.fallback[tag];
 
       if (type && _hasOwnProperty.call(type.styleAliases, style)) {
         style = type.styleAliases[style];
@@ -2915,45 +3255,52 @@
   }
 
   function encodeHex(character) {
-    var string, handle, length;
+    let string;
+    let handle;
+    let length;
 
     string = character.toString(16).toUpperCase();
 
-    if (character <= 0xFF) {
+    if (character <= 0xff) {
       handle = 'x';
       length = 2;
-    } else if (character <= 0xFFFF) {
+    } else if (character <= 0xffff) {
       handle = 'u';
       length = 4;
-    } else if (character <= 0xFFFFFFFF) {
+    } else if (character <= 0xffffffff) {
       handle = 'U';
       length = 8;
     } else {
-      throw new exception('code point within a string may not be greater than 0xFFFFFFFF');
+      throw new exception(
+        'code point within a string may not be greater than 0xFFFFFFFF'
+      );
     }
 
-    return '\\' + handle + common.repeat('0', length - string.length) + string;
+    return `\\${handle}${common.repeat('0', length - string.length)}${string}`;
   }
 
-
-  var QUOTING_TYPE_SINGLE = 1,
-      QUOTING_TYPE_DOUBLE = 2;
+  const QUOTING_TYPE_SINGLE = 1;
+  const QUOTING_TYPE_DOUBLE = 2;
 
   function State(options) {
-    this.schema        = options['schema'] || _default;
-    this.indent        = Math.max(1, (options['indent'] || 2));
-    this.noArrayIndent = options['noArrayIndent'] || false;
-    this.skipInvalid   = options['skipInvalid'] || false;
-    this.flowLevel     = (common.isNothing(options['flowLevel']) ? -1 : options['flowLevel']);
-    this.styleMap      = compileStyleMap(this.schema, options['styles'] || null);
-    this.sortKeys      = options['sortKeys'] || false;
-    this.lineWidth     = options['lineWidth'] || 80;
-    this.noRefs        = options['noRefs'] || false;
-    this.noCompatMode  = options['noCompatMode'] || false;
-    this.condenseFlow  = options['condenseFlow'] || false;
-    this.quotingType   = options['quotingType'] === '"' ? QUOTING_TYPE_DOUBLE : QUOTING_TYPE_SINGLE;
-    this.forceQuotes   = options['forceQuotes'] || false;
-    this.replacer      = typeof options['replacer'] === 'function' ? options['replacer'] : null;
+    this.schema = options.schema || _default;
+    this.indent = Math.max(1, options.indent || 2);
+    this.noArrayIndent = options.noArrayIndent || false;
+    this.skipInvalid = options.skipInvalid || false;
+    this.flowLevel = common.isNothing(options.flowLevel)
+      ? -1
+      : options.flowLevel;
+    this.styleMap = compileStyleMap(this.schema, options.styles || null);
+    this.sortKeys = options.sortKeys || false;
+    this.lineWidth = options.lineWidth || 80;
+    this.noRefs = options.noRefs || false;
+    this.noCompatMode = options.noCompatMode || false;
+    this.condenseFlow = options.condenseFlow || false;
+    this.quotingType =
+      options.quotingType === '"' ? QUOTING_TYPE_DOUBLE : QUOTING_TYPE_SINGLE;
+    this.forceQuotes = options.forceQuotes || false;
+    this.replacer =
+      typeof options.replacer === 'function' ? options.replacer : null;
 
     this.implicitTypes = this.schema.compiledImplicit;
     this.explicitTypes = this.schema.compiledExplicit;
@@ -2967,12 +3314,12 @@
 
   // Indents every line in a string. Empty lines (\n only) are not indented.
   function indentString(string, spaces) {
-    var ind = common.repeat(' ', spaces),
-        position = 0,
-        next = -1,
-        result = '',
-        line,
-        length = string.length;
+    const ind = common.repeat(' ', spaces);
+    let position = 0;
+    let next = -1;
+    let result = '';
+    let line;
+    const { length } = string;
 
     while (position < length) {
       next = string.indexOf('\n', position);
@@ -2993,13 +3340,19 @@
   }
 
   function generateNextLine(state, level) {
-    return '\n' + common.repeat(' ', state.indent * level);
+    return `\n${common.repeat(' ', state.indent * level)}`;
   }
 
   function testImplicitResolving(state, str) {
-    var index, length, type;
-
-    for (index = 0, length = state.implicitTypes.length; index < length; index += 1) {
+    let index;
+    let length;
+    let type;
+
+    for (
+      index = 0, length = state.implicitTypes.length;
+      index < length;
+      index += 1
+    ) {
       type = state.implicitTypes[index];
 
       if (type.resolve(str)) {
@@ -3020,10 +3373,12 @@
   // should also be escaped. [However,] This isn’t mandatory"
   // Derived from nb-char - \t - #x85 - #xA0 - #x2028 - #x2029.
   function isPrintable(c) {
-    return  (0x00020 <= c && c <= 0x00007E)
-        || ((0x000A1 <= c && c <= 0x00D7FF) && c !== 0x2028 && c !== 0x2029)
-        || ((0x0E000 <= c && c <= 0x00FFFD) && c !== CHAR_BOM)
-        ||  (0x10000 <= c && c <= 0x10FFFF);
+    return (
+      (c >= 0x00020 && c <= 0x00007e) ||
+      (c >= 0x000a1 && c <= 0x00d7ff && c !== 0x2028 && c !== 0x2029) ||
+      (c >= 0x0e000 && c <= 0x00fffd && c !== CHAR_BOM) ||
+      (c >= 0x10000 && c <= 0x10ffff)
+    );
   }
 
   // [34] ns-char ::= nb-char - s-white
@@ -3032,11 +3387,13 @@
   // Including s-white (for some reason, examples doesn't match specs in this aspect)
   // ns-char ::= c-printable - b-line-feed - b-carriage-return - c-byte-order-mark
   function isNsCharOrWhitespace(c) {
-    return isPrintable(c)
-      && c !== CHAR_BOM
+    return (
+      isPrintable(c) &&
+      c !== CHAR_BOM &&
       // - b-char
-      && c !== CHAR_CARRIAGE_RETURN
-      && c !== CHAR_LINE_FEED;
+      c !== CHAR_CARRIAGE_RETURN &&
+      c !== CHAR_LINE_FEED
+    );
   }
 
   // [127]  ns-plain-safe(c) ::= c = flow-out  ⇒ ns-plain-safe-out
@@ -3049,25 +3406,25 @@
   //                            | ( /* An ns-char preceding */ “#” )
   //                            | ( “:” /* Followed by an ns-plain-safe(c) */ )
   function isPlainSafe(c, prev, inblock) {
-    var cIsNsCharOrWhitespace = isNsCharOrWhitespace(c);
-    var cIsNsChar = cIsNsCharOrWhitespace && !isWhitespace(c);
+    const cIsNsCharOrWhitespace = isNsCharOrWhitespace(c);
+    const cIsNsChar = cIsNsCharOrWhitespace && !isWhitespace(c);
     return (
       // ns-plain-safe
-      inblock ? // c = flow-in
-        cIsNsCharOrWhitespace
-        : cIsNsCharOrWhitespace
+      ((inblock // c = flow-in
+        ? cIsNsCharOrWhitespace
+        : cIsNsCharOrWhitespace &&
           // - c-flow-indicator
-          && c !== CHAR_COMMA
-          && c !== CHAR_LEFT_SQUARE_BRACKET
-          && c !== CHAR_RIGHT_SQUARE_BRACKET
-          && c !== CHAR_LEFT_CURLY_BRACKET
-          && c !== CHAR_RIGHT_CURLY_BRACKET
-    )
+          c !== CHAR_COMMA &&
+          c !== CHAR_LEFT_SQUARE_BRACKET &&
+          c !== CHAR_RIGHT_SQUARE_BRACKET &&
+          c !== CHAR_LEFT_CURLY_BRACKET &&
+          c !== CHAR_RIGHT_CURLY_BRACKET) &&
       // ns-plain-char
-      && c !== CHAR_SHARP // false on '#'
-      && !(prev === CHAR_COLON && !cIsNsChar) // false on ': '
-      || (isNsCharOrWhitespace(prev) && !isWhitespace(prev) && c === CHAR_SHARP) // change to true on '[^ ]#'
-      || (prev === CHAR_COLON && cIsNsChar); // change to true on ':[^ ]'
+      c !== CHAR_SHARP && // false on '#'
+        !(prev === CHAR_COLON && !cIsNsChar)) || // false on ': '
+      (isNsCharOrWhitespace(prev) && !isWhitespace(prev) && c === CHAR_SHARP) || // change to true on '[^ ]#'
+      (prev === CHAR_COLON && cIsNsChar)
+    ); // change to true on ':[^ ]'
   }
 
   // Simplified test for values allowed as the first character in plain style.
@@ -3075,32 +3432,35 @@
     // Uses a subset of ns-char - c-indicator
     // where ns-char = nb-char - s-white.
     // No support of ( ( “?” | “:” | “-” ) /* Followed by an ns-plain-safe(c)) */ ) part
-    return isPrintable(c) && c !== CHAR_BOM
-      && !isWhitespace(c) // - s-white
+    return (
+      isPrintable(c) &&
+      c !== CHAR_BOM &&
+      !isWhitespace(c) && // - s-white
       // - (c-indicator ::=
       // “-” | “?” | “:” | “,” | “[” | “]” | “{” | “}”
-      && c !== CHAR_MINUS
-      && c !== CHAR_QUESTION
-      && c !== CHAR_COLON
-      && c !== CHAR_COMMA
-      && c !== CHAR_LEFT_SQUARE_BRACKET
-      && c !== CHAR_RIGHT_SQUARE_BRACKET
-      && c !== CHAR_LEFT_CURLY_BRACKET
-      && c !== CHAR_RIGHT_CURLY_BRACKET
+      c !== CHAR_MINUS &&
+      c !== CHAR_QUESTION &&
+      c !== CHAR_COLON &&
+      c !== CHAR_COMMA &&
+      c !== CHAR_LEFT_SQUARE_BRACKET &&
+      c !== CHAR_RIGHT_SQUARE_BRACKET &&
+      c !== CHAR_LEFT_CURLY_BRACKET &&
+      c !== CHAR_RIGHT_CURLY_BRACKET &&
       // | “#” | “&” | “*” | “!” | “|” | “=” | “>” | “'” | “"”
-      && c !== CHAR_SHARP
-      && c !== CHAR_AMPERSAND
-      && c !== CHAR_ASTERISK
-      && c !== CHAR_EXCLAMATION
-      && c !== CHAR_VERTICAL_LINE
-      && c !== CHAR_EQUALS
-      && c !== CHAR_GREATER_THAN
-      && c !== CHAR_SINGLE_QUOTE
-      && c !== CHAR_DOUBLE_QUOTE
+      c !== CHAR_SHARP &&
+      c !== CHAR_AMPERSAND &&
+      c !== CHAR_ASTERISK &&
+      c !== CHAR_EXCLAMATION &&
+      c !== CHAR_VERTICAL_LINE &&
+      c !== CHAR_EQUALS &&
+      c !== CHAR_GREATER_THAN &&
+      c !== CHAR_SINGLE_QUOTE &&
+      c !== CHAR_DOUBLE_QUOTE &&
       // | “%” | “@” | “`”)
-      && c !== CHAR_PERCENT
-      && c !== CHAR_COMMERCIAL_AT
-      && c !== CHAR_GRAVE_ACCENT;
+      c !== CHAR_PERCENT &&
+      c !== CHAR_COMMERCIAL_AT &&
+      c !== CHAR_GRAVE_ACCENT
+    );
   }
 
   // Simplified test for values allowed as the last character in plain style.
@@ -3111,12 +3471,13 @@
 
   // Same as 'string'.codePointAt(pos), but works in older browsers.
   function codePointAt(string, pos) {
-    var first = string.charCodeAt(pos), second;
-    if (first >= 0xD800 && first <= 0xDBFF && pos + 1 < string.length) {
+    const first = string.charCodeAt(pos);
+    let second;
+    if (first >= 0xd800 && first <= 0xdbff && pos + 1 < string.length) {
       second = string.charCodeAt(pos + 1);
-      if (second >= 0xDC00 && second <= 0xDFFF) {
+      if (second >= 0xdc00 && second <= 0xdfff) {
         // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
-        return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+        return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x10000;
       }
     }
     return first;
@@ -3124,15 +3485,15 @@
 
   // Determines whether block indentation indicator is required.
   function needIndentIndicator(string) {
-    var leadingSpaceRe = /^\n* /;
+    const leadingSpaceRe = /^\n* /;
     return leadingSpaceRe.test(string);
   }
 
-  var STYLE_PLAIN   = 1,
-      STYLE_SINGLE  = 2,
-      STYLE_LITERAL = 3,
-      STYLE_FOLDED  = 4,
-      STYLE_DOUBLE  = 5;
+  const STYLE_PLAIN = 1;
+  const STYLE_SINGLE = 2;
+  const STYLE_LITERAL = 3;
+  const STYLE_FOLDED = 4;
+  const STYLE_DOUBLE = 5;
 
   // Determines which scalar styles are possible and returns the preferred style.
   // lineWidth = -1 => no limit.
@@ -3141,23 +3502,31 @@
   //    STYLE_PLAIN or STYLE_SINGLE => no \n are in the string.
   //    STYLE_LITERAL => no lines are suitable for folding (or lineWidth is -1).
   //    STYLE_FOLDED => a line > lineWidth and can be folded (and lineWidth != -1).
-  function chooseScalarStyle(string, singleLineOnly, indentPerLevel, lineWidth,
-    testAmbiguousType, quotingType, forceQuotes, inblock) {
-
-    var i;
-    var char = 0;
-    var prevChar = null;
-    var hasLineBreak = false;
-    var hasFoldableLine = false; // only checked if shouldTrackWidth
-    var shouldTrackWidth = lineWidth !== -1;
-    var previousLineBreak = -1; // count the first line correctly
-    var plain = isPlainSafeFirst(codePointAt(string, 0))
-            && isPlainSafeLast(codePointAt(string, string.length - 1));
+  function chooseScalarStyle(
+    string,
+    singleLineOnly,
+    indentPerLevel,
+    lineWidth,
+    testAmbiguousType,
+    quotingType,
+    forceQuotes,
+    inblock
+  ) {
+    let i;
+    let char = 0;
+    let prevChar = null;
+    let hasLineBreak = false;
+    let hasFoldableLine = false; // only checked if shouldTrackWidth
+    const shouldTrackWidth = lineWidth !== -1;
+    let previousLineBreak = -1; // count the first line correctly
+    let plain =
+      isPlainSafeFirst(codePointAt(string, 0)) &&
+      isPlainSafeLast(codePointAt(string, string.length - 1));
 
     if (singleLineOnly || forceQuotes) {
       // Case: no block styles.
       // Check for disallowed characters to rule out plain and single.
-      for (i = 0; i < string.length; char >= 0x10000 ? i += 2 : i++) {
+      for (i = 0; i < string.length; char >= 0x10000 ? (i += 2) : i++) {
         char = codePointAt(string, i);
         if (!isPrintable(char)) {
           return STYLE_DOUBLE;
@@ -3167,16 +3536,17 @@
       }
     } else {
       // Case: block styles permitted.
-      for (i = 0; i < string.length; char >= 0x10000 ? i += 2 : i++) {
+      for (i = 0; i < string.length; char >= 0x10000 ? (i += 2) : i++) {
         char = codePointAt(string, i);
         if (char === CHAR_LINE_FEED) {
           hasLineBreak = true;
           // Check if any line can be folded.
           if (shouldTrackWidth) {
-            hasFoldableLine = hasFoldableLine ||
+            hasFoldableLine =
+              hasFoldableLine ||
               // Foldable line = too long, and not more-indented.
               (i - previousLineBreak - 1 > lineWidth &&
-               string[previousLineBreak + 1] !== ' ');
+                string[previousLineBreak + 1] !== ' ');
             previousLineBreak = i;
           }
         } else if (!isPrintable(char)) {
@@ -3186,9 +3556,11 @@
         prevChar = char;
       }
       // in case the end is missing a \n
-      hasFoldableLine = hasFoldableLine || (shouldTrackWidth &&
-        (i - previousLineBreak - 1 > lineWidth &&
-         string[previousLineBreak + 1] !== ' '));
+      hasFoldableLine =
+        hasFoldableLine ||
+        (shouldTrackWidth &&
+          i - previousLineBreak - 1 > lineWidth &&
+          string[previousLineBreak + 1] !== ' ');
     }
     // Although every style can represent \n without escaping, prefer block styles
     // for multiline, since they're more readable and they don't add empty lines.
@@ -3220,17 +3592,22 @@
   //    • Ending newline    => removed then restored.
   //  Importantly, this keeps the "+" chomp indicator from gaining an extra line.
   function writeScalar(state, string, level, iskey, inblock) {
-    state.dump = (function () {
+    state.dump = (function() {
       if (string.length === 0) {
         return state.quotingType === QUOTING_TYPE_DOUBLE ? '""' : "''";
       }
       if (!state.noCompatMode) {
-        if (DEPRECATED_BOOLEANS_SYNTAX.indexOf(string) !== -1 || DEPRECATED_BASE60_SYNTAX.test(string)) {
-          return state.quotingType === QUOTING_TYPE_DOUBLE ? ('"' + string + '"') : ("'" + string + "'");
+        if (
+          DEPRECATED_BOOLEANS_SYNTAX.indexOf(string) !== -1 ||
+          DEPRECATED_BASE60_SYNTAX.test(string)
+        ) {
+          return state.quotingType === QUOTING_TYPE_DOUBLE
+            ? `"${string}"`
+            : `'${string}'`;
         }
       }
 
-      var indent = state.indent * Math.max(1, level); // no 0-indent scalars
+      const indent = state.indent * Math.max(1, level); // no 0-indent scalars
       // As indentation gets deeper, let the width decrease monotonically
       // to the lower bound min(state.lineWidth, 40).
       // Note that this implies
@@ -3238,48 +3615,65 @@
       //  state.lineWidth > 40 + state.indent: width decreases until the lower bound.
       // This behaves better than a constant minimum width which disallows narrower options,
       // or an indent threshold which causes the width to suddenly increase.
-      var lineWidth = state.lineWidth === -1
-        ? -1 : Math.max(Math.min(state.lineWidth, 40), state.lineWidth - indent);
+      const lineWidth =
+        state.lineWidth === -1
+          ? -1
+          : Math.max(Math.min(state.lineWidth, 40), state.lineWidth - indent);
 
       // Without knowing if keys are implicit/explicit, assume implicit for safety.
-      var singleLineOnly = iskey
+      const singleLineOnly =
+        iskey ||
         // No block styles in flow mode.
-        || (state.flowLevel > -1 && level >= state.flowLevel);
+        (state.flowLevel > -1 && level >= state.flowLevel);
       function testAmbiguity(string) {
         return testImplicitResolving(state, string);
       }
 
-      switch (chooseScalarStyle(string, singleLineOnly, state.indent, lineWidth,
-        testAmbiguity, state.quotingType, state.forceQuotes && !iskey, inblock)) {
-
+      switch (
+        chooseScalarStyle(
+          string,
+          singleLineOnly,
+          state.indent,
+          lineWidth,
+          testAmbiguity,
+          state.quotingType,
+          state.forceQuotes && !iskey,
+          inblock
+        )
+      ) {
         case STYLE_PLAIN:
           return string;
         case STYLE_SINGLE:
-          return "'" + string.replace(/'/g, "''") + "'";
+          return `'${string.replace(/'/g, "''")}'`;
         case STYLE_LITERAL:
-          return '|' + blockHeader(string, state.indent)
-            + dropEndingNewline(indentString(string, indent));
+          return `|${blockHeader(string, state.indent)}${dropEndingNewline(
+            indentString(string, indent)
+          )}`;
         case STYLE_FOLDED:
-          return '>' + blockHeader(string, state.indent)
-            + dropEndingNewline(indentString(foldString(string, lineWidth), indent));
+          return `>${blockHeader(string, state.indent)}${dropEndingNewline(
+            indentString(foldString(string, lineWidth), indent)
+          )}`;
         case STYLE_DOUBLE:
-          return '"' + escapeString(string) + '"';
+          return `"${escapeString(string)}"`;
         default:
           throw new exception('impossible error: invalid scalar style');
       }
-    }());
+    })();
   }
 
   // Pre-conditions: string is valid for a block scalar, 1 <= indentPerLevel <= 9.
   function blockHeader(string, indentPerLevel) {
-    var indentIndicator = needIndentIndicator(string) ? String(indentPerLevel) : '';
+    const indentIndicator = needIndentIndicator(string)
+      ? String(indentPerLevel)
+      : '';
 
     // note the special case: the string '\n' counts as a "trailing" empty line.
-    var clip =          string[string.length - 1] === '\n';
-    var keep = clip && (string[string.length - 2] === '\n' || string === '\n');
-    var chomp = keep ? '+' : (clip ? '' : '-');
+    const clip = string[string.length - 1] === '\n';
+    const keep =
+      clip && (string[string.length - 2] === '\n' || string === '\n');
+    const chomp = keep ? '+' : clip ? '' : '-';
 
-    return indentIndicator + chomp + '\n';
+    return `${indentIndicator + chomp}\n`;
   }
 
   // (See the note for writeScalar.)
@@ -3294,28 +3688,29 @@
     // unless they're before or after a more-indented line, or at the very
     // beginning or end, in which case $k$ maps to $k$.
     // Therefore, parse each chunk as newline(s) followed by a content line.
-    var lineRe = /(\n+)([^\n]*)/g;
+    const lineRe = /(\n+)([^\n]*)/g;
 
     // first line (possibly an empty line)
-    var result = (function () {
-      var nextLF = string.indexOf('\n');
+    let result = (function() {
+      let nextLF = string.indexOf('\n');
       nextLF = nextLF !== -1 ? nextLF : string.length;
       lineRe.lastIndex = nextLF;
       return foldLine(string.slice(0, nextLF), width);
-    }());
+    })();
     // If we haven't reached the first content line yet, don't add an extra \n.
-    var prevMoreIndented = string[0] === '\n' || string[0] === ' ';
-    var moreIndented;
+    let prevMoreIndented = string[0] === '\n' || string[0] === ' ';
+    let moreIndented;
 
     // rest of the lines
-    var match;
+    let match;
     while ((match = lineRe.exec(string))) {
-      var prefix = match[1], line = match[2];
-      moreIndented = (line[0] === ' ');
-      result += prefix
-        + (!prevMoreIndented && !moreIndented && line !== ''
-          ? '\n' : '')
-        + foldLine(line, width);
+      const prefix = match[1];
+      const line = match[2];
+      moreIndented = line[0] === ' ';
+      result +=
+        prefix +
+        (!prevMoreIndented && !moreIndented && line !== '' ? '\n' : '') +
+        foldLine(line, width);
       prevMoreIndented = moreIndented;
     }
 
@@ -3330,11 +3725,14 @@
     if (line === '' || line[0] === ' ') return line;
 
     // Since a more-indented line adds a \n, breaks can't be followed by a space.
-    var breakRe = / [^ ]/g; // note: the match index will always be <= length-2.
-    var match;
+    const breakRe = / [^ ]/g; // note: the match index will always be <= length-2.
+    let match;
     // start is an inclusive index. end, curr, and next are exclusive.
-    var start = 0, end, curr = 0, next = 0;
-    var result = '';
+    let start = 0;
+    let end;
+    let curr = 0;
+    let next = 0;
+    let result = '';
 
     // Invariants: 0 <= start <= length-1.
     //   0 <= curr <= next <= max(0, length-2). curr - start <= width.
@@ -3344,10 +3742,10 @@
       next = match.index;
       // maintain invariant: curr - start <= width
       if (next - start > width) {
-        end = (curr > start) ? curr : next; // derive end <= length-2
-        result += '\n' + line.slice(start, end);
+        end = curr > start ? curr : next; // derive end <= length-2
+        result += `\n${line.slice(start, end)}`;
         // skip the space that was output as \n
-        start = end + 1;                    // derive start <= length-1
+        start = end + 1; // derive start <= length-1
       }
       curr = next;
     }
@@ -3357,7 +3755,7 @@
     result += '\n';
     // Insert a break if the remainder is too long and there is a break available.
     if (line.length - start > width && curr > start) {
-      result += line.slice(start, curr) + '\n' + line.slice(curr + 1);
+      result += `${line.slice(start, curr)}\n${line.slice(curr + 1)}`;
     } else {
       result += line.slice(start);
     }
@@ -3367,11 +3765,11 @@
 
   // Escapes a double-quoted string.
   function escapeString(string) {
-    var result = '';
-    var char = 0;
-    var escapeSeq;
+    let result = '';
+    let char = 0;
+    let escapeSeq;
 
-    for (var i = 0; i < string.length; char >= 0x10000 ? i += 2 : i++) {
+    for (let i = 0; i < string.length; char >= 0x10000 ? (i += 2) : i++) {
       char = codePointAt(string, i);
       escapeSeq = ESCAPE_SEQUENCES[char];
 
@@ -3387,11 +3785,11 @@
   }
 
   function writeFlowSequence(state, level, object) {
-    var _result = '',
-        _tag    = state.tag,
-        index,
-        length,
-        value;
+    let _result = '';
+    const _tag = state.tag;
+    let index;
+    let length;
+    let value;
 
     for (index = 0, length = object.length; index < length; index += 1) {
       value = object[index];
@@ -3401,25 +3799,26 @@
       }
 
       // Write only valid elements, put null instead of invalid elements.
-      if (writeNode(state, level, value, false, false) ||
-          (typeof value === 'undefined' &&
-           writeNode(state, level, null, false, false))) {
-
-        if (_result !== '') _result += ',' + (!state.condenseFlow ? ' ' : '');
+      if (
+        writeNode(state, level, value, false, false) ||
+        (typeof value === 'undefined' &&
+          writeNode(state, level, null, false, false))
+      ) {
+        if (_result !== '') _result += `,${!state.condenseFlow ? ' ' : ''}`;
         _result += state.dump;
       }
     }
 
     state.tag = _tag;
-    state.dump = '[' + _result + ']';
+    state.dump = `[${_result}]`;
   }
 
   function writeBlockSequence(state, level, object, compact) {
-    var _result = '',
-        _tag    = state.tag,
-        index,
-        length,
-        value;
+    let _result = '';
+    const _tag = state.tag;
+    let index;
+    let length;
+    let value;
 
     for (index = 0, length = object.length; index < length; index += 1) {
       value = object[index];
@@ -3429,10 +3828,11 @@
       }
 
       // Write only valid elements, put null instead of invalid elements.
-      if (writeNode(state, level + 1, value, true, true, false, true) ||
-          (typeof value === 'undefined' &&
-           writeNode(state, level + 1, null, true, true, false, true))) {
-
+      if (
+        writeNode(state, level + 1, value, true, true, false, true) ||
+        (typeof value === 'undefined' &&
+          writeNode(state, level + 1, null, true, true, false, true))
+      ) {
         if (!compact || _result !== '') {
           _result += generateNextLine(state, level);
         }
@@ -3452,17 +3852,16 @@
   }
 
   function writeFlowMapping(state, level, object) {
-    var _result       = '',
-        _tag          = state.tag,
-        objectKeyList = Object.keys(object),
-        index,
-        length,
-        objectKey,
-        objectValue,
-        pairBuffer;
+    let _result = '';
+    const _tag = state.tag;
+    const objectKeyList = Object.keys(object);
+    let index;
+    let length;
+    let objectKey;
+    let objectValue;
+    let pairBuffer;
 
     for (index = 0, length = objectKeyList.length; index < length; index += 1) {
-
       pairBuffer = '';
       if (_result !== '') pairBuffer += ', ';
 
@@ -3481,7 +3880,9 @@
 
       if (state.dump.length > 1024) pairBuffer += '? ';
 
-      pairBuffer += state.dump + (state.condenseFlow ? '"' : '') + ':' + (state.condenseFlow ? '' : ' ');
+      pairBuffer += `${state.dump + (state.condenseFlow ? '"' : '')}:${
+        state.condenseFlow ? '' : ' '
+      }`;
 
       if (!writeNode(state, level, objectValue, false, false)) {
         continue; // Skip this pair because of invalid value.
@@ -3494,19 +3895,19 @@
     }
 
     state.tag = _tag;
-    state.dump = '{' + _result + '}';
+    state.dump = `{${_result}}`;
   }
 
   function writeBlockMapping(state, level, object, compact) {
-    var _result       = '',
-        _tag          = state.tag,
-        objectKeyList = Object.keys(object),
-        index,
-        length,
-        objectKey,
-        objectValue,
-        explicitPair,
-        pairBuffer;
+    let _result = '';
+    const _tag = state.tag;
+    const objectKeyList = Object.keys(object);
+    let index;
+    let length;
+    let objectKey;
+    let objectValue;
+    let explicitPair;
+    let pairBuffer;
 
     // Allow sorting keys so that the output file is deterministic
     if (state.sortKeys === true) {
@@ -3538,8 +3939,9 @@
         continue; // Skip this pair because of invalid key.
       }
 
-      explicitPair = (state.tag !== null && state.tag !== '?') ||
-                     (state.dump && state.dump.length > 1024);
+      explicitPair =
+        (state.tag !== null && state.tag !== '?') ||
+        (state.dump && state.dump.length > 1024);
 
       if (explicitPair) {
         if (state.dump && CHAR_LINE_FEED === state.dump.charCodeAt(0)) {
@@ -3576,17 +3978,24 @@
   }
 
   function detectType(state, object, explicit) {
-    var _result, typeList, index, length, type, style;
+    let _result;
+    let typeList;
+    let index;
+    let length;
+    let type;
+    let style;
 
     typeList = explicit ? state.explicitTypes : state.implicitTypes;
 
     for (index = 0, length = typeList.length; index < length; index += 1) {
       type = typeList[index];
 
-      if ((type.instanceOf  || type.predicate) &&
-          (!type.instanceOf || ((typeof object === 'object') && (object instanceof type.instanceOf))) &&
-          (!type.predicate  || type.predicate(object))) {
-
+      if (
+        (type.instanceOf || type.predicate) &&
+        (!type.instanceOf ||
+          (typeof object === 'object' && object instanceof type.instanceOf)) &&
+        (!type.predicate || type.predicate(object))
+      ) {
         if (explicit) {
           if (type.multi && type.representName) {
             state.tag = type.representName(object);
@@ -3605,7 +4014,9 @@
           } else if (_hasOwnProperty.call(type.represent, style)) {
             _result = type.represent[style](object, style);
           } else {
-            throw new exception('!<' + type.tag + '> tag resolver accepts not "' + style + '" style');
+            throw new exception(
+              `!<${type.tag}> tag resolver accepts not "${style}" style`
+            );
           }
 
           state.dump = _result;
@@ -3629,59 +4040,64 @@
       detectType(state, object, true);
     }
 
-    var type = _toString.call(state.dump);
-    var inblock = block;
-    var tagStr;
+    const type = _toString.call(state.dump);
+    const inblock = block;
+    let tagStr;
 
     if (block) {
-      block = (state.flowLevel < 0 || state.flowLevel > level);
+      block = state.flowLevel < 0 || state.flowLevel > level;
     }
 
-    var objectOrArray = type === '[object Object]' || type === '[object Array]',
-        duplicateIndex,
-        duplicate;
+    const objectOrArray =
+      type === '[object Object]' || type === '[object Array]';
+    let duplicateIndex;
+    let duplicate;
 
     if (objectOrArray) {
       duplicateIndex = state.duplicates.indexOf(object);
       duplicate = duplicateIndex !== -1;
     }
 
-    if ((state.tag !== null && state.tag !== '?') || duplicate || (state.indent !== 2 && level > 0)) {
+    if (
+      (state.tag !== null && state.tag !== '?') ||
+      duplicate ||
+      (state.indent !== 2 && level > 0)
+    ) {
       compact = false;
     }
 
     if (duplicate && state.usedDuplicates[duplicateIndex]) {
-      state.dump = '*ref_' + duplicateIndex;
+      state.dump = `*ref_${duplicateIndex}`;
     } else {
       if (objectOrArray && duplicate && !state.usedDuplicates[duplicateIndex]) {
         state.usedDuplicates[duplicateIndex] = true;
       }
       if (type === '[object Object]') {
-        if (block && (Object.keys(state.dump).length !== 0)) {
+        if (block && Object.keys(state.dump).length !== 0) {
           writeBlockMapping(state, level, state.dump, compact);
           if (duplicate) {
-            state.dump = '&ref_' + duplicateIndex + state.dump;
+            state.dump = `&ref_${duplicateIndex}${state.dump}`;
           }
         } else {
           writeFlowMapping(state, level, state.dump);
           if (duplicate) {
-            state.dump = '&ref_' + duplicateIndex + ' ' + state.dump;
+            state.dump = `&ref_${duplicateIndex} ${state.dump}`;
           }
         }
       } else if (type === '[object Array]') {
-        if (block && (state.dump.length !== 0)) {
+        if (block && state.dump.length !== 0) {
           if (state.noArrayIndent && !isblockseq && level > 0) {
             writeBlockSequence(state, level - 1, state.dump, compact);
           } else {
             writeBlockSequence(state, level, state.dump, compact);
           }
           if (duplicate) {
-            state.dump = '&ref_' + duplicateIndex + state.dump;
+            state.dump = `&ref_${duplicateIndex}${state.dump}`;
           }
         } else {
           writeFlowSequence(state, level, state.dump);
           if (duplicate) {
-            state.dump = '&ref_' + duplicateIndex + ' ' + state.dump;
+            state.dump = `&ref_${duplicateIndex} ${state.dump}`;
           }
         }
       } else if (type === '[object String]') {
@@ -3692,7 +4108,7 @@
         return false;
       } else {
         if (state.skipInvalid) return false;
-        throw new exception('unacceptable kind of an object to dump ' + type);
+        throw new exception(`unacceptable kind of an object to dump ${type}`);
       }
 
       if (state.tag !== null && state.tag !== '?') {
@@ -3714,14 +4130,14 @@
         ).replace(/!/g, '%21');
 
         if (state.tag[0] === '!') {
-          tagStr = '!' + tagStr;
+          tagStr = `!${tagStr}`;
         } else if (tagStr.slice(0, 18) === 'tag:yaml.org,2002:') {
-          tagStr = '!!' + tagStr.slice(18);
+          tagStr = `!!${tagStr.slice(18)}`;
         } else {
-          tagStr = '!<' + tagStr + '>';
+          tagStr = `!<${tagStr}>`;
         }
 
-        state.dump = tagStr + ' ' + state.dump;
+        state.dump = `${tagStr} ${state.dump}`;
       }
     }
 
@@ -3729,23 +4145,27 @@
   }
 
   function getDuplicateReferences(object, state) {
-    var objects = [],
-        duplicatesIndexes = [],
-        index,
-        length;
+    const objects = [];
+    const duplicatesIndexes = [];
+    let index;
+    let length;
 
     inspectNode(object, objects, duplicatesIndexes);
 
-    for (index = 0, length = duplicatesIndexes.length; index < length; index += 1) {
+    for (
+      index = 0, length = duplicatesIndexes.length;
+      index < length;
+      index += 1
+    ) {
       state.duplicates.push(objects[duplicatesIndexes[index]]);
     }
     state.usedDuplicates = new Array(length);
   }
 
   function inspectNode(object, objects, duplicatesIndexes) {
-    var objectKeyList,
-        index,
-        length;
+    let objectKeyList;
+    let index;
+    let length;
 
     if (object !== null && typeof object === 'object') {
       index = objects.indexOf(object);
@@ -3763,8 +4183,16 @@
         } else {
           objectKeyList = Object.keys(object);
 
-          for (index = 0, length = objectKeyList.length; index < length; index += 1) {
-            inspectNode(object[objectKeyList[index]], objects, duplicatesIndexes);
+          for (
+            index = 0, length = objectKeyList.length;
+            index < length;
+            index += 1
+          ) {
+            inspectNode(
+              object[objectKeyList[index]],
+              objects,
+              duplicatesIndexes
+            );
           }
         }
       }
@@ -3774,83 +4202,84 @@
   function dump$1(input, options) {
     options = options || {};
 
-    var state = new State(options);
+    const state = new State(options);
 
     if (!state.noRefs) getDuplicateReferences(input, state);
 
-    var value = input;
+    let value = input;
 
     if (state.replacer) {
       value = state.replacer.call({ '': value }, '', value);
     }
 
-    if (writeNode(state, 0, value, true, true)) return state.dump + '\n';
+    if (writeNode(state, 0, value, true, true)) return `${state.dump}\n`;
 
     return '';
   }
 
-  var dump_1 = dump$1;
+  const dump_1 = dump$1;
 
-  var dumper = {
-  	dump: dump_1
+  const dumper = {
+    dump: dump_1,
   };
 
   function renamed(from, to) {
-    return function () {
-      throw new Error('Function yaml.' + from + ' is removed in js-yaml 4. ' +
-        'Use yaml.' + to + ' instead, which is now safe by default.');
+    return function() {
+      throw new Error(
+        `Function yaml.${from} is removed in js-yaml 4. ` +
+          `Use yaml.${to} instead, which is now safe by default.`
+      );
     };
   }
 
-
-  var Type                = type;
-  var Schema              = schema;
-  var FAILSAFE_SCHEMA     = failsafe;
-  var JSON_SCHEMA         = json;
-  var CORE_SCHEMA         = core;
-  var DEFAULT_SCHEMA      = _default;
-  var load                = loader.load;
-  var loadAll             = loader.loadAll;
-  var dump                = dumper.dump;
-  var YAMLException       = exception;
+  const Type = type;
+  const Schema = schema;
+  const FAILSAFE_SCHEMA = failsafe;
+  const JSON_SCHEMA = json;
+  const CORE_SCHEMA = core;
+  const DEFAULT_SCHEMA = _default;
+  const { load } = loader;
+  const { loadAll } = loader;
+  const { dump } = dumper;
+  const YAMLException = exception;
 
   // Re-export all types in case user wants to create custom schema
-  var types = {
-    binary:    binary,
-    float:     float,
-    map:       map,
-    null:      _null,
-    pairs:     pairs,
-    set:       set,
-    timestamp: timestamp,
-    bool:      bool,
-    int:       int,
-    merge:     merge,
-    omap:      omap,
-    seq:       seq,
-    str:       str
+  const types = {
+    binary,
+    float,
+    map,
+    null: _null,
+    pairs,
+    set,
+    timestamp,
+    bool,
+    int,
+    merge,
+    omap,
+    seq,
+    str,
   };
 
   // Removed functions from JS-YAML 3.0.x
-  var safeLoad            = renamed('safeLoad', 'load');
-  var safeLoadAll         = renamed('safeLoadAll', 'loadAll');
-  var safeDump            = renamed('safeDump', 'dump');
-
-  var jsYaml = {
-  	Type: Type,
-  	Schema: Schema,
-  	FAILSAFE_SCHEMA: FAILSAFE_SCHEMA,
-  	JSON_SCHEMA: JSON_SCHEMA,
-  	CORE_SCHEMA: CORE_SCHEMA,
-  	DEFAULT_SCHEMA: DEFAULT_SCHEMA,
-  	load: load,
-  	loadAll: loadAll,
-  	dump: dump,
-  	YAMLException: YAMLException,
-  	types: types,
-  	safeLoad: safeLoad,
-  	safeLoadAll: safeLoadAll,
-  	safeDump: safeDump
+  const safeLoad = renamed('safeLoad', 'load');
+  const safeLoadAll = renamed('safeLoadAll', 'loadAll');
+  const safeDump = renamed('safeDump', 'dump');
+
+  const jsYaml = {
+    Type,
+    Schema,
+    FAILSAFE_SCHEMA,
+    JSON_SCHEMA,
+    CORE_SCHEMA,
+    DEFAULT_SCHEMA,
+    load,
+    loadAll,
+    dump,
+    YAMLException,
+    types,
+    safeLoad,
+    safeLoadAll,
+    safeDump,
   };
 
   exports.CORE_SCHEMA = CORE_SCHEMA;
@@ -3870,5 +4299,4 @@
   exports.types = types;
 
   Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+});
diff --git a/webpack/reducer.js b/webpack/reducer.js
index 052e91d9..ebb8b571 100644
--- a/webpack/reducer.js
+++ b/webpack/reducer.js
@@ -1,5 +1,3 @@
-import { combineReducers } from 'redux';
-
 import parameterSelectionParameters from './components/ParameterSelection/ParameterSelectionReducer';
 import applicationDefinitionConf from './components/ApplicationDefinition/ApplicationDefinitionReducer';
 import applicationDefinitionImportConf from './components/ApplicationDefinitionImport/ApplicationDefinitionImportReducer';
@@ -20,42 +18,69 @@ import {
 } from './components/ApplicationInstance/ApplicationInstanceConstants';
 
 const rootReducer = (state = {}, action) => {
+  const paramState = parameterSelectionParameters(
+    state.parameterSelectionParameters,
+    action
+  );
+  const appInsReportState = applicationInstanceReport(
+    state.applicationInstanceReport,
+    action
+  );
 
-  const param_state = parameterSelectionParameters(state.parameterSelectionParameters, action);
-  const app_ins_report_state = applicationInstanceReport(state.applicationInstanceReport, action);
-
-  if (action.type == APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE) {
-    action.payload.parameterSelection = param_state.parameters;
+  if (
+    action.type ===
+    APPLICATION_DEFINITION_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE
+  ) {
+    action.payload.parameterSelection = paramState.parameters;
   }
-  if (action.type == APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE) {
-    action.payload.parameterSelection = param_state.parameters;
+  if (
+    action.type ===
+    APPLICATION_DEFINITION_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE
+  ) {
+    action.payload.parameterSelection = paramState.parameters;
   }
-  const app_def_state = applicationDefinitionConf(state.applicationDefinitionConf, action);
-  const app_def_import_state = applicationDefinitionImportConf(state.applicationDefinitionImportConf, action);
+  const appDefState = applicationDefinitionConf(
+    state.applicationDefinitionConf,
+    action
+  );
+  const appDefImportState = applicationDefinitionImportConf(
+    state.applicationDefinitionImportConf,
+    action
+  );
 
-  if (action.type == APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE) {
-    action.payload.parameterSelection = param_state.parameters;
+  if (
+    action.type === APPLICATION_INSTANCE_FOREMAN_PARAMETER_SELECTION_MODAL_CLOSE
+  ) {
+    action.payload.parameterSelection = paramState.parameters;
   }
-  if (action.type == APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE) {
-    action.payload.parameterSelection = param_state.parameters;
+  if (
+    action.type === APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE
+  ) {
+    action.payload.parameterSelection = paramState.parameters;
   }
 
-  const ex_host_state = existingHostSelectionConf(state.existingHostSelectionConf, action);
-  if (action.type == APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE) {
-    action.payload.selectedHosts = ex_host_state.selectedHosts;
+  const exHostState = existingHostSelectionConf(
+    state.existingHostSelectionConf,
+    action
+  );
+  if (action.type === APPLICATION_INSTANCE_ADD_EXISTING_HOSTS_MODAL_CLOSE) {
+    action.payload.selectedHosts = exHostState.selectedHosts;
   }
 
-  const app_ins_state = applicationInstanceConf(state.applicationInstanceConf, action);
-  const sync_git_repo_state = syncGitRepoConf(state.syncGitRepoConf, action);
+  const appInsState = applicationInstanceConf(
+    state.applicationInstanceConf,
+    action
+  );
+  const syncGitRepoState = syncGitRepoConf(state.syncGitRepoConf, action);
 
   return {
-    applicationDefinitionConf: app_def_state,
-    applicationDefinitionImportConf: app_def_import_state,
-    applicationInstanceConf: app_ins_state,
-    applicationInstanceReport: app_ins_report_state,
-    existingHostSelectionConf: ex_host_state,
-    parameterSelectionParameters: param_state,
-    syncGitRepoConf: sync_git_repo_state,
+    applicationDefinitionConf: appDefState,
+    applicationDefinitionImportConf: appDefImportState,
+    applicationInstanceConf: appInsState,
+    applicationInstanceReport: appInsReportState,
+    existingHostSelectionConf: exHostState,
+    parameterSelectionParameters: paramState,
+    syncGitRepoConf: syncGitRepoState,
   };
 };