336 lines
14 KiB
TypeScript
336 lines
14 KiB
TypeScript
import { useState } from 'react';
|
|
import { Trans, useTranslation } from 'react-i18next';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import {
|
|
fetchSpaceFiles,
|
|
fetchSpaceFileContent,
|
|
getAppShareLink,
|
|
createAppShareLink,
|
|
revokeAppShareLink,
|
|
} from '../../api';
|
|
import { deriveAppList, type WorkspaceApp } from './app-bridge';
|
|
import { AppRunner } from './AppRunner';
|
|
import { createSpaceGateway } from './app-file-gateway';
|
|
import { buildAppShareDisplayUrl } from './appShareUrl';
|
|
|
|
/**
|
|
* SpaceApps — the workspace "アプリ" tab.
|
|
*
|
|
* Lists the runnable workspace apps (subfolders under `apps/` that contain an
|
|
* `index.html`) and launches a selected one in the AppRunner (sandboxed iframe
|
|
* + postMessage bridge from Stage 1). Each app may carry an optional
|
|
* `apps/{name}/app.json` manifest ({title?, description?, entry?}); when present
|
|
* its title/description are shown, otherwise we fall back to the folder name +
|
|
* `index.html`.
|
|
*
|
|
* NETWORK / SECURITY: the apps themselves run under AppRunner's opaque-origin
|
|
* sandbox with `connect-src 'none'` — this tab only discovers + launches them.
|
|
*/
|
|
export function SpaceApps({ spaceId, canManage = true }: { spaceId: string; canManage?: boolean }) {
|
|
const { t } = useTranslation('spaces');
|
|
const [appToRun, setAppToRun] = useState<WorkspaceApp | null>(null);
|
|
|
|
const appsQuery = useQuery({
|
|
queryKey: ['space-apps', spaceId],
|
|
queryFn: () => loadWorkspaceApps(spaceId),
|
|
staleTime: 10_000,
|
|
});
|
|
|
|
const apps = appsQuery.data ?? [];
|
|
|
|
return (
|
|
<div data-testid="space-apps" className="flex flex-col gap-3 p-4">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="text-[11px] font-bold uppercase tracking-wider text-slate-500">
|
|
{t('apps.heading')}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
data-testid="space-apps-refresh"
|
|
onClick={() => void appsQuery.refetch()}
|
|
disabled={appsQuery.isFetching}
|
|
title={t('apps.refresh')}
|
|
aria-label={t('apps.refresh')}
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-hairline bg-canvas text-slate-500 transition-colors hover:bg-surface hover:text-slate-900 disabled:opacity-50"
|
|
>
|
|
<svg className={`h-3.5 w-3.5 ${appsQuery.isFetching ? 'animate-spin' : ''}`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M2 8a6 6 0 0110.5-4M14 8a6 6 0 01-10.5 4" />
|
|
<path d="M12 2v3h-3M4 14v-3h3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{appsQuery.isError && (
|
|
<p className="text-xs text-red-600">{t('apps.fetchError')}</p>
|
|
)}
|
|
|
|
{!appsQuery.isLoading && !appsQuery.isError && apps.length === 0 && (
|
|
<div
|
|
data-testid="space-apps-empty"
|
|
className="rounded-lg border border-dashed border-hairline bg-surface p-6 text-center text-sm text-slate-500"
|
|
>
|
|
<p className="font-medium text-slate-600">{t('apps.empty.title')}</p>
|
|
<p className="mt-1.5 leading-relaxed">
|
|
{t('apps.empty.body')}
|
|
</p>
|
|
<p className="mt-1.5 text-2xs text-slate-400">
|
|
<Trans
|
|
t={t}
|
|
i18nKey="apps.empty.location"
|
|
components={{ code: <code className="rounded bg-canvas px-1 py-0.5" /> }}
|
|
/>
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{apps.length > 0 && (
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
{apps.map(app => (
|
|
<div
|
|
key={app.name}
|
|
data-testid={`space-app-${app.name}`}
|
|
className="flex flex-col gap-2 rounded-lg border border-hairline bg-surface p-3"
|
|
>
|
|
<div className="flex min-w-0 items-start gap-2">
|
|
<span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-[var(--brand-primary)]/10 text-[var(--brand-primary)]" aria-hidden>
|
|
<svg className="h-4 w-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="2" y="2" width="5" height="5" rx="1" />
|
|
<rect x="9" y="2" width="5" height="5" rx="1" />
|
|
<rect x="2" y="9" width="5" height="5" rx="1" />
|
|
<rect x="9" y="9" width="5" height="5" rx="1" />
|
|
</svg>
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-semibold text-slate-800" title={app.title}>
|
|
{app.title}
|
|
</p>
|
|
{app.description ? (
|
|
<p className="mt-0.5 line-clamp-2 text-2xs text-slate-500">{app.description}</p>
|
|
) : (
|
|
<p className="mt-0.5 truncate font-mono text-2xs text-slate-400">apps/{app.name}/index.html</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
data-testid={`space-app-open-${app.name}`}
|
|
onClick={() => setAppToRun(app)}
|
|
className="mt-auto inline-flex h-8 items-center justify-center gap-1 rounded-md bg-accent px-3 text-xs font-bold text-accent-fg transition-colors hover:opacity-90"
|
|
>
|
|
<svg className="h-3.5 w-3.5" viewBox="0 0 16 16" fill="currentColor" stroke="none">
|
|
<path d="M5 3.5v9l7-4.5z" />
|
|
</svg>
|
|
{t('apps.open')}
|
|
</button>
|
|
|
|
{canManage && <AppShareControls spaceId={spaceId} appName={app.name} />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{appToRun && (
|
|
<AppRunner
|
|
gateway={createSpaceGateway(spaceId)}
|
|
appName={appToRun.name}
|
|
entryPath={appToRun.entryPath}
|
|
onClose={() => setAppToRun(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Discover workspace apps for a space: list `apps/`, then for each subfolder
|
|
* check for an index.html and read its optional app.json. Folders without an
|
|
* index.html are skipped (not runnable). A missing `apps/` directory simply
|
|
* yields an empty list (the listing call 404s → caught → []).
|
|
*/
|
|
async function loadWorkspaceApps(spaceId: string): Promise<WorkspaceApp[]> {
|
|
// List the workspace root first (never 404s on a fresh workspace) and only
|
|
// descend into apps/ when that directory actually exists — listing a missing
|
|
// apps/ directly would 404 noisily on every fresh workspace.
|
|
let hasAppsDir = false;
|
|
try {
|
|
const root = await fetchSpaceFiles(spaceId, '');
|
|
hasAppsDir = root.entries.some(e => e.kind === 'directory' && e.name === 'apps');
|
|
} catch {
|
|
return [];
|
|
}
|
|
if (!hasAppsDir) return [];
|
|
|
|
let appDirs: string[];
|
|
try {
|
|
const appsRoot = await fetchSpaceFiles(spaceId, 'apps');
|
|
appDirs = appsRoot.entries.filter(e => e.kind === 'directory').map(e => e.name);
|
|
} catch {
|
|
return [];
|
|
}
|
|
if (appDirs.length === 0) return [];
|
|
|
|
// Fetch each app folder's listing in parallel to find index.html + app.json.
|
|
const perApp = await Promise.all(
|
|
appDirs.map(async name => {
|
|
try {
|
|
const dir = await fetchSpaceFiles(spaceId, `apps/${name}`);
|
|
const names = new Set(dir.entries.filter(e => e.kind !== 'directory').map(e => e.name));
|
|
const hasIndex = names.has('index.html');
|
|
let manifest: string | null = null;
|
|
if (hasIndex && names.has('app.json')) {
|
|
try {
|
|
manifest = await fetchSpaceFileContent(spaceId, `apps/${name}/app.json`);
|
|
} catch {
|
|
manifest = null; // tolerant: a bad/unreadable manifest falls back to defaults
|
|
}
|
|
}
|
|
return { name, hasIndex, manifest };
|
|
} catch {
|
|
return { name, hasIndex: false, manifest: null };
|
|
}
|
|
}),
|
|
);
|
|
|
|
const indexMap = new Map(perApp.map(p => [p.name, p]));
|
|
return deriveAppList(
|
|
appDirs,
|
|
name => indexMap.get(name)?.hasIndex ?? false,
|
|
name => indexMap.get(name)?.manifest ?? null,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* AppShareControls — 1 アプリの公開共有リンク管理（canManage のみ表示）。
|
|
*
|
|
* 現在のリンク状態を取得し、未発行なら「リンクを作成」、発行済みなら公開 URL の表示・
|
|
* コピー・失効を提供する。発行/失効は react-query mutation。公開リンクは read-only・
|
|
* ログイン不要・apps/{app}/＋output/ に封じ込められる旨を注意書きで明示する。
|
|
*/
|
|
function AppShareControls({ spaceId, appName }: { spaceId: string; appName: string }) {
|
|
const { t } = useTranslation('spaces');
|
|
const qc = useQueryClient();
|
|
const [copied, setCopied] = useState(false);
|
|
const queryKey = ['app-share-link', spaceId, appName];
|
|
|
|
const linkQuery = useQuery({
|
|
queryKey,
|
|
queryFn: () => getAppShareLink(spaceId, appName),
|
|
staleTime: 10_000,
|
|
});
|
|
|
|
const createMut = useMutation({
|
|
mutationFn: () => createAppShareLink(spaceId, appName),
|
|
onSuccess: (data) => {
|
|
qc.setQueryData(queryKey, { token: data.token, shareUrl: data.shareUrl, revokedAt: null });
|
|
},
|
|
});
|
|
|
|
const revokeMut = useMutation({
|
|
mutationFn: () => revokeAppShareLink(spaceId, appName),
|
|
onSuccess: () => {
|
|
qc.setQueryData(queryKey, { token: null, revokedAt: new Date().toISOString() });
|
|
setCopied(false);
|
|
},
|
|
});
|
|
|
|
const link = linkQuery.data;
|
|
const shareUrl = link?.token && link.shareUrl ? link.shareUrl : null;
|
|
const displayUrl = shareUrl ? buildAppShareDisplayUrl(window.location.origin, shareUrl) : null;
|
|
|
|
const copy = async () => {
|
|
if (!displayUrl) return;
|
|
try {
|
|
await navigator.clipboard.writeText(displayUrl);
|
|
setCopied(true);
|
|
window.setTimeout(() => setCopied(false), 1800);
|
|
} catch {
|
|
// clipboard 不可（権限なし等）。表示済み URL から手動コピーできるので無視。
|
|
}
|
|
};
|
|
|
|
const onRevoke = () => {
|
|
if (window.confirm(t('appShare.revokeConfirm', { appName }))) {
|
|
revokeMut.mutate();
|
|
}
|
|
};
|
|
|
|
const busy = createMut.isPending || revokeMut.isPending;
|
|
|
|
return (
|
|
<div
|
|
data-testid={`space-app-share-${appName}`}
|
|
className="mt-1 border-t border-hairline pt-2"
|
|
>
|
|
{linkQuery.isLoading ? (
|
|
<p className="text-2xs text-slate-400">{t('appShare.checking')}</p>
|
|
) : displayUrl ? (
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="flex items-center gap-1.5">
|
|
<span
|
|
className="inline-flex items-center gap-1 rounded bg-emerald-500/10 px-1.5 py-0.5 text-2xs font-semibold text-emerald-600 dark:text-emerald-400"
|
|
data-testid={`space-app-share-badge-${appName}`}
|
|
>
|
|
<svg className="h-3 w-3" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M6.5 9.5l-2 2a2.5 2.5 0 01-3.5-3.5l2-2M9.5 6.5l2-2a2.5 2.5 0 013.5 3.5l-2 2M5.5 10.5l5-5" />
|
|
</svg>
|
|
{t('appShare.issued')}
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
readOnly
|
|
value={displayUrl}
|
|
data-testid={`space-app-share-url-${appName}`}
|
|
onFocus={(e) => e.currentTarget.select()}
|
|
className="w-full truncate rounded border border-hairline bg-canvas px-2 py-1 font-mono text-2xs text-slate-600"
|
|
/>
|
|
<div className="flex items-center gap-1.5">
|
|
<button
|
|
type="button"
|
|
data-testid={`space-app-share-copy-${appName}`}
|
|
onClick={() => void copy()}
|
|
className="inline-flex h-7 items-center rounded-md border border-hairline bg-canvas px-2 text-2xs font-semibold text-slate-600 transition-colors hover:bg-surface"
|
|
>
|
|
{copied ? t('appShare.copied') : t('appShare.copyUrl')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-testid={`space-app-share-revoke-${appName}`}
|
|
onClick={onRevoke}
|
|
disabled={busy}
|
|
className="inline-flex h-7 items-center rounded-md border border-hairline bg-canvas px-2 text-2xs font-semibold text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50 dark:hover:bg-red-950/30"
|
|
>
|
|
{t('appShare.revoke')}
|
|
</button>
|
|
</div>
|
|
<p className="text-2xs leading-relaxed text-amber-600">
|
|
<Trans
|
|
t={t}
|
|
i18nKey="appShare.warning"
|
|
components={{ code: <code className="rounded bg-canvas px-1" />, strong: <strong /> }}
|
|
/>
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-1">
|
|
<button
|
|
type="button"
|
|
data-testid={`space-app-share-create-${appName}`}
|
|
onClick={() => createMut.mutate()}
|
|
disabled={busy}
|
|
className="inline-flex h-7 items-center gap-1 self-start rounded-md border border-hairline bg-canvas px-2 text-2xs font-semibold text-slate-600 transition-colors hover:bg-surface disabled:opacity-50"
|
|
>
|
|
<svg className="h-3 w-3" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M6.5 9.5l-2 2a2.5 2.5 0 01-3.5-3.5l2-2M9.5 6.5l2-2a2.5 2.5 0 013.5 3.5l-2 2M5.5 10.5l5-5" />
|
|
</svg>
|
|
{createMut.isPending ? t('appShare.creating') : t('appShare.create')}
|
|
</button>
|
|
{(createMut.isError || revokeMut.isError) && (
|
|
<p className="text-2xs text-red-600">{t('appShare.opError')}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|