Update useExternalLink to match webapp (#8675)

app/hooks/use_external_link.test.ts

@@ -25,6 +25,13 @@ describe('useExternalLink', () => {
         expect(queryParams).toEqual({});
     });
 
+    it('mailto links are untouched even if to mattermost emails', () => {
+        const mailtoURL = 'mailto:example@mattermost.com?subject=123&body=456';
+        const {result: {current: [mailtoHref, mailtoQueryParams]}} = renderHook(() => useExternalLink(getBaseProps(), mailtoURL));
+        expect(mailtoHref).toEqual(mailtoURL);
+        expect(mailtoQueryParams).toEqual({});
+    });
+
     it('all base queries are set correctly', () => {
         const url = 'https://www.mattermost.com/some/url';
         const {result: {current: [href, queryParams]}} = renderHook(() => useExternalLink(getBaseProps(), url));
@@ -116,4 +123,10 @@ describe('useExternalLink', () => {
         expect(firstHref).toBe(secondHref);
         expect(firstParams).toBe(secondParams);
     });
+
+    it('do not substitute %20 on query params', () => {
+        const url = 'https://www.mattermost.com/some/url?subject=hello%20world';
+        const {result: {current: [href]}} = renderHook(() => useExternalLink(getBaseProps(), url));
+        expect(href).toContain('subject=hello%20world');
+    });
 });

app/hooks/use_external_link.ts

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {useMemo} from 'react';
-import {URL, URLSearchParams} from 'react-native-url-polyfill';
+import {URL} from 'react-native-url-polyfill';
 
 export type ExternalLinkQueryParams = {
     utm_source?: string;
@@ -30,7 +30,7 @@ export function useExternalLink(
     overwriteQueryParams: ExternalLinkQueryParams = {},
 ): [string, Record<string, string>] {
     return useMemo(() => {
-        if (!href?.includes('mattermost.com')) {
+        if (!href?.includes('mattermost.com') || href.startsWith('mailto:')) {
             return [href, {}];
         }
 
@@ -47,7 +47,7 @@ export function useExternalLink(
             ...overwriteQueryParams,
             ...existingQueryParamsObj,
         };
-        parsedUrl.search = new URLSearchParams(queryParams).toString();
+        parsedUrl.search = Object.entries(queryParams).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&');
 
         return [parsedUrl.toString(), queryParams];
     }, [href, isCloud, location, overwriteQueryParams, telemetryId, userId]);