@rebasepro/studio 0.17.3 → 0.18.0

package/src/components/ApiKeys/permissions.ts

@@ -1,145 +0,0 @@
-/**
- * The vocabulary of an API key's permission entries.
- *
- * A permission entry is `{ collection, operations }`, but `collection` is not
- * only a collection: the same field addresses three namespaces, and the guard
- * that enforces them lives in `@rebasepro/server`
- * (`auth/api-keys/api-key-permission-guard.ts`):
- *
- * - `"*"`               — every collection, every custom function, and storage
- * - `"storage"`         — the storage routes
- * - `"functions"`       — every custom function, including the function index
- * - `"functions/<name>"`— one named function
- * - anything else       — the collection with that slug
- *
- * The UI used to label the field "Collection slug or *", which made two of
- * those namespaces undiscoverable and made `"*"` read as "all collections"
- * when it also hands over storage and every function. This module is the one
- * place that knows the mapping, so the picker, the row description, the grant
- * summary and the detail panel cannot drift from each other.
- *
- * @module
- */
-
-import type { ApiKeyPermission } from "@rebasepro/types";
-
-/** Grants every collection, every function, and storage. */
-export const RESOURCE_EVERYTHING = "*";
-/** Grants the storage routes. */
-export const RESOURCE_STORAGE = "storage";
-/** Grants every custom function. */
-export const RESOURCE_ALL_FUNCTIONS = "functions";
-/** Prefix addressing a single custom function. */
-export const FUNCTION_PREFIX = "functions/";
-
-export type ResourceKind =
-    | "everything"
-    | "storage"
-    | "all-functions"
-    | "function"
-    | "collection";
-
-export interface ParsedResource {
-    kind: ResourceKind;
-    /** The function name for `"function"`, the slug for `"collection"`. */
-    name: string;
-}
-
-/** Classify a raw `collection` field into the namespace it addresses. */
-export function parseResource(collection: string): ParsedResource {
-    const value = collection.trim();
-    if (value === RESOURCE_EVERYTHING) return { kind: "everything", name: "" };
-    if (value === RESOURCE_STORAGE) return { kind: "storage", name: "" };
-    if (value === RESOURCE_ALL_FUNCTIONS) return { kind: "all-functions", name: "" };
-    if (value.startsWith(FUNCTION_PREFIX)) {
-        return { kind: "function", name: value.slice(FUNCTION_PREFIX.length) };
-    }
-    return { kind: "collection", name: value };
-}
-
-/**
- * Short label for a resource — what a picker or a chip shows.
- *
- * Deliberately not the raw value: `"*"` alone is the thing nobody could read.
- */
-export function resourceLabel(collection: string): string {
-    const { kind, name } = parseResource(collection);
-    switch (kind) {
-        case "everything": return "Everything";
-        case "storage": return "Storage";
-        case "all-functions": return "All functions";
-        case "function": return name ? `${name}()` : "Function";
-        case "collection": return name || "—";
-    }
-}
-
-/**
- * The resource as a sentence fragment, for "this key can read <fragment>".
- *
- * `"everything"` spells out all three namespaces, because that is exactly the
- * fact the old `*` input hid.
- */
-export function resourcePhrase(collection: string): string {
-    const { kind, name } = parseResource(collection);
-    switch (kind) {
-        case "everything": return "every collection, every custom function and storage";
-        case "storage": return "storage";
-        case "all-functions": return "every custom function";
-        case "function": return name ? `the ${name} function` : "one function";
-        case "collection": return name ? `the ${name} collection` : "an unnamed collection";
-    }
-}
-
-/** How each operation reads for a given namespace, so the sentence stays true. */
-function operationPhrase(kind: ResourceKind, operation: string): string {
-    if (kind === "all-functions" || kind === "function") {
-        // Functions are invoked, not written to; the HTTP method still picks
-        // the operation, so a POST-only function needs `write`.
-        return operation === "read" ? "call (GET)"
-            : operation === "write" ? "call (POST, PUT, PATCH)"
-                : "call (DELETE)";
-    }
-    if (kind === "storage") {
-        return operation === "read" ? "download from"
-            : operation === "write" ? "upload to"
-                : "delete from";
-    }
-    return operation;
-}
-
-/** Join with an Oxford-less "and", the way the rest of the panel reads. */
-function joinPhrases(parts: string[]): string {
-    if (parts.length <= 1) return parts[0] ?? "";
-    return `${parts.slice(0, -1).join(", ")} and ${parts[parts.length - 1]}`;
-}
-
-/**
- * One plain sentence per permission entry: what the key will actually be able
- * to do. An entry with no operations selected grants nothing and says so,
- * rather than being silently dropped at submit time.
- */
-export function grantSentence(perm: ApiKeyPermission): string {
-    const { kind } = parseResource(perm.collection);
-    const target = resourcePhrase(perm.collection);
-    if (perm.operations.length === 0) return `No access to ${target}`;
-    const verbs = joinPhrases(perm.operations.map(op => operationPhrase(kind, op)));
-    const verb = verbs.charAt(0).toUpperCase() + verbs.slice(1);
-    return `${verb} ${target}`;
-}
-
-/**
- * Dense one-line summary for list rows and the created-key confirmation.
- *
- * The wildcard wins over everything else in the array, because the guard
- * returns on the first match — a key holding `*` is a full-access key no
- * matter what else is listed beside it.
- */
-export function permissionSummary(perms: ApiKeyPermission[]): string {
-    if (perms.length === 0) return "No permissions";
-    const wildcard = perms.find(p => p.collection === RESOURCE_EVERYTHING);
-    if (wildcard) return `Everything (${wildcard.operations.join(", ")})`;
-    if (perms.length === 1) {
-        return `${resourceLabel(perms[0].collection)} (${perms[0].operations.join(", ")})`;
-    }
-    return `${perms.length} resources`;
-}

