2 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
8 * http://www.apache.org/licenses/LICENSE-2.0
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
13 * or implied. See the License for the specific language governing
14 * permissions and limitations under the License.
16 import React, {Component} from 'react';
17 import PropTypes from 'prop-types';
18 import i18n from 'nfvo-utils/i18n/i18n.js';
19 import Modal from 'nfvo-components/modal/Modal.jsx';
21 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
22 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
23 import FlowRelatedView from './ImportantLogic.jsx';
24 import FlowsEditorModal from './FlowsEditorModal.js';
25 import SequenceDiagram from './SequenceDiagram.jsx';
27 class FlowsListEditorView extends Component {
30 flowList: PropTypes.array,
31 currentFlow: PropTypes.object,
32 isDisplayModal: PropTypes.bool,
33 isModalInEditMode: PropTypes.bool,
34 isCheckedOut: PropTypes.bool,
35 shouldShowWorkflowsEditor: PropTypes.bool,
36 readonly: PropTypes.bool,
38 onAddWorkflowClick: PropTypes.func,
39 onEditFlowDetailsClick: PropTypes.func,
40 onEditFlowDiagramClick: PropTypes.func,
41 onDeleteFlowClick: PropTypes.func,
42 onSequenceDiagramSaveClick: PropTypes.func,
43 onSequenceDiagramCloseClick: PropTypes.func
51 let CurrentView = null;
52 if (this.props.shouldShowWorkflowsEditor) {
53 CurrentView = this.renderWorkflowsEditor();
56 CurrentView = this.renderSequenceDiagramTool();
62 renderWorkflowsEditor() {
63 let {isDisplayModal, onAddWorkflowClick, isCheckedOut} = this.props;
64 const {localFilter} = this.state;
67 <div className='workflows license-agreement-list-editor'>
68 <FlowRelatedView display={localFilter}/>
70 plusButtonTitle={i18n('Add Workflow')}
71 onAdd={onAddWorkflowClick}
72 filterValue={localFilter}
73 onFilter={filter => this.setState({localFilter: filter})}
74 isReadOnlyMode={!isCheckedOut}>
75 {this.filterList().map(flow => this.renderWorkflowListItem(flow, isCheckedOut))}
78 {isDisplayModal && this.renderWorkflowEditorModal()}
84 renderWorkflowEditorModal() {
85 let { isDisplayModal, isModalInEditMode} = this.props;
87 <Modal show={isDisplayModal} animation={true} className='onborading-modal workflows-editor-modal'>
90 {`${isModalInEditMode ? i18n('Edit Workflow') : i18n('Create New Workflow')}`}
94 <FlowsEditorModal isNewArtifact={!isModalInEditMode}/>
100 renderSequenceDiagramTool() {
101 let {onSequenceDiagramSaveClick, onSequenceDiagramCloseClick, currentFlow} = this.props;
104 onSave={sequenceDiagramModel => onSequenceDiagramSaveClick({...currentFlow, sequenceDiagramModel})}
105 onClose={onSequenceDiagramCloseClick}
106 model={currentFlow.sequenceDiagramModel}/>
111 let {flowList} = this.props;
112 let {localFilter} = this.state;
113 if (localFilter.trim()) {
114 const filter = new RegExp(escape(localFilter), 'i');
115 return flowList.filter(({name = '', description = ''}) => {
116 return escape(name).match(filter) || escape(description).match(filter);
124 renderWorkflowListItem(flow, isCheckedOut) {
125 let {uniqueId, artifactName, description} = flow;
126 let {onEditFlowDetailsClick, onEditFlowDiagramClick, onDeleteFlowClick} = this.props;
130 onSelect={() => onEditFlowDetailsClick(flow)}
131 onDelete={() => onDeleteFlowClick(flow)}
132 onEdit={() => onEditFlowDiagramClick(flow)}
133 className='list-editor-item-view'
134 isCheckedOut={isCheckedOut}>
135 <div className='list-editor-item-view-field'>
136 <div className='title'>{i18n('Name')}</div>
137 <div className='text name'>{artifactName}</div>
139 <div className='list-editor-item-view-field'>
140 <div className='title'>{i18n('Description')}</div>
141 <div className='text description'>{description}</div>
143 </ListEditorItemView>
149 export default FlowsListEditorView;