Dashboard: Solve focus issues in the widget creation/edit process

When the New widget pane is opened focus should be on the "Widget name" field. (can use Autofocus attribute)

When the "Add column" button is selected focus should go to the resulting "Column" field. (can use Autofocus attribute)

When a widget is successfully saved or edit form is cancelled and the dashboard is displayed, focus should be on the action menu button (displays with three dots on it) of the widget which was just created or updated. (have to use a Ref to get focus)

When navigating away from the dashboard app (unmounting at top level for any reason) then unset focus. 

 Dev task breakdown:

1)  Set the widgetId on the history object as pointed out in the slack thread.

 2) Within the widget component/widgetHeader component, create a ref and pass it down to the IconButton component via a ref. Make sure you are using this newly added hook for this purpose, passing in both the triggerRef and the ref created for the IconButton to that function.

Note: If you are creating a ref in the widget component, you would have to tweak the widgetHeader component to accept a forwardRef (https://reactjs.org/docs/forwarding-refs.html) I d suggest, creating a ref in the widgetHeader component for now and passing it down. Once we have this working we can make the tweaks.

3) Within the widgetHeader component add a useRef hook, that checks if the id of the current widget matches that of the id from the history's state and if so, focus it.

4) Within the DashboardRoute component, inside the useEffect, return a callback. This should reset the id to null on unmount

// return () => { history.replace( pathname: history.location.pathname, state: { widgetToFocus: null )}