From 6c0f0f1f3d216c10ae703c12a5ca9ef1df945436 Mon Sep 17 00:00:00 2001
From: Philip Dimitratos <pdimit@microsoft.com>
Date: Tue, 10 Apr 2018 12:31:16 -0700
Subject: [PATCH 1/3] GoToTicket box is shown on all pages

---
 src/actions/incidentActions.js                |   2 +-
 src/components/Home.js                        |   9 +-
 .../GoToTicket.js}                            |  24 ++--
 src/components/MainComponent.js               |   4 +-
 .../GoToTicketTest.js}                        | 128 +++++++++++-------
 test/components/homeTest.js                   |  17 +--
 test/reducers/incidentReducersTest.js         |   4 +-
 7 files changed, 111 insertions(+), 77 deletions(-)
 rename src/components/{Search/CreateIncident.js => Incident/GoToTicket.js} (63%)
 rename test/components/{Search/CreateIncidentTest.js => Incident/GoToTicketTest.js} (63%)

diff --git a/src/actions/incidentActions.js b/src/actions/incidentActions.js
index 6b611f7..e01a5f8 100644
--- a/src/actions/incidentActions.js
+++ b/src/actions/incidentActions.js
@@ -144,7 +144,7 @@ const postIncidentFetchArgs = (ticketId, ticketSystem) => {
   ]
 }
 
