aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx99
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js11
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js2
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx181
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx154
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx82
6 files changed, 297 insertions, 232 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
new file mode 100644
index 0000000000..aa39c87dd0
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
@@ -0,0 +1,99 @@
+/*!
+ * 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 from 'react';
+import PropTypes from 'prop-types';
+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: ''
+ };
+
+ 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;
+
+ 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>);
+ }
+
+ 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;
+
+ 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 c70452919b..b0403abde5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
@@ -16,33 +16,30 @@
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 SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js';
import SoftwareProductProcessesView from './SoftwareProductProcessesView.jsx';
export const mapStateToProps = ({softwareProduct}) => {
let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
- let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
let {data} = processesEditor;
return {
currentSoftwareProduct,
processesList,
isDisplayEditor: Boolean(data),
- isModalInEditMode: Boolean(data && data.id),
- isReadOnlyMode
+ isModalInEditMode: Boolean(data && data.id)
};
};
-const mapActionsToProps = (dispatch, {softwareProductId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
return {
onAddProcess: () => SoftwareProductProcessesActionHelper.openEditor(dispatch),
onEditProcess: (process) => SoftwareProductProcessesActionHelper.openEditor(dispatch, process),
- onDeleteProcess: (process, version) => dispatch({
+ 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: ()=> SoftwareProductProcessesActionHelper.deleteProcess(dispatch,
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 ff787c357e..fc194fac13 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
@@ -45,7 +45,7 @@ const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
SoftwareProductProcessesActionHelper.closeEditor(dispatch);
SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, process});
},
- onClose: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch),
+ onCancel: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch),
onValidateForm: () => ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
};
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
new file mode 100644
index 0000000000..72b2f8cb38
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
@@ -0,0 +1,181 @@
+/*!
+ * 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 from 'react';
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
+
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
+import i18n from 'nfvo-utils/i18n/i18n.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: 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: React.PropTypes.bool,
+ onDataChanged: React.PropTypes.func,
+ onSubmit: React.PropTypes.func,
+ onCancel: React.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>&nbsp;</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);
+ }
+
+ 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);
+ }
+ }
+ }
+}
+
+export default SoftwareProductProcessesEditorForm;
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 0df36cf65d..9ce690a1ca 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
@@ -14,167 +14,17 @@
* permissions and limitations under the License.
*/
import React from 'react';
-import Dropzone from 'react-dropzone';
-import classnames from 'classnames';
-import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
-import i18n from 'nfvo-utils/i18n/i18n.js';
import {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.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 './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,
- onClose: React.PropTypes.func
- };
-
render() {
- let {data = {}, isReadOnlyMode, onDataChanged, onClose, genericFieldInfo} = this.props;
- let {name, description, artifactName, type} = data;
-
return (
- <div>
- {genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- onSubmit={ () => this.submit() }
- onReset={ () => onClose() }
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm() }
- className='vsp-processes-editor'>
- <div className={classnames('vsp-processes-editor-data', {'disabled': isReadOnlyMode})}>
- <Dropzone
- className={classnames('vsp-process-dropzone-view', {'active-dragging': this.state.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')}
- 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'>
- {ProcessesOptionsInputValues.PROCESS_TYPE.map(mtype =>
- <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
- </Input>
- </GridItem>
- </GridSection>
- </Dropzone>
- </div>
- </Form>}
- </div>
+ <SoftwareProductProcessesEditorForm optionsInputValues={ProcessesOptionsInputValues} {...this.props}/>
);
}
-
- 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);
- }
- }
- }
}
export default SoftwareProductProcessesEditorView;
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 8f52434042..e2cb4edf74 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
@@ -14,14 +14,12 @@
* 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 './SoftwareProductProcessesEditor.js';
-
+import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx';
class SoftwareProductProcessesView extends React.Component {
@@ -31,25 +29,25 @@ class SoftwareProductProcessesView extends React.Component {
};
static propTypes = {
- onAddProcess: React.PropTypes.func.isRequired,
- onEditProcess: React.PropTypes.func.isRequired,
- onDeleteProcess: React.PropTypes.func.isRequired,
- isDisplayEditor: React.PropTypes.bool.isRequired,
- isReadOnlyMode: React.PropTypes.bool.isRequired,
- currentSoftwareProduct:React.PropTypes.object
+ 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()}
- {this.renderProcessList()}
+ <SoftwareProductProcessListView addButtonTitle={i18n('Add Process Details')} {...this.props}/>
</div>
);
}
renderEditor() {
- let {currentSoftwareProduct: {id, version}, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
+ let {currentSoftwareProduct: {id}, version, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
return (
<Modal show={isDisplayEditor} bsSize='large' animation={true} className='onborading-modal'>
@@ -62,66 +60,6 @@ class SoftwareProductProcessesView extends React.Component {
</Modal>
);
}
-
- renderProcessList() {
- const {localFilter} = this.state;
- let {onAddProcess, isReadOnlyMode} = this.props;
-
- return (
- <ListEditorView
- plusButtonTitle={i18n('Add 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>
- );
- }
-
- 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;
-
- 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;