Adding Prettier and fixing up eslint version

Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>

1 files changed, 191 insertions, 101 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
index ed92de7bb1..3ea1f2d5cc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
@@ -20,111 +20,201 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
 import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
 import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
-import {relationTypesOptions, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
+import {
+    relationTypesOptions,
+    NEW_RULE_TEMP_ID
+} from './SoftwareProductDependenciesConstants.js';
 
-
-const TableActionRow = ({onAction, actionIcon, showAction, dependency, sourceOptions, targetOptions, onDataChanged}) => {
-	return (
-		<SelectActionTableRow
-			key={dependency.id}
-			onAction={onAction}
-			overlayMsg={i18n('There is a loop between selections')}
-			hasError={dependency.hasCycle}
-			hasErrorIndication
-			showAction={showAction}
-			actionIcon={actionIcon}>
-			<SelectActionTableCell
-				options={sourceOptions}
-				selected={dependency.sourceId}
-				placeholder={i18n('Select VFC...')}
-				clearable={false}
-				onChange={newVal =>  {
-					dependency.sourceId = newVal;
-					onDataChanged(dependency);
-				}} />
-			<SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/>
-			<SelectActionTableCell
-				placeholder={i18n('Select VFC...')}
-				options={targetOptions}
-				selected={dependency.targetId}
-				clearable={false}
-				onChange={newVal =>  {
-					dependency.targetId = newVal;
-					onDataChanged(dependency);
-				}} />
-		</SelectActionTableRow>
-	);
+const TableActionRow = ({
+    onAction,
+    actionIcon,
+    showAction,
+    dependency,
+    sourceOptions,
+    targetOptions,
+    onDataChanged
+}) => {
+    return (
+        <SelectActionTableRow
+            key={dependency.id}
+            onAction={onAction}
+            overlayMsg={i18n('There is a loop between selections')}
+            hasError={dependency.hasCycle}
+            hasErrorIndication
+            showAction={showAction}
+            actionIcon={actionIcon}>
+            <SelectActionTableCell
+                options={sourceOptions}
+                selected={dependency.sourceId}
+                placeholder={i18n('Select VFC...')}
+                clearable={false}
+                onChange={newVal => {
+                    dependency.sourceId = newVal;
+                    onDataChanged(dependency);
+                }}
+            />
+            <SelectActionTableCell
+                options={relationTypesOptions}
+                selected={dependency.relationType}
+                clearable={false}
+            />
+            <SelectActionTableCell
+                placeholder={i18n('Select VFC...')}
+                options={targetOptions}
+                selected={dependency.targetId}
+                clearable={false}
+                onChange={newVal => {
+                    dependency.targetId = newVal;
+                    onDataChanged(dependency);
+                }}
+            />
+        </SelectActionTableRow>
+    );
 };
 
-
 export default class SoftwareProductDependenciesView extends React.Component {
-	filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
-		let isInMap = sourceToTargetMapping.hasOwnProperty(selectedSourceId);
-		return componentsOptions.filter(component => {
-			if (component.value === selectedTargetId) {
-				return true;
-			} else {
-				return component.value !== selectedSourceId && (isInMap ? sourceToTargetMapping[selectedSourceId].indexOf(component.value) < 0 : true);
-			}
-		});
-	}
-
-	filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
-		return componentsOptions.filter(component => {
-			if (component.value === selectedSourceId) {
-				return true;
-			} else {
-				let isInMap = sourceToTargetMapping.hasOwnProperty(component.value);
-				return component.value !== selectedTargetId && (isInMap ? sourceToTargetMapping[component.value].indexOf(selectedTargetId) < 0 : true);
-			}
-		});
-	}
+    filterTargets({
+        componentsOptions,
+        sourceToTargetMapping,
+        selectedSourceId,
+        selectedTargetId
+    }) {
+        let isInMap = sourceToTargetMapping.hasOwnProperty(selectedSourceId);
+        return componentsOptions.filter(component => {
+            if (component.value === selectedTargetId) {
+                return true;
+            } else {
+                return (
+                    component.value !== selectedSourceId &&
+                    (isInMap
+                        ? sourceToTargetMapping[selectedSourceId].indexOf(
+                              component.value
+                          ) < 0
+                        : true)
+                );
+            }
+        });
+    }
 
-	render() {
-		let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, onDeleteDependency, isReadOnlyMode} = this.props;
-		let sourceToTargetMapping = {};
-		softwareProductDependencies.map(dependency => {
-			let isInMap = sourceToTargetMapping.hasOwnProperty(dependency.sourceId);
-			if (dependency.targetId) {
-				sourceToTargetMapping[dependency.sourceId] = isInMap ? [...sourceToTargetMapping[dependency.sourceId], dependency.targetId] : [dependency.targetId];
-			}
-		});
-		let depList = softwareProductDependencies.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
-		let newDependency = softwareProductDependencies.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
-		return (
-			<div className='software-product-dependencies'>
-				<div className='page-title'>{i18n('Dependencies')}</div>
-				<SelectActionTable
-					columns={[i18n('Source'), i18n('Relation Type'), i18n('Target')]}
-					numOfIcons={2}
-					isReadOnlyMode={isReadOnlyMode}>
-					{!isReadOnlyMode && <TableActionRow
-						key={newDependency.id}
-						actionIcon='plusCircle'
-						onAction={() => onAddDependency(newDependency)}
-						dependency={newDependency}
-						componentsOptions={componentsOptions}
-						sourceToTargetMapping={sourceToTargetMapping}
-						onDataChanged={onDataChanged}
-						sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
-						targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
-						showAction={newDependency.targetId !== null && newDependency.relationType !== null && newDependency.sourceId !== null}/> }
-					{depList.map(dependency => (
-						<TableActionRow
-							key={dependency.id}
-							actionIcon='trashO'
-							onAction={() => onDeleteDependency(dependency)}
-							dependency={dependency}
-							componentsOptions={componentsOptions}
-							sourceToTargetMapping={sourceToTargetMapping}
-							sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
-							targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
-							onDataChanged={onDataChanged}
-							showAction={true}/>
-					))}
-				</SelectActionTable>
-			</div>
-		);
-	}
+    filterSources({
+        componentsOptions,
+        sourceToTargetMapping,
+        selectedSourceId,
+        selectedTargetId
+    }) {
+        return componentsOptions.filter(component => {
+            if (component.value === selectedSourceId) {
+                return true;
+            } else {
+                let isInMap = sourceToTargetMapping.hasOwnProperty(
+                    component.value
+                );
+                return (
+                    component.value !== selectedTargetId &&
+                    (isInMap
+                        ? sourceToTargetMapping[component.value].indexOf(
+                              selectedTargetId
+                          ) < 0
+                        : true)
+                );
+            }
+        });
+    }
 
