feat(platform): Add a new secret and added loader on project screen

[poswalsameer]

User description

Description

This PR adds the feature of adding a new secret in a project and also adds a loader UI on the project screen.

Fixes #321

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, Tests

---

Description

• Added functionality to create, edit, and delete secrets and variables.

• Introduced reusable UI components for dialogs, alerts, and loaders.

• Enhanced project management with improved type safety and error handling.

• Updated UI/UX for better user experience and responsiveness.

---

Changes walkthrough 📝

	Relevant files
Enhancement	12 files layout.tsx Added secret and variable management logic and UI integration. +263/-57 page.tsx Implemented variable management UI with CRUD operations.  +298/-3  add-secret-dialog.tsx Created reusable dialog component for adding secrets.        +237/-0  page.tsx Enhanced project screen with loader and improved UI.          +56/-30  alert-dialog.tsx Added reusable alert dialog component.                                      +141/-0  edit-variable-dialog.tsx Added dialog for editing variables with validation.            +128/-0  confirm-delete.tsx Added confirmation dialog for variable deletion.                  +103/-0  project-screen-loader.tsx Added skeleton loader for project screen.                                +29/-0    textarea.tsx Created reusable textarea component.                                          +22/-0    index.tsx Updated project card to use slug for navigation.                  +2/-1      index.ts Added new SVG assets for UI components.                                    +9/-1      collapsible.tsx Added collapsible component for variable details.                +12/-0
Bug fix	1 files response-parser.ts Improved type safety in response parsing.                                +2/-2
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 🔶 321 - Partially compliant Compliant requirements: Add dialog UI for user to input secret name and values for available environments Show success/error toast notifications using sonner component Non-compliant requirements: Auto-capitalization of secret name is not implemented Requires further human verification: Verify that API calls are using the correct functions from API-CLIENT: Create controller for Secret module #352

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

🧪 No relevant tests

🔒 Security concerns Sensitive information exposure: The secret values entered in the dialog are displayed as plain text in the input fields. Consider masking the secret values or using password input type for better security.

