Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(platform): Added screen for CREATE NEW PROJECT #540

Conversation

poswalsameer
Copy link
Contributor

@poswalsameer poswalsameer commented Nov 17, 2024

User description

Description

Added screen for Create New Project by creating the UI and adding all the required functions to create a new project on button click.

Fixes #244

Dependencies

No dependencies.

Mentions

@rajdip-b @kriptonian1

Screenshots of relevant screens

Screenshot (521)
Screenshot (246)

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


Description

  • Implemented the "create new project" feature in the platform dashboard, allowing users to create projects with specified environments and access levels.
  • Added a new select component using Radix UI to enhance the UI for selecting access levels.
  • Updated type definitions to include accessLevel for projects.
  • Added @radix-ui/react-select as a new dependency to support the select component.
  • Updated TypeScript configuration to support new JSX and path settings.
  • Updated the lockfile to reflect changes in dependencies.

Changes walkthrough 📝

Relevant files
Enhancement
page.tsx
Implement "Create New Project" Feature in Dashboard           

apps/platform/src/app/(main)/page.tsx

  • Implemented the "create new project" functionality.
  • Added UI components for project creation.
  • Integrated project creation with backend API.
  • Updated project state management.
  • +173/-45
    select.tsx
    Add Select Component Using Radix UI                                           

    apps/platform/src/components/ui/select.tsx

  • Added new UI select component.
  • Utilized Radix UI for select functionality.
  • Styled select component for consistency.
  • +158/-0 
    index.ts
    Update Type Definitions for Project Creation                         

    apps/platform/src/types/index.ts

  • Added accessLevel to NewProject type.
  • Updated type definitions for project creation.
  • +2/-1     
    Dependencies
    package.json
    Add Radix UI Select Dependency                                                     

    apps/platform/package.json

    • Added @radix-ui/react-select dependency.
    +1/-0     
    pnpm-lock.yaml
    Update Lockfile for New Dependencies                                         

    pnpm-lock.yaml

    • Updated lockfile with new dependencies.
    +175/-301
    Configuration changes
    tsconfig.json
    Update TypeScript Configuration                                                   

    apps/platform/tsconfig.json

    • Updated TypeScript configuration for JSX and paths.
    +22/-6   

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

    Copy link
    Contributor

    PR Reviewer Guide 🔍

    Here are some key observations to aid the review process:

    🎫 Ticket compliance analysis 🔶

    244 - Partially compliant

    Compliant requirements:

    • Project dashboard auto refreshes via setProjects state update

    Non-compliant requirements:

    • Default environment named 'default' not enforced
    • No validation to ensure only one default workspace
    • Multiple environment creation not implemented
    ⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
    🧪 No relevant tests
    🔒 No security concerns identified
    ⚡ Recommended focus areas for review

    Missing Validation
    Environment validation logic is missing - should enforce single default environment and validate environment names

    Error Handling
    The createNewProject function lacks proper error handling and user feedback for failed API calls

    Type Safety
    The accessLevel type conversion may allow invalid values through the select component

    @poswalsameer poswalsameer changed the title FEAT (Platform) : Added screen for CREATE NEW PROJECT feat : Added screen for CREATE NEW PROJECT Nov 17, 2024
    Copy link
    Contributor

    codiumai-pr-agent-free bot commented Nov 17, 2024

    PR Code Suggestions ✨

    Explore these optional code suggestions:

    CategorySuggestion                                                                                                                                    Score
    Possible bug
    ✅ Ensure consistent casing between UI values and type definitions
    Suggestion Impact:The access level values in the Select component were changed from lowercase to uppercase to match the type definitions.

    code diff:

    -                        {["Global", "Internal", "Private"].map((accessValue) => (
    -                          <SelectItem
    -                            className="group rounded-sm cursor-pointer"
    -                            key={accessValue.toLowerCase()}
    -                            value={accessValue.toLowerCase()}
    -                          >
    -                              {accessValue} 
    -                          </SelectItem>
    -                        ))}
    +                        {['GLOBAL', 'INTERNAL', 'PRIVATE'].map(
    +                          (accessValue) => (
    +                            <SelectItem
    +                              className="group cursor-pointer rounded-sm"
    +                              key={accessValue.toUpperCase()}
    +                              value={accessValue.toUpperCase()}
    +                            >
    +                              {accessValue}
    +                            </SelectItem>

    The access level values in the Select component are lowercase but the type expects
    uppercase. Align the values to prevent type mismatches.

    apps/platform/src/app/(main)/page.tsx [239-247]

    -{["Global", "Internal", "Private"].map((accessValue) => (
    +{["GLOBAL", "INTERNAL", "PRIVATE"].map((accessValue) => (
       <SelectItem
         className="group rounded-sm cursor-pointer"
    -    key={accessValue.toLowerCase()}
    -    value={accessValue.toLowerCase()}
    +    key={accessValue}
    +    value={accessValue}
       >
    • Apply this suggestion
    Suggestion importance[1-10]: 9

    Why: Fixes a critical bug where the access level values would not match the expected type due to case mismatch, which could cause runtime errors or unexpected behavior.

    9
    Best practice
    Add error handling and user feedback for API operations

    Add error handling and user feedback in the createNewProject function. Display a
    toast message on success/failure and handle potential API errors.

    apps/platform/src/app/(main)/page.tsx [63-98]

     const createNewProject = async () => {
    -  const projectController = new ProjectController(process.env.NEXT_PUBLIC_BACKEND_URL);
    -  const request: CreateProjectRequest = {
    -    name: newProjectData.name,
    -    workspaceSlug: currentWorkspace.slug,
    -    description: newProjectData.description ?? undefined,
    -    environments: newProjectData.environments,
    -    accessLevel: newProjectData.accessLevel
    -  }
    -  const response = await projectController.createProject(request);
    -  if( response.success ){
    -    const createdProject: ProjectWithoutKeys = {
    -      id: response.data.id,
    -      name: response.data.name,
    -      ...
    +  try {
    +    const projectController = new ProjectController(process.env.NEXT_PUBLIC_BACKEND_URL);
    +    const request: CreateProjectRequest = {
    +      name: newProjectData.name,
    +      workspaceSlug: currentWorkspace.slug,
    +      description: newProjectData.description ?? undefined,
    +      environments: newProjectData.environments,
    +      accessLevel: newProjectData.accessLevel
         }
    -    setProjects((prevProjects) => [...prevProjects, createdProject]);
    +    const response = await projectController.createProject(request);
    +    if(response.success) {
    +      const createdProject: ProjectWithoutKeys = {
    +        id: response.data.id,
    +        name: response.data.name,
    +        ...
    +      }
    +      setProjects((prevProjects) => [...prevProjects, createdProject]);
    +      toast.success('Project created successfully');
    +    } else {
    +      toast.error('Failed to create project');
    +    }
    +  } catch (error) {
    +    console.error('Error creating project:', error);
    +    toast.error('An error occurred while creating the project');
       }
     }
    Suggestion importance[1-10]: 8

    Why: The suggestion adds critical error handling and user feedback via toast messages, which significantly improves the user experience and helps with debugging. The current code lacks proper error handling.

    8
    Possible issue
    Validate required form fields before submission

    Add input validation before submitting the project creation request to ensure
    required fields are filled.

    apps/platform/src/app/(main)/page.tsx [63-74]

     const createNewProject = async () => {
    +  if (!newProjectData.name?.trim()) {
    +    toast.error('Project name is required');
    +    return;
    +  }
    +  if (!newProjectData.environments?.[0]?.name?.trim()) {
    +    toast.error('Environment name is required');
    +    return;
    +  }
       const projectController = new ProjectController(process.env.NEXT_PUBLIC_BACKEND_URL);
       const request: CreateProjectRequest = {
    -    name: newProjectData.name,
    +    name: newProjectData.name.trim(),
         workspaceSlug: currentWorkspace.slug,
    -    description: newProjectData.description ?? undefined,
    +    description: newProjectData.description?.trim() ?? undefined,
         environments: newProjectData.environments,
         accessLevel: newProjectData.accessLevel
       }
    • Apply this suggestion
    Suggestion importance[1-10]: 7

    Why: Adds important input validation to prevent submission of incomplete data, improving data integrity and user experience by providing immediate feedback.

    7
    Maintainability
    ✅ Simplify path mapping configuration by using a more concise object literal syntax
    Suggestion Impact:The suggestion to consolidate the path mappings into a single object literal was implemented, improving readability.

    code diff:

         "paths": {
    -      "@/*": [
    -        "./src/*"
    -      ],
    -      "@public/*": [
    -        "./public/*"
    -      ]
    +      "@/*": ["./src/*"],
    +      "@public/*": ["./public/*"]

    Consider consolidating the path mappings into a single object literal for better
    readability and maintainability.

    apps/platform/tsconfig.json [10-17]

     "paths": {
    -  "@/*": [
    -    "./src/*"
    -  ],
    -  "@public/*": [
    -    "./public/*"
    -  ]
    +  "@/*": ["./src/*"],
    +  "@public/*": ["./public/*"]
     },
    • Apply this suggestion
    Suggestion importance[1-10]: 3

    Why: The suggestion offers a minor readability improvement by making the path mappings more concise, but doesn't impact functionality or fix any issues.

    3

    💡 Need additional feedback ? start a PR chat

    @rajdip-b rajdip-b changed the title feat : Added screen for CREATE NEW PROJECT feat(platform): Added screen for CREATE NEW PROJECT Nov 17, 2024
    @rajdip-b rajdip-b force-pushed the feat/added-screen-for-create-new-project branch 3 times, most recently from 2a42ae8 to 2ef4bb4 Compare November 18, 2024 18:22
    @rajdip-b rajdip-b force-pushed the feat/added-screen-for-create-new-project branch from 2ef4bb4 to 0ac46f2 Compare November 20, 2024 09:32
    updatedAt: data.updatedAt,
    storePrivateKey: data.storePrivateKey,
    isDisabled: data.isDisabled,
    accessLevel: data.accessLevel as "GLOBAL" | "INTERNAL" | "PRIVATE",
    Copy link
    Member

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Access level is already inferred as these types.

    @@ -53,16 +53,16 @@ export default function Index(): JSX.Element {
    environments: [
    {
    name: '',
    description: '',
    isDefault: false
    projectId: Date.now().toString(),
    Copy link
    Member

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    We can just set it to ''. Either ways, this won't be sent to the backend

    @@ -42,8 +42,12 @@ export const zProject = z.object({

    export const zEnvironment = z.object({
    name: z.string(),
    description: z.string().nullable(),
    isDefault: z.boolean().optional()
    projectId: z.string(),
    Copy link
    Member

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Do not use these. We already have type definitions set in the schema package.

    @@ -37,19 +38,40 @@ import {
    DialogTrigger
    } from './dialog'
    import { Button } from './button'
    import { WorkspaceSchema } from '@keyshade/schema/schemas'

    interface WorkspaceResponse {
    Copy link
    Member

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    The response object already have the pagination type included. I would highly recommend you to go through the entire schema package once to understand the types.


    const { success, data } = zWorkspace.array().safeParse(workspaceData)
    const workspaceData: WorkspaceResponse =
    await apiClient.get<WorkspaceResponse>('/workspace')
    Copy link
    Member

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    You shouldnt be using direct calls. We have the controllers defined in api-client

    Copy link
    Contributor Author

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    You shouldnt be using direct calls. We have the controllers defined in api-client

    This was done intentionally, @kriptonian1 was with me. There were some issues from the api side on getting the currentWorkspace. That's why this was done, just to make sure that the flow atleast works.

    Copy link
    Member

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Oh, but do keep a TODO: in here to change it later on.

    Copy link
    Contributor Author

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Oh, but do keep a TODO: in here to change it later on.

    sure

    packages/api-client/src/controllers/project.ts Outdated Show resolved Hide resolved
    apps/platform/src/app/(main)/page.tsx Outdated Show resolved Hide resolved
    @kriptonian1
    Copy link
    Contributor

    @rajdip-b if it's working then merge it let's not focus too much on quality

    @rajdip-b
    Copy link
    Member

    @rajdip-b if it's working then merge it let's not focus too much on quality

    I'm focussing on the consistency of things. That's why i've kept it on the hold till the schema package gets implemented in here. We don't want to re-do everything. And also, the API is bound to change now that the frontend has started to change.

    @rajdip-b
    Copy link
    Member

    rajdip-b commented Dec 1, 2024

    @poswalsameer can you fix the conflicts? Also, i think the type defs are the only thing remaining. once you get that done we can quickly merge this one. its taking a while i must say

    @poswalsameer
    Copy link
    Contributor Author

    @poswalsameer can you fix the conflicts? Also, i think the type defs are the only thing remaining. once you get that done we can quickly merge this one. its taking a while i must say

    Fixed the conflicts, for the only change remaining I had a talk with @kriptonian1 about the same, he suggested to merge the changes since there are some issues in that file, so yeah apart from that everything is done from my side.

    @rajdip-b
    Copy link
    Member

    rajdip-b commented Dec 1, 2024

    @poswalsameer linting is failing with some GC error. This never happened before. Can you try running this locally and see if the error persists? Also, please update the lockfile.

    @poswalsameer
    Copy link
    Contributor Author

    @poswalsameer linting is failing with some GC error. This never happened before. Can you try running this locally and see if the error persists? Also, please update the lockfile.

    Sure, I guess it's happening because of some log statement still remaining in the codefile, let me remove them. Also, can you help me with lockfile, like which things need to be updated there?

    @rajdip-b
    Copy link
    Member

    rajdip-b commented Dec 2, 2024

    Delete the pnpm lock file and run pnpm i. that should fix it.

    @rajdip-b rajdip-b force-pushed the feat/added-screen-for-create-new-project branch from cbfbcd3 to 08a2221 Compare December 3, 2024 17:08
    @rajdip-b rajdip-b merged commit b644633 into keyshade-xyz:develop Dec 3, 2024
    7 checks passed
    rajdip-b pushed a commit that referenced this pull request Dec 3, 2024
    ## [2.8.0](v2.7.0...v2.8.0) (2024-12-03)
    
    ### 🚀 Features
    
    * **api:** Add workspace removal notification email template ([#476](#476)) ([40b754f](40b754f))
    * **cli:** Store `metrics_enabled` key in profile config ([#536](#536)) ([9283b22](9283b22))
    * **package, api, cli:** Add api-key schemas and types; Fix schema inconsistencies; Minor fix for CLI build errors  ([#557](#557)) ([126d024](126d024))
    * **platform:** Added screen for CREATE NEW PROJECT ([#540](#540)) ([b644633](b644633))
    * **platform:** Updated the empty state of dashboard ([#522](#522)) ([28739d9](28739d9))
    * **schema, api-client:** Migrate auth types to @keyshade/schema ([#532](#532)) ([d880098](d880098))
    * **schema, api-client:** Migrate event schemas and types to @keyshade/schema ([#546](#546)) ([a3267de](a3267de))
    * **schema, api-client:** Migrate integration schemas and types to @keyshade/schema ([#547](#547)) ([08868c3](08868c3))
    * **schema, api-client:** Migrate project schemas and environment schemas along with their types to @keyshade/schema ([#538](#538)) ([c468af0](c468af0))
    * **schema, api-client:** Migrate [secure] types and schemas to @keyshade/schema ([#539](#539)) ([bc3100b](bc3100b))
    * **schema, api-client:** Migrate user types and schemas to @keyshade/schema ([#535](#535)) ([c24695e](c24695e))
    * **schema, api-client:** Migrate variable schemas and types to @keyshade/schema ([#545](#545)) ([0ee8f9a](0ee8f9a))
    * **schema, api-client:** Migrate workspace-membership schemas and types to @keyshade/schema ([#569](#569)) ([4398969](4398969))
    * **schema, api-client:** Migrate workspace-role schemas and types to @keyshade/schema ([#568](#568)) ([9efbf2d](9efbf2d))
    * **schema:** Add User type inference from UserSchema ([#574](#574)) ([84c1db5](84c1db5))
    
    ### 🐛 Bug Fixes
    
    * **api:** Incorrect oauth redirect url ([58d96e5](58d96e5))
    * **platform:** Resolve loading SVG blocking input field interaction ([#571](#571)) ([30f4f65](30f4f65))
    
    ### 📚 Documentation
    
    * Add pictures to Bruno setup ([#541](#541)) ([210c0fd](210c0fd))
    * Migrate to Bruno ([#525](#525)) ([1793d92](1793d92))
    
    ### 🔧 Miscellaneous Chores
    
    * **ci:** Add script to validate schema package ([59e4280](59e4280))
    * Fixed codecov client version ([a998ae4](a998ae4))
    * **package:** Fixed tests and did housekeeping ([#544](#544)) ([40008e3](40008e3))
    * Update test coverage settings ([5b27e32](5b27e32))
    * Update Turbo to 2.3.1 ([#564](#564)) ([3a63823](3a63823))
    * **web:** Update dockerfile ([10d9cc5](10d9cc5))
    
    ### 🔨 Code Refactoring
    
    * **api-client, schema:** Add workspace's schemas and types in @keyshade/schema ([#520](#520)) ([7c8ee5d](7c8ee5d))
    muntaxir4 pushed a commit to muntaxir4/keyshade that referenced this pull request Jan 1, 2025
    muntaxir4 pushed a commit to muntaxir4/keyshade that referenced this pull request Jan 1, 2025
    ## [2.8.0](keyshade-xyz/keyshade@v2.7.0...v2.8.0) (2024-12-03)
    
    ### 🚀 Features
    
    * **api:** Add workspace removal notification email template ([keyshade-xyz#476](keyshade-xyz#476)) ([40b754f](keyshade-xyz@40b754f))
    * **cli:** Store `metrics_enabled` key in profile config ([keyshade-xyz#536](keyshade-xyz#536)) ([9283b22](keyshade-xyz@9283b22))
    * **package, api, cli:** Add api-key schemas and types; Fix schema inconsistencies; Minor fix for CLI build errors  ([keyshade-xyz#557](keyshade-xyz#557)) ([126d024](keyshade-xyz@126d024))
    * **platform:** Added screen for CREATE NEW PROJECT ([keyshade-xyz#540](keyshade-xyz#540)) ([b644633](keyshade-xyz@b644633))
    * **platform:** Updated the empty state of dashboard ([keyshade-xyz#522](keyshade-xyz#522)) ([28739d9](keyshade-xyz@28739d9))
    * **schema, api-client:** Migrate auth types to @keyshade/schema ([keyshade-xyz#532](keyshade-xyz#532)) ([d880098](keyshade-xyz@d880098))
    * **schema, api-client:** Migrate event schemas and types to @keyshade/schema ([keyshade-xyz#546](keyshade-xyz#546)) ([a3267de](keyshade-xyz@a3267de))
    * **schema, api-client:** Migrate integration schemas and types to @keyshade/schema ([keyshade-xyz#547](keyshade-xyz#547)) ([08868c3](keyshade-xyz@08868c3))
    * **schema, api-client:** Migrate project schemas and environment schemas along with their types to @keyshade/schema ([keyshade-xyz#538](keyshade-xyz#538)) ([c468af0](keyshade-xyz@c468af0))
    * **schema, api-client:** Migrate [secure] types and schemas to @keyshade/schema ([keyshade-xyz#539](keyshade-xyz#539)) ([bc3100b](keyshade-xyz@bc3100b))
    * **schema, api-client:** Migrate user types and schemas to @keyshade/schema ([keyshade-xyz#535](keyshade-xyz#535)) ([c24695e](keyshade-xyz@c24695e))
    * **schema, api-client:** Migrate variable schemas and types to @keyshade/schema ([keyshade-xyz#545](keyshade-xyz#545)) ([0ee8f9a](keyshade-xyz@0ee8f9a))
    * **schema, api-client:** Migrate workspace-membership schemas and types to @keyshade/schema ([keyshade-xyz#569](keyshade-xyz#569)) ([4398969](keyshade-xyz@4398969))
    * **schema, api-client:** Migrate workspace-role schemas and types to @keyshade/schema ([keyshade-xyz#568](keyshade-xyz#568)) ([9efbf2d](keyshade-xyz@9efbf2d))
    * **schema:** Add User type inference from UserSchema ([keyshade-xyz#574](keyshade-xyz#574)) ([84c1db5](keyshade-xyz@84c1db5))
    
    ### 🐛 Bug Fixes
    
    * **api:** Incorrect oauth redirect url ([58d96e5](keyshade-xyz@58d96e5))
    * **platform:** Resolve loading SVG blocking input field interaction ([keyshade-xyz#571](keyshade-xyz#571)) ([30f4f65](keyshade-xyz@30f4f65))
    
    ### 📚 Documentation
    
    * Add pictures to Bruno setup ([keyshade-xyz#541](keyshade-xyz#541)) ([210c0fd](keyshade-xyz@210c0fd))
    * Migrate to Bruno ([keyshade-xyz#525](keyshade-xyz#525)) ([1793d92](keyshade-xyz@1793d92))
    
    ### 🔧 Miscellaneous Chores
    
    * **ci:** Add script to validate schema package ([59e4280](keyshade-xyz@59e4280))
    * Fixed codecov client version ([a998ae4](keyshade-xyz@a998ae4))
    * **package:** Fixed tests and did housekeeping ([keyshade-xyz#544](keyshade-xyz#544)) ([40008e3](keyshade-xyz@40008e3))
    * Update test coverage settings ([5b27e32](keyshade-xyz@5b27e32))
    * Update Turbo to 2.3.1 ([keyshade-xyz#564](keyshade-xyz#564)) ([3a63823](keyshade-xyz@3a63823))
    * **web:** Update dockerfile ([10d9cc5](keyshade-xyz@10d9cc5))
    
    ### 🔨 Code Refactoring
    
    * **api-client, schema:** Add workspace's schemas and types in @keyshade/schema ([keyshade-xyz#520](keyshade-xyz#520)) ([7c8ee5d](keyshade-xyz@7c8ee5d))
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    None yet
    Development

    Successfully merging this pull request may close these issues.

    PLATFORM: Add create new project
    3 participants