@naviyra/cloud-panel 0.0.3-beta2 → 0.0.3-beta3

package/apps/panel/app/ui/project-tools.jsx

@@ -0,0 +1,604 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Download, Folder, Plus, Save, Trash2, Upload } from "lucide-react";
+import { useConfirm } from "./confirm";
+import { useToast } from "./toast";
+
+async function api(url, options = {}) {
+  const response = await fetch(`/api/${url}`, {
+    ...options,
+    headers: { "Content-Type": "application/json", ...options.headers },
+  });
+  const body = await response.json().catch(() => ({}));
+  if (response.status === 401) {
+    window.location.href = "/login";
+    throw Error("Session expired");
+  }
+  if (!response.ok) throw Error(body.error || "Request failed");
+  return body;
+}
+
+function joinPath(dir, name) {
+  return dir ? `${dir}/${name}` : name;
+}
+
+function FileManager({ project, canWrite }) {
+  const confirm = useConfirm();
+  const toast = useToast();
+  const [path, setPath] = useState("");
+  const [entries, setEntries] = useState([]);
+  const [truncated, setTruncated] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [editor, setEditor] = useState(null);
+  const [content, setContent] = useState("");
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const load = async (next = path) => {
+    setLoading(true);
+    try {
+      const data = await api(
+        `projects/${project.id}/files?path=${encodeURIComponent(next)}`,
+      );
+      setPath(data.path || "");
+      setEntries(data.entries || []);
+      setTruncated(Boolean(data.truncated));
+    } catch (error) {
+      toast.failed(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    load("");
+  }, [project.id]);
+  const openEntry = async (entry) => {
+    if (entry.kind === "link") {
+      toast.failed("Links cannot be opened");
+      return;
+    }
+    const next = joinPath(path, entry.name);
+    if (entry.kind === "dir") {
+      setEditor(null);
+      await load(next);
+      return;
+    }
+    setBusy(true);
+    try {
+      const file = await api(
+        `projects/${project.id}/files?path=${encodeURIComponent(next)}&read=1`,
+      );
+      if (file.binary) {
+        setEditor(null);
+        toast.failed("This file is binary. Download it or replace it with an upload.");
+        return;
+      }
+      setEditor(file.path);
+      setContent(file.content || "");
+    } catch (error) {
+      toast.failed(error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const save = async () => {
+    setBusy(true);
+    try {
+      await api(`projects/${project.id}/files`, {
+        method: "PUT",
+        body: JSON.stringify({ path: editor, content }),
+      });
+      toast.success("File saved. Restart the application if it is already running.");
+    } catch (error) {
+      toast.failed(error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const create = async (kind) => {
+    const name = draft.trim();
+    if (!name || name.includes("/") || name.includes("\\") || name === "..") {
+      toast.failed("Use a file or folder name without slashes");
+      return;
+    }
+    setBusy(true);
+    try {
+      const target = joinPath(path, name);
+      if (kind === "dir") {
+        await api(`projects/${project.id}/files`, {
+          method: "PUT",
+          body: JSON.stringify({ action: "mkdir", path: target }),
+        });
+        toast.success("Folder created.");
+      } else {
+        await api(`projects/${project.id}/files`, {
+          method: "PUT",
+          body: JSON.stringify({ path: target, content: "" }),
+        });
+        setEditor(target);
+        setContent("");
+        toast.success("File created.");
+      }
+      setDraft("");
+      await load(path);
+    } catch (error) {
+      toast.failed(error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const remove = async (entry) => {
+    const target = joinPath(path, entry.name);
+    if (
+      !(await confirm({
+        title: `Delete ${entry.name}?`,
+        message: "This removes it from the application directory.",
+        confirmLabel: "Delete",
+      }))
+    )
+      return;
+    setBusy(true);
+    try {
+      await api(
+        `projects/${project.id}/files?path=${encodeURIComponent(target)}`,
+        { method: "DELETE" },
+      );
+      if (editor === target) setEditor(null);
+      toast.success("Deleted.");
+      await load(path);
+    } catch (error) {
+      toast.failed(error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const upload = async (event) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (file.size > 32 * 1024 * 1024) {
+      toast.failed("File is larger than 32 MB");
+      return;
+    }
+    setBusy(true);
+    try {
+      const target = joinPath(path, file.name);
+      const response = await fetch(
+        `/api/projects/${project.id}/files?path=${encodeURIComponent(target)}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/octet-stream" },
+          body: file,
+        },
+      );
+      const body = await response.json().catch(() => ({}));
+      if (!response.ok) throw Error(body.error || "Upload failed");
+      toast.success("File uploaded.");
+      await load(path);
+    } catch (error) {
+      toast.failed(error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const crumbs = path ? path.split("/") : [];
+  return (
+    <section className="panel">
+      <div className="section-heading">
+        <h2>File manager</h2>
+        <Folder size={17} />
+      </div>
+      <p className="muted">
+        Files in this application&apos;s deployed directory. A new deployment
+        replaces this folder.
+      </p>
+      <div className="file-crumbs">
+        <button type="button" onClick={() => load("")}>
+          app
+        </button>
+        {crumbs.map((part, index) => (
+          <button
+            key={part + index}
+            type="button"
+            onClick={() => load(crumbs.slice(0, index + 1).join("/"))}
+          >
+            {part}
+          </button>
+        ))}
+      </div>
+      {canWrite && (
+        <div className="file-actions">
+          <input
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            placeholder="New name"
+            aria-label="New file or folder name"
+          />
+          <button type="button" className="secondary" disabled={busy} onClick={() => create("file")}>
+            <Plus size={14} /> File
+          </button>
+          <button type="button" className="secondary" disabled={busy} onClick={() => create("dir")}>
+            <Folder size={14} /> Folder
+          </button>
+          <label className="secondary file-upload">
+            <Upload size={14} /> Upload
+            <input type="file" onChange={upload} disabled={busy} />
+          </label>
+        </div>
+      )}
+      {loading ? (
+        <p className="muted">Loading files…</p>
+      ) : entries.length === 0 ? (
+        <p className="muted">This folder is empty.</p>
+      ) : (
+        <div className="file-list">
+          {path && (
+            <button type="button" className="file-row" onClick={() => load(crumbs.slice(0, -1).join("/"))}>
+              <span>../</span>
+            </button>
+          )}
+          {entries.map((entry) => (
+            <div key={entry.name} className="file-row">
+              <button type="button" onClick={() => openEntry(entry)}>
+                <span>{entry.kind === "dir" ? `${entry.name}/` : entry.name}</span>
+                <small>
+                  {entry.kind === "file" && entry.size != null
+                    ? `${entry.size} B`
+                    : entry.kind}
+                </small>
+              </button>
+              <span className="file-row-actions">
+                {entry.kind === "file" && (
+                  <a
+                    href={`/api/projects/${project.id}/files?path=${encodeURIComponent(joinPath(path, entry.name))}&download=1`}
+                    aria-label={`Download ${entry.name}`}
+                  >
+                    <Download size={15} />
+                  </a>
+                )}
+                {canWrite && (
+                  <button type="button" onClick={() => remove(entry)} aria-label={`Delete ${entry.name}`}>
+                    <Trash2 size={15} />
+                  </button>
+                )}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+      {truncated && <p className="muted">Showing the first 500 entries.</p>}
+      {editor && (
+        <div className="file-editor-wrap">
+          <div className="section-heading">
+            <h2>{editor}</h2>
+          </div>
+          <textarea
+            className="file-editor"
+            value={content}
+            readOnly={!canWrite}
+            onChange={(event) => setContent(event.target.value)}
+            spellCheck={false}
+          />
+          {canWrite && (
+            <button type="button" className="primary" disabled={busy} onClick={save}>
+              <Save size={15} /> Save
+            </button>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function ApplicationSettings({ project, canWrite }) {
+  const toast = useToast();
+  const type = project.type || "nodejs";
+  const [startup, setStartup] = useState("");
+  const [working, setWorking] = useState(".");
+  const [publicDir, setPublicDir] = useState(".");
+  const [server, setServer] = useState("asgi");
+  const [rows, setRows] = useState([]);
+  const [base, setBase] = useState(project.runtime_config || {});
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    let cancel = false;
+    api(`projects/${project.id}`)
+      .then((row) => {
+        if (cancel) return;
+        const config = row.runtime_config || {};
+        setBase(config);
+        setStartup(config.startup_file || "");
+        setWorking(config.working_dir || ".");
+        setPublicDir(config.public_dir || ".");
+        setServer(config.python_server || "asgi");
+        setRows(
+          Object.entries(config.env || {}).map(([key, value]) => ({ key, value })),
+        );
+      })
+      .catch((error) => toast.failed(error.message));
+    return () => {
+      cancel = true;
+    };
+  }, [project.id, toast]);
+  const save = async () => {
+    const env = {};
+    for (const row of rows) {
+      const key = row.key.trim();
+      if (!key) continue;
+      if (env[key] !== undefined) {
+        toast.failed(`${key} is listed more than once`);
+        return;
+      }
+      env[key] = row.value;
+    }
+    setBusy(true);
+    try {
+      await api(`projects/${project.id}/config`, {
+        method: "PUT",
+        body: JSON.stringify({
+          type,
+          runtime_config: {
+            ...base,
+            startup_file: startup.trim(),
+            working_dir: working.trim() || ".",
+            public_dir: publicDir.trim() || ".",
+            python_server: server,
+            env,
+          },
+        }),
+      });
+      toast.success("Application settings saved. Redeploy to apply them.");
+    } catch (error) {
+      toast.failed(error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const showStartup = ["nodejs", "python", "go"].includes(type);
+  const showWorking = ["nodejs", "python", "go", "custom"].includes(type);
+  const showPublic = ["php", "static"].includes(type);
+  return (
+    <section className="panel">
+      <div className="section-heading">
+        <h2>Application</h2>
+      </div>
+      <p className="muted">
+        Startup file, working directory, and environment for this application.
+        Redeploy after saving.
+      </p>
+      <div className="app-fields">
+        {showStartup && (
+          <label>
+            Startup file
+            <input
+              value={startup}
+              disabled={!canWrite}
+              placeholder={type === "python" ? "app.py" : "server.js"}
+              onChange={(event) => setStartup(event.target.value)}
+            />
+          </label>
+        )}
+        {showWorking && (
+          <label>
+            Working directory
+            <input
+              value={working}
+              disabled={!canWrite}
+              onChange={(event) => setWorking(event.target.value)}
+            />
+          </label>
+        )}
+        {showPublic && (
+          <label>
+            Document root
+            <input
+              value={publicDir}
+              disabled={!canWrite}
+              onChange={(event) => setPublicDir(event.target.value)}
+            />
+          </label>
+        )}
+        {type === "python" && (
+          <label>
+            Python server
+            <select
+              value={server}
+              disabled={!canWrite}
+              onChange={(event) => setServer(event.target.value)}
+            >
+              <option value="asgi">ASGI (uvicorn)</option>
+              <option value="wsgi">WSGI (waitress)</option>
+            </select>
+          </label>
+        )}
+      </div>
+      <h3>Environment</h3>
+      <div className="env-list">
+        {rows.map((row, index) => (
+          <div key={index} className="env-row">
+            <input
+              aria-label="Variable name"
+              value={row.key}
+              disabled={!canWrite}
+              placeholder="NAME"
+              onChange={(event) =>
+                setRows((current) =>
+                  current.map((item, itemIndex) =>
+                    itemIndex === index ? { ...item, key: event.target.value } : item,
+                  ),
+                )
+              }
+            />
+            <input
+              aria-label="Variable value"
+              value={row.value}
+              disabled={!canWrite}
+              placeholder="value"
+              onChange={(event) =>
+                setRows((current) =>
+                  current.map((item, itemIndex) =>
+                    itemIndex === index
+                      ? { ...item, value: event.target.value }
+                      : item,
+                  ),
+                )
+              }
+            />
+            {canWrite && (
+              <button
+                type="button"
+                className="secondary"
+                aria-label="Remove variable"
+                onClick={() =>
+                  setRows((current) => current.filter((_, itemIndex) => itemIndex !== index))
+                }
+              >
+                <Trash2 size={14} />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+      {canWrite && (
+        <div className="file-actions">
+          <button
+            type="button"
+            className="secondary"
+            onClick={() => setRows((current) => [...current, { key: "", value: "" }])}
+          >
+            <Plus size={14} /> Variable
+          </button>
+          <button type="button" className="primary" disabled={busy} onClick={save}>
+            <Save size={15} /> Save application
+          </button>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function connectionUri(row) {
+  const scheme = ["mysql", "mariadb"].includes(row.engine) ? "mysql" : "postgresql";
+  return `${scheme}://${encodeURIComponent(row.user)}:${encodeURIComponent(row.password)}@${row.host}:${row.port}/${encodeURIComponent(row.database)}`;
+}
+
+function ProjectDatabase({ project, canWrite, onOpenDatabases }) {
+  const toast = useToast();
+  const [name, setName] = useState(
+    (project.name || "app").replaceAll("-", "_").slice(0, 25),
+  );
+  const [databases, setDatabases] = useState([]);
+  const [secret, setSecret] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const load = async () => {
+    try {
+      const data = await api("databases");
+      setDatabases(data.databases || []);
+    } catch (error) {
+      toast.failed(error.message);
+    }
+  };
+  useEffect(() => {
+    load();
+  }, [project.id]);
+  const create = async (event) => {
+    event.preventDefault();
+    setBusy(true);
+    try {
+      const created = await api("databases", {
+        method: "POST",
+        body: JSON.stringify({ name }),
+      });
+      setSecret(created);
+      toast.success("Database created.");
+      await load();
+    } catch (error) {
+      toast.failed(error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const useInApplication = async () => {
+    if (!secret?.password) return;
+    setBusy(true);
+    try {
+      const current = await api(`projects/${project.id}`);
+      const config = current.runtime_config || {};
+      await api(`projects/${project.id}/config`, {
+        method: "PUT",
+        body: JSON.stringify({
+          type: current.type,
+          runtime_config: {
+            ...config,
+            env: { ...(config.env || {}), DATABASE_URL: connectionUri(secret) },
+          },
+        }),
+      });
+      toast.success("Connection saved on the application. Redeploy to apply it.");
+    } catch (error) {
+      toast.failed(error.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <section className="panel">
+      <div className="section-heading">
+        <h2>Database</h2>
+      </div>
+      <p className="muted">
+        Create a database for this application and store its connection in the
+        application environment.
+      </p>
+      {canWrite && (
+        <form className="app-fields" onSubmit={create}>
+          <label>
+            Database name
+            <input value={name} onChange={(event) => setName(event.target.value)} required />
+          </label>
+          <button type="submit" className="primary" disabled={busy}>
+            Create database
+          </button>
+        </form>
+      )}
+      {secret?.password && (
+        <div className="connection-box">
+          <p>Password shown once. Copy it into the application now.</p>
+          <code>{connectionUri(secret)}</code>
+          {canWrite && (
+            <button type="button" className="secondary" disabled={busy} onClick={useInApplication}>
+              Save connection on this application
+            </button>
+          )}
+        </div>
+      )}
+      {databases.length > 0 && (
+        <ul className="db-mini">
+          {databases.map((item) => (
+            <li key={item.id}>
+              <strong>{item.name}</strong>
+              <span>
+                {item.engine} · {item.host}:{item.port} · {item.database}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+      <button type="button" className="secondary" onClick={onOpenDatabases}>
+        Open database browser
+      </button>
+    </section>
+  );
+}
+
+export function ProjectWorkspace({ tab, project, canWrite, onOpenDatabases }) {
+  if (tab === "files") return <FileManager project={project} canWrite={canWrite} />;
+  if (tab === "application")
+    return <ApplicationSettings project={project} canWrite={canWrite} />;
+  return (
+    <ProjectDatabase
+      project={project}
+      canWrite={canWrite}
+      onOpenDatabases={onOpenDatabases}
+    />
+  );
+}

package/apps/panel/app/ui/toast.jsx

@@ -0,0 +1,90 @@
+"use client";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { X } from "lucide-react";
+
+const ToastContext = createContext(null);
+
+export function useToast() {
+  const toast = useContext(ToastContext);
+  if (!toast) throw Error("Toast is unavailable");
+  return toast;
+}
+
+export function ToastProvider({ children }) {
+  const [items, setItems] = useState([]);
+  const seq = useRef(0);
+  const dismiss = useCallback((id) => {
+    setItems((current) => current.filter((item) => item.id !== id));
+  }, []);
+  const show = useCallback((message, tone = "success") => {
+    const text = String(message || "").trim();
+    if (!text) return;
+    setItems((current) => {
+      if (current.some((item) => item.message === text && item.tone === tone))
+        return current;
+      seq.current += 1;
+      return [...current, { id: seq.current, message: text, tone }].slice(-4);
+    });
+  }, []);
+  const api = useRef({
+    success(message) {
+      show(message, "success");
+    },
+    progress(message) {
+      show(message, "progress");
+    },
+    failed(message) {
+      show(message, "failed");
+    },
+  });
+  api.current.success = (message) => show(message, "success");
+  api.current.progress = (message) => show(message, "progress");
+  api.current.failed = (message) => show(message, "failed");
+  const toast = useRef({
+    success: (message) => api.current.success(message),
+    progress: (message) => api.current.progress(message),
+    failed: (message) => api.current.failed(message),
+  }).current;
+  return (
+    <ToastContext.Provider value={toast}>
+      {children}
+      <div className="toast-stack">
+        {items.map((item) => (
+          <ToastCard key={item.id} item={item} onClose={() => dismiss(item.id)} />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+function ToastCard({ item, onClose }) {
+  const close = useRef(onClose);
+  close.current = onClose;
+  useEffect(() => {
+    const timer = setTimeout(() => close.current(), 10000);
+    return () => clearTimeout(timer);
+  }, [item.id]);
+  return (
+    <div
+      className={`toast ${item.tone}`}
+      role={item.tone === "failed" ? "alert" : "status"}
+    >
+      <div className="toast-row">
+        <p>{item.message}</p>
+        <button type="button" aria-label="Dismiss notification" onClick={onClose}>
+          <X size={16} />
+        </button>
+      </div>
+      <div className="toast-track" aria-hidden="true">
+        <span className="toast-progress" />
+      </div>
+    </div>
+  );
+}