diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes')
10 files changed, 612 insertions, 469 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx index aa39c87dd0..cee46abc69 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx @@ -20,80 +20,86 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; - class SoftwareProductProcessesListView extends React.Component { + state = { + localFilter: '' + }; - state = { - localFilter: '' - }; - - static propTypes = { - onAddProcess: PropTypes.func.isRequired, - onEditProcess: PropTypes.func.isRequired, - onDeleteProcess: PropTypes.func.isRequired, - isReadOnlyMode: PropTypes.bool.isRequired, - currentSoftwareProduct:PropTypes.object, - addButtonTitle: PropTypes.string - }; - - render() { - const {localFilter} = this.state; - let {onAddProcess, isReadOnlyMode, addButtonTitle} = this.props; + static propTypes = { + onAddProcess: PropTypes.func.isRequired, + onEditProcess: PropTypes.func.isRequired, + onDeleteProcess: PropTypes.func.isRequired, + isReadOnlyMode: PropTypes.bool.isRequired, + currentSoftwareProduct: PropTypes.object, + addButtonTitle: PropTypes.string + }; - return ( - <ListEditorView - plusButtonTitle={addButtonTitle} - 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>); - } + render() { + const { localFilter } = this.state; + let { onAddProcess, isReadOnlyMode, addButtonTitle } = this.props; - renderProcessListItem(process, isReadOnlyMode) { - let {id, name, description, artifactName = ''} = process; - let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} = this.props; - return ( - <ListEditorItemView - key={id} - className='list-editor-item-view' - isReadOnlyMode={isReadOnlyMode} - onSelect={() => onEditProcess(process)} - onDelete={() => onDeleteProcess(process, version)}> + return ( + <ListEditorView + plusButtonTitle={addButtonTitle} + 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 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> - ); - } + renderProcessListItem(process, isReadOnlyMode) { + let { id, name, description, artifactName = '' } = process; + let { + currentSoftwareProduct: { version }, + onEditProcess, + onDeleteProcess + } = this.props; + return ( + <ListEditorItemView + key={id} + className="list-editor-item-view" + isReadOnlyMode={isReadOnlyMode} + onSelect={() => onEditProcess(process)} + onDelete={() => onDeleteProcess(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; + 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; - } - } + 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 SoftwareProductProcessesListView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js index b0403abde5..fb44530dae 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js @@ -13,40 +13,57 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js'; import SoftwareProductProcessesView from './SoftwareProductProcessesView.jsx'; -export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductProcesses: {processesList, processesEditor}} = softwareProduct; - let {data} = processesEditor; +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductEditor: { data: currentSoftwareProduct = {} }, + softwareProductProcesses: { processesList, processesEditor } + } = softwareProduct; + let { data } = processesEditor; - return { - currentSoftwareProduct, - processesList, - isDisplayEditor: Boolean(data), - isModalInEditMode: Boolean(data && data.id) - }; + return { + currentSoftwareProduct, + processesList, + isDisplayEditor: Boolean(data), + isModalInEditMode: Boolean(data && data.id) + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, version}) => { - return { - onAddProcess: () => SoftwareProductProcessesActionHelper.openEditor(dispatch), - onEditProcess: (process) => SoftwareProductProcessesActionHelper.openEditor(dispatch, process), - onDeleteProcess: (process) => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data:{ - msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}), - confirmationButtonText: i18n('Delete'), - title: i18n('Delete'), - onConfirmed: ()=> SoftwareProductProcessesActionHelper.deleteProcess(dispatch, - {process, softwareProductId, version}) - } - }) - }; +const mapActionsToProps = (dispatch, { softwareProductId, version }) => { + return { + onAddProcess: () => + SoftwareProductProcessesActionHelper.openEditor(dispatch), + onEditProcess: process => + SoftwareProductProcessesActionHelper.openEditor(dispatch, process), + onDeleteProcess: process => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + msg: i18n('Are you sure you want to delete "{name}"?', { + name: process.name + }), + confirmationButtonText: i18n('Delete'), + title: i18n('Delete'), + onConfirmed: () => + SoftwareProductProcessesActionHelper.deleteProcess( + dispatch, + { + process, + softwareProductId, + version + } + ) + } + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductProcessesView); +export default connect(mapStateToProps, mapActionsToProps, null, { + withRef: true +})(SoftwareProductProcessesView); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js index 8fd370b6cc..7c72c5b892 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js @@ -13,127 +13,145 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './SoftwareProductProcessesConstants.js'; +import { actionTypes } from './SoftwareProductProcessesConstants.js'; import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; function baseUrl(vspId, version) { - let {id: versionId} = version; - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`; + let { id: versionId } = version; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`; } function putProcess(softwareProductId, version, process) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${process.id}`, { - name: process.name, - description: process.description, - type: process.type === '' ? null : process.type - }); + return RestAPIUtil.put( + `${baseUrl(softwareProductId, version)}/${process.id}`, + { + name: process.name, + description: process.description, + type: process.type === '' ? null : process.type + } + ); } function postProcess(softwareProductId, version, process) { - return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, { - name: process.name, - description: process.description, - type: process.type === '' ? null : process.type - }); + return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, { + name: process.name, + description: process.description, + type: process.type === '' ? null : process.type + }); } function deleteProcess(softwareProductId, version, processId) { - return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${processId}`); + return RestAPIUtil.destroy( + `${baseUrl(softwareProductId, version)}/${processId}` + ); } -function uploadFileToProcess(softwareProductId, version, processId, formData) -{ - return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}/${processId}/upload`, formData); +function uploadFileToProcess(softwareProductId, version, processId, formData) { + return RestAPIUtil.post( + `${baseUrl(softwareProductId, version)}/${processId}/upload`, + formData + ); } function fetchProcesses(softwareProductId, version) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`); + return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`); } const SoftwareProductActionHelper = { - - fetchProcessesList(dispatch, {softwareProductId, version}) { - - dispatch({ - type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES, - processesList: [] - }); - - return fetchProcesses(softwareProductId, version).then(response => { - dispatch({ - type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES, - processesList: response.results - }); - }); - }, - openEditor(dispatch, process = {}) { - dispatch({ - type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN, - process - }); - }, - - deleteProcess(dispatch, {process, softwareProductId, version}) { - return deleteProcess(softwareProductId, version, process.id).then(() => { - dispatch({ - type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS, - processId: process.id - }); - }); - - }, - - closeEditor(dispatch) { - dispatch({ - type:actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE - }); - }, - - saveProcess(dispatch, {softwareProductId, version, previousProcess, process}) { - if (previousProcess) { - return putProcess(softwareProductId, version, process).then(() => { - if (process.formData){ - uploadFileToProcess(softwareProductId, version, process.id, process.formData); - } - dispatch({ - type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS, - process - }); - }); - } - else { - return postProcess(softwareProductId, version, process).then(response => { - if (process.formData) { - uploadFileToProcess(softwareProductId, version, response.value, process.formData); - } - dispatch({ - type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS, - process: { - ...process, - id: response.value - } - }); - }); - } - }, - - hideDeleteConfirm(dispatch) { - dispatch({ - type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM, - processToDelete: false - }); - }, - - openDeleteProcessesConfirm(dispatch, {process} ) { - dispatch({ - type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM, - processToDelete: process - }); - } - + fetchProcessesList(dispatch, { softwareProductId, version }) { + dispatch({ + type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES, + processesList: [] + }); + + return fetchProcesses(softwareProductId, version).then(response => { + dispatch({ + type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES, + processesList: response.results + }); + }); + }, + openEditor(dispatch, process = {}) { + dispatch({ + type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN, + process + }); + }, + + deleteProcess(dispatch, { process, softwareProductId, version }) { + return deleteProcess(softwareProductId, version, process.id).then( + () => { + dispatch({ + type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS, + processId: process.id + }); + } + ); + }, + + closeEditor(dispatch) { + dispatch({ + type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE + }); + }, + + saveProcess( + dispatch, + { softwareProductId, version, previousProcess, process } + ) { + if (previousProcess) { + return putProcess(softwareProductId, version, process).then(() => { + if (process.formData) { + uploadFileToProcess( + softwareProductId, + version, + process.id, + process.formData + ); + } + dispatch({ + type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS, + process + }); + }); + } else { + return postProcess(softwareProductId, version, process).then( + response => { + if (process.formData) { + uploadFileToProcess( + softwareProductId, + version, + response.value, + process.formData + ); + } + dispatch({ + type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS, + process: { + ...process, + id: response.value + } + }); + } + ); + } + }, + + hideDeleteConfirm(dispatch) { + dispatch({ + type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM, + processToDelete: false + }); + }, + + openDeleteProcessesConfirm(dispatch, { process }) { + dispatch({ + type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM, + processToDelete: process + }); + } }; export default SoftwareProductActionHelper; - diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js index 6eee24cdde..7f09ea8e73 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js @@ -16,20 +16,20 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - ADD_SOFTWARE_PRODUCT_PROCESS: null, - EDIT_SOFTWARE_PRODUCT_PROCESS: null, - DELETE_SOFTWARE_PRODUCT_PROCESS: null, - SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null, - SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null, - FETCH_SOFTWARE_PRODUCT_PROCESSES: null, - SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null + ADD_SOFTWARE_PRODUCT_PROCESS: null, + EDIT_SOFTWARE_PRODUCT_PROCESS: null, + DELETE_SOFTWARE_PRODUCT_PROCESS: null, + SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null, + SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null, + FETCH_SOFTWARE_PRODUCT_PROCESSES: null, + SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null }); export const optionsInputValues = { - PROCESS_TYPE: [ - {title: 'Select...', enum: ''}, - {title: 'Other', enum: 'Other'} - ] + PROCESS_TYPE: [ + { title: 'Select...', enum: '' }, + { title: 'Other', enum: 'Other' } + ] }; export const VSP_PROCESS_FORM = 'VSPPROCESSFORM'; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js index fc194fac13..58cc894a21 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js @@ -13,41 +13,56 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper'; import SoftwareProductProcessesEditorView from './SoftwareProductProcessesEditorView.jsx'; -import {VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js'; +import { VSP_PROCESS_FORM } from './SoftwareProductProcessesConstants.js'; -export const mapStateToProps = ({softwareProduct}) => { - let {softwareProductProcesses: {processesList, processesEditor}} = softwareProduct; - let {data, genericFieldInfo, formReady} = processesEditor; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - let previousData; - const processId = data ? data.id : null; - if(processId) { - previousData = processesList.find(process => process.id === processId); - } +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductProcesses: { processesList, processesEditor } + } = softwareProduct; + let { data, genericFieldInfo, formReady } = processesEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); + let previousData; + const processId = data ? data.id : null; + if (processId) { + previousData = processesList.find(process => process.id === processId); + } - return { - data, - genericFieldInfo, - previousData, - isFormValid, - formReady - }; + return { + data, + genericFieldInfo, + previousData, + isFormValid, + formReady + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, version}) => { - return { - onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VSP_PROCESS_FORM}), - onSubmit: ({previousProcess, process}) => { - SoftwareProductProcessesActionHelper.closeEditor(dispatch); - SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, process}); - }, - onCancel: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch), - onValidateForm: () => ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM) - }; +const mapActionsToProps = (dispatch, { softwareProductId, version }) => { + return { + onDataChanged: deltaData => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: VSP_PROCESS_FORM + }), + onSubmit: ({ previousProcess, process }) => { + SoftwareProductProcessesActionHelper.closeEditor(dispatch); + SoftwareProductProcessesActionHelper.saveProcess(dispatch, { + softwareProductId, + version, + previousProcess, + process + }); + }, + onCancel: () => + SoftwareProductProcessesActionHelper.closeEditor(dispatch), + onValidateForm: () => + ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductProcessesEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + SoftwareProductProcessesEditorView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx index d1bd602683..6e8254f65b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx @@ -25,157 +25,212 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; const SoftwareProductProcessEditorPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - artifactName: PropTypes.string, - type: PropTypes.string + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + artifactName: PropTypes.string, + type: PropTypes.string }); - - class SoftwareProductProcessesEditorForm extends React.Component { + static propTypes = { + data: SoftwareProductProcessEditorPropType, + previousData: SoftwareProductProcessEditorPropType, + isReadOnlyMode: PropTypes.bool, + onDataChanged: PropTypes.func, + onSubmit: PropTypes.func, + onCancel: PropTypes.func + }; + state = { + dragging: false, + files: [] + }; + render() { + let { + data = {}, + isReadOnlyMode, + onDataChanged, + onCancel, + genericFieldInfo, + optionsInputValues + } = this.props; + let { name, description, artifactName, type } = data; - static propTypes = { - data: SoftwareProductProcessEditorPropType, - previousData: SoftwareProductProcessEditorPropType, - isReadOnlyMode: PropTypes.bool, - onDataChanged: PropTypes.func, - onSubmit: PropTypes.func, - onCancel: PropTypes.func - }; - state = { - dragging: false, - files: [] - }; - - render() { - let {data = {}, isReadOnlyMode, onDataChanged, onCancel, genericFieldInfo, optionsInputValues} = this.props; - let {name, description, artifactName, type} = data; - - return ( - <div> - {genericFieldInfo && <Form - ref='validationForm' - hasButtons={true} - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - 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 hasLastColSet={true}> - <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} lastColInRow={true}> - <label> </label> - <DraggableUploadFileBox className='process-editor-file-box' isReadOnlyMode={isReadOnlyMode} onClick={() => this.refs.processEditorFileInput.open()}/> - </GridItem> - </GridSection> - <GridSection hasLastColSet={true}> - <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} lastColInRow={true}> - <Input - label={i18n('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')} - className='process-type' - data-test-id='process-type' - isValid={genericFieldInfo.type.isValid} - errorText={genericFieldInfo.type.errorText} - type='select'> - {optionsInputValues.PROCESS_TYPE.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> - </GridItem> - </GridSection> - </Dropzone> - </div> - </Form>} - </div> - ); - } - - submit() { - const {data: process, previousData: previousProcess} = this.props; - let {files} = this.state; - let formData = false; - if (files.length) { - let file = files[0]; - formData = new FormData(); - formData.append('upload', file); - } + return ( + <div> + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={true} + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + 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 hasLastColSet={true}> + <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} lastColInRow={true}> + <label> </label> + <DraggableUploadFileBox + className="process-editor-file-box" + isReadOnlyMode={isReadOnlyMode} + onClick={() => + this.refs.processEditorFileInput.open() + } + /> + </GridItem> + </GridSection> + <GridSection hasLastColSet={true}> + <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} lastColInRow={true}> + <Input + label={i18n('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')} + className="process-type" + data-test-id="process-type" + isValid={ + genericFieldInfo.type.isValid + } + errorText={ + genericFieldInfo.type.errorText + } + type="select"> + {optionsInputValues.PROCESS_TYPE.map( + mtype => ( + <option + key={mtype.enum} + value={mtype.enum}>{`${ + mtype.title + }`}</option> + ) + )} + </Input> + </GridItem> + </GridSection> + </Dropzone> + </div> + </Form> + )} + </div> + ); + } - let updatedProcess = { - ...process, - formData - }; - this.props.onSubmit({process: updatedProcess, previousProcess}); - } + submit() { + const { data: process, previousData: previousProcess } = this.props; + let { files } = this.state; + let formData = false; + if (files.length) { + let file = files[0]; + formData = new FormData(); + formData.append('upload', file); + } + let updatedProcess = { + ...process, + formData + }; + 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); - } - } - } + 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 SoftwareProductProcessesEditorForm; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js index 11b89b17c2..a8731fd163 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js @@ -13,43 +13,49 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js'; +import { + actionTypes, + VSP_PROCESS_FORM +} from './SoftwareProductProcessesConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: - return { - ...state, - formReady: null, - formName: VSP_PROCESS_FORM, - genericFieldInfo: { - 'name' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}] - }, - 'description' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}] - }, - 'artifactName' : { - isValid: true, - errorText: '', - validations: [] - }, - 'type' : { - isValid: true, - errorText: '', - validations: [] - } - }, - data: action.process - }; - case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: - return {}; + switch (action.type) { + case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: + return { + ...state, + formReady: null, + formName: VSP_PROCESS_FORM, + genericFieldInfo: { + name: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 120 } + ] + }, + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }] + }, + artifactName: { + isValid: true, + errorText: '', + validations: [] + }, + type: { + isValid: true, + errorText: '', + validations: [] + } + }, + data: action.process + }; + case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: + return {}; - default: - return state; - } + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx index 9ce690a1ca..867090bb31 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx @@ -15,16 +15,18 @@ */ import React from 'react'; -import {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js'; +import { optionsInputValues as ProcessesOptionsInputValues } from './SoftwareProductProcessesConstants.js'; import SoftwareProductProcessesEditorForm from './SoftwareProductProcessesEditorForm.jsx'; - class SoftwareProductProcessesEditorView extends React.Component { - render() { - return ( - <SoftwareProductProcessesEditorForm optionsInputValues={ProcessesOptionsInputValues} {...this.props}/> - ); - } + render() { + return ( + <SoftwareProductProcessesEditorForm + optionsInputValues={ProcessesOptionsInputValues} + {...this.props} + /> + ); + } } export default SoftwareProductProcessesEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js index 20390d1f60..0e4d94650e 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js @@ -13,20 +13,26 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './SoftwareProductProcessesConstants.js'; +import { actionTypes } from './SoftwareProductProcessesConstants.js'; export default (state = [], action) => { - switch (action.type) { - case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES: - return [...action.processesList]; - case actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS: - const indexForEdit = state.findIndex(process => process.id === action.process.id); - return [...state.slice(0, indexForEdit), action.process, ...state.slice(indexForEdit + 1)]; - case actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS: - return [...state, action.process]; - case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS: - return state.filter(process => process.id !== action.processId); - default: - return state; - } + switch (action.type) { + case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES: + return [...action.processesList]; + case actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS: + const indexForEdit = state.findIndex( + process => process.id === action.process.id + ); + return [ + ...state.slice(0, indexForEdit), + action.process, + ...state.slice(indexForEdit + 1) + ]; + case actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS: + return [...state, action.process]; + case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS: + return state.filter(process => process.id !== action.processId); + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx index b0da767a2b..1357c31e12 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx @@ -20,45 +20,63 @@ import Modal from 'nfvo-components/modal/Modal.jsx'; import SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js'; import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx'; - class SoftwareProductProcessesView extends React.Component { + state = { + localFilter: '' + }; - state = { - localFilter: '' - }; - - static propTypes = { - onAddProcess: PropTypes.func.isRequired, - onEditProcess: PropTypes.func.isRequired, - onDeleteProcess: PropTypes.func.isRequired, - isDisplayEditor: PropTypes.bool.isRequired, - isReadOnlyMode: PropTypes.bool.isRequired, - currentSoftwareProduct:PropTypes.object - }; - - render() { - return ( - <div className='software-product-landing-view-right-side vsp-processes-page'> - {this.renderEditor()} - <SoftwareProductProcessListView addButtonTitle={i18n('Add Process Details')} {...this.props}/> - </div> - ); - } + static propTypes = { + onAddProcess: PropTypes.func.isRequired, + onEditProcess: PropTypes.func.isRequired, + onDeleteProcess: PropTypes.func.isRequired, + isDisplayEditor: PropTypes.bool.isRequired, + isReadOnlyMode: PropTypes.bool.isRequired, + currentSoftwareProduct: PropTypes.object + }; - renderEditor() { - let {currentSoftwareProduct: {id}, version, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props; - return ( + render() { + return ( + <div className="software-product-landing-view-right-side vsp-processes-page"> + {this.renderEditor()} + <SoftwareProductProcessListView + addButtonTitle={i18n('Add Process Details')} + {...this.props} + /> + </div> + ); + } - <Modal show={isDisplayEditor} bsSize='large' animation={true} className='onborading-modal'> - <Modal.Header> - <Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title> - </Modal.Header> - <Modal.Body className='edit-process-modal'> - <SoftwareProductProcessesEditor softwareProductId={id} version={version} isReadOnlyMode={isReadOnlyMode}/> - </Modal.Body> - </Modal> - ); - } + renderEditor() { + let { + currentSoftwareProduct: { id }, + version, + isModalInEditMode, + isReadOnlyMode, + isDisplayEditor + } = this.props; + return ( + <Modal + show={isDisplayEditor} + bsSize="large" + animation={true} + className="onborading-modal"> + <Modal.Header> + <Modal.Title> + {isModalInEditMode + ? i18n('Edit Process Details') + : i18n('Create New Process Details')} + </Modal.Title> + </Modal.Header> + <Modal.Body className="edit-process-modal"> + <SoftwareProductProcessesEditor + softwareProductId={id} + version={version} + isReadOnlyMode={isReadOnlyMode} + /> + </Modal.Body> + </Modal> + ); + } } export default SoftwareProductProcessesView; |