From 4e09a70a2417db142bfc480748f69e04a4f2efab Mon Sep 17 00:00:00 2001
From: Eric Tuvesson <eric.tuvesson@gmail.com>
Date: Tue, 14 May 2024 14:00:43 +0200
Subject: [PATCH] feat: Version control commit, View on GitHub (#17)

* feat: Version control commit, View on GitHub

* fix: MenuDialog allow undefined menu item

This makes it a lot easier to create conditional menu items
---
 .../popups/MenuDialog/MenuDialog.tsx          |  2 +-
 .../VersionControlPanel.tsx                   | 20 +---------------
 .../components/HistoryCommitDiff.tsx          | 11 ++++++++-
 .../panels/VersionControlPanel/github.ts      | 23 +++++++++++++++++++
 4 files changed, 35 insertions(+), 21 deletions(-)
 create mode 100644 packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/github.ts

diff --git a/packages/noodl-core-ui/src/components/popups/MenuDialog/MenuDialog.tsx b/packages/noodl-core-ui/src/components/popups/MenuDialog/MenuDialog.tsx
index 5bdac6a..899cfa6 100644
--- a/packages/noodl-core-ui/src/components/popups/MenuDialog/MenuDialog.tsx
+++ b/packages/noodl-core-ui/src/components/popups/MenuDialog/MenuDialog.tsx
@@ -72,7 +72,7 @@ export function MenuDialog({
       hasArrow
     >
       <div className={classNames(css['Root'], css[width])} style={{ maxHeight: UNSAFE_maxHeight }}>
-        {items.map((item, i) => {
+        {items.filter(Boolean).map((item, i) => {
           if (item === 'divider') return <div className={css['Divider']} key={i} />;
           if (item?.isHidden) return null;
 
diff --git a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx
index d903989..a5a5854 100644
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx
@@ -33,6 +33,7 @@ import { History } from './components/History';
 import { LocalChanges } from './components/LocalChanges';
 import { MergeConflicts } from './components/MergeConflicts';
 import { useVersionControlContext, VersionControlProvider } from './context';
+import { convertGitRemoteUrlToRepoUrl } from './github';
 
 enum ViewState {
   Default,
@@ -40,25 +41,6 @@ enum ViewState {
   BranchMerge
 }
 
-function convertGitRemoteUrlToRepoUrl(gitRemoteUrl) {
-  // Remove the .git extension if present
-  gitRemoteUrl = gitRemoteUrl.replace(/\.git$/, '');
-
-  // Extract the repository name and owner from the URL
-  const regex = /^(?:https?:\/\/)?github\.com\/([^/]+)\/([^/]+)$/;
-  const match = gitRemoteUrl.match(regex);
-
-  if (match) {
-    const owner = match[1];
-    const repo = match[2];
-    // Construct the GitHub repository URL
-    const repoUrl = `https://github.com/${owner}/${repo}`;
-    return repoUrl;
-  } else {
-    throw new Error('Invalid GitHub Git remote URL');
-  }
-}
-
 function BaseVersionControlPanel() {
   const { git, activeTabId, setActiveTabId, localChangesCount, branchStatus, fetch, updateLocalDiff } =
     useVersionControlContext();
diff --git a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/HistoryCommitDiff.tsx b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/HistoryCommitDiff.tsx
index 08dc34f..d540d62 100644
--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/HistoryCommitDiff.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/components/HistoryCommitDiff.tsx
@@ -13,13 +13,15 @@ import { EventDispatcher } from '../../../../../../shared/utils/EventDispatcher'
 import { ToastLayer } from '../../../ToastLayer/ToastLayer';
 import { useVersionControlContext } from '../context';
 import { CommitChangesDiff } from './CommitChangesDiff';
+import { convertGitRemoteUrlToCommitUrl } from '../github';
+import { platform } from '@noodl/platform';
 
 export interface HistoryCommitDiffProps {
   commit: Commit;
 }
 
 export function HistoryCommitDiff({ commit }: HistoryCommitDiffProps) {
-  const { repositoryPath, localChangesCount, fetch } = useVersionControlContext();
+  const { git, repositoryPath, localChangesCount, fetch } = useVersionControlContext();
 
   const [HaveLocalChangesDialog, showHaveLocalChangesDialog] = useConfirmationDialog({
     isCancelButtonHidden: true,
@@ -71,6 +73,13 @@ export function HistoryCommitDiff({ commit }: HistoryCommitDiffProps) {
                 copyValueToClipboard({
                   value: commit.sha
                 })
+            },
+            git.Provider === 'github' && {
+              label: 'View on GitHub',
+              onClick: () => {
+                const commitLink = convertGitRemoteUrlToCommitUrl(git.OriginUrl, commit.sha);
+                platform.openExternal(commitLink);
+              }
             }
           ]}
         />
diff --git a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/github.ts b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/github.ts
new file mode 100644
index 0000000..429e64f
--- /dev/null
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/github.ts
@@ -0,0 +1,23 @@
+export function convertGitRemoteUrlToRepoUrl(gitRemoteUrl: string): string {
+  // Remove the .git extension if present
+  gitRemoteUrl = gitRemoteUrl.replace(/\.git$/, '');
+
+  // Extract the repository name and owner from the URL
+  const regex = /^(?:https?:\/\/)?github\.com\/([^/]+)\/([^/]+)$/;
+  const match = gitRemoteUrl.match(regex);
+
+  if (match) {
+    const owner = match[1];
+    const repo = match[2];
+    // Construct the GitHub repository URL
+    const repoUrl = `https://github.com/${owner}/${repo}`;
+    return repoUrl;
+  } else {
+    throw new Error('Invalid GitHub Git remote URL');
+  }
+}
+
+export function convertGitRemoteUrlToCommitUrl(gitRemoteUrl: string, commitSha: string): string {
+  const githubLink = convertGitRemoteUrlToRepoUrl(gitRemoteUrl);
+  return `${githubLink}/commit/${commitSha}`;
+}