From dd87634200acd5b76f8ff00991271f24a30fb92c Mon Sep 17 00:00:00 2001 From: Tanish2207 Date: Fri, 28 Feb 2025 17:16:11 +0530 Subject: [PATCH 1/3] fix: keep sidebar width constant Signed-off-by: Tanish2207 --- components/atg/Editor/components/sidebar.tsx | 2 +- components/atg/Editor/editor/code.tsx | 33 +- .../SideBarContent/SideBarNormal.tsx | 507 ++++++++++-------- components/atg/components/SideBarhandle.tsx | 85 --- components/atg/editor.tsx | 210 ++++---- 5 files changed, 392 insertions(+), 445 deletions(-) delete mode 100644 components/atg/components/SideBarhandle.tsx diff --git a/components/atg/Editor/components/sidebar.tsx b/components/atg/Editor/components/sidebar.tsx index 06c02da9..7588ed49 100644 --- a/components/atg/Editor/components/sidebar.tsx +++ b/components/atg/Editor/components/sidebar.tsx @@ -24,7 +24,7 @@ export const Sidebar = ({ return (
diff --git a/components/atg/Editor/editor/code.tsx b/components/atg/Editor/editor/code.tsx index 5b53455e..d7143dc2 100644 --- a/components/atg/Editor/editor/code.tsx +++ b/components/atg/Editor/editor/code.tsx @@ -2,13 +2,9 @@ import React, { useEffect, useState, useRef } from "react"; import Editor, { useMonaco } from "@monaco-editor/react"; import * as monaco from "monaco-editor"; import { File } from "../utils/file-manager"; -import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; -import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import { useEditTestSubscription } from "@/app/api/automatic-test-generator/Subscription"; export const Code = ({ selectedFile, - showSideBannerBool, - RemoveSideBanner, settingCodeTheme, isFullScreen, selectedFileName, @@ -220,7 +216,7 @@ export const Code = ({ return (
@@ -235,33 +231,6 @@ export const Code = ({ onChange={handleFileChange} onMount={(editor) => (editorRef.current = editor)} // Store editor instance /> - {!showSideBannerBool && ( -
setShowText(true)} - onMouseLeave={() => setShowText(false)} - className={`p-2 absolute z-10 hover:cursor-pointer border border-gray-500 border-b-0 right-0 top-1/2 bg-secondary-300 flex items-center justify-center shadow-lg transition-all duration-500`} - style={{ - transform: "translateY(-50%)", - height: "3rem", - width: showText ? "200px" : "40px", - }} // Adjust width values as needed - onClick={() => { - RemoveSideBanner(); - setShowText(false); - }} - > - -
-

- Side Content -

-
-
- )}
); }; diff --git a/components/atg/components/SideBarContent/SideBarNormal.tsx b/components/atg/components/SideBarContent/SideBarNormal.tsx index a1b4d67f..3815cec0 100644 --- a/components/atg/components/SideBarContent/SideBarNormal.tsx +++ b/components/atg/components/SideBarContent/SideBarNormal.tsx @@ -10,6 +10,7 @@ import CircularProgress from "@mui/material/CircularProgress"; import DoneIcon from "@mui/icons-material/Done"; import LockIcon from "@mui/icons-material/Lock"; import CircleIcon from "@mui/icons-material/Circle"; +import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import { StepsForRecording, StepforTests, @@ -42,13 +43,16 @@ const stepsRecord = [ ]; interface SideBarNormalProps { + isColl: boolean; + setIsColl: () => void; onNext: () => void; + showTerminal: () => void; + functionName: string; onReset: () => void; stepsForRecording: StepsForRecording; stepsForTesting: StepforTests; stepsForDedup: StepsforDedup; - RemoveSideContent: () => void; - SideBartheme: boolean; + SideBarTheme: boolean; activeStep: number; subStepIndex: number; dedupStepIndex: number; @@ -66,13 +70,16 @@ interface SideBarNormalProps { } export default function SideBarNormal({ + isColl, + setIsColl, onNext, + showTerminal, + functionName, onReset, stepsForRecording, stepsForTesting, stepsForDedup, - RemoveSideContent, - SideBartheme, + SideBarTheme, activeStep, subStepIndex, dedupStepIndex, @@ -81,6 +88,15 @@ export default function SideBarNormal({ setSidebarState, }: SideBarNormalProps) { const [subStepCompleted, setSubStepCompleted] = React.useState(false); + const [showText, setShowText] = React.useState(false); + + const moveToNextStage = async () => { + if (functionName === "Start") { + await new Promise((resolve) => setTimeout(resolve, 4000)); // 4-second timeout + } + showTerminal(); // Assuming this function exists in Editor + onNext(); // Assuming this function exists in Editor + }; React.useEffect(() => { if (activeStep === 0) { @@ -201,7 +217,7 @@ export default function SideBarNormal({ ]); const handleNext = () => { - onNext(); + moveToNextStage() if (activeStep === 0) { setSidebarState((prevState) => ({ ...prevState, @@ -231,252 +247,287 @@ export default function SideBarNormal({ } }; - return ( - -
{ + return stepsRecord.map((step, index) => ( + handleAccordionChange(index)} + sx={{ + backgroundColor: "#f5f5f5", + boxShadow: "none", + "&:before": { + display: "none", + }, + "&:last-child": { + borderBottom: "none", + }, + }} + className={ + SideBarTheme + ? "border border-b-1 bg-neutral-200 border-gray-200" + : "bg-[#171a1e]" + } + disableGutters={true} + TransitionProps={{ timeout: { appear: 1, enter: 1, exit: 4 } }} > - + ) : index <= activeStep ? ( + + ) : ( + + ) + } + aria-controls={`panel${index}-content`} + id={`panel${index}-header`} sx={{ - color: "#1f2937", + color: "#ffffff", fontWeight: "bold", m: 0, }} - className={`${ - SideBartheme ? "text-secondary-300" : "text-white" - } font-bold`} - > - Content - - -
- {stepsRecord.map((step, index) => ( - handleAccordionChange(index)} + + {step.label} + + + - - ) : index <= activeStep ? ( - - ) : ( - - ) - } - aria-controls={`panel${index}-content`} - id={`panel${index}-header`} - sx={{ - color: "#ffffff", - fontWeight: "bold", - m: 0, - }} - className={` ${ - SideBartheme - ? index <= activeStep - ? "bg-white" - : "bg-gray-200" - : index <= activeStep - ? "bg-[#30363e]" - : "bg-[#3f4651]" - } `} - > - - {step.label} - - - - - - {step.steps.map((subStep, subIndex) => ( + + + {step.steps.map((subStep, subIndex) => ( + subIndex) || + (activeStep === 1 && dedupStepIndex > subIndex) || + (activeStep === 2 && testSubStepIndex > subIndex) || + index < activeStep + ? "items-center" + : "items-center" + } + > subIndex) || - (activeStep === 1 && dedupStepIndex > subIndex) || - (activeStep === 2 && testSubStepIndex > subIndex) || - index < activeStep - ? "items-center" - : "items-center" - }`} + sx={{ + width: 24, + display: "flex", + justifyContent: "center", + alignItems: "center", + mr: 1, + }} > - - {((activeStep === 0 && subStepIndex === subIndex) || - (activeStep === 1 && dedupStepIndex === subIndex) || - (activeStep === 2 && testSubStepIndex === subIndex)) && - index === activeStep ? ( - subStepCompleted ? ( - - ) : ( - - ) - ) : (activeStep === 0 && subStepIndex > subIndex) || - (activeStep === 1 && dedupStepIndex > subIndex) || - (activeStep === 2 && testSubStepIndex > subIndex) || - index < activeStep ? ( + {((activeStep === 0 && subStepIndex === subIndex) || + (activeStep === 1 && dedupStepIndex === subIndex) || + (activeStep === 2 && testSubStepIndex === subIndex)) && + index === activeStep ? ( + subStepCompleted ? ( ) : ( - - )} - - - subIndex) || - (activeStep === 1 && dedupStepIndex > subIndex) || - (activeStep === 2 && - testSubStepIndex > subIndex) || - index < activeStep - ? SideBartheme + + ) + ) : (activeStep === 0 && subStepIndex > subIndex) || + (activeStep === 1 && dedupStepIndex > subIndex) || + (activeStep === 2 && testSubStepIndex > subIndex) || + index < activeStep ? ( + + ) : ( + + )} + + + subIndex) || + (activeStep === 1 && dedupStepIndex > subIndex) || + (activeStep === 2 && testSubStepIndex > subIndex) || + index < activeStep + ? SideBarTheme ? "text-secondary-300" : "text-gray-300" - }`} - > - {`${subStep.stepName}`} - + : SideBarTheme + ? "text-secondary-300" + : "text-gray-300" + } + > + {subStep.stepName} - ))} - + + ))} - {index === activeStep && ( - -
- -
- - )} - - - ))} - {activeStep === stepsRecord.length && ( - + {index === activeStep && ( + +
+ +
+ + )} + + + )); + }, [ + activeStep, + subStepIndex, + dedupStepIndex, + testSubStepIndex, + expandedSteps, + SideBarTheme, + ]); + + return ( + <> +
+ - - Would you like to reset? - - - - )} - + + Content + + +
+ + {renderedSteps} + {activeStep === stepsRecord.length && ( + + + Would you like to reset? + + + + )} + +
+
setShowText(true)} + onMouseLeave={() => setShowText(false)} + className={`p-2 absolute hover:cursor-pointer border border-gray-500 border-b-0 right-0 top-1/2 bg-secondary-300 flex items-center justify-center shadow-lg transition-all duration-500 opacity-1 ${ + isColl ? "opacity-100" : "opacity-0" + }`} + style={{ + height: "3rem", + width: showText ? "200px" : "40px ", + }} // Adjust width values as needed + onClick={() => { + setIsColl(); + setShowText(false); + }} + > + +
+

