[SDC] OnBoard with enabled tests and features

Change-Id: I4c1bbf6e1c854cf97a3561c736f83da44b58b7c0
Signed-off-by: az2497 <avi.ziv@amdocs.com>

[SDC] OnBoard with enabled tests and features.

Change-Id: Icd52f039aee4dd393a1404d530bb9fdd0b20e604
Signed-off-by: az2497 <avi.ziv@amdocs.com>

3 files changed, 60 insertions, 56 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
index ef4aecf568..3da26cc20f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
@@ -18,7 +18,7 @@ import Tabs from 'react-bootstrap/lib/Tabs.js';
 import Tab from 'react-bootstrap/lib/Tab.js';
 import {tabsMapping} from './SoftwareProductAttachmentsConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import Icon from 'nfvo-components/icon/Icon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import HeatValidation from './validation/HeatValidation.js';
 
 class HeatScreenView extends Component {
@@ -38,27 +38,32 @@ class HeatScreenView extends Component {
 			<div className='vsp-attachments-view'>
 				<div className='attachments-view-controllers'>
 					{(this.state.activeTab === tabsMapping.SETUP) &&
-						<Icon
-							iconClassName={heatDataExist ? '' : 'disabled'}
-							className={heatDataExist ? '' : 'disabled'}
-							image='download'
+						<SVGIcon
+							disabled={heatDataExist ? false : true}
+							name='download'
+							className='icon-component'
 							label={i18n('Download HEAT')}
+							labelPosition='right'
+							color='secondary'
 							onClick={heatDataExist ? () => onDownload({heatCandidate: heatSetup, isReadOnlyMode, version}) : undefined}
 							data-test-id='download-heat'/>}
 					{(this.state.activeTab === tabsMapping.VALIDATION && softwareProductId) &&
-						<Icon
-							iconClassName={this.props.goToOverview ? '' : 'disabled'}
-							className={`go-to-overview-icon ${this.props.goToOverview ? '' : 'disabled'}`}
-							labelClassName='go-to-overview-label'
+						<SVGIcon
+							disabled={this.props.goToOverview !== true}
 							onClick={this.props.goToOverview ? () => onGoToOverview({version}) : undefined}
-							image='go-to-overview'
+							name='proceedToOverview'
+							className='icon-component'
 							label={i18n('Go to Overview')}
+							labelPosition='right'
+							color={this.props.goToOverview ? 'primary' : 'secondary'}
 							data-test-id='go-to-overview'/>}
-					<Icon
-						image='upload'
+					<SVGIcon
+						name='upload'
+						className='icon-component'
 						label={i18n('Upload New HEAT')}
-						className={isReadOnlyMode ? 'disabled' : ''}
-						iconClassName={isReadOnlyMode ? 'disabled' : ''}
+						labelPosition='right'
+						color='secondary'
+						disabled={isReadOnlyMode}
 						onClick={evt => {this.refs.hiddenImportFileInput.click(evt);}}
 						data-test-id='upload-heat'/>
 					<input
@@ -87,9 +92,9 @@ class HeatScreenView extends Component {
 	}
 
 	handleTabPress(key) {
-		let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props;		
+		let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props;
 		switch (key) {
-			case tabsMapping.VALIDATION:				
+			case tabsMapping.VALIDATION:
 				onProcessAndValidate({heatData: heatSetup, heatDataCache: heatSetupCache, isReadOnlyMode, version}).then(
 					() => this.setState({activeTab: tabsMapping.VALIDATION})
 				);
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 901a583e24..17b3179d01 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
@@ -20,7 +20,6 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 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 Icon from 'nfvo-components/icon/Icon.jsx';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import {fileTypes} from './HeatSetupConstants.js';
 import {tabsMapping} from '../SoftwareProductAttachmentsConstants.js';
@@ -52,7 +51,7 @@ class SortableModuleFileList extends Component {
 
 	render() {
 
-		let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist} = this.props;
+		let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist, isReadOnlyMode} = this.props;
 		const childProps = module => ({
 			module,
 			onModuleRename,
@@ -68,19 +67,17 @@ class SortableModuleFileList extends Component {
 					items={this.state.data}
 					draggingIndex={this.state.draggingIndex}
 					sortId={i}
-					outline='list'><ModuleFile {...childProps(item)} /></SortableListItem>
+					outline='list'><ModuleFile {...childProps(item)} isReadOnlyMode={this.props.isReadOnlyMode} /></SortableListItem>
 			);
 		}, this);
 
 		return (
-			<div className='modules-list-wrapper'>
+			<div className={`modules-list-wrapper ${(listItems.length > 0) ? 'modules-list-wrapper-divider' : ''}`}>
 				<div className='modules-list-header'>
-					<div className='modules-list-controllers'>
-						{!isBaseExist && <Button btnType='link' onClick={onBaseAdd} disabled={unassigned.length === 0}>{i18n('Add Base')}</Button>}
-						<Button btnType='link' onClick={onModuleAdd} disabled={unassigned.length === 0}>{i18n('Add Module')}</Button>
-					</div>
+					{!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>
-				<ul>{listItems}</ul>
+				{(listItems.length > 0) && <ul>{listItems}</ul>}
 			</div>
 		);
 	}
@@ -89,20 +86,24 @@ class SortableModuleFileList extends Component {
 const tooltip = (name) => <Tooltip id='tooltip-bottom'>{name}</Tooltip>;
 const UnassignedFileList = (props) => {
 	return (
-		<div className='unassigned-files'>
+		<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 {onClick, heatDataExist} = props;
+	let {onClick, heatDataExist, isReadOnlyMode} = props;
 	let displayText = heatDataExist ? 'All Files Are Assigned' : '';
 	return (
 		<div className='go-to-validation-button-wrapper'>
 			<div className='all-files-assigned'>{i18n(displayText)}</div>
-			{heatDataExist && <div className={'link'} onClick={onClick} data-test-id='go-to-validation'>{i18n('Proceed To Validation')}<SVGIcon name='angleRight'/></div>}
+			{heatDataExist && <SVGIcon disabled={isReadOnlyMode} name='angleRight' onClick={onClick}
+				data-test-id='go-to-validation' label={i18n('Proceed To Validation')} labelPosition='left' color='primary'/>}
 		</div>
 	);
 };
@@ -112,14 +113,11 @@ const UnassignedFile = (props) => (
 	</OverlayTrigger>
 );
 
-const AddOrDeleteVolumeFiels = ({add = true, onAdd, onDelete}) => {
+const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => {
 	const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
 	const action = add ? onAdd : onDelete;
 	return (
-		<div className='add-or-delete-volumes' onClick={action}>
-			<SVGIcon name={add ? 'plus' : 'close'} />
-			<span>{i18n(displayText)}</span>
-		</div>
+		<Button disabled={isReadOnlyMode} onClick={action} btnType='link' className='add-or-delete-volumes' iconName={add ? 'plus' : 'close'}>{i18n(displayText)}</Button>
 	);
 };
 
@@ -195,14 +193,14 @@ class ModuleFile extends Component {
 	}
 
 	render() {
-		const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange} = this.props;
+		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'>
-						<Icon image={isBase ? 'base' : 'module'} iconClassName='heat-setup-module-icon' />
+						<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()}
@@ -235,7 +233,7 @@ class ModuleFile extends Component {
 						files={files}
 						selected={volEnv}
 						onChange={onModuleFileTypeChange}/>}
-					<AddOrDeleteVolumeFiels onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
+					<AddOrDeleteVolumeFiles isReadOnlyMode={isReadOnlyMode} onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
 				</div>
 			</div>
 		);
@@ -245,15 +243,15 @@ class ModuleFile extends Component {
 class ArtifactOrNestedFileList extends Component {
 
 	render() {
-		let {type, title, selected, options, onSelectChanged, onAddAllUnassigned} = this.props;
+		let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props;
 		return (
-			<div className={`artifact-files ${type === 'nested' ? 'nested' : ''}`}>
+			<div className={`artifact-files ${type === 'nested' ? 'nested' : ''} ${headerClassName} `}>
 				<div className='artifact-files-header'>
 					<span>
-						{type === 'artifact' && (<Icon image='artifacts' iconClassName='heat-setup-module-icon' />)}
+						{type === 'artifact' && (<SVGIcon color='primary' name='artifacts' iconClassName='heat-setup-module-icon' />)}
 						{`${title}`}
 					</span>
-					{type === 'artifact' && <span className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</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 =>
@@ -294,6 +292,7 @@ class SoftwareProductHeatSetupView extends Component {
 				<div className='heat-setup-view-modules-and-artifacts'>
 					<SortableModuleFileList
 						{...this.props}
+						isReadOnlyMode={this.props.isReadOnlyMode}
 						artifacts={formattedArtifacts}
 						unassigned={formattedUnassigned}/>
 					<ArtifactOrNestedFileList
@@ -302,11 +301,14 @@ class SoftwareProductHeatSetupView extends Component {
 						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>
@@ -316,6 +318,7 @@ class SoftwareProductHeatSetupView extends Component {
 						:
 						(<EmptyListContent
 							heatDataExist={heatDataExist}
+							isReadOnlyMode={this.props.isReadOnlyMode}
 							onClick={() => this.processAndValidateHeat({modules, unassigned, artifacts, nested}, heatSetupCache)}/>)
 					}
 				</UnassignedFileList>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
index f2d5de4dff..62dcb82db1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
@@ -16,19 +16,18 @@
 import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 import Collapse from 'react-bootstrap/lib/Collapse.js';
-import Icon from 'nfvo-components/icon/Icon.jsx';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import {mouseActions, errorLevels, nodeFilters} from './HeatValidationConstants.js';
 
 const leftPanelWidth = 250;
 const typeToIcon = Object.freeze({
-	heat: 'heat',
-	volume: 'volume',
+	heat: 'nestedHeat',
+	volume: 'base',
 	network: 'network',
-	artifact: 'validation-artifacts',
+	artifact: 'artifacts',
 	env: 'env',
-	other: 'validation-other'
+	other: 'other'
 });
 
 
@@ -74,7 +73,7 @@ function HeatFileTreeRow(props) {
 				{
 
 					<span className='tree-node-icon'>
-						<Icon image={typeToIcon[node.type]} iconClassName={selectedNode === node.name ? 'selected' : ''}/>
+						<SVGIcon name={typeToIcon[node.type]} color={selectedNode === node.name ? 'primary' : 'secondary'}/>
 					</span>
 				}
 				{
@@ -94,7 +93,7 @@ function HeatFileTreeHeader(props) {
 		<div onClick={() => props.selectNode(nodeFilters.ALL)} className={classNames({'attachments-tree-header': true,
 			'header-selected' : props.selectedNode === nodeFilters.ALL})} data-test-id='validation-tree-header'>
 			<div className='tree-header-title' >
-				<Icon image='zip' iconClassName={classNames(props.selectedNode === nodeFilters.ALL ? 'selected' : '', 'header-icon')} />
+				<SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''}  iconClassName='header-icon' />
 				<span className={classNames({'tree-header-title-text' : true,
 					'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n(`HEAT${hasErrors ? ' (Draft)' : ''}`)}</span>
 			</div>
@@ -200,12 +199,13 @@ class HeatMessageBoard extends Component {
 	}
 	renderError(error) {
 		let rand = Math.random() * (3000 - 1) + 1;
+		console.log(this.props.selectedNode );
 		return (
 			<div
 				key={error.name + error.errorMessage + error.parentName + rand}
 				className='error-item' data-test-id='validation-error'>
 				{error.level === errorLevels.WARNING ?
-					<SVGIcon name='exclamationTriangleLine' iconClassName='large' /> : <Icon image='error-lg' /> }
+					<SVGIcon name='exclamationTriangleLine' iconClassName='large' color='warning' /> : <SVGIcon iconClassName='large' color='negative' /> }
 				<span className='error-item-file-type'>
 				{
 					(this.props.selectedNode === nodeFilters.ALL) ?
@@ -217,7 +217,7 @@ class HeatMessageBoard extends Component {
 								{i18n(error.errorMessage)}
 							</span>
 						</span> :
-						i18n(error.errorMesage)
+						i18n(error.errorMessage)
 				}
 				</span>
 			</div>
@@ -234,18 +234,14 @@ class ErrorsAndWarningsCount extends Component {
 		if (!errors) {
 			return null;
 		}
-		let errIcon = 'error';
 		let {size} = this.props;
-		if (size && size === 'large') {
-			errIcon += '-lg';
-		}
 		return (<div className='counters'>
 			{(errors.errorCount > 0) && <div className='counter'>
-				<Icon image={errIcon} iconClassName='counter-icon'/>
-				<div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>{errors.errorCount}</div>
+				<SVGIcon name='error' color='negative' iconClassName={size}/>
+				<div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>={errors.errorCount}</div>
 			</div>}
 			{(errors.warningCount > 0) && <div className='counter'>
-				<SVGIcon name='exclamationTriangleLine' iconClassName={size} />
+				<SVGIcon name='exclamationTriangleLine' iconClassName={size} color='warning'/>
 				<div className={'warning-text ' + (size ? size : '')} data-test-id='validation-warning-count'>{errors.warningCount}</div>
 			</div>}
 		</div>);