@deckbuilderkit/view-rest 0.0.0-stage → 0.1.0

package/src/rest/EnvironmentsDialog.tsx

@@ -0,0 +1,227 @@
+import { useEffect, useState } from 'react';
+import type { RestEnvironment, RestEnvVarInput } from '@deckbuilderkit/server-core/protocol';
+import { type ApiError, ErrorBanner, errorOf, Icon, Modal, useDialogs, useToast } from '@deckbuilderkit/ui';
+import { restApi as api } from '../client';
+import { t } from '../i18n';
+
+/** A variable row being edited. `from`: its stored name (secret kept on rename); `replace`: a secret whose value is being typed. */
+interface Row {
+  name: string;
+  value: string;
+  secret: boolean;
+  enabled: boolean;
+  set: boolean;
+  from?: string;
+  replace: boolean;
+}
+
+const toRows = (env: RestEnvironment | undefined): Row[] =>
+  (env?.vars ?? []).map((v) => ({ name: v.name, value: v.value, secret: v.secret, enabled: v.enabled, set: !!v.set, from: v.name, replace: false }));
+
+const toInput = (rows: Row[]): RestEnvVarInput[] =>
+  rows
+    .filter((r) => r.name.trim() || r.value)
+    .map((r) => {
+      const base = { name: r.name.trim(), secret: r.secret, enabled: r.enabled };
+      if (!r.secret || r.replace) return { ...base, value: r.value };
+      return r.from && r.from !== base.name ? { ...base, from: r.from } : base;
+    });
+
+const blank = (): Row => ({ name: '', value: '', secret: false, enabled: true, set: false, replace: false });
+
+interface Props {
+  environments: RestEnvironment[] | undefined;
+  /** The list changed on the server; reload it. */
+  onChanged: () => void;
+  /** Environment `id` was deleted (clear it when active). */
+  onDeleted: (id: string) => void;
+  onClose: () => void;
+}
+
+/** "Manage environments…": add, rename and delete environments and edit their variables; secret values are write-only. */
+export function EnvironmentsDialog({ environments, onChanged, onDeleted, onClose }: Props) {
+  const { confirm, prompt, element } = useDialogs();
+  const toast = useToast();
+  const [selected, setSelected] = useState<string | undefined>(environments?.[0]?.id);
+  const env = environments?.find((e) => e.id === selected);
+  const [rows, setRows] = useState<Row[]>(() => toRows(env));
+  const [error, setError] = useState<ApiError>();
+  const [busy, setBusy] = useState(false);
+  const dirty = JSON.stringify(rows) !== JSON.stringify(toRows(env));
+
+  useEffect(() => {
+    if (!env && environments?.length) setSelected(environments[0]!.id);
+  }, [env, environments]);
+  useEffect(() => setRows(toRows(env)), [env]);
+
+  const discardOk = async () => !dirty || (await confirm({ title: t('rest.env.discard'), okLabel: t('rest.env.discardOk'), danger: true }));
+
+  const select = async (id: string) => {
+    if (id === selected || !(await discardOk())) return;
+    setError(undefined);
+    setSelected(id);
+  };
+
+  const run = async (action: () => Promise<void>) => {
+    setBusy(true);
+    setError(undefined);
+    try {
+      await action();
+    } catch (err) {
+      setError(errorOf(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const askName = (title: string, value: string) =>
+    prompt({ title, label: t('rest.env.name'), value, validate: (v) => (v.trim() ? null : t('error.badEnvironmentName')) });
+
+  const add = async () => {
+    if (!(await discardOk())) return;
+    const name = await askName(t('rest.env.addTitle'), '');
+    if (!name) return;
+    await run(async () => {
+      const created = await api.createRestEnvironment({ name: name.trim(), vars: [] });
+      setSelected(created.id);
+      onChanged();
+    });
+  };
+
+  const rename = async () => {
+    if (!env || !(await discardOk())) return;
+    const name = await askName(t('rest.env.renameTitle'), env.name);
+    if (!name || name.trim() === env.name) return;
+    await run(async () => {
+      await api.updateRestEnvironment(env.id, { name: name.trim(), vars: toInput(toRows(env)) });
+      onChanged();
+    });
+  };
+
+  const remove = async () => {
+    if (!env) return;
+    if (!(await confirm({ title: t('rest.env.deleteTitle', { name: env.name }), okLabel: t('rest.delete'), danger: true }))) return;
+    await run(async () => {
+      await api.deleteRestEnvironment(env.id);
+      setSelected(environments?.find((e) => e.id !== env.id)?.id);
+      onDeleted(env.id);
+      onChanged();
+    });
+  };
+
+  const save = () =>
+    env &&
+    run(async () => {
+      await api.updateRestEnvironment(env.id, { name: env.name, vars: toInput(rows) });
+      onChanged();
+      toast({ message: t('rest.env.saved', { name: env.name }) });
+    });
+
+  const close = async () => {
+    if (await discardOk()) onClose();
+  };
+
+  const patch = (i: number, change: Partial<Row>) => setRows(rows.map((r, j) => (j === i ? { ...r, ...change } : r)));
+
+  const footer = (
+    <>
+      <button className="btn" onClick={() => void close()}>{t('rest.import.close')}</button>
+      <button className="btn btn-primary" disabled={busy || !env || !dirty} onClick={() => void save()}>{t('rest.save')}</button>
+    </>
+  );
+
+  return (
+    <Modal title={t('rest.env.title')} onClose={() => void close()} footer={footer}>
+      {error && <ErrorBanner error={error} compact />}
+      <div className="rest-env">
+        <aside className="rest-env-list">
+          <div className="rest-list-head">
+            <span className="mono-label">{t('rest.env.list')}</span>
+            <button className="btn btn-sm" disabled={busy} onClick={() => void add()}><Icon name="plus" /> {t('rest.new')}</button>
+          </div>
+          {environments?.length === 0 && <p className="muted">{t('rest.env.empty')}</p>}
+          {environments?.map((e) => (
+            <div key={e.id} className={`rest-item${e.id === selected ? ' active' : ''}`}>
+              <button className="rest-item-main" onClick={() => void select(e.id)}>
+                <span className="rest-item-name">{e.name}</span>
+              </button>
+              {e.id === selected && (
+                <span className="rest-item-actions">
+                  <button className="btn btn-ghost btn-sm btn-icon" disabled={busy} onClick={() => void rename()} aria-label={t('rest.rename')} title={t('rest.rename')}>
+                    <Icon name="edit" />
+                  </button>
+                  <button className="btn btn-ghost btn-sm btn-icon" disabled={busy} onClick={() => void remove()} aria-label={t('rest.delete')} title={t('rest.delete')}>
+                    <Icon name="trash" />
+                  </button>
+                </span>
+              )}
+            </div>
+          ))}
+        </aside>
+        {env && (
+          <div className="rest-env-vars">
+            <table className="rest-env-table">
+              <thead>
+                <tr>
+                  <th>{t('rest.env.var.enabled')}</th>
+                  <th>{t('rest.env.var.name')}</th>
+                  <th>{t('rest.env.var.value')}</th>
+                  <th>{t('rest.env.var.secret')}</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((r, i) => (
+                  <tr key={i}>
+                    <td>
+                      <input type="checkbox" checked={r.enabled} aria-label={t('rest.env.var.enabled')} onChange={(e) => patch(i, { enabled: e.target.checked })} />
+                    </td>
+                    <td>
+                      <input value={r.name} spellCheck={false} aria-label={t('rest.env.var.name')} onChange={(e) => patch(i, { name: e.target.value })} />
+                    </td>
+                    <td>
+                      {r.secret && !r.replace ? (
+                        <span className="row">
+                          <span className="muted">{r.set ? t('rest.env.var.set') : t('rest.env.var.notSet')}</span>
+                          <button className="btn btn-ghost btn-sm" onClick={() => patch(i, { replace: true, value: '' })}>{t('rest.env.var.replace')}</button>
+                        </span>
+                      ) : (
+                        <input
+                          type={r.secret ? 'password' : 'text'}
+                          value={r.value}
+                          spellCheck={false}
+                          autoComplete="off"
+                          aria-label={t('rest.env.var.value')}
+                          onChange={(e) => patch(i, { value: e.target.value })}
+                        />
+                      )}
+                    </td>
+                    <td>
+                      <input
+                        type="checkbox"
+                        checked={r.secret}
+                        aria-label={t('rest.env.var.secret')}
+                        // A stored secret turned plain is not revealed: its value starts empty.
+                        onChange={(e) => patch(i, e.target.checked ? { secret: true, replace: true } : { secret: false, replace: false, value: r.secret && !r.replace ? '' : r.value })}
+                      />
+                    </td>
+                    <td>
+                      <button className="btn btn-ghost btn-sm btn-icon" onClick={() => setRows(rows.filter((_, j) => j !== i))} aria-label={t('rest.env.var.remove')} title={t('rest.env.var.remove')}>
+                        <Icon name="trash" />
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <div>
+              <button className="btn btn-sm" onClick={() => setRows([...rows, blank()])}><Icon name="plus" /> {t('rest.env.var.add')}</button>
+            </div>
+            <p className="muted">{t('rest.env.hint')}</p>
+          </div>
+        )}
+      </div>
+      {element}
+    </Modal>
+  );
+}

package/src/rest/HistoryPanel.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import type { RestHistoryEntry } from '@deckbuilderkit/server-core/protocol';
+import { type ApiError, ErrorBanner, errorOf, Icon, useAsync, type useDialogs } from '@deckbuilderkit/ui';
+import { restApi as api } from '../client';
+import { t } from '../i18n';
+import { openRestTab } from './tabs-store';
+
+const timeOf = (at: number) => new Date(at).toLocaleString();
+
+/** Sent REST requests, newest first: search by method and URL, click to open the draft in a new tab, clear with a confirm. */
+export function HistoryPanel({ refresh, confirm, onClose }: { refresh: number; confirm: ReturnType<typeof useDialogs>['confirm']; onClose: () => void }) {
+  const [query, setQuery] = useState('');
+  const [debounced, setDebounced] = useState('');
+  const [actionError, setActionError] = useState<ApiError>();
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(query.trim()), 200);
+    return () => clearTimeout(timer);
+  }, [query]);
+  const history = useAsync(() => api.restHistory(debounced), [debounced, refresh]);
+
+  const open = (entry: RestHistoryEntry) => {
+    setActionError(undefined);
+    if (openRestTab(entry.draft) === null) setActionError({ message: t('rest.tab.full') } as ApiError);
+  };
+
+  const clear = async () => {
+    if (!(await confirm({ title: t('rest.history.clearTitle'), okLabel: t('rest.history.clear'), danger: true }))) return;
+    setActionError(undefined);
+    try {
+      await api.clearRestHistory();
+    } catch (err) {
+      setActionError(errorOf(err));
+    } finally {
+      history.reload();
+    }
+  };
+
+  return (
+    <aside className="rest-history">
+      <div className="rest-history-head">
+        <span className="mono-label">{t('rest.history.title')}</span>
+        <span className="spacer" />
+        <button className="btn btn-sm" onClick={() => void clear()} disabled={!history.data?.length}>{t('rest.history.clear')}</button>
+        <button className="btn btn-ghost btn-sm btn-icon" onClick={onClose} title={t('rest.history.close')} aria-label={t('rest.history.close')}>
+          <Icon name="close" />
+        </button>
+      </div>
+      <input
+        className="rest-history-search"
+        type="search"
+        value={query}
+        placeholder={t('rest.history.search')}
+        aria-label={t('rest.history.search')}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      {actionError && <ErrorBanner error={actionError} compact />}
+      {history.error && <ErrorBanner error={history.error} onRetry={history.reload} compact />}
+      {history.data?.length === 0 && <p className="muted">{t('rest.history.empty')}</p>}
+      <div className="rest-history-list">
+        {history.data?.map((entry) => (
+          <button key={entry.id} className="rest-history-item" onClick={() => open(entry)} title={entry.url}>
+            <span className="rest-method">{entry.method}</span>
+            <span className="rest-history-url">{entry.url}</span>
+            <span className={`rest-history-status${entry.error || entry.status >= 400 ? ' err' : ''}`}>{entry.error ?? entry.status}</span>
+            <span className="rest-history-meta">{entry.ms} ms · {timeOf(entry.at)}</span>
+          </button>
+        ))}
+      </div>
+    </aside>
+  );
+}

package/src/rest/ImportDialog.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import { type ImportedRequest, parseImport, warningText } from '@deckbuilderkit/editor';
+import { type ApiError, ErrorBanner, errorOf, Modal } from '@deckbuilderkit/ui';
+import { restApi as api } from '../client';
+import { t } from '../i18n';
+
+export const requestLabel = (r: ImportedRequest) => r.name ?? `${r.draft.method} ${r.draft.url}`;
+
+interface Props {
+  /** One parsed request goes into the editor. */
+  onLoad: (request: ImportedRequest) => void;
+  /** The chosen requests of a file with several are saved; rejects with the reason to show. */
+  onSaveMany: (requests: ImportedRequest[]) => Promise<void>;
+  onClose: () => void;
+}
+
+export function ImportDialog({ onLoad, onSaveMany, onClose }: Props) {
+  const [text, setText] = useState('');
+  const [parsed, setParsed] = useState<ImportedRequest[]>();
+  const [checked, setChecked] = useState<boolean[]>([]);
+  const [message, setMessage] = useState<string>();
+  const [error, setError] = useState<ApiError>();
+  const [busy, setBusy] = useState(false);
+
+  const parse = (source: string) => {
+    setError(undefined);
+    setMessage(undefined);
+    let requests: ImportedRequest[];
+    try {
+      requests = parseImport(source);
+    } catch {
+      requests = [];
+    }
+    if (requests.length === 0) {
+      setParsed(undefined);
+      setMessage(t('rest.import.nothing'));
+      return;
+    }
+    if (requests.length === 1) {
+      onLoad(requests[0]);
+      if (requests[0].warnings.length === 0) {
+        onClose();
+        return;
+      }
+    }
+    setParsed(requests);
+    setChecked(requests.map(() => true));
+  };
+
+  const openFile = async () => {
+    setError(undefined);
+    try {
+      const { text: content } = await api.importRequestsFile();
+      if (content === null) return;
+      setText(content);
+      parse(content);
+    } catch (err) {
+      setError(errorOf(err));
+    }
+  };
+
+  const saveSelected = async () => {
+    if (!parsed) return;
+    setBusy(true);
+    setError(undefined);
+    try {
+      await onSaveMany(parsed.filter((_, i) => checked[i]));
+      onClose();
+    } catch (err) {
+      setError(errorOf(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const several = parsed !== undefined && parsed.length > 1;
+  const loadedOne = parsed !== undefined && parsed.length === 1;
+  const footer = several ? (
+    <>
+      <button className="btn" onClick={onClose}>{t('dialog.cancel')}</button>
+      <button className="btn btn-primary" disabled={busy || !checked.some(Boolean)} onClick={saveSelected}>
+        {t('rest.import.saveSelected')}
+      </button>
+    </>
+  ) : loadedOne ? (
+    <button className="btn btn-primary" onClick={onClose}>{t('rest.import.close')}</button>
+  ) : (
+    <>
+      <button className="btn" onClick={onClose}>{t('dialog.cancel')}</button>
+      <button className="btn" onClick={openFile}>{t('rest.import.openFile')}</button>
+      <button className="btn btn-primary" disabled={text.trim() === ''} onClick={() => parse(text)}>{t('rest.import.parse')}</button>
+    </>
+  );
+  const warnings = parsed?.flatMap((r) => r.warnings.map((w) => (several ? `${requestLabel(r)}: ${warningText(w)}` : warningText(w)))) ?? [];
+
+  return (
+    <Modal title={t('rest.import.title')} onClose={onClose} footer={footer}>
+      {parsed === undefined && (
+        <label className="field">
+          <span className="mono-label">{t('rest.import.paste')}</span>
+          <textarea
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            spellCheck={false}
+            autoFocus
+            aria-label={t('rest.import.paste')}
+          />
+        </label>
+      )}
+      {message && <p className="muted">{message}</p>}
+      {loadedOne && <p>{t('rest.import.loaded', { name: requestLabel(parsed[0]) })}</p>}
+      {several && (
+        <div className="field">
+          <span className="mono-label">{t('rest.import.found', { count: parsed.length })}</span>
+          {parsed.map((r, i) => (
+            <label key={i} className="row">
+              <input
+                type="checkbox"
+                checked={checked[i] ?? false}
+                onChange={(e) => setChecked(checked.map((c, j) => (j === i ? e.target.checked : c)))}
+              />
+              <span>{requestLabel(r)}</span>
+            </label>
+          ))}
+        </div>
+      )}
+      {warnings.length > 0 && (
+        <div className="field">
+          <span className="mono-label">{t('rest.import.warnings')}</span>
+          {warnings.map((w, i) => (
+            <span key={i} className="muted">{w}</span>
+          ))}
+        </div>
+      )}
+      {error && <ErrorBanner error={error} compact />}
+    </Modal>
+  );
+}