feat(platform): View secrets

[kriptonian1]

User description

Description

Give a summary of the change that you have made

Fixes #[ISSUENO]

Dependencies

Mention any dependencies/packages used

Future Improvements

Mention any improvements to be done in future related to any file/feature

Mentions

Mention and tag the people

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, Bug fix, Documentation

---

Description

• Added a new SecretPage component for viewing project secrets.
• Refactored project fetching to use utility functions.
• Updated and added Zod schemas for project and secret types.
• Added utility functions for project and secret API interactions.
• Enhanced project layout with dynamic project details and tabs.
• Added new Accordion and Tooltip components using Radix UI.
• Updated ProjectCard component for new project ID usage.
• Enhanced Navbar with dynamic project-specific tabs.
• Improved error handling in Combobox component.
• Improved layout responsiveness and styling.
• Added placeholder VariablePage component.
• Added SVG icons for secret components.
• Updated dependencies for new UI components.

---

Changes walkthrough 📝

	Relevant files
Enhancement	14 files page.tsx Add SecretPage component for viewing project secrets          apps/platform/src/app/(main)/project/[project]/@secret/page.tsx Added a new SecretPage component to display secrets. Implemented fetching secrets by project ID. Utilized Accordion and Tooltip components for UI. +123/-0  page.tsx Refactor project fetching to use utility functions              apps/platform/src/app/(main)/page.tsx Replaced direct API calls with Projects utility functions. Removed unused imports and functions. +4/-39    index.ts Update and add Zod schemas for project and secret types    apps/platform/src/types/index.ts Added new Zod schemas for Secret and Version. Updated existing schemas to remove UUID constraints. +38/-5    projects.ts Add utility functions for project API interactions              apps/platform/src/lib/api-functions/projects.ts Added utility functions for project-related API calls. Implemented functions to fetch projects by workspace ID and project ID. +77/-0    layout.tsx Enhance project layout with dynamic project details and tabs apps/platform/src/app/(main)/project/[project]/layout.tsx Added logic to fetch and display current project details. Integrated tab-based navigation for secrets and variables. +35/-9    accordion.tsx Add Accordion component using Radix UI                                      apps/platform/src/components/ui/accordion.tsx Added new Accordion component with trigger and content. Utilized Radix UI for accordion functionality. +56/-0    index.tsx Update ProjectCard component for new project ID usage        apps/platform/src/components/dashboard/projectCard/index.tsx Updated project card to use id instead of idForImage. Modified project link to include tab query parameter. +4/-4      tooltip.tsx Add Tooltip component using Radix UI                                          apps/platform/src/components/ui/tooltip.tsx Added new Tooltip component using Radix UI. Implemented tooltip provider, trigger, and content. +27/-0    index.tsx Enhance Navbar with dynamic project-specific tabs                apps/platform/src/components/shared/navbar/index.tsx Added project-specific tabs for navigation. Updated navbar to dynamically display tabs based on the current path. +12/-3    combobox.tsx Update Combobox component for better error handling            apps/platform/src/components/ui/combobox.tsx Updated combobox to use nullish coalescing operator. Improved error handling for workspace fetching. +4/-1      secrets.ts Add utility function for fetching secrets by project ID    apps/platform/src/lib/api-functions/secrets.ts Added utility function to fetch all secrets by project ID. Implemented Zod validation for fetched secrets. +26/-0    layout.tsx Improve layout responsiveness and styling                                apps/platform/src/app/(main)/layout.tsx Adjusted layout styles for better responsiveness. Updated main container height properties. +2/-2      page.tsx Add placeholder VariablePage component                                      apps/platform/src/app/(main)/project/[project]/@variable/page.tsx Added a placeholder VariablePage component. +7/-0      index.ts Add SVG icons for secret components                                            apps/platform/public/svg/secret/index.ts Added SVG imports for secret-related icons. +4/-0
Dependencies	1 files package.json Update dependencies for new UI components                                apps/platform/package.json Added new dependencies for Radix UI components and dayjs. +3/-0
Additional files (token-limit)	1 files pnpm-lock.yaml ...                                                                                                            pnpm-lock.yaml ... +11347/-12887

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

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

