diff options
author | Einav Weiss Keidar <einavw@amdocs.com> | 2018-03-20 14:45:40 +0200 |
---|---|---|
committer | Avi Gaffa <avi.gaffa@amdocs.com> | 2018-03-20 13:52:31 +0000 |
commit | 7fdf733a64670fceefc3ded35cfa581e1c458179 (patch) | |
tree | b3623ac9a331473830cb0167c0b487f2a176427c /openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx | |
parent | c7916a4e5955ccc5f0f5252307363b791ec5c7b9 (diff) |
Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx | 713 |
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; |