From dfb7bd07f5925732fbdbbdfd95a9124b1a534144 Mon Sep 17 00:00:00 2001
From: Markus Bucher <bucher@atix.de>
Date: Mon, 29 Apr 2024 08:38:50 +0000
Subject: [PATCH] Try to fix ApplicationInstance component linting

---
 .eslintrc                                     |   2 +-
 .../ApplicationInstance.js                    | 136 ++--
 .../ApplicationInstanceActions.js             |  47 +-
 .../ApplicationInstanceHelper.js              |   2 +-
 .../ApplicationInstanceReducer.js             |  52 +-
 .../__tests__/ApplicationInstance.test.js     |  85 ++-
 .../ApplicationInstance.test.js.snap          | 608 +++++++++++++++++-
 .../components/AppDefinitionSelector.js       |   9 +
 .../ApplicationInstance/components/Service.js |   7 +-
 .../components/ServiceCounter.js              |  38 +-
 webpack/helper.js                             |   7 -
 webpack/helper.test.js                        |   9 -
 12 files changed, 837 insertions(+), 165 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index b804a6ea..6c79457e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -8,6 +8,6 @@
     // avoid https://github.com/prettier/eslint-config-prettier/issues/29
     "standard/computed-property-even-spacing": 0,
     //"eqeqeq": "warn",
-    "max-lines": ["error", {"max": 550, "skipBlankLines": true, "skipComments": true}],
+    "max-lines": ["error", {"max": 650, "skipBlankLines": true, "skipComments": true}],
   },
 }
