From bb680ef20ab3bb5932af958229b6f6179087039e Mon Sep 17 00:00:00 2001
From: Oscar Zhou <100548325+oscarzhou-portainer@users.noreply.github.com>
Date: Fri, 12 Jan 2024 08:22:50 +1300
Subject: [PATCH] fix(git): incorrect git commit url for bitbucket [EE-6446]
 (#10855)

---
 .../EnvironmentsDatatable/columns.tsx         | 28 +++++----------
 .../ListView/EdgeStacksDatatable/columns.tsx  | 15 +++-----
 app/react/portainer/gitops/GitCommitLink.tsx  | 35 +++++++++++++++++++
 app/react/portainer/gitops/utils.ts           |  7 ----
 4 files changed, 49 insertions(+), 36 deletions(-)
 create mode 100644 app/react/portainer/gitops/GitCommitLink.tsx

diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
index 9f2eb3bc9..34a48c8a4 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/columns.tsx
+++ b/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
-            href={`${cleanGitRepoUrl(row.original.GitConfigURL)}/commit/${
-              row.original.TargetCommitHash
-            }`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {value}
-          </a>
+          <GitCommitLink
+            baseURL={row.original.GitConfigURL}
+            commitHash={row.original.TargetCommitHash}
+          />
         </div>
       ) : (
         <div>{value}</div>
@@ -238,15 +233,10 @@ function DeployedVersionCell({
       {row.original.TargetCommitHash ? (
         <div>
           {statusIcon}
-          <a
-            href={`${cleanGitRepoUrl(row.original.GitConfigURL)}/commit/${
-              row.original.TargetCommitHash
-            }`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {value}
-          </a>
+          <GitCommitLink
+            baseURL={row.original.GitConfigURL}
+            commitHash={row.original.TargetCommitHash}
+          />
         </div>
       ) : (
         <div>
diff --git a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx b/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx
index cc47860eb..545d7108f 100644
--- a/app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/columns.tsx
+++ b/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
-                  target="_blank"
-                  href={`${cleanGitRepoUrl(item.GitConfig.URL)}/commit/${
-                    item.GitConfig.ConfigHash
-                  }`}
-                  rel="noreferrer"
-                >
-                  {item.GitConfig.ConfigHash.slice(0, 7)}
-                </a>
+                <GitCommitLink
+                  baseURL={item.GitConfig.URL}
+                  commitHash={item.GitConfig.ConfigHash}
+                />
               </div>
             );
           }
diff --git a/app/react/portainer/gitops/GitCommitLink.tsx b/app/react/portainer/gitops/GitCommitLink.tsx
new file mode 100644
index 000000000..a1dfc722f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/react/portainer/gitops/utils.ts b/app/react/portainer/gitops/utils.ts
index 79f6a1eff..654dd1755 100644
--- a/app/react/portainer/gitops/utils.ts
+++ b/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
-}