feat(Tracking): add checkbox to post comment also as issue comment (#99)

* feat(Tracking): add checkbox to post worklog comment also as issue comment ISSUES CLOSED: #90 * fix: fix comment field cancel behavior
web-pal · Mar 23, 2018 · 6f6c23a · 6f6c23a
1 parent 0ce226d
commit 6f6c23a
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 2 deletions.
diff --git a/app/containers/IssueView/TrackingBar/WorklogCommentDialog/WorklogCommentDialog.jsx b/app/containers/IssueView/TrackingBar/WorklogCommentDialog/WorklogCommentDialog.jsx
@@ -23,6 +23,7 @@ import {
   EditButtonContainer,
 } from './styled';
 
+import WorklogCommentOptions from './WorklogCommentOptions';
 
 type Props = {
   issue: Issue,
@@ -47,15 +48,18 @@ class WorklogCommentDialog extends PureComponent<Props, State> {
     this.state = {
       dialogOpen: false,
       isEditing: true,
+      comment: this.props.comment,
     };
   }
 
   onConfirm = () => {
     this.exitEditingMode();
+    this.props.onSetComment(this.state.comment);
   };
 
   onCancel = () => {
     this.exitEditingMode();
+    this.setState({ comment: this.props.comment });
   };
 
   toggleDialog = () => {
@@ -89,8 +93,8 @@ class WorklogCommentDialog extends PureComponent<Props, State> {
               autoFocus
               isEditing
               isInitiallySelected
-              value={this.props.comment}
-              onChange={e => this.props.onSetComment(e.target.value)}
+              value={this.state.comment}
+              onChange={e => this.setState({ comment: e.target.value })}
             />
           }
           readView={(
@@ -106,6 +110,7 @@ class WorklogCommentDialog extends PureComponent<Props, State> {
           onConfirm={this.onConfirm}
           onCancel={this.onCancel}
         />
+        <WorklogCommentOptions />
         <RemainingEstimatePicker
           issue={this.props.issue}
           value={this.props.remainingEstimateValue}

diff --git a/app/containers/IssueView/TrackingBar/WorklogCommentDialog/WorklogCommentOptions.jsx b/app/containers/IssueView/TrackingBar/WorklogCommentDialog/WorklogCommentOptions.jsx
@@ -0,0 +1,68 @@
+// @flow
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose, withHandlers } from 'recompose';
+
+import {
+  CheckboxStateless as Checkbox,
+  CheckboxGroup,
+} from '@atlaskit/checkbox';
+
+import {
+  uiActions,
+} from 'actions';
+import {
+  getUiState,
+} from 'selectors';
+
+import type {
+  StatelessFunctionalComponent,
+  Node,
+} from 'react';
+
+import type {
+  Dispatch,
+} from 'types';
+
+import {
+  IssueCommentCheckboxWrapper,
+} from './styled';
+
+type Props = {
+  postAlsoAsIssueComment: boolean,
+  changePostOption: () => void,
+};
+
+const WorklogCommentOptions: StatelessFunctionalComponent<Props> = ({
+  postAlsoAsIssueComment,
+  changePostOption,
+}: Props): Node =>
+  <IssueCommentCheckboxWrapper>
+    <CheckboxGroup>
+      <Checkbox
+        isChecked={postAlsoAsIssueComment}
+        value={postAlsoAsIssueComment}
+        name="postAlsoAsIssueComment"
+        label="Post also as comment to issue"
+        onChange={changePostOption}
+      />
+    </CheckboxGroup>
+  </IssueCommentCheckboxWrapper>;
+
+export default compose(
+  connect(
+    state => ({
+      postAlsoAsIssueComment: getUiState('postAlsoAsIssueComment')(state),
+    }),
+    dispatch => ({ dispatch }),
+  ),
+  withHandlers({
+    changePostOption: ({
+      dispatch,
+      postAlsoAsIssueComment,
+    }: {
+      postAlsoAsIssueComment: boolean,
+      dispatch: Dispatch,
+    }) => () => dispatch(uiActions.setUiState('postAlsoAsIssueComment', !postAlsoAsIssueComment))
+  })
+)(WorklogCommentOptions);
diff --git a/app/containers/IssueView/TrackingBar/WorklogCommentDialog/styled/index.jsx b/app/containers/IssueView/TrackingBar/WorklogCommentDialog/styled/index.jsx
@@ -18,3 +18,7 @@ export const EditButton = styled(EditFilledIcon)`
 export const EditButtonContainer = styled.div`
   cursor: pointer;
 `;
+
+export const IssueCommentCheckboxWrapper = styled.div`
+  margin-left: -10px;
+`;
diff --git a/app/reducers/ui.js b/app/reducers/ui.js
@@ -45,6 +45,7 @@ const initialState: UiState = {
   editWorklogId: null,
   worklogFormIssueId: null,
   worklogComment: '',
+  postAlsoAsIssueComment: false,
   remainingEstimateValue: 'auto',
   remainingEstimateNewValue: '',
   remainingEstimateReduceByValue: '',

diff --git a/app/sagas/worklogs.js b/app/sagas/worklogs.js
@@ -22,6 +22,7 @@ import {
 import {
   types,
   uiActions,
+  issuesActions,
 } from 'actions';
 import {
   getResourceIds,
@@ -266,9 +267,15 @@ export function* uploadWorklog(options: any): Generator<*, *, *> {
       },
     });
 
+    const postAlsoAsIssueComment = yield select(getUiState('postAlsoAsIssueComment'));
+    if (postAlsoAsIssueComment && options.comment) {
+      yield put(issuesActions.commentRequest(options.comment, options.issueId));
+    }
+
     // reset ui state
     yield put(uiActions.resetUiState([
       'worklogComment',
+      'postAlsoAsIssueComment',
       'remainingEstimateValue',
       'remainingEstimateNewValue',
       'remainingEstimateReduceByValue',

diff --git a/app/types/ui.js b/app/types/ui.js
@@ -89,6 +89,7 @@ export type UiState = {|
   editWorklogId: Id | null,
   worklogFormIssueId: Id | null,
   worklogComment: string,
+  postAlsoAsIssueComment: boolean,
   remainingEstimateValue: RemainingEstimate,
   remainingEstimateNewValue: string,
   remainingEstimateReduceByValue: string,