-export const updateIncidentCreationInput = (input) => ({
+export const updateTicketNavigationInput = (input) => ({
   type: UPDATE_INCIDENT_CREATION_INPUT,
   input
 })
diff --git a/src/components/Home.js b/src/components/Home.js
index 161825b..7ae06d0 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -6,16 +6,17 @@ export const Home = ({ ticket }) => {
   if (ticket && ticket.originId) {
     return <Redirect to={`/tickets/${ticket.originId}`} />
   }
-  return <Redirect to={'/search'} />
 }
 
 export const mapStateToProps = (state) => {
     // this gross thing finds all actual tickets, omitting the refresh metadata, and then picks the most recently visited one out
     // the sort function works because the dates are UTC and thus lexically sortable to start with
   return {
-    ticket: (state.tickets && state.tickets.map) ? Object.values(state.tickets.map).filter(ticket => ticket && ticket.lastRefresh)
-                                        .sort((a, b) => { return (a.lastRefresh > b.lastRefresh) ? -1 : 1 })[0]
-                                        : undefined
+    ticket: (state.tickets && state.tickets.map)
+      ? Object.values(state.tickets.map)
+        .filter(ticket => ticket && ticket.lastRefresh)
+        .sort((a, b) => { return (a.lastRefresh > b.lastRefresh) ? -1 : 1 })[0]
+      : undefined
   }
 }
 
diff --git a/src/components/Search/CreateIncident.js b/src/components/Incident/GoToTicket.js
similarity index 63%
rename from src/components/Search/CreateIncident.js
rename to src/components/Incident/GoToTicket.js
index 2bbf2cf..7fe2e73 100644
--- a/src/components/Search/CreateIncident.js
+++ b/src/components/Incident/GoToTicket.js
@@ -3,24 +3,25 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { TextField } from 'material-ui'
 import FlatButtonStyled from 'components/elements/FlatButtonStyled'
-import { updateIncidentCreationInput } from 'actions/incidentActions'
+import { updateTicketNavigationInput } from 'actions/incidentActions'
+import Paper from 'material-ui/Paper'
 
 export const onSubmit = (input, history, dispatch) => () => {
   if (input) {
-    dispatch(updateIncidentCreationInput(''))
+    dispatch(updateTicketNavigationInput(''))
     history.push(/tickets/ + input)
   }
 }
 
-export const CreateIncident = ({input, creationError, history, dispatch}) => <form
-  id='incident-search'
+export const GoToTicketForm = ({input, creationError, history, dispatch}) => <form
+  id='incident-navigation'
   onSubmit={onSubmit(input, history)}
   style={{padding: '16px'}}
 >
   <TextField
-    hintText='Ticket Id of primary ticket'
+    hintText='Ticket Id'
     floatingLabelText='Ticket Id'
-    onChange={(event, newValue) => dispatch(updateIncidentCreationInput(newValue))}
+    onChange={(event, newValue) => dispatch(updateTicketNavigationInput(newValue))}
     value={input}
     errorText={creationError}
   />
@@ -38,11 +39,18 @@ export const mapStateToProps = (state) => {
   }
 }
 
-CreateIncident.propTypes = {
+GoToTicketForm.propTypes = {
   input: PropTypes.string,
   creationError: PropTypes.string,
   history: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired
 }
 
-export default connect(mapStateToProps)(CreateIncident)
+export const ConnectedGoToTicketForm = connect(mapStateToProps)(GoToTicketForm)
+
+export const GoToTicket = () => <Paper zDepth={1}>
+  <span>Go To Ticket:</span>
+  <ConnectedGoToTicketForm />
+</Paper>
+
+export default GoToTicket
diff --git a/src/components/MainComponent.js b/src/components/MainComponent.js
index 4765c00..b4a66b1 100644
--- a/src/components/MainComponent.js
+++ b/src/components/MainComponent.js
@@ -6,7 +6,7 @@ import { Router, Route } from 'react-router-dom'
 import { PersistGate } from 'redux-persist/lib/integration/react'
 
 import createBrowserHistory from 'history/createBrowserHistory'
-import CreateIncident from 'components/Search/CreateIncident'
+import GoToTicketForm from 'components/Incident/GoToTicket'
 import Ticket from 'components/Incident/Ticket'
 import EnsureLoggedInContainer from 'components/Auth/EnsureLoggedIn'
 import incidentRedirect from 'components/Incident/IncidentRedirect'
@@ -31,9 +31,9 @@ export default class MainComponent extends React.Component {
                   <div>
                     { isChromeExtensionBackground() ? <Notifications /> : null }
                     <TopNav />
+                    <Route path='/' component={GoToTicketForm} />
                     <Route exact path='/' component={Home} />
                     <Route exact path='/extension.html' component={Home} />
-                    <Route path='/search' component={CreateIncident} />
                     <Route path='/tickets/:ticketId' component={Ticket} />
                     <Route path='/incidents/:incidentId' component={incidentRedirect} />
                     <Route path='/debug' render={() => <Debug />} />
diff --git a/test/components/Search/CreateIncidentTest.js b/test/components/Incident/GoToTicketTest.js
similarity index 63%
rename from test/components/Search/CreateIncidentTest.js
rename to test/components/Incident/GoToTicketTest.js
index 731ba28..d1951f7 100644
--- a/test/components/Search/CreateIncidentTest.js
+++ b/test/components/Incident/GoToTicketTest.js
@@ -2,27 +2,34 @@
 import { expect } from 'chai'
 import React from 'react'
 import { TextField } from 'material-ui'
+import Paper from 'material-ui/Paper'
 
 import { GetMockDispatch, GetDispatchRecorder } from 'test/helpers/mockDispatch'
 import { GetMockHistory, GetHistoryRecorder } from 'test/helpers/mockHistory'
 import createComponent from 'test/helpers/shallowRenderHelper'
 
-import { CreateIncident, mapStateToProps, onSubmit } from 'components/Search/CreateIncident'
+import {
+  GoToTicketForm,
+  mapStateToProps,
+  onSubmit,
+  ConnectedGoToTicketForm,
+  GoToTicket
+} from 'components/Incident/GoToTicket'
 import FlatButtonStyled from 'components/elements/FlatButtonStyled'
 
-const setup = (input, creationError) => {
-  let props = {
-    dispatch: () => null,
-    input,
-    creationError
-  }
+describe('GoToTicket', function () {
+  describe('GoToTicketForm render output', function () {
+    const setup = (input, creationError) => {
+      let props = {
+        dispatch: () => null,
+        input,
+        creationError
+      }
 
-  return createComponent(CreateIncident, props)
-}
+      return createComponent(GoToTicketForm, props)
+    }
 
-describe('CreateIncident', function testCreateIncident () {
-  describe('Rendered component', function () {
-    beforeEach(function createIncidentInit () {
+    beforeEach(function () {
       this.testError = 'Test Error'
       this.testInput = '10'
 
@@ -31,7 +38,7 @@ describe('CreateIncident', function testCreateIncident () {
       this.withInput = setup(this.testInput, '')
     })
 
-    it('Should render a form with text field and FlatButtonStyled', function createIncidentRenderForm () {
+    it('Should render a form with text field and FlatButtonStyled', function () {
       expect(this.defaultCase.type).to.equal('form')
       expect(this.defaultCase.props.children[0].type).to.equal(TextField)
       expect(this.defaultCase.props.children[1].type).to.equal(FlatButtonStyled)
@@ -43,12 +50,12 @@ describe('CreateIncident', function testCreateIncident () {
       expect(this.withInput.props.children[1].type).to.equal(FlatButtonStyled)
     })
 
-    it('Should pass props.input to TextField value', function createIncidentDisplayInput () {
+    it('Should pass props.input to TextField value', function () {
       expect(this.defaultCase.props.children[0].props.value).to.equal('')
       expect(this.withInput.props.children[0].props.value).to.equal(this.testInput)
     })
 
-    it('Should pass props.creationError to TextField errorText', function createIncidentDisplayCreationError () {
+    it('Should pass props.creationError to TextField errorText', function () {
       expect(this.defaultCase.props.children[0].props.errorText).to.equal('')
       expect(this.withError.props.children[0].props.errorText).to.equal(this.testError)
     })
@@ -99,45 +106,66 @@ describe('CreateIncident', function testCreateIncident () {
       })
     })
   })
-})
 
-const inputState = {
-  tickets: {
-    map: {
-      1: {id: 100}
-    },
-    systems: {
-      1: {id: 1},
-      2: {id: 2}
-    }
-  },
-  incidents: {
-    creation: {
-      input: 'test input',
-      error: {
-        message: 'test error message'
+  describe('mapStateToProps', function () {
+    const inputState = {
+      tickets: {
+        map: {
+          1: {id: 100}
+        },
+        systems: {
+          1: {id: 1},
+          2: {id: 2}
+        }
+      },
+      incidents: {
+        creation: {
+          input: 'test input',
+          error: {
+            message: 'test error message'
+          }
+        }
       }
     }
-  }
-}
-
-const expectedResult = {
-  input: 'test input',
-  ticketSystem: {
-    id: 1
-  },
-  creationError: 'test error message',
-  incidentActions: {
-    TestKey: 'TestValue'
-  }
-}
-
-describe('CreateIncidentMapStateToProps', () => {
-  it('Should correctly generate an args object from state', () => {
+
     const result = mapStateToProps(inputState)
 
-    expect(result.input).to.equal(expectedResult.input)
-    expect(result.ticketSystem.id).to.equal(expectedResult.ticketSystem.id)
-    expect(result.creationError).to.equal(expectedResult.creationError)
+    it('Should correctly generate an args object from state', () => {
+      const expectedResult = {
+        input: 'test input',
+        ticketSystem: {
+          id: 1
+        },
+        creationError: 'test error message',
+        incidentActions: {
+          TestKey: 'TestValue'
+        }
+      }
+
+      expect(result.input).to.equal(expectedResult.input)
+      expect(result.ticketSystem.id).to.equal(expectedResult.ticketSystem.id)
+      expect(result.creationError).to.equal(expectedResult.creationError)
+    })
+  })
+
+  describe('GoToTicket render output', function () {
+    const result = createComponent(GoToTicket)
+
+    it('Should be a Paper', function () {
+      expect(result.type).to.equal(Paper)
+    })
+
+    it('Should have a label span as its first child', function () {
+      expect(result.props.children[0].type).to.equal('span')
+    })
+
+    it('Should have ConnectedGoToTicketForm as its second child', function () {
+      expect(result.props.children[1].type).to.equal(ConnectedGoToTicketForm)
+    })
   })
 })
+
+
+
+
+
diff --git a/test/components/homeTest.js b/test/components/homeTest.js
index da95ff1..0137035 100644
--- a/test/components/homeTest.js
+++ b/test/components/homeTest.js
@@ -16,17 +16,14 @@ const ticketState = { ticket: {
   lastRefresh: '2017-12-29T20:19:32.407Z'
 }}
 
-describe('Home Container Component', function test () {
-  beforeEach(() => {
-    this.noTicketsExistState = setup(noTicketState, children)
-    this.ticketsExistState = setup(ticketState, children)
+describe('Home Container Component', function () {
+  it('Should return nothing if no tickets', function () {
+    const noTicketsExistState = setup(noTicketState, children)
+    expect(noTicketsExistState).to.be.undefined
   })
-
-  it('Should redirect to search if no tickets', () => {
-    expect(this.noTicketsExistState.props.to).to.equal('/search')
-  })
-  it('Should redirect to most recent ticket if there are tickets', () => {
-    expect(this.ticketsExistState.props.to).to.equal('/tickets/5507')
+  it('Should redirect to most recent ticket if there are tickets', function () {
+    const ticketsExistState = setup(ticketState, children)
+    expect(ticketsExistState.props.to).to.equal('/tickets/5507')
   })
 })
 
diff --git a/test/reducers/incidentReducersTest.js b/test/reducers/incidentReducersTest.js
index 06573f9..d36bfe9 100644
--- a/test/reducers/incidentReducersTest.js
+++ b/test/reducers/incidentReducersTest.js
@@ -175,8 +175,8 @@ describe('incidentReducer', function test () {
       this.newInput = 'new input'
       this.failureError = 'testing'
 
-      this.OnUpdateInputFromDefault = creation(creationDefaultState, incidentActions.updateIncidentCreationInput(this.newInput))
-      this.OnUpdateInputFromError = creation(creationWithErrorState, incidentActions.updateIncidentCreationInput(this.newInput))
+      this.OnUpdateInputFromDefault = creation(creationDefaultState, incidentActions.updateTicketNavigationInput(this.newInput))
+      this.OnUpdateInputFromError = creation(creationWithErrorState, incidentActions.updateTicketNavigationInput(this.newInput))
       this.OnTryCreateIncidentFromDefault = creation(creationDefaultState, tryCreateIncident('', {}))
       this.OnTryCreateIncidentFromError = creation(creationWithErrorState, tryCreateIncident('', {}))
       this.OnFailureFromDefault = creation(creationDefaultState, failCreateIncident(this.failureError))

From 9f7c6965fce6103480a23b6e06c60651266a69d0 Mon Sep 17 00:00:00 2001
From: Philip Dimitratos <pdimit@microsoft.com>
Date: Tue, 10 Apr 2018 13:19:33 -0700
Subject: [PATCH 2/3] Fixed issues introduced by restructuring

---
 src/actions/incidentActions.js             |  2 +-
 src/components/Incident/GoToTicket.js      | 16 ++++++++--------
 src/components/Incident/Ticket.js          |  7 ++++++-
 src/components/MainComponent.js            |  4 ++--
 test/components/Incident/GoToTicketTest.js | 20 ++------------------
 5 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/actions/incidentActions.js b/src/actions/incidentActions.js
index e01a5f8..25a1bae 100644
--- a/src/actions/incidentActions.js
+++ b/src/actions/incidentActions.js
@@ -144,7 +144,7 @@ const postIncidentFetchArgs = (ticketId, ticketSystem) => {
   ]
 }
 
-export const updateTicketNavigationInput = (input) => ({
+export const updateTicketNavigationInput = (input, history) => ({
   type: UPDATE_INCIDENT_CREATION_INPUT,
   input
 })
diff --git a/src/components/Incident/GoToTicket.js b/src/components/Incident/GoToTicket.js
index 7fe2e73..fd1a9d6 100644
--- a/src/components/Incident/GoToTicket.js
+++ b/src/components/Incident/GoToTicket.js
@@ -6,10 +6,9 @@ import FlatButtonStyled from 'components/elements/FlatButtonStyled'
 import { updateTicketNavigationInput } from 'actions/incidentActions'
 import Paper from 'material-ui/Paper'
 
-export const onSubmit = (input, history, dispatch) => () => {
+export const onSubmit = (input, history) => () => {
   if (input) {
-    dispatch(updateTicketNavigationInput(''))
-    history.push(/tickets/ + input)
+    history.push('/tickets/' + input)
   }
 }
 
@@ -27,15 +26,16 @@ export const GoToTicketForm = ({input, creationError, history, dispatch}) => <fo
   />
   <FlatButtonStyled
     label='Submit'
-    onTouchTap={onSubmit(input, history, dispatch)}
+    onTouchTap={onSubmit(input, history)}
   />
 </form>
 
-export const mapStateToProps = (state) => {
+export const mapStateToProps = (state, ownProps) => {
   return {
     input: state.incidents.creation.input,
     ticketSystem: state.tickets.systems[1],
-    creationError: state.incidents.creation.error ? state.incidents.creation.error.message : ''
+    creationError: state.incidents.creation.error ? state.incidents.creation.error.message : '',
+    ...ownProps
   }
 }
 
@@ -48,9 +48,9 @@ GoToTicketForm.propTypes = {
 
 export const ConnectedGoToTicketForm = connect(mapStateToProps)(GoToTicketForm)
 
-export const GoToTicket = () => <Paper zDepth={1}>
+export const GoToTicket = ({history}) => <Paper zDepth={1}>
   <span>Go To Ticket:</span>
-  <ConnectedGoToTicketForm />
+  <ConnectedGoToTicketForm history={history} />
 </Paper>
 
 export default GoToTicket
diff --git a/src/components/Incident/Ticket.js b/src/components/Incident/Ticket.js
index 3875aa7..04b1c40 100644
--- a/src/components/Incident/Ticket.js
+++ b/src/components/Incident/Ticket.js
@@ -3,6 +3,7 @@ import { Redirect } from 'react-router'
 import { Route } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+
 import DisplayIncident from 'components/Incident/DisplayIncident'
 import LoadingMessage from 'components/elements/LoadingMessage'
 import ErrorMessage from 'components/elements/ErrorMessage'
@@ -26,11 +27,15 @@ class Ticket extends Component {
     const { dispatch, incident, ticketId, ticket, ticketSystem, preferences, incidentIsFetching, incidentIsError } = this.props
     dispatch(incidentActions.fetchIncidentIfNeeded(incident, ticketId, ticket, ticketSystem, preferences, incidentIsFetching, incidentIsError))
     dispatch(fetchEventTypes())
+    dispatch(incidentActions.updateTicketNavigationInput(''))
   }
 
-  componentDidUpdate () {
+  componentDidUpdate (previousProps) {
     const { dispatch, incident, ticketId, ticket, ticketSystem, preferences, incidentIsFetching, incidentIsError } = this.props
     dispatch(incidentActions.fetchIncidentIfNeeded(incident, ticketId, ticket, ticketSystem, preferences, incidentIsFetching, incidentIsError))
+    if (previousProps.ticketId !== ticketId) {
+      dispatch(incidentActions.updateTicketNavigationInput(''))
+    }
   }
 
   render () {
diff --git a/src/components/MainComponent.js b/src/components/MainComponent.js
index b4a66b1..f0f39a1 100644
--- a/src/components/MainComponent.js
+++ b/src/components/MainComponent.js
@@ -6,7 +6,7 @@ import { Router, Route } from 'react-router-dom'
 import { PersistGate } from 'redux-persist/lib/integration/react'
 
 import createBrowserHistory from 'history/createBrowserHistory'
-import GoToTicketForm from 'components/Incident/GoToTicket'
+import GoToTicket from 'components/Incident/GoToTicket'
 import Ticket from 'components/Incident/Ticket'
 import EnsureLoggedInContainer from 'components/Auth/EnsureLoggedIn'
 import incidentRedirect from 'components/Incident/IncidentRedirect'
@@ -31,7 +31,7 @@ export default class MainComponent extends React.Component {
                   <div>
                     { isChromeExtensionBackground() ? <Notifications /> : null }
                     <TopNav />
-                    <Route path='/' component={GoToTicketForm} />
+                    <GoToTicket history={history} />
                     <Route exact path='/' component={Home} />
                     <Route exact path='/extension.html' component={Home} />
                     <Route path='/tickets/:ticketId' component={Ticket} />
diff --git a/test/components/Incident/GoToTicketTest.js b/test/components/Incident/GoToTicketTest.js
index d1951f7..56552a1 100644
--- a/test/components/Incident/GoToTicketTest.js
+++ b/test/components/Incident/GoToTicketTest.js
@@ -66,23 +66,13 @@ describe('GoToTicket', function () {
       const input = 'testInput'
       const historyRecord = GetHistoryRecorder()
       const history = GetMockHistory(historyRecord)
-      const dispatchRecord = GetDispatchRecorder()
-      const dispatch = GetMockDispatch(dispatchRecord)
 
-      onSubmit(input, history, dispatch)()
+      onSubmit(input, history)()
       describe('History', function () {
         it('Should push a new url based on input', function () {
           expect(historyRecord[0]).to.equal('/tickets/testInput')
         })
       })
-
-      describe('Dispatched actions', function () {
-        it('Should dispatch an updateIncidentCreationInput action', function () {
-          expect(dispatchRecord.action).to.not.be.null
-          expect(dispatchRecord.action.type).to.equal('UPDATE_INCIDENT_CREATION_INPUT')
-          expect(dispatchRecord.action.input).to.equal('')
-        })
-      })
     })
 
     context('When input is not truthy', function () {
@@ -92,18 +82,12 @@ describe('GoToTicket', function () {
       const dispatchRecord = GetDispatchRecorder()
       const dispatch = GetMockDispatch(dispatchRecord)
 
-      onSubmit(input, history, dispatch)()
+      onSubmit(input, history)()
       describe('History', function () {
         it('Should not be changed', function () {
           expect(historyRecord.length).to.equal(0)
         })
       })
-
-      describe('Dispatched actions', function () {
-        it('Should not have dispatched any actions', function () {
-          expect(dispatchRecord.action).to.be.undefined
-        })
-      })
     })
   })
 

From 50949b00ecb5448ec1747631103465d01f73ac0f Mon Sep 17 00:00:00 2001
From: Philip Dimitratos <pdimit@microsoft.com>
Date: Fri, 13 Apr 2018 11:21:23 -0700
Subject: [PATCH 3/3] fixed bug where home component rendered incorrectly when
 no tickets were in history

---
 src/components/Home.js      |  1 +
 test/components/homeTest.js | 13 +++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Home.js b/src/components/Home.js
index 7ae06d0..3c65bfd 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -6,6 +6,7 @@ export const Home = ({ ticket }) => {
   if (ticket && ticket.originId) {
     return <Redirect to={`/tickets/${ticket.originId}`} />
   }
+  return null
 }
 
 export const mapStateToProps = (state) => {
diff --git a/test/components/homeTest.js b/test/components/homeTest.js
index 0137035..46218d5 100644
--- a/test/components/homeTest.js
+++ b/test/components/homeTest.js
@@ -1,8 +1,9 @@
 'use strict'
 import { expect } from 'chai'
 import React from 'react'
+
 import createComponent from 'test/helpers/shallowRenderHelper'
-import GetMockStore from 'test/helpers/mockReduxStore'
+
 import { Home, mapStateToProps } from 'components/Home'
 
 const setup = (props, children) => createComponent(Home, props, children)
@@ -17,13 +18,13 @@ const ticketState = { ticket: {
 }}
 
 describe('Home Container Component', function () {
-  it('Should return nothing if no tickets', function () {
-    const noTicketsExistState = setup(noTicketState, children)
-    expect(noTicketsExistState).to.be.undefined
+  it('Should return null if no tickets', function () {
+    const noTicketsExistResult = setup(noTicketState, children)
+    expect(noTicketsExistResult).to.be.null
   })
   it('Should redirect to most recent ticket if there are tickets', function () {
-    const ticketsExistState = setup(ticketState, children)
-    expect(ticketsExistState.props.to).to.equal('/tickets/5507')
+    const ticketsExistResult = setup(ticketState, children)
+    expect(ticketsExistResult.props.to).to.equal('/tickets/5507')
   })
 })