[DC] Use href and target instead of onClick for opening URLs (#7923)

Co-authored-by: Yoona Oh <[email protected]>

Author: yoonaoh

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>

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>

client-react/src/pages/app/deployment-center/code/DeploymentCenterVSTSCodeLogs.tsx

@@ -164,10 +164,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>

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>

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>