[$150] Notifications about posts in Phases are not handled correctly

[maxceem]

When we make a comment in some Phase Discussions tab other users are getting a notification about it.

Expected behavior

• When we click such notifications it has to
  • go to Project Plan tab
  • scroll to appropriate Phase
  • expand Phase
  • openDiscussions tab
  • make sure that related comment is visible
• The notification has to be marked as read when we open a Discussions tab in the particular Phase (works now) but NOT in other conditions (doesn't work now).

Actual behavior

• When we click such notifications it leads to the Dashboard tab where we do not always have a phase with the related comment. And even if we have a neccessary phase here it is not expanded.
• This notification is marked as read when we come to Dashboard tab.

[maxceem]

This issue is basically a duplicate of #2175.
So we depend on the backend changes here.

[vikasrohit]

@maxceem where are we blocked for this one now? Can we unblock it and include it in our CF challenge?

[maxceem]

Unblocked and added to cf-pipeline.

[maxceem]

At the moment when we click notification about post for the phase we:

• navigated to the phase tab
• scroll to the phase
• open Discussion tab

The only thing we don't do at the moment is:

• scroll to a particular comment on the phase as it's done for comments on the dashboard

To accomplish it we should do several things:

• change PHASE_POST (https://github.com/appirio-tech/connect-app/blob/dev/src/routes/notifications/constants/notifications.js#L20) URL to /projects/{{projectId}}/plan/#phase-{{phaseId}}-posts-{{postId}} so phase post notifications lead to the particular phase post instead of just to the tab
• define id of phase posts to math the new URL here https://github.com/appirio-tech/connect-app/blob/cf16/src/projects/detail/containers/PhaseFeedHOC.jsx#L117
• we should update code to expand Discussions tab if necessary https://github.com/appirio-tech/connect-app/blob/cf16/src/projects/detail/containers/ProjectPlanContainer.jsx#L64 so when it sees a link in URL which looks like /projects/{{projectId}}/plan/#phase-{{phaseId}}-posts-{{postId}} it would open Discussion tab automatically. Now it already works for links like /projects/{{projectId}}/plan/#phase-{{phaseId}}-posts. NOTE: it should still work for /projects/{{projectId}}/plan/#phase-{{phaseId}}-posts URLs as we use such URLs to link to the phase Discussion tab in the sidebar.
• at the moment when we click links like #phase-{{phaseId}}-posts there is automatic smooth scrolling to the phase, see demo https://monosnap.com/file/gocBgWt1gdUxcLV318UygVNaUoZqWz
  • this automatic smooth scrolling is handled by react-scroll library: it tries to find element an element with id which is mentioned in browser URL hash and if there is such, it scrolls to it smoothly.
  • after we change URL for phase posts to /projects/{{projectId}}/plan/#phase-{{phaseId}}-posts-{{postId}} such posts would be not rendered at the moment when we click such URL. I think react-scroll library can handle some cases when elements are not yet rendered and it will scroll as soon as they are rendered. But in some cases it may fail to do so. If for our case it will fail do so we can still trigger smooth scrolling using https://github.com/appirio-tech/connect-app/blob/cf16/src/components/ScrollToAnchors.jsx#L40 HOC or scrollToHash method.