From a2f0ed4379dd225628026c437e92d32194a90415 Mon Sep 17 00:00:00 2001
From: Oz Katz <oz.katz@treeverse.io>
Date: Thu, 14 Sep 2023 15:47:54 +0300
Subject: [PATCH] UI: Commit info consistent across screens (#6593)

---
 .../src/lib/components/repository/commits.jsx | 158 ++++++++++++++++++
 webui/src/lib/components/repository/tree.jsx  |  65 +------
 .../repository/commits/commit/index.jsx       | 149 +----------------
 3 files changed, 165 insertions(+), 207 deletions(-)
 create mode 100644 webui/src/lib/components/repository/commits.jsx

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 (
+    <div>
+      <ButtonGroup className="commit-actions">
+        <LinkButton
+          buttonVariant="outline-dark"
+          href={{pathname: '/repositories/:repoId/objects', params: {repoId: repo.id}, query: {ref: commit.id}}}
+          tooltip="Browse commit objects">
+          <BrowserIcon/>
+        </LinkButton>
+        <LinkButton
+          buttonVariant={buttonVariant}
+          href={{pathname: '/repositories/:repoId/actions', params: {repoId: repo.id}, query: {commit: commit.id}}}
+          tooltip="View Commit Action runs">
+          <PlayIcon/>
+        </LinkButton>
+        <ClipboardButton variant={buttonVariant} text={commit.id} tooltip="Copy ID to clipboard"/>
+        <ClipboardButton variant={buttonVariant} text={`lakefs://${repo.id}/${commit.id}`} tooltip="Copy URI to clipboard" icon={<LinkIcon/>}/>
+        <ClipboardButton variant={buttonVariant} text={`s3://${repo.id}/${commit.id}`} tooltip="Copy S3 URI to clipboard" icon={<PackageIcon/>}/>
+      </ButtonGroup>
+    </div>
+  );
+};
+
+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 (
+    <>
+      <Table>
+        <thead>
+        <tr>
+          <th>Metadata Key</th>
+          <th>Value</th>
+        </tr>
+        </thead>
+        <tbody>
+        {keys.map(key =>
+          <MetadataRow metadata_key={key} metadata_value={commit.metadata[key]}/>)}
+        </tbody>
+      </Table>
+    </>
+  );
+};
+
+const CommitMetadataUIButtons = ({ commit }) => {
+  const keys = getKeysOrNull(commit.metadata);
+  if (!keys) return null;
+
+  return (
+    <>{
+      keys.map((key) => <MetadataUIButton metadata_key={key} metadata_value={commit.metadata[key]}/>)
+    }</>
+  );
+};
+
+const CommitLink = ({ repoId, commitId }) => {
+  return (
+    <>
+      <Link href={{
+        pathname: '/repositories/:repoId/commits/:commitId',
+        params: {repoId, commitId}
+      }}>
+        <code>{commitId}</code>
+      </Link>
+      <br/>
+    </>
+  );
+}
+
+const CommitInfo = ({ repo, commit }) => {
+  return (
+    <Table size="sm" borderless hover>
+      <tbody>
+      <tr>
+        <td><strong>ID</strong></td>
+        <td>
+          <CommitLink repoId={repo.id} commitId={commit.id}/>
+        </td>
+      </tr>
+      <tr>
+        <td><strong>Committer</strong></td>
+        <td>{commit.committer}</td>
+      </tr>
+      <tr>
+        <td><strong>Creation Date</strong></td>
+        <td>
+          {dayjs.unix(commit.creation_date).format("MM/DD/YYYY HH:mm:ss")} ({dayjs.unix(commit.creation_date).fromNow()})
+        </td>
+      </tr>
+      {(commit.parents) ? (
+        <tr>
+          <td>
+            <strong>Parents</strong></td>
+          <td>
+            {commit.parents.map(cid => (
+              <CommitLink key={cid} repoId={repo.id} commitId={cid}/>
+            ))}
+          </td>
+        </tr>
+      ) : <></>}
+      </tbody>
+    </Table>
+  );
+};
+
+export const CommitInfoCard = ({ repo, commit, bare = false }) => {
+  const content = (
+    <>
+        <div className="d-flex">
+          <div className="flex-grow-1">
+            <h4>{commit.message}</h4>
+          </div>
+          <div>
+            <CommitActions repo={repo} commit={commit}/>
+          </div>
+        </div>
+
+      <div className="mt-4">
+        <CommitInfo repo={repo} commit={commit}/>
+        <CommitMetadataUIButtons commit={commit}/>
+        <div className="mt-3">
+          <CommitMetadataTable commit={commit}/>
+        </div>
+      </div>
+    </>
+  );
+  if (bare) return content;
+  return (
+    <Card>
+      <Card.Body>
+        {content}
+      </Card.Body>
+    </Card>
+  )
+}
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 = (
-      <>
-        <Table hover responsive>
-          <tbody>
-            <tr>
-              <td>
-                <strong>Path</strong>
-              </td>
-              <td>
-                <code>{entry.path}</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <strong>Commit ID</strong>
-              </td>
-              <td>
-                <Link
-                  className="me-2"
-                  href={{
-                    pathname: "/repositories/:repoId/commits/:commitId",
-                    params: { repoId: repo.id, commitId: commit.id },
-                  }}
-                >
-                  <code>{commit.id}</code>
-                </Link>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <strong>Commit Message</strong>
-              </td>
-              <td>{commit.message}</td>
-            </tr>
-            <tr>
-              <td>
-                <strong>Committed By</strong>
-              </td>
-              <td>{commit.committer}</td>
-            </tr>
-            <tr>
-              <td>
-                <strong>Created At</strong>
-              </td>
-              <td>
-                <>
-                  {dayjs
-                    .unix(commit.creation_date)
-                    .format("MM/DD/YYYY HH:mm:ss")}
-                </>{" "}
-                ({dayjs.unix(commit.creation_date).fromNow()})
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <strong>Metadata</strong>
-              </td>
-              <td>
-                <CommitMetadata metadata={commit.metadata} />
-              </td>
-            </tr>
-          </tbody>
-        </Table>
-      </>
+      <CommitInfoCard bare={true} repo={repo} commit={commit}/>
     );
   }
 
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 (
-        <div>
-            <ButtonGroup className="commit-actions">
-                <LinkButton
-                    buttonVariant="outline-dark"
-                    href={{pathname: '/repositories/:repoId/objects', params: {repoId: repo.id}, query: {ref: commit.id}}}
-                    tooltip="Browse commit objects">
-                    <BrowserIcon/>
-                </LinkButton>
-                <LinkButton
-                    buttonVariant={buttonVariant}
-                    href={{pathname: '/repositories/:repoId/actions', params: {repoId: repo.id}, query: {commit: commit.id}}}
-                    tooltip="View Commit Action runs">
-                    <PlayIcon/>
-                </LinkButton>
-                <ClipboardButton variant={buttonVariant} text={commit.id} tooltip="Copy ID to clipboard"/>
-                <ClipboardButton variant={buttonVariant} text={`lakefs://${repo.id}/${commit.id}`} tooltip="Copy URI to clipboard" icon={<LinkIcon/>}/>
-                <ClipboardButton variant={buttonVariant} text={`s3://${repo.id}/${commit.id}`} tooltip="Copy S3 URI to clipboard" icon={<PackageIcon/>}/>
-            </ButtonGroup>
-        </div>
-    );
-};
-
-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 (
-        <>
-        <Table>
-            <thead>
-                <tr>
-                    <th>Metadata Key</th>
-                    <th>Value</th>
-                </tr>
-            </thead>
-            <tbody>
-                {keys.map(key =>
-                    <MetadataRow metadata_key={key} metadata_value={commit.metadata[key]}/>)}
-            </tbody>
-        </Table>
-        </>
-    );
-};
-
-const CommitMetadataUIButtons = ({ commit }) => {
-    const keys = getKeysOrNull(commit.metadata);
-    if (!keys) return null;
-
-    return (
-        <>{
-            keys.map((key) => <MetadataUIButton metadata_key={key} metadata_value={commit.metadata[key]}/>)
-        }</>
-    );
-};
-
-const CommitLink = ({ repoId, commitId }) => {
-    return (
-        <>
-            <Link href={{
-                pathname: '/repositories/:repoId/commits/:commitId',
-                params: {repoId, commitId}
-            }}>
-                <code>{commitId}</code>
-            </Link>
-            <br/>
-        </>
-    );
-}
-
-const CommitInfo = ({ repo, commit }) => {
-    return (
-        <Table size="sm" borderless hover>
-            <tbody>
-            <tr>
-                <td><strong>ID</strong></td>
-                <td>
-                    <CommitLink repoId={repo.id} commitId={commit.id}/>
-                </td>
-            </tr>
-            <tr>
-                <td><strong>Committer</strong></td>
-                <td>{commit.committer}</td>
-            </tr>
-            <tr>
-                <td><strong>Creation Date</strong></td>
-                <td>
-                    {dayjs.unix(commit.creation_date).format("MM/DD/YYYY HH:mm:ss")} ({dayjs.unix(commit.creation_date).fromNow()})
-                </td>
-            </tr>
-            {(commit.parents) ? (
-            <tr>
-                <td>
-                    <strong>Parents</strong></td>
-                <td>
-                    {commit.parents.map(cid => (
-                        <CommitLink key={cid} repoId={repo.id} commitId={cid}/>
-                    ))}
-                </td>
-            </tr>
-            ) : <></>}
-            </tbody>
-        </Table>
-    );
-};
-
 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 (
         <div className="mb-5 mt-3">
-            <Card>
-                <Card.Body>
-                    <div className="clearfix">
-                        <div className="float-start">
-                            <Card.Title>{commit.message}</Card.Title>
-                        </div>
-                        <div className="float-end">
-                            <CommitActions repo={repo} commit={commit}/>
-                        </div>
-                    </div>
-
-                    <div className="mt-4">
-                        <CommitInfo repo={repo} commit={commit}/>
-                        <CommitMetadataUIButtons commit={commit}/>
-                        <CommitMetadataTable commit={commit}/>
-                    </div>
-                </Card.Body>
-            </Card>
-
+            <CommitInfoCard repo={repo} commit={commit}/>
             <div className="mt-4">
                 <ChangeList
                     prefix={prefix}