refactor(repository): move common layout hero into RepositoryHero island@@ -1,5 +1,5 @@
{
- "_generatedAtUnix": 1664675896547,
+ "_generatedAtUnix": 1664716323681,
"_hashAlgorithm": "sha1",
"_version": 2,
"islands": {
@@ -45,6 +45,12 @@
"pathBundle": "./public/.islands/RepositoryForkForm.bundle.js",
"pathSourceMap": "./public/.islands/RepositoryForkForm.bundle.js.map"
},
+ "RepositoryHero": {
+ "hash": "8e3ab7bf7a0453764210ea7f352fafc688e8b905",
+ "pathSource": "./app/islands/RepositoryHero.tsx",
+ "pathBundle": "./public/.islands/RepositoryHero.bundle.js",
+ "pathSourceMap": "./public/.islands/RepositoryHero.bundle.js.map"
+ },
"RepositoryInitialSetup": {
"hash": "8ac1ef808e4d5c92290f7f917654f9668e06902e",
"pathSource": "./app/islands/RepositoryInitialSetup.tsx",
@@ -80,15 +86,15 @@
"pathSource": "./app/views/organization/OrganizationDetailsView.tsx"
},
"RepositoryBrowserView": {
- "hash": "b42bed734edd8f943fb1e83377337db8b1c0a259",
+ "hash": "995311aeb46709456b948690bd1a8d57aa39fa30",
"pathSource": "./app/views/repository/RepositoryBrowserView.tsx"
},
"RepositoryCommitsLogView": {
- "hash": "ba3396f939c4aff69f70767499b7d7bdeaf7aa38",
+ "hash": "c65c95399c1f2ace58e861d55c191ab639084106",
"pathSource": "./app/views/repository/RepositoryCommitsLogView.tsx"
},
"RepositoryCompareView": {
- "hash": "08b9f936fe0f6bfbb63b942d3bfb95cbab9a2ab5",
+ "hash": "e000be86a120274c507cca7f7ad5de7e53e6d471",
"pathSource": "./app/views/repository/RepositoryCompareView.tsx"
},
"RepositoryCreateView": {
@@ -96,7 +102,7 @@
"pathSource": "./app/views/repository/RepositoryCreateView.tsx"
},
"RepositoryDetailsView": {
- "hash": "9eef664317bcaa56417224cf1d0b19a9bfe60815",
+ "hash": "6745f4f4482e3cb90a99465e6ec2f6c2e852ba68",
"pathSource": "./app/views/repository/RepositoryDetailsView.tsx"
},
"RepositoryExploreView": {
@@ -104,15 +110,15 @@
"pathSource": "./app/views/repository/RepositoryExploreView.tsx"
},
"RepositoryForkView": {
- "hash": "88a61a5f277217b5b4e29f9d228adec1c9a2fdc7",
+ "hash": "9c254e18e9a1f3f502e4ac71639bc80caff178e5",
"pathSource": "./app/views/repository/RepositoryForkView.tsx"
},
"RepositoryPullRequestsView": {
- "hash": "923b8e0c628959154876eb01cbbe6c615bca1785",
+ "hash": "a98b26a1ff98a1b735f95ddc4749a5cb28e43edf",
"pathSource": "./app/views/repository/RepositoryPullRequestsView.tsx"
},
"RepositoryShowObjectView": {
- "hash": "f0519f6d1037590116eb7bfb7b93d213675ac10d",
+ "hash": "3da754e29eb3a85e1811d2e35aca1c9509ea9d54",
"pathSource": "./app/views/repository/RepositoryShowObjectView.tsx"
},
"UserDashboardView": {
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const IslandWrapper = styled.div`
+ width: 100%;
+`;
@@ -2,6 +2,7 @@ export { Button, ButtonAnchor } from "./Button.styled";
export { Card } from "./Card.styled";
export { Grid } from "./Grid";
export * as Icons from "./icons";
+export { IslandWrapper } from "./IslandWrapper.styled";
export { Layout } from "./Layout";
export { MarkdownToJsx } from "./MarkdownToJsx";
export { PageHeader } from "./PageHeader";
@@ -0,0 +1,94 @@
+// 1st-party
+import type { ReactIsland } from "@ethicdevs/react-monolith";
+// 3rd-party
+import React from "react";
+// generated via script[generate:prisma]
+import type { Organization, Repository } from "@prisma/client";
+// app
+import type { RepositoryForkedFromRepoMeta } from "../types";
+import { Grid } from "../components/Grid";
+
+export interface RepositoryHeroProps {
+ parentOrg: Organization;
+ repo: Repository;
+ forkedFromRepo?: RepositoryForkedFromRepoMeta | null;
+ forksCount?: number;
+ path?: string;
+ separator?: string;
+}
+
+const RepositoryHero: ReactIsland<RepositoryHeroProps> = ({
+ parentOrg,
+ repo,
+ forkedFromRepo = null,
+ forksCount = 0,
+ path = undefined,
+ separator = "∙",
+}) => {
+ return (
+ <Grid.Col fluid>
+ <Grid.Row fluid alignItems={"center"}>
+ <Grid.Col
+ nowrap
+ flex={"1 0 468px"}
+ style={{ marginTop: 8, minWidth: 468 }}
+ >
+ <h1 style={{ margin: 0 }}>
+ <a href={`/${parentOrg.slug}`}>
+ {parentOrg.displayName || parentOrg.slug}
+ </a>
+ {" / "}
+ <a href={`/${parentOrg.slug}/${repo.slug}`}>
+ {repo.displayName || repo.slug}
+ </a>
+ {` ${separator} `}
+ {path == null ? (
+ <span style={{ textTransform: "capitalize" }}>
+ ({repo.visibility.toLowerCase()})
+ </span>
+ ) : (
+ <span>{path}</span>
+ )}
+ </h1>
+ <div style={{ flex: 1 }}>
+ {repo.isFork && forkedFromRepo != null && (
+ <h5 style={{ margin: 0, marginTop: 8 }}>
+ <span>Forked From</span>
+ {" ∙ "}
+ <a href={`/${forkedFromRepo.organization.slug}`}>
+ {forkedFromRepo.organization.displayName ||
+ forkedFromRepo.organization.slug}
+ </a>
+ {" / "}
+ <a
+ href={`/${forkedFromRepo.organization.slug}/${forkedFromRepo.slug}`}
+ >
+ {forkedFromRepo.displayName || forkedFromRepo.slug}
+ </a>
+ </h5>
+ )}
+ </div>
+ <div style={{ marginTop: 16 }}>
+ <div>
+ <a href={`/${parentOrg.slug}/${repo.slug}/pulls`}>
+ Pull Requests
+ </a>
+ </div>
+ </div>
+ </Grid.Col>
+ <Grid.Row nowrap style={{ minWidth: 90, marginTop: 8 }}>
+ <span>{forksCount}</span>
+ <a
+ href={`/${parentOrg.slug}/${repo.slug}/fork`}
+ style={{ marginLeft: 8 }}
+ >
+ Fork it!
+ </a>
+ </Grid.Row>
+ </Grid.Row>
+ </Grid.Col>
+ );
+};
+
+RepositoryHero.displayName = "RepositoryHero";
+export default RepositoryHero;
@@ -1,7 +1,9 @@
// 1st-party
import type { ServiceMethodFactory } from "@ethicdevs/react-monolith";
+// app
+import type { LinguistFileInfos } from "../../types";
// service
-import type { CodeAnalysisServiceDeps, LinguistFileInfos } from "./types";
+import type { CodeAnalysisServiceDeps } from "./types";
const makeGetLinguistFileInfos: ServiceMethodFactory<
CodeAnalysisServiceDeps,
@@ -1,19 +1,11 @@
// 1st-party
import type { ServiceApiContract } from "@ethicdevs/react-monolith";
// app
-import type { LanguageDetectFn, LanguagesMap } from "../../types";
-
-export interface LinguistFileInfos {
- color: string;
- extensions: string[];
- filenames?: string[];
- group?: string;
- language: string;
- languageDisplayName: string;
- languageId: number;
- mimeType: string;
- type: string;
-}
+import type {
+ LanguageDetectFn,
+ LanguagesMap,
+ LinguistFileInfos,
+} from "../../types";
export interface CodeAnalysisServiceAPI extends ServiceApiContract {
getLinguistFileInfos(
@@ -1,14 +1,14 @@
// 1st-party
import type { ServiceMethodFactory } from "@ethicdevs/react-monolith";
// app
-import { RepositoryWithForksAndParentRepo } from "../../types";
+import { RepositoryWithForkedFromRepo } from "../../types";
// service
import type { RepositoryServiceDeps } from "./types";
const makeGetRepository: ServiceMethodFactory<
RepositoryServiceDeps,
[string, string],
- Promise<RepositoryWithForksAndParentRepo | null>
+ Promise<RepositoryWithForkedFromRepo | null>
> = ({ request }) => {
return async (orgSlug, repoSlug) => {
const parentOrg = await request.prisma.organization.findUnique({
@@ -14,7 +14,7 @@ import type {
RepositoryHead,
RepositoryLog,
RepositoryObject,
- RepositoryWithForksAndParentRepo,
+ RepositoryWithForkedFromRepo,
} from "../../types";
export interface CreateRepositoryDTO {
@@ -53,7 +53,7 @@ export interface RepositoryServiceAPI extends ServiceApiContract {
getRepository(
orgSlug: string,
repoSlug: string
- ): Promise<RepositoryWithForksAndParentRepo | null>;
+ ): Promise<RepositoryWithForkedFromRepo | null>;
getRepositoryBranches(repository: Repository): Promise<string[]>;
getRepositoryCommitLog(
repository: Repository,
@@ -58,6 +58,18 @@ export interface LanguagesMap {
};
}
+export interface LinguistFileInfos {
+ color: string;
+ extensions: string[];
+ filenames?: string[];
+ group?: string;
+ language: string;
+ languageDisplayName: string;
+ languageId: number;
+ mimeType: string;
+ type: string;
+}
+
export interface RepositoryHead {
treeId: string;
parentId: null | string;
@@ -146,18 +158,20 @@ export interface RepositoryLog {
export type RepositoryObject = RepositoryLog;
-export type RepositoryWithForksAndParentRepo = Repository & {
- forks: {
- _count: Prisma.RepositoryCountOutputType;
- }[];
- forkedFromRepo: {
+export interface RepositoryForkedFromRepoMeta {
+ displayName: string | null;
+ id: string;
+ slug: string;
+ organization: {
displayName: string | null;
id: string;
slug: string;
- organization: {
- displayName: string | null;
- id: string;
- slug: string;
- };
- } | null;
+ };
+}
+
+export type RepositoryWithForkedFromRepo = Repository & {
+ forkedFromRepo: RepositoryForkedFromRepoMeta | null;
+ forks: {
+ _count: Prisma.RepositoryCountOutputType;
+ }[];
};
@@ -4,18 +4,24 @@ import type { ReactView } from "@ethicdevs/react-monolith";
import React from "react";
// generated via script[prisma:generate]
import type { Organization, Repository, User } from "@prisma/client";
-// app service
-import type { LinguistFileInfos } from "../../services/codeAnalysis/types";
// app
import type {
CommonProps,
+ LinguistFileInfos,
RepositoryFileContent,
RepositoryLog,
} from "../../types";
-import { Grid, Layout, PageWrapper, Card } from "../../components";
+import {
+ Grid,
+ Layout,
+ PageWrapper,
+ Card,
+ IslandWrapper,
+} from "../../components";
// app islands
import Code, { getThemedCodeCss } from "../../islands/Code";
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
+import RepositoryHero from "../../islands/RepositoryHero";
export interface RepositoryBrowserViewProps extends CommonProps {
currentRef: string;
@@ -41,17 +47,14 @@ const RepositoryBrowserView: ReactView<RepositoryBrowserViewProps> = ({
return (
<Layout {...commonProps}>
<PageWrapper>
- <h1>
- <a href={`/${parentOrg.slug}`}>
- {parentOrg.displayName || parentOrg.slug}
- </a>
- {" / "}
- <a href={`/${parentOrg.slug}/${repo.slug}`}>
- {repo.displayName || repo.slug}
- </a>
- {" / "}
- {path}
- </h1>
+ <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
+ <RepositoryHero
+ parentOrg={parentOrg}
+ path={path}
+ repo={repo}
+ separator={"/"}
+ />
+ </IslandWrapper>
<Grid.Col fluid style={{ marginTop: 32 }}>
{lastCommit && (
<Card
@@ -6,9 +6,16 @@ import React from "react";
import type { Organization, Repository } from "@prisma/client";
// app
import type { CommonProps, RepositoryLog } from "../../types";
-import { Card, Grid, Layout, PageWrapper } from "../../components";
+import {
+ Card,
+ Grid,
+ IslandWrapper,
+ Layout,
+ PageWrapper,
+} from "../../components";
// app islands
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
+import RepositoryHero from "../../islands/RepositoryHero";
export interface RepositoryCommitsLogViewProps extends CommonProps {
currentRef: string;
@@ -27,16 +34,9 @@ const RepositoryCommitsLogView: ReactView<RepositoryCommitsLogViewProps> = ({
return (
<Layout {...commonProps}>
<PageWrapper>
- <h1>
- <a href={`/${parentOrg.slug}`}>
- {parentOrg.displayName || parentOrg.slug}
- </a>
- {" / "}
- <a href={`/${parentOrg.slug}/${repo.slug}`}>
- {repo.displayName || repo.slug}
- </a>
- {`/ ${currentRef} / Commits`}
- </h1>
+ <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
+ <RepositoryHero parentOrg={parentOrg} path={"Commits"} repo={repo} />
+ </IslandWrapper>
<Grid.Col style={{ width: "100%", marginTop: 32 }}>
{history.map((commit, idx) => (
<Card
@@ -6,9 +6,10 @@ import React from "react";
import type { Organization, Repository, User } from "@prisma/client";
// app
import type { CommonProps, RepositoryFileDiff } from "../../types";
-import { Grid, Layout, PageWrapper } from "../../components";
+import { Grid, IslandWrapper, Layout, PageWrapper } from "../../components";
// app islands
import RepositoryFilesDiffsList from "../../islands/RepositoryFilesDiffsList";
+import RepositoryHero from "../../islands/RepositoryHero";
export interface RepositoryCompareViewProps extends CommonProps {
currentUser: null | User;
@@ -30,23 +31,15 @@ const RepositoryCompareView: ReactView<RepositoryCompareViewProps> = ({
return (
<Layout {...commonProps}>
<PageWrapper>
- <h1 style={{ margin: 0 }}>
- <a href={`/${parentOrg.slug}`}>
- {parentOrg.displayName || parentOrg.slug}
- </a>
- {" / "}
- <a href={`/${parentOrg.slug}/${repo.slug}`}>
- {repo.displayName || repo.slug}
- </a>
- {" / "}
- {refA}..{refB}
- </h1>
- {/*getThemedCodeCss(commonProps.themeScheme)*/}
- <Grid.Col
- fluid
- data-islandid={`${RepositoryFilesDiffsList.name}$$0`}
- style={{ marginTop: 32 }}
- >
+ <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
+ <RepositoryHero
+ parentOrg={parentOrg}
+ path={`${refA}..${refB}`}
+ repo={repo}
+ separator={"/"}
+ />
+ </IslandWrapper>
+ <Grid.Col fluid data-islandid={`${RepositoryFilesDiffsList.name}$$0`}>
<RepositoryFilesDiffsList
filesDiffs={filesDiffs}
themeScheme={commonProps.themeScheme}
@@ -11,17 +11,19 @@ import type {
RepositoryFile,
RepositoryFileContent,
RepositoryLog,
- RepositoryWithForksAndParentRepo,
+ RepositoryWithForkedFromRepo,
} from "../../types";
import {
Card,
Grid,
+ IslandWrapper,
Layout,
MarkdownToJsx,
PageWrapper,
} from "../../components";
// app islands
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
+import RepositoryHero from "../../islands/RepositoryHero";
import RepositoryInitialSetup from "../../islands/RepositoryInitialSetup";
import RepositoryTreeView from "../../islands/RepositoryTreeView";
@@ -37,7 +39,7 @@ export interface RepositoryDetailsViewProps extends CommonProps {
parentOrg: Organization;
path: string;
readmeFileContent: null | RepositoryFileContent;
- repo: RepositoryWithForksAndParentRepo;
+ repo: RepositoryWithForkedFromRepo;
repoHead: null | RepositoryHead;
repoFiles: RepositoryFile[];
tags: string[];
@@ -53,67 +55,23 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
parentOrg,
path,
readmeFileContent,
- repo,
+ repo: repoWithForkedFromRepoMetas,
repoHead,
repoFiles,
tags,
}) => {
+ const { forkedFromRepo, ...repo } = repoWithForkedFromRepoMetas;
return (
<Layout {...commonProps}>
<PageWrapper>
- <Grid.Col fluid>
- <Grid.Row fluid alignItems={"center"}>
- <Grid.Col
- nowrap
- flex={"1 0 468px"}
- style={{ marginTop: 8, minWidth: 468 }}
- >
- <h1 style={{ margin: 0 }}>
- <a href={`/${parentOrg.slug}`}>
- {parentOrg.displayName || parentOrg.slug}
- </a>
- {" / "}
- <a href={`/${parentOrg.slug}/${repo.slug}`}>
- {repo.displayName || repo.slug}
- </a>
- {" ∙ "}
- <span style={{ textTransform: "capitalize" }}>
- ({repo.visibility.toLowerCase()})
- </span>
- </h1>
- <div style={{ flex: 1 }}>
- {repo.isFork && repo.forkedFromRepo != null ? (
- <h5 style={{ margin: 0, marginTop: 8 }}>
- <span>Forked From</span>
- {" ∙ "}
- <a href={`/${repo.forkedFromRepo.organization.slug}`}>
- {repo.forkedFromRepo.organization.displayName ||
- repo.forkedFromRepo.organization.slug}
- </a>
- {" / "}
- <a
- href={`/${repo.forkedFromRepo.organization.slug}/${repo.forkedFromRepo.slug}`}
- >
- {repo.forkedFromRepo.displayName ||
- repo.forkedFromRepo.slug}
- </a>
- </h5>
- ) : (
- <div />
- )}
- </div>
- </Grid.Col>
- <Grid.Row nowrap style={{ minWidth: 90, marginTop: 8 }}>
- <span>{repo.forks.length}</span>
- <a
- href={`/${parentOrg.slug}/${repo.slug}/fork`}
- style={{ marginLeft: 8 }}
- >
- Fork it!
- </a>
- </Grid.Row>
- </Grid.Row>
- </Grid.Col>
+ <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
+ <RepositoryHero
+ parentOrg={parentOrg}
+ repo={repo}
+ forkedFromRepo={forkedFromRepo}
+ forksCount={repo.forks.length}
+ />
+ </IslandWrapper>
<style
dangerouslySetInnerHTML={{
__html: `
@@ -6,9 +6,10 @@ import React from "react";
import { Organization, Repository, ResourceVisibility } from "@prisma/client";
// app
import type { CommonProps } from "../../types";
-import { Layout, PageWrapper } from "../../components";
+import { IslandWrapper, Layout, PageWrapper } from "../../components";
// app islands
import RepositoryForkForm from "../../islands/RepositoryForkForm";
+import RepositoryHero from "../../islands/RepositoryHero";
export interface RepositoryForkViewProps extends CommonProps {
availableParentOrgs: Organization[];
@@ -34,17 +35,13 @@ const RepositoryForkView: ReactView<RepositoryForkViewProps> = ({
return (
<Layout {...commonProps}>
<PageWrapper>
- <h1>
- <a href={`/${sourceParentOrg.slug}`}>
- {sourceParentOrg.displayName || sourceParentOrg.slug}
- </a>
- {" / "}
- <a href={`/${sourceParentOrg.slug}/${sourceRepo.slug}`}>
- {sourceRepo.displayName || sourceRepo.slug}
- </a>
- {" / "}
- <span>Fork</span>
- </h1>
+ <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
+ <RepositoryHero
+ parentOrg={sourceParentOrg}
+ path={`Fork`}
+ repo={sourceRepo}
+ />
+ </IslandWrapper>
<div style={{ height: 32 }} />
{errorMessage && (
<div className={"error_message"}>
@@ -6,9 +6,9 @@ import React from "react";
import type { Organization, PullRequest, Repository } from "@prisma/client";
// app
import type { CommonProps } from "../../types";
-import { Grid, Layout, PageWrapper } from "../../components";
+import { Grid, IslandWrapper, Layout, PageWrapper } from "../../components";
// app islands
-// import RepositoriesList from "../../islands/RepositoriesList";
+import RepositoryHero from "../../islands/RepositoryHero";
export interface RepositoryPullRequestsViewProps extends CommonProps {
parentOrg: Organization;
@@ -21,27 +21,17 @@ const RepositoryPullRequestsView: ReactView<RepositoryPullRequestsViewProps> =
return (
<Layout {...commonProps}>
<PageWrapper>
- <h1>
- <a href={`/${parentOrg.slug}`}>
- {parentOrg.displayName || parentOrg.slug}
- </a>
- {" / "}
- <a href={`/${parentOrg.slug}/${repo.slug}`}>
- {repo.displayName || repo.slug}
- </a>
- {" ∙ "}
- <span>Pull Requests</span>
- </h1>
+ <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
+ <RepositoryHero
+ parentOrg={parentOrg}
+ path={`Pull Requests`}
+ repo={repo}
+ />
+ </IslandWrapper>
<Grid.Row fluid style={{ marginTop: 32 }}>
<pre>
<code>{JSON.stringify(pullRequests, null, 2)}</code>
</pre>
- {/*<div
- data-islandid={`${RepositoriesList.name}$$0`}
- style={{ width: "100%" }}
- >
- <RepositoriesList repositories={repositories} />
- </div>*/}
</Grid.Row>
</PageWrapper>
</Layout>
@@ -10,11 +10,12 @@ import type {
RepositoryFileDiff,
RepositoryObject,
} from "../../types";
-import { Card, Layout, PageWrapper } from "../../components";
+import { Card, IslandWrapper, Layout, PageWrapper } from "../../components";
// app islands
import Code, { getThemedCodeCss } from "../../islands/Code";
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
import RepositoryFilesDiffsList from "../../islands/RepositoryFilesDiffsList";
+import RepositoryHero from "../../islands/RepositoryHero";
export interface RepositoryShowObjectViewProps extends CommonProps {
currentRef: string;
@@ -35,17 +36,15 @@ const RepositoryShowObjectView: ReactView<RepositoryShowObjectViewProps> = ({
return (
<Layout {...commonProps}>
<PageWrapper>
- <h1>
- <a href={`/${parentOrg.slug}`}>
- {parentOrg.displayName || parentOrg.slug}
- </a>
- {" / "}
- <a href={`/${parentOrg.slug}/${repo.slug}`}>
- {repo.displayName || repo.slug}
- </a>
- {" / Show / "}
- <span>{gitObject.abbreviated_commit}</span>
- </h1>
+ <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
+ <RepositoryHero
+ parentOrg={parentOrg}
+ path={gitObject.abbreviated_commit}
+ repo={repo}
+ separator={"~"}
+ />
+ </IslandWrapper>
+
<Card
data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
style={{ width: "100%", marginTop: 32, padding: 8 }}