ChildTasks: add bread crumbs to easily access parent tasks

This adds parent task bread crumbs to both the task show view and the
focus view.

**Notes**

- Because `ParentTaskBreadCrumbs` is a recursive component (container ->
  component -> container -> component) they needed to be co-located in
  the same file. Having two files that each import the other was
  throwing an error for me. The component was coming in `undefined`.
- Enzyme doesn't yet have support for "fragments", which were introduced
  in React 16, otherwise I'd have avoided the outer `span` in
  `ParentTaskBreadCrumbs` and just returned an array. I tried the hack
  mentioned in the linked thread, but it didn't work for me.
  enzymejs/enzyme#1213

Author: mockdeep

app/javascript/src/task/components/show_view.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import NewTaskForm from 'src/task/containers/new_task_form';
+import ParentTaskBreadCrumbs from 'src/task/containers/parent_task_bread_crumbs';
 import SubTasksTable from 'src/task/components/sub_tasks_table';
 import ToEnglish from 'src/_helpers/to_english';
 
@@ -63,6 +64,7 @@ class TaskShowView extends React.Component {
 
     return (
       <section>
+        <ParentTaskBreadCrumbs taskId={task.parentTaskId} />
         <h2>{task.title}</h2>
         <div>{repeatString(task)}</div>
         <div>{estimateString(task)}</div>

app/javascript/src/task/components/task_display.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import MainButtons from 'src/task/components/main_buttons';
+import ParentTaskBreadCrumbs from 'src/task/containers/parent_task_bread_crumbs';
 import TaskTitle from 'src/task/components/task_title';
 import TagButtonsContainer from 'src/tag/containers/buttons';
 import EditTaskForm from 'src/task/components/edit_task_form';
@@ -10,6 +11,9 @@ function TaskDisplay(props) {
   return (
     <div>
       <TagButtonsContainer currentTagIds={props.task && props.task.tagIds} />
+      <div className='row'>
+        <ParentTaskBreadCrumbs taskId={props.task.parentTaskId} />
+      </div>
       <TaskTitle
         task={props.task}
         deleteTask={props.deleteTask}

app/javascript/src/task/containers/parent_task_bread_crumbs.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+
+import TaskLink from 'src/task/components/link';
+
+// The component is in the same file as the container due to circular references
+// ParentTaskBreadCrumbs renders ParentTaskBreadCrumbsContainer and vice versa
+// otherwise imports get funky
+function ParentTaskBreadCrumbs({task}) {
+  if (!task) { return null; }
+
+  // span wrapper rather than array fragments due to lack of enzyme support
+  // https://github.com/airbnb/enzyme/issues/1213
+  // hack didn't work
+  return (
+    <span>
+      <ParentTaskBreadCrumbsContainer taskId={task.parentTaskId} />
+      <span>{' > '}<TaskLink task={task} /></span>
+    </span>
+  );
+}
+
+ParentTaskBreadCrumbs.propTypes = {task: PropTypes.object};
+
+function mapStateToProps(state, ownProps) {
+  return {task: state.task.byId[ownProps.taskId]};
+}
+
+const ParentTaskBreadCrumbsContainer = connect(mapStateToProps)(ParentTaskBreadCrumbs);
+
+export {ParentTaskBreadCrumbs};
+export default ParentTaskBreadCrumbsContainer;

spec/javascript/task/containers/parent_task_bread_crumbs_spec.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import {ParentTaskBreadCrumbs} from 'src/task/containers/parent_task_bread_crumbs';
+
+it('renders nothing when there is no task', () => {
+  const component = shallow(<ParentTaskBreadCrumbs />);
+
+  expect(component.type()).toBeNull();
+});
+
+it('renders a link to the task when present', () => {
+  const task = {};
+  const component = shallow(<ParentTaskBreadCrumbs task={task} />);
+
+  expect(component.find('TaskLink')).toHaveProp('task', task);
+});
+
+it('renders a parent task link recursively when tree goes deeper', () => {
+  const task = {title: 'some parent', parentTaskId: 5};
+  const component = shallow(<ParentTaskBreadCrumbs task={task} />);
+  const container = component.find('Connect(ParentTaskBreadCrumbs)');
+
+  expect(container).toHaveProp('taskId', 5);
+});