Bac 679/cloud code sample

src/components/B4ACodeTree/B4ACodeTree.react.js

@@ -11,6 +11,8 @@ import B4ATreeActions from 'components/B4ACodeTree/B4ATreeActions';
 import Swal from 'sweetalert2';
 import folderInfoIcon from './icons/folder-info.png';
 import B4aEmptyState from 'components/B4aEmptyState/B4aEmptyState.react';
+import B4aCloudEmpty from 'components/B4aCloudEmpty/B4aCloudEmpty.react';
+import B4aCloudPublicEmpty from 'components/B4aCloudEmpty/B4aCloudPublicEmpty.react';
 // import CloudCodeChanges from 'lib/CloudCodeChanges';
 import PropTypes from 'lib/PropTypes';
 import Icon from 'components/Icon/Icon.react';
@@ -19,6 +21,7 @@ import { amplitudeLogEvent } from 'lib/amplitudeEvents';
 import buttonStyles from 'components/Button/Button.scss';
 import baseStyles from 'stylesheets/base.scss';
 import modalStyles from 'components/B4aModal/B4aModal.scss';
+import CloudCodeSampleModal from './CloudCodeSampleModal.react'
 
 import 'jstree/dist/themes/default/style.css'
 import 'components/B4ACodeTree/B4AJsTree.css'
@@ -60,16 +63,30 @@ export default class B4ACodeTree extends React.Component {
       files: this.props.files,
       isImage: false,
       selectedFolder: 0,
+      currentFolder: null,
       isFolderSelected: true,
       selectedNodeData: null,
       loadingFileId: null,
-      errorFileData: null,
+      errorFileData: null
     }
 
     // Used to track the latest file load request
     this.loadRequestId = 0;
   }
 
+  selectSpecificFile(fileName) {
+    const tree = $('#tree').jstree(true);
+    if (!tree) return;
+
+    const node = tree.get_json('#', { flat: true }).find(n => n.text === fileName);
+
+    if (node) {
+      B4ATreeActions.selectFileOnTree(node.id);
+    } else {
+      console.warn('Arquivo não encontrado na árvore.');
+    }
+  }
+
   getFileType(file) {
     try {
       return file.split(',')[0].indexOf('image') >= 0
@@ -205,7 +222,16 @@ export default class B4ACodeTree extends React.Component {
         }
       }
     }
-    this.setState({ source, selectedFile, nodeId, extension, isImage, selectedFolder, isFolderSelected: selected.type == 'folder' || selected.type == 'new-folder' })
+    this.setState({ 
+      source, 
+      selectedFile, 
+      nodeId, 
+      extension, 
+      isImage, 
+      selectedFolder, 
+      isFolderSelected: selected.type == 'folder' || selected.type == 'new-folder' ,
+      currentFolder: selected.text
+    })
   }
 
   // method to identify the selected tree node
