Add default workspace

Author: Yang Zhen

app/backendAPI/workspaceAPI.js

@@ -56,3 +56,7 @@ export function requestCollaborator () {
 export function execShellCommand (command) {
   return request.post(`/tty/${config.spaceKey}/exec`, { command })
 }
+
+export function getWorkspaceList () {
+  return request.get('/workspaces?page=0&size=5&sort=lastModifiedDate,desc')
+}

app/commands/commandBindings/file.js

@@ -91,6 +91,13 @@ export function openFileWithEncoding ({ path, editor = {}, others = {}, allGroup
     })
 }
 
+function createTab ({ icon, type }) {
+  TabStore.createTab({
+    icon,
+    type,
+  })
+}
+
 function createFileWithContent (content) {
   return function createFileAtPath (path) {
     if (content) {
@@ -268,6 +275,13 @@ const fileCommands = {
   },
 
   // 'file:unsaved_files_list':
+  'file:open_welcome': (c) => {
+    TabStore.createTab({
+      icon: 'fa fa-info-circle',
+      type: 'welcome',
+      title: 'Welcome',
+    })
+  }
 }
 
 export default fileCommands

app/components/Tab/TabContainer.jsx

@@ -7,6 +7,7 @@ import { TabBar, TabContent, TabContentItem } from 'commons/Tab'
 import Editor from 'components/Editor'
 import { TablessCodeEditor } from 'components/Editor/components/CodeEditor'
 import i18n from 'utils/createI18n'
+import WelcomePage from './WelcomePage'
 
 const contextMenuItems = [
   {
@@ -55,7 +56,7 @@ class TabContainer extends Component {
         <TabContent tabGroup={tabGroup} >
           {tabGroup.tabs.length ? tabGroup.tabs.map(tab =>
             <TabContentItem key={tab.id} tab={tab} >
-              <Editor tab={tab} active={tab.isActive} />
+              {this.renderContent(tab)}
             </TabContentItem>
           )
           : <TabContentItem tab={{ isActive: true }}>
@@ -66,6 +67,13 @@ class TabContainer extends Component {
       </div>
     )
   }
+
+  renderContent (tab) {
+    if (tab.type === 'welcome') {
+      return <WelcomePage />
+    }
+    return <Editor tab={tab} active={tab.isActive} />
+  }
 }
 
 export default TabContainer

app/components/Tab/WelcomePage.jsx

@@ -0,0 +1,107 @@
+import _ from 'lodash'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import { observer, inject } from 'mobx-react'
+import { observable } from 'mobx'
+import dispatchCommand from 'commands/dispatchCommand'
+import api from '../../backendAPI'
+
+@observer
+class WelcomePage extends Component {
+  constructor (props) {
+    super(props)
+    this.state = observable({
+      recentList: []
+    })
+  }
+  componentWillMount () {
+    this.loadRecentWS()
+  }
+
+  render () {
+    return (
+      <div className='welcome-page'>
+        <h1>Coding WebIDE</h1>
+        <div className='subtitle'>Coding Anytime Anywhere</div>
+
+        <h2>Start</h2>
+        <div className='block start-block'>
+          <div className='link-item'>
+            <a href='#' onClick={this.createNewFile}>New File...</a>
+          </div>
+          <div className='link-item'>
+            <a href='#' onClick={this.createNewFolder}>New Folder...</a>
+          </div>
+        </div>
+
+        <h2>Recent</h2>
+        <div className='block recent-block'>
+          {this.renderRecentItem()}
+        </div>
+
+        <h2>Help</h2>
+        <div className='block help-block'>
+          <div className='link-item'>
+            <a href='https://coding.net/help/doc/webide/' target='blank'>Document</a>
+          </div>
+          <div className='link-item'>
+            <a href='https://coding.net/feedback' target='blank'>Feedback</a>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  renderRecentItem () {
+    return (
+      <div className='recent-list'>
+        {
+          this.state.recentList.map((recentItem) => {
+            return (
+              <div className='recent-item' key={recentItem.name}>
+                <a href={recentItem.link}>{recentItem.name}</a>
+              </div>
+            )
+          })
+        }
+      </div>
+    )
+  }
+  createNewFile (e) {
+    e.preventDefault()
+    dispatchCommand('file:new_file')
+  }
+  createNewFolder (e) {
+    e.preventDefault()
+    dispatchCommand('file:new_folder')
+  }
+  loadRecentWS () {
+    api.getWorkspaceList().then((res) => {
+      if (res.contents && res.contents.length > 0) {
+        const recentList = []
+        res.contents.forEach((ws) => {
+          let name = ''
+          if (ws.defaultWorkspace) {
+            name = 'Default'
+          } else {
+            name = `${ws.project.ownerName}/${ws.project.name}`
+          }
+          const wsItem = {
+            name,
+            icon: '',
+            link: `/ws/${ws.spaceKey}`,
+            command: () => {
+              window.open(`/ws/${ws.spaceKey}`)
+            },
+          }
+          recentList.push(wsItem)
+        })
+
+        this.state.recentList = recentList
+      }
+    })
+  }
+
+}
+
+export default WelcomePage

app/components/Tab/state.js

@@ -19,6 +19,7 @@ class Tab extends BaseTab {
     this.editorProps = props.editor
     this.update(props)
     this.saveFileList()
+    this.type = props.type
     autorun(() => {
       if (!this.file) return
       this.flags.modified = !this.file.isSynced

app/containers/Root/actions.js

@@ -22,5 +22,5 @@ export const initState = () => (dispatch) => {
     if (spaceKey) config.spaceKey = spaceKey
   }
   window.ide = ide
-  dispatch({ type: INIT_STATE })
+  // dispatch({ type: INIT_STATE })
 }

app/containers/Root/index.jsx

@@ -13,7 +13,7 @@ class Root extends Component {
     dispatch: PropTypes.func
   }
   componentWillMount () {
-    this.props.dispatch(initState()) // initLifecycle_2
+    // this.props.dispatch(initState()) // initLifecycle_2
   }
   render () {
     return <IDE />

app/styles/core-ui/Welcome.styl

@@ -0,0 +1,28 @@
+.welcome-page {
+  color: $text-color;
+  padding: 10px 40px;
+  h1 {
+    font-weight: normal;
+    padding: 0;
+    margin: 0;
+  }
+  .subtitle {
+    font-size: 1.4em;
+    padding-top: 10px;
+    color: $text-color-subtle;
+    padding-bottom: 40px;
+  }
+  h2 {
+    font-weight: normal;
+    padding: 0;
+    margin: 0;
+    font-size: 1.2em;
+    padding-bottom: 6px;
+  }
+  .block {
+    padding-bottom: 40px;
+  }
+  .link-item {
+    
+  }
+}

app/styles/core-ui/index.styl

@@ -22,4 +22,5 @@
 @import "./Editor";
 @import "./Offline";
 @import "./FileList";
-@import "./Tooltip"
+@import "./Tooltip";
+@import "./Welcome";

app/styles/dark/index.styl

@@ -14,10 +14,11 @@
 @import './styles/filelist';
 @import './styles/base';
 
-
 // 插件用样式
 @import './styles/weapp';
 @import './styles/collaborators';
 @import './styles/env';
 @import './styles/access';
 @import './styles/java';
+
+@import './styles/welcome';