refactor(repository): make the ui better/more interactive on commits* Improve the way the repository commit summary line is structured/displayed into a quadrant
* Make it possible to toggle between the "trailed" subject and the full subject in previously mentioned island
* Show object/commit body if any present in the RepositoryShowObjectView
* Make the Repository commits log use the previously mentioned island to display interactive summary of each commits
@@ -1,5 +1,5 @@
{
- "_generatedAtUnix": 1664142366214,
+ "_generatedAtUnix": 1664145470090,
"_hashAlgorithm": "sha1",
"_version": 2,
"islands": {
@@ -16,7 +16,7 @@
"pathSourceMap": "./public/.islands/RepositoriesList.bundle.js.map"
},
"RepositoryCommitSummaryLine": {
- "hash": "e248dcfd52a6086ffa54f7db222229291c5a227a",
+ "hash": "254e8017757f6bc3d383f423757ce10238cbfcd4",
"pathSource": "./app/islands/RepositoryCommitSummaryLine.tsx",
"pathBundle": "./public/.islands/RepositoryCommitSummaryLine.bundle.js",
"pathSourceMap": "./public/.islands/RepositoryCommitSummaryLine.bundle.js.map"
@@ -72,7 +72,7 @@
"pathSource": "./app/views/repository/RepositoryBrowserView.tsx"
},
"RepositoryCommitsLogView": {
- "hash": "edb26387e0cab7e58978c25599ab857b9ece0d6d",
+ "hash": "5cabbdc5171a99940b0554d20ebf8a345d89e8f0",
"pathSource": "./app/views/repository/RepositoryCommitsLogView.tsx"
},
"RepositoryCompareView": {
@@ -92,7 +92,7 @@
"pathSource": "./app/views/repository/RepositoryExploreView.tsx"
},
"RepositoryShowObjectView": {
- "hash": "19144b3c408ae1f0dfa04c72f6737ffaacb6e8cb",
+ "hash": "0daf75be0c69c101ec48c1d3bfe7b02b47728edc",
"pathSource": "./app/views/repository/RepositoryShowObjectView.tsx"
},
"UserDashboardView": {
@@ -1,10 +1,10 @@
// 1st-party
import type { ReactIsland } from "@ethicdevs/react-monolith";
// 3rd-party
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
// app
import type { RepositoryObject } from "../types";
-import { Grid } from "../components";
+import { Grid } from "../components/Grid";
export interface RepositoryCommitSummaryLineProps {
orgSlug: string;
@@ -12,30 +12,66 @@ export interface RepositoryCommitSummaryLineProps {
commit: RepositoryObject;
}
+const MAX_COMMIT_LINE_LENGTH = 60;
+const TRAILING_CHAR = " ...";
+const TRAILING_CHAR_LENGTH = TRAILING_CHAR.length;
+
const RepositoryCommitSummaryLine: ReactIsland<RepositoryCommitSummaryLineProps> =
({ orgSlug, repoSlug, commit }) => {
+ const [isFullSubjectShown, setIsFullSubjectShown] =
+ useState<boolean>(false);
+
+ const toggleFullSubjectVisibility = useCallback(
+ (ev: React.MouseEvent<HTMLSpanElement>) => {
+ ev.preventDefault();
+ setIsFullSubjectShown((prevVisibility) => !prevVisibility);
+ },
+ [setIsFullSubjectShown]
+ );
+
+ const isSubjectTooLongForDisplay = useMemo(
+ () => commit.subject.length > MAX_COMMIT_LINE_LENGTH,
+ [commit.subject.length]
+ );
+
+ const subject = useMemo(
+ () =>
+ isSubjectTooLongForDisplay
+ ? `${commit.subject.substring(
+ 0,
+ MAX_COMMIT_LINE_LENGTH - TRAILING_CHAR_LENGTH
+ )}`
+ : commit.subject,
+ [commit.subject]
+ );
+
return (
<Grid.Row gap={8} alignItems={"flex-start"}>
- <strong>{commit.author.name}</strong>
- {" ∙ "}
- <span style={{ flex: 1 }}>
- <a href={`/${orgSlug}/${repoSlug}/show/${commit.commit}`}>
- {commit.subject}
- </a>
- </span>
- {" ∙ "}
- <span>
- <a href={`/${orgSlug}/${repoSlug}/show/${commit.commit}`}>
- {commit.abbreviated_commit}
- </a>
- {commit.abbreviated_parent.trim() != "" ? (
- <a href={`/${orgSlug}/${repoSlug}/show/${commit.parent}`}>
- {` (parent ${commit.abbreviated_parent})`}
+ <Grid.Col fluid>
+ <strong>{commit.author.name}</strong>
+ <span style={{ flex: 1 }}>
+ <a href={`/${orgSlug}/${repoSlug}/show/${commit.commit}`}>
+ {subject}
+ </a>
+ {isSubjectTooLongForDisplay ? (
+ <span onClick={toggleFullSubjectVisibility}>{TRAILING_CHAR}</span>
+ ) : null}
+ </span>
+ {isFullSubjectShown ? <code>{commit.subject}</code> : null}
+ </Grid.Col>
+ <Grid.Col flex={"0 0 205px"} alignItems={"flex-end"}>
+ <span>
+ <a href={`/${orgSlug}/${repoSlug}/show/${commit.commit}`}>
+ {commit.abbreviated_commit}
</a>
- ) : null}
- </span>
- {" ∙ "}
- <span>{new Date(commit.author.date).toLocaleDateString()}</span>
+ {commit.abbreviated_parent.trim() != "" ? (
+ <a href={`/${orgSlug}/${repoSlug}/show/${commit.parent}`}>
+ {` (parent ${commit.abbreviated_parent})`}
+ </a>
+ ) : null}
+ </span>
+ <span>{new Date(commit.author.date).toLocaleString()}</span>
+ </Grid.Col>
</Grid.Row>
);
};
@@ -7,6 +7,8 @@ import type { Organization, Repository } from "@prisma/client";
// app
import type { CommonProps, RepositoryLog } from "../../types";
import { Card, Layout, PageWrapper } from "../../components";
+// app islands
+import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
export interface RepositoryCommitsLogViewProps extends CommonProps {
history: RepositoryLog[];
@@ -37,25 +39,19 @@ const RepositoryCommitsLogView: ReactView<RepositoryCommitsLogViewProps> = ({
style={{ width: "100%", marginTop: 32 }}
themeScheme={commonProps.themeScheme}
>
- {history.map((log) => (
- <a
- key={log.tree}
- href={`/${parentOrg.slug}/${repo.slug}/show/${log.commit}`}
- style={{ marginTop: 8 }}
+ {history.map((commit, idx) => (
+ <Card
+ key={commit.commit}
+ data-islandid={`${RepositoryCommitSummaryLine.name}$$${idx}`}
+ style={{ width: "100%" }}
+ themeScheme={commonProps.themeScheme}
>
- <strong>{log.author.name}</strong>
- {" ∙ "}
- <span>{log.subject}</span>
- {" - "}
- <span>
- {log.abbreviated_commit}
- {log.abbreviated_parent.trim() != ""
- ? ` ∙ parent ${log.abbreviated_parent}`
- : ""}
- </span>
- {" ∙ "}
- <span>{new Date(log.author.date).toUTCString()}</span>
- </a>
+ <RepositoryCommitSummaryLine
+ orgSlug={parentOrg.slug}
+ repoSlug={repo.slug}
+ commit={commit}
+ />
+ </Card>
))}
</Card>
</PageWrapper>
@@ -10,7 +10,7 @@ import type {
RepositoryFileDiff,
RepositoryObject,
} from "../../types";
-import { Card, Layout, PageWrapper } from "../../components";
+import { Card, Code, Layout, PageWrapper } from "../../components";
// app islands
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
import RepositoryFilesDiffsList from "../../islands/RepositoryFilesDiffsList";
@@ -54,6 +54,18 @@ const RepositoryShowObjectView: ReactView<RepositoryShowObjectViewProps> = ({
commit={gitObject}
/>
</Card>
+ {gitObject.body.trim() !== "" && (
+ <Card
+ style={{ width: "100%", marginTop: 32 }}
+ themeScheme={commonProps.themeScheme}
+ >
+ <Code
+ language={"plain"}
+ code={gitObject.body}
+ themeScheme={commonProps.themeScheme}
+ />
+ </Card>
+ )}
{gitObjectDiffs != null && (
<Card
data-islandid={`${RepositoryFilesDiffsList.name}$$0`}