package/src/components/AuthSimulationSelector.tsx

@@ -1,72 +0,0 @@
-import React from "react";
-import { Button, cls, iconSize, KeyRoundIcon, Typography } from "@rebasepro/ui";
-import { UserSelectPopover, SelectableUser } from "@rebasepro/app";
-
-export interface AuthSimulationSelectorProps {
-    authMode: "jwt" | "none";
-    setAuthMode: (mode: "jwt" | "none") => void;
-    selectedUser: SelectableUser | null;
-    setSelectedUser: (user: SelectableUser | null) => void;
-    users: SelectableUser[];
-    loading?: boolean;
-    currentUser: SelectableUser | null;
-}
-
-export function AuthSimulationSelector({
-    authMode,
-    setAuthMode,
-    selectedUser,
-    setSelectedUser,
-    users,
-    loading,
-    currentUser
-}: AuthSimulationSelectorProps) {
-    return (
-        <div className="flex flex-wrap items-center gap-3">
-            <KeyRoundIcon size={iconSize.small} className="text-text-secondary dark:text-text-secondary-dark" />
-            <Typography
-                variant="caption"
-                className="text-text-secondary dark:text-text-secondary-dark text-xs font-medium"
-            >
-                Auth:
-            </Typography>
-            <Button
-                size="small"
-                variant={authMode === "jwt" ? "outlined" : "outlined"}
-                color={authMode === "jwt" ? "primary" : "neutral"}
-                onClick={() => setAuthMode("jwt")}
-                className="rounded-full !px-3 !py-1 !text-xs"
-            >
-                JWT Token
-            </Button>
-            <Button
-                size="small"
-                variant={authMode === "none" ? "outlined" : "outlined"}
-                color={authMode === "none" ? "error" : "neutral"}
-                onClick={() => setAuthMode("none")}
-                className="rounded-full !px-3 !py-1 !text-xs"
-            >
-                No Auth
-            </Button>
-
-            {authMode === "jwt" && (
-                <>
-                    <div className="w-px h-4 bg-surface-300 dark:bg-surface-600 mx-1" />
-                    <Typography
-                        variant="caption"
-                        className="text-text-secondary dark:text-text-secondary-dark text-xs font-medium"
-                    >
-                        Run as:
-                    </Typography>
-                    <UserSelectPopover
-                        selectedUser={selectedUser}
-                        onUserSelected={setSelectedUser}
-                        users={users}
-                        loading={loading}
-                        currentUser={currentUser}
-                    />
-                </>
-            )}
-        </div>
-    );
-}

package/src/components/Backups/BackupsView.tsx

