Merge branch 'release/2.4.3'

CHANGELOG.md

@@ -1,3 +1,19 @@
+<a name="2.4.3"></a>
+## [2.4.3](https://github.com/web-pal/chronos-timetracker/compare/v2.4.2...v2.4.3) (2018-01-15)
+
+
+### Bug Fixes
+
+* **Browsing Issues:** show button on Recent worklogs ([#40](https://github.com/web-pal/chronos-timetracker/issues/40)) ([4ee4b5b](https://github.com/web-pal/chronos-timetracker/commit/4ee4b5b)), closes [#28](https://github.com/web-pal/chronos-timetracker/issues/28)
+* **Browsing Issues:** sort descending worklogs by date ([#42](https://github.com/web-pal/chronos-timetracker/issues/42)) ([2c512fb](https://github.com/web-pal/chronos-timetracker/commit/2c512fb)), closes [#25](https://github.com/web-pal/chronos-timetracker/issues/25)
+* **Issue Detail View:** constantly highlight selected worklog from recent worklogs ([#39](https://github.com/web-pal/chronos-timetracker/issues/39)) ([73a33c3](https://github.com/web-pal/chronos-timetracker/commit/73a33c3)), closes [#27](https://github.com/web-pal/chronos-timetracker/issues/27)
+* **Issue Detail View:** total logged not updated after loading worklog ([#37](https://github.com/web-pal/chronos-timetracker/issues/37)) ([eb66e86](https://github.com/web-pal/chronos-timetracker/commit/eb66e86)), closes [#14](https://github.com/web-pal/chronos-timetracker/issues/14)
+* **Tracking:** autofocus on worklog comment input ([#38](https://github.com/web-pal/chronos-timetracker/issues/38)) ([076554f](https://github.com/web-pal/chronos-timetracker/commit/076554f)), closes [#15](https://github.com/web-pal/chronos-timetracker/issues/15)
+* **Tracking:** clear worklog comment after log work action ([#41](https://github.com/web-pal/chronos-timetracker/issues/41)) ([17dfb29](https://github.com/web-pal/chronos-timetracker/commit/17dfb29)), closes [#17](https://github.com/web-pal/chronos-timetracker/issues/17)
+* **Tracking:** worklog start time is saved as if it had started when we hit the stop button. ([#36](https://github.com/web-pal/chronos-timetracker/issues/36)) ([a1ec27b](https://github.com/web-pal/chronos-timetracker/commit/a1ec27b)), closes [#35](https://github.com/web-pal/chronos-timetracker/issues/35)
+
+
+
 <a name="2.4.0"></a>
 # [2.4.0](https://github.com/web-pal/chronos-app-jira/compare/2.3.4...2.4.0) (2017-11-29)
 

app/actions/actionTypes/ui.js

@@ -1,4 +1,5 @@
 // @flow
+export const SET_INITIALIZE_PROCESS: 'ui/SET_INITIALIZE_PROCESS' = 'ui/SET_INITIALIZE_PROCESS';
 export const SET_AUTH_FORM_STEP: 'ui/SET_AUTH_FORM_STEP' = 'ui/SET_AUTH_FORM_STEP';
 export const SET_SIDEBAR_TYPE: 'ui/SET_SIDEBAR_TYPE' = 'ui/SET_SIDEBAR_TYPE';
 export const SET_SIDEBAR_FILTERS_OPEN: 'ui/SET_SIDEBAR_FILTERS_OPEN' = 'ui/SET_SIDEBAR_FILTERS_OPEN';

app/actions/ui.js

@@ -1,5 +1,6 @@
 // @flow
 import type {
+  SetInitializeState, SetInitializeStateAction,
   SetAuthFormStep, SetAuthFormStepAction,
   SetSidebarType, SetSidebarTypeAction,
   SetIssueViewTab, SetIssueViewTabAction,
@@ -25,6 +26,13 @@ import type {
 
 import * as types from './actionTypes';
 
+export const setInitializeState: SetInitializeState = (
+  payload: boolean,
+): SetInitializeStateAction => ({
+  type: types.SET_INITIALIZE_PROCESS,
+  payload,
+});
+
 export const setAuthFormStep: SetAuthFormStep = (
   payload: AuthFormStep,
 ): SetAuthFormStepAction => ({

app/components/TextField/TextField.jsx

@@ -1,10 +1,13 @@
 import React, { PureComponent } from 'react';
-import { FieldTextStateless } from '@atlaskit/field-text';
+import Input from '@atlaskit/input';
+import { FieldBaseStateless } from '@atlaskit/field-base';
 
 /* eslint-disable react/prop-types */
 export default class extends PureComponent {
   static defaultProps = {
     onChange: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
   }
 
   state = {
@@ -28,12 +31,16 @@ export default class extends PureComponent {
 
   render() {
     return (
-      <FieldTextStateless
+      <FieldBaseStateless
         {...this.props}
-        value={this.state.value}
-        onChange={this.handleOnChange}
-        ref={(fieldRef) => { this.input = fieldRef; }}
-      />
+      >
+        <Input
+          isEditing
+          ref={(fieldRef) => { this.input = fieldRef; }}
+          onChange={this.handleOnChange}
+          value={this.state.value}
+        />
+      </FieldBaseStateless>
     );
   }
 }

app/containers/App.jsx

@@ -1,33 +1,49 @@
 // @flow
-
 import React from 'react';
 import { connect } from 'react-redux';
 import { getAuthorized } from 'selectors';
-import type { Node, StatelessFunctionalComponent } from 'react';
+import Spinner from '@atlaskit/spinner';
+
+import type {
+  Node,
+  StatelessFunctionalComponent,
+} from 'react';
 
-import { AppWrapper } from 'styles';
+import {
+  AppWrapper,
+  FullPageSpinner,
+} from 'styles';
 import AuthForm from './AuthForm';
 import Main from './Main';
 
 import type { State } from '../types';
 
 type Props = {
-  isAuthorized: boolean
+  isAuthorized: boolean,
+  initializeInProcess: boolean,
 };
 
 const App: StatelessFunctionalComponent<Props> = (props: Props): Node => (
   <AppWrapper>
-    {props.isAuthorized
-      ? <Main />
-      : <AuthForm />
+    {props.initializeInProcess ?
+      <FullPageSpinner>
+        <Spinner size="xlarge" />
+      </FullPageSpinner> :
+      <div>
+        {props.isAuthorized ?
+          <Main /> :
+          <AuthForm />
+        }
+      </div>
     }
   </AppWrapper>
 );
 
 function mapStateToProps(state: State): Props {
   return {
     isAuthorized: getAuthorized(state),
+    initializeInProcess: state.ui.initializeInProcess,
   };
 }
 
-export default connect(mapStateToProps, () => ({}))(App);
+export default connect(mapStateToProps)(App);

app/containers/Header/Header.jsx

@@ -8,14 +8,17 @@ import { cogIcon } from 'data/svg';
 import { Flex } from 'components';
 import { profileActions, uiActions, settingsActions } from 'actions';
 import { shell } from 'electron';
-import mixpanel from 'mixpanel-browser';
 import {
   getUserData,
   getHost,
   getUpdateAvailable,
   getUpdateFetching,
 } from 'selectors';
 
+import {
+  trackMixpanel,
+} from '../../utils/stat';
+
 import {
   HeaderContainer,
   Name,
@@ -77,7 +80,7 @@ const Header: StatelessFunctionalComponent<Props> = ({
         <DropdownItemGroup>
           <DropdownItem
             onClick={() => {
-              mixpanel.track('Opened Settings');
+              trackMixpanel('Opened Settings');
               setSettingsModalOpen(true);
             }}
           >
@@ -104,7 +107,7 @@ const Header: StatelessFunctionalComponent<Props> = ({
           {updateAvailable && !updateFetching && [
             <DropdownUpdateItem
               onClick={() => {
-                mixpanel.track('Clicked "Install Update"', { upcomingVersion: updateAvailable });
+                trackMixpanel('Clicked "Install Update"', { upcomingVersion: updateAvailable });
                 setSettingsModalOpen(true);
                 setSettingsModalTab('Updates');
               }}

app/containers/IssueView/IssueReport/IssueReport.jsx

@@ -48,12 +48,14 @@ const IssueReport: StatelessFunctionalComponent<Props> = ({
   selfKey,
   host,
 }: Props): Node => {
-  const loggedTotal = selectedIssue.fields.timespent || 0;
+  const timespent = selectedIssue.fields.timespent || 0;
   const remaining = selectedIssue.fields.timeestimate || 0;
-  const estimate = remaining - loggedTotal < 0 ? 0 : remaining - loggedTotal;
+  const estimate = remaining - timespent < 0 ? 0 : remaining - timespent;
 
   const { worklogs } = selectedIssue.fields.worklog;
 
+  const loggedTotal = worklogs.reduce((v, w) => v + w.timeSpentSeconds, 0);
+
   const yourWorklogs = worklogs.filter(w => w.author.key === selfKey);
 
   const youLoggedTotal = yourWorklogs.reduce((v, w) => v + w.timeSpentSeconds, 0);

app/containers/IssueView/IssueViewHeader.jsx

@@ -116,14 +116,6 @@ const IssueViewHeader: StatelessFunctionalComponent<Props> = ({
     </Flex>
     <Flex row>
       <ButtonGroup>
-        {/*
-        <Button>
-          Comment
-        </Button>
-          <Button>
-            Add to favorites
-          </Button>
-        */}
         <Button onClick={() => setWorklogModalOpen(true)}>
           Log work
         </Button>

app/containers/IssueView/IssueWorklogs/IssueWorklogs.jsx

@@ -4,23 +4,29 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { StatelessFunctionalComponent, Node } from 'react';
 import { Flex, AutosizableList as List } from 'components';
-import { getSelectedIssue, getWorklogListScrollIndex } from 'selectors';
 import { worklogsActions } from 'actions';
 import { noIssuesImage } from 'data/assets';
 import { H600 } from 'styles/typography';
+import {
+  getSelectedIssue,
+  getWorklogListScrollIndex,
+  getSelectedWorklogId,
+} from 'selectors';
 
 import WorklogItem from './WorklogItem';
 
-import type { Issue, DeleteWorklogRequest, EditWorklogRequest } from '../../../types';
+import type { Id, Issue, DeleteWorklogRequest, EditWorklogRequest } from '../../../types';
 
 type Props = {
+  selectedWorklogId: Id | null,
   selectedIssue: Issue,
   scrollIndex: number,
   deleteWorklogRequest: DeleteWorklogRequest,
   editWorklogRequest: EditWorklogRequest,
 };
 
 const IssueWorklogs: StatelessFunctionalComponent<Props> = ({
+  selectedWorklogId,
   selectedIssue,
   scrollIndex,
   deleteWorklogRequest,
@@ -34,11 +40,15 @@ const IssueWorklogs: StatelessFunctionalComponent<Props> = ({
             rowCount: selectedIssue.fields.worklog.worklogs.length,
             rowHeight: 120,
             rowRenderer: ({ index, key, style }: { index: number, key: string, style: any }) => {
-              const worklog = selectedIssue.fields.worklog.worklogs[index];
+              const worklog = selectedIssue.fields.worklog.worklogs.sort(
+                (left, right) => left.id < right.id,
+              )[index];
+
               return <WorklogItem
                 style={style}
                 key={key}
                 worklog={worklog}
+                selected={selectedWorklogId === worklog.id}
                 issueKey={selectedIssue.key}
                 deleteWorklogRequest={deleteWorklogRequest}
                 editWorklogRequest={editWorklogRequest}
@@ -65,6 +75,7 @@ const IssueWorklogs: StatelessFunctionalComponent<Props> = ({
 
 function mapStateToProps(state) {
   return {
+    selectedWorklogId: getSelectedWorklogId(state),
     selectedIssue: getSelectedIssue(state),
     scrollIndex: getWorklogListScrollIndex(state),
   };

app/containers/IssueView/IssueWorklogs/WorklogItem.jsx

@@ -24,6 +24,7 @@ const isEdited = (worklog: Worklog) => (
 
 type Props = {
   style: any,
+  selected: boolean,
   worklog: Worklog,
   issueKey: string,
   deleteWorklogRequest: DeleteWorklogRequest,
@@ -32,12 +33,13 @@ type Props = {
 
 const WorklogItem: StatelessFunctionalComponent<Props> = ({
   style,
+  selected,
   worklog,
   issueKey,
   deleteWorklogRequest,
   editWorklogRequest,
 }: Props): Node => (
-  <WorklogContainer id={`worklog-${worklog.id}`} style={style}>
+  <WorklogContainer selected={selected} id={`worklog-${worklog.id}`} style={style}>
     <Flex row alignCenter style={{ padding: 10 }}>
       <UserAvatar src={worklog.author.avatarUrls['32x32']} />
       {worklog.author.displayName} logged

app/containers/IssueView/IssueWorklogs/styled/index.jsx

@@ -107,6 +107,7 @@ export const Button = styled.div`
 export const WorklogContainer = styled.div`
   display: flex;
   flex-flow: column nowrap;
+  background-color: ${props => (props.selected ? '#f4f5f7' : 'transparent')};
   &:hover {
     background-color: #f4f5f7 !important;
   };
@@ -137,6 +138,6 @@ export const WorklogActions = styled.div`
 export const Edited = styled.span`
   margin-left: 5px;
   span {
-    color: #d41919;
+    color: #de350b;
   }
 `;

app/containers/Modals/WorklogModal/EditWorklogModal.jsx

@@ -57,6 +57,12 @@ class EditWorklogModal extends Component<Props, State> {
   }
 
   componentWillReceiveProps(nextProps) {
+    if (nextProps.isOpen && !this.props.isOpen) {
+      setTimeout(() => {
+        if (this.comment) this.comment.focus();
+      }, 10);
+    }
+
     if (nextProps.worklog && !nextProps.fetching) {
       const { started, comment, timeSpent } = nextProps.worklog;
       this.setState({
@@ -131,6 +137,7 @@ class EditWorklogModal extends Component<Props, State> {
                       timeSpentSeconds: jts(timeSpent),
                       timeSpent,
                     });
+                    this.setState({ comment: '' });
                   }}
                   iconAfter={fetching ? <Spinner invertColor /> : null}
                 >
@@ -224,6 +231,7 @@ class EditWorklogModal extends Component<Props, State> {
             label="Worklog comment"
             value={comment}
             onChange={ev => this.setState({ comment: ev.target.value })}
+            ref={(c) => { this.comment = c; }}
           />
         </ModalContentContainer>
       </ModalDialog>

app/containers/Modals/WorklogModal/WorklogModal.jsx

@@ -51,6 +51,14 @@ class WorklogModal extends Component<Props, State> {
     jiraTimeError: null,
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isOpen && !this.props.isOpen) {
+      setTimeout(() => {
+        if (this.comment) this.comment.focus();
+      }, 10);
+    }
+  }
+
   handleTimeChange = label => (value) => {
     this.setState({ [label]: value });
   }
@@ -104,6 +112,7 @@ class WorklogModal extends Component<Props, State> {
                       comment,
                       date,
                     });
+                    this.setState({ comment: '' });
                   }}
                   iconAfter={fetching ? <Spinner invertColor /> : null}
                 >
@@ -197,6 +206,7 @@ class WorklogModal extends Component<Props, State> {
             label="Worklog comment"
             value={comment}
             onChange={ev => this.setState({ comment: ev.target.value })}
+            ref={(c) => { this.comment = c; }}
           />
         </ModalContentContainer>
       </ModalDialog>