Adding Prettier and fixing up eslint version

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

2 files changed, 336 insertions, 264 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
index 64e0d562ce..34bfceec24 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
@@ -13,106 +13,134 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 import LandingPageView from './SoftwareProductLandingPageView.jsx';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {onboardingMethod} from '../SoftwareProductConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { onboardingMethod } from '../SoftwareProductConstants.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
-
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 
 export const mapStateToProps = ({
-	softwareProduct,
-	licenseModel: {licenseAgreement},
+    softwareProduct,
+    licenseModel: { licenseAgreement }
 }) => {
-	let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents, softwareProductCategories = [], } = softwareProduct;
-	let {licensingData = {}} = currentSoftwareProduct;
-	let {licenseAgreementList} = licenseAgreement;
-	let {componentsList} = softwareProductComponents;
-	let licenseAgreementName = licenseAgreementList.find(la => la.id === licensingData.licenseAgreement);
-	if (licenseAgreementName) {
-		licenseAgreementName = licenseAgreementName.name;
-	} else if (licenseAgreementList.length === 0) { // otherwise the state of traingle svgicon will be updated post unmounting
-		licenseAgreementName = null;
-	}
-
-	let categoryName = '', subCategoryName = '', fullCategoryDisplayName = '';
-	const category = softwareProductCategories.find(ca => ca.uniqueId === currentSoftwareProduct.category);
-	if (category) {
-		categoryName = category.name;
-		const subcategories = category.subcategories || [];
-		const subcat = subcategories.find(sc => sc.uniqueId === currentSoftwareProduct.subCategory);
-		subCategoryName = subcat && subcat.name ? subcat.name : '';
-	}
-	fullCategoryDisplayName = `${subCategoryName} (${categoryName})`;
+    let {
+        softwareProductEditor: { data: currentSoftwareProduct = {} },
+        softwareProductComponents,
+        softwareProductCategories = []
+    } = softwareProduct;
+    let { licensingData = {} } = currentSoftwareProduct;
+    let { licenseAgreementList } = licenseAgreement;
+    let { componentsList } = softwareProductComponents;
+    let licenseAgreementName = licenseAgreementList.find(
+        la => la.id === licensingData.licenseAgreement
+    );
+    if (licenseAgreementName) {
+        licenseAgreementName = licenseAgreementName.name;
+    } else if (licenseAgreementList.length === 0) {
+        // otherwise the state of traingle svgicon will be updated post unmounting
+        licenseAgreementName = null;
+    }
 
+    let categoryName = '',
+        subCategoryName = '',
+        fullCategoryDisplayName = '';
+    const category = softwareProductCategories.find(
+        ca => ca.uniqueId === currentSoftwareProduct.category
+    );
+    if (category) {
+        categoryName = category.name;
+        const subcategories = category.subcategories || [];
+        const subcat = subcategories.find(
+            sc => sc.uniqueId === currentSoftwareProduct.subCategory
+        );
+        subCategoryName = subcat && subcat.name ? subcat.name : '';
+    }
+    fullCategoryDisplayName = `${subCategoryName} (${categoryName})`;
 
-	return {
-		currentSoftwareProduct: {
-			...currentSoftwareProduct,
-			licenseAgreementName,
-			fullCategoryDisplayName						
-		},		
-		componentsList,
-		isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
-	};
+    return {
+        currentSoftwareProduct: {
+            ...currentSoftwareProduct,
+            licenseAgreementName,
+            fullCategoryDisplayName
+        },
+        componentsList,
+        isManual:
+            currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
+    };
 };
 
