improve user experience@@ -1,4 +0,0 @@
-{
- "typescript.tsdk": "node_modules/typescript/lib",
- "git-blame.gitWebUrl": ""
-}
@@ -27,16 +27,16 @@ const baseButtonCss = css<ButtonProps>`
align-items: center;
justify-content: center;
- min-height: 62px;
+ min-height: 40px;
min-width: 120px;
- padding: 16px 24px;
+ padding: 8px 16px;
background-color: ${Colors.PRIMARY_01};
border: 1px solid ${Colors.WHITE_01};
border-radius: 8px;
color: ${Colors.WHITE_01};
- font-size: 22px;
+ font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
white-space: nowrap;
@@ -7,6 +7,7 @@ import { AppRoute } from "../routes.defs";
import { Const } from "../const";
import { NamedColors } from "../utils/style";
import { buildRouteLink } from "../utils/shared";
+import { PageWrapper } from "./PageWrapper";
interface PageHeaderProps extends CommonProps {}
@@ -62,45 +63,47 @@ export const PageHeader: VFC<PageHeaderProps & WithThemeSchemeProp> = ({
return (
<StyledPageHeader themeScheme={themeScheme}>
- <StyledLogoArea themeScheme={themeScheme}>
- <a href={"/"}>
- <h1 style={{ margin: 0, marginLeft: 20 }}>{Const.APP_NAME}</h1>
- </a>
- </StyledLogoArea>
- <StyledPageHeaderNav>
- <a
- aria-label={"Explore Repositories"}
- href={buildRouteLink(AppRoute.REPOSITORY_EXPLORE, null)}
- >
- Explore
- </a>
- </StyledPageHeaderNav>
- <StyledActionsArea>
- {commonProps.authenticated && (
+ <PageWrapper>
+ <StyledLogoArea themeScheme={themeScheme}>
+ <a href={"/"}>
+ <h1 style={{ margin: 0 }}>{Const.APP_NAME}</h1>
+ </a>
+ </StyledLogoArea>
+ <StyledPageHeaderNav>
<a
- aria-label={"Create a new Repository"}
- href={buildRouteLink(AppRoute.REPOSITORY_CREATE, null)}
+ aria-label={"Explore Repositories"}
+ href={buildRouteLink(AppRoute.REPOSITORY_EXPLORE, null)}
>
- New Repository
+ Explore
</a>
- )}
- <a
- aria-label={`Switch to ${
- themeScheme === "light" ? "dark" : "light"
- } theme`}
- data-smooth-scroll={"disabled"}
- href={buildRouteLink(AppRoute.THEME_SET_SCHEME_ACTION, {
- themeScheme: invertThemeScheme,
- })}
- style={{ color: NamedColors.TEXT_MUTED[themeScheme] }}
- title={`Click to enable ${
- themeScheme === "light" ? "dark" : "light"
- } mode`}
- >
- {`${themeScheme === "light" ? "Dark" : "Light"} mode`}
- </a>
- {pageHeaderActions}
- </StyledActionsArea>
+ </StyledPageHeaderNav>
+ <StyledActionsArea>
+ {commonProps.authenticated && (
+ <a
+ aria-label={"Create a new Repository"}
+ href={buildRouteLink(AppRoute.REPOSITORY_CREATE, null)}
+ >
+ New Repository
+ </a>
+ )}
+ <a
+ aria-label={`Switch to ${
+ themeScheme === "light" ? "dark" : "light"
+ } theme`}
+ data-smooth-scroll={"disabled"}
+ href={buildRouteLink(AppRoute.THEME_SET_SCHEME_ACTION, {
+ themeScheme: invertThemeScheme,
+ })}
+ style={{ color: NamedColors.TEXT_MUTED[themeScheme] }}
+ title={`Click to enable ${
+ themeScheme === "light" ? "dark" : "light"
+ } mode`}
+ >
+ {`${themeScheme === "light" ? "Dark" : "Light"} mode`}
+ </a>
+ {pageHeaderActions}
+ </StyledActionsArea>
+ </PageWrapper>
</StyledPageHeader>
);
};
@@ -114,7 +117,16 @@ const StyledPageHeader = styled.header<WithThemeSchemeProp>`
height: 100%;
width: 100%;
- gap: 16px;
+ & > ${PageWrapper} {
+ height: 100%;
+
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ align-items: center;
+
+ padding: 0 16px;
+ gap: 16px;
+ }
& a {
transition: color 140ms ease-in-out 0s;
@@ -158,6 +170,10 @@ const StyledPageHeaderNav = styled.nav`
gap: 24px;
margin-left: 4px;
+
+ & > a {
+ white-space: nowrap;
+ }
`;
const StyledActionsArea = styled.div`
@@ -166,9 +182,8 @@ const StyledActionsArea = styled.div`
justify-content: flex-end;
align-items: center;
- padding-right: 12px;
-
& > a {
margin-left: 12px;
+ white-space: nowrap;
}
`;
@@ -6,7 +6,7 @@ export const PageWrapper = styled.div`
justify-content: flex-start;
align-items: flex-start;
- max-width: 1260px;
+ max-width: 960px;
width: 100%;
margin: 0 auto;
@@ -14,9 +14,9 @@ type Const = {
export const Const: Const = {
APP_NAME: "GitFOSS",
- PRIMARY_BRANCH_REF: "main",
+ PRIMARY_BRANCH_REF: "master",
DEFAULT_HEAD_REF: "HEAD",
- DEFAULT_THEME_SCHEME: "dark",
+ DEFAULT_THEME_SCHEME: "light",
README_FILE_NAMES: [
"READ_ME",
"READ_ME.md",
@@ -5,7 +5,11 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
// generated via script[generate:prisma]
import type { Organization } from "@prisma/client";
// app
-import { RepositoryWithParentAndForkedFromRepos } from "../types";
+import {
+ RepositoryWithParentAndForkedFromRepos,
+ WithThemeSchemeProp,
+} from "../types";
+import { Grid, Select } from "../components";
export interface PullRequestSourceSelection {
selectedOrg: {
@@ -51,11 +55,14 @@ export interface PullRequestSourceSelectProps {
) => void | Promise<void>;
}
-const PullRequestSourceSelect: ReactIsland<PullRequestSourceSelectProps> = ({
- defaultSource,
- sources,
+const PullRequestSourceSelect: ReactIsland<
+ PullRequestSourceSelectProps & WithThemeSchemeProp
+> = ({
+ themeScheme,
namePrefix,
+ defaultSource,
onSelectionChange,
+ sources,
}) => {
const [selectedOrgSlug, setSelectedOrgSlug] = useState<string>(
defaultSource.org.slug
@@ -253,33 +260,39 @@ const PullRequestSourceSelect: ReactIsland<PullRequestSourceSelectProps> = ({
}, []);
return (
- <div>
- <select
+ <Grid.Row fluid nowrap gap={8} alignItems={"center"}>
+ <Select
+ themeScheme={themeScheme}
name={`${namePrefix}_parent_org_slug`}
value={selectedOrgSlug}
onChange={onOrgSlugChange}
+ style={{ width: "auto", flex: 1 }}
>
{allOrganizations.map(keyValueToOptionMapFn)}
- </select>
- {" / "}
- <select
+ </Select>
+ {/* {" / "} */}
+ <Select
+ themeScheme={themeScheme}
name={`${namePrefix}_repository_slug`}
value={selectedRepoSlug}
onChange={onRepoSlugChange}
+ style={{ width: "auto", flex: 1 }}
>
{allReposBySelectedOrgSlug.map(keyValueToOptionMapFn)}
- </select>
- {" / "}
- <select
+ </Select>
+ {/* {" / "} */}
+ <Select
+ themeScheme={themeScheme}
name={`${namePrefix}_repository_${
namePrefix === "source" ? "from" : "dest"
}_branch`}
value={selectedBranch}
onChange={onBranchChange}
+ style={{ width: "auto", flex: 1 }}
>
{allBranchesBySelectedOrgAndRepoSlugs.map(keyValueToOptionMapFn)}
- </select>
- </div>
+ </Select>
+ </Grid.Row>
);
};
@@ -10,11 +10,9 @@ import type {
RepositoryFileDiff,
RepositoryWithParentAndForkedFromRepos,
} from "../types";
-import { AppRoute } from "../routes.defs";
-import { Card } from "../components/Card.styled";
-import { Grid } from "../components/Grid";
-import { IslandWrapper } from "../components/IslandWrapper.styled";
import { buildRouteLink } from "../utils/shared";
+import { AppRoute } from "../routes.defs";
+import { Button, Card, Grid, IslandWrapper } from "../components";
// app islands
import RepositoryFilesDiffsList from "./RepositoryFilesDiffsList";
import PullRequestSourceSelect, {
@@ -139,281 +137,294 @@ const isErrorStateData = (
): i is RepositoryPullRequestCreateFormPropsByState<PullRequestFormState.ERROR> =>
typeof i !== "undefined" && i != null && s === PullRequestFormState.ERROR;
-const RepositoryPullRequestCreateForm: ReactIsland<RepositoryPullRequestCreateFormProps> =
- ({ parentOrgSlug, repoSlug, themeScheme, variant: { state, data } }) => {
- const [selectedSource, setSelectedSource] =
- useState<null | PullRequestSourceSelection>(null);
- const [selectedTarget, setSelectedTarget] =
- useState<null | PullRequestSourceSelection>(null);
-
- const onSourceSelectionChange = useCallback(
- (ev: PullRequestSourceSelectionChangeEvent) => {
- setSelectedSource(ev.data);
- },
- [setSelectedSource]
- );
+const RepositoryPullRequestCreateForm: ReactIsland<
+ RepositoryPullRequestCreateFormProps
+> = ({ parentOrgSlug, repoSlug, themeScheme, variant: { state, data } }) => {
+ const [selectedSource, setSelectedSource] =
+ useState<null | PullRequestSourceSelection>(null);
+ const [selectedTarget, setSelectedTarget] =
+ useState<null | PullRequestSourceSelection>(null);
- const onTargetSelectionChange = useCallback(
- (ev: PullRequestSourceSelectionChangeEvent) => {
- setSelectedTarget(ev.data);
- },
- [setSelectedTarget]
- );
+ const onSourceSelectionChange = useCallback(
+ (ev: PullRequestSourceSelectionChangeEvent) => {
+ setSelectedSource(ev.data);
+ },
+ [setSelectedSource]
+ );
- const isCompareButtonEnabled = useMemo(() => {
- const isSameRepoInSameOrg =
- selectedSource != null &&
- selectedTarget != null &&
- selectedSource.selectedRepo.repo.organization.slug ===
- selectedTarget.selectedRepo.repo.organization.slug &&
- selectedSource.selectedRepo.repo.slug ===
- selectedTarget.selectedRepo.repo.slug;
- return !!(
- selectedSource != null &&
- selectedTarget != null &&
- isSameRepoInSameOrg === false &&
- selectedSource.selectedBranch != null &&
- selectedTarget.selectedBranch != null
- );
- }, [selectedSource, selectedTarget]);
+ const onTargetSelectionChange = useCallback(
+ (ev: PullRequestSourceSelectionChangeEvent) => {
+ setSelectedTarget(ev.data);
+ },
+ [setSelectedTarget]
+ );
- isCompareButtonEnabled;
+ const isCompareButtonEnabled = useMemo(() => {
+ const isSameRepoInSameOrg =
+ selectedSource != null &&
+ selectedTarget != null &&
+ selectedSource.selectedRepo.repo.organization.slug ===
+ selectedTarget.selectedRepo.repo.organization.slug &&
+ selectedSource.selectedRepo.repo.slug ===
+ selectedTarget.selectedRepo.repo.slug;
+ return !!(
+ selectedSource != null &&
+ selectedTarget != null &&
+ isSameRepoInSameOrg === false &&
+ selectedSource.selectedBranch != null &&
+ selectedTarget.selectedBranch != null
+ );
+ }, [selectedSource, selectedTarget]);
- // PullRequestFormState.CONFIGURE
- if (isConfigureState(state) && isConfigureStateData(state, data)) {
- return (
- <Grid.Col fluid nowrap>
- <form
- method={"POST"}
- action={buildRouteLink(
- AppRoute.REPOSITORY_PULL_REQUEST_CREATE_ACTION,
- { orgSlug: parentOrgSlug, repoSlug }
- )}
- style={{ width: "100%" }}
- >
- <Card themeScheme={themeScheme}>
- <input type={"hidden"} name={"state_from"} value={state} />
- <input
- type={"hidden"}
- name={"state_dest"}
- value={PullRequestFormState.COMPARE}
- />
- <Grid.Row fluid nowrap alignItems={"center"}>
- <Grid.Row nowrap fluid alignItems={"center"}>
- <label>Target:</label>
- <div data-islandid={`${PullRequestSourceSelect.name}$$1`}>
- <PullRequestSourceSelect
- namePrefix={"target"}
- defaultSource={{
- org: Object.values(data.sources)[0].org,
- repo: Object.values(
- Object.values(data.sources)[0].repos
- )[0].repo,
- branch: Object.values(
- Object.values(data.sources)[0].repos
- )[0].branches[0],
- }}
- sources={data.sources}
- onSelectionChange={onTargetSelectionChange}
- />
- </div>
- </Grid.Row>
- <Grid.Row
- flex={0.2}
- justifyContent={"center"}
- alignItems={"center"}
- style={{ margin: "0 8px" }}
- >
- <span><--</span>
- </Grid.Row>
- <Grid.Row nowrap fluid alignItems={"center"}>
- <label>Source:</label>
- <div data-islandid={`${PullRequestSourceSelect.name}$$0`}>
- <PullRequestSourceSelect
- namePrefix={"source"}
- defaultSource={{
- org: data.target.parentOrg,
- repo: data.target
- .repo as RepositoryWithParentAndForkedFromRepos,
- branch: data.target.branch,
- }}
- sources={data.sources}
- onSelectionChange={onSourceSelectionChange}
- />
- </div>
- </Grid.Row>
- <button
- // disabled={isCompareButtonEnabled === false}
- type={"submit"}
- style={{ marginLeft: 8 }}
- >
- Compare
- </button>
- </Grid.Row>
- </Card>
- </form>
- </Grid.Col>
- );
- }
- // PullRequestFormState.COMPARE
- if (isCompareState(state) && isCompareStateData(state, data)) {
- if (data.fileDiffs.length <= 0) {
- return (
- <Grid.Col fluid nowrap>
- <h1>Nothing to compare from... 🤔</h1>
- <p>
- The source and the target you've just selected seems to be equals.
- </p>
- <p>
- Try comparing two branches that have some differences before you
- can create a pull request from the produced diff.
- </p>
- <a
- href={buildRouteLink(AppRoute.REPOSITORY_PULL_REQUEST_CREATE, {
- orgSlug: parentOrgSlug,
- repoSlug,
- })}
- >
- Try again
- </a>
- </Grid.Col>
- );
- }
+ isCompareButtonEnabled;
- return (
- <Grid.Col fluid nowrap>
- <form
- method={"POST"}
- action={buildRouteLink(
- AppRoute.REPOSITORY_PULL_REQUEST_CREATE_ACTION,
- { orgSlug: parentOrgSlug, repoSlug }
- )}
- style={{ width: "100%" }}
- >
+ // PullRequestFormState.CONFIGURE
+ if (isConfigureState(state) && isConfigureStateData(state, data)) {
+ return (
+ <Grid.Col fluid nowrap>
+ <form
+ method={"POST"}
+ action={buildRouteLink(
+ AppRoute.REPOSITORY_PULL_REQUEST_CREATE_ACTION,
+ { orgSlug: parentOrgSlug, repoSlug }
+ )}
+ style={{ width: "100%" }}
+ >
+ <Card themeScheme={themeScheme}>
<input type={"hidden"} name={"state_from"} value={state} />
<input
type={"hidden"}
name={"state_dest"}
- value={PullRequestFormState.DETAILS}
+ value={PullRequestFormState.COMPARE}
/>
- <input
- type={"hidden"}
- name={"source_parent_org_slug"}
- value={data.source.parentOrg.slug}
- />
- <input
- type={"hidden"}
- name={"source_repository_slug"}
- value={data.source.repo.slug}
- />
- <input
- type={"hidden"}
- name={"source_repository_from_branch"}
- value={data.source.branch}
- />
- <input
- type={"hidden"}
- name={"target_parent_org_slug"}
- value={data.target.parentOrg.slug}
- />
- <input
- type={"hidden"}
- name={"target_repository_slug"}
- value={data.target.repo.slug}
- />
- <input
- type={"hidden"}
- name={"target_repository_dest_branch"}
- value={data.target.branch}
- />
- <Grid.Row fluid>
- <Grid.Col fluid>
- <Card themeScheme={themeScheme} style={{ width: "100%" }}>
- <Grid.Col fluid>
- <label htmlFor={"summary"}>Summary</label>
- <input
- type={"text"}
- name={"summary"}
- style={{ width: "100%" }}
- />
- </Grid.Col>
- <Grid.Col fluid style={{ marginTop: 8 }}>
- <label htmlFor={"description"}>Description</label>
- <textarea
- name={"description"}
- style={{
- width: "100%",
- maxWidth: "100%",
- minWidth: "100%",
- minHeight: 180,
- }}
- ></textarea>
- </Grid.Col>
- <Grid.Col
- fluid
- style={{ marginTop: 8 }}
- alignItems={"flex-end"}
- >
- <button type={"submit"}>Create Pull Request</button>
- </Grid.Col>
- </Card>
- </Grid.Col>
- <Grid.Col flex={0.3} style={{ marginLeft: 16 }}>
- <Card themeScheme={themeScheme} style={{ width: "100%" }}>
- <span></span>
- </Card>
- </Grid.Col>
+ <Grid.Row fluid alignItems={"center"} gap={8}>
+ <Grid.Row nowrap fluid gap={8} alignItems={"center"}>
+ <label style={{ display: "block", minWidth: 60 }}>
+ Target:
+ </label>
+ <div
+ data-islandid={`${PullRequestSourceSelect.name}$$1`}
+ style={{ width: "100%" }}
+ >
+ <PullRequestSourceSelect
+ themeScheme={themeScheme}
+ namePrefix={"target"}
+ defaultSource={{
+ org: Object.values(data.sources)[0].org,
+ repo: Object.values(
+ Object.values(data.sources)[0].repos
+ )[0].repo,
+ branch: Object.values(
+ Object.values(data.sources)[0].repos
+ )[0].branches[0],
+ }}
+ sources={data.sources}
+ onSelectionChange={onTargetSelectionChange}
+ />
+ </div>
+ </Grid.Row>
+ <Grid.Row
+ // flex={0.2}
+ justifyContent={"center"}
+ alignItems={"center"}
+ style={{ margin: "0 8px", width: 80 }}
+ >
+ {/* <span><--</span> */}
+ </Grid.Row>
+ <Grid.Row nowrap fluid gap={8} alignItems={"center"}>
+ <label style={{ display: "block", minWidth: 60 }}>
+ Source:
+ </label>
+ <div
+ data-islandid={`${PullRequestSourceSelect.name}$$0`}
+ style={{ width: "100%" }}
+ >
+ <PullRequestSourceSelect
+ themeScheme={themeScheme}
+ namePrefix={"source"}
+ defaultSource={{
+ org: data.target.parentOrg,
+ repo: data.target
+ .repo as RepositoryWithParentAndForkedFromRepos,
+ branch: data.target.branch,
+ }}
+ sources={data.sources}
+ onSelectionChange={onSourceSelectionChange}
+ />
+ </div>
+ </Grid.Row>
+ <Button
+ style={{ justifySelf: "flex-end" }}
+ // disabled={isCompareButtonEnabled === false}
+ type={"submit"}
+ >
+ Compare
+ </Button>
</Grid.Row>
- </form>
- <IslandWrapper
- data-islandid={`${RepositoryFilesDiffsList.name}$$0`}
- style={{ marginTop: 16 }}
- >
- <RepositoryFilesDiffsList
- filesDiffs={data.fileDiffs}
- themeScheme={themeScheme}
- orgSlug={data.source.parentOrg.slug}
- repoSlug={data.source.repo.slug}
- commitHash={""}
- />
- </IslandWrapper>
- </Grid.Col>
- );
- }
- // PullRequestFormState.DETAILS
- if (isDetailsState(state) && isDetailsStateData(state, data)) {
+ </Card>
+ </form>
+ </Grid.Col>
+ );
+ }
+ // PullRequestFormState.COMPARE
+ if (isCompareState(state) && isCompareStateData(state, data)) {
+ if (data.fileDiffs.length <= 0) {
return (
<Grid.Col fluid nowrap>
- <form
- method={"POST"}
- action={buildRouteLink(
- AppRoute.REPOSITORY_PULL_REQUEST_CREATE_ACTION,
- { orgSlug: parentOrgSlug, repoSlug }
- )}
+ <h1>Nothing to compare from... 🤔</h1>
+ <p>
+ The source and the target you've just selected seems to be equals.
+ </p>
+ <p>
+ Try comparing two branches that have some differences before you can
+ create a pull request from the produced diff.
+ </p>
+ <a
+ href={buildRouteLink(AppRoute.REPOSITORY_PULL_REQUEST_CREATE, {
+ orgSlug: parentOrgSlug,
+ repoSlug,
+ })}
>
- <input type={"hidden"} name={"state_from"} value={state} />
- <button type={"submit"}>Submit the Pull Request</button>
- </form>
- <div>
- <pre>
- <code>{JSON.stringify(data, null, 2)}</code>
- </pre>
- </div>
- </Grid.Col>
- );
- }
- // PullRequestFormState.ERROR
- if (isErrorState(state) && isErrorStateData(state, data)) {
- const { errorMessage } = data;
- return (
- <Grid.Col fluid nowrap>
- <h1>Woops, an error occurred:</h1>
- <div>{errorMessage}</div>
+ Try again
+ </a>
</Grid.Col>
);
}
- return null;
- };
+
+ return (
+ <Grid.Col fluid nowrap>
+ <form
+ method={"POST"}
+ action={buildRouteLink(
+ AppRoute.REPOSITORY_PULL_REQUEST_CREATE_ACTION,
+ { orgSlug: parentOrgSlug, repoSlug }
+ )}
+ style={{ width: "100%" }}
+ >
+ <input type={"hidden"} name={"state_from"} value={state} />
+ <input
+ type={"hidden"}
+ name={"state_dest"}
+ value={PullRequestFormState.DETAILS}
+ />
+ <input
+ type={"hidden"}
+ name={"source_parent_org_slug"}
+ value={data.source.parentOrg.slug}
+ />
+ <input
+ type={"hidden"}
+ name={"source_repository_slug"}
+ value={data.source.repo.slug}
+ />
+ <input
+ type={"hidden"}
+ name={"source_repository_from_branch"}
+ value={data.source.branch}
+ />
+ <input
+ type={"hidden"}
+ name={"target_parent_org_slug"}
+ value={data.target.parentOrg.slug}
+ />
+ <input
+ type={"hidden"}
+ name={"target_repository_slug"}
+ value={data.target.repo.slug}
+ />
+ <input
+ type={"hidden"}
+ name={"target_repository_dest_branch"}
+ value={data.target.branch}
+ />
+ <Grid.Row fluid>
+ <Grid.Col fluid>
+ <Card themeScheme={themeScheme} style={{ width: "100%" }}>
+ <Grid.Col fluid>
+ <label htmlFor={"summary"}>Summary</label>
+ <input
+ type={"text"}
+ name={"summary"}
+ style={{ width: "100%" }}
+ />
+ </Grid.Col>
+ <Grid.Col fluid style={{ marginTop: 8 }}>
+ <label htmlFor={"description"}>Description</label>
+ <textarea
+ name={"description"}
+ style={{
+ width: "100%",
+ maxWidth: "100%",
+ minWidth: "100%",
+ minHeight: 180,
+ }}
+ ></textarea>
+ </Grid.Col>
+ <Grid.Col
+ fluid
+ style={{ marginTop: 8 }}
+ alignItems={"flex-end"}
+ >
+ <button type={"submit"}>Create Pull Request</button>
+ </Grid.Col>
+ </Card>
+ </Grid.Col>
+ <Grid.Col flex={0.3} style={{ marginLeft: 16 }}>
+ <Card themeScheme={themeScheme} style={{ width: "100%" }}>
+ <span></span>
+ </Card>
+ </Grid.Col>
+ </Grid.Row>
+ </form>
+ <IslandWrapper
+ data-islandid={`${RepositoryFilesDiffsList.name}$$0`}
+ style={{ marginTop: 16 }}
+ >
+ <RepositoryFilesDiffsList
+ filesDiffs={data.fileDiffs}
+ themeScheme={themeScheme}
+ orgSlug={data.source.parentOrg.slug}
+ repoSlug={data.source.repo.slug}
+ commitHash={""}
+ />
+ </IslandWrapper>
+ </Grid.Col>
+ );
+ }
+ // PullRequestFormState.DETAILS
+ if (isDetailsState(state) && isDetailsStateData(state, data)) {
+ return (
+ <Grid.Col fluid nowrap>
+ <form
+ method={"POST"}
+ action={buildRouteLink(
+ AppRoute.REPOSITORY_PULL_REQUEST_CREATE_ACTION,
+ { orgSlug: parentOrgSlug, repoSlug }
+ )}
+ >
+ <input type={"hidden"} name={"state_from"} value={state} />
+ <button type={"submit"}>Submit the Pull Request</button>
+ </form>
+ <div>
+ <pre>
+ <code>{JSON.stringify(data, null, 2)}</code>
+ </pre>
+ </div>
+ </Grid.Col>
+ );
+ }
+ // PullRequestFormState.ERROR
+ if (isErrorState(state) && isErrorStateData(state, data)) {
+ const { errorMessage } = data;
+ return (
+ <Grid.Col fluid nowrap>
+ <h1>Woops, an error occurred:</h1>
+ <div>{errorMessage}</div>
+ </Grid.Col>
+ );
+ }
+ return null;
+};
RepositoryPullRequestCreateForm.displayName = "RepositoryPullRequestCreateForm";
export default RepositoryPullRequestCreateForm;
@@ -16,7 +16,7 @@ const makeGetLinguistFileInfos: ServiceMethodFactory<
return {
// TODO(improvement): make an algorithm to generate one color per ext?
color: "gray",
- extensions: [ext],
+ extensions: [`.${ext}`],
languageDisplayName: ext.toUpperCase(),
language: ext,
languageId: -1,
@@ -74,21 +74,56 @@ const RepositoryBrowserView: ReactView<RepositoryBrowserViewProps> = ({
</Card>
)}
<Card
- style={{ width: "100%", marginTop: lastCommit != null ? 16 : 0 }}
+ style={{
+ width: "100%",
+ padding: 8,
+ marginTop: lastCommit != null ? 8 : 0,
+ }}
themeScheme={commonProps.themeScheme}
>
- <Grid.Row nowrap alignItems={"center"} style={{ width: "100%" }}>
+ <Grid.Row
+ nowrap
+ gap={12}
+ alignItems={"center"}
+ style={{ width: "100%" }}
+ >
+ <div
+ style={{
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ height: 24,
+ width: 24,
+ background: linguistInfos.color,
+ borderRadius: 4,
+ color: "white",
+ fontSize:
+ linguistInfos.extensions.length > 0 &&
+ linguistInfos.extensions[0].slice(1).length <= 4
+ ? linguistInfos.extensions[0].slice(1).length <= 2
+ ? 12
+ : 9
+ : 6,
+ }}
+ >
+ {linguistInfos.extensions.length > 0
+ ? linguistInfos.extensions[0]
+ : ""}
+ </div>
<div>
- <strong>lang:</strong> <span>{linguistInfos.language}</span>
+ <strong>
+ {linguistInfos.languageDisplayName ||
+ `lang: ${linguistInfos.language}`}
+ </strong>
</div>
- <div style={{ marginLeft: 16 }}>
- <strong>mime:</strong> <span>{linguistInfos.mimeType}</span>
+ <div>
+ <span>({linguistInfos.mimeType})</span>
</div>
</Grid.Row>
</Card>
{linguistInfos.type === "image" ? (
<Card
- style={{ width: "100%", marginTop: 16 }}
+ style={{ width: "100%", marginTop: 8 }}
themeScheme={commonProps.themeScheme}
>
<img
@@ -101,7 +136,12 @@ const RepositoryBrowserView: ReactView<RepositoryBrowserViewProps> = ({
{getThemedCodeCss(commonProps.themeScheme)}
<Card
data-islandid={`${Code.name}$$0`}
- style={{ width: "100%", marginTop: 16 }}
+ style={{
+ width: "100%",
+ marginTop: 8,
+ padding: 0,
+ border: "none",
+ }}
themeScheme={commonProps.themeScheme}
>
<Code
@@ -106,7 +106,7 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
>
<Grid.Col
fluid
- style={{ maxWidth: "calc(100% - 30%)" }}
+ style={{ maxWidth: "calc(100% - 336px)" }}
className={"mobile-full-width"}
>
{repoHead == null || lastCommit == null ? (
@@ -100,7 +100,7 @@ const RepositoryShowObjectView: ReactView<RepositoryShowObjectViewProps> = ({
{gitObjectDiffs != null && (
<Card
data-islandid={`${RepositoryFilesDiffsList.name}$$0`}
- style={{ width: "100%", marginTop: 24, padding: 8 }}
+ style={{ width: "100%", marginTop: 8, padding: 0, border: "none" }}
themeScheme={commonProps.themeScheme}
>
<RepositoryFilesDiffsList
@@ -283,7 +283,7 @@ const RepositoryPullRequestDetailsView: ReactView<
gap={8}
fluid
data-islandid={`${RepositoryFilesDiffsList.name}$$0`}
- style={{ marginTop: 8 }}
+ style={{ marginTop: 8, padding: 0 }}
>
<RepositoryFilesDiffsList
filesDiffs={filesDiffs}