286 lines
13 KiB
TypeScript
286 lines
13 KiB
TypeScript
/**
|
|
* SpaceBrowserPanel.tsx — スペース「設定 → ブラウザ」パネル
|
|
*
|
|
* そのスペースのブラウザセッションプロファイル・マクロ・録画をまとめて
|
|
* 管理する。すべて per-space スコープ:
|
|
* - セッション: GET/POST/DELETE /api/browser-sessions/profiles?spaceId=…
|
|
* - マクロ/録画: /api/users/me/folder/{list,file}?subdir=…&spaceId=…
|
|
*
|
|
* DEK は per-user のため、自分が作成していないセッション
|
|
* (decryptableByViewer===false) は一覧に出るが復号・利用できない。その行には
|
|
* 「作成者のみ利用可」を明示する。
|
|
*
|
|
* 管理操作（追加・削除）は canEditInSpace をバックエンドが強制する。UI は
|
|
* SpaceMembersPanel と同じ実シグナル（admin / 自分が owner 行）で、判定できる
|
|
* ときだけ管理コントロールを出す。判定できない場合でも 403 はトーストで処理。
|
|
*/
|
|
import { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import {
|
|
listBrowserSessionProfiles, deleteBrowserSessionProfile, testBrowserSessionProfile,
|
|
listFolderFiles, getFolderFile, deleteFolderFile,
|
|
fetchSpaceMembers,
|
|
type BrowserSessionProfile,
|
|
} from '../../api';
|
|
import { AddBrowserSessionDialog } from '../userfolder/AddBrowserSessionDialog';
|
|
import { FilePreview } from '../files/FilePreview';
|
|
import { useAuthState } from '../../App';
|
|
|
|
type ShowToast = (message: string, variant?: 'success' | 'error') => void;
|
|
|
|
const STATUS_CLASS: Record<BrowserSessionProfile['status'], string> = {
|
|
pending: 'bg-slate-200 text-slate-700',
|
|
active: 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
|
|
expired: 'bg-amber-100 dark:bg-amber-500/15 text-amber-800 dark:text-amber-300',
|
|
revoked: 'bg-slate-200 text-slate-500',
|
|
error: 'bg-rose-100 dark:bg-rose-500/15 text-rose-700 dark:text-rose-300',
|
|
};
|
|
|
|
function StatusPill({ status }: { status: BrowserSessionProfile['status'] }) {
|
|
const { t } = useTranslation('spaces');
|
|
return (
|
|
<span className={`inline-flex items-center rounded px-2 py-0.5 text-2xs font-medium ${STATUS_CLASS[status]}`}>
|
|
{t(`browser.status.${status}`)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function errMsg(e: unknown): string {
|
|
return e instanceof Error ? e.message : String(e);
|
|
}
|
|
|
|
export function SpaceBrowserPanel({ spaceId, showToast }: { spaceId: string; showToast?: ShowToast }) {
|
|
const { t } = useTranslation('spaces');
|
|
const auth = useAuthState();
|
|
const qc = useQueryClient();
|
|
|
|
// 管理可否は SpaceMembersPanel と同じ実シグナルで判定する。判定できない
|
|
// ときも管理コントロールは出すが、403 は mutation onError でトースト処理。
|
|
const { data: members } = useQuery({
|
|
queryKey: ['space-members', spaceId],
|
|
queryFn: () => fetchSpaceMembers(spaceId),
|
|
staleTime: 30_000,
|
|
});
|
|
const ownerRow = (members ?? []).find(m => m.isOwner);
|
|
const canManage =
|
|
auth.mode === 'disabled' ||
|
|
(auth.mode === 'authenticated' &&
|
|
(auth.user.role === 'admin' || (!!ownerRow && ownerRow.userId === auth.user.id)));
|
|
|
|
// ── セッション ──────────────────────────────────────────────
|
|
const { data: profiles = [], isLoading: sessLoading } = useQuery({
|
|
queryKey: ['space-browser-sessions', spaceId],
|
|
queryFn: () => listBrowserSessionProfiles(spaceId),
|
|
});
|
|
const delSess = useMutation({
|
|
mutationFn: (id: number) => deleteBrowserSessionProfile(id, spaceId),
|
|
onSuccess: () => qc.invalidateQueries({ queryKey: ['space-browser-sessions', spaceId] }),
|
|
onError: (e) => showToast?.(t('browser.toast.sessionDeleteFailed', { msg: errMsg(e) }), 'error'),
|
|
});
|
|
const testSess = useMutation({
|
|
mutationFn: (id: number) => testBrowserSessionProfile(id),
|
|
onSuccess: () => qc.invalidateQueries({ queryKey: ['space-browser-sessions', spaceId] }),
|
|
onError: (e) => showToast?.(t('browser.toast.sessionTestFailed', { msg: errMsg(e) }), 'error'),
|
|
});
|
|
const [adding, setAdding] = useState(false);
|
|
|
|
// ── マクロ / 録画 ───────────────────────────────────────────
|
|
const macros = useQuery({
|
|
queryKey: ['space-browser-macros', spaceId],
|
|
queryFn: () => listFolderFiles('browser-macros', spaceId),
|
|
});
|
|
const recordings = useQuery({
|
|
queryKey: ['space-browser-recordings', spaceId],
|
|
queryFn: () => listFolderFiles('recordings', spaceId),
|
|
});
|
|
const delMacro = useMutation({
|
|
mutationFn: (name: string) => deleteFolderFile('browser-macros', name, spaceId),
|
|
onSuccess: () => qc.invalidateQueries({ queryKey: ['space-browser-macros', spaceId] }),
|
|
onError: (e) => showToast?.(t('browser.toast.deleteFailed', { msg: errMsg(e) }), 'error'),
|
|
});
|
|
const delRecording = useMutation({
|
|
mutationFn: (name: string) => deleteFolderFile('recordings', name, spaceId),
|
|
onSuccess: () => qc.invalidateQueries({ queryKey: ['space-browser-recordings', spaceId] }),
|
|
onError: (e) => showToast?.(t('browser.toast.deleteFailed', { msg: errMsg(e) }), 'error'),
|
|
});
|
|
|
|
// ファイル内容プレビュー（マクロ・録画共通）。
|
|
const [preview, setPreview] = useState<{ name: string; content: string } | null>(null);
|
|
async function openPreview(subdir: 'browser-macros' | 'recordings', name: string) {
|
|
try {
|
|
const content = await getFolderFile(subdir, name, spaceId);
|
|
setPreview({ name, content });
|
|
} catch (e) {
|
|
showToast?.(t('browser.toast.contentFetchFailed', { msg: errMsg(e) }), 'error');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6" data-testid="space-browser-panel">
|
|
<div className="max-w-2xl space-y-8">
|
|
{/* ── セッション ── */}
|
|
<section data-testid="space-browser-sessions">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<h2 className="text-base font-semibold text-slate-800">{t('browser.sessions.heading')}</h2>
|
|
{canManage && (
|
|
<button
|
|
type="button"
|
|
data-testid="space-browser-add-session"
|
|
onClick={() => setAdding(true)}
|
|
className="rounded-md bg-accent px-3 py-1.5 text-xs font-medium text-accent-fg hover:bg-accent-deep"
|
|
>
|
|
{t('browser.sessions.add')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
<p className="mb-3 text-xs text-slate-500">
|
|
{t('browser.sessions.intro')}
|
|
</p>
|
|
|
|
{sessLoading && <div className="text-xs text-slate-500">{t('common:loading')}</div>}
|
|
|
|
<div className="divide-y divide-hairline rounded-md border border-hairline">
|
|
{profiles.length === 0 && !sessLoading && (
|
|
<div className="px-3 py-6 text-center text-xs text-slate-400">
|
|
<div>{t('browser.sessions.empty')}</div>
|
|
{canManage && <div className="mt-1">{t('browser.sessions.emptyHint')}</div>}
|
|
</div>
|
|
)}
|
|
{profiles.map(p => {
|
|
const usable = p.decryptableByViewer !== false;
|
|
return (
|
|
<div key={p.id} data-testid={`space-browser-session-${p.id}`} className="flex items-center justify-between px-3 py-2">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="truncate text-[13px] font-medium text-slate-800">{p.label}</span>
|
|
<StatusPill status={p.status} />
|
|
{!usable && (
|
|
<span className="inline-flex items-center rounded bg-slate-200 px-2 py-0.5 text-2xs font-medium text-slate-600">
|
|
{t('browser.sessions.creatorOnly')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="truncate text-2xs text-slate-500">{p.startUrl}</div>
|
|
{p.lastError && <div className="truncate text-2xs text-rose-600">{p.lastError}</div>}
|
|
{!usable && (
|
|
<div className="text-2xs text-slate-400">
|
|
{t('browser.sessions.creatorOnlyHint')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
{usable && (
|
|
<button
|
|
type="button"
|
|
onClick={() => testSess.mutate(p.id)}
|
|
disabled={testSess.isPending}
|
|
className="rounded px-2 py-1 text-xs text-slate-700 hover:bg-surface hover:text-slate-900 disabled:opacity-50"
|
|
>
|
|
{t('browser.sessions.test')}
|
|
</button>
|
|
)}
|
|
{canManage && (
|
|
<button
|
|
type="button"
|
|
onClick={() => { if (confirm(t('browser.deleteConfirm', { name: p.label }))) delSess.mutate(p.id); }}
|
|
className="rounded px-2 py-1 text-xs text-rose-600 hover:bg-rose-50 hover:text-rose-800 dark:hover:bg-rose-500/15 dark:hover:text-rose-300"
|
|
>
|
|
{t('common:delete')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── マクロ ── */}
|
|
<FolderSection
|
|
title={t('browser.macros.title')}
|
|
testid="space-browser-macros"
|
|
subdir="browser-macros"
|
|
query={macros}
|
|
emptyText={t('browser.macros.empty')}
|
|
hint={t('browser.macros.hint')}
|
|
canManage={canManage}
|
|
onView={(name) => openPreview('browser-macros', name)}
|
|
onDelete={(name) => { if (confirm(t('browser.deleteConfirm', { name }))) delMacro.mutate(name); }}
|
|
/>
|
|
|
|
{/* ── 録画 ── */}
|
|
<FolderSection
|
|
title={t('browser.recordings.title')}
|
|
testid="space-browser-recordings"
|
|
subdir="recordings"
|
|
query={recordings}
|
|
emptyText={t('browser.recordings.empty')}
|
|
hint={t('browser.recordings.hint')}
|
|
canManage={canManage}
|
|
onView={(name) => openPreview('recordings', name)}
|
|
onDelete={(name) => { if (confirm(t('browser.deleteConfirm', { name }))) delRecording.mutate(name); }}
|
|
/>
|
|
</div>
|
|
|
|
{adding && (
|
|
<AddBrowserSessionDialog spaceId={spaceId} onClose={() => setAdding(false)} />
|
|
)}
|
|
|
|
{preview && (
|
|
<FilePreview name={preview.name} content={preview.content} imageSrc="" onClose={() => setPreview(null)} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface FolderSectionProps {
|
|
title: string;
|
|
testid: string;
|
|
subdir: 'browser-macros' | 'recordings';
|
|
query: { data?: { name: string; size: number; mtime: string }[]; isLoading: boolean };
|
|
emptyText: string;
|
|
hint: string;
|
|
canManage: boolean;
|
|
onView: (name: string) => void;
|
|
onDelete: (name: string) => void;
|
|
}
|
|
|
|
function FolderSection({ title, testid, query, emptyText, hint, canManage, onView, onDelete }: FolderSectionProps) {
|
|
const { t } = useTranslation('spaces');
|
|
const files = query.data ?? [];
|
|
return (
|
|
<section data-testid={testid}>
|
|
<h2 className="mb-2 text-base font-semibold text-slate-800">{title}</h2>
|
|
<p className="mb-3 text-xs text-slate-500">{hint}</p>
|
|
{query.isLoading && <div className="text-xs text-slate-500">{t('common:loading')}</div>}
|
|
<div className="divide-y divide-hairline rounded-md border border-hairline">
|
|
{files.length === 0 && !query.isLoading && (
|
|
<div className="px-3 py-6 text-center text-xs text-slate-400">{emptyText}</div>
|
|
)}
|
|
{files.map(f => (
|
|
<div key={f.name} className="flex items-center justify-between px-3 py-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => onView(f.name)}
|
|
className="min-w-0 flex-1 text-left"
|
|
>
|
|
<div className="truncate text-[13px] font-medium text-slate-800">{f.name}</div>
|
|
<div className="text-2xs text-slate-400">{(f.size / 1024).toFixed(1)} KB · {new Date(f.mtime).toLocaleString()}</div>
|
|
</button>
|
|
{canManage && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onDelete(f.name)}
|
|
className="ml-2 shrink-0 rounded px-2 py-1 text-xs text-rose-600 hover:bg-rose-50 hover:text-rose-800 dark:hover:bg-rose-500/15 dark:hover:text-rose-300"
|
|
>
|
|
{t('common:delete')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|