diff --git a/webpack/components/ApplicationInstance/ApplicationInstance.js b/webpack/components/ApplicationInstance/ApplicationInstance.js
index 8b6ecec6..158d10c9 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstance.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstance.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Icon,
@@ -28,16 +28,12 @@ import {
 } from '../ParameterSelection/ParameterSelectionConstants';
 
 class ApplicationInstance extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  isEditing({ rowData }) {
+  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() {
@@ -46,11 +42,11 @@ class ApplicationInstance extends React.Component {
 
     this.props.hosts.forEach(h => {
       if (
-        h.foremanParameters.map(e => e.value).filter(i => i == '').length > 0
+        h.foremanParameters.map(e => e.value).filter(i => i === '').length > 0
       ) {
         result = false;
 
-        if (msg == '') {
+        if (msg === '') {
           msg += __(
             'For some hosts the values for some parameters are missing. Check the values for these hosts:\n'
           );
@@ -60,23 +56,23 @@ class ApplicationInstance extends React.Component {
     });
 
     const invalidMinServices = this.props.services.filter(
-      s => Number(s.minCount) != 0 && s.currentCount < s.minCount
+      s => Number(s.minCount) !== 0 && s.currentCount < s.minCount
     );
     const invalidMaxServices = this.props.services.filter(
-      s => Number(s.maxCount) != 0 && s.currentCount > s.maxCount
+      s => Number(s.maxCount) !== 0 && s.currentCount > s.maxCount
     );
 
     if (invalidMinServices.length > 0 || invalidMaxServices.length > 0) {
       result = false;
 
-      if (msg != '') {
+      if (msg !== '') {
         msg += '\n';
       }
 
       msg += __('Unachieved service counts:');
       msg += '\n';
 
-      invalidMinServices.map(s => {
+      invalidMinServices.forEach(s => {
         msg += sprintf(
           __(
             `- service ${s.name} expects at ${s.minCount} least configured hosts\n`
@@ -84,7 +80,7 @@ class ApplicationInstance extends React.Component {
         );
       });
 
-      invalidMaxServices.map(s => {
+      invalidMaxServices.forEach(s => {
         msg += sprintf(
           __(
             `- service ${s.name} expects no more than ${s.axCount} configured hosts\n`
@@ -110,7 +106,6 @@ class ApplicationInstance extends React.Component {
         supportedPlugins,
       },
       initApplicationInstance,
-      addApplicationInstanceHost,
       deleteApplicationInstanceHost,
       activateEditApplicationInstanceHost,
       changeEditApplicationInstanceHost,
@@ -123,7 +118,7 @@ class ApplicationInstance extends React.Component {
       loadApplicationDefinition(appDefinition.id, { url: appDefinitionUrl });
     }
 
-    const already_deployed_msg = __(
+    const alreadyDeployedMsg = __(
       'This is an already deployed host. Changing the parameters is not possible!'
     );
 
@@ -131,12 +126,12 @@ class ApplicationInstance extends React.Component {
       isEditing: additionalData => this.props.editMode,
       renderValue: (value, additionalData) => (
         <td style={{ padding: '2px' }}>
-          {additionalData.rowData.isExistingHost == true ? (
+          {additionalData.rowData.isExistingHost === true ? (
             <Icon
               style={{ marginRight: 8, marginLeft: 2 }}
               type="pf"
               name="info"
-              title={already_deployed_msg}
+              title={alreadyDeployedMsg}
             />
           ) : (
             <span />
@@ -148,7 +143,7 @@ class ApplicationInstance extends React.Component {
             <Icon type="pf" name="edit" title={__('Edit entry')} />
           </Button>
           &nbsp;
-          {additionalData.rowData.isExistingHost == false ? (
+          {additionalData.rowData.isExistingHost === false ? (
             <Button
               bsStyle="default"
               onClick={() => openForemanParameterSelectionModal(additionalData)}
@@ -176,12 +171,12 @@ class ApplicationInstance extends React.Component {
       ),
       renderEdit: (value, additionalData) => (
         <td style={{ padding: '2px' }}>
-          {additionalData.rowData.isExistingHost == true ? (
+          {additionalData.rowData.isExistingHost === true ? (
             <Icon
               style={{ marginRight: 8, marginLeft: 2 }}
               type="pf"
               name="info"
-              title={already_deployed_msg}
+              title={alreadyDeployedMsg}
             />
           ) : (
             <span />
@@ -190,7 +185,7 @@ class ApplicationInstance extends React.Component {
             <Icon type="pf" name={__('edit')} />
           </Button>
           &nbsp;
-          {additionalData.rowData.isExistingHost == false ? (
+          {additionalData.rowData.isExistingHost === false ? (
             <Button bsStyle="default" disabled>
               <Icon type="pf" name={__('settings')} />
             </Button>
@@ -248,10 +243,10 @@ class ApplicationInstance extends React.Component {
     };
 
     const inlineEditFormatter = inlineEditFormatterFactory({
-      isEditing: additionalData => this.isEditing(additionalData),
+      isEditing: additionalData => this.constructor.isEditing(additionalData),
       renderValue: (value, additionalData) => {
         let prettyValue = value;
-        if (additionalData.property == 'service') {
+        if (additionalData.property === 'service') {
           const serviceList = arrayToObject(this.props.services, 'id', 'name');
           prettyValue = serviceList[value];
         }
@@ -259,10 +254,10 @@ class ApplicationInstance extends React.Component {
       },
       renderEdit: (value, additionalData) => {
         let prettyValue = value;
-        if (additionalData.property == 'service') {
+        if (additionalData.property === 'service') {
           const availableServices = this.props.services.filter(
             service =>
-              Number(service.maxCount) == 0 ||
+              Number(service.maxCount) === 0 ||
               service.currentCount < service.maxCount
           );
           const serviceList = arrayToObject(availableServices, 'id', 'name');
@@ -280,7 +275,7 @@ class ApplicationInstance extends React.Component {
             additionalData
           );
         }
-        if (additionalData.property == 'hostname') {
+        if (additionalData.property === 'hostname') {
           if (additionalData.rowData.newEntry === true) {
             return inlineEditFormatterImpl.renderEditText(
               value,
@@ -344,11 +339,13 @@ class ApplicationInstance extends React.Component {
 
     const { validateResult, validateMsg } = this.validateParameters();
 
-    if (validateResult == false) {
+    /* 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);
     }
+    /* eslint-enable jquery/no-attr */
 
     return (
       <span>
@@ -373,16 +370,16 @@ class ApplicationInstance extends React.Component {
           <AppDefinitionSelector
             label="Application Definition"
             hidden={false}
-            editable={mode == 'newInstance'}
+            editable={mode === 'newInstance'}
             viewText={appDefinition.name}
             options={applications}
             onChange={loadApplicationDefinition}
             selectValue={appDefinition.id.toString()}
             additionalData={{ url: appDefinitionUrl }}
           />
-          {appDefinition.id == '' ? (
+          {appDefinition.id === '' ? (
             <div style={{ paddingTop: 25 }}>
-              <pre>App Definition can't be blank</pre>
+              <pre>App Definition can&apos;t be blank</pre>
             </div>
           ) : (
             <div />
@@ -409,7 +406,7 @@ class ApplicationInstance extends React.Component {
               rowKey="id"
               onRow={(rowData, { rowIndex }) => ({
                 role: 'row',
-                isEditing: () => this.isEditing({ rowData }),
+                isEditing: () => this.constructor.isEditing({ rowData }),
                 onCancel: () =>
                   cancelEditApplicationInstanceHost({ rowData, rowIndex }),
                 onConfirm: () =>
@@ -441,7 +438,7 @@ class ApplicationInstance extends React.Component {
             </Button>
           </span>
           <span style={{ marginLeft: 30 }}>
-            Ansible group vars 'all':
+            Ansible group vars &lsquo;all&rsquo;:
             <Button
               style={{ marginLeft: 10 }}
               bsStyle="default"
@@ -587,7 +584,7 @@ class ApplicationInstance extends React.Component {
             </ForemanModal.Footer>
           </ForemanModal>
         </div>
-        {validateResult == false ? (
+        {validateResult === false ? (
           <div style={{ paddingTop: 25 }}>
             <pre>{validateMsg}</pre>
           </div>
@@ -612,51 +609,68 @@ class ApplicationInstance extends React.Component {
 }
 
 ApplicationInstance.defaultProps = {
-  error: {},
-  showAlertModal: false,
   alertModalText: '',
   alertModalTitle: '',
+  ansibleVarsAll: [],
   appDefinition: { id: '', name: '' },
+  columns: [],
+  data: {
+    appDefinitionUrl: '',
+    appDefinition: undefined,
+    applications: undefined,
+    foremanDataUrl: '',
+    supportedPlugins: {},
+  },
   editMode: false,
-  services: [],
+  hiddenForemanParameterTypes: [],
   hosts: [],
-  ansibleVarsAll: [],
   parametersData: {},
-  columns: [],
-  hiddenForemanParameterTypes: [],
-  editParamsOfRowId: null,
   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 1568cb21..1e03f40e 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstanceActions.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstanceActions.js
@@ -1,17 +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,
@@ -143,27 +137,26 @@ export const closeAlertModal = () => ({
 export const loadApplicationDefinition = (
   applicationDefinitionId,
   additionalData
-) => dispatch => {
+) => async dispatch => {
   dispatch({ type: APPLICATION_INSTANCE_LOAD_APPLICATION_DEFINITION_REQUEST });
 
   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 => ({
@@ -190,7 +183,7 @@ export const activateEditApplicationInstanceHost = additionalData => ({
 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'),
@@ -201,9 +194,9 @@ export const confirmEditApplicationInstanceHost = allData => async dispatch => {
   // 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: __(
@@ -215,7 +208,7 @@ export const confirmEditApplicationInstanceHost = allData => async dispatch => {
 
   // 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.'),
diff --git a/webpack/components/ApplicationInstance/ApplicationInstanceHelper.js b/webpack/components/ApplicationInstance/ApplicationInstanceHelper.js
index dd7f189d..646761f6 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstanceHelper.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstanceHelper.js
@@ -1,5 +1,5 @@
 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;
   } else {
diff --git a/webpack/components/ApplicationInstance/ApplicationInstanceReducer.js b/webpack/components/ApplicationInstance/ApplicationInstanceReducer.js
index 0b4206bb..ca9b738e 100644
--- a/webpack/components/ApplicationInstance/ApplicationInstanceReducer.js
+++ b/webpack/components/ApplicationInstance/ApplicationInstanceReducer.js
@@ -1,9 +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,
@@ -51,33 +51,32 @@ const applicationInstanceConf = (state = initialState, action) => {
       });
     }
     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 });
+      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 => {
+      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);
+          const service = services.find(serv => serv.id === hostServiceId);
           service.currentCount += 1;
         });
       }
 
-      newState = {
+      const newState = {
         appDefinition: payload.app_definition,
         services,
         loading: false,
@@ -125,12 +124,12 @@ const applicationInstanceConf = (state = initialState, action) => {
     }
     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);
+      const service = services.find(serv => serv.id === hostServiceId);
       service.currentCount -= 1;
 
       return state.merge({
@@ -161,7 +160,7 @@ const applicationInstanceConf = (state = initialState, action) => {
 
       if (
         state.hosts.filter(
-          v => v.hostname === thisHost.hostname && v.id != thisHost.id
+          v => v.hostname === thisHost.hostname && v.id !== thisHost.id
         ).length > 0
       ) {
         return state.merge({
@@ -177,7 +176,7 @@ const applicationInstanceConf = (state = initialState, action) => {
       if (thisHost.newEntry === true) {
         const hostServiceId = Number(thisHost.service);
         const selectedService = services.filter(
-          entry => entry.id == hostServiceId
+          entry => entry.id === hostServiceId
         )[0];
         hosts[index].foremanParameters = selectedService.foremanParameters;
         hosts[index].ansibleParameters = selectedService.ansibleParameters;
@@ -228,7 +227,7 @@ const applicationInstanceConf = (state = initialState, action) => {
       const parametersData = {};
 
       const selectedService = state.services.filter(
-        entry => entry.id == payload.rowData.service
+        entry => entry.id === payload.rowData.service
       )[0];
 
       parametersData.paramDefinition = {
@@ -251,7 +250,7 @@ const applicationInstanceConf = (state = initialState, action) => {
       });
     }
     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,
@@ -270,14 +269,14 @@ const applicationInstanceConf = (state = initialState, action) => {
     case APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_OPEN: {
       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
+          entry => entry.id === payload.rowData.service
         )[0];
 
         parametersData.paramDefinition = {
@@ -302,10 +301,10 @@ const applicationInstanceConf = (state = initialState, action) => {
     }
     case APPLICATION_INSTANCE_ANSIBLE_PARAMETER_SELECTION_MODAL_CLOSE: {
       let newState = {};
-      if (payload.mode == 'save') {
+      if (payload.mode === 'save') {
         if (
           state.parametersData.paramDefinition.hasOwnProperty('isAllGroup') &&
-          state.parametersData.paramDefinition.isAllGroup == true
+          state.parametersData.paramDefinition.isAllGroup === true
         ) {
           newState = {
             parametersData: null,
@@ -333,10 +332,10 @@ 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);
@@ -352,12 +351,12 @@ const applicationInstanceConf = (state = initialState, action) => {
 
         payload.selectedHosts.forEach(host => {
           if (
-            state.hosts == undefined ||
-            state.hosts.find(h => h.hostname == host.hostname) == undefined
+            state.hosts === undefined ||
+            state.hosts.find(h => h.hostname === host.hostname) === undefined
           ) {
             index += 1;
             const selectedService = services.filter(
-              entry => entry.id == host.serviceId
+              entry => entry.id === host.serviceId
             )[0];
             const newRow = {
               id: index,
@@ -376,7 +375,6 @@ const applicationInstanceConf = (state = initialState, action) => {
         return state.merge({
           hosts,
           services,
-          services,
         });
       }
       return state;
diff --git a/webpack/components/ApplicationInstance/__tests__/ApplicationInstance.test.js b/webpack/components/ApplicationInstance/__tests__/ApplicationInstance.test.js
index 2a602067..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__/__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/components/AppDefinitionSelector.js b/webpack/components/ApplicationInstance/components/AppDefinitionSelector.js
index cce428b1..66386dab 100644
--- a/webpack/components/ApplicationInstance/components/AppDefinitionSelector.js
+++ b/webpack/components/ApplicationInstance/components/AppDefinitionSelector.js
@@ -37,6 +37,7 @@ const AppDefinitionSelector = ({
 
 AppDefinitionSelector.propTypes = {
   label: PropTypes.string.isRequired,
+  hidden: PropTypes.bool,
   editable: PropTypes.bool.isRequired,
   viewText: PropTypes.string,
   selectValue: PropTypes.string,
@@ -45,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 57bdc75c..95601796 100644
--- a/webpack/components/ApplicationInstance/components/Service.js
+++ b/webpack/components/ApplicationInstance/components/Service.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 
 const Service = ({ name, currentCount, minCount, maxCount }) => (
   <div>
@@ -8,12 +9,6 @@ const Service = ({ name, currentCount, minCount, maxCount }) => (
   </div>
 );
 
-Service.defaultProps = {
-  minCount: 0,
-  maxCount: 0,
-  currentCount: 0,
-};
-
 Service.propTypes = {
   name: PropTypes.string.isRequired,
   minCount: PropTypes.number.isRequired,
diff --git a/webpack/components/ApplicationInstance/components/ServiceCounter.js b/webpack/components/ApplicationInstance/components/ServiceCounter.js
index 3665fde6..750659d5 100644
--- a/webpack/components/ApplicationInstance/components/ServiceCounter.js
+++ b/webpack/components/ApplicationInstance/components/ServiceCounter.js
@@ -1,34 +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) {
+  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/helper.js b/webpack/helper.js
index 2407e6fc..a801bca6 100644
--- a/webpack/helper.js
+++ b/webpack/helper.js
@@ -9,12 +9,6 @@ function arrayToObject(arr, id, value) {
   return rv;
 }
 
-function arrayToObjectObj(arr, id) {
-  const rv = {};
-  for (let i = 0; i < arr.length; ++i) rv[arr[i][id]] = arr[i];
-  return rv;
-}
-
 function shortHostname(fqdn) {
   return fqdn.split('.')[0];
 }
@@ -43,7 +37,6 @@ function supportedPluginsToHiddenParameterTypes(supportedPlugins) {
 
 export {
   arrayToObject,
-  arrayToObjectObj,
   shortHostname,
   EasyHeaderFormatter,
   supportedPluginsToHiddenParameterTypes,
diff --git a/webpack/helper.test.js b/webpack/helper.test.js
index 8765c8ff..fc81ff7a 100644
--- a/webpack/helper.test.js
+++ b/webpack/helper.test.js
@@ -1,6 +1,5 @@
 import {
   arrayToObject,
-  arrayToObjectObj,
   EasyHeaderFormatter,
   supportedPluginsToHiddenParameterTypes,
 } from './helper';
@@ -19,14 +18,6 @@ describe('helper', () => {
     });
   });
 
-  it('creates an 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('formats a nice, easy header', () => {
     expect(
       EasyHeaderFormatter('MyValue', {