Improve cloud code legend for deployed and deploy pending (#431)

* code push fixes

* revert config

* cloud code legend

Co-authored-by: Faisal Nadeem <mfaisalnadeem@hotmail.com>

Author: fn-faisal

src/components/B4ACodeTree/B4ACodeTree.react.js

@@ -9,7 +9,7 @@ import B4ACloudCodeView             from 'components/B4ACloudCodeView/B4ACloudCo
 import B4ATreeActions               from 'components/B4ACodeTree/B4ATreeActions';
 import Swal                         from 'sweetalert2';
 import B4AAlert                     from 'components/B4AAlert/B4AAlert.react';
-
+import CloudCodeChanges             from 'lib/CloudCodeChanges';
 import 'jstree/dist/themes/default/style.css'
 import 'components/B4ACodeTree/B4AJsTree.css'
 
@@ -40,9 +40,10 @@ export default class B4ACodeTree extends React.Component {
       isImage: false,
       selectedFolder: 0,
       isFolderSelected: true,
-      updatedFiles: [],
       selectedNodeData: null
     }
+
+    this.cloudCodeChanges = new CloudCodeChanges();
   }
 
   getFileType(file) {
@@ -65,20 +66,6 @@ export default class B4ACodeTree extends React.Component {
     this.loadFile()
   }
 
-  syncNewFileContent( tree, file ) {
-    return tree.map( (node) => {
-      if ( node.type === 'folder' || node.type === 'new-folder' ) {
-        node.children = this.syncNewFileContent(node.children, file);
-      }
-      else if ( file && node.data?.code !== file?.base64[0]
-          && node.text == file.fileList[0].name) {
-        node.data.code = file.base64[0];
-      }
-
-      return node;
-    });
-  }
-
   // load file and add on tree
   async loadFile() {
     let file = this.state.newFile;
@@ -88,14 +75,10 @@ export default class B4ACodeTree extends React.Component {
       if ( overwrite === true ) {
         this.setState({ newFile: '', filesOnTree: file });
         this.handleTreeChanges()
-        const updatedFiles = this.syncNewFileContent(this.state.files, file);
-        this.props.setCurrentCode(updatedFiles);
       }
     }
   }
 
-
-
   deleteFile() {
     if (this.state.nodeId) {
       B4ATreeActions.remove(`#${this.state.nodeId}`, true);
@@ -133,8 +116,6 @@ export default class B4ACodeTree extends React.Component {
               selectedFile = selected.text;
               nodeId = selected.id
               extension = B4ATreeActions.getExtension(selectedFile)
-              const fileUpdated = this.state.updatedFiles.find( f => f.file === this.state.selectedFile);
-              source = fileUpdated ? fileUpdated.updatedContent : source;
               this.setState({ source, selectedFile, nodeId, extension, isImage })
             }
             fr.readAsText(selectedFile);
@@ -163,8 +144,6 @@ export default class B4ACodeTree extends React.Component {
         }
       }
     }
-    const fileUpdated = this.state.updatedFiles.find( f => f.file === this.state.selectedFile);
-    source = fileUpdated ? fileUpdated.updatedContent : source;
     this.setState({ source, selectedFile, nodeId, extension, isImage, selectedFolder, isFolderSelected: selected.type == 'folder' || selected.type == 'new-folder' })
   }
 
@@ -181,37 +160,29 @@ export default class B4ACodeTree extends React.Component {
     return this.props.parentState({ unsavedChanges: true })
   }
 
