diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes')
3 files changed, 20 insertions, 236 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx index 87abaf4978..9841ecbae7 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx @@ -14,168 +14,17 @@ * permissions and limitations under the License. */ import React from 'react'; -import i18n from 'nfvo-utils/i18n/i18n.js'; -import Dropzone from 'react-dropzone'; - -import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js'; -import Form from 'nfvo-components/input/validation/Form.jsx'; -import Input from 'nfvo-components/input/validation/Input.jsx'; -import GridSection from 'nfvo-components/grid/GridSection.jsx'; -import GridItem from 'nfvo-components/grid/GridItem.jsx'; - -const SoftwareProductProcessEditorPropType = React.PropTypes.shape({ - id: React.PropTypes.string, - name: React.PropTypes.string, - description: React.PropTypes.string, - artifactName: React.PropTypes.string, - type: React.PropTypes.string -}); +import SoftwareProductProcessesEditorForm from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx'; class SoftwareProductProcessesEditorView extends React.Component { - state = { - dragging: false, - files: [] - }; - - static propTypes = { - data: SoftwareProductProcessEditorPropType, - previousData: SoftwareProductProcessEditorPropType, - isReadOnlyMode: React.PropTypes.bool, - onDataChanged: React.PropTypes.func, - onSubmit: React.PropTypes.func, - onCancel: React.PropTypes.func - }; - render() { - let {isReadOnlyMode, onCancel, onDataChanged, genericFieldInfo, data = {}} = this.props; - let {name, description, artifactName, type} = data; - return ( - <div> - { genericFieldInfo && <Form - ref='validationForm' - isReadOnlyMode={isReadOnlyMode} - hasButtons={true} - labledButtons={true} - onSubmit={ () => this.submit() } - onReset={ () => onCancel() } - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.props.onValidateForm() } - className='vsp-processes-editor'> - <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}> - <Dropzone - className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`} - onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)} - onDragEnter={() => this.setState({dragging:true})} - onDragLeave={() => this.setState({dragging:false})} - multiple={false} - disableClick={true} - ref='processEditorFileInput' - name='processEditorFileInput'> - <GridSection> - <GridItem colSpan={2}> - <Input - onChange={name => onDataChanged({name})} - isValid={genericFieldInfo.name.isValid} - isRequired={true} - data-test-id='name' - errorText={genericFieldInfo.name.errorText} - label={i18n('Name')} - value={name} - type='text'/> - </GridItem> - <GridItem colSpan={2}> - <DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()} /> - </GridItem> - </GridSection> - <GridSection> - <GridItem colSpan={2}> - <Input - name='vsp-process-description' - groupClassName='vsp-process-description' - onChange={description => onDataChanged({description})} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - label={i18n('Notes')} - value={description} - data-test-id='vsp-process-description' - type='textarea'/> - </GridItem> - <GridItem colSpan={2}> - <Input - label={i18n('Artifacts')} - data-test-id='artifacts' - value={artifactName} - type='text' - disabled/> - <Input - onChange={e => { - // setting the unit to the correct value - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({type: val});} - } - value={type} - label={i18n('Process Type')} - data-test-id='process-type' - isValid={genericFieldInfo.type.isValid} - errorText={genericFieldInfo.type.errorText} - type='select' - className='input-options-select' - groupClassName='bootstrap-input-options' > - {ComponentProcessesOptionsInputValues.PROCESS_TYPE.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> - </GridItem> - </GridSection> - </Dropzone> - </div> - </Form>} - </div> + <SoftwareProductProcessesEditorForm optionsInputValues={ComponentProcessesOptionsInputValues} {...this.props}/> ); } - - submit() { - const {data: process, previousData: previousProcess} = this.props; - let {files} = this.state; - let formData = new FormData(); - if (files.length) { - let file = files[0]; - formData.append('upload', file); - } - - let updatedProcess = { - ...process, - formData: files.length ? formData : false - }; - this.props.onSubmit({process: updatedProcess, previousProcess}); - } - - - handleImportSubmit(files, rejectedFiles) { - if (files.length > 0) { - let {onDataChanged} = this.props; - this.setState({ - dragging: false, - complete: '0', - files - }); - onDataChanged({artifactName: files[0].name}); - } - else if (rejectedFiles.length > 0) { - this.setState({ - dragging: false - }); - if (DEBUG) { - console.log('file was rejected ' + rejectedFiles[0].name); - } - } - - } } export default SoftwareProductProcessesEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js index 8c359db869..2a7152ef8b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js @@ -16,7 +16,6 @@ import {connect} from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; -import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js'; import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx'; @@ -26,28 +25,26 @@ export const mapStateToProps = ({softwareProduct}) => { let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct; let{processesList = [], processesEditor = {}} = componentProcesses; let {data} = processesEditor; - let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct); return { currentSoftwareProduct, isValidityData, processesList, isDisplayModal: Boolean(data), - isModalInEditMode: Boolean(data && data.id), - isReadOnlyMode + isModalInEditMode: Boolean(data && data.id) }; }; -const mapActionsToProps = (dispatch, {componentId, softwareProductId}) => { +const mapActionsToProps = (dispatch, {componentId, softwareProductId, version}) => { return { onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch), - onEditProcessClick: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process), - onDeleteProcessClick: (process, version) => dispatch({ + onEditProcess: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process), + onDeleteProcess: (process) => dispatch({ type: modalActionTypes.GLOBAL_MODAL_WARNING, data:{ - msg: i18n(`Are you sure you want to delete "${process.name}"?`), + msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}), confirmationButtonText: i18n('Delete'), title: i18n('Delete'), onConfirmed: ()=> SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch, diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx index 93d5ce886a..27c4b9f429 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx @@ -14,13 +14,11 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Modal from 'nfvo-components/modal/Modal.jsx'; - -import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; -import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; - import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesEditor.js'; +import SoftwareProductProcessListView from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx'; class SoftwareProductProcessesView extends React.Component { @@ -29,15 +27,15 @@ class SoftwareProductProcessesView extends React.Component { }; static propTypes = { - onAddProcess: React.PropTypes.func, - onEditProcessClick: React.PropTypes.func, - onDeleteProcessClick: React.PropTypes.func, - isDisplayModal: React.PropTypes.bool, - isModalInEditMode: React.PropTypes.bool, - onStorageSelect: React.PropTypes.func, - componentId: React.PropTypes.string, - softwareProductId: React.PropTypes.string, - currentSoftwareProduct: React.PropTypes.object + onAddProcess: PropTypes.func, + onEditProcess: PropTypes.func, + onDeleteProcess: PropTypes.func, + isDisplayModal: PropTypes.bool, + isModalInEditMode: PropTypes.bool, + onStorageSelect: PropTypes.func, + componentId: PropTypes.string, + softwareProductId: PropTypes.string, + currentSoftwareProduct: PropTypes.object }; render() { @@ -46,7 +44,7 @@ class SoftwareProductProcessesView extends React.Component { <div className='software-product-view'> <div className='software-product-landing-view-right-side vsp-components-processes-page flex-column'> {this.renderEditor()} - {this.renderProcessList()} + <SoftwareProductProcessListView addButtonTitle={i18n('Add Component Process Details')} {...this.props}/> </div> </div> </div> @@ -54,7 +52,7 @@ class SoftwareProductProcessesView extends React.Component { } renderEditor() { - let {softwareProductId, currentSoftwareProduct: {version}, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props; + let {softwareProductId, version, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props; return ( <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal'> <Modal.Header> @@ -72,66 +70,6 @@ class SoftwareProductProcessesView extends React.Component { ); } - renderProcessList() { - const {localFilter} = this.state; - let {onAddProcess, isReadOnlyMode} = this.props; - return ( - <div className='processes-list'> - <ListEditorView - plusButtonTitle={i18n('Add Component Process Details')} - filterValue={localFilter} - placeholder={i18n('Filter Process')} - onAdd={onAddProcess} - isReadOnlyMode={isReadOnlyMode} - title={i18n('Process Details')} - onFilter={value => this.setState({localFilter: value})}> - {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))} - </ListEditorView> - </div> - ); - } - - renderProcessListItem(process, isReadOnlyMode) { - let {id, name, description, artifactName = ''} = process; - let {currentSoftwareProduct: {version}, onEditProcessClick, onDeleteProcessClick} = this.props; - return ( - <ListEditorItemView - key={id} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditProcessClick(process)} - onDelete={() => onDeleteProcessClick(process, version)}> - - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Name')}</div> - <div className='name'>{name}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Artifact name')}</div> - <div className='artifact-name'>{artifactName}</div> - </div> - <div className='list-editor-item-view-field'> - <div className='title'>{i18n('Notes')}</div> - <div className='description'>{description}</div> - </div> - </ListEditorItemView> - ); - } - - - filterList() { - let {processesList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return processesList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return processesList; - } - } } export default SoftwareProductProcessesView; |