NewBranchButton

tcmts.studio.NewBranchButton · #kh5p5bsw · term · runs in the browser

uses useState

Make a branch from the studio's own (tcm branch), and work on it (tcm switch) where the studio can: not under tcm dev, which serves its session's branch, where it's read instead.

import { refresh } from "#codebase/tcmts/react";
import { makeBranch, readBranch, toldOf } from "#codebase/tcmts/studio";
import { useState } from "react";
import {
  Button, Checkbox, Dialog, DialogTrigger, Heading, Input, Label, Popover, TextField,
} from "react-aria-components";

export function NewBranchButton({ from, canSwitch }: { from: string; canSwitch: boolean }) {
  const [name, setName] = useState("");
  const [work, setWork] = useState(true);
  const [busy, setBusy] = useState(false);
  return (
    <DialogTrigger onOpenChange={(open) => open && setName("")}>
      <Button className="btn">New branch</Button>
      <Popover className="menu-pop getit" placement="bottom end" offset={6}>
        <Dialog className="getit-body" aria-label="New branch">
          {({ close }) => (
            <form
              className="prodform"
              onSubmit={async (e) => {
                e.preventDefault();
                setBusy(true);
                const made = await toldOf(
                  makeBranch(name, canSwitch && work),
                  `Made ${name.trim()}`,
                  "Couldn't make it",
                );
                setBusy(false);
                if (!made) return;
                close();
                if (!(canSwitch && work)) void readBranch(name.trim()).then(() => refresh());
              }}
            >
              <Heading slot="title" className="getit-title">
                New branch from {from}
              </Heading>
              <TextField className="fieldrow" value={name} onChange={setName} aria-label="Its name">
                <Label>Its name</Label>
                <Input className="field mono" placeholder="try-something" />
              </TextField>
              {canSwitch ? (
                <Checkbox className="check" isSelected={work} onChange={setWork}>
                  <span className="box-mark" aria-hidden="true" />
                  Work on it (the codebase's own branch moves to it, as tcm switch)
                </Checkbox>
              ) : (
                <p className="muted">{`This studio stays on ${from}: the new branch is read here, and worked on elsewhere.`}</p>
              )}
              <div className="actions">
                <Button className="btn" onPress={close}>
                  Cancel
                </Button>
                <Button
                  className="btn primary"
                  type="submit"
                  isPending={busy}
                  isDisabled={!name.trim()}
                >
                  Make it
                </Button>
              </div>
            </form>
          )}
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}

uses

used by