feat(Tracking): worklog comment as a required item (#101)

add worklog comment as a required item option in setting, open comment dialog instead of stopping timer if this option is set and comment are empty ISSUES CLOSED: #81
web-pal · Mar 26, 2018 · 33043bd · 33043bd
1 parent 804bfb6
commit 33043bd
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 24 deletions.
diff --git a/app/components/ErrorBoundary/ErrorBoundary.jsx b/app/components/ErrorBoundary/ErrorBoundary.jsx
@@ -38,7 +38,7 @@ class ErrorBoundary extends Component<any, any> {
       return (
         <div>
           <h1>Something went wrong.</h1>
-          You may try to
+          You may try to &nbsp;
           <Button
             appearance="danger"
             onClick={() => this.props.dispatch(

diff --git a/app/containers/IssueView/TrackingBar/TrackingBar.jsx b/app/containers/IssueView/TrackingBar/TrackingBar.jsx
@@ -56,6 +56,7 @@ type Props = {
   remainingEstimateNewValue: string,
   remainingEstimateReduceByValue: string,
   dispatch: Dispatch,
+  isCommentDialogOpen: boolean,
 }
 
 function addLeadingZero(s: number): string {
@@ -80,6 +81,7 @@ const TrackingBar: StatelessFunctionalComponent<Props> = ({
   remainingEstimateNewValue,
   remainingEstimateReduceByValue,
   dispatch,
+  isCommentDialogOpen,
 }: Props): Node => (
   <Transition
     appear
@@ -107,6 +109,8 @@ const TrackingBar: StatelessFunctionalComponent<Props> = ({
           onRemainingEstimateReduceByChange={(value) => {
             dispatch(uiActions.setUiState('remainingEstimateReduceByValue', value));
           }}
+          dialogOpen={isCommentDialogOpen}
+          setDialogState={value => dispatch(uiActions.setUiState('isCommentDialogOpen', value))}
         />
         {screenshotsAllowed &&
           <div style={{ marginLeft: 10 }}>
@@ -139,22 +143,18 @@ const TrackingBar: StatelessFunctionalComponent<Props> = ({
           {getTimeString(time)}
         </Time>
       </Flex>
-      <div
-        onClick={() => {
-          if (screenshotUploading) {
-            // eslint-disable-next-line no-alert
-            window.alert(
-              'Currently app in process of uploading screenshot, wait few seconds please',
-            );
-          } else {
-            dispatch(timerActions.stopTimerRequest());
-          }
-        }}
-      >
+      <div className="worklog-edit-popup-shouldNotCLose">
         <StopButton
           alt="stop"
           onClick={() => {
-            dispatch(timerActions.stopTimerRequest());
+            if (screenshotUploading) {
+              // eslint-disable-next-line no-alert
+              window.alert(
+                'Currently app in process of uploading screenshot, wait few seconds please',
+              );
+            } else {
+              dispatch(timerActions.stopTimerRequest());
+            }
           }}
         />
       </div>
@@ -172,6 +172,7 @@ function mapStateToProps(state) {
     remainingEstimateValue: getUiState('remainingEstimateValue')(state),
     remainingEstimateNewValue: getUiState('remainingEstimateNewValue')(state),
     remainingEstimateReduceByValue: getUiState('remainingEstimateReduceByValue')(state),
+    isCommentDialogOpen: getUiState('isCommentDialogOpen')(state),
   };
 }
 

diff --git a/app/containers/IssueView/TrackingBar/WorklogCommentDialog/WorklogCommentDialog.jsx b/app/containers/IssueView/TrackingBar/WorklogCommentDialog/WorklogCommentDialog.jsx
@@ -35,18 +35,18 @@ type Props = {
   onRemainingEstimateChange: Function,
   onRemainingEstimateNewChange: Function,
   onRemainingEstimateReduceByChange: Function,
+  dialogOpen: boolean,
+  setDialogState: (dialogOpen: boolean) => void,
 };
 
 type State = {
-  dialogOpen: boolean,
   isEditing: boolean,
 };
 
 class WorklogCommentDialog extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      dialogOpen: false,
       isEditing: true,
       comment: this.props.comment,
     };
@@ -63,10 +63,11 @@ class WorklogCommentDialog extends PureComponent<Props, State> {
   };
 
   toggleDialog = () => {
+    const newState = !this.props.dialogOpen;
     this.setState({
-      dialogOpen: !this.state.dialogOpen,
-      isEditing: !this.state.dialogOpen,
+      isEditing: newState,
     });
+    this.props.setDialogState(newState);
   }
 
   enterEditingMode = () => {
@@ -129,17 +130,19 @@ class WorklogCommentDialog extends PureComponent<Props, State> {
       <EditButtonContainer>
         <InlineDialog
           content={this.renderDialog()}
-          isOpen={this.state.dialogOpen}
+          isOpen={this.props.dialogOpen}
           onClose={(e) => {
             // Atlaskit HACK.
             // without it inline dialog gets closed on clicking inline-edit action buttons
             const { path } = e.event;
-            const shouldClose = !path.some(el => el.className === 'worklog-edit-popup');
+            const shouldClose = !path.some(el =>
+                el.className === 'worklog-edit-popup' ||
+                el.className === 'worklog-edit-popup-shouldNotCLose');
             if (shouldClose) {
               this.setState({
-                dialogOpen: false,
                 isEditing: true,
               });
+              this.props.setDialogState(false);
             }
           }}
           position="bottom left"

diff --git a/app/containers/Modals/SettingsModal/General/GeneralSettings.jsx b/app/containers/Modals/SettingsModal/General/GeneralSettings.jsx
@@ -29,21 +29,25 @@ import type {
 import {
   SettingsSectionContent,
   ContentLabel,
+  InputNumber,
 } from './styled';
 
 
 type Props = {
   settings: SettingsGeneral,
   setTraySettings: (value: any) => void,
   clearChache: () => void,
+  setEmptyWorklogSettings: () => void,
 }
 
 const GeneralSettings: StatelessFunctionalComponent<Props> = ({
   settings,
   setTraySettings,
   clearChache,
+  setEmptyWorklogSettings,
 }: Props): Node => {
   const isIconHidden = !!settings.trayShowTimer;
+  const isEmptyWorklogForbid = !!settings.isEmptyWorklogForbid;
   // const isTimerHidden = false;
   return (
     <SettingsSectionContent>
@@ -72,9 +76,22 @@ const GeneralSettings: StatelessFunctionalComponent<Props> = ({
             Clear cache
           </Button>
         </ButtonGroup>
-        <H100 style={{ margin: '4px 0 0 0' }}>
+        <H100 style={{ margin: '4px 0 0 6px' }}>
           Clearing cache will cause logout.
         </H100>
+        <br />
+        <H100 style={{ margin: '0 0 4px 6px' }}>
+          Configure whether to forbid sending worlogs without comment
+        </H100>
+        <CheckboxGroup>
+          <Checkbox
+            isChecked={isEmptyWorklogForbid}
+            value={isEmptyWorklogForbid}
+            name="sendEmptyWorklog"
+            label="Forbid sending worklog without comment"
+            onChange={() => setEmptyWorklogSettings(!isEmptyWorklogForbid)}
+          />
+        </CheckboxGroup>
       </Flex>
     </SettingsSectionContent>
   );

diff --git a/app/containers/Modals/SettingsModal/General/styled/index.jsx b/app/containers/Modals/SettingsModal/General/styled/index.jsx
@@ -12,3 +12,26 @@ export const ContentLabel = styled.span`
   font-weight: 600;
   color: black;
 `;
+
+export const InputNumber = styled.input.attrs({
+  type: 'number',
+})`
+  appearance: none;
+  color: inherit;
+  font-size: 16px;
+  font-family: inherit;
+  letter-spacing: inherit;
+
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  cursor: inherit;
+  line-height: inherit;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  width: 100%;
+  :invalid {
+    box-shadow: none;
+  }
+`;
diff --git a/app/containers/Modals/SettingsModal/SettingsModal.jsx b/app/containers/Modals/SettingsModal/SettingsModal.jsx
@@ -135,6 +135,13 @@ const SettingsModal: StatelessFunctionalComponent<Props> = ({
             clearChache={() => dispatch(
               settingsActions.clearElectronCache(),
             )}
+            setEmptyWorklogSettings={(value) => {
+              dispatch(settingsActions.setLocalDesktopSetting(
+                value,
+                'isEmptyWorklogForbid',
+              ));
+              }
+            }
           />
         }
         {tab === 'Notifications' &&

diff --git a/app/reducers/ui.js b/app/reducers/ui.js
@@ -49,6 +49,7 @@ const initialState: UiState = {
   remainingEstimateValue: 'auto',
   remainingEstimateNewValue: '',
   remainingEstimateReduceByValue: '',
+  isCommentDialogOpen: false,
 
   selectedIssueId: null,
   issuesSourceType: null,

diff --git a/app/sagas/timer.js b/app/sagas/timer.js
@@ -40,6 +40,7 @@ import {
 import {
   throwError,
   infoLog,
+  notify,
 } from './ui';
 import {
   uploadWorklog,
@@ -282,8 +283,17 @@ export function* timerFlow(): Generator<*, *, *> {
           yield cancel();
         }
       } else {
-        yield call(stopTimer, channel, timerInstance);
-        yield cancel();
+        const { isEmptyWorklogForbid } = yield select(getSettingsState('localDesktopSettings'));
+        const comment = yield select(getUiState('worklogComment'));
+        if (isEmptyWorklogForbid && !comment) {
+          yield fork(notify, {
+            title: 'Please set comment for worklog',
+          });
+          yield put(uiActions.setUiState('isCommentDialogOpen', true));
+        } else {
+          yield call(stopTimer, channel, timerInstance);
+          yield cancel();
+        }
       }
     }
   } catch (err) {

diff --git a/app/types/settings.js b/app/types/settings.js
@@ -38,4 +38,6 @@ export type SettingsGeneral = {
   showScreenshotPreview: boolean,
   trayShowTimer: boolean,
   updateChannel: string,
+
+  isEmptyWorklogForbid: boolean,
 };
diff --git a/app/types/ui.js b/app/types/ui.js
@@ -93,6 +93,7 @@ export type UiState = {|
   remainingEstimateValue: RemainingEstimate,
   remainingEstimateNewValue: string,
   remainingEstimateReduceByValue: string,
+  isCommentDialogOpen: boolean,
 
   selectedIssueId: Id | null,
   issuesSourceType: string | null,