🧪 No relevant tests

🔒 Security concerns Sensitive Information Exposure: The PR introduces a new feature for viewing secrets. It is crucial to ensure that strict access controls and auditing are implemented to prevent unauthorized access and to track access to sensitive information.

⚡ Key issues to review Possible Bug: The use of console.error for error handling in API calls across various files (e.g., secrets.ts, projects.ts) is not ideal for production. Consider implementing a more robust error handling strategy. Data Validation Concern: The use of Zod for runtime data validation is good, but ensure that all endpoints properly handle the cases where data does not validate against the schemas. Security Concern: The new SecretPage component potentially exposes sensitive data. Ensure that appropriate permissions checks are in place to prevent unauthorized access. Performance Issue: The SecretPage component fetches all secrets on every render triggered by pathname changes. This could lead to performance issues if the number of secrets is large. Consider fetching data less frequently or only when necessary.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible issue	Add a null check for pathname.split('/')[2] to prevent potential runtime errors Add a null check for pathname.split('/')[2] before using it to avoid potential runtime errors if the pathname does not have the expected format. apps/platform/src/app/(main)/project/[project]/@secret/page.tsx [39] -Secrets.getAllSecretbyProjectId(pathname.split('/')[2]) +const projectId = pathname.split('/')[2] +if (projectId) { + Secrets.getAllSecretbyProjectId(projectId) +} Apply this suggestion Suggestion importance[1-10]: 8 Why: Adding a null check is crucial to avoid runtime errors when the pathname structure is not as expected, which is a significant improvement for robustness.	8
	✅ Verify and correct the version numbers for dependencies to ensure consistency and avoid potential issues Suggestion Impact: The suggestion led to the removal of the incorrect version formatting for '@semantic-release/changelog' and other dependencies, ensuring consistency in the version numbers. code diff: '@semantic-release/changelog': specifier: ^6.0.3 version: 6.0.3(semantic-release@24.0.0) @@ -32,21 +29,36 @@ '@sentry/profiling-node': specifier: ^7.102.0 version: 7.118.0 + chalk: + specifier: ^4.1.2 + version: 4.1.2 + clsx: + specifier: ^2.1.0 + version: 2.1.1 conventional-changelog-conventionalcommits: specifier: 8.0.0 version: 8.0.0 conventional-changelog-writer: specifier: 8.0.0 version: 8.0.0 + framer-motion: + specifier: ^11.2.9 + version: 11.2.12(react-dom@18.3.1)(react@18.3.1) million: specifier: ^3.0.5 version: 3.1.11 + moment: + specifier: ^2.30.1 + version: 2.30.1 sharp: specifier: ^0.33.3 version: 0.33.4 + tailwind-merge: + specifier: ^2.3.0 + version: 2.3.0 ts-node: specifier: ^10.9.2 - version: 10.9.2(@types/node@17.0.45)(typescript@5.5.3) Ensure that the version numbers for dependencies are consistent and correct. For example, the version for @semantic-release/changelog is listed as 6.0.3(semantic-release@24.0.0) which might be a typo or formatting error. Verify all such entries to avoid potential issues during package installation. pnpm-lock.yaml [14-16] '@semantic-release/changelog': specifier: ^6.0.3 - version: 6.0.3(semantic-release@24.0.0) + version: 6.0.3 Apply this suggestion Suggestion importance[1-10]: 7 Why: The suggestion correctly identifies a potential issue with the formatting of version numbers in the dependency list, which could lead to problems during package installation. However, the suggested fix does not address all similar issues throughout the file.	7
