DataIndexPage

tcmts.studio.DataIndexPage · #szycrvex · term · runs on the server

is an async component

The app's data (its typed tables, as tcm data lists them): each table the codebase declares or has rows in, with its columns, how many rows, how many are stored as an older row type, when one was last written, and the definition declaring it (a test's tables, once they have rows).

import { dataTables } from "#codebase/tcmts/cli/data_pages";
import { isTestPath } from "#codebase/tcmts/cli/testing";
import { ago, at, servedCodebase, shareNow } from "#codebase/tcmts/share";
import { StudioFrame, studioShare } from "#codebase/tcmts/studio";

export async function DataIndexPage() {
  studioShare();
  const s = shareNow();
  if (!s.signedIn)
    return (
      <StudioFrame tab="data" title="Sign in">
        {null}
      </StudioFrame>
    );
  const cb = servedCodebase().cb;
  // (a table a test declares, the libraries' own tests' say, only once it has rows)
  const tables = dataTables(cb).filter((t) => t.rows > 0 || !t.path || !isTestPath(t.path));
  return (
    <StudioFrame tab="data" title="Data">
      <div className="pagehead">
        <h2 className="title">Data</h2>
        <span className="muted">
          the app's tables, as tcm dev and tcm start keep them on this machine
        </span>
      </div>
      <div className="box">
        {tables.length ? (
          tables.map((t) => (
            <a className="lib" key={t.table} href={at(`/data/${encodeURIComponent(t.table)}`)}>
              <div>
                <span className="name mono">{t.table}</span>
              </div>
              <div className="stat">
                <b>{t.rows}</b>
                {t.rows === 1 ? "row" : "rows"}
              </div>
              <div className="desc mono">
                {t.fields?.length
                  ? t.fields.map((f) => `${f.name}: ${f.type}`).join(", ")
                  : "its columns are whatever its rows have"}
              </div>
              <div className="meta">
                <span>{t.path ? `declared by ${t.path}` : "declared by nothing now"}</span>
                {t.last && <span>{`last written ${ago(t.last)}`}</span>}
                {t.older > 0 && <span className="warn">{`${t.older} as an older row type`}</span>}
              </div>
            </a>
          ))
        ) : (
          <div className="empty">
            No tables: a table is a definition made with the server library's table().
          </div>
        )}
      </div>
    </StudioFrame>
  );
}

uses

used by