[$175] Provide Job Title and ProjectId info for teamname

[nkumar-topcoder]

Additional Info during payment shall help end user to which project id and to which Job Title the Topcoder handle belongs to.

Hence

• When user moves mouse over Topcoder handle then provide Tool Tip Job title
• Same way when user moves mouse over Team Name then provide Tool Tip Project id

[maxceem]

Sum up:

Implemente a general Tooltip component

• Implement a reusable Tooltip component using the library react-popper which we already use for other popovers (don't add a new library).

• We should be able to use this library whenever we want to show Tooltips like:

  <Tooltip content={<WhatToShowInsideTooltip />}><Anyting></Anything></Tooltip>

  • When we hover <Anything></Anything> with mouse show a tooltip with the <WhatToShowInsideTooltip /> inside.
  • we implemented tooltip for avtar in another app which you could use for the reference https://github.com/topcoder-platform/taas-app/blob/63dfa02706c484ead2a4727b2502e402db023b42/src/components/Avatar/index.jsx
  • the only difference that it should allow us to apply this Tooltip to anything, not only to hardcoded avatar

  

  • use the same design like in TaaS App

Apply Tooltip component for this task

• Now, having general Tooltip component, show tooltip when we hover Team Name or User Handle

• We don't know Job Title, and we should load it. So create component, which we would show inside the tooltip.

  • This component should load job details by job id
  • During loading show "Loading..."
  • After loading is done, show loaded job title
  • Implement this component similar to ProjectName, see how it looks like https://monosnap.com/file/FO6Ai8saPt81oNjnhy2BYQv4yj0LjN
  • It should not load the same job details twice.

• We already have another place where we are also loading Job Title, here
  

  • we should reuse our new component which loads Job Name
  • and remove all the current logic to load Job Name in this place

[MadOPcode]

@maxceem should the tooltip with project id contain the URL to the project? If so could you post the template for this URL?

[maxceem]

No need for now. If needed we could add the link inside the table column directly not in tooltip

[maxceem]

Implementation took care about many small details like:

• allow enter mouse into Tooltip and select text there
• show all the errors in Tooltip not only one of them
• nicely support dynamic content of the Tooltip

So I'm increasing the prize to $175 for this task.

[sandhiyakavi]

Verified on Dev Env.

[maxceem]

Paid via https://www.topcoder.com/challenges/b79e1ff2-0594-4edb-8347-087b9f460f96

[sandhiyakavi]

verified on Prod Env with @nkumar-topcoder