Suggest integration after pasting GitHub / Jira link

[BartoszJarocki]

Issue - Enhancement

To increase integration usage, suggest integration when the user pastes a GitHub / Jira link in a Parabol task
Related conversation: https://parabol.slack.com/archives/C836NA350/p1634140455441800

Acceptance Criteria (optional)

• When GitHub / Jira link is detected a suggestion to integrate is displayed

Estimated Effort

• 6 hrs for design exploration

[jordanh]

This is a great idea! Do you imagine that we'd do this in the discussion thread?

First step would be a design.

@ackernaut, @enriquesanchez could you suggest an estimated design effort?

[enriquesanchez]

I think this feature should also be on reflections, and maybe even comment threads.

I think 6 hrs. of design work should be enough.

[mattkrick]

We might want to move to tiptap before we invest more in draftjs see #5431

[enriquesanchez]

We also need to think about what is the added value the integration brings when pasting a link.

Are we going to show richer content, such as previews and embeds, that update live?

[enriquesanchez]

When we detect that a link to an integration that we support has been added to a task we can display a little popup on the top right corner of the window that prompts the user to connect to said integration:

I suggest the top right corner for two reasons:

1. It's generally easier to see UI elements when they appear on the upper part of the window. Anything on the bottom side is more obscure and easier to miss.
2. We already have the 'Start meeting' CTA on the bottom right, and I didn't want to cover it.

The language of the popup can vary, and would love to hear if you have any suggestions for improving it, but for now I'm proposing something like:

That looks like a 
GitLab link.
Connect to GitLab for a more streamlined experience. Learn more.

Replace GitLab with any other integration we support.

The popup should comply with the following acceptance criteria:

• The popup should be easily dismissable (close button)
• The popup should be smart and only appear if the integration has not be added yet, or if the popups has not been previously dismissed.
• The popup should include a 'Learn more' link to a support article, for example https://www.parabol.co/integrations/jira
• Clicking 'Connect' should let you connect the integration without leaving the current view. We can show a popup window or modal in place. See Design: supporting self-hosted services #5567 for more detail.

How should we deal with cloud vs. self-hosted integrations? When supporting both, how do we know which one the user would prefer?

We don't, and I think we should ask first. #5567 has some design solutions that should also work here.

[enriquesanchez]

I mentioned this in a previous comment, but I think we are going to have to follow up with clarifying what added value brings connecting an integration, particularly in these scenarios where it's only a link being pasted or added.

• Should we show richer embeds?
• Should these update live?

[jordanh]

@enriquesanchez, I'm not sure how to trigger it, but our Task cards have an error state where we can show a message when something fails. I wonder instead of the modal, we put this message on the task card itself? Something like:

Task card content with GitHub link
That looks like a GitHub link. Connect Parabol to GitHub for a more streamlined experience.

[enriquesanchez]

@jordanh This is great, thank you! I was not aware we had a pattern like this. Your suggestion prompted me to explore a little more and I came up with the following alternative:

Considering that we adopt the pattern proposed in #5535 (comment), we can have the following flow:

When a user pastes a link from an integration or 3rd party service that we support, we:

1. Allow the action of pasting a text link to happen, but at the same time we prompt the user to make a choice:

a) If I continue to type or press ESC, the popup goes away.
b) If I select Paste as link the popup goes away and I continue with my text editing.
c) If I select Paste as attachment the link goes away, I get a link embed instead and I can continue with my text editing.

(Maybe we add a 3rd option Ignore and don't ask me again 🤔)

2. Once a choice has been made in the previous step, then we suggest the integration:

a) If I chose to paste the link as regular text

b) If I chose to paste the link as an attachment:

3. From here, I can either go through with connecting the integration, or dismiss the little banner.

If I go through and connect the integration, I now see richer content.

a) If I pasted as link:

b) If I pasted as attachment:

If instead I chose to dismiss the banner, we remember that choice and don't prompt the user again.

[enriquesanchez]

Design explorations done. Closing in favor of #5940.