-  getUpdatedFiles(files, value) {
-    return files.map( (file) => {
-      if ( file.type === 'folder' || file.type === 'new-folder' ) {
-        file.children = this.getUpdatedFiles(file.children, value);
-      }
-      else if ( this.state.selectedFile === file.text && file.data ) {
-        file.data.code = value;
-      }
-      // children.
-      return file;
-    });
-  }
-
   async updateSelectedFileContent(value) {
-    const updatedData = { file: this.state.selectedFile, updatedContent: value };
     const ecodedValue = await B4ATreeActions.encodeFile(value, 'data:plain/text;base64');
-    let updatedFiles = this.getUpdatedFiles(
-      this.state.files,
-      ecodedValue
-    );
-    this.setState({ updatedFiles: [...this.state.updatedFiles.filter( f => f.file !== this.state.selectedFile ), updatedData], files: updatedFiles, source: value });
-    this.props.setCurrentCode(updatedFiles);
+    this.setState({ source: value });
 
     this.props.setCodeUpdated(true);
     this.state.selectedNodeData?.instance.set_icon(this.state.selectedNodeData.node, require('./icons/file.png').default);
+
+    $('#tree').jstree('get_selected', true).pop().data.code = ecodedValue;
+    $('#tree').jstree().redraw(true);
+
+    // set updated files.
+    this.cloudCodeChanges.addFile($('#tree').jstree('get_selected', true).pop().text);
+    this.props.setUpdatedFile(this.cloudCodeChanges.getFiles());
   }
 
   updateCodeOnNewFile(type){
     if ( type === 'new-file' ) {
       this.props.setCodeUpdated(true);
     }
+
+    // set updated files.
+    this.cloudCodeChanges.addFile($('#tree').jstree('get_selected', true).pop().text);
+    this.props.setUpdatedFile(this.cloudCodeChanges.getFiles());
   }
 
   componentDidMount() {
@@ -229,9 +200,6 @@ export default class B4ACodeTree extends React.Component {
     $('#tree').on('rename_node.jstree', (node, parent) => this.updateCodeOnNewFile(parent?.node?.type));
     $('#tree').on('delete_node.jstree', (node, parent) => this.updateCodeOnNewFile(parent?.node?.type));
 
-    // current code.
-    this.props.setCurrentCode(this.state.files);
-
   }
 
   render(){

src/dashboard/Data/CloudCode/B4ACloudCode.react.js

@@ -43,9 +43,7 @@ class B4ACloudCode extends CloudCode {
       unsavedChanges: false,
       modal: null,
       codeUpdated: false,
-
-      // updated cloudcode files.
-      currentCode: [],
+      updatedFiles: [],
 
       // Parameters used to on/off alerts
       showTips: localStorage.getItem(this.alertTips) !== 'false',
@@ -98,7 +96,6 @@ class B4ACloudCode extends CloudCode {
 
   componentDidUpdate() {
     if ( this.state.codeUpdated === true ) {
-      console.log('code updated');
       this.onBeforeUnloadSaveCode = window.onbeforeunload = function() {
         return '';
       }
@@ -131,25 +128,10 @@ class B4ACloudCode extends CloudCode {
     })
   }
 
-  syncCurCode( nodesOnTree, currentCode ){
-    return nodesOnTree.map( (node, idx) => {
-      const code = currentCode.find( code => code.text === node.text );
-      if ( node.type === 'folder' || node.type === 'new-folder' ) {
-        node.children = this.syncCurCode(node.children, currentCode[idx].children);
-      }
-      else if ( code && node.data?.code !== code?.data?.code
-          && node.text == currentCode[idx]?.text) {
-        node.data.code = currentCode[idx].data?.code;
-      }
-
-      return node;
-    });
-  }
-
   async uploadCode() {
     let tree = [];
     // Get current files on tree
-    let currentCode = this.syncCurCode(getFiles(), this.state.currentCode);
+    let currentCode = $('#tree').jstree().get_json();
     const missingFileModal = (
       <Modal
         type={Modal.Types.DANGER}
@@ -293,7 +275,7 @@ class B4ACloudCode extends CloudCode {
         description={alertWhatIsMessage} />
 
       content = <B4ACodeTree
-        setCurrentCode={(newCode) => this.setState({ currentCode: newCode })}
+        setUpdatedFile={(updatedFiles) => this.setState({ updatedFiles })}
         setCodeUpdated={() => this.setState({ codeUpdated: true })}
         files={this.state.files}
         parentState={this.setState.bind(this)}
@@ -302,12 +284,12 @@ class B4ACloudCode extends CloudCode {
 
       footer = <div className={styles.footer}>
         <div className={styles.footerContainer}>
-          <div className={styles.ccStatusIcon}>
-            <span className={styles.deployedCircle}></span> <small>Deployed</small>
-          </div>
-          <div className={styles.ccStatusIcon}>
-            <span className={styles.undeployedCircle}></span> <small>Deploy pending</small>
-          </div>
+          {
+            this.state.updatedFiles.length > 0 &&
+            <div className={styles.ccStatusIcon}>
+              <span className={styles.undeployedCircle}></span> <small>Files pending deploy ({this.state.updatedFiles.length})</small>
+            </div>
+          }
         </div>
         <div className={styles.footerContainer}>
           <Button

src/lib/CloudCodeChanges.js

@@ -0,0 +1,17 @@
+
+export default class CloudCodeChanges {
+
+  constructor(){
+    this.files = [];
+  }
+
+  addFile( fileName ) {
+    this.files = this.files.filter(f => f !== fileName);
+    this.files = [ ...this.files, fileName ];
+  }
+
+  getFiles() {
+    return this.files;
+  }
+
+}

src/lib/ColumnPreferences.js

@@ -115,7 +115,7 @@ export function getOrder(cols, appId, className, defaultPrefs) {
     if (typeof required === 'undefined') {
       order[i].required = false;
     }
-    
+
     if (requested[name]) {
       filtered.push(order[i]);
     } else {