120 lines
4 KiB
JavaScript
120 lines
4 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Popup, Button } from 'UI';
|
|
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
|
|
import IssuesModal from './IssuesModal';
|
|
import { fetchProjects, fetchMeta } from 'Duck/assignments';
|
|
import withToggle from 'HOCs/withToggle';
|
|
import stl from './issues.module.css';
|
|
import { fetchList as fetchListIntegration } from 'Duck/integrations/actions';
|
|
|
|
@connect(state => ({
|
|
issues: state.getIn(['assignments', 'list']),
|
|
metaLoading: state.getIn(['assignments', 'fetchMeta', 'loading']),
|
|
projects: state.getIn(['assignments', 'projects']),
|
|
projectsFetched: state.getIn(['assignments', 'projectsFetched']),
|
|
activeIssue: state.getIn(['assignments', 'activeIssue']),
|
|
fetchIssueLoading: state.getIn(['assignments', 'fetchAssignment', 'loading']),
|
|
fetchIssuesLoading: state.getIn(['assignments', 'fetchAssignments', 'loading']),
|
|
projectsLoading: state.getIn(['assignments', 'fetchProjects', 'loading']),
|
|
issuesIntegration: state.getIn([ 'issues', 'list']).first() || {},
|
|
|
|
jiraConfig: state.getIn([ 'issues', 'list' ]).first(),
|
|
issuesFetched: state.getIn([ 'issues', 'issuesFetched' ]),
|
|
}), { fetchMeta, fetchProjects, fetchListIntegration })
|
|
@withToggle('isModalDisplayed', 'toggleModal')
|
|
class Issues extends React.Component {
|
|
state = {showModal: false };
|
|
|
|
componentDidMount() {
|
|
if (!this.props.issuesFetched)
|
|
this.props.fetchListIntegration('issues')
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { showModal: false };
|
|
}
|
|
|
|
closeModal = () => {
|
|
this.setState({ showModal: false });
|
|
}
|
|
|
|
showIssuesList = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.setState({ showModal: true });
|
|
}
|
|
|
|
handleClose = () => {
|
|
this.setState({ showModal: false });
|
|
}
|
|
|
|
handleOpen = () => {
|
|
alert('test')
|
|
this.setState({ showModal: true });
|
|
if (!this.props.projectsFetched) { // cache projects fetch
|
|
this.props.fetchProjects().then(function() {
|
|
const { projects } = this.props;
|
|
if (projects && projects.first()) {
|
|
this.props.fetchMeta(projects.first().id)
|
|
}
|
|
}.bind(this))
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
sessionId, isModalDisplayed, projectsLoading, metaLoading, fetchIssuesLoading, issuesIntegration
|
|
} = this.props;
|
|
const { showModal } = this.state;
|
|
const provider = issuesIntegration.provider
|
|
|
|
return (
|
|
<div className="relative">
|
|
<div className={ stl.buttonWrapper}>
|
|
<Popup
|
|
open={ isModalDisplayed }
|
|
onOpen={ this.handleOpen }
|
|
onClose={ this.handleClose }
|
|
trigger={
|
|
<div className="flex items-center" onClick={this.props.toggleModal} disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}>
|
|
<Icon name={ `integrations/${ provider === 'jira' ? 'jira' : 'github'}` } size="16" />
|
|
<span className="ml-2">Create Issue</span>
|
|
</div>
|
|
}
|
|
on="click"
|
|
position="top right"
|
|
content={
|
|
<OutsideClickDetectingDiv onClickOutside={this.closeModal}>
|
|
<IssuesModal
|
|
provider={provider}
|
|
sessionId={ sessionId }
|
|
closeHandler={ this.closeModal }
|
|
/>
|
|
</OutsideClickDetectingDiv>
|
|
}
|
|
// trigger="click"
|
|
theme="tippy-light"
|
|
>
|
|
{
|
|
<Button
|
|
variant="outline"
|
|
onClick={ () => this.setState({ showModal: true }) }
|
|
className={ stl.button }
|
|
disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}
|
|
icon={`integrations/${ provider === 'jira' ? 'jira' : 'github'}`}
|
|
>
|
|
<div className="h-full flex items-center">
|
|
Report Issue
|
|
</div>
|
|
</Button>
|
|
}
|
|
</Popup>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default Issues;
|