Add external link to create an issue

src/components/NewIssue.jsx

@@ -1,5 +1,7 @@
 import React, { PropTypes, PureComponent } from 'react'
-import { Button, Input, Form, TextArea } from 'semantic-ui-react'
+import { Button, Input, Icon, Form, TextArea } from 'semantic-ui-react'
+import FadeTransition from './FadeTransition'
+import { preventDefault } from 'utils'
 import './NewIssue.styl'
 
 class NewIssue extends PureComponent {
@@ -12,44 +14,62 @@ class NewIssue extends PureComponent {
     this.setState({ [key]: value})
   }
 
-  handleSubmit = () => {
+  handleSubmit = preventDefault(() => {
     this.props.onSubmit(this.state)
-  }
+  })
 
   render () {
     const { title, description } = this.state
-    const { loading } = this.props
+    const { loading, onExternal } = this.props
 
     return (
-      <div className='NewIssue'>
-        <Form className='NewIssue_Form'>
-          <div className='NewIssue_Form_Description'>Title</div>
+      <FadeTransition className='NewIssue'>
+        <Form className='NewIssue_Form' onSubmit={this.handleSubmit}>
+          <div className='NewIssue_Form_Description'>
+            <div style={{ flex: 1 }}>Title</div>
+            <Icon
+              name='external'
+              link
+              color='blue'
+              title='Open on Gitlab'
+              onClick={onExternal}
+            />
+          </div>
           <Input
             autoFocus
             value={title}
             disabled={loading}
             onChange={this.handleChange('title')}
           />
+
           <div className='NewIssue_Form_Description'>Description</div>
           <TextArea
             disabled={loading}
             placeholder='Write a comment'
             onChange={this.handleChange('description')}
           />
         </Form>
+
         <Button
           positive
           disabled={!title.trim() || loading}
+          loading={loading}
           content='Submit issue'
           onClick={this.handleSubmit}
         />
-      </div>
+      </FadeTransition>
     )
   }
 }
 
 NewIssue.propTypes = {
+  loading: PropTypes.bool,
+  onExternal: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired
+}
 
+NewIssue.propTypes = {
+  loading: false
 }
 
 export default NewIssue

src/components/NewIssue.styl

@@ -7,13 +7,19 @@
 .NewIssue_Project
   color gray
   font-size 0.8em
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
 
 .NewIssue_Form
   display flex
   flex 1
   flex-direction column
   .input
     margin-bottom 10px
+
 .NewIssue_Form_Description
+  display flex
   margin-bottom 5px
+  align-items center
 

src/components/TopBar.jsx

@@ -45,8 +45,8 @@ class TopBar extends PureComponent {
           }
           {!!title &&
             <div className='App__TopBar_Content_Title'>
-              {title}
-              <div className='NewIssue_Project'>
+              <div>{title}</div>
+              <div className='NewIssue_Project' title={description}>
                 {description}
               </div>
             </div>

src/components/TopBar.styl

@@ -33,3 +33,4 @@
   font-size 1.2em
   font-weight bold
   margin-right 10px
+  overflow hidden

src/containers/NewIssue.jsx

@@ -4,20 +4,27 @@ import { NewIssue } from 'components'
 import * as actions from 'store/actions'
 import { getIsCreatingIssue } from 'store/selectors'
 
-const NewIssueContainer = ({ loading, onCreateIssue }) => (
-  <NewIssue loading={loading} onSubmit={onCreateIssue}/>
+const NewIssueContainer = ({ loading, onCreateIssue, onOpenExternalNewIssue }) => (
+  <NewIssue
+    loading={loading}
+    onSubmit={onCreateIssue}
+    onExternal={onOpenExternalNewIssue}
+  />
 )
 
 NewIssueContainer.propTypes = {
+  loading: PropTypes.bool,
   onCreateIssue: PropTypes.func,
+  onOpenExternalNewIssue: PropTypes.func
 }
 
 const mapStateToProps = state => ({
   loading: getIsCreatingIssue(state),
 })
 
 const mapDispatchToProps = ({
-  onCreateIssue: actions.createIssue
+  onCreateIssue: actions.createIssue,
+  onOpenExternalNewIssue: actions.openExternalNewIssue
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(NewIssueContainer)

src/store/actions.js

@@ -5,11 +5,9 @@ export const setPage = createAction('SET_PAGE', page => ({ page }))
 export const updateEntity = createAction('UPDATE_ENTITY')
 export const openProfile = createAction('OPEN_PROFILE')
 export const openSettings = createAction('OPEN_SETTINGS')
-export const openNewIssue = createAction('OPEN_NEW_ISSUE')
-export const newIssue = createAction('NEW_ISSUE')
+
 export const openTab = createAction('OPEN_TAB', url => ({ url }))
 export const getOpenedTab = createAction('GET_OPENED_TAB')
-export const setIssueMessage = createAction('SET_ISSUE_MESSAGE')
 
 // TOKEN
 export const getPersonalToken = createAction('GET_PERSONAL_TOKEN')
@@ -40,5 +38,8 @@ export const requestTodos = createAction('REQUEST_TODOS')
 export const requestTodosSuccess = createAction('REQUEST_TODOS_SUCCESS')
 
 // ISSUES
+export const openExternalNewIssue = createAction('OPEN_EXTERNAL_NEW_ISSUE')
+export const newIssue = createAction('NEW_ISSUE')
+export const setIssueMessage = createAction('SET_ISSUE_MESSAGE')
 export const createIssue = createAction('CREATE_ISSUE')
 export const createIssueSuccess = createAction('CREATE_ISSUE_SUCCESS')

src/store/sagas.js

@@ -234,6 +234,12 @@ function* handleCreateIssue ({ payload }) {
   }
 }
 
+function* handleOpenExternalNewIssue () {
+  const { web_url } = yield select(getNewIssueProject)
+
+  yield put(actions.openTab(`${web_url}/issues/new?issue`))
+}
+
 export default function* () {
   yield [
     takeEvery(actions.load, handleLoad),
@@ -254,6 +260,7 @@ export default function* () {
     takeEvery(actions.swapPinnedProjects, handleSwapPinnedProjects),
     takeEvery(actions.getOpenedTab, handleGetOpenedTab),
     takeEvery(actions.newIssue, handleNewIssue),
-    takeEvery(actions.createIssue, handleCreateIssue)
+    takeEvery(actions.createIssue, handleCreateIssue),
+    takeEvery(actions.openExternalNewIssue, handleOpenExternalNewIssue)
   ]
 }

src/utils/index.js

@@ -4,6 +4,7 @@ export gitlab from './gitlab'
 export chrome from './chrome'
 export when from './when'
 export stopPropagation from './stopPropagation'
+export preventDefault from './preventDefault'
 export gitlabTab from './gitlabTab'
 export notification from './notification'
 

src/utils/preventDefault.js

@@ -0,0 +1,8 @@
+import curry from 'lodash/fp/curry'
+
+const preventDefault = curry((callback, evt, ...args) => {
+  evt.preventDefault()
+  callback(evt, ...args)
+})
+
+export default preventDefault

src/utils/stopPropagation.js

@@ -1,8 +1,8 @@
 import curry from 'lodash/fp/curry'
 
-const stopPropagation = curry((callback, evt) => {
+const stopPropagation = curry((callback, evt, ...args) => {
   evt.stopPropagation()
-  callback(evt)
+  callback(evt, ...args)
 })
 
 export default stopPropagation