fix(git): incorrect git commit url for bitbucket [EE-6446] (#10855)

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx

@@ -9,7 +9,7 @@ import UpToDate from '@/assets/ico/icon_up-to-date.svg?c';
 import { isoDateFromTimestamp } from '@/portainer/filters/filters';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { getDashboardRoute } from '@/react/portainer/environments/utils';
-import { cleanGitRepoUrl } from '@/react/portainer/gitops/utils';
+import { GitCommitLink } from '@/react/portainer/gitops/GitCommitLink';
 
 import { Button } from '@@/buttons';
 import { Icon } from '@@/Icon';
@@ -187,15 +187,10 @@ function TargetVersionCell({
     <>
       {row.original.TargetCommitHash ? (
         <div>
-          <a
+          <GitCommitLink
-            href={`${cleanGitRepoUrl(row.original.GitConfigURL)}/commit/${
+            baseURL={row.original.GitConfigURL}
-              row.original.TargetCommitHash
+            commitHash={row.original.TargetCommitHash}
-            }`}
+          />
-            target="_blank"
-            rel="noreferrer"
-          >
-            {value}
-          </a>
         </div>
       ) : (
         <div>{value}</div>
@@ -238,15 +233,10 @@ function DeployedVersionCell({
       {row.original.TargetCommitHash ? (
         <div>
           {statusIcon}
-          <a
+          <GitCommitLink
-            href={`${cleanGitRepoUrl(row.original.GitConfigURL)}/commit/${
+            baseURL={row.original.GitConfigURL}
-              row.original.TargetCommitHash
+            commitHash={row.original.TargetCommitHash}
-            }`}
+          />
-            target="_blank"
-            rel="noreferrer"
-          >
-            {value}
-          </a>
         </div>
       ) : (
         <div>

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx

@@ -3,7 +3,7 @@ import _ from 'lodash';
 
 import { isoDateFromTimestamp } from '@/portainer/filters/filters';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
-import { cleanGitRepoUrl } from '@/react/portainer/gitops/utils';
+import { GitCommitLink } from '@/react/portainer/gitops/GitCommitLink';
 
 import { buildNameColumn } from '@@/datatables/buildNameColumn';
 import { Link } from '@@/Link';
@@ -145,15 +145,10 @@ export const columns = _.compact([
           if (item.GitConfig) {
             return (
               <div className="text-center">
-                <a
+                <GitCommitLink
-                  target="_blank"
+                  baseURL={item.GitConfig.URL}
-                  href={`${cleanGitRepoUrl(item.GitConfig.URL)}/commit/${
+                  commitHash={item.GitConfig.ConfigHash}
-                    item.GitConfig.ConfigHash
+                />
-                  }`}
-                  rel="noreferrer"
-                >
-                  {item.GitConfig.ConfigHash.slice(0, 7)}
-                </a>
               </div>
             );
           }

app/react/portainer/gitops/GitCommitLink.tsx

@@ -0,0 +1,35 @@
+function cleanGitRepoUrl(url: string) {
+  return url
+    .trim() // remove leading and trailing whitespace
+    .replace(/\/$/, '') // if there's a trailing slash, remove it
+    .replace(/\.git$/, ''); // if there's a trailing .git extension, remove it
+}
+
+function getGitRepoCommitUrl(url: string, hash: string) {
+  const cleanedUrl = cleanGitRepoUrl(url);
+
+  if (cleanedUrl.startsWith('https://bitbucket.org')) {
+    return `${cleanedUrl}/commits/${hash}`;
+  }
+
+  // this is a fallback for any other git repo
+  // the tested repo includes gitlab, github, and azure devops
+  return `${cleanedUrl}/commit/${hash}`;
+}
+
+interface Props {
+  baseURL: string;
+  commitHash: string;
+}
+
+export function GitCommitLink({ baseURL, commitHash }: Props) {
+  return (
+    <a
+      href={getGitRepoCommitUrl(baseURL, commitHash)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {commitHash.slice(0, 7)}
+    </a>
+  );
+}

app/react/portainer/gitops/utils.ts

@@ -32,10 +32,3 @@ export function confirmEnableTLSVerify() {
       'Enabling the verification of TLS certificates without ensuring the correct configuration of your Certificate Authority (CA) for self-signed certificates can result in deployment failures.',
   });
 }
-
-export function cleanGitRepoUrl(url: string) {
-  return url
-    .trim() // remove leading and trailing whitespace
-    .replace(/\/$/, '') // if there's a trailing slash, remove it
-    .replace(/\.git$/, ''); // if there's a trailing .git extension, remove it
-}