fix(FileTree): empty repository display

www/view/src/components/unit/RepositoryEmpty.js

@@ -0,0 +1,101 @@
+// core
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { withStyles } from '@material-ui/core/styles'
+import { injectIntl } from 'react-intl'
+
+// components
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
+import SquareIconButton from 'APPSRC/components/unit/SquareIconButton'
+import { plCopy } from '@pgyer/icons'
+
+// helpers
+import { copyToClipboard } from 'APPSRC/helpers/VaribleHelper'
+
+// style
+const styles = theme => ({
+  setup: {
+    padding: theme.spacing(3) + 'px',
+    borderRadius: '4px 4px 0px 0px',
+    border: '1px solid ' + theme.palette.border
+  },
+  noBorder: {
+    borderTop: 0,
+    borderRadius: '0px 0px 4px 4px'
+  },
+  code: {
+    position: 'relative',
+    marginTop: theme.spacing(1),
+    padding: theme.spacing(1.5) + 'px',
+    borderRadius: theme.spacing(0.5) + 'px',
+    background: theme.palette.background.main
+  },
+  icon: {
+    top: theme.spacing(1.5) + 'px',
+    right: theme.spacing(1.5) + 'px',
+    position: 'absolute'
+  }
+})
+
+class RepositoryEmpty extends React.Component {
+  render () {
+    const { currentRepositoryConfig, currentUserInfo, classes, intl } = this.props
+    const createCode = [
+      'echo "# ' + currentRepositoryConfig.repository.name + '" >> README.md',
+      'git init',
+      'git add README.md',
+      'git commit -m "first commit"',
+      'git branch -M main',
+      'git remote add origin ' + currentUserInfo.host + currentRepositoryConfig.group.name + '/' + currentRepositoryConfig.repository.name + '.git',
+      'git push -u origin main'
+    ]
+    const pushCode = [
+      'git remote add origin ' + currentUserInfo.host + currentRepositoryConfig.group.name + '/' + currentRepositoryConfig.repository.name + '.git',
+      'git branch -M main',
+      'git push -u origin main'
+    ]
+
+    return <Grid item xs={12}>
+      <Grid className={classes.setup}>
+        <Typography variant='h1' component='div'>{intl.formatMessage({ id: 'message.createNewRepository' })}</Typography>
+        <Grid className={classes.code}>
+          <SquareIconButton className={classes.icon} label='label.copy' onClick={e => copyToClipboard(createCode.join('\n'))} icon={plCopy} />
+          {createCode.map((item, index) => <Typography key={index} variant='body1' component='div'><code>{item}</code></Typography>)}
+        </Grid>
+      </Grid>
+      <Grid className={[classes.setup, classes.noBorder].join(' ')}>
+        <Typography variant='h1' component='div'>{intl.formatMessage({ id: 'message.pushRepository' })}</Typography>
+        <Grid className={classes.code}>
+          <SquareIconButton className={classes.icon} label='label.copy' onClick={e => copyToClipboard(pushCode.join('\n'))} icon={plCopy} />
+          {pushCode.map((item, index) => <Typography key={index} variant='body1' component='div'><code>{item}</code></Typography>)}
+        </Grid>
+      </Grid>
+    </Grid>
+  }
+}
+
+RepositoryEmpty.propTypes = {
+  currentRepositoryConfig: PropTypes.object.isRequired,
+  currentUserInfo: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired,
+  intl: PropTypes.object.isRequired
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    currentRepositoryConfig: state.DataStore.currentRepositoryConfig,
+    currentUserInfo: state.DataStore.currentUserInfo
+  }
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {}
+}
+
+export default injectIntl(
+  withStyles(styles)(
+    connect(mapStateToProps, mapDispatchToProps)(RepositoryEmpty)
+  )
+)

www/view/src/components/view/FileTree.js

@@ -21,6 +21,7 @@ import CommitItem from 'APPSRC/components/unit/CommitItem'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { plFile, psFolder, plSearch } from '@pgyer/icons'
 import FormattedTime from 'APPSRC/components/unit/FormattedTime'
+import RepositoryEmpty from 'APPSRC/components/unit/RepositoryEmpty'
 import RepositoryData from 'APPSRC/data_providers/RepositoryData'
 
 // helpers
@@ -350,14 +351,7 @@ class FileTree extends React.Component {
         <Grid container className={classes.loading}><CircularProgress /></Grid>
       </Grid>}
 
-      {!this.state.pending && (!this.state.objectData.object || this.state.objectData.object.length === 0) && <Grid item xs={12}>
-        <EmptyListNotice
-          imageName={'branches-empty.png'}
-          title={intl.formatMessage({ id: 'message.repository_S_empty' }, { s: intl.formatMessage({ id: 'label.file' }) })}
-          pending={this.state.pending}
-        />
-      </Grid>}
-
+      {!this.state.pending && (!this.state.objectData.object || this.state.objectData.object.length === 0) && <RepositoryEmpty />}
     </Grid>
   }
 }

www/view/src/lang/en-us/Message.js

@@ -48,6 +48,8 @@ const data = {
   fileContentOversize: 'File Size Exceed limitation, Check It Out Localy',
   fileTypeNotSupport: 'Binary File Can Not Shown',
   diffFileToMany: ' The maximum number of files allowed to be displayed is exceeded, please check locally',
+  createNewRepository: 'create a new repository on the command line',
+  pushRepository: 'push an existing repository from the command line',
 
   _S_empty: 'Please Input {s}',
   repository_S_empty: 'No {s} In Repository',

www/view/src/lang/zh-cn/Message.js

@@ -48,6 +48,8 @@ const data = {
   fileContentOversize: '文件大小超过允许展示的最大限度, 请在本地查看',
   fileTypeNotSupport: '暂不支持二进制文件的展示',
   diffFileToMany: '超过允许展示的最大文件数量, 请在本地查看',
+  createNewRepository: '在命令行创建一个新仓库',
+  pushRepository: '在命令行 push 一个已存在的仓库',
 
   _S_empty: '请输入{s}',
   repository_S_empty: '仓库内还没有{s}',