Maintainability	Extract the logic inside the useEffect hook into a separate function for better readability and maintainability To improve readability and maintainability, consider extracting the logic inside the useEffect hook into a separate function. This will make the effect cleaner and easier to understand. apps/platform/src/app/(main)/project/[project]/@secret/page.tsx [38-47] useEffect(() => { - Secrets.getAllSecretbyProjectId(pathname.split('/')[2]) - .then((data) => { + const fetchSecrets = async () => { + try { + const data = await Secrets.getAllSecretbyProjectId(pathname.split('/')[2]) setAllSecrets(data) - }) - .catch((error) => { + } catch (error) { console.error(error) - }) + } + } + fetchSecrets() }, [pathname]) Apply this suggestion Suggestion importance[1-10]: 7 Why: Extracting logic into a separate function indeed improves readability and maintainability, aligning with best practices for complex React components.	7
	Simplify version strings by removing unnecessary nested parentheses Consider removing unnecessary nested parentheses in version strings to improve readability and avoid potential parsing issues. For example, 10.9.2(@types/node@17.0.45)(typescript@5.5.3) can be simplified. pnpm-lock.yaml [48-49] ts-node: specifier: ^10.9.2 - version: 10.9.2(@types/node@17.0.45)(typescript@5.5.3) + version: 10.9.2 Apply this suggestion Suggestion importance[1-10]: 6 Why: The suggestion is valid as it aims to improve readability and avoid parsing errors by simplifying version strings. However, the impact on the overall functionality is minimal, hence the moderate score.	6
Enhancement	Add a loading state to indicate to the user that the secrets are being fetched Consider adding a loading state to indicate to the user that the secrets are being fetched, improving the user experience. apps/platform/src/app/(main)/project/[project]/@secret/page.tsx [35] const [allSecrets, setAllSecrets] = useState<secret[]>() +const [loading, setLoading] = useState<boolean>(true) Apply this suggestion Suggestion importance[1-10]: 6 Why: Adding a loading state enhances user experience by providing feedback during data fetching, although it's a relatively common practice.	6
	Remove redundant or unused dependencies to keep the project lightweight Ensure that all added dependencies are necessary and remove any redundant or unused dependencies to keep the project lightweight and maintainable. pnpm-lock.yaml [120-122] -chalk: - specifier: ^4.1.2 - version: 4.1.2 +# Remove if not necessary Apply this suggestion Suggestion importance[1-10]: 5 Why: While the suggestion to remove unnecessary dependencies is generally good for maintainability, there is no evidence provided that 'chalk' is redundant or unused. This makes the suggestion speculative without further context.	5
Performance	Use React.memo for the AccordionItem component to prevent unnecessary re-renders To improve performance, consider using React.memo for the AccordionItem component to prevent unnecessary re-renders. apps/platform/src/app/(main)/project/[project]/@secret/page.tsx [58-62] -<accordionitem +...="" +<memoizedaccordionitem="" +const="" classname="rounded-xl bg-white/5 px-5" key="{secret.secret.id}" memoizedaccordionitem="React.memo(AccordionItem)" value="{secret.secret.id}"> Suggestion importance[1-10]: 5 Why: Using React.memo can improve performance by avoiding unnecessary re-renders, but the impact depends on the specific use case and the complexity of the component.	5
Best practice	Verify compatibility of newly added dependencies with existing ones to avoid conflicts Ensure that the added dependencies are compatible with the existing ones to avoid potential conflicts. For example, verify if @radix-ui/react-accordion and @radix-ui/react-tooltip are compatible with other @radix-ui packages. apps/platform/package.json [12-27] +"@radix-ui/react-accordion": "^1.2.0", +"@radix-ui/react-tooltip": "^1.1.2", - Apply this suggestion Suggestion importance[1-10]: 5 Why: The suggestion to check compatibility is a good practice, especially when adding new packages. However, it lacks specific details on how to verify compatibility and does not provide evidence of potential conflicts, making it somewhat generic.	5