feature(studio): test generation toast (#1201)

codemod-com · Aug 8, 2024 · e21ecc2 · e21ecc2
1 parent 89f006d
commit e21ecc2
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 7 deletions.
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/GenerateTestCasesButton.tsx b/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/GenerateTestCasesButton.tsx
@@ -1,20 +1,32 @@
 import { cn } from "@/utils";
-import type { useCodemodAI } from "@chatbot/useAiService/codemodAI/useCodemodAI";
 import { MagicWand } from "@phosphor-icons/react";
 import Tooltip from "@studio/components/Tooltip/Tooltip";
+import { useEffect } from "react";
+import toast from "react-hot-toast";
 
 export const GenerateTestCasesButton = ({
   handleButtonClick,
+  isTestCaseGenerated,
 }: {
-  handleButtonClick: ReturnType<typeof useCodemodAI>["autogenerateTestCases"];
+  handleButtonClick: () => void;
+  isTestCaseGenerated: boolean;
 }) => {
+  useEffect(() => {
+    const t = toast;
+    if (isTestCaseGenerated) {
+      t.loading("Test case generation in progress...");
+    } else {
+      t.dismiss();
+    }
+  }, [isTestCaseGenerated]);
   return (
     <Tooltip
       trigger={
         <button
           onClick={handleButtonClick}
           className={cn(
-            "cursor-pointer border-hidden align-text-top bg-transparent hover:bg-transparent p-3",
+            "cursor-pointer border-hidden align-text-top  p-3 bg-green hover:bg-[#D6FF62]",
+            isTestCaseGenerated && "bg-[#D6FF62]",
           )}
         >
           <MagicWand size={"30px"} />

diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/codemodAI/useCodemodAI.tsx b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/codemodAI/useCodemodAI.tsx
@@ -31,6 +31,7 @@ export const useCodemodAI = ({
   const [isWsConnected, setIsWsConnected] = useState(false);
   const [serviceBusy, setServiceBusy] = useState(false);
   const { getToken } = useAuth();
+  const [isTestCaseGenerated, setIsTestCaseGenerated] = useState(false);
 
   const emitMessage = async (message: MessageToSend) => {
     const token = await getToken();
@@ -60,6 +61,7 @@ export const useCodemodAI = ({
       });
       setServiceBusy(false);
     } else if (data.before) {
+      setIsTestCaseGenerated(false);
       setWsMessage({
         content: `Test cases created and added to a new test tab`,
         role: "assistant",
@@ -107,6 +109,7 @@ export const useCodemodAI = ({
 
   const autogenerateTestCases = async () => {
     if (isEnvPrepared) {
+      setIsTestCaseGenerated(true);
       setWsMessage({
         content: `Generate test cases`,
         role: "user",
@@ -160,5 +163,6 @@ export const useCodemodAI = ({
     wsMessage,
     serviceBusy,
     autogenerateTestCases,
+    isTestCaseGenerated,
   };
 };
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useAiService.ts b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useAiService.ts
@@ -45,6 +45,7 @@ export const useAiService = ({
     startIterativeCodemodGeneration,
     serviceBusy,
     stopCodemodAi,
+    isTestCaseGenerated,
   } = useCodemodAI({
     messages,
     engine,
@@ -107,5 +108,6 @@ export const useAiService = ({
     modGptSubmit,
     startIterativeCodemodGeneration,
     autogenerateTestCases,
+    isTestCaseGenerated,
   };
 };
diff --git a/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx b/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx
@@ -207,6 +207,7 @@ const Main = () => {
               className="bg-gray-bg"
             >
               <TestTabsComponent
+                isTestCaseGenerated={aiAssistantData.isTestCaseGenerated}
                 autogenerateTestCases={aiAssistantData.autogenerateTestCases}
               />
               <PanelGroup direction="horizontal">

diff --git a/apps/frontend/app/(website)/studio/main/PageBottomPane/TestTabsComponent.tsx b/apps/frontend/app/(website)/studio/main/PageBottomPane/TestTabsComponent.tsx
@@ -4,14 +4,16 @@ import type { useAiService } from "@chatbot/useAiService";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useSnippetsStore } from "@studio/store/snippets";
+import { useViewStore } from "@studio/store/view";
 import { useEffect, useRef, useState } from "react";
 
 export const TestTabsComponent = ({
   autogenerateTestCases,
+  isTestCaseGenerated,
 }: {
-  autogenerateTestCases: ReturnType<
-    typeof useAiService
-  >["autogenerateTestCases"];
+  autogenerateTestCases: ReturnType<typeof useAiService>[
+    | "autogenerateTestCases"
+    | "isTestCaseGenerated"];
 }) => {
   const {
     getSelectedEditors,
@@ -30,6 +32,8 @@ export const TestTabsComponent = ({
   const inputRef = useRef(null);
   const [isEditedNameAlreadyInUse, setIsEditedNameAlreadyInUse] =
     useState(false);
+  const { activateModGpt } = useViewStore();
+
   useEffect(() => {
     if (inputRef.current) {
       setTimeout(() => inputRef.current.focus(), 0);
@@ -121,6 +125,7 @@ export const TestTabsComponent = ({
               +
             </button>
             <GenerateTestCasesButton
+              isTestCaseGenerated={isTestCaseGenerated}
               handleButtonClick={autogenerateTestCases}
             />
           </>

diff --git a/apps/frontend/app/(website)/studio/src/store/view.ts b/apps/frontend/app/(website)/studio/src/store/view.ts
@@ -9,15 +9,17 @@ export enum TabNames {
 }
 
 type ViewState = {
+  activateModGpt: () => void;
   activeTab: TabNames;
   astViewCollapsed: boolean;
   setActiveTab: (tab: TabNames) => void;
   setASTViewCollapsed: (collapsed: boolean) => void;
 };
 
-export const useViewStore = create<ViewState>((set) => ({
+export const useViewStore = create<ViewState>((set, get) => ({
   activeTab: TabNames.MODGPT,
   astViewCollapsed: true,
+  activateModGpt: () => get().setActiveTab(TabNames.MODGPT),
   setActiveTab: (tab) => set(() => ({ activeTab: tab })),
   setASTViewCollapsed: (collapsed) =>
     set(() => ({ astViewCollapsed: collapsed })),