Repository: h2oai/wave
File: studio/studio.js (JavaScript)

Code before:
        clearTimeout(this.timer)
        this.clickCount = 0
      }
    },
  },
  computed: {
    getIconSrc() {
      if (this.folder.isFolder) return this.isSubtreeOpen ? '/assets/img/folder-open.svg' : '/assets/img/folder.svg'
      if (this.folder.path) return `/assets/img/file-icons/$${getIconLabel(this.folder.path.split('.').pop())}.svg`
    },
    getItemLeftPadding() {
      if (this.folder.path) return (this.folder.path.split('/').length - (this.folder.action === 'new' ? 0 : 1)) * 0.7 + 'rem'
    }
  },
  directives: {
    focus: {
      mounted: (el) => el.focus()
    }
  },
  template: `
<li v-if="folder.label !== '' || folder.action === 'new'">
  <span @contextmenu.prevent="onContextMenu" @click.stop="onClick" :class="{ 'tree-item-active': store.activeFile == folder.path, 'tree-item': true }" ref="sample" :style="{paddingLeft: getItemLeftPadding}">
    <img class="tree-item-img" :src="getIconSrc" :alt="folder.isFolder ? 'Folder' : 'File'" />
    <input v-if="folder.action === 'new'" v-focus type="text" spellcheck="false" v-model="folder.label" @keyup.enter="onCreated" @keyup.esc="onCreateCanceled" @blur="onCreateCanceled">
    <input v-else-if="folder.action === 'rename'" v-focus type="text" spellcheck="false" v-model="folder.label" @keyup.enter="onRenamed" @keyup.esc="onRenameCanceled" @blur="onRenameCanceled" @focus="handleSelect">
    <span class="tree-item-label" v-else>{{folder.label}}</span>
  </span>
    <ul v-if="isSubtreeOpen && folder.isFolder && folder.children">
      <li v-for="folder in folder.children">
        <Tree :folder="folder"></Tree>
      </li>
    </ul>  
</li>
    `}
const Menu = {
  mounted() {
    this.bus.on('menu', ({ e, folder }) => {
      this.menuPosition = { x: e.x + 10, y: e.y - 20 }
      this.folder = folder
    })
    this.bus.on('documentClick', e => { if (!this.$$el.contains(e.target)) this.menuPosition = null })
  },
  data() {
    return {
      menuPosition: null,
      folder: null
    }
  },
  methods: {
    newFile() {
      eventBus.emit('openFolder')

Review comment (suggestion):
Nit
```suggestion
    <span v-else class="tree-item-label">{{folder.label}}</span>
```

Code after:
      </li>
    </ul>  
</li>
    `}
const Menu = {
  mounted() {
    this.bus.on('menu', ({ e, folder }) => {
      this.menuPosition = { x: e.x + 10, y: e.y - 20 }
      this.folder = folder
    })
    this.bus.on('documentClick', e => { if (!this.$$el.contains(e.target)) this.menuPosition = null })
  },
  data() {
    return {
      menuPosition: null,
      folder: null
    }
  },
  methods: {
    newFile() {
      eventBus.emit('openFolder')
      this.folder.children.push({ label: '', action: 'new', isFolder: false, path: this.folder.path })
      this.menuPosition = null
    },
    newFolder() {
      eventBus.emit('openFolder')
      this.folder.children.push({ label: '', action: 'new', isFolder: true, path: this.folder.path })
      this.menuPosition = null
    },
    remove() {
      this.folder.children = []
      this.folder.label = ''
      window.parent.wave.emit('file_viewer', this.folder.isFolder ? 'remove_folder' : 'remove_file', this.folder.path)
      this.menuPosition = null
    },
    rename() {
      this.folder.action = 'rename'
      this.folder._labelCache = this.folder.label
      this.menuPosition = null
    },
  },
  template: `
      <ul v-if="menuPosition && folder" class='menu' :style="{top: menuPosition.y + 'px', left: menuPosition.x + 'px'}">
        <li v-if="folder.isFolder" @click="newFile"><img class="menu-item-img" src="$${baseUrl}assets/img/file-plus.svg" alt="Folder" />New file</li>
        <li v-if="folder.isFolder" @click="newFolder"><img class="menu-item-img" src="$${baseUrl}assets/img/folder-plus.svg" alt="Folder" />New folder</li>
        <li @click="rename"><img class="menu-item-img" src="$${baseUrl}assets/img/pencil.svg" alt="Folder" />Rename</li>
        <li @click="remove" class='delete'><img class="menu-item-img" src="$${baseUrl}assets/img/trash-can.svg" alt="Folder" />Delete</li>
      </ul>
    `}
class EventBus {
  constructor() {