diff --git a/webui/src/lib/components/repository/commits.jsx b/webui/src/lib/components/repository/commits.jsx
new file mode 100644
index 00000000000..71a3b241b63
--- /dev/null
+++ b/webui/src/lib/components/repository/commits.jsx
@@ -0,0 +1,158 @@
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import {ClipboardButton, LinkButton} from "../controls";
+import {BrowserIcon, LinkIcon, PackageIcon, PlayIcon} from "@primer/octicons-react";
+import Table from "react-bootstrap/Table";
+import {MetadataRow, MetadataUIButton} from "../../../pages/repositories/repository/commits/commit/metadata";
+import {Link} from "../nav";
+import dayjs from "dayjs";
+import Card from "react-bootstrap/Card";
+import React from "react";
+
+
+const CommitActions = ({ repo, commit }) => {
+
+ const buttonVariant = "outline-dark";
+
+ return (
+
+
+
+
+
+
+
+
+
+ }/>
+ }/>
+
+
+ );
+};
+
+const getKeysOrNull = (metadata) => {
+ if (!metadata) return null;
+ const keys = Object.getOwnPropertyNames(metadata);
+ if (keys.length === 0) return null;
+ return keys;
+};
+
+const CommitMetadataTable = ({ commit }) => {
+ const keys = getKeysOrNull(commit.metadata);
+ if (!keys) return null;
+
+ return (
+ <>
+
+
+
+ Metadata Key |
+ Value |
+
+
+
+ {keys.map(key =>
+ )}
+
+
+ >
+ );
+};
+
+const CommitMetadataUIButtons = ({ commit }) => {
+ const keys = getKeysOrNull(commit.metadata);
+ if (!keys) return null;
+
+ return (
+ <>{
+ keys.map((key) => )
+ }>
+ );
+};
+
+const CommitLink = ({ repoId, commitId }) => {
+ return (
+ <>
+
+ {commitId}
+
+
+ >
+ );
+}
+
+const CommitInfo = ({ repo, commit }) => {
+ return (
+
+
+
+ ID |
+
+
+ |
+
+
+ Committer |
+ {commit.committer} |
+
+
+ Creation Date |
+
+ {dayjs.unix(commit.creation_date).format("MM/DD/YYYY HH:mm:ss")} ({dayjs.unix(commit.creation_date).fromNow()})
+ |
+
+ {(commit.parents) ? (
+
+
+ Parents |
+
+ {commit.parents.map(cid => (
+
+ ))}
+ |
+
+ ) : <>>}
+
+
+ );
+};
+
+export const CommitInfoCard = ({ repo, commit, bare = false }) => {
+ const content = (
+ <>
+
+
+
{commit.message}
+
+
+
+
+
+
+
+ >
+ );
+ if (bare) return content;
+ return (
+
+
+ {content}
+
+
+ )
+}
diff --git a/webui/src/lib/components/repository/tree.jsx b/webui/src/lib/components/repository/tree.jsx
index 22834f7aa30..73c6ed7df90 100644
--- a/webui/src/lib/components/repository/tree.jsx
+++ b/webui/src/lib/components/repository/tree.jsx
@@ -35,6 +35,7 @@ import Modal from "react-bootstrap/Modal";
import { useAPI } from "../../hooks/api";
import noop from "lodash/noop";
import {FaDownload} from "react-icons/fa";
+import {CommitInfoCard} from "./commits";
export const humanSize = (bytes) => {
if (!bytes) return "0.0 B";
@@ -307,69 +308,7 @@ const OriginModal = ({ show, onHide, entry, repo, reference }) => {
}
if (!loading && !error && commit) {
content = (
- <>
-
-
-
-
- Path
- |
-
- {entry.path}
- |
-
-
-
- Commit ID
- |
-
-
- {commit.id}
-
- |
-
-
-
- Commit Message
- |
- {commit.message} |
-
-
-
- Committed By
- |
- {commit.committer} |
-
-
-
- Created At
- |
-
- <>
- {dayjs
- .unix(commit.creation_date)
- .format("MM/DD/YYYY HH:mm:ss")}
- >{" "}
- ({dayjs.unix(commit.creation_date).fromNow()})
- |
-
-
-
- Metadata
- |
-
-
- |
-
-
-
- >
+
);
}
diff --git a/webui/src/pages/repositories/repository/commits/commit/index.jsx b/webui/src/pages/repositories/repository/commits/commit/index.jsx
index 6351d5b7533..832556d2c3c 100644
--- a/webui/src/pages/repositories/repository/commits/commit/index.jsx
+++ b/webui/src/pages/repositories/repository/commits/commit/index.jsx
@@ -1,20 +1,16 @@
import React, {useState} from "react";
import {RepositoryPageLayout} from "../../../../../lib/components/repository/layout";
-import {ClipboardButton, AlertError, LinkButton, Loading} from "../../../../../lib/components/controls";
+import {AlertError, Loading} from "../../../../../lib/components/controls";
import {useRefs} from "../../../../../lib/hooks/repo";
-import Card from "react-bootstrap/Card";
import {useAPI, useAPIWithPagination} from "../../../../../lib/hooks/api";
import {commits, refs} from "../../../../../lib/api";
-import dayjs from "dayjs";
-import Table from "react-bootstrap/Table";
import {ChangesTreeContainer, defaultGetMoreChanges} from "../../../../../lib/components/repository/changes";
-import ButtonGroup from "react-bootstrap/ButtonGroup";
-import {BrowserIcon, LinkIcon, PackageIcon, PlayIcon} from "@primer/octicons-react";
-import {Link} from "../../../../../lib/components/nav";
import {useRouter} from "../../../../../lib/hooks/router";
import {URINavigator} from "../../../../../lib/components/repository/tree";
import {appendMoreResults} from "../../changes";
-import {MetadataRow, MetadataUIButton} from "./metadata";
+import {CommitInfoCard} from "../../../../../lib/components/repository/commits";
+
+
const ChangeList = ({ repo, commit, prefix, onNavigate }) => {
const [actionError, setActionError] = useState(null);
@@ -62,123 +58,6 @@ const ChangeList = ({ repo, commit, prefix, onNavigate }) => {
)
};
-const CommitActions = ({ repo, commit }) => {
-
- const buttonVariant = "outline-dark";
-
- return (
-
-
-
-
-
-
-
-
-
- }/>
- }/>
-
-
- );
-};
-
-const getKeysOrNull = (metadata) => {
- if (!metadata) return null;
- const keys = Object.getOwnPropertyNames(metadata);
- if (keys.length === 0) return null;
- return keys;
-};
-
-const CommitMetadataTable = ({ commit }) => {
- const keys = getKeysOrNull(commit.metadata);
- if (!keys) return null;
-
- return (
- <>
-
-
-
- Metadata Key |
- Value |
-
-
-
- {keys.map(key =>
- )}
-
-
- >
- );
-};
-
-const CommitMetadataUIButtons = ({ commit }) => {
- const keys = getKeysOrNull(commit.metadata);
- if (!keys) return null;
-
- return (
- <>{
- keys.map((key) => )
- }>
- );
-};
-
-const CommitLink = ({ repoId, commitId }) => {
- return (
- <>
-
- {commitId}
-
-
- >
- );
-}
-
-const CommitInfo = ({ repo, commit }) => {
- return (
-
-
-
- ID |
-
-
- |
-
-
- Committer |
- {commit.committer} |
-
-
- Creation Date |
-
- {dayjs.unix(commit.creation_date).format("MM/DD/YYYY HH:mm:ss")} ({dayjs.unix(commit.creation_date).fromNow()})
- |
-
- {(commit.parents) ? (
-
-
- Parents |
-
- {commit.parents.map(cid => (
-
- ))}
- |
-
- ) : <>>}
-
-
- );
-};
-
const CommitView = ({ repo, commitId, onNavigate, view, prefix }) => {
// pull commit itself
const {response, loading, error} = useAPI(async () => {
@@ -192,25 +71,7 @@ const CommitView = ({ repo, commitId, onNavigate, view, prefix }) => {
return (
-
-
-
-
- {commit.message}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+