apps/web/app/routes/workspace/permissions.tsx · flagon-io/g1t

admin: "Members can do everything on every repository, including its settings, webhooks, secrets and who has access. Only owners transfer or delete one.",

110

};

111

112

/** The member privileges, in the order the Code section shows them, with what each lets members do. */

113

const PRIVILEGES: [keyof MemberPrivileges, string, string][] = [

114

["members_can_create_public_repositories", "Members can create public repositories", "Owners always can. Off: members ask an owner."],

115

["members_can_create_private_repositories", "Members can create private repositories", "Owners always can. Whoever creates a repository is its Admin."],

116

[

117

"members_can_change_repo_visibility",

118

"Repository admins can change visibility",

119

"Members with the Admin role on a repository can make it public or private. Off: owners only.",

120

],

121

[

122

"members_can_delete_repositories",

123

"Repository admins can delete and transfer repositories",

124

"Members with the Admin role on a repository can delete it, or transfer it to a workspace where they can create one. Off: owners only.",

125

],

126

[

127

"members_can_invite_outside_collaborators",

128

"Repository admins can add outside collaborators",

129

"Members with the Admin role on a repository can give a role on it to someone outside the workspace. Off: owners only.",

],

];

/** The member privileges a workspace carries, by name. */

134

function pickPrivileges(workspace: Workspace): Partial<MemberPrivileges> {

135

const picked: Partial<MemberPrivileges> = {};

136

for (const [key] of PRIVILEGES) {

137

const value = workspace[key];

138

if (typeof value === "boolean") picked[key] = value;

}

return picked;

}

type Answer = Route.ComponentProps["actionData"];

144

145

/** What the last save of `intent` came to: saved, or why not. */

146

function outcome(answer: Answer, intent: string): { saved: boolean; error: string | null } {

147

if (!answer || answer.intent !== intent) return { saved: false, error: null };

148

return { saved: "saved" in answer && answer.saved === true, error: "error" in answer ? (answer.error ?? null) : null };

149

}

150

151

/** Whether a save of `intent` is on its way. */

152

function useSaving(intent: string): boolean {

153

const navigation = useNavigation();

154

return navigation.state !== "idle" && navigation.formData?.get("intent") === intent;

155

}

156

157

/** One part of g1t: its sections, under its name and what the part covers. */

158

function Part({ icon, title, about, children }: { icon: ReactNode; title: string; about: string; children: ReactNode }) {

return (

{title}

</CardTitle>

<CardDescription>{about}</CardDescription>

168

</CardHeader>

169

<CardContent className="space-y-8 p-5">{children}</CardContent>

</section>

</Card>

);

}

/** A setting's heading inside a part, and a line on what it decides. */

176

function Setting({ title, about, soon, children }: { title: string; about: ReactNode; soon?: boolean; children: ReactNode }) {

return (

<div>

{title}

{soon && <Badge>Soon</Badge>}

182

</h3>

183

<p className="mt-1 text-xs leading-relaxed text-faint">{about}</p>

184

<div className="mt-3">{children}</div>

</div>

);

}

/** Saved, or why not, beside a Save button. */

190

function SaveRow({ intent, changed, answer }: { intent: string; changed: boolean; answer: Answer }) {

191

const saving = useSaving(intent);

192

const { saved, error } = outcome(answer, intent);

return (

Save

</SubmitButton>

{saved && !changed && !error && (

Saved.

</p>

)}

<ErrorText>{error}</ErrorText>

</div>

);

}

/**

* A setting g1t will have but does not yet: the control as it will be,

210

* off, with the rule that holds today, so nobody looks for it elsewhere.

211

*/

212

function Stub({ title, about, today, control }: { title: string; about: string; today: string; control: ReactNode }) {

return (

{control}

</div>

<span className="font-medium text-fg-soft">Not configurable yet; today:</span> {today}

</p>

</Setting>

);

}

/** A who-can choice as a stub shows it: the rule that holds, chosen and locked. */

226

function LockedChoice({ name, options, value }: { name: string; options: { value: string; label: string; description?: string }[]; value: string }) {

227

return (

228

229

{options.map((option) => (

))}

</RadioGroup>

);

}

const MEMBERS_OR_OWNERS = [

237

{ value: "members", label: "Any member", description: "The default." },

238

{ value: "owners", label: "Owners only" },

239

];

240

241

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

