@rebasepro/studio 0.17.3 → 0.18.0

package/src/components/RLSEditor/PolicyEditor.tsx

@@ -1,399 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import {
-    Button,
-    cls,
-    defaultBorderMixin,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    HelpCircleIcon,
-    IconButton,
-    iconSize,
-    MultiSelect,
-    MultiSelectItem,
-    Paper,
-    Select,
-    SelectItem,
-    TextField,
-    Typography
-} from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-import { RLS_JWT_SQL, RLS_ROLES_SQL, RLS_UID_SQL } from "@rebasepro/types";
-import {
-    COMMAND_OPTIONS,
-    POLICY_PRESETS,
-    roleOptionsFor,
-    type PolicyCommand
-} from "./policy-presets";
-import { MonacoEditor } from "../SQLEditor/MonacoEditor";
-import type { PostgresPolicy } from "./RLSEditor";
-
-export interface PolicyEditorProps {
-    policy?: PostgresPolicy;
-    schema: string;
-    table: string;
-    /**
-     * Native PostgreSQL roles this database actually has, for the `TO` list.
-     *
-     * Supplied by the caller from `fetchAvailableRoles()`. Merged with the
-     * always-offered defaults by `roleOptionsFor`, never used in place of them:
-     * `public` is a keyword and never comes back from that query.
-     */
-    roleOptions?: readonly string[];
-    onSave: (policyData: Partial<PostgresPolicy>) => void;
-    onCancel: () => void;
-}
-
-export const PolicyEditor = ({
-    policy,
-    schema,
-    table,
-    roleOptions,
-    onSave,
-    onCancel
-}: PolicyEditorProps) => {
-
-    const { t } = useTranslation();
-    const [name, setName] = useState("");
-    const [helpOpen, setHelpOpen] = useState(false);
-    const [behavior, setBehavior] = useState<"PERMISSIVE" | "RESTRICTIVE">("PERMISSIVE");
-    const [command, setCommand] = useState<PolicyCommand>("ALL");
-    const [roles, setRoles] = useState<string[]>(["public"]);
-    const [usingExpr, setUsingExpr] = useState<string>("");
-    const [checkExpr, setCheckExpr] = useState<string>("");
-
-    const [selectedPreset, setSelectedPreset] = useState<string>("");
-
-    const availableRoles = useMemo(
-        () => roleOptionsFor(roleOptions, policy?.roles),
-        [roleOptions, policy]
-    );
-
-    useEffect(() => {
-        if (policy) {
-            setName(policy.policyname || "");
-            setBehavior(policy.permissive || "PERMISSIVE");
-            setCommand((policy.cmd as PolicyCommand) || "ALL");
-
-            const initialRoles = policy.roles
-                ? (Array.isArray(policy.roles) ? policy.roles : [policy.roles])
-                : ["public"];
-            setRoles(initialRoles as string[]);
-
-            setUsingExpr(policy.qual || "");
-            setCheckExpr(policy.with_check || "");
-        } else {
-            setName("");
-            setBehavior("PERMISSIVE");
-            setCommand("ALL");
-            setRoles(["public"]);
-            setUsingExpr("");
-            setCheckExpr("");
-            setSelectedPreset("");
-        }
-    }, [policy]);
-
-    const handlePresetChange = (presetId: string) => {
-        const preset = POLICY_PRESETS.find(p => p.id === presetId);
-        if (!preset) return;
-
-        setSelectedPreset(presetId);
-        setName(preset.policyname);
-        setBehavior(preset.permissive);
-        setCommand(preset.cmd);
-        setRoles(preset.roles);
-        setUsingExpr(preset.qual);
-        setCheckExpr(preset.with_check);
-    };
-
-    const showCheck = command === "ALL" || command === "INSERT" || command === "UPDATE";
-
-    const handleSave = () => {
-        onSave({
-            policyname: name,
-            permissive: behavior,
-            cmd: command,
-            roles: roles,
-            qual: usingExpr,
-            with_check: showCheck ? checkExpr : null
-        });
-    };
-
-    return (
-        <>
-            {/* Inline header: this editor renders as a full pane, not inside a Dialog,
-                so DialogTitle (Radix-bound) cannot be used here. */}
-            <Typography variant="h6" gutterBottom className="mt-8 mx-8 flex justify-between items-center w-full">
-                <div>
-                    <div>{policy ? t("studio_policy_edit") : t("studio_policy_create")}</div>
-                    <div className="text-sm font-normal text-text-secondary dark:text-text-secondary-dark tracking-wide mt-1">
-                        {t("studio_policy_defining_rules")} <span className="font-mono text-primary bg-primary-bg dark:bg-primary-bg-dark px-1 py-0.5 rounded">{schema}.{table}</span>
-                    </div>
-                </div>
-                <IconButton size="small" onClick={() => setHelpOpen(true)}>
-                    <HelpCircleIcon size={iconSize.smallest}/>
-                </IconButton>
-            </Typography>
-
-            <DialogContent className="p-4 md:p-6 border-t dark:border-surface-950 bg-surface-50 dark:bg-surface-950" includeMargin={false}>
-                <div className="max-w-4xl mx-auto">
-                <Paper className={cls("p-4 md:p-6 flex flex-col gap-6 bg-white dark:bg-surface-900 border-none sm:border-solid rounded-none sm:rounded-xl", defaultBorderMixin)}>
-
-                    {/* Presets - only for new policies */}
-                    {!policy && (
-                    <div className="flex flex-col gap-1.5 bg-primary/5 dark:bg-primary-bg-dark/20 p-3 sm:p-4 rounded-lg border border-primary/10 dark:border-primary/20">
-                        <Typography variant="caption" className="text-primary dark:text-primary-light uppercase tracking-wider">{t("studio_policy_template")}</Typography>
-                        <Select
-                            size="small"
-                            value={selectedPreset}
-                            onValueChange={handlePresetChange}
-                            position="item-aligned"
-                            placeholder={t("studio_policy_select_template")}
-                            className="bg-white dark:bg-surface-950"
-                        >
-                            {POLICY_PRESETS.map((preset) => (
-                                <SelectItem key={preset.id} value={preset.id}>
-                                    <div className="flex flex-col text-left">
-                                        <span className="text-sm">{preset.label}</span>
-                                        <span className="text-xs text-text-secondary dark:text-text-secondary-dark">{preset.description}</span>
-                                    </div>
-                                </SelectItem>
-                            ))}
-                        </Select>
-                    </div>
-                    )}
-
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
-                        {/* Policy Name */}
-                        <div className="flex flex-col gap-1.5">
-                            <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">{t("studio_policy_name")}</Typography>
-                            <TextField
-                                value={name}
-                                aria-label={t("studio_policy_name")}
-                                onChange={(e) => setName(e.target.value)}
-                                placeholder={t("studio_policy_name_placeholder")}
-                                className="w-full"
-                            />
-                        </div>
-
-                        {/* Behavior */}
-                        <div className="flex flex-col gap-1.5">
-                            <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">
-                                {t("studio_policy_behavior")} <code className="text-[10px] bg-surface-200 dark:bg-surface-950 text-text-secondary dark:text-text-secondary-dark px-1 py-0.5 rounded ml-1">AS</code>
-                            </Typography>
-                            <Select
-                                value={behavior}
-                                onValueChange={(val) => setBehavior(val as "PERMISSIVE" | "RESTRICTIVE")}
-                                position="item-aligned"
-                            >
-                                <SelectItem value="PERMISSIVE">
-                                    <div className="flex flex-col text-left">
-                                        <span className="">{t("studio_policy_permissive")}</span>
-                                        <span className="text-xs text-text-secondary dark:text-text-secondary-dark">{t("studio_policy_permissive_desc")}</span>
-                                    </div>
-                                </SelectItem>
-                                <SelectItem value="RESTRICTIVE">
-                                    <div className="flex flex-col text-left">
-                                        <span className="">{t("studio_policy_restrictive")}</span>
-                                        <span className="text-xs text-text-secondary dark:text-text-secondary-dark">{t("studio_policy_restrictive_desc")}</span>
-                                    </div>
-                                </SelectItem>
-                            </Select>
-                        </div>
-                    </div>
-
-                    {/* Command */}
-                    <div className="flex flex-col gap-1.5">
-                        <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">
-                            {t("studio_policy_command")} <code className="text-[10px] bg-surface-200 dark:bg-surface-950 text-text-secondary dark:text-text-secondary-dark px-1 py-0.5 rounded ml-1">FOR</code>
-                        </Typography>
-                        <div className="flex flex-wrap gap-1.5">
-                            {COMMAND_OPTIONS.map(cmd => (
-                                <Button
-                                    key={cmd}
-                                    size="small"
-                                    variant={command === cmd ? "filled" : "text"}
-                                    color="neutral"
-                                    onClick={() => setCommand(cmd)}
-                                    className="min-w-[80px]"
-                                >
-                                    {cmd}
-                                </Button>
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Roles */}
-                    <div className="flex flex-col gap-1.5">
-                        <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">
-                            {t("studio_policy_target_roles")} <code className="text-[10px] bg-surface-200 dark:bg-surface-950 text-text-secondary dark:text-text-secondary-dark px-1 py-0.5 rounded ml-1">TO</code>
-                        </Typography>
-                        <MultiSelect
-                            size="small"
-                            value={roles}
-                            onValueChange={setRoles}
-                            placeholder={t("studio_policy_roles_placeholder")}
-                        >
-                            {availableRoles.map(role => (
-                                <MultiSelectItem key={role} value={role}>
-                                    {role}
-                                </MultiSelectItem>
-                            ))}
-                        </MultiSelect>
-                    </div>
-
-                </Paper>
-
-                <div className="mt-8 flex flex-col gap-4">
-                    {/* USING Expression */}
-                    {command !== "INSERT" && (
-                        <div className="flex flex-col gap-1.5">
-                            <div className="flex flex-col gap-0.5">
-                                <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">{t("studio_policy_using_expr")}</Typography>
-                                <Typography variant="caption" className="text-text-secondary opacity-70">{t("studio_policy_using_expr_desc")}</Typography>
-                            </div>
-                            <div className={cls("h-32 border rounded-md overflow-hidden bg-white dark:bg-[#1e1e1e]", defaultBorderMixin)}>
-                                <MonacoEditor
-                                    value={usingExpr}
-                                    onChange={(v) => setUsingExpr(v || "")}
-                                    readOnly={false}
-                                    autoFocus={true}
-                                />
-                            </div>
-                        </div>
-                    )}
-
-                    {/* WITH CHECK Expression */}
-                    {showCheck && (
-                        <div className="flex flex-col gap-1.5 mt-2">
-                            <div className="flex flex-col gap-0.5">
-                                <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">{t("studio_policy_check_expr")}</Typography>
-                                <Typography variant="caption" className="text-text-secondary opacity-70">{t("studio_policy_check_expr_desc")}</Typography>
-                            </div>
-                            <div className={cls("h-32 border rounded-md overflow-hidden bg-white dark:bg-[#1e1e1e]", defaultBorderMixin)}>
-                                <MonacoEditor
-                                    value={checkExpr}
-                                    onChange={(v) => setCheckExpr(v || "")}
-                                    readOnly={false}
-                                    autoFocus={command === "INSERT"}
-                                />
-                            </div>
-                        </div>
-                    )}
-                </div>
-
-                </div>
-            </DialogContent>
-
-            <DialogActions>
-                <Button size="small" variant="text" color="neutral" onClick={onCancel}>
-                    {t("studio_policy_cancel")}
-                </Button>
-                <Button size="small" variant="filled" color="primary" onClick={handleSave} disabled={!name}>
-                    {t("studio_policy_save")}
-                </Button>
-            </DialogActions>
-
-            <Dialog open={helpOpen} onOpenChange={setHelpOpen} maxWidth="3xl">
-                <DialogTitle hidden>Row-Level Security Help</DialogTitle>
-                <DialogContent className="p-4 sm:p-6 lg:p-8 flex flex-col gap-6">
-                    <div>
-                        <Typography variant="h5" className="mb-2">{t("studio_policy_help_title")}</Typography>
-                        <Typography className="text-text-secondary dark:text-text-secondary-dark">
-                            {t("studio_policy_help_intro")}
-                        </Typography>
-                    </div>
-
-                    <div className="flex flex-col gap-4">
-                        <Paper className={cls("p-4 sm:p-5 flex flex-col gap-1", defaultBorderMixin)}>
-                            <Typography variant="subtitle2" className="text-primary dark:text-primary-light font-medium">{t("studio_policy_help_step1_title")}</Typography>
-                            <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark">
-                                {t("studio_policy_help_step1_desc")}
-                            </Typography>
-                        </Paper>
-
-                        <Paper className={cls("p-4 sm:p-5 flex flex-col gap-1", defaultBorderMixin)}>
-                            <Typography variant="subtitle2" className="text-primary dark:text-primary-light font-medium">{t("studio_policy_help_step2_title")}</Typography>
-                            <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark mb-1">
-                                {t("studio_policy_help_step2_desc")}
-                            </Typography>
-                            <ul className="list-disc pl-5 space-y-1 text-sm text-text-secondary dark:text-text-secondary-dark">
-                                <li><strong>public</strong>: {t("studio_policy_help_role_public")}</li>
-                                <li><strong>authenticated</strong>: {t("studio_policy_help_role_authenticated")}</li>
-                                <li><strong>anon</strong>: {t("studio_policy_help_role_anon")}</li>
-                            </ul>
-                        </Paper>
-
-                        <Paper className={cls("p-4 sm:p-5 flex flex-col gap-1", defaultBorderMixin)}>
-                            <Typography variant="subtitle2" className="text-primary dark:text-primary-light font-medium">{t("studio_policy_help_step3_title")}</Typography>
-                            <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark mb-1">
-                                {t("studio_policy_help_step3_desc")}
-                            </Typography>
-                            <div className={cls("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", defaultBorderMixin)}>
-                                Example: {RLS_UID_SQL} = uid
-                            </div>
-                            <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark">
-                                {t("studio_policy_help_step3_example")}
-                            </Typography>
-                        </Paper>
-
-                        <Paper className={cls("p-4 sm:p-5 flex flex-col gap-1", defaultBorderMixin)}>
-                            <Typography variant="subtitle2" className="text-primary dark:text-primary-light font-medium">{t("studio_policy_help_step4_title")}</Typography>
-                            <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark mb-1">
-                                {t("studio_policy_help_step4_desc")}
-                            </Typography>
-                            <div className={cls("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", defaultBorderMixin)}>
-                                Example: {RLS_UID_SQL} = uid
-                            </div>
-                            <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark">
-                                {t("studio_policy_help_step4_example")}
-                            </Typography>
-                        </Paper>
-
-                        <Paper className={cls("p-4 sm:p-5 flex flex-col gap-2 bg-primary/5 dark:bg-primary-bg-dark/10", defaultBorderMixin)}>
-                            <Typography variant="subtitle2" className="text-primary dark:text-primary-light font-medium">{t("studio_policy_help_auth_vars_title")}</Typography>
-                            <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark">
-                                {t("studio_policy_help_auth_vars_desc")}
-                            </Typography>
-                            <ul className="list-disc pl-5 space-y-2 text-sm text-text-secondary dark:text-text-secondary-dark font-normal">
-                                <li>
-                                    <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">{RLS_UID_SQL}</code>
-                                    <span className="block mt-0.5">Returns the current user&apos;s ID as text. Example: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">{RLS_UID_SQL} = uid</code></span>
-                                </li>
-                                <li>
-                                    <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">{RLS_JWT_SQL}</code>
-                                    <span className="block mt-0.5">Returns the full JWT payload as JSONB so you can check custom claims. Example: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">{RLS_JWT_SQL} -&gt;&gt; &apos;email&apos; = &apos;admin@example.com&apos;</code></span>
-                                </li>
-                                <li>
-                                    <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">{RLS_ROLES_SQL}</code>
-                                    <span className="block mt-0.5">Returns the user&apos;s role IDs as a comma-separated string. Best used with: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">string_to_array({RLS_ROLES_SQL}, &apos;,&apos;) @&gt; ARRAY[&apos;admin&apos;]</code></span>
-                                </li>
-                            </ul>
-                        </Paper>
-                    </div>
-
-                    <div className={cls("mt-2 flex flex-col sm:flex-row justify-between items-start sm:items-center bg-primary/5 dark:bg-primary-bg-dark/10 p-4 rounded-xl border border-primary/10 dark:border-primary/20", defaultBorderMixin)}>
-                        <Typography variant="body2" className="text-primary dark:text-primary-light mb-4 sm:mb-0 max-w-md">
-                            {t("studio_policy_help_docs_cta")}
-                        </Typography>
-                        <Button
-                            component="a"
-                            href="https://www.postgresql.org/docs/current/sql-createpolicy.html"
-                            target="_blank"
-                            variant="outlined"
-                            color="primary"
-                            size="small"
-                            className="whitespace-nowrap flex-shrink-0"
-                        >
-                            {t("studio_policy_help_read_docs")}
-                        </Button>
-                    </div>
-                </DialogContent>
-                <DialogActions className="p-4 sm:px-6 sm:pb-6 pt-0 border-t-0">
-                    <Button onClick={() => setHelpOpen(false)} variant="filled" color="primary">{t("studio_policy_help_got_it")}</Button>
-                </DialogActions>
-            </Dialog>
-        </>
-    );
-};