refactor(web): extract admin editor modals with deep-link routes
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -1,54 +1,80 @@
|
||||
import { useState } from "react";
|
||||
import { LuPencil, LuPlus, LuTrash2, LuX } from "react-icons/lu";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||||
import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useDeleteSecret,
|
||||
useOwners,
|
||||
useSecrets,
|
||||
useUpsertSecret,
|
||||
} from "../api/hooks.js";
|
||||
import { useDeleteSecret, useOwners, useSecrets } from "../api/hooks.js";
|
||||
import { SecretEditorModal } from "../components/SecretEditorModal.jsx";
|
||||
import { formatTime } from "../lib/format.jsx";
|
||||
|
||||
export function SecretsPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { owner: routeOwner, name: routeName } = useParams();
|
||||
const [params] = useSearchParams();
|
||||
const isNewRoute = /\/secrets\/new\/?$/.test(location.pathname);
|
||||
const isEditRoute = Boolean(routeOwner && routeName);
|
||||
|
||||
const { data: owners = [] } = useOwners();
|
||||
const [ownerFilter, setOwnerFilter] = useState("");
|
||||
const [ownerFilter, setOwnerFilter] = useState(
|
||||
() => routeOwner || params.get("owner") || "",
|
||||
);
|
||||
const { data: secrets = [], isLoading } = useSecrets(ownerFilter || undefined);
|
||||
const upsert = useUpsertSecret();
|
||||
const del = useDeleteSecret();
|
||||
const [mode, setMode] = useState(null);
|
||||
const [form, setForm] = useState({
|
||||
owner: "",
|
||||
name: "",
|
||||
value: "",
|
||||
});
|
||||
const [editor, setEditor] = useState(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState(null);
|
||||
const [highlightName, setHighlightName] = useState(() => routeName || "");
|
||||
const highlightRef = useRef(null);
|
||||
const openedRouteKey = useRef(null);
|
||||
|
||||
function openAdd() {
|
||||
setMode("add");
|
||||
setForm({
|
||||
owner: ownerFilter || owners[0] || "default",
|
||||
name: "",
|
||||
value: "",
|
||||
const listPath = ownerFilter
|
||||
? `/secrets?owner=${encodeURIComponent(ownerFilter)}`
|
||||
: "/secrets";
|
||||
|
||||
function closeEditor() {
|
||||
setEditor(null);
|
||||
openedRouteKey.current = null;
|
||||
if (isNewRoute || isEditRoute) {
|
||||
navigate(listPath, { replace: true });
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNewRoute) return;
|
||||
const key = `new:${params.get("owner") || ""}:${params.get("name") || ""}`;
|
||||
if (openedRouteKey.current === key) return;
|
||||
if (!params.get("owner") && !ownerFilter && owners.length === 0) return;
|
||||
const owner = params.get("owner") || ownerFilter || owners[0] || "default";
|
||||
if (params.get("owner")) setOwnerFilter(params.get("owner"));
|
||||
openedRouteKey.current = key;
|
||||
setEditor({
|
||||
mode: "add",
|
||||
initial: { owner, name: params.get("name") || "" },
|
||||
});
|
||||
}
|
||||
}, [isNewRoute, params, owners, ownerFilter]);
|
||||
|
||||
function openReplace(s) {
|
||||
setMode("replace");
|
||||
setForm({ owner: s.owner, name: s.name, value: "" });
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!isEditRoute) {
|
||||
if (!isNewRoute) openedRouteKey.current = null;
|
||||
return;
|
||||
}
|
||||
if (ownerFilter !== routeOwner) {
|
||||
setOwnerFilter(routeOwner);
|
||||
return;
|
||||
}
|
||||
const key = `edit:${routeOwner}/${routeName}`;
|
||||
if (openedRouteKey.current === key) return;
|
||||
openedRouteKey.current = key;
|
||||
setHighlightName(routeName);
|
||||
setEditor({
|
||||
mode: "replace",
|
||||
initial: { owner: routeOwner, name: routeName },
|
||||
});
|
||||
}, [isEditRoute, isNewRoute, routeOwner, routeName, ownerFilter]);
|
||||
|
||||
function closeForm() {
|
||||
setMode(null);
|
||||
setForm({ owner: "", name: "", value: "" });
|
||||
}
|
||||
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
upsert.mutate(
|
||||
{ owner: form.owner, name: form.name, value: form.value },
|
||||
{ onSuccess: closeForm },
|
||||
);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!highlightName || isLoading) return;
|
||||
highlightRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
||||
}, [highlightName, isLoading, secrets]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -58,7 +84,16 @@ export function SecretsPage() {
|
||||
<select
|
||||
className="select select-sm"
|
||||
value={ownerFilter}
|
||||
onChange={(e) => setOwnerFilter(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setOwnerFilter(e.target.value);
|
||||
setHighlightName("");
|
||||
navigate(
|
||||
e.target.value
|
||||
? `/secrets?owner=${encodeURIComponent(e.target.value)}`
|
||||
: "/secrets",
|
||||
{ replace: true },
|
||||
);
|
||||
}}
|
||||
>
|
||||
<option value="">all owners</option>
|
||||
{owners.map((o) => (
|
||||
@@ -67,7 +102,17 @@ export function SecretsPage() {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
ownerFilter
|
||||
? `/secrets/new?owner=${encodeURIComponent(ownerFilter)}`
|
||||
: "/secrets/new",
|
||||
)
|
||||
}
|
||||
>
|
||||
<LuPlus className="size-4" />
|
||||
Add
|
||||
</button>
|
||||
@@ -90,109 +135,59 @@ export function SecretsPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{secrets.map((s) => (
|
||||
<tr key={s.id} className="hover">
|
||||
<td className="font-mono">{s.owner}</td>
|
||||
<td className="font-mono">{s.name}</td>
|
||||
<td className="whitespace-nowrap">{formatTime(s.updated_at)}</td>
|
||||
<td className="text-right whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Replace value"
|
||||
onClick={() => openReplace(s)}
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
title="Delete"
|
||||
onClick={() => setConfirmDelete(s)}
|
||||
>
|
||||
<LuTrash2 className="size-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{secrets.map((s) => {
|
||||
const highlighted =
|
||||
highlightName &&
|
||||
s.name === highlightName &&
|
||||
(!ownerFilter || s.owner === ownerFilter);
|
||||
return (
|
||||
<tr
|
||||
key={s.id}
|
||||
ref={highlighted ? highlightRef : undefined}
|
||||
className={`hover ${highlighted ? "bg-primary/10 outline outline-1 outline-primary/40" : ""}`}
|
||||
>
|
||||
<td className="font-mono">{s.owner}</td>
|
||||
<td className="font-mono">{s.name}</td>
|
||||
<td className="whitespace-nowrap">{formatTime(s.updated_at)}</td>
|
||||
<td className="text-right whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Replace value"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/secrets/${encodeURIComponent(s.owner)}/${encodeURIComponent(s.name)}/edit`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
title="Delete"
|
||||
onClick={() => setConfirmDelete(s)}
|
||||
>
|
||||
<LuTrash2 className="size-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode ? (
|
||||
<form
|
||||
onSubmit={onSubmit}
|
||||
className="fieldset bg-base-100 border-base-300 rounded-box max-w-md border p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<legend className="fieldset-legend">
|
||||
{mode === "add" ? "New secret" : `Replace ${form.owner}/${form.name}`}
|
||||
</legend>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm btn-square"
|
||||
onClick={closeForm}
|
||||
aria-label="Close"
|
||||
>
|
||||
<LuX className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
{mode === "add" ? (
|
||||
<>
|
||||
<label className="label">Owner</label>
|
||||
{owners.length > 0 ? (
|
||||
<select
|
||||
className="select w-full"
|
||||
value={form.owner}
|
||||
onChange={(e) => setForm({ ...form, owner: e.target.value })}
|
||||
required
|
||||
>
|
||||
{owners.map((o) => (
|
||||
<option key={o} value={o}>
|
||||
{o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
className="input w-full"
|
||||
value={form.owner}
|
||||
onChange={(e) => setForm({ ...form, owner: e.target.value })}
|
||||
required
|
||||
/>
|
||||
)}
|
||||
<label className="label">Name</label>
|
||||
<input
|
||||
className="input w-full font-mono"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
required
|
||||
pattern="[A-Za-z0-9._-]+"
|
||||
title="Letters, numbers, dots, underscores, hyphens"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
<label className="label">Value</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input w-full"
|
||||
value={form.value}
|
||||
onChange={(e) => setForm({ ...form, value: e.target.value })}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<p className="text-xs opacity-60 mt-1">
|
||||
Values are encrypted at rest and never shown again after save.
|
||||
Values shorter than 8 characters are not redacted from logs.
|
||||
</p>
|
||||
{upsert.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(upsert.error)}</p>
|
||||
) : null}
|
||||
<button type="submit" className="btn btn-primary mt-2" disabled={upsert.isPending}>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
{editor ? (
|
||||
<SecretEditorModal
|
||||
mode={editor.mode}
|
||||
initial={editor.initial}
|
||||
onClose={closeEditor}
|
||||
onSaved={(saved) => {
|
||||
setHighlightName(saved?.name || editor.initial.name);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{confirmDelete ? (
|
||||
@@ -201,7 +196,9 @@ export function SecretsPage() {
|
||||
<h3 className="font-bold">
|
||||
Delete {confirmDelete.owner}/{confirmDelete.name}?
|
||||
</h3>
|
||||
<p className="text-sm mt-2">This cannot be undone. Workflows that retrieve this name will fail.</p>
|
||||
<p className="text-sm mt-2">
|
||||
This cannot be undone. Workflows that retrieve this name will fail.
|
||||
</p>
|
||||
{del.isError ? (
|
||||
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
|
||||
) : null}
|
||||
|
||||
@@ -1,66 +1,64 @@
|
||||
import { useState } from "react";
|
||||
import { LuPencil, LuPlus, LuTrash2, LuX } from "react-icons/lu";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useCreateUser,
|
||||
useDeleteUser,
|
||||
useUpdateUser,
|
||||
useUsers,
|
||||
} from "../api/hooks.js";
|
||||
import { useDeleteUser, useUsers } from "../api/hooks.js";
|
||||
import { UserEditorModal } from "../components/UserEditorModal.jsx";
|
||||
|
||||
export function UsersPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { username: routeUsername } = useParams();
|
||||
const isNewRoute = /\/users\/new\/?$/.test(location.pathname);
|
||||
const isEditRoute = Boolean(routeUsername) && !isNewRoute;
|
||||
|
||||
const { data: users = [], isLoading } = useUsers();
|
||||
const create = useCreateUser();
|
||||
const update = useUpdateUser();
|
||||
const del = useDeleteUser();
|
||||
const [mode, setMode] = useState(null);
|
||||
const [form, setForm] = useState({
|
||||
username: "",
|
||||
password: "",
|
||||
role: "operator",
|
||||
id: null,
|
||||
});
|
||||
const [editor, setEditor] = useState(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState(null);
|
||||
const openedRouteKey = useRef(null);
|
||||
|
||||
function openAdd() {
|
||||
setMode("add");
|
||||
setForm({ username: "", password: "", role: "operator", id: null });
|
||||
}
|
||||
|
||||
function openEdit(u) {
|
||||
setMode("edit");
|
||||
setForm({ username: u.username, password: "", role: u.role, id: u.id });
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
setMode(null);
|
||||
}
|
||||
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (mode === "add") {
|
||||
create.mutate(
|
||||
{
|
||||
username: form.username,
|
||||
password: form.password,
|
||||
role: form.role,
|
||||
},
|
||||
{ onSuccess: closeForm },
|
||||
);
|
||||
} else {
|
||||
const body = { id: form.id, role: form.role };
|
||||
if (form.password) body.password = form.password;
|
||||
update.mutate(body, { onSuccess: closeForm });
|
||||
function closeEditor() {
|
||||
setEditor(null);
|
||||
openedRouteKey.current = null;
|
||||
if (isNewRoute || isEditRoute) {
|
||||
navigate("/users", { replace: true });
|
||||
}
|
||||
}
|
||||
|
||||
const mutation = mode === "add" ? create : update;
|
||||
useEffect(() => {
|
||||
if (!isNewRoute) return;
|
||||
if (openedRouteKey.current === "new") return;
|
||||
openedRouteKey.current = "new";
|
||||
setEditor({ mode: "add" });
|
||||
}, [isNewRoute]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEditRoute) {
|
||||
if (!isNewRoute) openedRouteKey.current = null;
|
||||
return;
|
||||
}
|
||||
if (isLoading) return;
|
||||
const key = `edit:${routeUsername}`;
|
||||
if (openedRouteKey.current === key) return;
|
||||
openedRouteKey.current = key;
|
||||
const user = users.find((u) => u.username === routeUsername);
|
||||
if (!user) {
|
||||
setEditor({ mode: "add" });
|
||||
return;
|
||||
}
|
||||
setEditor({ mode: "edit", user });
|
||||
}, [isEditRoute, isNewRoute, routeUsername, isLoading, users]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h1 className="text-xl font-semibold">Users</h1>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => navigate("/users/new")}
|
||||
>
|
||||
<LuPlus className="size-4" />
|
||||
Add
|
||||
</button>
|
||||
@@ -90,7 +88,9 @@ export function UsersPage() {
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Edit"
|
||||
onClick={() => openEdit(u)}
|
||||
onClick={() =>
|
||||
navigate(`/users/${encodeURIComponent(u.username)}/edit`)
|
||||
}
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</button>
|
||||
@@ -110,53 +110,12 @@ export function UsersPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode ? (
|
||||
<form onSubmit={onSubmit} className="fieldset bg-base-100 border-base-300 rounded-box max-w-md border p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<legend className="fieldset-legend">
|
||||
{mode === "add" ? "New user" : form.username}
|
||||
</legend>
|
||||
<button type="button" className="btn btn-ghost btn-sm btn-square" onClick={closeForm} aria-label="Close">
|
||||
<LuX className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
{mode === "add" ? (
|
||||
<>
|
||||
<label className="label">Username</label>
|
||||
<input
|
||||
className="input w-full"
|
||||
value={form.username}
|
||||
onChange={(e) => setForm({ ...form, username: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
<label className="label">{mode === "add" ? "Password" : "New password"}</label>
|
||||
<input
|
||||
type="password"
|
||||
className="input w-full"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
required={mode === "add"}
|
||||
minLength={mode === "add" ? 8 : undefined}
|
||||
placeholder={mode === "edit" ? "leave blank to keep" : ""}
|
||||
/>
|
||||
<label className="label">Role</label>
|
||||
<select
|
||||
className="select w-full"
|
||||
value={form.role}
|
||||
onChange={(e) => setForm({ ...form, role: e.target.value })}
|
||||
>
|
||||
<option value="operator">operator</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
{mutation.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(mutation.error)}</p>
|
||||
) : null}
|
||||
<button type="submit" className="btn btn-primary mt-2" disabled={mutation.isPending}>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
{editor ? (
|
||||
<UserEditorModal
|
||||
mode={editor.mode}
|
||||
user={editor.user}
|
||||
onClose={closeEditor}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{confirmDelete ? (
|
||||
|
||||
@@ -1,95 +1,110 @@
|
||||
import { useState } from "react";
|
||||
import { LuPencil, LuPlus, LuTrash2, LuX } from "react-icons/lu";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||||
import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useDeleteVariable,
|
||||
useOwners,
|
||||
useUpsertVariable,
|
||||
useVariables,
|
||||
} from "../api/hooks.js";
|
||||
import { useDeleteVariable, useOwners, useVariables } from "../api/hooks.js";
|
||||
import { VariableEditorModal } from "../components/VariableEditorModal.jsx";
|
||||
import { formatTime } from "../lib/format.jsx";
|
||||
|
||||
const TYPES = ["string", "number", "boolean"];
|
||||
|
||||
function defaultValue(type) {
|
||||
if (type === "boolean") return false;
|
||||
if (type === "number") return "";
|
||||
return "";
|
||||
}
|
||||
|
||||
function displayValue(value) {
|
||||
if (typeof value === "string") return value === "" ? '""' : value;
|
||||
return String(value);
|
||||
}
|
||||
|
||||
export function VariablesPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { owner: routeOwner, name: routeName } = useParams();
|
||||
const [params] = useSearchParams();
|
||||
const isNewRoute = /\/variables\/new\/?$/.test(location.pathname);
|
||||
const isEditRoute = Boolean(routeOwner && routeName);
|
||||
|
||||
const { data: owners = [] } = useOwners();
|
||||
const [ownerFilter, setOwnerFilter] = useState("");
|
||||
const [ownerFilter, setOwnerFilter] = useState(
|
||||
() => routeOwner || params.get("owner") || "",
|
||||
);
|
||||
const { data: variables = [], isLoading } = useVariables(ownerFilter || undefined);
|
||||
const upsert = useUpsertVariable();
|
||||
const del = useDeleteVariable();
|
||||
const [mode, setMode] = useState(null);
|
||||
const [form, setForm] = useState({
|
||||
owner: "",
|
||||
name: "",
|
||||
type: "string",
|
||||
value: "",
|
||||
});
|
||||
const [formError, setFormError] = useState(null);
|
||||
const [editor, setEditor] = useState(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState(null);
|
||||
const [highlightName, setHighlightName] = useState(() => routeName || "");
|
||||
const highlightRef = useRef(null);
|
||||
const openedRouteKey = useRef(null);
|
||||
|
||||
function openAdd() {
|
||||
setMode("add");
|
||||
setFormError(null);
|
||||
setForm({
|
||||
owner: ownerFilter || owners[0] || "default",
|
||||
name: "",
|
||||
type: "string",
|
||||
value: "",
|
||||
});
|
||||
}
|
||||
const listPath = ownerFilter
|
||||
? `/variables?owner=${encodeURIComponent(ownerFilter)}`
|
||||
: "/variables";
|
||||
|
||||
function openEdit(row) {
|
||||
setMode("edit");
|
||||
setFormError(null);
|
||||
setForm({
|
||||
owner: row.owner,
|
||||
name: row.name,
|
||||
type: row.type,
|
||||
value: row.type === "number" ? String(row.value) : row.value,
|
||||
});
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
setMode(null);
|
||||
setFormError(null);
|
||||
setForm({ owner: "", name: "", type: "string", value: "" });
|
||||
}
|
||||
|
||||
function onTypeChange(type) {
|
||||
setForm({ ...form, type, value: defaultValue(type) });
|
||||
}
|
||||
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
let value = form.value;
|
||||
if (form.type === "number") {
|
||||
value = Number(form.value);
|
||||
if (!Number.isFinite(value)) {
|
||||
setFormError("value must be a finite number");
|
||||
return;
|
||||
}
|
||||
function closeEditor() {
|
||||
setEditor(null);
|
||||
openedRouteKey.current = null;
|
||||
if (isNewRoute || isEditRoute) {
|
||||
navigate(listPath, { replace: true });
|
||||
}
|
||||
if (form.type === "boolean") {
|
||||
value = form.value === true;
|
||||
}
|
||||
setFormError(null);
|
||||
upsert.mutate(
|
||||
{ owner: form.owner, name: form.name, type: form.type, value },
|
||||
{ onSuccess: closeForm },
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNewRoute) return;
|
||||
const key = `new:${params.get("owner") || ""}:${params.get("name") || ""}`;
|
||||
if (openedRouteKey.current === key) return;
|
||||
if (!params.get("owner") && !ownerFilter && owners.length === 0) return;
|
||||
const owner = params.get("owner") || ownerFilter || owners[0] || "default";
|
||||
if (params.get("owner")) setOwnerFilter(params.get("owner"));
|
||||
openedRouteKey.current = key;
|
||||
setEditor({
|
||||
mode: "add",
|
||||
initial: {
|
||||
owner,
|
||||
name: params.get("name") || "",
|
||||
type: "string",
|
||||
value: "",
|
||||
},
|
||||
});
|
||||
}, [isNewRoute, params, owners, ownerFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEditRoute) {
|
||||
if (!isNewRoute) openedRouteKey.current = null;
|
||||
return;
|
||||
}
|
||||
if (ownerFilter !== routeOwner) {
|
||||
setOwnerFilter(routeOwner);
|
||||
return;
|
||||
}
|
||||
if (isLoading) return;
|
||||
const key = `edit:${routeOwner}/${routeName}`;
|
||||
if (openedRouteKey.current === key) return;
|
||||
openedRouteKey.current = key;
|
||||
setHighlightName(routeName);
|
||||
const row = variables.find((v) => v.owner === routeOwner && v.name === routeName);
|
||||
if (row) {
|
||||
setEditor({
|
||||
mode: "edit",
|
||||
initial: {
|
||||
owner: row.owner,
|
||||
name: row.name,
|
||||
type: row.type,
|
||||
value: row.value,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
setEditor({
|
||||
mode: "add",
|
||||
initial: {
|
||||
owner: routeOwner,
|
||||
name: routeName,
|
||||
type: "string",
|
||||
value: "",
|
||||
},
|
||||
});
|
||||
}, [isEditRoute, isNewRoute, routeOwner, routeName, ownerFilter, isLoading, variables]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!highlightName || isLoading) return;
|
||||
highlightRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
||||
}, [highlightName, isLoading, variables]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
@@ -98,7 +113,16 @@ export function VariablesPage() {
|
||||
<select
|
||||
className="select select-sm"
|
||||
value={ownerFilter}
|
||||
onChange={(e) => setOwnerFilter(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setOwnerFilter(e.target.value);
|
||||
setHighlightName("");
|
||||
navigate(
|
||||
e.target.value
|
||||
? `/variables?owner=${encodeURIComponent(e.target.value)}`
|
||||
: "/variables",
|
||||
{ replace: true },
|
||||
);
|
||||
}}
|
||||
>
|
||||
<option value="">all owners</option>
|
||||
{owners.map((o) => (
|
||||
@@ -107,7 +131,17 @@ export function VariablesPage() {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
ownerFilter
|
||||
? `/variables/new?owner=${encodeURIComponent(ownerFilter)}`
|
||||
: "/variables/new",
|
||||
)
|
||||
}
|
||||
>
|
||||
<LuPlus className="size-4" />
|
||||
Add
|
||||
</button>
|
||||
@@ -132,144 +166,66 @@ export function VariablesPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{variables.map((row) => (
|
||||
<tr key={row.id} className="hover">
|
||||
<td className="font-mono">{row.owner}</td>
|
||||
<td className="font-mono">{row.name}</td>
|
||||
<td className="font-mono text-xs">{row.type}</td>
|
||||
<td className="font-mono text-xs max-w-xs truncate" title={displayValue(row.value)}>
|
||||
{displayValue(row.value)}
|
||||
</td>
|
||||
<td className="whitespace-nowrap">{formatTime(row.updated_at)}</td>
|
||||
<td className="text-right whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Edit"
|
||||
onClick={() => openEdit(row)}
|
||||
{variables.map((row) => {
|
||||
const highlighted =
|
||||
highlightName &&
|
||||
row.name === highlightName &&
|
||||
(!ownerFilter || row.owner === ownerFilter);
|
||||
return (
|
||||
<tr
|
||||
key={row.id}
|
||||
ref={highlighted ? highlightRef : undefined}
|
||||
className={`hover ${highlighted ? "bg-primary/10 outline outline-1 outline-primary/40" : ""}`}
|
||||
>
|
||||
<td className="font-mono">{row.owner}</td>
|
||||
<td className="font-mono">{row.name}</td>
|
||||
<td className="font-mono text-xs">{row.type}</td>
|
||||
<td
|
||||
className="font-mono text-xs max-w-xs truncate"
|
||||
title={displayValue(row.value)}
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
title="Delete"
|
||||
onClick={() => setConfirmDelete(row)}
|
||||
>
|
||||
<LuTrash2 className="size-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{displayValue(row.value)}
|
||||
</td>
|
||||
<td className="whitespace-nowrap">{formatTime(row.updated_at)}</td>
|
||||
<td className="text-right whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Edit"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/variables/${encodeURIComponent(row.owner)}/${encodeURIComponent(row.name)}/edit`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
title="Delete"
|
||||
onClick={() => setConfirmDelete(row)}
|
||||
>
|
||||
<LuTrash2 className="size-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode ? (
|
||||
<form
|
||||
onSubmit={onSubmit}
|
||||
className="fieldset bg-base-100 border-base-300 rounded-box max-w-md border p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<legend className="fieldset-legend">
|
||||
{mode === "add" ? "New variable" : `Edit ${form.owner}/${form.name}`}
|
||||
</legend>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm btn-square"
|
||||
onClick={closeForm}
|
||||
aria-label="Close"
|
||||
>
|
||||
<LuX className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
{mode === "add" ? (
|
||||
<>
|
||||
<label className="label">Owner</label>
|
||||
{owners.length > 0 ? (
|
||||
<select
|
||||
className="select w-full"
|
||||
value={form.owner}
|
||||
onChange={(e) => setForm({ ...form, owner: e.target.value })}
|
||||
required
|
||||
>
|
||||
{owners.map((o) => (
|
||||
<option key={o} value={o}>
|
||||
{o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
className="input w-full"
|
||||
value={form.owner}
|
||||
onChange={(e) => setForm({ ...form, owner: e.target.value })}
|
||||
required
|
||||
/>
|
||||
)}
|
||||
<label className="label">Name</label>
|
||||
<input
|
||||
className="input w-full font-mono"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
required
|
||||
pattern="[A-Za-z0-9._-]+"
|
||||
title="Letters, numbers, dots, underscores, hyphens"
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
<label className="label">Type</label>
|
||||
<select
|
||||
className="select w-full"
|
||||
value={form.type}
|
||||
onChange={(e) => onTypeChange(e.target.value)}
|
||||
>
|
||||
{TYPES.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<label className="label">Value</label>
|
||||
{form.type === "boolean" ? (
|
||||
<select
|
||||
className="select w-full"
|
||||
value={form.value === true ? "true" : "false"}
|
||||
onChange={(e) => setForm({ ...form, value: e.target.value === "true" })}
|
||||
>
|
||||
<option value="true">true</option>
|
||||
<option value="false">false</option>
|
||||
</select>
|
||||
) : form.type === "number" ? (
|
||||
<input
|
||||
type="number"
|
||||
className="input w-full font-mono"
|
||||
value={form.value}
|
||||
onChange={(e) => setForm({ ...form, value: e.target.value })}
|
||||
required
|
||||
step="any"
|
||||
/>
|
||||
) : (
|
||||
<textarea
|
||||
className="textarea w-full font-mono min-h-24"
|
||||
value={form.value}
|
||||
onChange={(e) => setForm({ ...form, value: e.target.value })}
|
||||
spellCheck={false}
|
||||
/>
|
||||
)}
|
||||
<p className="text-xs opacity-60 mt-1">
|
||||
Stored in plaintext. Use Secrets for credentials. In workflows use{" "}
|
||||
<span className="font-mono">$VAR_name</span> as a whole field.
|
||||
</p>
|
||||
{formError ? <p className="text-error text-sm">{formError}</p> : null}
|
||||
{upsert.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(upsert.error)}</p>
|
||||
) : null}
|
||||
<button type="submit" className="btn btn-primary mt-2" disabled={upsert.isPending}>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
{editor ? (
|
||||
<VariableEditorModal
|
||||
mode={editor.mode}
|
||||
initial={editor.initial}
|
||||
onClose={closeEditor}
|
||||
onSaved={(saved) => {
|
||||
setHighlightName(saved?.name || editor.initial.name);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{confirmDelete ? (
|
||||
|
||||
Reference in New Issue
Block a user