feat(platform): updated the empty state of dashboard

kriptonian1 commented 2 weeks ago

User description

Description

Updated the empty state of the dashboard

Fixes #485

Mentions

@rajdip-b @poswalsameer

Screenshots of relevant screens

Developer's checklist

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

If changes are made in the code:

[x] I have followed the coding guidelines
[x] 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
[x] 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

Introduced a new state isProjectEmpty to determine if the project list is empty and update the UI accordingly.
Enhanced the empty state of the dashboard by integrating the FolderSVG and a new message encouraging users to start their first project.
Added a button in the empty state to facilitate the creation of a new project, improving user experience.
Updated the dashboard to conditionally display project-related elements only when projects exist.

Changes walkthrough 📝

Relevant files

Enhancement

index.ts `Add FolderSVG to Dashboard SVG Exports` apps/platform/public/svg/dashboard/index.ts Added import for `FolderSVG`. Exported `FolderSVG` for use in other components.	+2/-1
page.tsx `Update Dashboard Empty State with New Design` apps/platform/src/app/(main)/page.tsx Added state `isProjectEmpty` to track if there are no projects. Updated UI to conditionally render elements based on `isProjectEmpty`. Integrated `FolderSVG` in the empty state UI. Added a button to create a project in the empty state.	+23/-10

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

codiumai-pr-agent-free[bot] commented 2 weeks ago

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

**🎫 Ticket compliance analysis ✅** **[485](https://github.com/keyshade-xyz/keyshade/issues/485) - Fully compliant** Fully compliant requirements: - Update the current empty dashboard state with the new Figma design - Modify the specified part of the codebase to match the Figma design

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review

Potential Bug
The "Create project" button in the empty state doesn't seem to trigger the project creation dialog. Verify if this button is correctly linked to the project creation functionality. Code Duplication
There are two separate buttons for creating a new project (one in the header and one in the empty state). Consider refactoring to use a single reusable component for consistency and maintainability.

codiumai-pr-agent-free[bot] commented 2 weeks ago

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Enhancement	Ensure consistent behavior across similar UI elements ___ The "Create project" button in the empty state should trigger the same action as the "Create a new Project" button. Consider reusing the same handler or dialog. [apps/platform/src/app/(main)/page.tsx [190]](https://github.com/keyshade-xyz/keyshade/pull/522/files#diff-d6c7ffe7a9ea578ea4b0a5587f2759a7a1eac9a7c7d6dfae25ddd0bae48ea8e2R190-R190) ```diff - + + + ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 8 Why: This suggestion addresses an important consistency issue. Reusing the same dialog for creating a project in both the empty and non-empty states ensures a uniform user experience and reduces code duplication.	8
Enhancement	Simplify state management by deriving values from existing state when possible ___ The `isProjectEmpty` state seems redundant as it can be derived from `projects.length`. Consider removing it and using `projects.length === 0` directly in the JSX. [apps/platform/src/app/(main)/page.tsx [34]](https://github.com/keyshade-xyz/keyshade/pull/522/files#diff-d6c7ffe7a9ea578ea4b0a5587f2759a7a1eac9a7c7d6dfae25ddd0bae48ea8e2R34-R34) ```diff -const [isProjectEmpty, setIsProjectEmpty] = useState(true) +// Remove isProjectEmpty state // ... -setIsProjectEmpty(data.length === 0) -// ... -{!isProjectEmpty && ( +{projects.length > 0 && ( My Projects )} ``` Suggestion importance[1-10]: 6 Why: Removing the redundant `isProjectEmpty` state and using `projects.length === 0` directly simplifies the code and reduces the risk of state inconsistencies. This improves code maintainability and performance slightly.	6
Maintainability	Extract complex UI components into separate, reusable components ___ Consider extracting the empty state UI into a separate component for better code organization and reusability. [apps/platform/src/app/(main)/page.tsx [184-191]](https://github.com/keyshade-xyz/keyshade/pull/522/files#diff-d6c7ffe7a9ea578ea4b0a5587f2759a7a1eac9a7c7d6dfae25ddd0bae48ea8e2R184-R191) ```diff - - - Start your First Project - - Create a file and start setting up your environment and secret keys - - - + ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 7 Why: Extracting the empty state UI into a separate component would improve code organization and reusability. This is a good practice for maintainability, especially as the component grows in complexity.	7

💡 Need additional feedback ? start a PR chat

keyshade-xyz / keyshade