From 6da44b0571f6ec3a5cfd91c90d59148ad6a546ed Mon Sep 17 00:00:00 2001
From: Yoona Oh <jyoonaoh@gmail.com>
Date: Mon, 2 Dec 2024 11:32:18 -0800
Subject: [PATCH] [DC] Use href and target instead of onClick for opening URLs
 (#7923) (#7924)

Co-authored-by: Yoona Oh <yoonaoh@microsoft.com>
---
 .../DeploymentCenterBitbucketConfiguredView.tsx              | 2 +-
 .../code/DeploymentCenterGitHubActionsCodeLogs.tsx           | 2 +-
 .../deployment-center/code/DeploymentCenterVSTSCodeLogs.tsx  | 5 +----
 .../DeploymentCenterVstsBuildConfiguredView.tsx              | 5 +++--
 .../DeploymentCenterExternalConfiguredView.tsx               | 2 +-
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/client-react/src/pages/app/deployment-center/bitbucket-provider/DeploymentCenterBitbucketConfiguredView.tsx b/client-react/src/pages/app/deployment-center/bitbucket-provider/DeploymentCenterBitbucketConfiguredView.tsx
index 3116aa67d3..5e92ee7d63 100644
--- a/client-react/src/pages/app/deployment-center/bitbucket-provider/DeploymentCenterBitbucketConfiguredView.tsx
+++ b/client-react/src/pages/app/deployment-center/bitbucket-provider/DeploymentCenterBitbucketConfiguredView.tsx
@@ -152,7 +152,7 @@ const DeploymentCenterBitbucketConfiguredView: React.FC<DeploymentCenterFieldPro
   const getBranchLink = () => {
     if (!isBranchInfoMissing) {
       return (
-        <Link key="deployment-center-branch-link" onClick={() => window.open(repoUrl, '_blank')} aria-label={`${branch}`}>
+        <Link key="deployment-center-branch-link" href={repoUrl} target="_blank" aria-label={`${branch}`}>
           {`${branch} `}
           <Icon id={`branch-button`} iconName={'NavigateExternalInline'} />
         </Link>
diff --git a/client-react/src/pages/app/deployment-center/code/DeploymentCenterGitHubActionsCodeLogs.tsx b/client-react/src/pages/app/deployment-center/code/DeploymentCenterGitHubActionsCodeLogs.tsx
index 5b172df5ca..906eb03ba1 100644
--- a/client-react/src/pages/app/deployment-center/code/DeploymentCenterGitHubActionsCodeLogs.tsx
+++ b/client-react/src/pages/app/deployment-center/code/DeploymentCenterGitHubActionsCodeLogs.tsx
@@ -318,7 +318,7 @@ const DeploymentCenterGitHubActionsCodeLogs: React.FC<DeploymentCenterCodeLogsPr
         message: run.head_commit.message,
         commit: run.head_commit.id.substr(0, 7),
         logSource: (
-          <Link key="github-actions-logs-link" onClick={() => window.open(run.html_url, '_blank')}>
+          <Link key="github-actions-logs-link" href={run.html_url} target="_blank">
             {t('deploymentCenterBuildDeployLogSource')}
             <Icon id={`ga-logs`} iconName={'NavigateExternalInline'} />
           </Link>
diff --git a/client-react/src/pages/app/deployment-center/code/DeploymentCenterVSTSCodeLogs.tsx b/client-react/src/pages/app/deployment-center/code/DeploymentCenterVSTSCodeLogs.tsx
index 677c919e55..1314bef5d5 100644
--- a/client-react/src/pages/app/deployment-center/code/DeploymentCenterVSTSCodeLogs.tsx
+++ b/client-react/src/pages/app/deployment-center/code/DeploymentCenterVSTSCodeLogs.tsx
@@ -163,10 +163,7 @@ const DeploymentCenterVSTSCodeLogs: React.FC<DeploymentCenterCodeLogsProps> = pr
         {urlInfo.map(info => {
           return (
             <>
-              <Link
-                className={deploymentCenterVstsCodeLogsLinkStyle}
-                onClick={() => window.open(info.url, '_blank')}
-                aria-label={info.urlText}>
+              <Link className={deploymentCenterVstsCodeLogsLinkStyle} href={info.url} target="_blank" aria-label={info.urlText}>
                 {info.urlIcon && <Icon iconName={info.urlIcon} />}
                 {info.urlText}
               </Link>
diff --git a/client-react/src/pages/app/deployment-center/devops-provider/DeploymentCenterVstsBuildConfiguredView.tsx b/client-react/src/pages/app/deployment-center/devops-provider/DeploymentCenterVstsBuildConfiguredView.tsx
index 953efb2891..4a2a555942 100644
--- a/client-react/src/pages/app/deployment-center/devops-provider/DeploymentCenterVstsBuildConfiguredView.tsx
+++ b/client-react/src/pages/app/deployment-center/devops-provider/DeploymentCenterVstsBuildConfiguredView.tsx
@@ -94,7 +94,8 @@ const DeploymentCenterVstsBuildConfiguredView: React.FC<DeploymentCenterFieldPro
       return (
         <Link
           key="deployment-center-branch-link"
-          onClick={() => window.open(`https://dev.azure.com/${vstsAccountName}/${project}`, '_blank')}
+          href={`https://dev.azure.com/${vstsAccountName}/${project}`}
+          target="_blank"
           aria-label={project}>
           {project}
           <Icon id={`repo-button`} iconName={'NavigateExternalInline'} />
@@ -106,7 +107,7 @@ const DeploymentCenterVstsBuildConfiguredView: React.FC<DeploymentCenterFieldPro
   const getRepoLink = () => {
     if (repoUrl) {
       return (
-        <Link key="deployment-center-branch-link" onClick={() => window.open(repoUrl, '_blank')} aria-label={`${repo}`}>
+        <Link key="deployment-center-branch-link" href={repoUrl} target="_blank" aria-label={`${repo}`}>
           {`${repo} `}
           <Icon id={`repo-button`} iconName={'NavigateExternalInline'} />
         </Link>
diff --git a/client-react/src/pages/app/deployment-center/external-provider/DeploymentCenterExternalConfiguredView.tsx b/client-react/src/pages/app/deployment-center/external-provider/DeploymentCenterExternalConfiguredView.tsx
index 6ebf1c96df..9a964ce17c 100644
--- a/client-react/src/pages/app/deployment-center/external-provider/DeploymentCenterExternalConfiguredView.tsx
+++ b/client-react/src/pages/app/deployment-center/external-provider/DeploymentCenterExternalConfiguredView.tsx
@@ -69,7 +69,7 @@ const DeploymentCenterExternalConfiguredView: React.FC<DeploymentCenterFieldProp
   const getBranchLink = () => {
     if (!isBranchInfoMissing) {
       return (
-        <Link key="deployment-center-branch-link" onClick={() => window.open(repo, '_blank')}>
+        <Link key="deployment-center-branch-link" href={repo} target="_blank">
           {`${branch} `}
           <Icon id={`branch-button`} iconName={'NavigateExternalInline'} />
         </Link>