+    render() {
+        let {
+            componentsOptions,
+            softwareProductDependencies,
+            onDataChanged,
+            onAddDependency,
+            onDeleteDependency,
+            isReadOnlyMode
+        } = this.props;
+        let sourceToTargetMapping = {};
+        softwareProductDependencies.map(dependency => {
+            let isInMap = sourceToTargetMapping.hasOwnProperty(
+                dependency.sourceId
+            );
+            if (dependency.targetId) {
+                sourceToTargetMapping[dependency.sourceId] = isInMap
+                    ? [
+                          ...sourceToTargetMapping[dependency.sourceId],
+                          dependency.targetId
+                      ]
+                    : [dependency.targetId];
+            }
+        });
+        let depList = softwareProductDependencies.filter(
+            dependency => dependency.id !== NEW_RULE_TEMP_ID
+        );
+        let newDependency = softwareProductDependencies.find(
+            dependency => dependency.id === NEW_RULE_TEMP_ID
+        );
+        return (
+            <div className="software-product-dependencies">
+                <div className="page-title">{i18n('Dependencies')}</div>
+                <SelectActionTable
+                    columns={[
+                        i18n('Source'),
+                        i18n('Relation Type'),
+                        i18n('Target')
+                    ]}
+                    numOfIcons={2}
+                    isReadOnlyMode={isReadOnlyMode}>
+                    {!isReadOnlyMode && (
+                        <TableActionRow
+                            key={newDependency.id}
+                            actionIcon="plusCircle"
+                            onAction={() => onAddDependency(newDependency)}
+                            dependency={newDependency}
+                            componentsOptions={componentsOptions}
+                            sourceToTargetMapping={sourceToTargetMapping}
+                            onDataChanged={onDataChanged}
+                            sourceOptions={this.filterSources({
+                                componentsOptions,
+                                sourceToTargetMapping,
+                                selectedSourceId: newDependency.sourceId,
+                                selectedTargetId: newDependency.targetId
+                            })}
+                            targetOptions={this.filterTargets({
+                                componentsOptions,
+                                sourceToTargetMapping,
+                                selectedSourceId: newDependency.sourceId,
+                                selectedTargetId: newDependency.targetId
+                            })}
+                            showAction={
+                                newDependency.targetId !== null &&
+                                newDependency.relationType !== null &&
+                                newDependency.sourceId !== null
+                            }
+                        />
+                    )}
+                    {depList.map(dependency => (
+                        <TableActionRow
+                            key={dependency.id}
+                            actionIcon="trashO"
+                            onAction={() => onDeleteDependency(dependency)}
+                            dependency={dependency}
+                            componentsOptions={componentsOptions}
+                            sourceToTargetMapping={sourceToTargetMapping}
+                            sourceOptions={this.filterSources({
+                                componentsOptions,
+                                sourceToTargetMapping,
+                                selectedSourceId: dependency.sourceId,
+                                selectedTargetId: dependency.targetId
+                            })}
+                            targetOptions={this.filterTargets({
+                                componentsOptions,
+                                sourceToTargetMapping,
+                                selectedSourceId: dependency.sourceId,
+                                selectedTargetId: dependency.targetId
+                            })}
+                            onDataChanged={onDataChanged}
+                            showAction={true}
+                        />
+                    ))}
+                </SelectActionTable>
+            </div>
+        );
+    }
 }