[GH - 774] Add tooltip for jira ticket links

[sibasankarnayak]

implemented tooltip to show Ticket name, Status, Type, First few characters from the description

ticket here Fixes #774

[mattermod]

Hello @sibasankarnayak,

Thanks for your pull request! A Core Committer will review your pull request soon. For code contributions, you can learn more about the review process here.

[sibasankarnayak]

@hanzei @mickmister this is the screenshot for tooltip , please share your feedback

[mickmister]

@sibasankarnayak Can you please convert this PR to use typescript? I would like that to be done before I review this. Please let me know if you have any questions about this

[sibasankarnayak]

@sibasankarnayak Can you please convert this PR to use typescript? I would like that to be done before I review this. Please let me know if you have any questions about this

Sure @mickmister

[codecov-commenter]

Codecov Report

Merging #835 (8dd826d) into master (c6a6f00) will decrease coverage by 0.16%. The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master     #835      +/-   ##
==========================================
- Coverage   34.81%   34.64%   -0.17%     
==========================================
  Files          52       52              
  Lines        5949     5978      +29     
==========================================
  Hits         2071     2071              
- Misses       3666     3695      +29     
  Partials      212      212              

Impacted Files	Coverage Δ
server/http.go	39.61% <0.00%> (-0.53%)	:arrow_down:
server/issue.go	30.41% <0.00%> (-1.32%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update c6a6f00...8dd826d. Read the comment docs.

[sibasankarnayak]

@mickmister can you review this PR.

[hanzei]

@Rina-dsg @mickmister @levb Gentle reminder to review this PR

[mattermod]

This PR has been automatically labelled "stale" because it hasn't had recent activity. A core team member will check in on the status of the PR to help with questions. Thank you for your contribution!

[hanzei]

@matthewbirtch Would you mind reviewing this PR while @Rina-dsg is out?

[matthewbirtch]

@matthewbirtch Would you mind reviewing this PR while @Rina-dsg is out?

@hanzei I'm happy to review. I just triggered a cloud server build, but will I need to do anything to set it up properly to review this PR?

[hanzei]

Unfortunately, the test server created via labels can't be used for plugin testing. Please use https://jira-tooltip.test.mattermost.cloud/ instead.

@sibasankarnayak is that server ready?

[mm-cloud-bot]

Test server destroyed

[sibasankarnayak]

Unfortunately, the test server created via labels can't be used for plugin testing. Please use https://jira-tooltip.test.mattermost.cloud/ instead.

@sibasankarnayak is that server ready?

I wasn't able to upload the plugin as it was throwing error as it was created with linux system

[hanzei]

@sibasankarnayak Can you please go into more detail? Can be bundles at https://app.circleci.com/pipelines/github/mattermost/mattermost-plugin-jira/2975/workflows/3e675fbf-f7b7-4a09-b6dd-4c18731d3bd5/jobs/9400/artifacts be used?

[sibasankarnayak]

https://jira-tooltip.test.mattermost.cloud/

Tried with uploading the zip creating with mac os getting this error {"timestamp":"2022-03-28 15:13:18.243 Z","level":"error","msg":"Unable to restart plugin on upgrade.","caller":"web/context.go:105","path":"/api/v4/plugins","request_id":"q1num6d463dt5fi1kk6kuh66hh","ip_addr":"100.121.117.0","user_id":"moy8gjf15jfqbeuipir9usikra","method":"POST","err_where":"installExtractedPlugin","http_code":500,"err_details":"plugin requires Mattermost 6.5.0: jira"}

@sibasankarnayak Can you please go into more detail? Can be bundles at https://app.circleci.com/pipelines/github/mattermost/mattermost-plugin-jira/2975/workflows/3e675fbf-f7b7-4a09-b6dd-4c18731d3bd5/jobs/9400/artifacts be used?

@hanzei tried but getting this error

{"timestamp":"2022-03-28 15:13:18.243 Z","level":"error","msg":"Unable to restart plugin on upgrade.","caller":"web/context.go:105","path":"/api/v4/plugins","request_id":"q1num6d463dt5fi1kk6kuh66hh","ip_addr":"100.121.117.0","user_id":"moy8gjf15jfqbeuipir9usikra","method":"POST","err_where":"installExtractedPlugin","http_code":500,"err_details":"plugin requires Mattermost 6.5.0: jira"}

[hanzei]

@sibasankarnayak I've updated the server. Could you please try again?

[sibasankarnayak]

@sibasankarnayak I've updated the server. Could you please try again?

@hanzei have deployed , configured the tooltip feature ,have some sample here please let me know the feedback

[sibasankarnayak]

I've added a number of changes in the CSS- hopefully that makes it clear.

Also, a couple other things I noticed:

1. There is no arrow pointing to the link as per the design. Is this something we can add? Here's a sample of the intended design:

2. The description should be truncated to 3 lines of text

@matthewbirtch sure , Thankyou for feedback.

regarding the 1 st point showing an arrow is bit complex not sure if we can as the tooltip can open from any direction to the link , if you have any solution can share it with me will give a try. For rest of the comment i will make changes

[matthewbirtch]

regarding the 1 st point showing an arrow is bit complex not sure if we can as the tooltip can open from any direction to the link , if you have any solution can share it with me will give a try. For rest of the comment i will make changes

@sibasankarnayak we have a tour point component that utilizes an arrow like this. @AshishDhama could you help provide a possible approach for a similar component in this PR?

If it's too complicated, I think we can proceed without as this still brings value without it, but it would be nice to have it.

[sibasankarnayak]

tour point component that utilizes an arrow like this

Sure @matthewbirtch if you can share i ll sure try it up. creating a triangle could be possible with :before and :after but not sure how to create it dynamically on position.

[AshishDhama]

@sibasankarnayak @matthewbirtch, we are using an external library for that particular reason called Tippy. The tour tip component, which we have used, can be found here https://github.com/mattermost/mattermost-webapp/tree/master/components/widgets/tour_tip. @sibasankarnayak you can use the same if that can resolve the issue, but please make sure of using the same version. Please let me know if you need any help.

[sibasankarnayak]

@sibasankarnayak @matthewbirtch, we are using an external library for that particular reason called Tippy. The tour tip component, which we have used, can be found here https://github.com/mattermost/mattermost-webapp/tree/master/components/widgets/tour_tip. @sibasankarnayak you can use the same if that can resolve the issue, but please make sure of using the same version. Please let me know if you need any help.

@matthewbirtch as suggested by @AshishDhama to use a npm package tippyjs - V4.2.6 which was used by mattermost-webapp which is using npm 7 jira plugin is using npm 6 so we are facing problem , can we skip this arrow design or might need to wait thill jira started using npm 7 which might take long.

cc @mickmister

[mickmister]

you can use the same if that can resolve the issue, but please make sure of using the same version

@AshishDhama Just want to note that if we need to use the same version of a node module, we would want to first export this to plugins in https://github.com/mattermost/mattermost-webapp/blob/master/plugins/export.js, so we ensure the same version will always be used.

@sibasankarnayak Can you try implementing this by exposing the library via the webapp's exports? We wouldn't get type completion in the plugin's source code without also installing the package in the Jira plugin's project, but the package will be available to use at runtime via the window object.

[AshishDhama]

@mickmister Thanks will add it there.

[mickmister]

@sibasankarnayak Have you created the PR to add Tippy to mattermost-webapp's exports? As I said, we need that to be done as soon as possible to minimize the change in min_server_version in the plugin

[sibasankarnayak]

@sibasankarnayak Have you created the PR to add Tippy to mattermost-webapp's exports? As I said, we need that to be done as soon as possible to minimize the change in min_server_version in the plugin

created the PR https://github.com/mattermost/mattermost-webapp/pull/10235

[mattermod]

This PR has been automatically labelled "stale" because it hasn't had recent activity. A core team member will check in on the status of the PR to help with questions. Thank you for your contribution!

[raghavaggarwal2308]

@mickmister @AshishDhama For using Tippy or any other tooltip library we need a reference to the actual component which will act as an anchor to the tooltip and in our case the component which needs to be an anchor is present on the Mattermost webapp code so it would not be possible to refer that component directly from the plugin. However, this can be achieved using some UI hacks but we don't think that would be feasible for rendering the arrow. However, we have everything similar to the Figma except that arrow which is perfectly fine. Even the tooltip present in the GitHub plugin doesn't contain the arrow as well and uses Mattermost's default tooltip component. So, we suggest skipping the arrow and just fixing the typescript errors in this PR, please let us know your thoughts if it's different

[mickmister]

For using Tippy or any other tooltip library we need a reference to the actual component

@raghavaggarwal2308 There's an open PR that exposes the component to plugins to use as window.Tippy https://github.com/mattermost/mattermost-webapp/pull/10235

So, we suggest skipping the arrow and just fixing the typescript errors in this PR, please let us know your thoughts if it's different

I'm fine with skipping the arrow if necessary

[raghavaggarwal2308]

@mickmister Since the PR #10235 has not merged yet. We suggest merging this PR with the typescript errors fixed, without the arrow and we can revisit that change once PR #10235 is merged.

Created issue #886 for the same.