) => setStatusReason(e.target.value);
+
+ const handleIssueCommentChange = (updatedComment: string) => setComment(updatedComment);
+
+ const style = getStyle(theme);
+ const issueAction = messageData.status === 'open' ? 'Close Issue' : 'Open Issue';
+ const modalTitle = issueAction;
+ const status = issueAction;
+ const savingMessage = messageData.status === 'open' ? 'Closing' : 'Reopening';
+ const submitError = null;
+
+ const component = (messageData.status === 'open') ? (
+
+ ) : (
+
+
+
+ );
+
+ return (
+
+
+
+ {modalTitle}
+
+
+
+
+ );
+};
+
+const getStyle = (theme: Theme) => ({
+ modal: {
+ padding: '2em 2em 3em',
+ color: theme.centerChannelColor,
+ backgroundColor: theme.centerChannelBg,
+ },
+ descriptionArea: {
+ height: 'auto',
+ width: '100%',
+ color: '#000',
+ },
+ radioButtons: {
+ margin: '0.4em 0.6em',
+ },
+});
+
+export default CloseOrReopenIssueModal;
diff --git a/webapp/src/components/modals/create_issue/index.js b/webapp/src/components/modals/create_issue/index.js
deleted file mode 100644
index 2b5b37017..000000000
--- a/webapp/src/components/modals/create_issue/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {getPost} from 'mattermost-redux/selectors/entities/posts';
-
-import manifest from '@/manifest';
-import {closeCreateIssueModal, createIssue} from '@/actions';
-
-import CreateIssueModal from './create_issue';
-
-const mapStateToProps = (state) => {
- const {id: pluginId} = manifest;
- const {postId, title, channelId} = state[`plugins-${pluginId}`].createIssueModal;
- const post = (postId) ? getPost(state, postId) : null;
-
- return {
- visible: state[`plugins-${pluginId}`].isCreateIssueModalVisible,
- post,
- title,
- channelId,
- };
-};
-
-const mapDispatchToProps = (dispatch) => bindActionCreators({
- close: closeCreateIssueModal,
- create: createIssue,
-}, dispatch);
-
-export default connect(mapStateToProps, mapDispatchToProps)(CreateIssueModal);
diff --git a/webapp/src/components/modals/create_issue/create_issue.jsx b/webapp/src/components/modals/create_update_issue/create_update_issue.jsx
similarity index 61%
rename from webapp/src/components/modals/create_issue/create_issue.jsx
rename to webapp/src/components/modals/create_update_issue/create_update_issue.jsx
index 180ccfd33..e5a67773f 100644
--- a/webapp/src/components/modals/create_issue/create_issue.jsx
+++ b/webapp/src/components/modals/create_update_issue/create_update_issue.jsx
@@ -22,6 +22,7 @@ const initialState = {
repo: null,
issueTitle: '',
issueDescription: '',
+ channelId: '',
labels: [],
assignees: [],
milestone: null,
@@ -29,15 +30,16 @@ const initialState = {
issueTitleValid: true,
};
-export default class CreateIssueModal extends PureComponent {
+export default class CreateOrUpdateIssueModal extends PureComponent {
static propTypes = {
+ update: PropTypes.func.isRequired,
close: PropTypes.func.isRequired,
create: PropTypes.func.isRequired,
+ getIssueInfo: PropTypes.func.isRequired,
post: PropTypes.object,
- title: PropTypes.string,
- channelId: PropTypes.string,
theme: PropTypes.object.isRequired,
visible: PropTypes.bool.isRequired,
+ messageData: PropTypes.object,
};
constructor(props) {
@@ -46,17 +48,50 @@ export default class CreateIssueModal extends PureComponent {
this.validator = new Validator();
}
+ getIssueInfo = async () => {
+ const {repo_owner, repo_name, issue_number, postId} = this.props.messageData;
+ const issueInfo = await this.props.getIssueInfo(repo_owner, repo_name, issue_number, postId);
+ return issueInfo;
+ }
+
+ updateState(issueInfo) {
+ const {channel_id, title, description, milestone_title, milestone_number, repo_full_name} = issueInfo ?? {};
+ const assignees = issueInfo?.assignees ?? [];
+ const labels = issueInfo?.labels ?? [];
+
+ this.setState({milestone: {
+ value: milestone_number,
+ label: milestone_title,
+ },
+ repo: {
+ name: repo_full_name,
+ },
+ assignees,
+ labels,
+ channelId: channel_id,
+ issueDescription: description,
+ issueTitle: title.substring(0, MAX_TITLE_LENGTH)});
+ }
+
+ /* eslint-disable react/no-did-update-set-state*/
componentDidUpdate(prevProps) {
- if (this.props.post && !prevProps.post) {
- this.setState({issueDescription: this.props.post.message}); //eslint-disable-line react/no-did-update-set-state
- } else if (this.props.channelId && (this.props.channelId !== prevProps.channelId || this.props.title !== prevProps.title)) {
- const title = this.props.title.substring(0, MAX_TITLE_LENGTH);
- this.setState({issueTitle: title}); // eslint-disable-line react/no-did-update-set-state
+ if (this.props.post && !this.props.messageData && !prevProps.post) {
+ this.setState({issueDescription: this.props.post.message});
+ }
+
+ if (this.props.messageData?.repo_owner && !prevProps.visible && this.props.visible) {
+ this.getIssueInfo().then((issueInfo) => {
+ this.updateState(issueInfo.data);
+ });
+ } else if (this.props.messageData?.channel_id && (this.props.messageData?.channel_id !== prevProps.messageData?.channel_id || this.props.messageData?.title !== prevProps.messageData?.title)) {
+ this.updateState(this.props.messageData);
}
}
+ /* eslint-enable */
- // handle issue creation after form is populated
- handleCreate = async (e) => {
+ // handle issue creation or updation after form is populated
+ handleCreateOrUpdate = async (e) => {
+ const {issue_number, postId} = this.props.messageData ?? {};
if (e && e.preventDefault) {
e.preventDefault();
}
@@ -70,9 +105,6 @@ export default class CreateIssueModal extends PureComponent {
return;
}
- const {post} = this.props;
- const postId = post ? post.id : '';
-
const issue = {
title: this.state.issueTitle,
body: this.state.issueDescription,
@@ -81,20 +113,36 @@ export default class CreateIssueModal extends PureComponent {
assignees: this.state.assignees,
milestone: this.state.milestone && this.state.milestone.value,
post_id: postId,
- channel_id: this.props.channelId,
+ channel_id: this.state.channelId,
+ issue_number,
};
+ if (!issue.repo) {
+ issue.repo = this.props.messageData.repo_owner + this.props.messageData.repo_name;
+ }
this.setState({submitting: true});
-
- const created = await this.props.create(issue);
- if (created.error) {
- const errMessage = getErrorMessage(created.error.message);
- this.setState({
- error: errMessage,
- showErrors: true,
- submitting: false,
- });
- return;
+ if (issue_number) {
+ const updated = await this.props.update(issue);
+ if (updated?.error) {
+ const errMessage = getErrorMessage(updated.error.message);
+ this.setState({
+ error: errMessage,
+ showErrors: true,
+ submitting: false,
+ });
+ return;
+ }
+ } else {
+ const created = await this.props.create(issue);
+ if (created.error) {
+ const errMessage = getErrorMessage(created.error.message);
+ this.setState({
+ error: errMessage,
+ showErrors: true,
+ submitting: false,
+ });
+ return;
+ }
}
this.handleClose(e);
};
@@ -120,7 +168,7 @@ export default class CreateIssueModal extends PureComponent {
this.setState({issueDescription});
renderIssueAttributeSelectors = () => {
- if (!this.state.repo || (this.state.repo.permissions && !this.state.repo.permissions.push)) {
+ if (!this.state.repo || !this.state.repo.name || (this.state.repo.permissions && !this.state.repo.permissions.push)) {
return null;
}
@@ -156,12 +204,14 @@ export default class CreateIssueModal extends PureComponent {
}
const theme = this.props.theme;
- const {error, submitting} = this.state;
+ const {error, submitting, showErrors, issueTitle, issueDescription, repo} = this.state;
const style = getStyle(theme);
+ const {repo_name, repo_owner} = this.props.messageData ?? {};
+ const modalTitle = repo_name ? 'Update GitHub Issue' : 'Create GitHub Issue';
const requiredMsg = 'This field is required.';
let issueTitleValidationError = null;
- if (this.state.showErrors && !this.state.issueTitleValid) {
+ if (showErrors && !issueTitle) {
issueTitleValidationError = (
+
+
+
+ {issueTitleValidationError}
+
+ {this.renderIssueAttributeSelectors()}
+
+
+
+ ) : (
{issueTitleValidationError}
@@ -209,7 +289,7 @@ export default class CreateIssueModal extends PureComponent {
@@ -225,11 +305,13 @@ export default class CreateIssueModal extends PureComponent {
backdrop='static'
>
- {'Create GitHub Issue'}
+
+ {modalTitle}
+