refactor(platform): Refactor project components

[rajdip-b]

PR Type

Enhancement, Bug fix

---

Description

• Refactored project creation and editing components for modularity.

• Introduced CreateProjectDialogue and EditProjectSheet components.

• Replaced local storage workspace management with Jotai state management.

• Improved error handling and user feedback with toast notifications.

---

Changes walkthrough 📝

	Relevant files
Enhancement	7 files page.tsx Refactored project dashboard to use modular components      +32/-347 index.tsx Added new modular component for project creation                  +283/-0  index.tsx Added new modular component for project editing                    +70/-0    index.tsx Updated project card to integrate with new edit sheet        +6/-8      combobox.tsx Refactored workspace handling to use Jotai state                  +11/-12  index.ts Added Jotai atoms for workspace and project state management +6/-0      workspace.ts Reintroduced workspace utility functions for local storage management [link]
Miscellaneous	1 files page.tsx Removed unused import for cleaner code                                      +0/-1
Formatting	1 files index.tsx Minor formatting cleanup in sidebar component                        +0/-1

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling The createNewProject function should handle validation of required fields before making the API call. Currently there's no validation for required fields like project name and environment name. const createNewProject = useCallback(async () => { if (currentWorkspace) { newProjectData.workspaceSlug = currentWorkspace.slug const { data, error, success } = await ControllerInstance.getInstance().projectController.createProject( newProjectData, {} ) if (success && data) { setProjects([ ...projects, { ...data, environmentCount: newProjectData.environments ? newProjectData.environments.length : 0, secretCount: 0, variableCount: 0 } ]) } else { toast.error( 'Something went wrong while creating project. Check console for more info.' ) // eslint-disable-next-line no-console -- we need to log the error console.error(error) } setIsCreateProjectDialogOpen(false) } else { toast.error('No workspace selected') } }, [ Missing Implementation The edit project form is not fully implemented - it renders the form fields but lacks the logic to handle form submission and API integration to update the project. <div className="grid gap-4 py-4"> <div className="flex flex-col items-start gap-4"> <Label className="text-right" htmlFor="name"> Project Name </Label> <Input className="col-span-3" id="name" /> </div> <div className="flex flex-col items-start gap-4"> <Label className="text-right" htmlFor="name"> Project description </Label> <Input className="col-span-3" id="name" /> </div> <div className="flex items-center justify-between"> <Label className="w-[10rem] text-left" htmlFor="name"> Do you want us to store the private key? </Label> <div className="flex gap-1 text-sm"> <div>No</div> <Switch /> <div>Yes</div> </div> </div> </div> State Management The Switch component for storing private key is not connected to state management - its value is not being tracked or used when creating the project. <Switch className="h-[1.25rem] w-[2.25rem] " />

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	Implement form state management and validation for edit functionality Add form state management and validation for the edit project form. Currently the form inputs are not connected to any state and the save button has no implementation. apps/platform/src/components/dashboard/project/editProjectSheet/index.tsx [40-64] -<Input className="col-span-3" id="name" /> +<Input + className="col-span-3" + id="name" + value={editProjectData.name} + onChange={(e) => setEditProjectData(prev => ({...prev, name: e.target.value}))} +/> ... -<Button type="submit" variant="secondary"> +<Button + type="submit" + variant="secondary" + onClick={handleSaveChanges} +> Save changes </Button> Suggestion importance[1-10]: 9 Why: The edit project form lacks state management and validation, making it completely non-functional. This is a critical issue as users cannot modify project details, impacting core application functionality.	9
	✅ Connect toggle switch component to state management to make it functional Suggestion Impact: The commit implemented the suggestion by adding state management to the Switch component using newProjectData.storePrivateKey and onCheckedChange handler code diff: - <Switch className="h-[1.25rem] w-[2.25rem] " /> + <Switch + checked={newProjectData.storePrivateKey} + className="h-[1.25rem] w-[2.25rem]" + onCheckedChange={(checked) => { + setNewProjectData((prev) => ({ + ...prev, + storePrivateKey: checked + })) + }} + /> Add validation for the storePrivateKey state in the Switch component. Currently the Switch is not connected to any state management, making it non-functional. apps/platform/src/components/dashboard/project/createProjectDialogue/index.tsx [266-268] <div className="p-[0.125rem]"> - <Switch className="h-[1.25rem] w-[2.25rem] " /> + <Switch + className="h-[1.25rem] w-[2.25rem]" + checked={newProjectData.storePrivateKey} + onCheckedChange={(checked) => { + setNewProjectData((prev) => ({ + ...prev, + storePrivateKey: checked + })) + }} + /> </div> Apply this suggestion Suggestion importance[1-10]: 8 Why: The switch component is currently non-functional as it lacks state management, preventing users from toggling the private key storage option. This is an important feature that directly affects application functionality.	8