⚡ Recommended focus areas for review Missing Validation The secret name and value fields lack input validation before submission. Should validate required fields and input formats. const addSecret = async () => { if (currentProjectSlug === '') { throw new Error("Current project doesn't exist") } const request: CreateSecretRequest = { name: newSecretData.secretName, projectSlug: currentProjectSlug, entries: newSecretData.environmentValue ? [ { value: newSecretData.environmentValue, environmentSlug: newSecretData.environmentName } ] : undefined, note: newSecretData.secretNote } const { success, error, data } = await ControllerInstance.getInstance().secretController.createSecret( request, {} ) if (success && data) { toast.success('Secret added successfully', { // eslint-disable-next-line react/no-unstable-nested-components -- we need to nest the description description: () => ( <p className="text-xs text-emerald-300">You created a new secret</p> ) }) } if (error) { if (error.statusCode === 409) { toast.error('Secret name already exists', { // eslint-disable-next-line react/no-unstable-nested-components -- we need to nest the description description: () => ( <p className="text-xs text-red-300"> Secret name is already there, kindly use different one. </p> ) }) } else { // eslint-disable-next-line no-console -- we need to log the error that are not in the if condition console.error(error) } } setNewSecretData({ secretName: '', secretNote: '', environmentName: '', environmentValue: '' }) setIsOpen(false) } Error Handling The error handling in the addVariable function only handles 409 status code specifically. Other error cases should be handled appropriately. const addVariable = async (e: MouseEvent<HTMLButtonElement>) => { e.preventDefault() if (!currentProject) { throw new Error("Current project doesn't exist") } const request: CreateVariableRequest = { name: newVariableData.variableName, projectSlug: currentProject.slug, entries: newVariableData.environmentValue ? [ { value: newVariableData.environmentValue, environmentSlug: newVariableData.environmentName } ] : undefined, note: newVariableData.note } const { success, error } = await ControllerInstance.getInstance().variableController.createVariable( request, {} ) if (success) { toast.success('Variable added successfully', { // eslint-disable-next-line react/no-unstable-nested-components -- we need to nest the description description: () => ( <p className="text-xs text-emerald-300"> The variable has been added to the project </p> ) }) } if (error) { if (error.statusCode === 409) { toast.error('Variable name already exists', { // eslint-disable-next-line react/no-unstable-nested-components -- we need to nest the description description: () => ( <p className="text-xs text-red-300"> Variable name is already there, kindly use different one. </p> ) }) } else { // eslint-disable-next-line no-console -- we need to log the error that are not in the if condition console.error(error) } } setIsOpen(false) }

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	Fix reference to undefined variable in effect hook to prevent runtime errors Fix the undefined open variable usage in useEffect which could cause runtime errors. Use isOpen prop instead. 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]: 10 Why: This fixes a critical bug where an undefined 'open' variable is used instead of the 'isOpen' prop, which would cause runtime errors and potentially break the component's functionality.	10
	Improve error handling to prevent runtime crashes when required data is missing Handle the case where currentProject is undefined before throwing the error. Add a proper error boundary or return early to prevent runtime crashes. apps/platform/src/app/(main)/project/[project]/layout.tsx [73-75] if (!currentProject) { - throw new Error("Current project doesn't exist") + toast.error("Project not found") + setIsOpen(false) + return } Apply this suggestion Suggestion importance[1-10]: 8 Why: The suggestion improves error handling by replacing a runtime crash with proper user feedback and graceful error recovery, which is critical for application stability and user experience.	8
	Add input validation to prevent submission of invalid or incomplete data Add input validation before submitting the secret creation request to ensure required fields are not empty. apps/platform/src/components/ui/add-secret-dialog.tsx [47-51] const addSecret = async () => { + if (!newSecretData.secretName.trim()) { + toast.error('Secret name is required') + return + } if (currentProjectSlug === '') { - throw new Error("Current project doesn't exist") + toast.error('Project not found') + return } Apply this suggestion Suggestion importance[1-10]: 7 Why: Adding validation for required fields before submission prevents invalid data and improves user experience by providing immediate feedback.	7
General	Display error feedback to users instead of only logging to console Add error message display to users when variable update fails, instead of just logging to console. This improves user experience by providing clear feedback. apps/platform/src/components/ui/edit-variable-dialog.tsx [63-66] if (error) { - // eslint-disable-next-line no-console -- we need to log the error - console.error('Error while updating variable: ', error) + toast.error('Failed to update variable', { + description: () => ( + <p className="text-xs text-red-300"> + {error.message || 'An unexpected error occurred'} + </p> + ) + }); } Apply this suggestion Suggestion importance[1-10]: 8 Why: The suggestion significantly improves user experience by providing visible error feedback instead of just logging to console, making the application more user-friendly and helping users understand when and why operations fail.	8
	Implement consistent error handling with user notifications for failed operations Add error toast notification when variable deletion fails, similar to the success case, to provide consistent user feedback. apps/platform/src/components/ui/confirm-delete.tsx [49-51] -if( error ){ - console.error(error) +if (error) { + toast.error('Failed to delete variable', { + description: () => ( + <p className="text-xs text-red-300"> + {error.message || 'An unexpected error occurred'} + </p> + ) + }); } Apply this suggestion Suggestion importance[1-10]: 8 Why: Adding error toast notifications for failed deletions maintains consistency with success notifications and significantly improves user feedback, helping users understand operation failures.	8
	Improve error handling for failed API requests to provide better user feedback Add error handling for failed API responses in the useEffect hook to prevent silent failures. apps/platform/src/app/(main)/project/[project]/@variable/page.tsx [162-167] if (success && data) { setAllVariables(data.items) -} else { - // eslint-disable-next-line no-console -- we need to log the error - console.error(error) +} else if (error) { + toast.error('Failed to load variables') + console.error('Failed to load variables:', error) } Apply this suggestion Suggestion importance[1-10]: 6 Why: The suggestion enhances error handling by adding user-visible error notifications instead of just logging to console, improving the user experience when API requests fail.	6