apps/web/app/routes/new-github.tsx · flagon-io/g1t

results.push(imported.ok ? { id: githubRepoId, ok: true, repo: imported.value.repo } : { id: githubRepoId, ok: false, error: imported.error.message });

100

}

101

if (results.length === 1 && results[0].ok) throw redirect(`/${results[0].repo}`);

102

return { error: null, results };

103

}

104

105

export default function NewFromGithub({ loaderData, actionData }: Route.ComponentProps) {

106

const { workspace, workspaceName, installations, claimable, installation, repositories, linked, owner } = loaderData;

107

const these = claimable.length === 1 ? "this account" : "these accounts";

108

const here = "/new/github";

109

const names = new Map((repositories?.repositories ?? []).map((repo) => [repo.id, repo.fullName]));

return (

<ArrowLeft size={14} /> New project

</Link>

</span>

<h1 className="mt-4 text-2xl font-semibold tracking-tight">Import from GitHub</h1>

119

120

Bring repositories into <span className="font-mono text-fg">{workspace}</span> through g1t's GitHub App. You choose which repositories it can see on

121

GitHub; nothing else is read.

</p>

{!linked ? (

<h2 className="font-medium">Connect GitHub</h2>

128

129

{owner

130

? `GitHub asks once who you are and which repositories g1t may see, then brings you back here to choose what to import into ${workspaceName}.`

131

: "g1t lists the repositories you can reach on GitHub as you, so it needs your GitHub account linked first."}

</p>

<a

href={owner ? `/integrations/github/install?workspace=${workspace}` : `/auth/github?link=1&next=${encodeURIComponent(here)}`}

136

className="inline-flex items-center gap-2 rounded-md bg-fg px-3.5 py-2 text-sm font-medium text-bg hover:bg-fg-hover"

137

>

138

<GithubMark /> Connect GitHub

</a>

</div>

</section>

</Card>

) : (

<>

<h2 className="font-medium">GitHub accounts</h2>

148

{owner && (

149

<a

150

href={`/integrations/github/install?workspace=${workspace}&another=1`}

151

className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg"

152

>

153

<Plus size={14} /> Add a GitHub account

</a>

)}

</div>

{loaderData.requested && (

158

159

Your request went to the organization's owners on GitHub. Once one approves it, add the account here again.

160

</p>

161

)}

162

{loaderData.claimableUnknown && (

</div>

)}

{claimable.length > 0 && (

168

169

<h3 className="text-sm font-medium">Already installed on GitHub</h3>

170

171

{owner

172

? `The app is installed on ${these}, but not added to ${workspaceName} yet.`

173

: `The app is installed on ${these}. An owner of ${workspaceName} can add ${claimable.length === 1 ? "it" : "them"} here.`}

174

</p>

175

176

{claimable.map((item) => (

177

178

179

<span className="font-mono">{item.account}</span>

180

<span className="whitespace-nowrap text-xs text-faint">{item.summary}</span>

181

{item.suspended && <Badge size="md">Suspended</Badge>}

{owner && (

Add to {workspaceName}

</SubmitButton>

</Form>

)}

</li>

))}

</ul>

<ErrorText>{actionData && "addError" in actionData ? actionData.addError : null}</ErrorText>

196

</div>

197

)}

198

{installations.length === 0 ? (

{owner ? (

<>

<p>

{claimable.length > 0

204

? "Or install g1t's GitHub App on another GitHub account or organization, and choose the repositories it may see."

205

: "Install g1t's GitHub App on your GitHub account or an organization, and choose the repositories it may see."}

</p>

<a

href={`/integrations/github/install?workspace=${workspace}${claimable.length > 0 ? "&another=1" : ""}`}

210

className="inline-flex items-center gap-2 rounded-md bg-fg px-3.5 py-2 text-sm font-medium text-bg hover:bg-fg-hover"

211

>

212

<GithubMark /> Install on GitHub

</a>

</div>

</>

) : (

<p>No GitHub account is connected to this workspace yet. Ask one of its owners to add one.</p>

)}

</Card>

) : (

{installations.map((item) => (

223

224

<Link

225

to={`${here}?installation=${item.id}`}

226

className={`whitespace-nowrap ${item.id === installation?.id ? "font-medium text-fg" : "text-muted hover:text-fg"}`}

>

{item.account}

</Link>

{item.accountType === "Organization" ? "Organization" : "Personal"} ·{" "}

232

{item.repositorySelection === "all" ? "all repositories" : "selected repositories"}

233

</span>

234

{item.suspended && <Badge size="md">Suspended</Badge>}

235

236

237

Choose repositories on GitHub

</a>

{owner && (

<SubmitButton

pending="Removing…"

match={{ intent: "remove-installation", installation: String(item.id) }}

247

variant="link"

248

size="inline"

249

className="gap-1 text-xs text-faint hover:text-danger"

>

Remove

</SubmitButton>

</Form>

)}

</span>

</li>

))}

</ul>

)}

<ErrorText>{actionData && "removeError" in actionData ? actionData.removeError : null}</ErrorText>

</section>

{installation && (

<FieldLegend>Repositories on {installation.account}</FieldLegend>

270

<ErrorText>{loaderData.error}</ErrorText>

271

{repositories && repositories.repositories.length === 0 && (

272

273

The app cannot see any repositories here yet.{" "}

274

275

Choose some on GitHub

</a>

.

</p>

)}

{(repositories?.repositories ?? []).map((repo) => (

<CheckboxOption

name="repo"

value={String(repo.id)}

286

disabled={repo.linkedTo != null}

287

label={

288

289

<span className="font-mono">{repo.fullName}</span>

290

{repo.private && (

291

292

<Lock size={11} /> Private

293

</span>

294

)}

295

{repo.linkedTo && <Badge size="md">On g1t as {repo.linkedTo}</Badge>}

296

</span>

297

}

298

description={repo.description ?? undefined}

/>

</div>

))}

</div>

{repositories && repositories.total > repositories.perPage && (

304

305

{repositories.page > 1 ? (

</Link>

) : (

)}

{repositories.page * repositories.perPage < repositories.total && (

</Link>

)}

</div>

)}

</FieldSet>

<CheckboxOption

name="issues"

defaultChecked

label="Copy its issues too, as work items"

325

description="Up to 200 per repository, with their labels and whether they are open; a milestone is noted in the description. Pull requests stay on GitHub; their branches come across."

326

/>

327

328