From 7c1dfd49b975411a37264e9ef40664cd6ebac9a3 Mon Sep 17 00:00:00 2001 From: kimatata <117462761+kimatata@users.noreply.github.com> Date: Sun, 19 Oct 2025 17:09:09 +0900 Subject: [PATCH] Clone test cases UI (#302) --- .../routes/{caseTags => casetags}/delete.js | 0 backend/routes/{caseTags => casetags}/new.js | 0 frontend/messages/en.json | 7 +- frontend/messages/ja.json | 7 +- frontend/messages/pt-BR.json | 7 +- .../[folderId]/cases/CaseMoveDialog.tsx | 118 ++++++++++++++++++ .../folders/[folderId]/cases/CasesPane.tsx | 65 ++++++---- .../[folderId]/cases/TestCaseTable.tsx | 8 +- .../folders/[folderId]/cases/page.tsx | 5 + frontend/types/case.ts | 5 + frontend/utils/caseControl.ts | 24 +++- 11 files changed, 217 insertions(+), 29 deletions(-) rename backend/routes/{caseTags => casetags}/delete.js (100%) rename backend/routes/{caseTags => casetags}/new.js (100%) create mode 100644 frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CaseMoveDialog.tsx diff --git a/backend/routes/caseTags/delete.js b/backend/routes/casetags/delete.js similarity index 100% rename from backend/routes/caseTags/delete.js rename to backend/routes/casetags/delete.js diff --git a/backend/routes/caseTags/new.js b/backend/routes/casetags/new.js similarity index 100% rename from backend/routes/caseTags/new.js rename to backend/routes/casetags/new.js diff --git a/frontend/messages/en.json b/frontend/messages/en.json index 337d4fe..f93afdb 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -211,7 +211,12 @@ "selected": "Selected", "type": "Type", "select_types": "Select types", - "cases_moved": "Test cases moved" + "cases_selected": "cases selected", + "select_action": "Select action", + "move": "Move", + "clone": "Clone", + "cases_moved": "Test cases moved", + "cases_cloned": "Test cases cloned" }, "Case": { "back_to_cases": "Back to test cases", diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json index 1ff3c2b..f788c18 100644 --- a/frontend/messages/ja.json +++ b/frontend/messages/ja.json @@ -212,7 +212,12 @@ "selected": "選択済み", "type": "タイプ", "select_types": "タイプを選択", - "cases_moved": "テストケースを移動しました" + "cases_selected": "件のテストケース", + "select_action": "アクションを選択", + "move": "移動", + "clone": "クローン", + "cases_moved": "テストケースを移動しました", + "cases_cloned": "テストケースをクローンしました" }, "Case": { "back_to_cases": "テストケース一覧に戻る", diff --git a/frontend/messages/pt-BR.json b/frontend/messages/pt-BR.json index 8971b09..358c29e 100644 --- a/frontend/messages/pt-BR.json +++ b/frontend/messages/pt-BR.json @@ -211,7 +211,12 @@ "selected": "Selecionado", "type": "Tipo", "select_types": "Selecionar tipos", - "cases_moved": "Casos de teste movidos" + "cases_selected": "casos selecionados", + "select_action": "Selecionar ação", + "move": "Mover", + "clone": "Clonar", + "cases_moved": "Casos de teste movidos", + "cases_cloned": "Casos de teste clonados" }, "Case": { "back_to_cases": "Voltar para os casos de teste", diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CaseMoveDialog.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CaseMoveDialog.tsx new file mode 100644 index 0000000..396f482 --- /dev/null +++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CaseMoveDialog.tsx @@ -0,0 +1,118 @@ +'use client'; +import { useState } from 'react'; +import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Spinner, addToast } from '@heroui/react'; +import { Copy, Forward } from 'lucide-react'; +import { CasesMessages } from '@/types/case'; +import { moveCases, cloneCases } from '@/utils/caseControl'; + +type Props = { + isOpen: boolean; + testCaseIds: number[]; + projectId: string; + targetFolderId?: number; + isDisabled: boolean; + onCancel: () => void; + onMoved: () => void; + messages: CasesMessages; + token: string; +}; + +export default function CaseDialog({ + isOpen, + testCaseIds, + projectId, + targetFolderId, + isDisabled, + onCancel, + onMoved, + messages, + token, +}: Props) { + const [isProcessing, setIsProcessing] = useState(false); + + const handleMove = async () => { + if (!targetFolderId) { + return; + } + + setIsProcessing(true); + const success = await moveCases(token, testCaseIds, targetFolderId, Number(projectId)); + setIsProcessing(false); + + if (success) { + addToast({ + title: 'Success', + color: 'success', + description: messages.casesMoved, + }); + onMoved(); + onCancel(); + } else { + console.error('Error moving cases'); + } + }; + + const handleClone = async () => { + if (!targetFolderId) { + return; + } + + setIsProcessing(true); + const success = await cloneCases(token, testCaseIds, targetFolderId, Number(projectId)); + setIsProcessing(false); + + if (success) { + addToast({ title: 'Success', color: 'success', description: messages.casesCloned }); + onCancel(); + } else { + console.error('Error cloning cases'); + } + }; + + return ( + { + onCancel(); + }} + > + + {messages.selectAction} + +

+ {testCaseIds.length} {messages.casesSelected} +

+ + + {isProcessing ? ( + + ) : ( + <> + + + + + )} + + + + ); +} diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx index a20bccc..b851eb0 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx +++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx @@ -1,13 +1,13 @@ 'use client'; -import { useState, useEffect, useContext } from 'react'; +import { useState, useEffect, useContext, useCallback } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; -import { addToast } from '@heroui/react'; import TestCaseTable from './TestCaseTable'; import CaseDialog from './CaseDialog'; -import { TokenContext } from '@/utils/TokenProvider'; -import { fetchCases, createCase, deleteCases, exportCases, moveCases } from '@/utils/caseControl'; -import { CaseType, CasesMessages } from '@/types/case'; +import CaseMoveDialog from './CaseMoveDialog'; import DeleteConfirmDialog from '@/components/DeleteConfirmDialog'; +import { TokenContext } from '@/utils/TokenProvider'; +import { fetchCases, createCase, deleteCases, exportCases } from '@/utils/caseControl'; +import { CaseType, CasesMessages } from '@/types/case'; import { PriorityMessages } from '@/types/priority'; import { TestTypeMessages } from '@/types/testType'; import { LocaleCodeType } from '@/types/locale'; @@ -98,25 +98,6 @@ export default function CasesPane({ fetchDataEffect(); }, [context, folderId, searchParams]); - useEffect(() => { - const unsubscribe = onMoveEvent(async (e) => { - const { testCaseIds, targetFolderId } = e.detail; - const moveRet = await moveCases(context.token.access_token, testCaseIds, targetFolderId, Number(projectId)); - if (!moveRet) { - console.error('Error moving cases'); - return; - } - - setCases(cases.filter((entry) => !testCaseIds.includes(entry.id))); - addToast({ - title: 'Success', - color: 'success', - description: messages.casesMoved, - }); - }); - return unsubscribe; - }, [cases, context.token.access_token, messages.casesMoved, projectId]); - const closeDialog = () => setIsCaseDialogOpen(false); const onSubmit = async (title: string, description: string) => { @@ -159,6 +140,30 @@ export default function CasesPane({ updateUrlParams({ title: title, priority: priorities, type: types }); }; + // ************************************************************************** + // Move/Clone cases + // ************************************************************************** + const [isMoveDialogOpen, setIsMoveDialogOpen] = useState(false); + const [selectedCaseIds, setSelectedCaseIds] = useState([]); + const [targetFolderId, setTargetFolderId] = useState(undefined); + const openMoveDialog = useCallback((caseIds: number[], folderId?: number) => { + setSelectedCaseIds(caseIds); + setTargetFolderId(folderId); + setIsMoveDialogOpen(true); + }, []); + + const handleMoved = () => { + setCases((prev) => prev.filter((c) => !selectedCaseIds.includes(c.id))); + }; + + useEffect(() => { + const unsubscribe = onMoveEvent(async (e) => { + const { testCaseIds, targetFolderId } = e.detail; + openMoveDialog(testCaseIds, targetFolderId); + }); + return unsubscribe; + }, [openMoveDialog]); + return ( <> + setIsMoveDialogOpen(false)} + onMoved={handleMoved} + messages={messages} + token={context.token.access_token} + /> + - diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx index 7279361..6ec3fde 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx +++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx @@ -40,7 +40,12 @@ export default function Page({ params }: { params: { projectId: string; folderId selected: t('selected'), type: t('type'), selectTypes: t('select_types'), + casesSelected: t('cases_selected'), + selectAction: t('select_action'), + move: t('move'), + clone: t('clone'), casesMoved: t('cases_moved'), + casesCloned: t('cases_cloned'), }; const priorityTranslation = useTranslations('Priority'); diff --git a/frontend/types/case.ts b/frontend/types/case.ts index 00cd5b5..35532e4 100644 --- a/frontend/types/case.ts +++ b/frontend/types/case.ts @@ -84,7 +84,12 @@ type CasesMessages = { selected: string; type: string; selectTypes: string; + casesSelected: string; + selectAction: string; + move: string; + clone: string; casesMoved: string; + casesCloned: string; }; type CaseMessages = { diff --git a/frontend/utils/caseControl.ts b/frontend/utils/caseControl.ts index 3af3989..7960ff0 100644 --- a/frontend/utils/caseControl.ts +++ b/frontend/utils/caseControl.ts @@ -169,6 +169,28 @@ async function deleteCases(jwt: string, deleteCaseIds: number[], projectId: numb } } +async function cloneCases(jwt: string, moveCaseIds: number[], targetFolderId: number, projectId: number) { + const fetchOptions = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${jwt}`, + }, + body: JSON.stringify({ caseIds: moveCaseIds, targetFolderId }), + }; + const url = `${apiServer}/cases/clone?projectId=${projectId}`; + try { + const response = await fetch(url, fetchOptions); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + const data = await response.json(); + return data; + } catch (error: unknown) { + logError('Error cloning project', error); + } +} + async function exportCases(jwt: string, folderId: number, type: string) { if (type !== 'json' && type !== 'csv') { console.error('export type error. type:', type); @@ -202,4 +224,4 @@ async function exportCases(jwt: string, folderId: number, type: string) { } } -export { fetchCase, fetchCases, updateCase, createCase, deleteCases, exportCases }; +export { fetchCase, fetchCases, updateCase, createCase, deleteCases, cloneCases, exportCases };