feat: Version control commit, View on GitHub (noodlapp#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

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;
 

packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx

@@ -33,32 +33,14 @@ 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,
   Branches,
   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();

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);
+              }
             }
           ]}
         />

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}`;
+}