Refactor git UI into reusable page components
This commit is contained in:
parent
35341600c1
commit
5e21323b54
|
|
@ -96,11 +96,24 @@ const RepoName = define('RepoName', {
|
|||
// Interfaces
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface AppRepoProps {
|
||||
appName: string
|
||||
baseUrl: string
|
||||
branch: string
|
||||
exists: boolean
|
||||
commits: boolean
|
||||
}
|
||||
|
||||
interface LayoutProps {
|
||||
title: string
|
||||
children: Child
|
||||
}
|
||||
|
||||
interface RepoListPageProps {
|
||||
baseUrl: string
|
||||
repos: Array<{ name: string; commits: boolean; branch: string }>
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Functions
|
||||
// ---------------------------------------------------------------------------
|
||||
|
|
@ -400,6 +413,123 @@ async function withDeployLock<T>(repo: string, fn: () => Promise<T>): Promise<T>
|
|||
}
|
||||
}
|
||||
|
||||
function AppRepo({ appName, baseUrl, branch, exists, commits }: AppRepoProps) {
|
||||
return (
|
||||
<Layout title={`Git - ${appName}`}>
|
||||
{exists && commits ? (
|
||||
<>
|
||||
<Heading>Repository</Heading>
|
||||
<RepoList>
|
||||
<RepoItem>
|
||||
<div>
|
||||
<RepoName>{appName}</RepoName>
|
||||
<HelpText style="margin: 4px 0 0; font-size: 12px">
|
||||
git clone {baseUrl}/{appName}.git
|
||||
</HelpText>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; align-items: center">
|
||||
<Badge>{branch}</Badge>
|
||||
<Badge style={`color: ${theme('colors-statusRunning')}`}>deployed</Badge>
|
||||
</div>
|
||||
</RepoItem>
|
||||
</RepoList>
|
||||
|
||||
<Heading>Push Changes</Heading>
|
||||
<CodeBlock>{[
|
||||
`git push toes ${branch}`,
|
||||
'',
|
||||
'# Or if remote not yet added:',
|
||||
`git remote add toes ${baseUrl}/${appName}.git`,
|
||||
`git push toes ${branch}`,
|
||||
].join('\n')}</CodeBlock>
|
||||
</>
|
||||
) : exists ? (
|
||||
<>
|
||||
<Heading>Repository</Heading>
|
||||
<RepoList>
|
||||
<RepoItem>
|
||||
<div>
|
||||
<RepoName>{appName}</RepoName>
|
||||
<HelpText style="margin: 4px 0 0; font-size: 12px">
|
||||
git clone {baseUrl}/{appName}.git
|
||||
</HelpText>
|
||||
</div>
|
||||
<Badge>empty</Badge>
|
||||
</RepoItem>
|
||||
</RepoList>
|
||||
|
||||
<Heading>Push to Deploy</Heading>
|
||||
<CodeBlock>{[
|
||||
`git remote add toes ${baseUrl}/${appName}.git`,
|
||||
'git push toes main',
|
||||
].join('\n')}</CodeBlock>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Heading>Push to Deploy</Heading>
|
||||
<HelpText>
|
||||
No git repository for <strong>{appName}</strong> yet.
|
||||
Push to create one and deploy.
|
||||
</HelpText>
|
||||
<CodeBlock>{[
|
||||
`git remote add toes ${baseUrl}/${appName}.git`,
|
||||
'git push toes main',
|
||||
].join('\n')}</CodeBlock>
|
||||
</>
|
||||
)}
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
function RepoListPage({ baseUrl, repos }: RepoListPageProps) {
|
||||
return (
|
||||
<Layout title="Git">
|
||||
<Heading>Push to Deploy</Heading>
|
||||
<HelpText>
|
||||
Push a git repository to deploy it as a toes app.
|
||||
The repo must contain a <code>package.json</code> with a <code>scripts.toes</code> entry.
|
||||
</HelpText>
|
||||
|
||||
<CodeBlock>{[
|
||||
'# Add this server as a remote and push',
|
||||
`git remote add toes ${baseUrl}/<app-name>.git`,
|
||||
'git push toes main',
|
||||
'',
|
||||
'# Or push an existing repo',
|
||||
`git push ${baseUrl}/<app-name>.git main`,
|
||||
].join('\n')}</CodeBlock>
|
||||
|
||||
{repos.length > 0 && (
|
||||
<>
|
||||
<Heading>Repositories</Heading>
|
||||
<RepoList>
|
||||
{repos.map(({ name, commits, branch }) => (
|
||||
<RepoItem>
|
||||
<div>
|
||||
<RepoName>{name}</RepoName>
|
||||
<HelpText style="margin: 4px 0 0; font-size: 12px">
|
||||
git clone {baseUrl}/{name}.git
|
||||
</HelpText>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; align-items: center">
|
||||
<Badge>{branch}</Badge>
|
||||
{commits
|
||||
? <Badge style={`color: ${theme('colors-statusRunning')}`}>deployed</Badge>
|
||||
: <Badge>empty</Badge>}
|
||||
</div>
|
||||
</RepoItem>
|
||||
))}
|
||||
</RepoList>
|
||||
</>
|
||||
)}
|
||||
|
||||
{repos.length === 0 && (
|
||||
<HelpText>No repositories yet. Push one to get started.</HelpText>
|
||||
)}
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Module init
|
||||
// ---------------------------------------------------------------------------
|
||||
|
|
@ -515,128 +645,18 @@ app.get('/', async c => {
|
|||
? await Promise.all([hasCommits(bare), getDefaultBranch(bare)])
|
||||
: [false, 'main']
|
||||
|
||||
return c.html(
|
||||
<Layout title={`Git - ${appName}`}>
|
||||
{exists && commits ? (
|
||||
<>
|
||||
<Heading>Repository</Heading>
|
||||
<RepoList>
|
||||
<RepoItem>
|
||||
<div>
|
||||
<RepoName>{appName}</RepoName>
|
||||
<HelpText style="margin: 4px 0 0; font-size: 12px">
|
||||
git clone {baseUrl}/{appName}.git
|
||||
</HelpText>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; align-items: center">
|
||||
<Badge>{branch}</Badge>
|
||||
<Badge style={`color: ${theme('colors-statusRunning')}`}>deployed</Badge>
|
||||
</div>
|
||||
</RepoItem>
|
||||
</RepoList>
|
||||
|
||||
<Heading>Push Changes</Heading>
|
||||
<CodeBlock>{[
|
||||
`git push toes ${branch}`,
|
||||
'',
|
||||
'# Or if remote not yet added:',
|
||||
`git remote add toes ${baseUrl}/${appName}.git`,
|
||||
`git push toes ${branch}`,
|
||||
].join('\n')}</CodeBlock>
|
||||
</>
|
||||
) : exists ? (
|
||||
<>
|
||||
<Heading>Repository</Heading>
|
||||
<RepoList>
|
||||
<RepoItem>
|
||||
<div>
|
||||
<RepoName>{appName}</RepoName>
|
||||
<HelpText style="margin: 4px 0 0; font-size: 12px">
|
||||
git clone {baseUrl}/{appName}.git
|
||||
</HelpText>
|
||||
</div>
|
||||
<Badge>empty</Badge>
|
||||
</RepoItem>
|
||||
</RepoList>
|
||||
|
||||
<Heading>Push to Deploy</Heading>
|
||||
<CodeBlock>{[
|
||||
`git remote add toes ${baseUrl}/${appName}.git`,
|
||||
'git push toes main',
|
||||
].join('\n')}</CodeBlock>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Heading>Push to Deploy</Heading>
|
||||
<HelpText>
|
||||
No git repository for <strong>{appName}</strong> yet.
|
||||
Push to create one and deploy.
|
||||
</HelpText>
|
||||
<CodeBlock>{[
|
||||
`git remote add toes ${baseUrl}/${appName}.git`,
|
||||
'git push toes main',
|
||||
].join('\n')}</CodeBlock>
|
||||
</>
|
||||
)}
|
||||
</Layout>,
|
||||
)
|
||||
return c.html(<AppRepo appName={appName} baseUrl={baseUrl} branch={branch} exists={exists} commits={commits} />)
|
||||
}
|
||||
|
||||
// No app selected — show all repos
|
||||
const repos = await listRepos()
|
||||
|
||||
const repoData = await Promise.all(repos.map(async name => {
|
||||
const bare = repoPath(name)
|
||||
const [commits, branch] = await Promise.all([hasCommits(bare), getDefaultBranch(bare)])
|
||||
return { name, commits, branch }
|
||||
}))
|
||||
|
||||
return c.html(
|
||||
<Layout title="Git">
|
||||
<Heading>Push to Deploy</Heading>
|
||||
<HelpText>
|
||||
Push a git repository to deploy it as a toes app.
|
||||
The repo must contain a <code>package.json</code> with a <code>scripts.toes</code> entry.
|
||||
</HelpText>
|
||||
|
||||
<CodeBlock>{[
|
||||
'# Add this server as a remote and push',
|
||||
`git remote add toes ${baseUrl}/<app-name>.git`,
|
||||
'git push toes main',
|
||||
'',
|
||||
'# Or push an existing repo',
|
||||
`git push ${baseUrl}/<app-name>.git main`,
|
||||
].join('\n')}</CodeBlock>
|
||||
|
||||
{repoData.length > 0 && (
|
||||
<>
|
||||
<Heading>Repositories</Heading>
|
||||
<RepoList>
|
||||
{repoData.map(({ name, commits, branch }) => (
|
||||
<RepoItem>
|
||||
<div>
|
||||
<RepoName>{name}</RepoName>
|
||||
<HelpText style="margin: 4px 0 0; font-size: 12px">
|
||||
git clone {baseUrl}/{name}.git
|
||||
</HelpText>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; align-items: center">
|
||||
<Badge>{branch}</Badge>
|
||||
{commits
|
||||
? <Badge style={`color: ${theme('colors-statusRunning')}`}>deployed</Badge>
|
||||
: <Badge>empty</Badge>}
|
||||
</div>
|
||||
</RepoItem>
|
||||
))}
|
||||
</RepoList>
|
||||
</>
|
||||
)}
|
||||
|
||||
{repoData.length === 0 && (
|
||||
<HelpText>No repositories yet. Push one to get started.</HelpText>
|
||||
)}
|
||||
</Layout>,
|
||||
)
|
||||
return c.html(<RepoListPage baseUrl={baseUrl} repos={repoData} />)
|
||||
})
|
||||
|
||||
export default app.defaults
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user