From f0110e361ecebb5f589b0e2bc9b5bdc3a625e512 Mon Sep 17 00:00:00 2001
From: Nick Misasi <nick.misasi@mattermost.com>
Date: Wed, 22 May 2024 08:52:21 -0400
Subject: [PATCH] [CLD-7742] Make location prop on ExternalLink component
 required (#27052)

* Make location prop on ExternalLink required, update existing references that are missing it

* Fix linter

* Fix tests
---
 .../group_settings/group_settings.tsx         |  1 +
 .../ip_filtering/save_confirmation_modal.tsx  |  1 +
 .../admin_console/jobs/job_download_link.tsx  |  1 +
 .../analytics/activated_users_card/title.tsx  |  5 +++-
 .../__snapshots__/external_link.test.tsx.snap |  4 +++-
 .../external_link/external_link.test.tsx      | 24 ++++++++++++++-----
 .../src/components/external_link/index.tsx    |  2 +-
 .../overage_users_banner_notice/index.tsx     |  1 +
 .../overage_users_banner_notice.test.tsx      |  4 ++--
 .../channels/src/components/login/login.tsx   |  5 +++-
 .../main_menu/learn_about_teams_link.tsx      |  1 +
 .../organization_status.tsx                   |  3 +--
 .../reaction_limit_reached_modal.tsx          |  1 +
 .../components/search_hint/search_hint.tsx    |  1 +
 .../seats_calculator/consequences.tsx         |  1 +
 .../user_settings_notifications.test.tsx.snap | 18 +++++++++-----
 .../user_settings_notifications.tsx           |  1 +
 17 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/group_settings/group_settings.tsx b/webapp/channels/src/components/admin_console/group_settings/group_settings.tsx
index 384ea4debe..9ee787d997 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_settings.tsx
+++ b/webapp/channels/src/components/admin_console/group_settings/group_settings.tsx
@@ -54,6 +54,7 @@ const GroupSettings = ({isDisabled}: Props) => {
                         subtitleValues={{
                             link: (msg: React.ReactNode) => (
                                 <ExternalLink
+                                    location='group_settings.ldap_groups'
                                     href={`${siteURL}/admin_console/authentication/ldap`}
                                 >
                                     {msg}
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.tsx b/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.tsx
index 7f057cca7c..cb8368715f 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.tsx
+++ b/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.tsx
@@ -52,6 +52,7 @@ export default function SaveConfirmationModal({onExited, onConfirm, title, subti
                                     values={{
                                         customerportal: (msg) => (
                                             <ExternalLink
+                                                location='save_confirmation_modal'
                                                 href='https://customers.mattermost.com/console/ip_filtering'
                                             >
                                                 {msg}
diff --git a/webapp/channels/src/components/admin_console/jobs/job_download_link.tsx b/webapp/channels/src/components/admin_console/jobs/job_download_link.tsx
index 4e4c07d1d9..1950e1c7c9 100644
--- a/webapp/channels/src/components/admin_console/jobs/job_download_link.tsx
+++ b/webapp/channels/src/components/admin_console/jobs/job_download_link.tsx
@@ -17,6 +17,7 @@ const JobDownloadLink = React.memo(({job}: {job: Job}): JSX.Element => {
         return (
             <ExternalLink
                 key={job.id}
+                location='job_download_link'
                 href={`${Client4.getJobsRoute()}/${job.id}/download`}
                 className='JobDownloadLink'
             >
diff --git a/webapp/channels/src/components/analytics/activated_users_card/title.tsx b/webapp/channels/src/components/analytics/activated_users_card/title.tsx
index 76094d4308..68b5a5a79d 100644
--- a/webapp/channels/src/components/analytics/activated_users_card/title.tsx
+++ b/webapp/channels/src/components/analytics/activated_users_card/title.tsx
@@ -23,7 +23,10 @@ const Title = () => {
             placement='top'
         >
             <span>
-                <ExternalLink href='https://mattermost.com/pl/site-statistics-definitions'>
+                <ExternalLink
+                    location='activated_users_card.title'
+                    href='https://mattermost.com/pl/site-statistics-definitions'
+                >
                     {intl.formatMessage(messages.totalUsers)}
                     <InformationOutlineIcon size='16'/>
                 </ExternalLink>
diff --git a/webapp/channels/src/components/external_link/__snapshots__/external_link.test.tsx.snap b/webapp/channels/src/components/external_link/__snapshots__/external_link.test.tsx.snap
index 0de1b8b687..a4e1cb09eb 100644
--- a/webapp/channels/src/components/external_link/__snapshots__/external_link.test.tsx.snap
+++ b/webapp/channels/src/components/external_link/__snapshots__/external_link.test.tsx.snap
@@ -15,9 +15,11 @@ exports[`components/external_link should match snapshot 1`] = `
 >
   <ExternalLink
     href="https://mattermost.com"
+    location="test"
   >
     <a
-      href="https://mattermost.com?utm_source=mattermost&utm_medium=in-product-cloud&utm_content=&uid=currentUserId&sid="
+      href="https://mattermost.com?utm_source=mattermost&utm_medium=in-product-cloud&utm_content=test&uid=currentUserId&sid="
+      location="test"
       onClick={[Function]}
       rel="noopener noreferrer"
       target="_blank"
diff --git a/webapp/channels/src/components/external_link/external_link.test.tsx b/webapp/channels/src/components/external_link/external_link.test.tsx
index 3b56f08657..427d6e67c4 100644
--- a/webapp/channels/src/components/external_link/external_link.test.tsx
+++ b/webapp/channels/src/components/external_link/external_link.test.tsx
@@ -34,6 +34,7 @@ describe('components/external_link', () => {
         const wrapper = mount(
             <Provider store={store}>
                 <ExternalLink
+                    location='test'
                     href='https://mattermost.com'
 
                 >{'Click Me'}</ExternalLink>
@@ -57,7 +58,10 @@ describe('components/external_link', () => {
             },
         };
         renderWithContext(
-            <ExternalLink href='https://mattermost.com'>
+            <ExternalLink
+                location='test'
+                href='https://mattermost.com'
+            >
                 {'Click Me'}
             </ExternalLink>,
             state,
@@ -65,7 +69,7 @@ describe('components/external_link', () => {
 
         expect(screen.queryByText('Click Me')).toHaveAttribute(
             'href',
-            expect.stringMatching('utm_source=mattermost&utm_medium=in-product-cloud&utm_content=&uid=currentUserId&sid='),
+            expect.stringMatching('utm_source=mattermost&utm_medium=in-product-cloud&utm_content=test&uid=currentUserId&sid='),
         );
     });
 
@@ -83,7 +87,10 @@ describe('components/external_link', () => {
             },
         };
         renderWithContext(
-            <ExternalLink href='https://mattermost.com?test=true'>
+            <ExternalLink
+                location='test'
+                href='https://mattermost.com?test=true'
+            >
                 {'Click Me'}
             </ExternalLink>,
             state,
@@ -91,7 +98,7 @@ describe('components/external_link', () => {
 
         expect(screen.queryByText('Click Me')).toHaveAttribute(
             'href',
-            'https://mattermost.com?utm_source=mattermost&utm_medium=in-product-cloud&utm_content=&uid=currentUserId&sid=&test=true',
+            'https://mattermost.com?utm_source=mattermost&utm_medium=in-product-cloud&utm_content=test&uid=currentUserId&sid=&test=true',
         );
     });
 
@@ -109,7 +116,10 @@ describe('components/external_link', () => {
             },
         };
         renderWithContext(
-            <ExternalLink href='https://google.com'>
+            <ExternalLink
+                location='test'
+                href='https://google.com'
+            >
                 {'Click Me'}
             </ExternalLink>,
             state,
@@ -139,6 +149,7 @@ describe('components/external_link', () => {
                 target='test'
                 rel='test'
                 href='https://google.com'
+                location='test'
             >{'Click Me'}</ExternalLink>,
             state,
         );
@@ -170,6 +181,7 @@ describe('components/external_link', () => {
         };
         renderWithContext(
             <ExternalLink
+                location='test'
                 href='https://mattermost.com#desktop'
             >
                 {'Click Me'}
@@ -179,7 +191,7 @@ describe('components/external_link', () => {
 
         expect(screen.queryByText('Click Me')).toHaveAttribute(
             'href',
-            'https://mattermost.com?utm_source=mattermost&utm_medium=in-product-cloud&utm_content=&uid=currentUserId&sid=#desktop',
+            'https://mattermost.com?utm_source=mattermost&utm_medium=in-product-cloud&utm_content=test&uid=currentUserId&sid=#desktop',
         );
     });
 });
diff --git a/webapp/channels/src/components/external_link/index.tsx b/webapp/channels/src/components/external_link/index.tsx
index 24a8591826..8a3c939dbb 100644
--- a/webapp/channels/src/components/external_link/index.tsx
+++ b/webapp/channels/src/components/external_link/index.tsx
@@ -25,7 +25,7 @@ type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     rel?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     queryParams?: ExternalLinkQueryParams;
-    location?: string;
+    location: string;
     children: React.ReactNode;
 };
 
diff --git a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
index 8fb8339b9c..85814a148b 100644
--- a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
+++ b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/index.tsx
@@ -97,6 +97,7 @@ const OverageUsersBannerNotice = () => {
 
                         return (
                             <ExternalLink
+                                location='overage_users_banner'
                                 className='overage_users_banner__button'
                                 href={LicenseLinks.CONTACT_SALES}
                                 onClick={handleClick}
diff --git a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.test.tsx b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.test.tsx
index 49d8039988..502ba954d9 100644
--- a/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.test.tsx
+++ b/webapp/channels/src/components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.test.tsx
@@ -231,7 +231,7 @@ describe('components/invitation_modal/overage_users_banner_notice', () => {
         expect(screen.getByRole('link')).toHaveAttribute(
             'href',
             LicenseLinks.CONTACT_SALES +
-                '?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=current_user&sid=',
+                '?utm_source=mattermost&utm_medium=in-product&utm_content=overage_users_banner&uid=current_user&sid=',
         );
         expect(trackEvent).toBeCalledTimes(2);
         expect(trackEvent).toBeCalledWith('insights', 'click_true_up_warning', {
@@ -337,7 +337,7 @@ describe('components/invitation_modal/overage_users_banner_notice', () => {
         expect(screen.getByRole('link')).toHaveAttribute(
             'href',
             LicenseLinks.CONTACT_SALES +
-                '?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=current_user&sid=',
+                '?utm_source=mattermost&utm_medium=in-product&utm_content=overage_users_banner&uid=current_user&sid=',
         );
         expect(trackEvent).toBeCalledTimes(2);
         expect(trackEvent).toBeCalledWith('insights', 'click_true_up_error', {
diff --git a/webapp/channels/src/components/login/login.tsx b/webapp/channels/src/components/login/login.tsx
index 0cec10ef00..4820fb9e3c 100644
--- a/webapp/channels/src/components/login/login.tsx
+++ b/webapp/channels/src/components/login/login.tsx
@@ -745,7 +745,10 @@ const Login = ({onCustomizeHeader}: LoginProps) => {
         if (ForgotPasswordLink) {
             return (
                 <div className='login-body-card-form-link'>
-                    <ExternalLink href={ForgotPasswordLink}>
+                    <ExternalLink
+                        location='login_page'
+                        href={ForgotPasswordLink}
+                    >
                         {formatMessage({id: 'login.forgot', defaultMessage: 'Forgot your password?'})}
                     </ExternalLink>
                 </div>
diff --git a/webapp/channels/src/components/main_menu/learn_about_teams_link.tsx b/webapp/channels/src/components/main_menu/learn_about_teams_link.tsx
index 90dd92d24c..8a02e8bd35 100644
--- a/webapp/channels/src/components/main_menu/learn_about_teams_link.tsx
+++ b/webapp/channels/src/components/main_menu/learn_about_teams_link.tsx
@@ -16,6 +16,7 @@ const LearnAboutTeamsLink = () => {
                 values={{
                     a: (chunks) => (
                         <ExternalLink
+                            location='learn_about_teams'
                             href='https://mattermost.com/pl/mattermost-academy-team-training'
                         >
                             <i className='icon icon-lightbulb-outline'/>
diff --git a/webapp/channels/src/components/preparing_workspace/organization_status.tsx b/webapp/channels/src/components/preparing_workspace/organization_status.tsx
index b721589c8b..45c91b960b 100644
--- a/webapp/channels/src/components/preparing_workspace/organization_status.tsx
+++ b/webapp/channels/src/components/preparing_workspace/organization_status.tsx
@@ -55,9 +55,8 @@ const OrganizationStatus = (props: {error: (UrlValidationCheck['error'] | typeof
                     values={{
                         a: (chunks: React.ReactNode | React.ReactNodeArray) => (
                             <ExternalLink
+                                location='organization_status'
                                 href={DocLinks.ABOUT_TEAMS}
-                                target='_blank'
-                                rel='noreferrer'
                             >
                                 {chunks}
                             </ExternalLink>
diff --git a/webapp/channels/src/components/reaction_limit_reached_modal.tsx b/webapp/channels/src/components/reaction_limit_reached_modal.tsx
index 39f8d8802f..8c05c1ddd8 100644
--- a/webapp/channels/src/components/reaction_limit_reached_modal.tsx
+++ b/webapp/channels/src/components/reaction_limit_reached_modal.tsx
@@ -17,6 +17,7 @@ export default function ReactionLimitReachedModal(props: {isAdmin: boolean; onEx
             values={{
                 link: (msg: React.ReactNode) => (
                     <ExternalLink
+                        location='reaction_limit_reached_modal'
                         href='https://mattermost.com/pl/configure-unique-emoji-reaction-limit'
                     >
                         {msg}
diff --git a/webapp/channels/src/components/search_hint/search_hint.tsx b/webapp/channels/src/components/search_hint/search_hint.tsx
index 0376788956..7da322201b 100644
--- a/webapp/channels/src/components/search_hint/search_hint.tsx
+++ b/webapp/channels/src/components/search_hint/search_hint.tsx
@@ -59,6 +59,7 @@ const SearchHint = (props: Props): JSX.Element => {
                             values={{
                                 a: (chunks) => (
                                     <ExternalLink
+                                        location='search_hint'
                                         className='search-hint_learn-search'
                                         href='https://mattermost.com/pl/mattermost-academy-search-training'
                                     >
diff --git a/webapp/channels/src/components/seats_calculator/consequences.tsx b/webapp/channels/src/components/seats_calculator/consequences.tsx
index abcf151160..369c4a96c7 100644
--- a/webapp/channels/src/components/seats_calculator/consequences.tsx
+++ b/webapp/channels/src/components/seats_calculator/consequences.tsx
@@ -86,6 +86,7 @@ export default function Consequences(props: Props) {
                 values={{
                     a: (chunks: React.ReactNode) => (
                         <ExternalLink
+                            location='seats_calculator_consequences'
                             onClick={telemetryHandler}
                             href={props.isCloud ? CloudLinks.BILLING_DOCS : HostedCustomerLinks.BILLING_DOCS}
                         >
diff --git a/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap
index a81cfb5a9f..d545f579ac 100644
--- a/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap
@@ -54,7 +54,8 @@ Object {
             >
               <a
                 class="btn btn-link"
-                href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=&sid="
+                href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=user_settings_notifications&uid=&sid="
+                location="user_settings_notifications"
                 rel="noopener noreferrer"
                 target="_blank"
               >
@@ -312,7 +313,8 @@ Object {
           >
             <a
               class="btn btn-link"
-              href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=&sid="
+              href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=user_settings_notifications&uid=&sid="
+              location="user_settings_notifications"
               rel="noopener noreferrer"
               target="_blank"
             >
@@ -629,7 +631,8 @@ Object {
             >
               <a
                 class="btn btn-link"
-                href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=&sid="
+                href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=user_settings_notifications&uid=&sid="
+                location="user_settings_notifications"
                 rel="noopener noreferrer"
                 target="_blank"
               >
@@ -890,7 +893,8 @@ Object {
           >
             <a
               class="btn btn-link"
-              href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=&sid="
+              href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=user_settings_notifications&uid=&sid="
+              location="user_settings_notifications"
               rel="noopener noreferrer"
               target="_blank"
             >
@@ -1210,7 +1214,8 @@ Object {
             >
               <a
                 class="btn btn-link"
-                href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=&sid="
+                href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=user_settings_notifications&uid=&sid="
+                location="user_settings_notifications"
                 rel="noopener noreferrer"
                 target="_blank"
               >
@@ -1433,7 +1438,8 @@ Object {
           >
             <a
               class="btn btn-link"
-              href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=&uid=&sid="
+              href="https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=user_settings_notifications&uid=&sid="
+              location="user_settings_notifications"
               rel="noopener noreferrer"
               target="_blank"
             >
diff --git a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
index 5806da80a8..74eb42b307 100644
--- a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
+++ b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
@@ -985,6 +985,7 @@ class NotificationsTab extends React.PureComponent<Props, State> {
                                 values={{
                                     a: (chunks: string) => ((
                                         <ExternalLink
+                                            location='user_settings_notifications'
                                             href='https://mattermost.com/pl/about-notifications'
                                             className='btn btn-link'
                                         >