feat(platform): Edit existing variables in a project

[poswalsameer]

User description

Description

This PR adds the feature to edit existing variables in a project.

Fixes #562

Mentions

@kriptonian1

Screenshots of relevant screens

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

---

PR Type

Enhancement

---

Description

• Complete variable management system with CRUD operations

• Enhanced UI components for better user interaction

  • New dialogs, textarea, alert components

• Improved project creation and management workflow

• Added type safety and error handling improvements

---

Changes walkthrough 📝

	Relevant files
Enhancement	11 files layout.tsx Add variable creation and environment management functionality +294/-52 page.tsx Implement variable management page with CRUD operations    +277/-3  alert-dialog.tsx Add reusable alert dialog component                                            +141/-0  page.tsx Update project creation dialog and form handling                  +25/-12  edit-variable-dialog.tsx Add dialog component for editing variables                              +121/-0  confirm-delete.tsx Add confirmation dialog for variable deletion                        +103/-0  textarea.tsx Add reusable textarea component                                                    +22/-0    index.tsx Update project card link to use slug                                          +2/-1      index.ts Add new SVG icon exports                                                                  +9/-1      response-parser.ts Improve type casting in response parser                                    +2/-2      collapsible.tsx Add reusable collapsible component                                              +12/-0
Additional files	3 files erDetails(userData) +0/-664  t updateSelf = useCallback(async () => { +0/-664

---

💡 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:

🎫 Ticket compliance analysis ✅ 562 - PR Code Verified Compliant requirements: Add ability to edit existing variables in a project Allow editing variable name and note Update UI in platform/src/app/(main)/project/[project]/@variable/page.tsx Follow Figma design Requires further human verification: Verify UI matches Figma design

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Form Validation The edit variable form lacks input validation. Empty strings are handled but there's no validation for invalid characters or length limits. const [variableName, setVariableName] = useState<string>("") const [extraNote, setExtraNote] = useState<string>("") Error Handling The error handling for variable operations (delete, edit) only logs to console. Should show error messages to user. const [isEditDialogOpen, setIsEditDialogOpen] = useState<boolean>(false) const [selectedVariableSlug, setSelectedVariableSlug] = useState<string | null>(null)

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	Fix undefined variable reference in useEffect dependency array The open variable is used in the useEffect hook but is not defined anywhere in the component, which could cause runtime errors. apps/platform/src/components/ui/confirm-delete.tsx [64-68] useEffect(() => { - if (!open) { + if (!isOpen) { cleanup() } return () => cleanup() -}, [open, cleanup]) +}, [isOpen, cleanup]) Apply this suggestion Suggestion importance[1-10]: 9 Why: Using an undefined variable in useEffect dependencies is a critical bug that could cause runtime errors. Replacing 'open' with 'isOpen' fixes this potential crash.	9
	Validate required fields before making API calls to prevent invalid data submission Add error handling for the case when newVariableData.variableName is empty before making the API call. This prevents creating variables with empty names. apps/platform/src/app/(main)/project/[project]/layout.tsx [64-70] const addVariable = async (e: MouseEvent<HTMLButtonElement>) => { e.preventDefault() if (!currentProject) { throw new Error("Current project doesn't exist") } + if (!newVariableData.variableName.trim()) { + toast.error('Variable name is required') + return + } const request: CreateVariableRequest = { name: newVariableData.variableName, Apply this suggestion Suggestion importance[1-10]: 8 Why: Adding validation for empty variable names is critical to prevent data integrity issues and improve user experience by providing immediate feedback. This is a significant improvement for data quality and API robustness.	8
	Properly validate and sanitize input data before making API update requests Add input validation to prevent empty variable names when updating. Currently the code allows submitting empty strings which could cause data integrity issues. apps/platform/src/components/ui/edit-variable-dialog.tsx [38-44] const request: UpdateVariableRequest = { variableSlug, - name: variableName === '' ? undefined : variableName, - note: extraNote === '' ? undefined : extraNote, + name: variableName.trim() === '' ? undefined : variableName.trim(), + note: extraNote.trim() === '' ? undefined : extraNote.trim(), entries: undefined, } Apply this suggestion Suggestion importance[1-10]: 7 Why: Using trim() for input validation is important to prevent whitespace-only values and maintain data quality. This improves data integrity and user experience.	7