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, 441 insertions, 272 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
index ce6d5260d7..1d4efd9104 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
@@ -13,7 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import Button from 'sdc-ui/lib/react/Button.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
@@ -21,307 +21,476 @@ import FormControl from 'react-bootstrap/lib/FormControl.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SelectInput from 'nfvo-components/input/SelectInput.jsx';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import {fileTypes} from './HeatSetupConstants.js';
-import {tabsMapping} from '../SoftwareProductAttachmentsConstants.js';
-import {sortable} from 'react-sortable';
+import { fileTypes } from './HeatSetupConstants.js';
+import { tabsMapping } from '../SoftwareProductAttachmentsConstants.js';
+import { sortable } from 'react-sortable';
 
 class ListItem extends Component {
-
-	render() {
-		return (
-			<li {...this.props}>{this.props.children}</li>
-		);
-	}
+    render() {
+        return <li {...this.props}>{this.props.children}</li>;
+    }
 }
 
-
 const SortableListItem = sortable(ListItem);
 
 class SortableModuleFileList extends Component {
-
-	state = {
-		draggingIndex: null,
-		data: this.props.modules
-	};
-
-
-	componentWillReceiveProps(nextProps) {
-		this.setState({data: nextProps.modules});
-	}
-
-	render() {
-
-		let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist, isReadOnlyMode} = this.props;
-		const childProps = module => ({
-			module,
-			onModuleRename,
-			onModuleDelete,
-			onModuleFileTypeChange: (value, type) => onModuleFileTypeChange({module, value, type}),
-			files: unassigned
-		});
-		let listItems = this.state.data.map(function (item, i) {
-			return (
-				<SortableListItem
-					key={i}
-					updateState={data => this.setState(data)}
-					items={this.state.data}
-					draggingIndex={this.state.draggingIndex}
-					sortId={i}
-					outline='list'><ModuleFile {...childProps(item)} isReadOnlyMode={this.props.isReadOnlyMode} /></SortableListItem>
-			);
-		}, this);
-
-		return (
-			<div className={`modules-list-wrapper ${(listItems.length > 0) ? 'modules-list-wrapper-divider' : ''}`}>
-				<div className='modules-list-header'>
-					{!isBaseExist && <div><Button btnType='link' onClick={onBaseAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Base')}</Button></div>}
-					<div><Button btnType='link' onClick={onModuleAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Module')}</Button></div>
-				</div>
-				{(listItems.length > 0) && <ul>{listItems}</ul>}
-			</div>
-		);
-	}
+    state = {
+        draggingIndex: null,
+        data: this.props.modules
+    };
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({ data: nextProps.modules });
+    }
+
+    render() {
+        let {
+            unassigned,
+            onModuleRename,
+            onModuleDelete,
+            onModuleAdd,
+            onBaseAdd,
+            onModuleFileTypeChange,
+            isBaseExist,
+            isReadOnlyMode
+        } = this.props;
+        const childProps = module => ({
+            module,
+            onModuleRename,
+            onModuleDelete,
+            onModuleFileTypeChange: (value, type) =>
+                onModuleFileTypeChange({ module, value, type }),
+            files: unassigned
+        });
+        let listItems = this.state.data.map(function(item, i) {
+            return (
+                <SortableListItem
+                    key={i}
+                    updateState={data => this.setState(data)}
+                    items={this.state.data}
+                    draggingIndex={this.state.draggingIndex}
+                    sortId={i}
+                    outline="list">
+                    <ModuleFile
+                        {...childProps(item)}
+                        isReadOnlyMode={this.props.isReadOnlyMode}
+                    />
+                </SortableListItem>
+            );
+        }, this);
+
+        return (
+            <div
+                className={`modules-list-wrapper ${
+                    listItems.length > 0 ? 'modules-list-wrapper-divider' : ''
+                }`}>
+                <div className="modules-list-header">
+                    {!isBaseExist && (
+                        <div>
+                            <Button
+                                btnType="link"
+                                onClick={onBaseAdd}
+                                disabled={
+                                    isReadOnlyMode || unassigned.length === 0
+                                }>
+                                {i18n('Add Base')}
+                            </Button>
+                        </div>
+                    )}
+                    <div>
+                        <Button
+                            btnType="link"
+                            onClick={onModuleAdd}
+                            disabled={
+                                isReadOnlyMode || unassigned.length === 0
+                            }>
+                            {i18n('Add Module')}
+                        </Button>
+                    </div>
+                </div>
+                {listItems.length > 0 && <ul>{listItems}</ul>}
+            </div>
+        );
+    }
 }
 
-const tooltip = (name) => <Tooltip id='tooltip-bottom'>{name}</Tooltip>;
-const UnassignedFileList = (props) => {
-	return (
-		<div>
-			<div className='modules-list-header'/>
-				<div className='unassigned-files'>
-			<div className='unassigned-files-title'>{i18n('UNASSIGNED FILES')}</div>
-			<div className='unassigned-files-list'>{props.children}</div>
-			</div>
-		</div>
-	);
+const tooltip = name => <Tooltip id="tooltip-bottom">{name}</Tooltip>;
+const UnassignedFileList = props => {
+    return (
+        <div>
+            <div className="modules-list-header" />
+            <div className="unassigned-files">
+                <div className="unassigned-files-title">
+                    {i18n('UNASSIGNED FILES')}
+                </div>
+                <div className="unassigned-files-list">{props.children}</div>
+            </div>
+        </div>
+    );
 };
 
 const EmptyListContent = props => {
-	let {heatDataExist} = props;
-	let displayText = heatDataExist ? 'All Files Are Assigned' : '';
-	return (
-		<div className='go-to-validation-button-wrapper'>
-			<div className='all-files-assigned'>{i18n(displayText)}</div>			
-		</div>
-	);
+    let { heatDataExist } = props;
+    let displayText = heatDataExist ? 'All Files Are Assigned' : '';
+    return (
+        <div className="go-to-validation-button-wrapper">
+            <div className="all-files-assigned">{i18n(displayText)}</div>
+        </div>
+    );
 };
-const UnassignedFile = (props) => (
-	<OverlayTrigger placement='bottom' overlay={tooltip(props.name)} delayShow={1000}>
-		<li data-test-id='unassigned-files' className='unassigned-files-list-item'>{props.name}</li>
-	</OverlayTrigger>
+const UnassignedFile = props => (
+    <OverlayTrigger
+        placement="bottom"
+        overlay={tooltip(props.name)}
+        delayShow={1000}>
+        <li
+            data-test-id="unassigned-files"
+            className="unassigned-files-list-item">
+            {props.name}
+        </li>
+    </OverlayTrigger>
 );
 
-const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => {
-	const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
-	const action = add ? onAdd : onDelete;
-	return (
-		<Button disabled={isReadOnlyMode} onClick={action} btnType='link' className='add-or-delete-volumes' iconName={add ? 'plus' : 'close'}>{i18n(displayText)}</Button>
-	);
+const AddOrDeleteVolumeFiles = ({
+    add = true,
+    onAdd,
+    onDelete,
+    isReadOnlyMode
+}) => {
+    const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
+    const action = add ? onAdd : onDelete;
+    return (
+        <Button
+            disabled={isReadOnlyMode}
+            onClick={action}
+            btnType="link"
+            className="add-or-delete-volumes"
+            iconName={add ? 'plus' : 'close'}>
+            {i18n(displayText)}
+        </Button>
+    );
 };
 
-const SelectWithFileType = ({type, selected, files, onChange}) => {
-
-	let filteredFiledAccordingToType = files.filter(file => file.label.search(type.regex) > -1);
-	if (selected) {
-		filteredFiledAccordingToType = filteredFiledAccordingToType.concat({label: selected, value: selected});
-	}
-
-	return (
-		<SelectInput
-			data-test-id={`${type.label}-list`}
-			label={type.label}
-			value={selected}
-			onChange={value => value !== selected && onChange(value, type.label)}
-			disabled={filteredFiledAccordingToType.length === 0}
-			placeholder={filteredFiledAccordingToType.length === 0 ? '' : undefined}
-			clearable={true}
-			options={filteredFiledAccordingToType} />
-	);
+const SelectWithFileType = ({ type, selected, files, onChange }) => {
+    let filteredFiledAccordingToType = files.filter(
+        file => file.label.search(type.regex) > -1
+    );
+    if (selected) {
+        filteredFiledAccordingToType = filteredFiledAccordingToType.concat({
+            label: selected,
+            value: selected
+        });
+    }
+
+    return (
+        <SelectInput
+            data-test-id={`${type.label}-list`}
+            label={type.label}
+            value={selected}
+            onChange={value =>
+                value !== selected && onChange(value, type.label)
+            }
+            disabled={filteredFiledAccordingToType.length === 0}
+            placeholder={
+                filteredFiledAccordingToType.length === 0 ? '' : undefined
+            }
+            clearable={true}
+            options={filteredFiledAccordingToType}
+        />
+    );
 };
 
 class NameEditInput extends Component {
-	componentDidMount() {
-		this.input.focus();
-	}
-
-	render() {
-		return (
-			<FormControl {...this.props} className='name-edit' inputRef={input => this.input = input}/>
-		);
-	}
+    componentDidMount() {
+        this.input.focus();
+    }
+
+    render() {
+        return (
+            <FormControl
+                {...this.props}
+                className="name-edit"
+                inputRef={input => (this.input = input)}
+            />
+        );
+    }
 }
 
 class ModuleFile extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			isInNameEdit: false,
-			displayVolumes: Boolean(props.module.vol || props.module.volEnv)
-		};
-	}
-
-	handleSubmit(event, name) {
-		if (event.keyCode === 13) {
-			this.handleModuleRename(event, name);
-		}
-	}
-
-	componentWillReceiveProps(nextProps) {
-		this.setState({displayVolumes: Boolean(nextProps.module.vol || nextProps.module.volEnv)});
-	}
-
-	handleModuleRename(event, name) {
-		this.setState({isInNameEdit: false});
-		this.props.onModuleRename(name, event.target.value);
-	}
-
-	deleteVolumeFiles() {
-		const { onModuleFileTypeChange} = this.props;
-		onModuleFileTypeChange(null, fileTypes.VOL.label);
-		onModuleFileTypeChange(null, fileTypes.VOL_ENV.label);
-		this.setState({displayVolumes: false});
-	}
-
-	renderNameAccordingToEditState() {
-		const {module: {name}} = this.props;
-		if (this.state.isInNameEdit) {
-			return (<NameEditInput defaultValue={name} onBlur={evt => this.handleModuleRename(evt, name)} onKeyDown={evt => this.handleSubmit(evt, name)}/>);
-		}
-		return (<span className='filename-text'>{name}</span>);
-	}
-
-	render() {
-		const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange, isReadOnlyMode} = this.props;
-		const {displayVolumes} = this.state;
-		const moduleType = isBase ? 'BASE' : 'MODULE';
-		return (
-			<div className='modules-list-item' data-test-id='module-item'>
-				<div className='modules-list-item-controllers'>
-					<div className='modules-list-item-filename'>
-						<SVGIcon name={isBase ? 'base' : 'module'} color='primary' iconClassName='heat-setup-module-icon' />
-						<span className='module-title-by-type'>{`${moduleType}: `}</span>
-						<div className={`text-and-icon ${this.state.isInNameEdit ? 'in-edit' : ''}`}>
-							{this.renderNameAccordingToEditState()}
-							{!this.state.isInNameEdit && <SVGIcon
-								name='pencil'
-								onClick={() => this.setState({isInNameEdit: true})}
-								data-test-id={isBase ? 'base-name' : 'module-name'}/>}
-						</div>
-					</div>
-					<SVGIcon name='trashO' onClick={() => onModuleDelete(name)} data-test-id='module-delete'/>
-				</div>
-				<div className='modules-list-item-selectors'>
-					<SelectWithFileType
-						type={fileTypes.YAML}
-						files={files}
-						selected={yaml}
-						onChange={onModuleFileTypeChange}/>
-					<SelectWithFileType
-						type={fileTypes.ENV}
-						files={files}
-						selected={env}
-						onChange={onModuleFileTypeChange}/>
-					{displayVolumes  && <SelectWithFileType
-						type={fileTypes.VOL}
-						files={files}
-						selected={vol}
-						onChange={onModuleFileTypeChange}/>}
-					{displayVolumes && <SelectWithFileType
-						type={fileTypes.VOL_ENV}
-						files={files}
-						selected={volEnv}
-						onChange={onModuleFileTypeChange}/>}
-					<AddOrDeleteVolumeFiles isReadOnlyMode={isReadOnlyMode} onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
-				</div>
-			</div>
-		);
-	}
+    constructor(props) {
+        super(props);
+        this.state = {
+            isInNameEdit: false,
+            displayVolumes: Boolean(props.module.vol || props.module.volEnv)
+        };
+    }
+
+    handleSubmit(event, name) {
+        if (event.keyCode === 13) {
+            this.handleModuleRename(event, name);
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            displayVolumes: Boolean(
+                nextProps.module.vol || nextProps.module.volEnv
+            )
+        });
+    }
+
+    handleModuleRename(event, name) {
+        this.setState({ isInNameEdit: false });
+        this.props.onModuleRename(name, event.target.value);
+    }
+
+    deleteVolumeFiles() {
+        const { onModuleFileTypeChange } = this.props;
+        onModuleFileTypeChange(null, fileTypes.VOL.label);
+        onModuleFileTypeChange(null, fileTypes.VOL_ENV.label);
+        this.setState({ displayVolumes: false });
+    }
+
+    renderNameAccordingToEditState() {
+        const { module: { name } } = this.props;
+        if (this.state.isInNameEdit) {
+            return (
+                <NameEditInput
+                    defaultValue={name}
+                    onBlur={evt => this.handleModuleRename(evt, name)}
+                    onKeyDown={evt => this.handleSubmit(evt, name)}
+                />
+            );
+        }
+        return <span className="filename-text">{name}</span>;
+    }
+
+    render() {
+        const {
+            module: { name, isBase, yaml, env, vol, volEnv },
+            onModuleDelete,
+            files,
+            onModuleFileTypeChange,
+            isReadOnlyMode
+        } = this.props;
+        const { displayVolumes } = this.state;
+        const moduleType = isBase ? 'BASE' : 'MODULE';
+        return (
+            <div className="modules-list-item" data-test-id="module-item">
+                <div className="modules-list-item-controllers">
+                    <div className="modules-list-item-filename">
+                        <SVGIcon
+                            name={isBase ? 'base' : 'module'}
+                            color="primary"
+                            iconClassName="heat-setup-module-icon"
+                        />
+                        <span className="module-title-by-type">{`${moduleType}: `}</span>
+                        <div
+                            className={`text-and-icon ${
+                                this.state.isInNameEdit ? 'in-edit' : ''
+                            }`}>
+                            {this.renderNameAccordingToEditState()}
+                            {!this.state.isInNameEdit && (
+                                <SVGIcon
+                                    name="pencil"
+                                    onClick={() =>
+                                        this.setState({ isInNameEdit: true })
+                                    }
+                                    data-test-id={
+                                        isBase ? 'base-name' : 'module-name'
+                                    }
+                                />
+                            )}
+                        </div>
+                    </div>
+                    <SVGIcon
+                        name="trashO"
+                        onClick={() => onModuleDelete(name)}
+                        data-test-id="module-delete"
+                    />
+                </div>
+                <div className="modules-list-item-selectors">
+                    <SelectWithFileType
+                        type={fileTypes.YAML}
+                        files={files}
+                        selected={yaml}
+                        onChange={onModuleFileTypeChange}
+                    />
+                    <SelectWithFileType
+                        type={fileTypes.ENV}
+                        files={files}
+                        selected={env}
+                        onChange={onModuleFileTypeChange}
+                    />
+                    {displayVolumes && (
+                        <SelectWithFileType
+                            type={fileTypes.VOL}
+                            files={files}
+                            selected={vol}
+                            onChange={onModuleFileTypeChange}
+                        />
+                    )}
+                    {displayVolumes && (
+                        <SelectWithFileType
+                            type={fileTypes.VOL_ENV}
+                            files={files}
+                            selected={volEnv}
+                            onChange={onModuleFileTypeChange}
+                        />
+                    )}
+                    <AddOrDeleteVolumeFiles
+                        isReadOnlyMode={isReadOnlyMode}
+                        onAdd={() => this.setState({ displayVolumes: true })}
+                        onDelete={() => this.deleteVolumeFiles()}
+                        add={!displayVolumes}
+                    />
+                </div>
+            </div>
+        );
+    }
 }
 
 class ArtifactOrNestedFileList extends Component {
-
-	render() {
-		let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props;
-		return (
-			<div className={`artifact-files ${type === 'nested' ? 'nested' : ''} ${headerClassName} `}>
-				<div className='artifact-files-header'>
-					<span>
-						{type === 'artifact' && (<SVGIcon color='primary' name='artifacts' iconClassName='heat-setup-module-icon' />)}
-						{`${title}`}
-					</span>
-					{type === 'artifact' && <Button disabled={isReadOnlyMode} btnType='link' className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</Button>}
-				</div>
-				{type === 'nested' ? (
-					<ul className='nested-list'>{selected.map(nested =>
-						<li key={nested} className='nested-list-item'>{nested}</li>
-					)}</ul>) :
-					(<SelectInput
-						options={options}
-						onMultiSelectChanged={onSelectChanged || (() => {
-						})}
-						value={selected}
-						clearable={false}
-						placeholder={i18n('Add Artifact')}
-						multi/>)
-				}
-			</div>
-		);
-	}
+    render() {
+        let {
+            type,
+            title,
+            selected,
+            options,
+            onSelectChanged,
+            onAddAllUnassigned,
+            isReadOnlyMode,
+            headerClassName
+        } = this.props;
+        return (
+            <div
+                className={`artifact-files ${
+                    type === 'nested' ? 'nested' : ''
+                } ${headerClassName} `}>
+                <div className="artifact-files-header">
+                    <span>
+                        {type === 'artifact' && (
+                            <SVGIcon
+                                color="primary"
+                                name="artifacts"
+                                iconClassName="heat-setup-module-icon"
+                            />
+                        )}
+                        {`${title}`}
+                    </span>
+                    {type === 'artifact' && (
+                        <Button
+                            disabled={isReadOnlyMode}
+                            btnType="link"
+                            className="add-all-unassigned"
+                            onClick={onAddAllUnassigned}>
+                            {i18n('Add All Unassigned Files')}
+                        </Button>
+                    )}
+                </div>
+                {type === 'nested' ? (
+                    <ul className="nested-list">
+                        {selected.map(nested => (
+                            <li key={nested} className="nested-list-item">
+                                {nested}
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <SelectInput
+                        options={options}
+                        onMultiSelectChanged={onSelectChanged || (() => {})}
+                        value={selected}
+                        clearable={false}
+                        placeholder={i18n('Add Artifact')}
+                        multi
+                    />
+                )}
+            </div>
+        );
+    }
 }
 
-const buildLabelValueObject = str => (typeof str === 'string' ? {value: str, label: str} : str);
+const buildLabelValueObject = str =>
+    typeof str === 'string' ? { value: str, label: str } : str;
 
 class SoftwareProductHeatSetupView extends Component {
-
-	processAndValidateHeat(heatData, heatDataCache){
-		let {onProcessAndValidate, changeAttachmentsTab, version} = this.props;
-		onProcessAndValidate({heatData, heatDataCache, version}).then(
-			() => changeAttachmentsTab(tabsMapping.VALIDATION)
-		);
-	}
-
-	render() {
-		let {modules, isReadOnlyMode, heatDataExist, unassigned, artifacts, nested, onArtifactListChange, onAddAllUnassigned} = this.props;
-
-		const formattedUnassigned = unassigned.map(buildLabelValueObject);
-		const formattedArtifacts = artifacts.map(buildLabelValueObject);
-		return (
-			<div className={`heat-setup-view ${isReadOnlyMode ? 'disabled' : ''}`}>
-				<div className='heat-setup-view-modules-and-artifacts'>
-					<SortableModuleFileList
-						{...this.props}
-						isReadOnlyMode={this.props.isReadOnlyMode}
-						artifacts={formattedArtifacts}
-						unassigned={formattedUnassigned}/>
-					<ArtifactOrNestedFileList
-						type={'artifact'}
-						title={i18n('ARTIFACTS')}
-						options={formattedUnassigned}
-						selected={formattedArtifacts}
-						onSelectChanged={onArtifactListChange}
-						isReadOnlyMode={this.props.isReadOnlyMode}
-						headerClassName={(modules && modules.length > 0) ? 'with-list-items' : ''}
-						onAddAllUnassigned={onAddAllUnassigned}/>
-					<ArtifactOrNestedFileList
-						type={'nested'}
-						title={i18n('NESTED HEAT FILES')}
-						options={[]}
-						isReadOnlyMode={this.props.isReadOnlyMode}
-						selected={nested}/>
-				</div>
-				<UnassignedFileList>
-					{
-						formattedUnassigned.length > 0 ?
-						(<ul>{formattedUnassigned.map(file => <UnassignedFile key={file.label} name={file.label}/>)}</ul>)
-						:
-						(<EmptyListContent
-							heatDataExist={heatDataExist}/>)
-					}
-				</UnassignedFileList>
-			</div>
-		);
-	}
-
+    processAndValidateHeat(heatData, heatDataCache) {
+        let {
+            onProcessAndValidate,
+            changeAttachmentsTab,
+            version
+        } = this.props;
+        onProcessAndValidate({ heatData, heatDataCache, version }).then(() =>
+            changeAttachmentsTab(tabsMapping.VALIDATION)
+        );
+    }
+
+    render() {
+        let {
+            modules,
+            isReadOnlyMode,
+            heatDataExist,
+            unassigned,
+            artifacts,
+            nested,
+            onArtifactListChange,
+            onAddAllUnassigned
+        } = this.props;
+
+        const formattedUnassigned = unassigned.map(buildLabelValueObject);
+        const formattedArtifacts = artifacts.map(buildLabelValueObject);
+        return (
+            <div
+                className={`heat-setup-view ${
+                    isReadOnlyMode ? 'disabled' : ''
+                }`}>
+                <div className="heat-setup-view-modules-and-artifacts">
+                    <SortableModuleFileList
+                        {...this.props}
+                        isReadOnlyMode={this.props.isReadOnlyMode}
+                        artifacts={formattedArtifacts}
+                        unassigned={formattedUnassigned}
+                    />
+                    <ArtifactOrNestedFileList
+                        type={'artifact'}
+                        title={i18n('ARTIFACTS')}
+                        options={formattedUnassigned}
+                        selected={formattedArtifacts}
+                        onSelectChanged={onArtifactListChange}
+                        isReadOnlyMode={this.props.isReadOnlyMode}
+                        headerClassName={
+                            modules && modules.length > 0
+                                ? 'with-list-items'
+                                : ''
+                        }
+                        onAddAllUnassigned={onAddAllUnassigned}
+                    />
+                    <ArtifactOrNestedFileList
+                        type={'nested'}
+                        title={i18n('NESTED HEAT FILES')}
+                        options={[]}
+                        isReadOnlyMode={this.props.isReadOnlyMode}
+                        selected={nested}
+                    />
+                </div>
+                <UnassignedFileList>
+                    {formattedUnassigned.length > 0 ? (
+                        <ul>
+                            {formattedUnassigned.map(file => (
+                                <UnassignedFile
+                                    key={file.label}
+                                    name={file.label}
+                                />
+                            ))}
+                        </ul>
+                    ) : (
+                        <EmptyListContent heatDataExist={heatDataExist} />
+                    )}
+                </UnassignedFileList>
+            </div>
+        );
+    }
 }
 
 export default SoftwareProductHeatSetupView;