/*!
* 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;