Merge pull request #469 from dolthub/liuliu/fix-routing

App: use Next.js router for commit graph navigation in Electron production build

Author: liuliu-dev

web/build/builder-dmg-config.yaml

@@ -21,12 +21,15 @@ files:
       - node_modules/env-paths
       - node_modules/fast-deep-equal
       - node_modules/fast-uri
+      - node_modules/find-up
       - node_modules/is-obj
       - node_modules/json-schema-traverse
       - node_modules/json-schema-typed
       - node_modules/locate-path
       - node_modules/mimic-fn
       - node_modules/onetime
+      - node_modules/path-exists
+      - node_modules/p-limit
       - node_modules/p-locate
       - node_modules/p-try
       - node_modules/pkg-up
@@ -61,4 +64,4 @@ mac:
   provisioningProfile: build/mac/AppleDevelopment.provisionprofile
   entitlements: build/mac/entitlements.plist
   entitlementsInherit: build/mac/entitlements.inherit.plist
-electronVersion: 31.7.1
+electronVersion: 36.3.2

web/build/builder-linux-config.yaml

@@ -22,12 +22,15 @@ files:
       - node_modules/env-paths
       - node_modules/fast-deep-equal
       - node_modules/fast-uri
+      - node_modules/find-up
       - node_modules/is-obj
       - node_modules/json-schema-traverse
       - node_modules/json-schema-typed
       - node_modules/locate-path
       - node_modules/mimic-fn
       - node_modules/onetime
+      - node_modules/path-exists
+      - node_modules/p-limit
       - node_modules/p-locate
       - node_modules/p-try
       - node_modules/pkg-up

web/build/builder-mas-config.yaml

@@ -21,12 +21,15 @@ files:
       - node_modules/env-paths
       - node_modules/fast-deep-equal
       - node_modules/fast-uri
+      - node_modules/find-up
       - node_modules/is-obj
       - node_modules/json-schema-traverse
       - node_modules/json-schema-typed
       - node_modules/locate-path
       - node_modules/mimic-fn
       - node_modules/onetime
+      - node_modules/path-exists
+      - node_modules/p-limit
       - node_modules/p-locate
       - node_modules/p-try
       - node_modules/pkg-up

web/build/builder-win-config.yaml

@@ -22,12 +22,15 @@ files:
       - node_modules/env-paths
       - node_modules/fast-deep-equal
       - node_modules/fast-uri
+      - node_modules/find-up
       - node_modules/is-obj
       - node_modules/json-schema-traverse
       - node_modules/json-schema-typed
       - node_modules/locate-path
       - node_modules/mimic-fn
       - node_modules/onetime
+      - node_modules/path-exists
+      - node_modules/p-limit
       - node_modules/p-locate
       - node_modules/p-try
       - node_modules/pkg-up

web/package.json

@@ -45,7 +45,7 @@
     "apollo-upload-client": "^17.0.0",
     "chance": "^1.1.11",
     "classnames": "^2.3.2",
-    "commit-graph": "^2.3.9",
+    "commit-graph": "^2.3.12",
     "diff": "^5.1.0",
     "electron-serve": "^1.3.0",
     "electron-store": "^8.2.0",

web/renderer/components/CommitGraph/Inner.tsx

@@ -1,6 +1,7 @@
 import { CommitForHistoryFragment } from "@gen/graphql-types";
 import { BranchHeads } from "@hooks/useCommitListForCommitGraph";
 import { RefParams } from "@lib/params";
+import { useRouter } from "next/router";
 import { CommitGraph as Graph, Diff } from "commit-graph";
 import css from "./index.module.css";
 import { branchPathColors, getCommits } from "./utils";