Side Content

+
+
+ ); } diff --git a/components/atg/components/SideBarhandle.tsx b/components/atg/components/SideBarhandle.tsx deleted file mode 100644 index 0ced5fd6..00000000 --- a/components/atg/components/SideBarhandle.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React, { useEffect, useState, FC } from "react"; -import SideBarNormal from "./SideBarContent/SideBarNormal"; -import { submitCodeSnippet } from "@/app/api/automatic-test-generator/Mutation"; // Ensure correct import path -import { StepsForRecording, StepforTests, StepsforDedup } from "../utils/types"; -import { GolangSchema, JavaScriptSchema, PythonSchema } from "../utils/schema"; - -interface SideBarHandleProps { - Stage: number; - onNext: () => void; - showTerminal: () => void; - functionName: string; - onReset: () => void; - removeSideContent: () => void; - stepsForRecording: StepsForRecording; - stepsForTesting: StepforTests; - stepsForDedup: StepsforDedup; - SideBarTheme: boolean; - sidebarState: { - activeStep: number; - subStepIndex: number; - dedupStepIndex: number; - testSubStepIndex: number; - expandedSteps: number[]; - }; - setSidebarState: React.Dispatch< - React.SetStateAction<{ - activeStep: number; - subStepIndex: number; - dedupStepIndex: number; - testSubStepIndex: number; - expandedSteps: number[]; - }> - >; -} - -const SideBarHandle: FC = ({ - Stage, - onNext, - showTerminal, - functionName, - onReset, - removeSideContent, - stepsForRecording, - stepsForTesting, - stepsForDedup, - SideBarTheme, - sidebarState, - setSidebarState, -}) => { - - const moveToNextStage = async () => { - if (functionName === "Start") { - await new Promise((resolve) => setTimeout(resolve, 4000)); // 4-second timeout - } - showTerminal(); - onNext(); - }; - - - return ( -
- -
- ); -}; - -export default SideBarHandle; diff --git a/components/atg/editor.tsx b/components/atg/editor.tsx index 5ef56731..b8a55562 100644 --- a/components/atg/editor.tsx +++ b/components/atg/editor.tsx @@ -7,13 +7,13 @@ import { Type, File, Directory } from "./Editor/utils/file-manager"; import DefaultEditorPage from "./components/DefaultEditorPage"; import MainTerminal from "./terminal"; import { Skeleton } from "@mui/material"; -import SideBarHandle from "./components/SideBarhandle"; import { StepsForRecording, StepforTests, StepsforDedup } from "./utils/types"; import TopHeader from "./components/TopHeader"; import { findFileByName } from "./Editor/utils/file-manager"; import useFullScreen from "./fullscreen"; // Import the hook import { fetchDirectoryStructure } from "./Editor/utils/file-manager"; import { removeKeployTestDir } from "./Editor/utils/api-functions"; +import SideBarNormal from "./components/SideBarContent/SideBarNormal"; const dummyDir: Directory = { id: "1", name: "loading...", @@ -36,11 +36,12 @@ const Editor = ({ goFullScreen = false }: { goFullScreen?: boolean }) => { const [functionName, setFunctionName] = useState("Start"); const inputRef = useRef(null); const [language, setSelectedLanguage] = useState("Javascript"); - const [showSideContent, setShowSideContent] = useState(false); + const [showSideContent, setShowSideContent] = useState(true); const [TerminalStatus, setTerminalStatus] = useState("red"); const [TerminalHeight, setTerminalHeight] = useState("0"); const [FullScreen, setFullScreen] = useState(false); - const [mainFile , setmainFile] = useState(""); + const [mainFile, setmainFile] = useState(""); + const [isCollapsed, setIsCollapsed] = useState(false); const [stepsForRecording, setStepsForRecording] = useState( { schemaValidation: false, @@ -62,6 +63,7 @@ const Editor = ({ goFullScreen = false }: { goFullScreen?: boolean }) => { testSubStepIndex: -1, expandedSteps: [0], }); + const settingFullScreenTrue = () => { setFullScreen(true); }; @@ -100,11 +102,9 @@ const Editor = ({ goFullScreen = false }: { goFullScreen?: boolean }) => { console.error("Error fetching directory contents:", error); } }; - + fetchData(); // Call the async function - }, [language]); // Dependency array - const { elementRef, enterFullScreen, exitFullScreen } = useFullScreen({ onEnter: settingFullScreenTrue, @@ -125,10 +125,10 @@ const Editor = ({ goFullScreen = false }: { goFullScreen?: boolean }) => { file = findFileByName(rootDir, "server.js"); } console.log(file); - if(file){ + if (file) { setmainFile(file?.content); - }else{ - setmainFile("file not found") + } else { + setmainFile("file not found"); } setSelectedFile(file); setFiles(file ? [file] : []); @@ -281,104 +281,116 @@ const Editor = ({ goFullScreen = false }: { goFullScreen?: boolean }) => { />
{/* Sidebar */} + {/*
*/} + + + {/* Code and Terminal */}
- +
+ {files.length !== 0 ? ( +
+
+ + + {/* revert the sign here */} + {state > -1 && ( +
+ +
+ )} +
+
+ ) : ( +
+ +
+ )} +
+ + {/* Side Content */} +
- {/* Code and Terminal */} - {files.length !== 0 ? ( -
-
- - - {/* revert the sign here */} - {state > -1 && ( -
- -
- )} -
-
- ) : ( -
- -
- )} + { + setShowTerminal(true); + setTerminalHeight("max-h-96"); + setTerminalStatus("orange"); + }} + functionName={functionName} + onReset={resetEverything} + stepsForRecording={stepsForRecording} + stepsForTesting={stepsForTest} + stepsForDedup={stepsForDedup} + SideBarTheme={lighttheme} + activeStep={sidebarState.activeStep} + subStepIndex={sidebarState.subStepIndex} + dedupStepIndex={sidebarState.dedupStepIndex} + testSubStepIndex={sidebarState.testSubStepIndex} + expandedSteps={sidebarState.expandedSteps} + setSidebarState={setSidebarState} + />
- {/* Side Content */} - {showSideContent && ( -
- { - setShowTerminal(true); - setTerminalHeight("max-h-96"); - setTerminalStatus("orange"); - }} - functionName={functionName} - onReset={resetEverything} - stepsForRecording={stepsForRecording} - stepsForTesting={stepsForTest} - stepsForDedup={stepsForDedup} - removeSideContent={RemoveSideContent} - SideBarTheme={lighttheme} - sidebarState={sidebarState} - setSidebarState={setSidebarState} - /> -
- )}
From 121a51af4e773b59e7d2716946de784bb35ce7df Mon Sep 17 00:00:00 2001 From: Tanish Bhamare Date: Fri, 28 Feb 2025 17:36:14 +0530 Subject: [PATCH 2/3] fix: linting issues Signed-off-by: Tanish Bhamare --- .../components/SideBarContent/SideBarNormal.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/atg/components/SideBarContent/SideBarNormal.tsx b/components/atg/components/SideBarContent/SideBarNormal.tsx index 3815cec0..05d1006b 100644 --- a/components/atg/components/SideBarContent/SideBarNormal.tsx +++ b/components/atg/components/SideBarContent/SideBarNormal.tsx @@ -130,7 +130,7 @@ export default function SideBarNormal({ } }, 1000); - return () => clearTimeout(timer); + return () => {clearTimeout(timer)}; } } else if (activeStep === 1) { if ( @@ -166,7 +166,7 @@ export default function SideBarNormal({ } }, 1000); - return () => clearTimeout(timer); + return () => {clearTimeout(timer)}; } } else if (activeStep === 2) { if ( @@ -202,7 +202,7 @@ export default function SideBarNormal({ } }, 1000); localStorage.setItem("one_time", "false"); - return () => clearTimeout(timer); + return () => {clearTimeout(timer)}; } } }, [ @@ -217,7 +217,7 @@ export default function SideBarNormal({ ]); const handleNext = () => { - moveToNextStage() + void moveToNextStage() if (activeStep === 0) { setSidebarState((prevState) => ({ ...prevState, @@ -253,7 +253,7 @@ export default function SideBarNormal({ handleAccordionChange(index)} + onChange={() => {handleAccordionChange(index)}} sx={{ backgroundColor: "#f5f5f5", boxShadow: "none", @@ -284,8 +284,8 @@ export default function SideBarNormal({ /> ) } - aria-controls={`panel${index}-content`} - id={`panel${index}-header`} + aria-controls={`panel${String(index)}-content`} + id={`panel${String(index)}-header`} sx={{ color: "#ffffff", fontWeight: "bold", From b9a4dbe747c258bdf82deb3cb46464fc266baca1 Mon Sep 17 00:00:00 2001 From: Tanish Bhamare Date: Wed, 12 Mar 2025 12:16:18 +0530 Subject: [PATCH 3/3] fix: sidebar tag flacky Signed-off-by: Tanish Bhamare --- components/atg/components/SideBarContent/SideBarNormal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/atg/components/SideBarContent/SideBarNormal.tsx b/components/atg/components/SideBarContent/SideBarNormal.tsx index 05d1006b..729d263e 100644 --- a/components/atg/components/SideBarContent/SideBarNormal.tsx +++ b/components/atg/components/SideBarContent/SideBarNormal.tsx @@ -507,12 +507,12 @@ export default function SideBarNormal({
setShowText(true)} onMouseLeave={() => setShowText(false)} - className={`p-2 absolute hover:cursor-pointer border border-gray-500 border-b-0 right-0 top-1/2 bg-secondary-300 flex items-center justify-center shadow-lg transition-all duration-500 opacity-1 ${ - isColl ? "opacity-100" : "opacity-0" - }`} + className={`p-2 absolute hover:cursor-pointer border border-gray-500 border-b-0 right-0 top-1/2 bg-secondary-300 flex items-center justify-center shadow-lg opacity-1`} style={{ height: "3rem", width: showText ? "200px" : "40px ", + transition: "width 0.4s ease-in-out", + opacity: isColl ? "1" : "0", }} // Adjust width values as needed onClick={() => { setIsColl();