From 1ab7bf9c1b619a9294c83e7da46ae626094c3c01 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sat, 7 Sep 2024 18:19:47 +0900
Subject: [PATCH] chore: show toast message when update test run/case (#25)

---
 frontend/messages/en.json                     |  2 ++
 frontend/messages/ja.json                     |  2 ++
 .../[folderId]/cases/[caseId]/CaseEditor.tsx  | 24 ++++++++++-------
 .../[folderId]/cases/[caseId]/page.tsx        |  1 +
 .../[projectId]/runs/[runId]/RunEditor.tsx    | 26 +++++++++++--------
 .../[projectId]/runs/[runId]/page.tsx         |  1 +
 frontend/types/case.ts                        |  1 +
 frontend/types/run.ts                         |  1 +
 frontend/types/toast.ts                       |  2 +-
 frontend/utils/ToastProvider.tsx              |  6 ++---
 10 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 2fdf064..835b9ab 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -189,6 +189,7 @@
     "back_to_cases": "Back to test cases",
     "updating": "Updating...",
     "update": "Update",
+    "updated_test_case": "Updated test case",
     "basic": "Basic",
     "title": "Title",
     "please_enter_title": "Please enter title",
@@ -241,6 +242,7 @@
     "back_to_runs": "Back to test runs",
     "updating": "Updating...",
     "update": "Update",
+    "updated_test_run": "Updated test run",
     "progress": "Progress",
     "refresh": "Refresh",
     "id": "ID",
diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json
index bb35092..1d5a300 100644
--- a/frontend/messages/ja.json
+++ b/frontend/messages/ja.json
@@ -190,6 +190,7 @@
     "back_to_cases": "テストケース一覧に戻る",
     "updating": "更新中...",
     "update": "更新",
+    "updated_test_case": "テストケースを更新しました",
     "basic": "基本データ",
     "title": "タイトル",
     "please_enter_title": "タイトルを入力してください",
@@ -242,6 +243,7 @@
     "back_to_runs": "テストラン一覧に戻る",
     "updating": "更新中...",
     "update": "更新",
+    "updated_test_run": "テストランを更新しました",
     "progress": "進捗",
     "refresh": "再読み込み",
     "id": "ID",
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
index 174a0bf..0d92cc5 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
@@ -10,6 +10,7 @@ import { fetchCase, updateCase } from '@/utils/caseControl';
 import { updateSteps } from './stepControl';
 import { fetchCreateAttachments, fetchDownloadAttachment, fetchDeleteAttachment } from './attachmentControl';
 import { TokenContext } from '@/utils/TokenProvider';
+import { ToastContext } from '@/utils/ToastProvider';
 import { useFormGuard } from '@/utils/formGuard';
 import { CaseType, AttachmentType, CaseMessages, StepType } from '@/types/case';
 import { PriorityMessages } from '@/types/priority';
@@ -52,7 +53,8 @@ export default function CaseEditor({
   priorityMessages,
   locale,
 }: Props) {
-  const context = useContext(TokenContext);
+  const toakenContext = useContext(TokenContext);
+  const toastContext = useContext(ToastContext);
   const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
   const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
@@ -192,11 +194,11 @@ export default function CaseEditor({
 
   useEffect(() => {
     async function fetchDataEffect() {
-      if (!context.isSignedIn()) {
+      if (!toakenContext.isSignedIn()) {
         return;
       }
       try {
-        const data = await fetchCase(context.token.access_token, Number(caseId));
+        const data = await fetchCase(toakenContext.token.access_token, Number(caseId));
         data.Steps.forEach((step: StepType) => {
           step.editState = 'notChanged';
         });
@@ -207,7 +209,7 @@ export default function CaseEditor({
     }
 
     fetchDataEffect();
-  }, [context]);
+  }, [toakenContext]);
 
   return (
     <>
@@ -230,15 +232,17 @@ export default function CaseEditor({
           <Button
             startContent={<Save size={16} />}
             size="sm"
-            isDisabled={!context.isProjectDeveloper(Number(projectId))}
+            isDisabled={!toakenContext.isProjectDeveloper(Number(projectId))}
             color="primary"
             isLoading={isUpdating}
             onPress={async () => {
               setIsUpdating(true);
-              await updateCase(context.token.access_token, testCase);
+              await updateCase(toakenContext.token.access_token, testCase);
               if (testCase.Steps) {
-                await updateSteps(context.token.access_token, Number(caseId), testCase.Steps);
+                await updateSteps(toakenContext.token.access_token, Number(caseId), testCase.Steps);
               }
+
+              toastContext.showToast(messages.updatedTestCase, 'dark');
               setIsUpdating(false);
               setIsDirty(false);
             }}
@@ -383,7 +387,7 @@ export default function CaseEditor({
               <Button
                 startContent={<Plus size={16} />}
                 size="sm"
-                isDisabled={!context.isProjectDeveloper(Number(projectId))}
+                isDisabled={!toakenContext.isProjectDeveloper(Number(projectId))}
                 color="primary"
                 className="ms-3"
                 onPress={() => onPlusClick(1)}
@@ -393,7 +397,7 @@ export default function CaseEditor({
             </div>
             {testCase.Steps && (
               <CaseStepsEditor
-                isDisabled={!context.isProjectDeveloper(Number(projectId))}
+                isDisabled={!toakenContext.isProjectDeveloper(Number(projectId))}
                 steps={testCase.Steps}
                 onStepUpdate={(stepId, changeStep) => {
                   if (testCase.Steps) {
@@ -421,7 +425,7 @@ export default function CaseEditor({
         <h6 className="font-bold">{messages.attachments}</h6>
         {testCase.Attachments && (
           <CaseAttachmentsEditor
-            isDisabled={!context.isProjectDeveloper(Number(projectId))}
+            isDisabled={!toakenContext.isProjectDeveloper(Number(projectId))}
             attachments={testCase.Attachments}
             onAttachmentDownload={(attachmentId: number, downloadFileName: string) =>
               fetchDownloadAttachment(attachmentId, downloadFileName)
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
index e2ace79..400faef 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
@@ -18,6 +18,7 @@ export default function Page({
     backToCases: t('back_to_cases'),
     updating: t('updating'),
     update: t('update'),
+    updatedTestCase: t('updated_test_case'),
     basic: t('basic'),
     title: t('title'),
     pleaseEnterTitle: t('please_enter_title'),
diff --git a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
index daa869a..049b2ba 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -35,6 +35,7 @@ import {
 } from '../runsControl';
 import { fetchFolders } from '../../folders/foldersControl';
 import { TokenContext } from '@/utils/TokenProvider';
+import { ToastContext } from '@/utils/ToastProvider';
 import { useTheme } from 'next-themes';
 import { useFormGuard } from '@/utils/formGuard';
 import { PriorityMessages } from '@/types/priority';
@@ -73,7 +74,8 @@ export default function RunEditor({
   testTypeMessages,
   locale,
 }: Props) {
-  const context = useContext(TokenContext);
+  const tokenContext = useContext(TokenContext);
+  const toastContext = useContext(ToastContext);
   const { theme, setTheme } = useTheme();
   const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
   const [folders, setFolders] = useState<FolderType[]>([]);
@@ -89,13 +91,13 @@ export default function RunEditor({
   useFormGuard(isDirty, messages.areYouSureLeave);
 
   const fetchRunAndStatusCount = async () => {
-    const { run, statusCounts } = await fetchRun(context.token.access_token, Number(runId));
+    const { run, statusCounts } = await fetchRun(tokenContext.token.access_token, Number(runId));
     setTestRun(run);
     setRunStatusCounts(statusCounts);
   };
 
   const initTestCases = async () => {
-    const casesData = await fetchProjectCases(context.token.access_token, Number(projectId));
+    const casesData = await fetchProjectCases(tokenContext.token.access_token, Number(projectId));
     casesData.forEach((testCase: CaseType) => {
       if (testCase.RunCases && testCase.RunCases.length > 0) {
         testCase.RunCases[0].editState = 'notChanged';
@@ -106,13 +108,13 @@ export default function RunEditor({
 
   useEffect(() => {
     async function fetchDataEffect() {
-      if (!context.isSignedIn()) {
+      if (!tokenContext.isSignedIn()) {
         return;
       }
 
       try {
         await fetchRunAndStatusCount();
-        const foldersData = await fetchFolders(context.token.access_token, Number(projectId));
+        const foldersData = await fetchFolders(tokenContext.token.access_token, Number(projectId));
         setFolders(foldersData);
         setSelectedFolder(foldersData[0]);
         initTestCases();
@@ -122,7 +124,7 @@ export default function RunEditor({
     }
 
     fetchDataEffect();
-  }, [context]);
+  }, [tokenContext]);
 
   useEffect(() => {
     function onFilter() {
@@ -168,9 +170,11 @@ export default function RunEditor({
 
   const onSave = async () => {
     setIsUpdating(true);
-    await updateRun(context.token.access_token, testRun);
-    await updateRunCases(context.token.access_token, Number(runId), testCases);
+    await updateRun(tokenContext.token.access_token, testRun);
+    await updateRunCases(tokenContext.token.access_token, Number(runId), testCases);
     await initTestCases();
+
+    toastContext.showToast(messages.updatedTestRun, 'dark');
     setIsUpdating(false);
     setIsDirty(false);
   };
@@ -199,7 +203,7 @@ export default function RunEditor({
           <Button
             startContent={<Save size={16} />}
             size="sm"
-            isDisabled={!context.isProjectReporter(Number(projectId))}
+            isDisabled={!tokenContext.isProjectReporter(Number(projectId))}
             color="primary"
             isLoading={isUpdating}
             onPress={onSave}
@@ -294,7 +298,7 @@ export default function RunEditor({
                 <DropdownTrigger>
                   <Button
                     size="sm"
-                    isDisabled={!context.isProjectReporter(Number(projectId))}
+                    isDisabled={!tokenContext.isProjectReporter(Number(projectId))}
                     color="primary"
                     endContent={<ChevronDown size={16} />}
                   >
@@ -341,7 +345,7 @@ export default function RunEditor({
           <div className="w-9/12">
             <TestCaseSelector
               cases={filteredTestCases}
-              isDisabled={!context.isProjectReporter(Number(projectId))}
+              isDisabled={!tokenContext.isProjectReporter(Number(projectId))}
               selectedKeys={selectedKeys}
               onSelectionChange={setSelectedKeys}
               onChangeStatus={handleChangeStatus}
diff --git a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
index eb7138f..f36a138 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
@@ -11,6 +11,7 @@ export default function Page({ params }: { params: { projectId: string; runId: s
     backToRuns: t('back_to_runs'),
     updating: t('updating'),
     update: t('update'),
+    updatedTestRun: t('updated_test_run'),
     progress: t('progress'),
     refresh: t('refresh'),
     id: t('id'),
diff --git a/frontend/types/case.ts b/frontend/types/case.ts
index c4f56c0..6b93986 100644
--- a/frontend/types/case.ts
+++ b/frontend/types/case.ts
@@ -82,6 +82,7 @@ type CaseMessages = {
   backToCases: string;
   updating: string;
   update: string;
+  updatedTestCase: string;
   basic: string;
   title: string;
   pleaseEnterTitle: string;
diff --git a/frontend/types/run.ts b/frontend/types/run.ts
index e17b4b1..a3a946f 100644
--- a/frontend/types/run.ts
+++ b/frontend/types/run.ts
@@ -56,6 +56,7 @@ type RunMessages = {
   backToRuns: string;
   updating: string;
   update: string;
+  updatedTestRun: string;
   progress: string;
   refresh: string;
   id: string;
diff --git a/frontend/types/toast.ts b/frontend/types/toast.ts
index 68a6642..1989a30 100644
--- a/frontend/types/toast.ts
+++ b/frontend/types/toast.ts
@@ -8,5 +8,5 @@ export type ToastMessages = {
 };
 
 export type ToastContextType = {
-  showToast: (text: string, mode: string) => void;
+  showToast: (text: string, mode: 'error' | 'dark') => void;
 };
diff --git a/frontend/utils/ToastProvider.tsx b/frontend/utils/ToastProvider.tsx
index 4d49ea2..122c7db 100644
--- a/frontend/utils/ToastProvider.tsx
+++ b/frontend/utils/ToastProvider.tsx
@@ -6,7 +6,7 @@ import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 const defaultContext = {
-  showToast: (text: string, mode: string) => {},
+  showToast: (text: string, mode: 'error' | 'dark') => {},
 };
 const ToastContext = createContext<ToastContextType>(defaultContext);
 
@@ -15,7 +15,7 @@ const ToastProvider = ({ children }: ToastProps) => {
     if (mode === 'error') {
       toast.error(text);
     } else {
-      toast(text, { theme: 'light' });
+      toast(text, { theme: 'dark' });
     }
   };
 
@@ -25,7 +25,7 @@ const ToastProvider = ({ children }: ToastProps) => {
 
   return (
     <ToastContext.Provider value={toastContext}>
-      <ToastContainer position="bottom-right" hideProgressBar={true} theme="colored" />
+      <ToastContainer position="bottom-right" hideProgressBar={true} />
       {children}
     </ToastContext.Provider>
   );