ProductionForm

tcmts.studio.ProductionForm · #mjluuf7f · term · runs in the browser

uses useState

Set production up for the studio's traces: the server's address and its traces token (setProduction), its traces fetched at once (fetchProduction).

import { refresh } from "#codebase/tcmts/react";
import { toasts } from "#codebase/tcmts/share";
import { fetchProduction, setProduction } from "#codebase/tcmts/studio";
import { useState } from "react";
import { Button, Input, Label, TextField } from "react-aria-components";

export function ProductionForm({ url: was }: { url: string }) {
  const [url, setUrl] = useState(was);
  const [token, setToken] = useState("");
  const [busy, setBusy] = useState(false);
  return (
    <form
      className="prodform"
      onSubmit={async (e) => {
        e.preventDefault();
        setBusy(true);
        try {
          await setProduction(url, token);
          toasts.add({ title: await fetchProduction(), tone: "ok" }, { timeout: 5000 });
          refresh();
        } catch (err) {
          toasts.add(
            {
              title: "Couldn't read production's traces",
              description: (err as Error).message,
              tone: "bad",
            },
            { timeout: 10000 },
          );
        }
        setBusy(false);
      }}
    >
      <TextField className="fieldrow" value={url} onChange={setUrl} isRequired>
        <Label>Where it runs</Label>
        <Input className="field mono" placeholder="https://app.example.com" />
      </TextField>
      <TextField className="fieldrow" value={token} onChange={setToken} type="password" isRequired>
        <Label>Its traces token</Label>
        <Input className="field mono" placeholder="TCM_TRACES_TOKEN, as the server has it" />
      </TextField>
      <div className="actions">
        <Button className="btn primary" type="submit" isPending={busy}>
          {busy ? "Fetching…" : "Fetch its traces"}
        </Button>
      </div>
    </form>
  );
}

uses

used by