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

[Feature] Task | Add project information in the task #3350

Merged

Conversation

CREDO23
Copy link
Contributor

@CREDO23 CREDO23 commented Nov 19, 2024

Description

Fix #3098

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

Current screenshots

Loom

Summary by CodeRabbit

Release Notes

  • New Features

    • Introduced a ProjectDropDown component for selecting a project when creating tasks.
    • Enhanced task creation process by allowing explicit project association.
  • Improvements

    • Updated task management hooks to support project ID integration for better organization.
    • Improved layout flexibility for task-related components.
  • Bug Fixes

    • Adjusted component styling for consistent user experience.

These changes aim to streamline task creation and improve overall usability within the application.

@CREDO23 CREDO23 self-assigned this Nov 19, 2024
@CREDO23 CREDO23 linked an issue Nov 19, 2024 that may be closed by this pull request
Copy link
Contributor

coderabbitai bot commented Nov 19, 2024

Walkthrough

The pull request introduces enhancements to task management features by allowing the association of tasks with projects. Key changes include the addition of a project selection dropdown in the task creation form, modifications to hooks for task input and team tasks to support project IDs, and updates to existing components for improved usability and layout. A new ProjectIcon component is also introduced for visual representation. These modifications aim to facilitate better task organization within the application.

Changes

File Path Change Summary
apps/web/app/hooks/features/useTaskInput.ts Added taskProject reference variable and updated handleTaskCreation to include projectId.
apps/web/app/hooks/features/useTeamTasks.ts Updated createTask function to accept projectId as a parameter and adjusted its handling.
apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx Reformatted TaskSecondaryInfo component; updated ProjectDropDown to include new optional props.
apps/web/components/ui/svgs/project-icon.tsx Introduced new ProjectIcon component to render an SVG icon.
apps/web/lib/features/auth-user-task-input.tsx Integrated ProjectDropDown into AuthUserTaskInput with conditional rendering based on activeTeamTask.
apps/web/lib/features/task/task-input.tsx Modified TaskCard to include taskProject and updated ProjectDropDown integration for task creation.

Assessment against linked issues