242

const { slug, base, privileges, teamCreation, membersCreateAgents, channels } = loaderData;

243

return (

244

245

<Part icon={<Code2 />} title="Code" about="What members may do with the workspace's repositories, beyond the role each repository gives them. Owners always can do all of it.">

<Stub

title="Members can fork private repositories"

250

about="Whether a member may make a fork of a private repository under their own name."

251

today="g1t has no personal forks, so nothing is forked; work happens on branches of the repository itself."

252

control={<SwitchCard title="Members can fork private repositories" checked={false} disabled />}

/>

</Part>

<Part icon={<UsersRound />} title="People and teams" about="Who may shape the workspace's teams.">

</Part>

<Part icon={<MessagesSquare />} title="Chat" about="Who may open channels and bring agents into conversations. What a channel's own members may do, its default channels and emoji are on Chat settings.">

{channels ? (

) : (

<p className="text-sm text-muted">Chat didn't answer. Reload to try again.</p>

</Setting>

)}

<Stub

title="Who can add agents to a conversation"

270

about="Who may invite a workspace agent into a channel or a group message."

271

today="any member of a channel can invite an agent to it, the way they invite a person; a personal agent is never invited anywhere."

272

control={<LockedChoice name="agents_in_channels" options={MEMBERS_OR_OWNERS} value="members" />}

273

/>

274

<Stub

275

title="Who can message agents directly"

276

about="Who may open a direct message with a workspace agent."

277

today="every member can message any workspace agent directly."

278

control={<LockedChoice name="agent_dms" options={MEMBERS_OR_OWNERS} value="members" />}

/>

</Part>

<Part icon={<Shapes />} title="Artifacts" about="Who may make the places documents live, and how a new one is shared.">

283

<Stub

284

title="Who can create spaces"

285

about="Who may add a space beside the ones the workspace has."

286

today="any member can create a space, from + beside Spaces in the Artifacts sidebar."

287

control={<LockedChoice name="create_spaces" options={MEMBERS_OR_OWNERS} value="members" />}

288

/>

289

<Stub

290

title="Default sharing"

291

about="Who a new artifact is shared with before its author chooses."

292

today="a new artifact is its author's, shared with the people, agents and teams they add, or opened to the workspace from its Share menu."

293

control={

294

<LockedChoice

295

name="default_sharing"

296

options={[

297

{ value: "author", label: "Its author", description: "Shared only with whom they add." },

298

{ value: "workspace", label: "Everyone in the workspace" },

]}

value="author"

/>

}

/>

</Part>

<Part icon={<Bot />} title="Agents" about="Who may bring agents into the workspace and give them money to spend.">

307

{membersCreateAgents == null ? (

308

309

<p className="text-sm text-muted">Agents didn't answer. Reload to try again.</p>

</Setting>

) : (

)}

<Stub

title="Who can create workspace agents"

316

about="Who may create an agent everyone in the workspace talks to and pays for."

317

today="owners create workspace agents; a member's personal agent can be promoted to one by an owner."

318

control={<LockedChoice name="workspace_agents" options={[{ value: "owners", label: "Owners only", description: "The rule today." }, { value: "members", label: "Any member" }]} value="owners" />}

319

/>

320

<Stub

321

title="Who can raise budgets"

322

about="Who may raise the workspace's agent budget, a person's or a team's."

323

today={`owners raise the agent budget and each person's; a team's maintainers raise their team's. Budgets are set on the Agents overview and under Spend.`}

324

control={<LockedChoice name="raise_budgets" options={[{ value: "owners", label: "Owners and team maintainers", description: "The rule today." }, { value: "members", label: "Any member, their own" }]} value="owners" />}

/>

</Part>

<Part icon={<Rocket />} title="Deployments and packages" about="Who may put code in front of people, and publish what others install.">

329

<Stub

330

title="Who can deploy to production"

331

about="Who may deploy a project's production environment, and redeploy or take it down."

332

today="anyone with Write on the project's repository redeploys or takes an app down; turning deployments on for a project takes Admin."

333

control={<LockedChoice name="deploy_production" options={[{ value: "write", label: "Write on the repository", description: "The rule today." }, { value: "admin", label: "Admin on the repository" }, { value: "owners", label: "Owners only" }]} value="write" />}

334

/>

335

<Stub

336

title="Who can publish packages"

337

about="Who may publish a new version of one of the workspace's packages."

338

today="anyone with Write on the package's repository, or a token given write on packages, publishes new versions and tags."

339

control={<LockedChoice name="publish_packages" options={[{ value: "write", label: "Write on the repository", description: "The rule today." }, { value: "admin", label: "Admin on the repository" }, { value: "owners", label: "Owners only" }]} value="write" />}

/>

</Part>

Each change is recorded in the{" "}

audit log

</Link>

. Every other setting of the workspace is in this sidebar.

</p>

</div>

);

}

