Function TableSchemaViewer

frontend/src/react/components/TableSchemaViewer.tsx:33–99

({
  database,
  schema,
  object,
  type,
  className,
}: Props)

 * engines without schemas) breadcrumb plus a Copy-to-clipboard button.
 */
export function TableSchemaViewer({
  database,
  schema,
  object,
  type,
  className,
}: Props) {
  const { t } = useTranslation();
  const [schemaString, setSchemaString] = useState<string>("");

  const engine = getInstanceResource(database).engine;
  const resourceName = object
    ? hasSchemaProperty(engine)
      ? `${schema}.${object}`
      : object
    : schema || database.name;

  useEffect(() => {
    let cancelled = false;
    const request = create(GetSchemaStringRequestSchema, {
      name: `${database.name}/schemaString`,
      type,
      schema,
      object,
    });
    void databaseServiceClientConnect
      .getSchemaString(request)
      .then((response) => {
        if (cancelled) return;
        setSchemaString(response.schemaString.trim());
      });
    return () => {
      cancelled = true;
    };
  }, [database.name, schema, object, type]);

  const handleCopy = async () => {
    await writeTextToClipboard(schemaString);
  };

  return (
    <div
      className={`w-full h-auto flex flex-col justify-start items-center ${className ?? ""}`}
    >
      <div className="w-full flex flex-row justify-between items-center gap-x-2 mb-2">
        <div className="text-sm text-control flex-1 truncate">
          {resourceName}
        </div>
        <Tooltip content={t("common.copy")}>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            disabled={!schemaString}
            onClick={handleCopy}
          >
            <Copy className="size-4" />
          </Button>