Update <KExternalLink> with icon and noopener noreferrer attr

[sairina]

Summary

Background: openInNewTab attr was recently added to <KExternalLink> so that a value of true would allow for the link to be opened in another tab. Previously, <KExternalLink> used target="_blank" and did not have an icon to differentiate it as an external link as opposed to a link to another URL internally.

In this PR

1. The noopener noreferrer attr was also added as an extra security measure to ensure window.opener = null because target="_blank" is used in the component.
2. The "open in new tab" icon was added.

Issues:

Addresses #123
Addresses #137
Addresses #94

Expected Behavior

Use of this component should:

1. Allow for an external link to be opened safely in a new tab
2. The "open in new tab" icon should open correctly depending on the language - see below.
   -- to the Left of the link when link is written in RTL languages (e.g. Arabic)
   -- to the Right of the link when link is written in LTR languages (e.g. English)

RTL/LTR Screenshots

Icon on Left for Arabic link (Arabic)	Icon on Right for English link (English)

Icon on Right for English link (Arabic)	Icon on Right for English link (English)

• the screenshot above is for demonstration purposes of <KExternalLink>; from my understanding the above should actually be a use of the <KRouterLink> though in Kolibri, it's currently a <KExternalLink> and could potentially need to be fixed (see: Use of KExternalLink should never refer to Kolibri URLs, use KRouterLink kolibri#7482)

Follow-up Notes

• There are still places in Kolibri that still use target=_blank, that should be updated.
• Leverage new openInNewTab prop of KExternalLink kolibri#7712 can continue

[indirectlylit]

Looking great, and thanks for testing the RTL behaviors!

Two small notes:

• Should probably have a few more pixels of margin between the icon and the text so it feels less cramped
• When inline with an RTL-language link, the icon should be flipped so it points up and to the left. This can be achieved by adding rtlFlip: true to iconDefinitions.js

[sairina]

Updated screenshots:

Margin added (Arabic)	Margin added (English)

[nucleogenesis]

This is looking good except one thing I noted. I tested on Studio as well and it looked great! Thanks @sairina

[sairina]

Updated so that margin no longer shows when there is no icon: this.icon was not defined in my code, so I used this.openInNewTab to check for whether or not the icon existed (since we only have the icon when openInNewTab is true.

Arabic (No icon)	English (No icon)

Arabic (With icon)	English (With icon)

[sairina]

@nucleogenesis In Arabic, for the Update Notification modal (UpdateNotification.vue), the external link icon appears on the left side of the link (as opposed to the right side in, say, the privacy modal) and an extra margin has been created. Nvm - issue fixed.

Update Modal w/RTL-lang link	Previous

[nucleogenesis]

Great work! Thanks @sairina !