@@ -15,10 +16,12 @@ type Props = {
 };
 
 export default function Inner(props: Props) {
+  const router = useRouter();
+
   return (
     <div className={css.graphContainer}>
       <Graph.WithInfiniteScroll
-        commits={getCommits(props.commits, props.params)}
+        commits={getCommits(props.commits, props.params, router)}
         branchHeads={props.branchHeads}
         currentBranch={props.params.refName}
         graphStyle={{

…enderer/components/CommitGraph/utils.tsx …renderer/components/CommitGraph/utils.tsweb/renderer/components/CommitGraph/utils.tsx renamed to web/renderer/components/CommitGraph/utils.ts web/renderer/components/CommitGraph/utils.tsx renamed to web/renderer/components/CommitGraph/utils.ts

@@ -2,8 +2,14 @@ import { CommitForHistoryFragment } from "@gen/graphql-types";
 import { RefParams } from "@lib/params";
 import { colors as customColors } from "@lib/tailwind";
 import { commit } from "@lib/urls";
+import { Commit } from "commit-graph";
+import { NextRouter } from "next/router";
 
-export function getCommit(c: CommitForHistoryFragment, params: RefParams) {
+export function getCommit(
+  c: CommitForHistoryFragment,
+  params: RefParams,
+  router: NextRouter,
+): Commit {
   return {
     sha: c.commitId,
     commit: {
@@ -17,15 +23,19 @@ export function getCommit(c: CommitForHistoryFragment, params: RefParams) {
     parents: c.parents.map(p => {
       return { sha: p };
     }),
-    html_url: commit({ ...params, commitId: c.commitId }).asPathname(),
+    onCommitNavigate: () => {
+      const { href, as } = commit({ ...params, commitId: c.commitId });
+      router.push(href, as).catch(console.error);
+    },
   };
 }
 
 export function getCommits(
   commits: CommitForHistoryFragment[],
   params: RefParams,
-) {
-  return commits.map(c => getCommit(c, params));
+  router: NextRouter,
+): Commit[] {
+  return commits.map(c => getCommit(c, params, router));
 }
 
 // colors to choose from for branch paths

web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/CommitLogItem.tsx

@@ -5,6 +5,7 @@ import { getLongDateTimeString } from "@dolthub/web-utils";
 import { CommitForHistoryFragment } from "@gen/graphql-types";
 import { useCommitOverview } from "@hooks/useCommitListForCommitGraph/useCommitOverview";
 import { RefParams } from "@lib/params";
+import { useRouter } from "next/router";
 import cx from "classnames";
 import { DiffSection } from "commit-graph";
 import css from "./index.module.css";
@@ -24,6 +25,7 @@ export default function CommitLogItem(props: Props) {
   const { commit, activeHash, params } = props;
   const { state, setState, err, getDiff, loading, diffRef } =
     useCommitOverview(params);
+  const router = useRouter();
 
   return (
     <li
@@ -96,7 +98,7 @@ export default function CommitLogItem(props: Props) {
       {state.showOverview && (
         <div ref={diffRef}>
           <DiffSection
-            commit={getCommit(commit, params)}
+            commit={getCommit(commit, params, router)}
             diff={state.diffOverview}
             loading={loading}
             forDolt

web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/Uncommitted.tsx

@@ -12,6 +12,7 @@ import { RefParams, RequiredCommitsParams } from "@lib/params";
 import { diff } from "@lib/urls";
 import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
 import cx from "classnames";
+import { useRouter } from "next/router";
 import { DiffSection } from "commit-graph";
 import { useState } from "react";
 import css from "./index.module.css";
@@ -47,7 +48,7 @@ function Item(props: ItemProps) {
       emailAddress: "",
     },
   };
-
+  const router = useRouter();
   return (
     <li
       className={cx(css.item, {
@@ -105,7 +106,7 @@ function Item(props: ItemProps) {
       {state.showOverview && (
         <div ref={diffRef}>
           <DiffSection
-            commit={getCommit(commit, props.params)}
+            commit={getCommit(commit, props.params, router)}
             diff={state.diffOverview}
             loading={loading}
             forDolt

web/yarn.lock

@@ -4914,9 +4914,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-typescript@npm:11.1.6":
-  version: 11.1.6
-  resolution: "@rollup/plugin-typescript@npm:11.1.6"
+"@rollup/plugin-typescript@npm:12.1.2":
+  version: 12.1.2
+  resolution: "@rollup/plugin-typescript@npm:12.1.2"
   dependencies:
     "@rollup/pluginutils": "npm:^5.1.0"
     resolve: "npm:^1.22.1"
@@ -4929,7 +4929,7 @@ __metadata:
       optional: true
     tslib:
       optional: true
-  checksum: 10c0/5347cd73ac28d4cf2401a3e689864a1a0df8f3ae029abd9c38525cbc84bcfa16c3a32a0ac5698dac65ec531ba7cf8332e14f5fc7f8fa501193da23320a134c5c
+  checksum: 10c0/f447e23371bb1815030446ada3f57608bc6665f8aa2cd7343c4aa18021790fa3ba4783146ea576fb650d6ec68876182d0bc789a05b1a9163c09b16c17efdf868
   languageName: node
   linkType: hard
 
@@ -8174,14 +8174,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commit-graph@npm:^2.3.9":
-  version: 2.3.9
-  resolution: "commit-graph@npm:2.3.9"
+"commit-graph@npm:^2.3.12":
+  version: 2.3.12
+  resolution: "commit-graph@npm:2.3.12"
   dependencies:
     "@dolthub/react-components": "npm:^0.2.7"
     "@dolthub/react-hooks": "npm:^0.1.7"
     "@dolthub/web-utils": "npm:^0.1.5"
-    "@rollup/plugin-typescript": "npm:11.1.6"
+    "@rollup/plugin-typescript": "npm:12.1.2"
     classnames: "npm:^2.3.2"
     react: "npm:>=18.0.0"
     react-copy-to-clipboard: "npm:^5.1.0"
@@ -8193,7 +8193,7 @@ __metadata:
   peerDependencies:
     react: ">=18.0.0"
     react-dom: ">=18.0.0"
-  checksum: 10c0/1e737b204ca88e5290f0d2f8b86cbd4145b03a27ce02f4acd52cfa77b09983fafeac32d058cec4901292c135adceabbfc0e324da781c085f50e85764a51dca1e
+  checksum: 10c0/15e713c062131948d8b5d17137f6d1ab60d2bc92afef8c1a9b82865305c0b389d4184cb4a7d38d9cb458474a59c79c238ed3501707570db50c110e36f0f12af9
   languageName: node
   linkType: hard
 
@@ -9226,7 +9226,7 @@ __metadata:
     babel-jest: "npm:^29.7.0"
     chance: "npm:^1.1.11"
     classnames: "npm:^2.3.2"
-    commit-graph: "npm:^2.3.9"
+    commit-graph: "npm:^2.3.12"
     cssnano: "npm:^7.0.7"
     diff: "npm:^5.1.0"
     electron: "npm:^36.3.2"