feat(platform): Add variable to a project

[poswalsameer]

User description

Description

This PR adds the feature of adding a new variable to a project.

Fixes #559

Dependencies

No dependencies

Future Improvements

Mentions

@rajdip-b @kriptonian1

Screenshots of relevant screens

Add 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

• Implemented a new feature to add variables to a project, including a UI dialog for input and integration with VariableController.
• Refactored the secret fetching logic to use SecretController and updated the data handling to match the new API structure.
• Integrated VariablePage component into the project layout and updated project fetching logic to use ProjectController.
• Updated project card links to use slug instead of id for navigation.
• Cleaned up unused imports in the combobox component.

---

Changes walkthrough 📝

	Relevant files
Enhancement	page.tsx Refactor secret fetching to use SecretController API          apps/platform/src/app/(main)/project/[project]/@secret/page.tsx Replaced Secrets with SecretController from @keyshade/api-client. Updated logic to fetch secrets using getAllSecretsOfProject. Refactored code to handle API response and errors. Updated secret data access to match new API structure. +32/-21  page.tsx Add new variable creation feature with UI dialog                  apps/platform/src/app/(main)/project/[project]/@variable/page.tsx Implemented a new dialog for adding variables to a project. Integrated VariableController to handle variable creation. Added state management for form inputs and API responses. Fetched and displayed available environments for variable assignment. +242/-3  layout.tsx Integrate VariablePage and refactor project fetching          apps/platform/src/app/(main)/project/[project]/layout.tsx Integrated VariablePage component for variable management. Updated project fetching logic to use ProjectController. Added conditional rendering for secrets and variables tabs. +87/-57  index.tsx Update project card link to use slug                                          apps/platform/src/components/dashboard/projectCard/index.tsx Updated project link to use slug instead of id. +2/-1
Miscellaneous	combobox.tsx Clean up unused imports in combobox component                        apps/platform/src/components/ui/combobox.tsx Removed unused imports and cleaned up code. +0/-3      api-client.ts No changes in API client file                                                        apps/platform/src/lib/api-client.ts No changes made; file content remains the same. +93/-93  workspace-storage.ts No changes in workspace storage file                                          apps/platform/src/lib/workspace-storage.ts No changes made; file content remains the same. +30/-30

---

💡 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 🔶 559 - Partially compliant Compliant requirements: Added popup dialog for creating variables Implemented in correct file location Non-compliant requirements: No verification that UI matches Figma design exactly

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling API error handling is minimal with only console.log statements. Should add proper error notifications to users. Form Validation No validation on form inputs before submission. Should validate required fields and input formats. Type Safety Using @ts-ignore to bypass type checking. Should properly type the data response.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	Fix loading state management to properly reflect asynchronous data fetching status Move setIsLoading(false) inside the getAllSecretsByProjectSlug function after the API call completes, to accurately reflect the loading state. apps/platform/src/app/(main)/project/[project]/@secret/page.tsx [47-65] async function getAllSecretsByProjectSlug() { - const { success, error, data } = - await secretController.getAllSecretsOfProject( - { projectSlug: pathname.split('/')[2] }, - {} - ) + try { + const { success, error, data } = + await secretController.getAllSecretsOfProject( + { projectSlug: pathname.split('/')[2] }, + {} + ) - if (success && data) { - //@ts-ignore - setAllSecrets(data) - } else { - // eslint-disable-next-line no-console -- we need to log the error - console.error(error) + if (success && data) { + //@ts-ignore + setAllSecrets(data) + } else { + // eslint-disable-next-line no-console -- we need to log the error + console.error(error) + } + } finally { + setIsLoading(false) } } getAllSecretsByProjectSlug() -setIsLoading(false) - Apply this suggestion Suggestion importance[1-10]: 8 Why: Moving setIsLoading(false) inside the async function ensures loading state accurately reflects API call completion and prevents race conditions. This is important for UX and preventing potential bugs.	8
	Improve error handling and user feedback for API operations Add error handling and loading state management for the variable creation API call to properly handle failures and provide user feedback. apps/platform/src/app/(main)/project/[project]/@variable/page.tsx [51-83] const addVariable = async (e: any) => { e.preventDefault() + try { + const variableController = new VariableController( + process.env.NEXT_PUBLIC_BACKEND_URL + ) - console.log('Data available in the state is: ', newVariableData) + const request: CreateVariableRequest = { + name: newVariableData.variableName, + projectSlug: currentProject?.slug as string, + entries: newVariableData.environmentValue + ? [ + { + value: newVariableData.environmentValue, + environmentSlug: newVariableData.environmentName + } + ] + : undefined, + note: newVariableData.note + } - const variableController = new VariableController( - process.env.NEXT_PUBLIC_BACKEND_URL - ) - - const request: CreateVariableRequest = { - name: newVariableData.variableName, - projectSlug: currentProject?.slug as string, - entries: newVariableData.environmentValue - ? [ - { - value: newVariableData.environmentValue, - environmentSlug: newVariableData.environmentName - } - ] - : undefined, - note: newVariableData.note + const { success, error, data } = await variableController.createVariable( + request, + {} + ) + + if (success && data) { + setIsOpen(false) + } else { + throw new Error(error?.message || 'Failed to create variable') + } + } catch (error) { + console.error('Failed to create variable:', error) + // Add user feedback here (e.g., toast notification) } - - const { success, error, data } = await variableController.createVariable( - request, - {} - ) - console.log('Value of success: ', success) - console.log('Value of error: ', error) - console.log('Response after api is: ', data) - - setIsOpen(false) } Apply this suggestion Suggestion importance[1-10]: 7 Why: Adding proper error handling with try-catch and success validation improves reliability and maintainability. The suggestion also correctly identifies the need for user feedback.	7
	Add input validation to prevent invalid API requests Add input validation before submitting the variable creation request to ensure required fields are present. apps/platform/src/app/(main)/project/[project]/@variable/page.tsx [51-73] const addVariable = async (e: any) => { e.preventDefault() + + if (!newVariableData.variableName || !currentProject?.slug) { + console.error('Missing required fields') + return + } const variableController = new VariableController( process.env.NEXT_PUBLIC_BACKEND_URL ) const request: CreateVariableRequest = { - name: newVariableData.variableName, - projectSlug: currentProject?.slug as string, + name: newVariableData.variableName.trim(), + projectSlug: currentProject.slug, entries: newVariableData.environmentValue ? [ { - value: newVariableData.environmentValue, + value: newVariableData.environmentValue.trim(), environmentSlug: newVariableData.environmentName } ] : undefined, - note: newVariableData.note + note: newVariableData.note.trim() } Apply this suggestion Suggestion importance[1-10]: 6 Why: Input validation prevents unnecessary API calls with invalid data and improves error handling. The suggestion also properly handles string trimming to prevent whitespace issues.	6

💡 Need additional feedback ? start a PR chat

[kriptonian1]

LGTM