@@ -1,185 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import {
-    Alert,
-    Button,
-    Chip,
-    CircularProgress,
-    cls,
-    DatabaseIcon,
-    defaultBorderMixin,
-    DownloadIcon,
-    iconSize,
-    IconButton,
-    RefreshCwIcon,
-    Typography
-} from "@rebasepro/ui";
-import { useRebaseClient, useSnackbarController } from "@rebasepro/app";
-import type { BackupInfo, RebaseClient } from "@rebasepro/types";
-
-function formatSize(bytes: number | undefined): string {
-    if (bytes === undefined || bytes === null) return "—";
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
-}
-
-function formatDate(iso: string | undefined): string {
-    if (!iso) return "—";
-    const d = new Date(iso);
-    if (isNaN(d.getTime())) return "—";
-    return d.toLocaleString();
-}
-
-export function BackupsView() {
-    const client = useRebaseClient<RebaseClient>();
-    const snackbar = useSnackbarController();
-
-    const [backups, setBackups] = useState<BackupInfo[]>([]);
-    const [destinationKind, setDestinationKind] = useState<string>("local");
-    const [configured, setConfigured] = useState(true);
-    const [loading, setLoading] = useState(true);
-    const [downloading, setDownloading] = useState<string | null>(null);
-
-    const clientRef = useRef(client);
-    clientRef.current = client;
-    const snackbarRef = useRef(snackbar);
-    snackbarRef.current = snackbar;
-
-    const load = useCallback(async () => {
-        const c = clientRef.current;
-        if (!c?.backups) {
-            setLoading(false);
-            setConfigured(false);
-            return;
-        }
-        try {
-            const res = await c.backups.list();
-            setBackups(res.backups);
-            setDestinationKind(res.destinationKind);
-            setConfigured(res.configured);
-        } catch (e: unknown) {
-            snackbarRef.current.open({
-                type: "error",
-                message: e instanceof Error ? e.message : String(e)
-            });
-        } finally {
-            setLoading(false);
-        }
-    }, []);
-
-    useEffect(() => {
-        load();
-    }, [load]);
-
-    const handleDownload = async (backup: BackupInfo) => {
-        const c = clientRef.current;
-        if (!c?.backups) return;
-        setDownloading(backup.key);
-        try {
-            const blob = await c.backups.download(backup.key);
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            a.href = url;
-            a.download = backup.name;
-            document.body.appendChild(a);
-            a.click();
-            a.remove();
-            URL.revokeObjectURL(url);
-        } catch (e: unknown) {
-            snackbarRef.current.open({
-                type: "error",
-                message: e instanceof Error ? e.message : String(e)
-            });
-        } finally {
-            setDownloading(null);
-        }
-    };
-
-    // Backups API not available on this client (e.g. non-Postgres backend).
-    if (!client?.backups) {
-        return (
-            <div className="flex flex-col items-center justify-center h-full gap-4 text-center p-8">
-                <DatabaseIcon size={iconSize.large} className="text-surface-300 dark:text-surface-600"/>
-                <Typography variant="h6" color="secondary">Backups Not Available</Typography>
-                <Typography variant="body2" color="disabled" className="max-w-md">
-                    The backups API is not exposed by this backend.
-                </Typography>
-            </div>
-        );
-    }
-
-    if (loading) {
-        return (
-            <div className="flex items-center justify-center h-full">
-                <CircularProgress/>
-            </div>
-        );
-    }
-
-    return (
-        <div className="flex flex-col h-full w-full overflow-hidden bg-white dark:bg-surface-950">
-            {/* Header */}
-            <div className={cls("flex items-center justify-between px-5 py-2.5 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                <div className="flex items-center gap-2">
-                    <DatabaseIcon size={iconSize.small} className="text-primary"/>
-                    <Typography variant="subtitle2" className="font-semibold">Backups</Typography>
-                    <Chip size="smallest" className="bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300">{backups.length}</Chip>
-                    <Chip size="smallest" className="bg-surface-100 dark:bg-surface-800 text-surface-500 dark:text-surface-400 uppercase font-mono text-[10px]">{destinationKind}</Chip>
-                </div>
-                <IconButton size="small" onClick={load} title="Refresh">
-                    <RefreshCwIcon size={iconSize.smallest}/>
-                </IconButton>
-            </div>
-
-            <div className="flex-1 overflow-y-auto p-5">
-                {!configured ? (
-                    <Alert color="info">
-                        <Typography variant="body2" className="text-[13px]">
-                            <strong>Backups are not configured.</strong> Set
-                            <code className="mx-1 px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-950 font-mono text-[12px]">BACKUP_DESTINATION</code>
-                            (a local path or an <code className="font-mono text-[12px]">s3://</code> / <code className="font-mono text-[12px]">gs://</code> URL) and create backups with
-                            <code className="mx-1 px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-950 font-mono text-[12px]">rebase db backup</code>
-                            or a scheduled cron. See docs/backups.md.
-                        </Typography>
-                    </Alert>
-                ) : backups.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center h-full gap-3 text-center">
-                        <DatabaseIcon size={iconSize.large} className="text-surface-200 dark:text-surface-700"/>
-                        <Typography variant="body2" color="disabled">
-                            No backups found yet. Run <code className="font-mono text-[12px]">rebase db backup</code> or wait for the next scheduled run.
-                        </Typography>
-                    </div>
-                ) : (
-                    <div className="space-y-2 max-w-3xl">
-                        {backups.map(backup => (
-                            <div
-                                key={backup.key}
-                                className={cls("flex items-center gap-3 px-4 py-3 rounded-lg border bg-white dark:bg-surface-900", defaultBorderMixin)}
-                            >
-                                <DatabaseIcon size={iconSize.small} className="text-surface-400 shrink-0"/>
-                                <div className="flex-1 min-w-0">
-                                    <Typography variant="body2" className="truncate font-medium font-mono text-[12px]">{backup.name}</Typography>
-                                    <Typography variant="caption" color="secondary" className="text-[11px]">
-                                        {formatDate(backup.createdAt)} · {formatSize(backup.sizeBytes)}
-                                    </Typography>
-                                </div>
-                                <Button
-                                    size="small"
-                                    variant="outlined"
-                                    onClick={() => handleDownload(backup)}
-                                    disabled={downloading === backup.key}
-                                    startIcon={downloading === backup.key
-                                        ? <CircularProgress size="smallest"/>
-                                        : <DownloadIcon size={iconSize.smallest}/>}
-                                >
-                                    {downloading === backup.key ? "Downloading…" : "Download"}
-                                </Button>
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}