Objective Addressed Explanation
Add project information when creating a new task (#[3098])
Project field is visible in the task creation form (#[3098])
User can select only one project per task (#[3098])
Task can be saved successfully with or without a project (#[3098])
Selected project is correctly associated with the new task (#[3098])

Possibly related issues

Possibly related PRs

Suggested reviewers

  • evereq
  • Cedric921

Poem

🐇 In the meadow where tasks align,
A dropdown blooms, a project sign.
With every click, a choice is made,
Tasks and projects in a grand parade!
Hop along, let organization thrive,
In our task world, we come alive! 🌼

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/web/app/hooks/features/useTaskInput.ts

Oops! Something went wrong! :(

ESLint: 8.46.0

ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct.

The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@CREDO23 CREDO23 changed the title 3098 feature task add project information in the task [Feature] Task | Add project information in the task Nov 19, 2024
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 4

🧹 Outside diff range and nitpick comments (9)
apps/web/lib/features/auth-user-task-input.tsx (2)

12-12: Consider relocating the ProjectDropDown component.

The deeply nested import path @components/pages/task/details-section/blocks/task-secondary-info suggests this component might be too buried in the component hierarchy. Consider moving it to a more accessible location if it's going to be reused across different features.


58-66: Consider adding error and loading states.

The ProjectDropDown implementation looks good and aligns with the PR objectives. However, consider adding error handling and loading states to improve the user experience when:

  • Project data is being fetched
  • API calls fail
  • No projects are available

Example enhancement:

 {activeTeamTask && (
+  <ErrorBoundary fallback={<ErrorMessage />}>
+    <Suspense fallback={<LoadingSpinner />}>
       <ProjectDropDown
         styles={{
           container: 'rounded-xl grow text-xs !max-w-[10.625rem]',
           listCard: 'rounded-xl'
         }}
         task={activeTeamTask}
       />
+    </Suspense>
+  </ErrorBoundary>
 )}
apps/web/app/hooks/features/useTaskInput.ts (2)

164-165: Fix indentation inconsistency.

The indentation uses tabs instead of spaces, which is inconsistent with the rest of the file.

Apply this diff to fix the indentation:

-        description: taskDescription.current,
-		projectId : taskProject.current
+        description: taskDescription.current,
+        projectId: taskProject.current

164-165: Consider adding project ID validation.

The current implementation doesn't validate the project ID before task creation. Consider adding validation to ensure the project exists and is active.

Example validation in handleTaskCreation:

 handleTaskCreation = ({
   autoActiveTask = true,
   autoAssignTaskAuth = true,
   assignToUsers = []
 }: {
   autoActiveTask?: boolean;
   autoAssignTaskAuth?: boolean;
   assignToUsers?: {
     id: string;
   }[];
 } = {}) => {
   if (
     query.trim().length < 2 ||
     inputTask?.title === query.trim() ||
     !userRef.current?.isEmailVerified
   )
     return;
+  if (taskProject.current && !isValidProjectId(taskProject.current)) {
+    throw new Error('Invalid project selected');
+  }
   // ... rest of the function
 };
apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx (2)

Line range hint 107-209: Remove duplicate code blocks

There are three duplicate sections that need to be removed:

  1. Epic section (lines 107-123)
  2. Task Status section (lines 145-162)
  3. Task Labels section (lines 182-209)

These duplicates appear to be accidentally introduced and should be removed to maintain code quality.


419-429: Improve accessibility in ProjectDropDown

The Listbox implementation could be more accessible:

  1. Add proper ARIA labels
  2. Improve keyboard navigation
  3. Add screen reader support

Consider these improvements:

 <Listbox.Button
   className={clsxm(
     'cursor-pointer outline-none w-full flex items-center justify-between px-4 h-full ',
     styles?.value
   )}
+  aria-label={selected ? `Selected project: ${selected.name}` : 'Select project'}
+  role="combobox"
+  aria-expanded={open}
 >
   {selected && (
-    <div className="">
+    <div className="" aria-hidden="true">
       <ProjectIcon />
     </div>
   )}
apps/web/app/hooks/features/useTeamTasks.ts (2)

Line range hint 299-310: Update hook documentation to include the new projectId parameter.

The function signature has been correctly updated to include the optional projectId parameter, but the JSDoc comment at the beginning of the hook needs to be updated to reflect this change.


324-330: Remove commented code and approve implementation.

The implementation correctly uses the explicitly provided projectId parameter, which aligns with the PR objectives. However, the commented code should be removed as it's no longer needed and could cause confusion.

Apply this diff to clean up the commented code:

-    // Set Project Id to cookie
-    // TODO: Make it dynamic when we add Dropdown in Navbar
-
-    // ...(activeTeam?.projects && activeTeam?.projects.length > 0
-    // 	? {
-    // 			projectId: activeTeam.projects[0].id
-    // 		}
-    // 	: {}),
     projectId,
apps/web/lib/features/task/task-input.tsx (1)

61-61: Consider relocating the ProjectDropDown component

The deeply nested import path suggests this component might be too tightly coupled to a specific feature. Consider moving it to a more general location like @components/shared/dropdowns for better reusability across the application.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between f37fac7 and 60aecdc.

📒 Files selected for processing (6)
  • apps/web/app/hooks/features/useTaskInput.ts (3 hunks)
  • apps/web/app/hooks/features/useTeamTasks.ts (3 hunks)
  • apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx (10 hunks)
  • apps/web/components/ui/svgs/project-icon.tsx (1 hunks)
  • apps/web/lib/features/auth-user-task-input.tsx (2 hunks)
  • apps/web/lib/features/task/task-input.tsx (3 hunks)
✅ Files skipped from review due to trivial changes (1)
  • apps/web/components/ui/svgs/project-icon.tsx
🔇 Additional comments (5)
apps/web/lib/features/auth-user-task-input.tsx (1)

35-35: LGTM! Improved layout flexibility.

The change from w-full to grow with max-width constraints is a good improvement that allows for more flexible layouts while maintaining consistent component sizes.

Also applies to: 41-41, 47-47, 54-54

apps/web/app/hooks/features/useTaskInput.ts (2)

66-66: LGTM! Verify project ID type consistency.

The taskProject ref is correctly implemented with appropriate typing and initialization.

Let's verify the project ID type consistency across the codebase:

✅ Verification successful

Let me search for more specific project ID usage patterns to verify type consistency.


Type consistency for taskProject ref is verified

The codebase consistently uses string | null type for project IDs in task-related interfaces (e.g., ITask.projectId: string | null). The useRef<null | string>(null) implementation aligns perfectly with this pattern.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for project ID type definitions and usage
ast-grep --pattern 'type $_ = { $$$, projectId: string, $$$ }'
ast-grep --pattern 'interface $_ { $$$, projectId: string, $$$ }'

Length of output: 12696


Script:

#!/bin/bash
# Search for project ID type usage in task-related contexts
ast-grep --pattern 'type Task = { $$$, projectId: $_, $$$ }'
ast-grep --pattern 'interface ITask { $$$, projectId: $_, $$$ }'
rg "projectId.*string" -A 2 -B 2

Length of output: 14151


238-239: Fix indentation and verify hook usage.

The indentation is inconsistent with the rest of the file.

Let's verify the hook's usage in components:

Apply this diff to fix the indentation:

-    userRef,
-	taskProject,
+    userRef,
+    taskProject,
✅ Verification successful

Fix indentation to use spaces consistently

The file uses spaces for indentation throughout, but the taskProject line incorrectly uses a tab. Apply this change to maintain consistency:

-    userRef,
-	taskProject,
+    userRef,
+    taskProject,
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for components using taskProject from useTaskInput
rg "const.*useTaskInput.*taskProject.*=" -A 5
rg "taskProject\s*=\s*useTaskInput" -A 5

Length of output: 90


Script:

#!/bin/bash
# Let's try a broader search for useTaskInput hook usage
rg "useTaskInput" -A 5

# Also search for object destructuring patterns that might include taskProject
ast-grep --pattern 'const { $$$, taskProject, $$$ } = useTaskInput($$$)'

Length of output: 13635


Script:

#!/bin/bash
# Let's check the indentation style used in the useTaskInput.ts file
rg "^\s+" apps/web/app/hooks/features/useTaskInput.ts

# Also check if taskProject is used in any destructuring patterns with different syntax
rg "({[^}]*taskProject[^}]*})\s*=\s*\w+" -A 2

Length of output: 6029

apps/web/app/hooks/features/useTeamTasks.ts (1)

Line range hint 299-330: Verify task creation calls across the codebase.

Let's ensure all components calling createTask have been updated to handle the projectId parameter appropriately.

✅ Verification successful

Based on the search results, I can now generate the final response:

Task creation calls have been properly updated to handle projectId

The codebase analysis shows that task creation has been properly adapted to the projectId changes:

  • useTaskInput.ts explicitly passes projectId: taskProject.current
  • Other task creation calls in the codebase either:
    • Pass through existing task properties (menu-kanban-card.tsx)
    • Create basic tasks with minimal properties (add-task-estimation-hours-modal.tsx)
    • Handle task creation via UI components (Kanban.tsx)

The removal of automatic project assignment and addition of explicit projectId parameter is safe as all task creation flows have been updated accordingly.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Find all calls to createTask to verify they handle projectId.
# Expected: All task creation calls should either pass projectId or explicitly handle its absence.

# Search for createTask function calls
rg -A 5 "createTask\(" --type ts --type tsx

# Search for any remaining automatic project assignment logic
rg -A 5 "projects\[0\]\.id" --type ts --type tsx

Length of output: 152


Script:

#!/bin/bash
# Let's try without specifying file types and use more specific patterns
# Search for createTask function calls
rg -A 5 "createTask\("

# Search for any remaining automatic project assignment logic
rg -A 5 "projects\[0\]\.id"

# Also search for task creation related imports and definitions
rg "useTeamTasks|createTask"

Length of output: 37555


Script:

#!/bin/bash
# Let's analyze the task creation calls more specifically
rg -A 10 "createTask\({" --type typescript

# Also check for any projectId references in task creation
rg -B 5 -A 5 "projectId.*createTask" --type typescript

Length of output: 226


Script:

#!/bin/bash
# Search for task creation calls with simpler patterns
rg -A 10 "createTask\(" 

# Look for task creation implementations to understand the parameter handling
ast-grep --pattern 'createTask = $_'

# Search for projectId usage in task-related files
fd -e ts -e tsx | xargs rg "projectId.*task"

Length of output: 3889

apps/web/lib/features/task/task-input.tsx (1)

544-545: LGTM! Data structure changes are consistent

The addition of taskProject follows the established pattern of using refs for task-related data.

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.

[Feature] Task | Add project information in the task
2 participants