@@ -232,8 +258,11 @@ export default class B4ACodeTree extends React.Component {
     $('#tree').jstree().redraw(true);
 
     // set updated files.
-    this.props.cloudCodeChanges.addFile($('#tree').jstree('get_selected', true).pop().id);
-    this.props.setUpdatedFile(this.props.cloudCodeChanges.getFiles());
+    let cloneUpdatedFiles = [...this.props.updatedFiles];
+    if(!cloneUpdatedFiles.includes('j1_mainJS') && !cloneUpdatedFiles.includes('j1_indexHTML')){
+      this.props.cloudCodeChanges.addFile($('#tree').jstree('get_selected', true).pop().id);
+      this.props.setUpdatedFile(this.props.cloudCodeChanges.getFiles());
+    }
   }
 
   selectCloudFolder() {
@@ -244,7 +273,39 @@ export default class B4ACodeTree extends React.Component {
   }
 
   updateCodeOnNewFile(type, text, id){
+
     if (type === 'delete-file') {
+      if (!this.props.hasDeployed) {
+        let cloneUpdatedFiles = [...this.props.updatedFiles];
+
+        // Mapping auto created files and specific IDs
+        const specialFiles = {
+          'main.js': 'j1_mainJS',
+          'index.html': 'j1_indexHTML'
+        };
+
+        // Define which ID to use
+        const fileIdToRemove = specialFiles[text] && cloneUpdatedFiles.includes(specialFiles[text])
+          ? specialFiles[text]
+          : id;
+
+        // Remove from cloudCodeChanges and cloneArray
+        this.props.cloudCodeChanges.removeFile(fileIdToRemove);
+        cloneUpdatedFiles = cloneUpdatedFiles.filter(f => f !== fileIdToRemove);
+
+        // Reselect folder and update UI
+        if ($('#tree').jstree().get_json().length > 0) {
+          const cloudFolder = $('#tree').jstree().get_json()[0].id;
+          $('#tree').jstree('select_node', cloudFolder);
+        }
+
+        this.props.setUpdatedFile(cloneUpdatedFiles);  
+
+        this.selectCloudFolder();
+        B4ATreeActions.refreshEmptyFolderIcons();
+        return;
+      }    
+
       // this.props.cloudCodeChanges.removeFile(text);
       this.props.cloudCodeChanges.removeFile(id);
       if ($('#tree').jstree().get_json().length > 0) {
@@ -317,10 +378,29 @@ export default class B4ACodeTree extends React.Component {
       content = <img style={{ width: '100%', height: '100%', objectFit: 'scale-down' }} src={this.state.source} />;
     }
     else if (this.state.isFolderSelected === true) {
-      content = this.state.source && this.state.source !== '' ? <B4aEmptyState
-        margin="46px 0 0 0"
-        imgSrc={folderInfoIcon}
-        description={this.state.source} /> : <div></div>;
+      content = 
+        this.state.currentFolder && this.state.currentFolder === 'cloud' ?
+          <B4aCloudEmpty
+            imgSrc={folderInfoIcon}
+            selectMainJs={() => this.selectSpecificFile('main.js')}
+            currentApp={this.props.currentApp}
+            hasDeployed={this.props.hasDeployed}
+          />
+        : this.state.currentFolder === 'public' ?
+          <B4aCloudPublicEmpty
+            imgSrc={folderInfoIcon}
+            selectIndex={() => this.selectSpecificFile('index.html')}
+            hasDeployed={this.props.hasDeployed}
+          /> 
+        :
+        this.state.source && this.state.source !== '' ? 
+          <B4aEmptyState
+            margin="46px 0 0 0"
+            imgSrc={folderInfoIcon}
+            description={this.state.source} 
+          /> 
+        : 
+        <div></div>;
     }
     else if (this.state.selectedFile) {
       content = <div className={`${styles.filesPreviewWrapper}`}>
@@ -353,7 +433,7 @@ export default class B4ACodeTree extends React.Component {
     }
 
     return (
-      <div className={styles.codeContainer} style={this.props.style ? this.props.style : {}}>
+      <div className={styles.codeContainer} style={this.props.style ? this.props.style : {}} id="codeContainer">
         <div className={styles.fileSelector}>
           <div className={`${styles['files-box']}`}>
             <div className={styles['files-header']} >

src/components/B4ACodeTree/B4ACodeTree.scss

@@ -35,12 +35,123 @@
   position: absolute;
   top: $toolbar-height; // toolbar height
   width: 100%;
-  height: calc(100% - $toolbar-height); // toolbar height
+  min-height: calc(100% - $toolbar-height); // toolbar height
   display: flex;
   flex-wrap: wrap;
   flex: 1;
 }
 
+.cloudCodeSampleModal{
+  @include modalAnimation();
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 70vw;
+  padding: 30px;
+  max-height: 60vh;
+  background: #253348;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  transition: width 0.5s cubic-bezier(1, 0, 0, 1);
+  overflow: auto;
+  & .cloudCodeSampleModalTitle {
+    h1{
+      user-select: none
+    }
+    @include SoraFont();
+    padding-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    & .closeIcon {
+      cursor: pointer;
+    }
+  }
+
+  & .docsLink {
+    padding-top: 20px;
+    a{
+      cursor: pointer;
+      color: $blue;
+    }
+  }
+}
+
+.codeBlockCloudSample {
+  position: relative;
+  padding-top: 0.5rem;
+  background: $regal-blue;
+  border-radius: 4px;
+
+  & .codeBlockHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0rem 1.5rem;
+  }
+
+  .languageLabel {
+    user-select: none;
+  }
+
+  pre {
+    background: #111214 !important;
+    border-radius: 4px;
+    padding: 1.175rem 1.5rem 1.5rem 0!important;
+    margin: 1rem 0;
+    overflow-x: auto;
+    margin: none !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    font-family: 'Roboto Mono', monospace !important;
+    padding-left: 3.5em !important;
+
+    pre.line-numbers:before {
+      background: transparent !important;
+    }
+
+    code {
+      font-family: 'Roboto Mono', monospace !important;
+      font-size: 13px;
+      background: #111214 !important;
+    }
+  }
+
+  code {
+    font-family: 'Roboto Mono', monospace !important;
+    font-size: 13px;
+    background: #111214 !important;
+  }
+
+  .copyButtonCloudSample {
+    .copyTooltipCloudSample {
+      position: absolute;
+      bottom: calc(100% + 8px);
+      left: calc(100% - 110px);
+      transform: translateX(50%);
+      background: $dark-grey;
+      color: $white;
+      border-radius: 5px;
+      padding: .625rem 1rem;
+      font-size: 12px;
+      white-space: nowrap;
+      box-shadow: 0px 6px 16px 0px #0000001A;
+      animation: fadeIn 0.2s ease-in-out;
+
+      &::after {
+          content: '';
+          position: absolute;
+          left: 55%;
+          bottom: -4px;
+          transform: translateX(-50%) rotate(45deg);
+          width: 8px;
+          height: 8px;
+          background: $dark-grey;
+      }
+    }
+  }
+
+}
+
 .files-box{
   background-color: $dark-blue;
   padding-top: 1.88rem;