[HOLD for payment 2022-05-20][$1000] Feature Request: Show link when hover over hyperlink

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to chat
2. Send any text hyperlinked
3. Hover over or hard press over link

Expected Result:

Some tool tip displayed so that, when the hyperlink is hovered over, the destination link shows.

Actual Result:

Nothing happens on hover

Problem:

Currently users can use markdown to add hyperlinks to chats. The person who receives the link can't easily view the link to know where goes (inc. potential phishing links)

Solution:

Add a tool tip so that, when the hyperlink is hovered over, the destination link shows.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.39-1
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @mallenexpensify
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1644366109776009

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @kadiealexander (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[sobitneupane]

PROPOSAL
To achieve this we need to make some changes in src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

App/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

Lines 54 to 70 in d9355db

	<AnchorForCommentsOnly
	href={attrHref}
	isAuthTokenRequired={isAttachment}
	// Unless otherwise specified open all links in
	// a new window. On Desktop this means that we will
	// skip the default Save As... download prompt
	// and defer to whatever browser the user has.
	// eslint-disable-next-line react/jsx-props-no-multi-spaces
	target={htmlAttribs.target || '_blank'}
	rel={htmlAttribs.rel || 'noopener noreferrer'}
	style={{...props.style, ...parentStyle}}
	key={props.key}
	fileName={fileName}
	>
	<TNodeChildrenRenderer tnode={props.tnode} />
	</AnchorForCommentsOnly>

<Tooltip text={attrHref}>
    <AnchorForCommentsOnly
        href={attrHref}
        isAuthTokenRequired={isAttachment}

        // Unless otherwise specified open all links in
        // a new window. On Desktop this means that we will
        // skip the default Save As... download prompt
        // and defer to whatever browser the user has.
        // eslint-disable-next-line react/jsx-props-no-multi-spaces
        target={htmlAttribs.target || '_blank'}
        rel={htmlAttribs.rel || 'noopener noreferrer'}
        style={{...props.style, ...parentStyle}}
        key={props.key}
        fileName={fileName}
    >
        <TNodeChildrenRenderer tnode={props.tnode} />
    </AnchorForCommentsOnly>
</Tooltip>

Output:

[parasharrajat]

This is an extra feature. it could be good to have but I don't it is needed at this stage.

[kadiealexander]

Agree, but if it's an easy fix I say we go for it. @mallenexpensify is right that it poses a small security risk to click on a link when you're not sure of the destination.

[MelvinBot]

Triggered auto assignment to @sketchydroide (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

Then I don't think a tooltip is best suited bfor this. Like other websites, hovering over the link the browser should show the link address on the cornor of the browser.

But this is not happening in our app so we should do that even though we are planning to show tooltip.

[sketchydroide]

slack seem to use a tool tip:

Althoug the mobile version doesn't show anything.

I think this is an external

[sketchydroide]

Then I don't think a tooltip is best suited bfor this. Like other websites, hovering over the link the browser should show the link address on the cornor of the browser.

But this is not happening in our app so we should do that even though we are planning to show tooltip.

I think for now let's show the tooltip, this is what slack seems to do, and for the rest of the none web based platforms I think it makes more sense.