Folder creation for onboarded packages

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>

diff --git a/skyquake/plugins/composer/api/composer.js b/skyquake/plugins/composer/api/composer.js
index 801873a..d83311f 100644 (file)
--- a/skyquake/plugins/composer/api/composer.js
+++ b/skyquake/plugins/composer/api/composer.js
@@ -427,7 +427,12 @@ Composer.addFile = function(req) {
     if (!download_host) {
         download_host = api_server + ':' + utils.getPortForProtocol(req.protocol);
     }
-
+    var input = {
+        'external-url': download_host + '/composer/upload/' + req.query['package_id'] + '/' + req.file.filename,
+        'package-type': package_type,
+        'package-id': package_id,
+        'package-path': package_path + '/' + req.file.filename
+    }
     return new Promise(function(resolve, reject) {
         Promise.all([
             rp({
@@ -441,12 +446,7 @@ Composer.addFile = function(req) {
                 resolveWithFullResponse: true,
                 json: true,
                 body: {
-                    input: {
-                        'external-url': download_host + '/composer/upload/' + req.query['package_id'] + '/' + req.file.filename,
-                        'package-type': package_type,
-                        'package-id': package_id,
-                        'package-path': package_path + '/' + req.file.filename
-                    }
+                    input: input
                 }
             })
         ]).then(function(result) {

diff --git a/skyquake/plugins/composer/src/src/components/CanvasPanel.js b/skyquake/plugins/composer/src/src/components/CanvasPanel.js
index cb212cb..9eece49 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/CanvasPanel.js
+++ b/skyquake/plugins/composer/src/src/components/CanvasPanel.js
@@ -101,7 +101,7 @@ const CanvasPanel = React.createClass({
                                </div>
                                {viewButtonTabs}
                                <div className="CanvasPanelBody panel-body" style={{marginRight: this.props.layout.right, bottom: this.props.layout.bottom}} >
-                                       {hasNoCatalogs ? null : viewFiles ? <FileManager files={this.props.files} type={this.props.type} item={this.props.item} filesState={this.props.filesState} /> : 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>
                                {
                                        isDescriptorView ?

diff --git a/skyquake/plugins/composer/src/src/components/ComposerApp.js b/skyquake/plugins/composer/src/src/components/ComposerApp.js
index 6507b34..861c38b 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/ComposerApp.js
+++ b/skyquake/plugins/composer/src/src/components/ComposerApp.js
@@ -205,6 +205,7 @@ const ComposerApp = React.createClass({
                                                                                 panelTabShown={self.state.panelTabShown}
                                                                                 files={self.state.files}
                                                                                 filesState={self.state.filesState}
+                                         newPathName={self.state.newPathName}
                                                                                 item={self.state.item}
                                                                                 type={self.state.filterCatalogByTypeValue}
                                                                                  />

diff --git a/skyquake/plugins/composer/src/src/components/filemanager/FileManager.jsx b/skyquake/plugins/composer/src/src/components/filemanager/FileManager.jsx
index ce490a0..9772ca8 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/filemanager/FileManager.jsx
+++ b/skyquake/plugins/composer/src/src/components/filemanager/FileManager.jsx
@@ -105,7 +105,13 @@ class FileManager extends React.Component {
         let html = (
             <div className="FileManager">
                 <PanelWrapper style={{flexDirection: 'column'}}>
-                    {self.props.files && self.props.files.id && buildList(self, self.props.files) }
+                <Panel className="addFileSection" style={{backgroundColor: 'transparent'}} no-corners>
+                    <div className="inputSection">
+                        <TextInput placeholder="some/path" value={this.props.newPathName} label="create a new directory" onChange={FileManagerActions.newPathNameUpdated} />
+                        <Button label="Create" onClick={FileManagerActions.createDirectory} />
+                    </div>
+                </Panel>
+                {self.props.files && self.props.files.id && buildList(self, self.props.files) }
                 </PanelWrapper>
             </div>
         )
@@ -125,7 +131,7 @@ function buildList(self, data) {
 function contentFolder(context, folder, path, key, inputState, updateFn, sendDownloadFileRequst, deleteFn) {
     let type = context.props.type;
     let id = context.props.item.id;
-    const onboardDropZone = createDropZone.bind(this, FileManagerUploadDropZone.ACTIONS.onboard, '.ComposerAppAddFile.' + path.replace('/', '-'), type, id, path);
+    const onboardDropZone = createDropZone.bind(this, FileManagerUploadDropZone.ACTIONS.onboard, '.ComposerAppAddFile.' + path.replace(/\//g, '-'), type, id, path);
     return (
         <Panel title={path} key={key} itemClassName="nested" no-corners>
         <div className="folder">
@@ -167,7 +173,7 @@ class ItemUpload extends React.Component {
             <div className="inputSection">
                 <label className="sqTextInput" style={{flexDirection: 'row', alignItems:'center'}}>
                     <span>Upload File</span>
-                    <Button className={'ComposerAppAddFile ' + path.replace('/', '-')} label="BROWSE"/>
+                    <Button className={'ComposerAppAddFile ' + path.replace(/\//g, '-')} label="BROWSE"/>
                 </label>
             </div>
         )

diff --git a/skyquake/plugins/composer/src/src/components/filemanager/FileManagerActions.js b/skyquake/plugins/composer/src/src/components/filemanager/FileManagerActions.js
index f39c2a9..93e1e5e 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/filemanager/FileManagerActions.js
+++ b/skyquake/plugins/composer/src/src/components/filemanager/FileManagerActions.js
@@ -23,7 +23,7 @@ class FileManagerActions {
     constructor() {
         this.generateActions('getFilelistSuccess', 'getFilelistError', 'updateFileLocationInput','sendDownloadFileRequst', 'addFileSuccess', 'addFileError','deletePackageFile','deleteFileSuccess','deleteFileError','openDownloadMonitoringSocketSuccess', 'openDownloadMonitoringSocketError',
                              'getFilelistSocketSuccess',
-                             'openFileManagerSockets', 'closeFileManagerSockets');
+                             'openFileManagerSockets', 'closeFileManagerSockets','newPathNameUpdated', 'createDirectory');
     }
 
 }

diff --git a/skyquake/plugins/composer/src/src/components/filemanager/FileManagerSource.js b/skyquake/plugins/composer/src/src/components/filemanager/FileManagerSource.js
index d2d9765..95703b2 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/filemanager/FileManagerSource.js
+++ b/skyquake/plugins/composer/src/src/components/filemanager/FileManagerSource.js
@@ -58,20 +58,22 @@ const FileManagerSource = {
     },
     addFile: function() {
         return {
-            remote: function(state, id, type, path, url) {
+            remote: function(state, id, type, path, url, refresh) {
                 return new Promise(function(resolve, reject) {
                     console.log('Adding file');
                     console.log(id, type, path, url);
                     let splitUrl = url.split('/');
                     let fileName = splitUrl[splitUrl.length -1];
+                    let packagePath = refresh ? path + ((path[path.length - 1] == '/') ? '' : '/') : path + '/' + fileName;
                     $.ajax({
                         beforeSend: Utils.addAuthorizationStub,
-                        url: 'api/file-manager?api_server=' + utils.getSearchParams(window.location).api_server +'&package_type=' + type + '&package_id=' + id + '&package_path=' + path + '/' + fileName + '&url=' + url,
+                        url: 'api/file-manager?api_server=' + utils.getSearchParams(window.location).api_server +'&package_type=' + type + '&package_id=' + id + '&package_path=' + packagePath + '&url=' + url,
                         success: function(data) {
                             resolve({
                                 data:data,
                                 path: path,
-                                fileName: fileName
+                                fileName: fileName,
+                                refresh: refresh
                             });
                         },
                         error: function(error) {

diff --git a/skyquake/plugins/composer/src/src/stores/ComposerAppStore.js b/skyquake/plugins/composer/src/src/stores/ComposerAppStore.js
index 75276d2..ff24cbb 100644 (file)
--- a/skyquake/plugins/composer/src/src/stores/ComposerAppStore.js
+++ b/skyquake/plugins/composer/src/src/stores/ComposerAppStore.js
@@ -41,6 +41,9 @@ import React from 'react';
 //Hack for crouton fix. Should eventually put composer in skyquake alt context
 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
 let NotificationError = null;
+
+import utils from '../libraries/utils';
+
 class ComponentBridge extends React.Component {
     constructor(props) {
         super(props);
@@ -126,6 +129,7 @@ class ComposerAppStore {
                this.filesState = {};
                this.downloadJobs = {};
                this.containers = [];
+               this.newPathName = '';
                //End File  manager values
                this.bindListeners({
                        onResize: PanelResizeAction.RESIZE,
@@ -164,7 +168,9 @@ class ComposerAppStore {
                        closeFileManagerSockets: FileManagerActions.closeFileManagerSockets,
                        openFileManagerSockets: FileManagerActions.openFileManagerSockets,
                        openDownloadMonitoringSocketSuccess: FileManagerActions.openDownloadMonitoringSocketSuccess,
-                       getFilelistSocketSuccess: FileManagerActions.getFilelistSocketSuccess
+                       getFilelistSocketSuccess: FileManagerActions.getFilelistSocketSuccess,
+                       newPathNameUpdated: FileManagerActions.newPathNameUpdated,
+                       createDirectory: FileManagerActions.createDirectory
                });
         this.exportPublicMethods({
             closeFileManagerSockets: this.closeFileManagerSockets.bind(this)
@@ -477,7 +483,7 @@ class ComposerAppStore {
                                                data: _.mergeWith(normalizedData.data, self.files.data, function(obj, src) {
                                                        return _.uniqBy(obj? obj.concat(src) : src, 'name');
                                                }),
-                                               id: self.files.id || normalizedData.id
+                                               id: normalizedData.id
                                        },
                                        filesState: filesState
                                }
@@ -527,7 +533,7 @@ class ComposerAppStore {
                let type = data.type || this.item.uiState.type;
                let path = data.path;
                let url = data.url;
-               this.getInstance().addFile(id, type, path, url);
+               this.getInstance().addFile(id, type, path, url, data.refresh);
        }
        updateFileLocationInput = (data) => {
                let name = data.name;
@@ -539,14 +545,16 @@ class ComposerAppStore {
                });
        }
        addFileSuccess = (data) => {
-               let path = data.path;
-               let fileName = data.fileName;
-               let files = _.cloneDeep(this.files);
-               let loadingIndex = files.data[path].push({
-                       status: 'DOWNLOADING',
-                       name: path + '/' + fileName
-               }) - 1;
-               this.setState({files: files});
+               if(!data.refresh) {
+                       let path = data.path;
+                       let fileName = data.fileName;
+                       let files = _.cloneDeep(this.files);
+                       let loadingIndex = files.data[path].push({
+                               status: 'DOWNLOADING',
+                               name: path + '/' + fileName
+                       }) - 1;
+                       this.setState({files: files});
+               }
 
        }
        startWatchingJob = () => {
@@ -663,6 +671,25 @@ class ComposerAppStore {
                        files: files
                })
        }
+       newPathNameUpdated = (event) => {
+               const value = event.target.value;
+               this.setState({
+                       newPathName: value
+               })
+       }
+       createDirectory = () => {
+               console.log(this.newPathName);
+               this.sendDownloadFileRequst({
+                       id: this.item.id,
+                       type: this.item.uiState.type,
+                       path: this.item.name + '/' + this.newPathName,
+                       url: utils.getSearchParams(window.location).dev_download_server || window.location.protocol + '//' + window.location.host,
+                       refresh: true
+               });
+               this.setState({
+                       newPathName: ''
+               })
+       }
 }
 
 export default alt.createStore(ComposerAppStore, 'ComposerAppStore');