v0.0.4

Author: uidev1116

assets/src/api.test.ts

@@ -166,7 +166,7 @@ describe('CSRFトークンの解決', () => {
 });
 
 describe('fetchSnapshots', () => {
-  it('blogIdをパラメータに含めてPOSTし、成功時はレスポンスをそのまま返す', async () => {
+  it('blogIdをパラメータに含めてPOSTし、成功時はレスポンスをそのまま返す。includeChildrenは省略時"0"として送信する', async () => {
     mockedPost.mockReturnValue(respond({ success: true, snapshots: [] }));
 
     const result = await fetchSnapshots(5);
@@ -175,6 +175,16 @@ describe('fetchSnapshots', () => {
     const [, params] = mockedPost.mock.calls[0] as [string, URLSearchParams];
     expect(params.get('ACMS_POST_ModuleMigrationSnapshots')).toBe('post');
     expect(params.get('blogId')).toBe('5');
+    expect(params.get('includeChildren')).toBe('0');
+  });
+
+  it('includeChildren:trueを渡した場合は"1"として送信する', async () => {
+    mockedPost.mockReturnValue(respond({ success: true, snapshots: [] }));
+
+    await fetchSnapshots(5, true);
+
+    const [, params] = mockedPost.mock.calls[0] as [string, URLSearchParams];
+    expect(params.get('includeChildren')).toBe('1');
   });
 
   it('success:falseの場合、messageをそのままエラーにして投げる', async () => {

assets/src/api.ts

@@ -70,6 +70,9 @@ export function rollbackMigration(blogId: number, snapshotId: number): Promise<M
   return postAcms<MigrationRollbackResponse>('ACMS_POST_ModuleMigrationRollback', { blogId, snapshotId });
 }
 
-export function fetchSnapshots(blogId: number): Promise<MigrationSnapshotsResponse> {
-  return postAcms<MigrationSnapshotsResponse>('ACMS_POST_ModuleMigrationSnapshots', { blogId });
+export function fetchSnapshots(blogId: number, includeChildren: boolean = false): Promise<MigrationSnapshotsResponse> {
+  return postAcms<MigrationSnapshotsResponse>('ACMS_POST_ModuleMigrationSnapshots', {
+    blogId,
+    includeChildren: includeChildren ? '1' : '0',
+  });
 }

assets/src/blog-label.ts

@@ -0,0 +1,7 @@
+/**
+ * 「配下のブログを含める」表示(モジュール一覧・移行履歴一覧)で、所属ブログ名とIDを
+ * 併記した表示文字列を組み立てる。blogNameが無い(取得できなかった)場合はIDのみ表示する。
+ */
+export function blogLabel(blogName: string | null, blogId: number): string {
+  return blogName !== null ? `${blogName} (${blogId})` : `(${blogId})`;
+}

assets/src/components/migration-history.test.tsx

@@ -19,6 +19,8 @@ function summary(overrides: Partial<SnapshotSummary> = {}): SnapshotSummary {
     moduleName: 'Plugin_Schedule',
     snapshotDatetime: '2026-08-30 12:00:00',
     userId: 1,
+    blogId: 1,
+    blogName: null,
     ...overrides,
   };
 }
@@ -51,6 +53,54 @@ describe('MigrationHistory', () => {
     expect(loadSnapshots).toHaveBeenCalledTimes(1);
   });
 
+  it('includeChildrenを省略した場合、falseでマウント時の一覧取得を呼ぶ', () => {
+    const loadSnapshots = vi.fn();
+    mockedUseMigrationHistory.mockReturnValue(makeHookState({ loadSnapshots }));
+
+    render(<MigrationHistory blogId={1} />);
+
+    expect(loadSnapshots).toHaveBeenCalledWith(false);
+  });
+
+  it('includeChildren:trueを渡すと、trueで一覧取得する', () => {
+    const loadSnapshots = vi.fn();
+    mockedUseMigrationHistory.mockReturnValue(makeHookState({ loadSnapshots }));
+
+    render(<MigrationHistory blogId={1} includeChildren />);
+
+    expect(loadSnapshots).toHaveBeenCalledWith(true);
+  });
+
+  it('includeChildrenが変化すると一覧を取得し直す', () => {
+    const loadSnapshots = vi.fn();
+    mockedUseMigrationHistory.mockReturnValue(makeHookState({ loadSnapshots }));
+
+    const { rerender } = render(<MigrationHistory blogId={1} includeChildren={false} />);
+    expect(loadSnapshots).toHaveBeenLastCalledWith(false);
+
+    rerender(<MigrationHistory blogId={1} includeChildren />);
+
+    expect(loadSnapshots).toHaveBeenLastCalledWith(true);
+  });
+
+  it('スナップショットの所属ブログ名とブログIDを表示する', () => {
+    mockedUseMigrationHistory.mockReturnValue(
+      makeHookState({ snapshots: [summary({ blogName: '子ブログA', blogId: 5 })] })
+    );
+
+    render(<MigrationHistory blogId={1} />);
+
+    expect(screen.getByText('子ブログA (5)')).toBeInTheDocument();
+  });
+
+  it('ブログ名が無い場合はブログIDのみ表示する', () => {
+    mockedUseMigrationHistory.mockReturnValue(makeHookState({ snapshots: [summary({ blogName: null, blogId: 5 })] }));
+
+    render(<MigrationHistory blogId={1} />);
+
+    expect(screen.getByText('(5)')).toBeInTheDocument();
+  });
+
   it('移行履歴が無い場合はその旨を表示する', () => {
     mockedUseMigrationHistory.mockReturnValue(makeHookState());
 
@@ -77,17 +127,17 @@ describe('MigrationHistory', () => {
     expect(screen.getByRole('alert')).toHaveTextContent('移行履歴の取得に失敗しました。');
   });
 
-  it('ロールバックボタンを押し確認してOKした場合、rollback()を呼び成功したらアラートを出す', async () => {
+  it('ロールバックボタンを押し確認してOKした場合、snapshotIdと所属ブログIDでrollback()を呼び成功したらアラートを出す', async () => {
     const user = userEvent.setup();
     const rollback = vi.fn().mockResolvedValue(true);
     mockedConfirm.mockResolvedValue(true);
-    mockedUseMigrationHistory.mockReturnValue(makeHookState({ snapshots: [summary()], rollback }));
+    mockedUseMigrationHistory.mockReturnValue(makeHookState({ snapshots: [summary({ blogId: 7 })], rollback }));
 
     render(<MigrationHistory blogId={1} />);
     await user.click(screen.getByRole('button', { name: 'ロールバック' }));
 
     expect(mockedConfirm).toHaveBeenCalledTimes(1);
-    expect(rollback).toHaveBeenCalledWith(10);
+    expect(rollback).toHaveBeenCalledWith(10, 7);
     await waitFor(() => expect(mockedAlert).toHaveBeenCalledWith('ロールバックしました'));
   });
 

assets/src/components/migration-history.tsx

@@ -1,29 +1,33 @@
 import Button from '@ablogcms/components/button';
 import Spinner from '@ablogcms/components/spinner';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@ablogcms/components/table';
-import { useEffectOnce } from '@ablogcms/react-hooks';
+import { useEffect } from 'react';
+import { blogLabel } from '../blog-label';
 import { useMigrationHistory } from '../hooks/use-migration-history';
 
 interface MigrationHistoryProps {
   blogId: number;
+  includeChildren?: boolean;
   onRollbackSuccess?: () => void;
 }
 
-function MigrationHistory({ blogId, onRollbackSuccess }: MigrationHistoryProps) {
+function MigrationHistory({ blogId, includeChildren = false, onRollbackSuccess }: MigrationHistoryProps) {
   const { snapshots, isLoading, error, isRollingBack, loadSnapshots, rollback } = useMigrationHistory(blogId, {
     onRollbackSuccess,
   });
 
-  useEffectOnce(() => {
-    void loadSnapshots();
-  });
+  // includeChildrenは呼び出し元(ModuleMigrationAdmin)の「配下のブログを含める」チェックボックスと
+  // 連動する。マウント時・チェック状態が変わるたびに、その範囲で一覧を取得し直す。
+  useEffect(() => {
+    void loadSnapshots(includeChildren);
+  }, [includeChildren, loadSnapshots]);
 
-  const handleRollback = async (snapshotId: number) => {
+  const handleRollback = async (snapshotId: number, snapshotBlogId: number) => {
     const confirmed = await ACMS.Library.dialog.confirm('このスナップショットの内容へ元に戻します。よろしいですか？');
     if (!confirmed) {
       return;
     }
-    const succeeded = await rollback(snapshotId);
+    const succeeded = await rollback(snapshotId, snapshotBlogId);
     if (succeeded) {
       await ACMS.Library.dialog.alert('ロールバックしました');
     }
@@ -44,6 +48,7 @@ function MigrationHistory({ blogId, onRollbackSuccess }: MigrationHistoryProps)
         <Table>
           <TableHeader>
             <TableRow>
+              <TableHead>ブログ</TableHead>
               <TableHead>モジュールID</TableHead>
               <TableHead>移行前のモジュール</TableHead>
               <TableHead>適用日時</TableHead>
@@ -53,12 +58,13 @@ function MigrationHistory({ blogId, onRollbackSuccess }: MigrationHistoryProps)
           <TableBody>
             {snapshots.map((snapshot) => (
               <TableRow key={snapshot.snapshotId}>
+                <TableCell>{blogLabel(snapshot.blogName, snapshot.blogId)}</TableCell>
                 <TableCell>{snapshot.moduleId}</TableCell>
                 <TableCell>{snapshot.moduleName}</TableCell>
                 <TableCell>{snapshot.snapshotDatetime}</TableCell>
                 <TableCell>
                   <Button
-                    onClick={() => void handleRollback(snapshot.snapshotId)}
+                    onClick={() => void handleRollback(snapshot.snapshotId, snapshot.blogId)}
                     type="button"
                     disabled={isRollingBack}
                   >

assets/src/components/module-migration-admin.test.tsx

@@ -216,6 +216,27 @@ describe('ModuleMigrationAdmin', () => {
 
       expect(loadModules).toHaveBeenLastCalledWith(true);
     });
+
+    it('チェック状態は移行履歴一覧(MigrationHistory)にも連動する', async () => {
+      const user = userEvent.setup();
+      const loadSnapshots = vi.fn();
+      mockedUseModuleMigration.mockReturnValue(makeHookState());
+      mockedUseMigrationHistory.mockReturnValue({
+        snapshots: [],
+        isLoading: false,
+        error: null,
+        isRollingBack: false,
+        loadSnapshots,
+        rollback: vi.fn(),
+      });
+
+      render(<ModuleMigrationAdmin blogId={1} />);
+      expect(loadSnapshots).toHaveBeenLastCalledWith(true);
+
+      await user.click(screen.getByRole('checkbox', { name: '配下のブログを含める' }));
+
+      expect(loadSnapshots).toHaveBeenLastCalledWith(false);
+    });
   });
 
   describe('ロールバック', () => {

assets/src/components/module-migration-admin.tsx

@@ -5,6 +5,7 @@ import Spinner from '@ablogcms/components/spinner';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@ablogcms/components/table';
 import { useEffectOnce } from '@ablogcms/react-hooks';
 import { useState } from 'react';
+import { blogLabel } from '../blog-label';
 import { useModuleMigration } from '../hooks/use-module-migration';
 import type { MigrationRank, ModuleMigrationCandidate } from '../types';
 import DiffPreviewModal from './diff-preview-modal';
@@ -27,10 +28,6 @@ function rankBadgeVariant(rank: MigrationRank | null): 'success' | 'warning' | '
   return 'info';
 }
 
-function blogLabel(blogName: string | null, blogId: number): string {
-  return blogName !== null ? `${blogName} (${blogId})` : `(${blogId})`;
-}
-
 function rankLabel(rank: MigrationRank | null): string {
   if (rank === 'A') {
     return 'A: 自動移行可能';
@@ -199,7 +196,11 @@ function ModuleMigrationAdmin({ blogId }: ModuleMigrationAdminProps) {
         isApplying={isApplying}
       />
 
-      <MigrationHistory blogId={blogId} onRollbackSuccess={() => void loadModules()} />
+      <MigrationHistory
+        blogId={blogId}
+        includeChildren={includeChildren}
+        onRollbackSuccess={() => void loadModules()}
+      />
     </div>
   );
 }

assets/src/hooks/use-migration-history.test.ts

@@ -16,6 +16,8 @@ function summary(overrides: Partial<SnapshotSummary> = {}): SnapshotSummary {
     moduleName: 'Plugin_Schedule',
     snapshotDatetime: '2026-08-30 12:00:00',
     userId: 1,
+    blogId: 1,
+    blogName: null,
     ...overrides,
   };
 }
@@ -67,6 +69,31 @@ describe('loadSnapshots', () => {
     expect(result.current.error).toBe('権限がありません。');
     expect(result.current.snapshots).toEqual([]);
   });
+
+  it('includeChildren:trueを渡すとfetchSnapshotsにそのまま渡す', async () => {
+    mockedFetchSnapshots.mockResolvedValue({ success: true, snapshots: [] });
+    const { result } = renderHook(() => useMigrationHistory(1));
+
+    await act(async () => {
+      await result.current.loadSnapshots(true);
+    });
+
+    expect(mockedFetchSnapshots).toHaveBeenCalledWith(1, true);
+  });
+
+  it('引数を省略した場合、直近に指定したincludeChildrenを維持する', async () => {
+    mockedFetchSnapshots.mockResolvedValue({ success: true, snapshots: [] });
+    const { result } = renderHook(() => useMigrationHistory(1));
+
+    await act(async () => {
+      await result.current.loadSnapshots(true);
+    });
+    await act(async () => {
+      await result.current.loadSnapshots();
+    });
+
+    expect(mockedFetchSnapshots).toHaveBeenLastCalledWith(1, true);
+  });
 });
 
 describe('rollback', () => {
@@ -78,8 +105,8 @@ describe('rollback', () => {
 
     let secondResult: boolean | null = null;
     act(() => {
-      void result.current.rollback(10);
-      void result.current.rollback(10).then((r) => {
+      void result.current.rollback(10, 1);
+      void result.current.rollback(10, 1).then((r) => {
         secondResult = r;
       });
     });
@@ -94,13 +121,25 @@ describe('rollback', () => {
     expect(secondResult).toBe(false);
   });
 
+  it('スナップショットの所有ブログIDでrollbackMigration()を呼ぶ(hookのblogIdとは独立)', async () => {
+    mockedRollback.mockResolvedValue({ success: true });
+    mockedFetchSnapshots.mockResolvedValue({ success: true, snapshots: [] });
+    const { result } = renderHook(() => useMigrationHistory(1));
+
+    await act(async () => {
+      await result.current.rollback(10, 5);
+    });
+
+    expect(mockedRollback).toHaveBeenCalledWith(5, 10);
+  });
+
   it('成功したら一覧を再取得する', async () => {
     mockedRollback.mockResolvedValue({ success: true });
     mockedFetchSnapshots.mockResolvedValue({ success: true, snapshots: [summary()] });
     const { result } = renderHook(() => useMigrationHistory(1));
 
     await act(async () => {
-      await result.current.rollback(10);
+      await result.current.rollback(10, 1);
     });
 
     expect(mockedFetchSnapshots).toHaveBeenCalledTimes(1);
@@ -114,7 +153,7 @@ describe('rollback', () => {
     const { result } = renderHook(() => useMigrationHistory(1, { onRollbackSuccess }));
 
     await act(async () => {
-      await result.current.rollback(10);
+      await result.current.rollback(10, 1);
     });
 
     expect(onRollbackSuccess).toHaveBeenCalledTimes(1);
@@ -124,7 +163,7 @@ describe('rollback', () => {
     mockedRollback.mockRejectedValue(new Error('ロールバックに失敗しました。'));
     const { result } = renderHook(() => useMigrationHistory(1));
 
-    const succeeded = await act(async () => result.current.rollback(10));
+    const succeeded = await act(async () => result.current.rollback(10, 1));
 
     expect(succeeded).toBe(false);
     expect(result.current.error).toBe('ロールバックに失敗しました。');