/** What members get on every repository, which owners choose. */

355

function BasePermissionSetting({ base, slug, answer }: { base: BasePermission; slug: string; answer: Answer }) {

356

const [chosen, setChosen] = useState<BasePermission>(base);

357

return (

358

<Setting

359

title="Base permission"

360

about={`The role every member has on each of ${slug}'s repositories. Owners are Admins on all of them, and a role given to someone on one repository adds to this; it never takes away.`}

>

<Select name="base" value={chosen} onValueChange={(value) => setChosen(value as BasePermission)}>

</SelectTrigger>

{BASE_PERMISSIONS.map((value) => (

371

372

{BASE_PERMISSION_LABELS[value]}

</SelectItem>

))}

</SelectContent>

</Select>

<p className="text-sm text-muted">{BASE_MEANS[chosen]}</p>

</div>

</Form>

</Setting>

);

}

/** What members may do: create repositories, and what repository admins may do. */

386

function PrivilegesSetting({ privileges, answer }: { privileges: MemberPrivileges; answer: Answer }) {

387

const [chosen, setChosen] = useState<MemberPrivileges>(privileges);

388

const changed = PRIVILEGES.some(([key]) => chosen[key] !== privileges[key]);

return (

{PRIVILEGES.map(([key, title, about]) => (

394

<SwitchCard key={key} name={key} title={title} checked={chosen[key]} onCheckedChange={(on) => setChosen((current) => ({ ...current, [key]: on }))}>

{about}

</SwitchCard>

))}

</Form>

</Setting>

);

}

/** Who may create the workspace's teams. Teams already made stay as they are, whoever made them. */

405

function TeamCreationSetting({ setting, answer }: { setting: TeamCreation; answer: Answer }) {

406

const [choice, setChoice] = useState<TeamCreation>(setting);

return (

<RadioGroup name="team_creation" value={choice} onValueChange={(value) => setChoice(value as TeamCreation)} aria-label="Who can create teams" className="grid gap-2 sm:grid-cols-2">

</RadioGroup>

</Form>

</Setting>

);

}

/** Who may create public and private channels, saved by the chat service. */

422

function ChannelsSetting({ channels, slug, answer }: { channels: { public: ChatAllowed; private: ChatAllowed }; slug: string; answer: Answer }) {

423

const [chosen, setChosen] = useState(channels);

424

const changed = chosen.public !== channels.public || chosen.private !== channels.private;

425

return (

426

<Setting

427

title="Creating channels"

428

about={

429

<>

430

Whoever creates a channel becomes its first owner. Renaming, archiving, emoji and default channels are on{" "}

Chat settings

</Link>

.

</>

}

>

<div>

<h4 className="mb-2 text-xs font-medium text-fg-soft">Public channels</h4>

443

<RadioGroup name="public_channels" value={chosen.public} onValueChange={(value) => setChosen((now) => ({ ...now, public: value as ChatAllowed }))} aria-label="Who can create public channels">

</RadioGroup>

</div>

<div>

<h4 className="mb-2 text-xs font-medium text-fg-soft">Private channels</h4>

450

<RadioGroup name="private_channels" value={chosen.private} onValueChange={(value) => setChosen((now) => ({ ...now, private: value as ChatAllowed }))} aria-label="Who can create private channels">

</RadioGroup>

</div>

</div>

</Form>

</Setting>

);

}

/** Whether members create personal agents: on unless an owner turns it off. */

463

function PersonalAgentsSetting({ on, slug, answer }: { on: boolean; slug: string; answer: Answer }) {

464

const [checked, setChecked] = useState(on);

465

return (

466

<Setting

467

title="Personal agents"

468

about={

469

<>

470

A member's own agent: only they talk to it, in their direct message with it, and it spends from their budget. Owners can promote one to a workspace agent from its profile; budgets are on the{" "}

471