[WEB-1804] fix: issue description content being overwritten on each swr call

[aaryan610]

Problem:

Whenever the user is focused on the issue description and the SWR call happens to re-fetch the issue details, the editor content gets re-initialized causing a slight flicker in the editor.

Solution:

Removed passing swrIssueDescription as the editor's value, avoiding any re-initialization of the editor content.

Plane issue: WEB-1804

Summary by CodeRabbit

• New Features

  • Enhanced flexibility in the IssueDescriptionInput component by making the swrIssueDescription property optional.

• Bug Fixes

  • Simplified data flow in various components by removing unnecessary props related to issue details, potentially improving performance and clarity.

• Refactor

  • Updated the handling of issue details across multiple components to streamline data management and enhance maintainability.

[coderabbitai]

Walkthrough

The changes in this pull request involve the removal of several properties related to issue details across multiple components. Specifically, the swrArchivedIssueDetails and swrIssueDetails variables and their associated props have been eliminated from the ArchivedIssueDetailsPage, IssueDetailsPage, and various related components. Additionally, the swrIssueDescription property has been made optional in the IssueDescriptionInputProps interface. These modifications reflect a shift in how issue details are managed and passed between components.

Changes

File	Change Summary
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx	Removed data from useSWR and eliminated swrIssueDetails prop in IssueDetailRoot.
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx	Removed swrIssueDetails from destructuring, indicating a change in how issue details are managed.
web/core/components/issues/description-input.tsx	Made swrIssueDescription optional in IssueDescriptionInputProps.
web/core/components/issues/issue-detail/main-content.tsx	Removed swrIssueDetails prop and its usage in IssueMainContent.
web/core/components/issues/issue-detail/root.tsx	Removed swrIssueDetails from destructured props in IssueDetailRoot.
web/core/components/issues/peek-overview/issue-detail.tsx	Removed swrIssueDescription prop from PeekOverviewIssueDetails.

Possibly related PRs

• [WEB-2310] fix: Issue count alignment when states are collapsed in kanban layout #5559: The changes in the IssueDetailsPage component involve the removal of the swrIssueDetails variable, which is directly related to the removal of the swrIssueDetails prop in the IssueDetailRoot component in the main PR.
• [WEB-1116] fix: current version not displaying the latest content #5573: The modifications in the PageRoot and PagesVersionEditor components involve changes to how issue details are managed and displayed, which aligns with the main PR's focus on altering data flow and component interactions.
• [WEB-2443] fix: role validation and code refactor #5596: The changes in the ProjectViewIssuesPage component enhance error handling related to loading states, which is relevant to the main PR's adjustments in how data is fetched and utilized in the ArchivedIssueDetailsPage component.
• [WEB-2308] fix: description editor loader on issue modal when editing sub issue from another project. #5625: The update in the CreateUpdateIssueModalBase component regarding how projectId is derived may relate to the overall data handling changes seen in the main PR, particularly in the context of managing issue details across different components.

Suggested labels

🌟improvement

Suggested reviewers

• sriramveeraghanta
• SatishGandham
• prateekshourya29

Poem

In the garden of code, we hop and play,
Removing the clutter, making way.
With props now lighter, we dance with glee,
Simplifying paths, oh what a spree!
A tale of details, both neat and bright,
Hopping through changes, a joyful sight! 🐇✨

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 1c0c158 and b5840b0.

Files selected for processing (6)

• web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx (1 hunks)
• web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx (1 hunks)
• web/core/components/issues/description-input.tsx (1 hunks)
• web/core/components/issues/issue-detail/main-content.tsx (1 hunks)
• web/core/components/issues/issue-detail/root.tsx (1 hunks)
• web/core/components/issues/peek-overview/issue-detail.tsx (0 hunks)

Files not reviewed due to no reviewable changes (1)

• web/core/components/issues/peek-overview/issue-detail.tsx

Files skipped from review due to trivial changes (2)

• web/core/components/issues/description-input.tsx
• web/core/components/issues/issue-detail/main-content.tsx

Additional comments not posted (3)

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx (1)

27-27: Verify the impact on the IssueDetailRoot component.

The removal of the data property from the useSWR hook and the elimination of the swrIssueDetails prop passed to the IssueDetailRoot component align with the PR objective of preventing the editor's content from being re-initialized during SWR calls.

Please ensure that the IssueDetailRoot component has been updated to handle data fetching internally or through a different mechanism, and that the overall data flow within the application remains consistent.

Run the following script to verify the usage of swrIssueDetails in the IssueDetailRoot component:

Verification successful

---

Changes verified: swrIssueDetails successfully removed

The verification process confirms that swrIssueDetails has been successfully removed from all relevant files, including the IssueDetailRoot component and related pages. This change aligns with the PR objective of preventing the editor's content from being re-initialized during SWR calls.

• Verified files:
  • web/core/components/issues/issue-detail/root.tsx
  • web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
  • web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx

The consistent implementation across these files suggests that the data flow within the application has been updated accordingly.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify that `swrIssueDetails` is no longer used in the `IssueDetailRoot` component.

# Test: Search for the usage of `swrIssueDetails` in the `IssueDetailRoot` component file. Expect: No occurrences.
rg --type typescript -A 5 $'swrIssueDetails' $(fd IssueDetailRoot.tsx)

Length of output: 104

---

Script:

#!/bin/bash
# Description: Find the IssueDetailRoot component file and search for 'swrIssueDetails' usage

# Find the IssueDetailRoot component file
file=$(fd -t f IssueDetailRoot)

if [ -z "$file" ]; then
  echo "IssueDetailRoot file not found"
  exit 1
fi

echo "File found: $file"

# Display file content and search for 'swrIssueDetails'
cat "$file" | grep -n -C 5 "swrIssueDetails"

# If no matches found, print a message
if [ $? -ne 0 ]; then
  echo "No occurrences of 'swrIssueDetails' found in $file"
fi

Length of output: 130

---

Script:

#!/bin/bash
# Description: Find files containing 'IssueDetailRoot' and search for 'swrIssueDetails' usage

# Search for files containing 'IssueDetailRoot'
files=$(fd -e ts -e tsx -e js -e jsx | xargs grep -l "IssueDetailRoot")

if [ -z "$files" ]; then
  echo "No files containing 'IssueDetailRoot' found"
  exit 1
fi

echo "Files found containing 'IssueDetailRoot':"
echo "$files"

# Search for 'swrIssueDetails' in the found files
echo "Searching for 'swrIssueDetails' in the found files:"
echo "$files" | while read -r file; do
  result=$(grep -n -C 5 "swrIssueDetails" "$file")
  if [ -n "$result" ]; then
    echo "File: $file"
    echo "$result"
    echo "---"
  fi
done

# If no matches found, print a message
if [ $? -ne 0 ]; then
  echo "No occurrences of 'swrIssueDetails' found in any of the files containing 'IssueDetailRoot'"
fi

Length of output: 2177

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx (1)

Line range hint 35-40: Refactor looks good!

The removal of swrIssueDetails from the destructuring of the useSWR hook result suggests a change in how the fetched issue details are being utilized within the component. This refactor may simplify the component's props and improve the data flow by relying on a different method for accessing or displaying the issue details, such as context or state management.

The loading and error handling logic remains intact, and the IssueDetailRoot component is still being rendered with the required props, ensuring the functionality is maintained.

web/core/components/issues/issue-detail/root.tsx (1)

58-58: Verify the impact of removing swrIssueDetails.

The removal of swrIssueDetails from the destructured props simplifies the component but may affect how issue details are fetched and displayed. Please ensure that:

1. The issue details are still being fetched correctly from the appropriate data source.
2. The IssueMainContent component and any other dependent components are updated to handle the absence of swrIssueDetails.
3. The overall functionality of displaying and updating issue details remains intact.

Run the following script to verify the usage of swrIssueDetails:

Verification successful

---

Removal of swrIssueDetails is safe and doesn't impact functionality.

After thorough analysis of the codebase, I can confirm that:

1. The swrIssueDetails prop is not used anywhere in the codebase.
2. Issue details are still being fetched and displayed correctly using getIssueById and fetchIssue functions.
3. The IssueDetailRoot component and other parts of the application have been updated to handle the absence of swrIssueDetails.

The removal of swrIssueDetails appears to be part of a refactoring to move away from SWR for data fetching in this component. The overall functionality of displaying and updating issue details remains intact.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of `swrIssueDetails` in the codebase.

# Test 1: Search for the usage of `swrIssueDetails`. 
# Expect: No occurrences of `swrIssueDetails` being used.
rg --type tsx 'swrIssueDetails' -A 5

# Test 2: Search for the fetching of issue details. 
# Expect: Issue details are being fetched using a different approach.
rg --type tsx 'getIssueById|fetchIssue' -A 5

Length of output: 139

---

Script:

#!/bin/bash
# Description: Verify the usage of `swrIssueDetails` and issue fetching in the codebase.

# Test 1: Search for the usage of `swrIssueDetails` in TypeScript and TypeScript React files.
echo "Searching for swrIssueDetails usage:"
fd -e ts -e tsx | xargs rg 'swrIssueDetails' -n

# Test 2: Search for the fetching of issue details using SWR or other methods.
echo "Searching for issue fetching methods:"
fd -e ts -e tsx | xargs rg 'getIssueById|fetchIssue|useSWR\(.*issue' -n

# Test 3: Search for SWR-related imports and hooks in the IssueDetailRoot component file.
echo "Searching for SWR-related imports and hooks in IssueDetailRoot:"
rg 'import.*useSWR|useSWR\(' web/core/components/issues/issue-detail/root.tsx -n

Length of output: 34145

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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 generate interesting stats about this repository and render them as a table.
  -- @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.