Merging master to master_vca_intg

[osm/UI.git] / skyquake / plugins / composer / src / src / components / CanvasPanel.js

diff --git a/skyquake/plugins/composer/src/src/components/CanvasPanel.js b/skyquake/plugins/composer/src/src/components/CanvasPanel.js
index 6b04bd9..86afd56 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/CanvasPanel.js
+++ b/skyquake/plugins/composer/src/src/components/CanvasPanel.js
@@ -1,6 +1,6 @@
 
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -34,7 +34,9 @@ import CanvasPanelTray from './CanvasPanelTray'
 import EditForwardingGraphPaths from './EditorForwardingGraph/EditForwardingGraphPaths'
 import SelectionManager from '../libraries/SelectionManager'
 import DescriptorModelIconFactory from '../libraries/model/IconFactory'
+import FileManager from './filemanager/FileManager.jsx';
 
+import ConfigPrimitiveParameters from './ConfigPrimitiveParameters/ConfigPrimitiveParameters'
 import '../styles/CanvasPanel.scss'
 
 const CanvasPanel = React.createClass({
@@ -69,8 +71,33 @@ const CanvasPanel = React.createClass({
                var req = require.context("../", true, /^\.\/.*\.svg$/);
                const hasItem = this.props.containers.length !== 0;
                const isEditingNSD = DescriptorModelFactory.isNetworkService(this.props.containers[0]);
+               const isDescriptorView = (this.props.panelTabShown == 'descriptor');
                const hasNoCatalogs = this.props.hasNoCatalogs;
                const bodyComponent = hasItem ? <CatalogItemCanvasEditor zoom={this.props.zoom} isShowingMoreInfo={this.props.showMore} containers={this.props.containers}/> : messages.canvasWelcome();
+               const viewFiles = this.props.panelTabShown == 'assets';
+               const viewButtonTabs =  !hasItem ? null : (
+                  <div className="CanvasPanelTabs">
+                      <div className="CatalogFilter">
+                                               <button className={isDescriptorView ? '-selected' : ''} onClick={ComposerAppActions.showDescriptor}>
+                                                       Descriptor
+                                               </button>
+                                               {
+                                                       this.props.files ?
+                                                               <button className={!isDescriptorView ? '-selected' : ''}  onClick={ComposerAppActions.showAssets}>
+                                                                       Assets
+                                                               </button>
+                                                       : null
+                                               }
+                                       </div>
+                               </div>
+                       )
+        //CanvasPanelTray panel to display
+        let displayedPanel = null;
+        switch (this.props.displayedPanel) {
+            case 'forwarding' : displayedPanel = (<EditForwardingGraphPaths containers={this.props.containers} />); break;
+            case 'parameter' : displayedPanel = (<ConfigPrimitiveParameters  containers={this.props.containers} />); break;
+            default: displayedPanel = (<div><p className="welcome-message">Please select a tab</p></div>); break;
+        }
                return (
                        <div id="canvasPanelDiv" className="CanvasPanel" style={style} onDragOver={this.onDragOver} onDrop={this.onDrop}>
                                <div onDoubleClick={this.onDblClickOpenFullScreen}  className="CanvasPanelHeader panel-header" data-resizable="limit_bottom">
@@ -79,18 +106,23 @@ const CanvasPanel = React.createClass({
                                                <span className="model-name">{this.props.title}</span>
                                        </h1>
                                </div>
+                               {viewButtonTabs}
                                <div className="CanvasPanelBody panel-body" style={{marginRight: this.props.layout.right, bottom: this.props.layout.bottom}} >
-                                       {hasNoCatalogs ? null : bodyComponent}
+                                       {hasNoCatalogs ? null : viewFiles ? <FileManager files={this.props.files} type={this.props.type} item={this.props.item} filesState={this.props.filesState} newPathName={this.props.newPathName} /> : bodyComponent}
                                </div>
-                               <CanvasZoom zoom={this.props.zoom} style={{bottom: this.props.layout.bottom + 20}}/>
-                               <CanvasPanelTray layout={this.props.layout} show={isEditingNSD}>
-                                       <EditForwardingGraphPaths containers={this.props.containers} />
+                               {
+                                       isDescriptorView ?
+                                               <CanvasZoom zoom={this.props.zoom} style={{bottom: this.props.layout.bottom + 20}}/>
+                                               : null
+                               }
+                               <CanvasPanelTray layout={this.props.layout} displayedPanel={this.props.displayedPanel} show={isEditingNSD && isDescriptorView}>
+                                       {displayedPanel}
                                </CanvasPanelTray>
                        </div>
                );
        },
        onDragOver(event) {
-               const isDraggingFiles = _.contains(event.dataTransfer.types, 'Files');
+               const isDraggingFiles = _.includes(event.dataTransfer.types, 'Files');
                if (!isDraggingFiles) {
                        event.preventDefault();
                        event.dataTransfer.dropEffect = 'copy';