/*!
* Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
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';
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';
class ListItem extends Component {
render() {
return (
{this.props.children}
);
}
}
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 (
this.setState(data)}
items={this.state.data}
draggingIndex={this.state.draggingIndex}
sortId={i}
outline='list'>
);
}, this);
return (
0) ? 'modules-list-wrapper-divider' : ''}`}>
{!isBaseExist &&
{i18n('Add Base')}
}
{i18n('Add Module')}
{(listItems.length > 0) &&
}
);
}
}
const tooltip = (name) => {name} ;
const UnassignedFileList = (props) => {
return (
{i18n('UNASSIGNED FILES')}
{props.children}
);
};
const EmptyListContent = props => {
let {heatDataExist} = props;
let displayText = heatDataExist ? 'All Files Are Assigned' : '';
return (
);
};
const UnassignedFile = (props) => (
{props.name}
);
const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => {
const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
const action = add ? onAdd : onDelete;
return (
{i18n(displayText)}
);
};
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 (
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 (
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 ( this.handleModuleRename(evt, name)} onKeyDown={evt => this.handleSubmit(evt, name)}/>);
}
return ({name} );
}
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 (
{`${moduleType}: `}
{this.renderNameAccordingToEditState()}
{!this.state.isInNameEdit && this.setState({isInNameEdit: true})}
data-test-id={isBase ? 'base-name' : 'module-name'}/>}
onModuleDelete(name)} data-test-id='module-delete'/>
{displayVolumes && }
{displayVolumes && }
this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
);
}
}
class ArtifactOrNestedFileList extends Component {
render() {
let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props;
return (
{type === 'artifact' && ( )}
{`${title}`}
{type === 'artifact' && {i18n('Add All Unassigned Files')} }
{type === 'nested' ? (
{selected.map(nested =>
{nested}
)} ) :
(
{
})}
value={selected}
clearable={false}
placeholder={i18n('Add Artifact')}
multi/>)
}
);
}
}
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 (
0) ? 'with-list-items' : ''}
onAddAllUnassigned={onAddAllUnassigned}/>
{
formattedUnassigned.length > 0 ?
({formattedUnassigned.map(file => )} )
:
()
}
);
}
}
export default SoftwareProductHeatSetupView;