-const mapActionsToProps = (dispatch, {version}) => {
-	return {
-		onDetailsSelect: ({id: softwareProductId}) =>
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, screenType: screenTypes.SOFTWARE_PRODUCT,
-				props: {softwareProductId, version}
-			}),
-		onCandidateInProcess: (softwareProductId) => ScreensHelper.loadScreen(dispatch, {
-			screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP, screenType: screenTypes.SOFTWARE_PRODUCT,
-			props: {softwareProductId, version}
-		}),	
-		onUpload: (softwareProductId, formData) =>
-			SoftwareProductActionHelper.uploadFile(dispatch, {
-				softwareProductId,
-				formData,
-				failedNotificationTitle: i18n('Upload validation failed'),
-				version
-			}),
+const mapActionsToProps = (dispatch, { version }) => {
+    return {
+        onDetailsSelect: ({ id: softwareProductId }) =>
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: { softwareProductId, version }
+            }),
+        onCandidateInProcess: softwareProductId =>
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: { softwareProductId, version }
+            }),
+        onUpload: (softwareProductId, formData) =>
+            SoftwareProductActionHelper.uploadFile(dispatch, {
+                softwareProductId,
+                formData,
+                failedNotificationTitle: i18n('Upload validation failed'),
+                version
+            }),
 
-		onUploadConfirmation: (softwareProductId, formData) =>
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_WARNING,
-				data:{
-					msg: i18n('Upload will erase existing data. Do you want to continue?'),
-					confirmationButtonText: i18n('Continue'),
-					title: i18n('Warning'),
-					onConfirmed: ()=>SoftwareProductActionHelper.uploadFile(dispatch, {
-						softwareProductId,
-						formData,
-						failedNotificationTitle: i18n('Upload validation failed'),
-						version
-					}),
-					onDeclined: () => dispatch({
-						type: modalActionTypes.GLOBAL_MODAL_CLOSE
-					})
-				}
-			}),
+        onUploadConfirmation: (softwareProductId, formData) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n(
+                        'Upload will erase existing data. Do you want to continue?'
+                    ),
+                    confirmationButtonText: i18n('Continue'),
+                    title: i18n('Warning'),
+                    onConfirmed: () =>
+                        SoftwareProductActionHelper.uploadFile(dispatch, {
+                            softwareProductId,
+                            formData,
+                            failedNotificationTitle: i18n(
+                                'Upload validation failed'
+                            ),
+                            version
+                        }),
+                    onDeclined: () =>
+                        dispatch({
+                            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+                        })
+                }
+            }),
 
-		onInvalidFileSizeUpload: () => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_ERROR,
-			data: {
-				title: i18n('Upload Failed'),
-				confirmationButtonText: i18n('Continue'),
-				msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist')
-			}
-		}),
-		onComponentSelect: ({id: softwareProductId, componentId}) => ScreensHelper.loadScreen(dispatch, {
-			screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT,
-			props: {softwareProductId, version, componentId}
-		}),
-		/** for the next version */
-		onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch)
-	};
+        onInvalidFileSizeUpload: () =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                data: {
+                    title: i18n('Upload Failed'),
+                    confirmationButtonText: i18n('Continue'),
+                    msg: i18n(
+                        "no zip or csar file was uploaded or expected file doesn't exist"
+                    )
+                }
+            }),
+        onComponentSelect: ({ id: softwareProductId, componentId }) =>
+            ScreensHelper.loadScreen(dispatch, {
+                screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: { softwareProductId, version, componentId }
+            }),
+        /** for the next version */
+        onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(LandingPageView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(LandingPageView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
index a73a849a08..bc8a2be646 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
@@ -18,7 +18,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Dropzone from 'react-dropzone';
 
-
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 
@@ -26,192 +25,237 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import SoftwareProductComponentsList from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js';
 
 const SoftwareProductPropType = PropTypes.shape({
-	name: PropTypes.string,
-	description: PropTypes.string,
-	version: PropTypes.string,
-	id: PropTypes.string,
-	categoryId: PropTypes.string,
-	vendorId: PropTypes.string,
-	status: PropTypes.string,
-	licensingData: PropTypes.object,
-	validationData: PropTypes.object
+    name: PropTypes.string,
+    description: PropTypes.string,
+    version: PropTypes.string,
+    id: PropTypes.string,
+    categoryId: PropTypes.string,
+    vendorId: PropTypes.string,
+    status: PropTypes.string,
+    licensingData: PropTypes.object,
+    validationData: PropTypes.object
 });
 
 const ComponentPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	displayName: PropTypes.string,
-	description: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    displayName: PropTypes.string,
+    description: PropTypes.string
 });
 
 class SoftwareProductLandingPageView extends React.Component {
+    state = {
+        fileName: '',
+        dragging: false,
+        files: []
+    };
+
+    static propTypes = {
+        currentSoftwareProduct: SoftwareProductPropType,
+        isReadOnlyMode: PropTypes.bool,
+        componentsList: PropTypes.arrayOf(ComponentPropType),
+        version: PropTypes.object,
+        onDetailsSelect: PropTypes.func,
+        onUpload: PropTypes.func,
+        onUploadConfirmation: PropTypes.func,
+        onInvalidFileSizeUpload: PropTypes.func,
+        onComponentSelect: PropTypes.func,
+        onAddComponent: PropTypes.func
+    };
+    componentDidMount() {
+        const { onCandidateInProcess, currentSoftwareProduct } = this.props;
+        if (currentSoftwareProduct.candidateOnboardingOrigin) {
+            onCandidateInProcess(currentSoftwareProduct.id);
+        }
+    }
+    render() {
+        let {
+            currentSoftwareProduct,
+            isReadOnlyMode,
+            isManual,
+            onDetailsSelect
+        } = this.props;
+        return (
+            <div className="software-product-landing-wrapper">
+                <Dropzone
+                    className={classnames('software-product-landing-view', {
+                        'active-dragging': this.state.dragging
+                    })}
+                    onDrop={files =>
+                        this.handleImportSubmit(files, isReadOnlyMode, isManual)
+                    }
+                    onDragEnter={() =>
+                        this.handleOnDragEnter(isReadOnlyMode, isManual)
+                    }
+                    onDragLeave={() => this.setState({ dragging: false })}
+                    multiple={false}
+                    disableClick={true}
+                    ref="fileInput"
+                    name="fileInput"
+                    accept=".zip, .csar">
+                    <div className="draggable-wrapper">
+                        <div className="software-product-landing-view-top">
+                            <div className="row">
+                                <ProductSummary
+                                    currentSoftwareProduct={
+                                        currentSoftwareProduct
+                                    }
+                                    onDetailsSelect={onDetailsSelect}
+                                />
+                                {this.renderProductDetails(
+                                    isManual,
+                                    isReadOnlyMode
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </Dropzone>
+                <SoftwareProductComponentsList />
+            </div>
+        );
+    }
+
+    handleOnDragEnter(isReadOnlyMode, isManual) {
+        if (!isReadOnlyMode && !isManual) {
+            this.setState({ dragging: true });
+        }
+    }
+
+    renderProductDetails(isManual, isReadOnlyMode) {
+        return (
+            <div className="details-panel">
+                {!isManual && (
+                    <div>
+                        <div className="software-product-landing-view-heading-title">
+                            {i18n('Software Product Attachments')}
+                        </div>
+                        <DraggableUploadFileBox
+                            dataTestId="upload-btn"
+                            isReadOnlyMode={isReadOnlyMode}
+                            className={classnames(
+                                'software-product-landing-view-top-block-col-upl',
+                                { disabled: isReadOnlyMode }
+                            )}
+                            onClick={() => this.refs.fileInput.open()}
+                        />
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    handleImportSubmit(files, isReadOnlyMode, isManual) {
+        if (isReadOnlyMode || isManual) {
+            return;
+        }
+        if (files[0] && files[0].size) {
+            this.setState({
+                fileName: files[0].name,
+                dragging: false,
+                complete: '0'
+            });
+            this.startUploading(files);
+        } else {
+            this.setState({
+                dragging: false
+            });
+            this.props.onInvalidFileSizeUpload();
+        }
+    }
 
-	state = {
-
-		fileName: '',
-		dragging: false,
-		files: []
-	};
-
-	static propTypes = {
-		currentSoftwareProduct: SoftwareProductPropType,
-		isReadOnlyMode: PropTypes.bool,
-		componentsList: PropTypes.arrayOf(ComponentPropType),
-		version: PropTypes.object,
-		onDetailsSelect: PropTypes.func,
-		onUpload: PropTypes.func,
-		onUploadConfirmation: PropTypes.func,
-		onInvalidFileSizeUpload: PropTypes.func,
-		onComponentSelect: PropTypes.func,
-		onAddComponent: PropTypes.func
-	};
-	componentDidMount() {
-		const {onCandidateInProcess, currentSoftwareProduct} = this.props;
-		if (currentSoftwareProduct.candidateOnboardingOrigin) {
-			onCandidateInProcess(currentSoftwareProduct.id);
-		}
-	}
-	render() {
-		let {currentSoftwareProduct, isReadOnlyMode, isManual, onDetailsSelect} =  this.props;
-		return (
-			<div className='software-product-landing-wrapper'>
-				<Dropzone
-					className={classnames('software-product-landing-view', {'active-dragging': this.state.dragging})}
-					onDrop={files => this.handleImportSubmit(files, isReadOnlyMode, isManual)}
-					onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode, isManual)}
-					onDragLeave={() => this.setState({dragging:false})}
-					multiple={false}
-					disableClick={true}
-					ref='fileInput'
-					name='fileInput'
-					accept='.zip, .csar'>
-					<div className='draggable-wrapper'>
-						<div className='software-product-landing-view-top'>
-							<div className='row'>
-								<ProductSummary currentSoftwareProduct={currentSoftwareProduct} onDetailsSelect={onDetailsSelect} />
-								{this.renderProductDetails(isManual, isReadOnlyMode)}
-							</div>
-						</div>
-					</div>
-				</Dropzone>
-				<SoftwareProductComponentsList/>
-			</div>
-		);
-	}
-
-	handleOnDragEnter(isReadOnlyMode, isManual) {
-		if (!isReadOnlyMode && !isManual) {
-			this.setState({dragging: true});
-		}
-	}
-
-	renderProductDetails(isManual, isReadOnlyMode) {
-		return (
-			<div className='details-panel'>
-				{ !isManual && <div>
-					<div className='software-product-landing-view-heading-title'>{i18n('Software Product Attachments')}</div>
-						<DraggableUploadFileBox
-							dataTestId='upload-btn'
-							isReadOnlyMode={isReadOnlyMode}
-							className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}
-							onClick={() => this.refs.fileInput.open()}/>
-					</div>
-				}
-			</div>
-		);
-	}
-
-	handleImportSubmit(files, isReadOnlyMode, isManual) {
-		if (isReadOnlyMode || isManual) {
-			return;
-		}
-		if (files[0] && files[0].size) {
-			this.setState({
-				fileName: files[0].name,
-				dragging: false,
-				complete: '0',
-			});
-			this.startUploading(files);
-		}
-		else {
-			this.setState({
-				dragging: false
-			});
-			this.props.onInvalidFileSizeUpload();
-		}
-
-	}
-
-	startUploading(files) {
-		let {onUpload, currentSoftwareProduct, onUploadConfirmation} = this.props;
-
-		let {validationData} = currentSoftwareProduct;
-
-		if (!(files && files.length)) {
-			return;
-		}
-		let file = files[0];
-		let formData = new FormData();
-		formData.append('upload', file);
-		this.refs.fileInput.value = '';
-
-		if (validationData) {
-			onUploadConfirmation(currentSoftwareProduct.id, formData);
-		}else {
-			onUpload(currentSoftwareProduct.id, formData);
-		}
-
-	}
+    startUploading(files) {
+        let {
+            onUpload,
+            currentSoftwareProduct,
+            onUploadConfirmation
+        } = this.props;
+
+        let { validationData } = currentSoftwareProduct;
+
+        if (!(files && files.length)) {
+            return;
+        }
+        let file = files[0];
+        let formData = new FormData();
+        formData.append('upload', file);
+        this.refs.fileInput.value = '';
+
+        if (validationData) {
+            onUploadConfirmation(currentSoftwareProduct.id, formData);
+        } else {
+            onUpload(currentSoftwareProduct.id, formData);
+        }
+    }
 }
 
-const ProductSummary = ({currentSoftwareProduct, onDetailsSelect}) => {
-	let {name = '', description = '', vendorName = '', fullCategoryDisplayName = '', licenseAgreementName = ''}  = currentSoftwareProduct;
-	return (
-		<div className='details-panel'>
-			<div className='software-product-landing-view-heading-title'>{i18n('Software Product Details')}</div>
-			<div
-				className='software-product-landing-view-top-block clickable'
-				onClick={() => onDetailsSelect(currentSoftwareProduct)}>
-				<div className='details-container'>
-					<div className='single-detail-section title-section'>
-						<div className='single-detail-section title-text'>
-							{name}
-						</div>
-					</div>
-					<div className='details-section'>
-						<div className='multiple-details-section'>
-							<div className='detail-col' >
-								<div className='title'>{i18n('Vendor')}</div>
-								<div className='description'>{vendorName}</div>
-							</div>
-							<div className='detail-col'>
-								<div className='title'>{i18n('Category')}</div>
-								<div className='description'>{fullCategoryDisplayName}</div>
-							</div>
-							<div className='detail-col'>
-								<div className='title extra-large'>{i18n('License Agreement')}</div>
-								<div className='description'>
-									<LicenseAgreement licenseAgreementName={licenseAgreementName}/>
-								</div>
-							</div>
-						</div>
-						<div className='single-detail-section'>
-							<div className='title'>{i18n('Description')}</div>
-							<div className='description'>{description}</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
+const ProductSummary = ({ currentSoftwareProduct, onDetailsSelect }) => {
+    let {
+        name = '',
+        description = '',
+        vendorName = '',
+        fullCategoryDisplayName = '',
+        licenseAgreementName = ''
+    } = currentSoftwareProduct;
+    return (
+        <div className="details-panel">
+            <div className="software-product-landing-view-heading-title">
+                {i18n('Software Product Details')}
+            </div>
+            <div
+                className="software-product-landing-view-top-block clickable"
+                onClick={() => onDetailsSelect(currentSoftwareProduct)}>
+                <div className="details-container">
+                    <div className="single-detail-section title-section">
+                        <div className="single-detail-section title-text">
+                            {name}
+                        </div>
+                    </div>
+                    <div className="details-section">
+                        <div className="multiple-details-section">
+                            <div className="detail-col">
+                                <div className="title">{i18n('Vendor')}</div>
+                                <div className="description">{vendorName}</div>
+                            </div>
+                            <div className="detail-col">
+                                <div className="title">{i18n('Category')}</div>
+                                <div className="description">
+                                    {fullCategoryDisplayName}
+                                </div>
+                            </div>
+                            <div className="detail-col">
+                                <div className="title extra-large">
+                                    {i18n('License Agreement')}
+                                </div>
+                                <div className="description">
+                                    <LicenseAgreement
+                                        licenseAgreementName={
+                                            licenseAgreementName
+                                        }
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className="single-detail-section">
+                            <div className="title">{i18n('Description')}</div>
+                            <div className="description">{description}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
 };
 
-
-const LicenseAgreement = ({licenseAgreementName}) => {
-	if (!licenseAgreementName) {
-		return (<div className='missing-license'><SVGIcon color='warning' name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>);
-	}
-	return <div>{licenseAgreementName}</div>;
+const LicenseAgreement = ({ licenseAgreementName }) => {
+    if (!licenseAgreementName) {
+        return (
+            <div className="missing-license">
+                <SVGIcon color="warning" name="exclamationTriangleFull" />
+                <div className="warning-text">{i18n('Missing')}</div>
+            </div>
+        );
+    }
+    return <div>{licenseAgreementName}</div>;
 };
 
 export default SoftwareProductLandingPageView;