fix: show work item ID in created confirmation toast#8727
Open
MinitJain wants to merge 6 commits intomakeplane:previewfrom
Open
fix: show work item ID in created confirmation toast#8727MinitJain wants to merge 6 commits intomakeplane:previewfrom
MinitJain wants to merge 6 commits intomakeplane:previewfrom
Conversation
|
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughDerives work item ID and link from the created issue, adds separate copy flows and states for ID and URL, updates clipboard handlers and UI controls in the create-issue toast, and tweaks two button styling variants. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant UI as CreateIssueToastActionItems
participant Util as ClipboardUtils
participant Router as Browser/Router
User->>UI: Click "Copy ID" or "Copy Link"
UI->>Util: copyWorkItemId(copy workItemId) / copyUrlToClipboard(workItemLink)
Util-->>UI: success / failure
UI-->>User: update `copiedId` or `copiedLink` state -> show "Copied!" indicator
User->>UI: Click "View"
UI->>Router: open workItemLink
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx`:
- Around line 66-71: The copyWorkItemId handler is using copyUrlToClipboard
which expands the input into an absolute URL; change copyWorkItemId to write the
raw workItemId string to the clipboard instead (e.g., call
navigator.clipboard.writeText(workItemId) or the project's plain-text clipboard
helper) and keep the existing setCopied(true)/error handling flow; replace the
call to copyUrlToClipboard with a plain-text clipboard write so the toast copies
"PLANE-123" rather than an origin-prefixed URL.
- Line 28: The single boolean copied state (copied / setCopied) in
create-issue-toast-action-items.tsx drives both copy controls and must be split
so each button reflects its own success; replace copied with either two booleans
(copiedId, copiedLink) or a discriminated value (copiedTarget: "id" | "link" |
null), update the handlers (the functions that perform the copy for the ID and
the link) to set only the respective state, and start/clear a per-target timeout
to reset only that target's success flag so "Copy ID" and "Copy link"
independently show "Copied!" and hide/disable only their own control.
- Around line 53-59: The clipboard catch blocks in
create-issue-toast-action-items.tsx (around the copyUrlToClipboard calls)
swallow errors; update both catch handlers to (1) distinguish and handle proper
Error types, (2) call the app logging/reporting utility (e.g., logger.error or
reportError) with the caught error and context (workItemLink, action name), and
(3) surface a visible failure state by adding/using a state variable such as
copyFailed or copyError (alongside setCopied) so the UI can show a toast/error
indicator when copy fails; ensure the handlers for copyUrlToClipboard and the
other copy action both follow this pattern and include the error details in the
log/report.
- Around line 37-38: The code uses getProjectIdentifierById(issue?.project_id)
and then interpolates projectIdentifier into the displayed/copiable ID, which
can produce "undefined-<sequence_id>"; wrap all places that render or build the
work item ID (where projectIdentifier is used — e.g., the visible ID string,
copy button, and any handlers that construct
`${projectIdentifier}-${issue.sequence_id}`) in a conditional that only shows
those affordances when projectIdentifier is truthy, and otherwise render a
placeholder or nothing; also update the copy handler to guard against undefined
projectIdentifier so it never constructs or copies an invalid string.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: bfeabbd5-08cc-4722-b131-1fde982c7bc7
📒 Files selected for processing (1)
apps/web/core/components/issues/create-issue-toast-action-items.tsx
apps/web/core/components/issues/create-issue-toast-action-items.tsx
Outdated
Show resolved
Hide resolved
Comment on lines
37
to
38
| const projectIdentifier = getProjectIdentifierById(issue?.project_id); | ||
|
|
Contributor
There was a problem hiding this comment.
Guard the visible work item ID until the project identifier exists.
getProjectIdentifierById can return undefined, and Line 64 interpolates that directly into the rendered/copiable ID. In that state the toast shows undefined-<sequence_id>, which is worse than temporarily hiding the ID affordances.
Also applies to: 64-65, 82-88
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx` around
lines 37 - 38, The code uses getProjectIdentifierById(issue?.project_id) and
then interpolates projectIdentifier into the displayed/copiable ID, which can
produce "undefined-<sequence_id>"; wrap all places that render or build the work
item ID (where projectIdentifier is used — e.g., the visible ID string, copy
button, and any handlers that construct
`${projectIdentifier}-${issue.sequence_id}`) in a conditional that only shows
those affordances when projectIdentifier is truthy, and otherwise render a
placeholder or nothing; also update the copy handler to guard against undefined
projectIdentifier so it never constructs or copies an invalid string.
Comment on lines
+53
to
+59
| try { | ||
| await copyUrlToClipboard(workItemLink); | ||
| setCopied(true); | ||
| setTimeout(() => setCopied(false), 3000); | ||
| } catch (error) { | ||
| setCopied(false); | ||
| } |
Contributor
There was a problem hiding this comment.
Clipboard failures are swallowed silently.
Both handlers catch the write error, clear local state, and then do nothing else. A denied clipboard permission will look like a no-op to the user and leave no diagnostic trail. Please log/report the error and surface a failure state.
As per coding guidelines, "Use try-catch with proper error types and log errors appropriately for error handling."
Also applies to: 69-75
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx` around
lines 53 - 59, The clipboard catch blocks in create-issue-toast-action-items.tsx
(around the copyUrlToClipboard calls) swallow errors; update both catch handlers
to (1) distinguish and handle proper Error types, (2) call the app
logging/reporting utility (e.g., logger.error or reportError) with the caught
error and context (workItemLink, action name), and (3) surface a visible failure
state by adding/using a state variable such as copyFailed or copyError
(alongside setCopied) so the UI can show a toast/error indicator when copy
fails; ensure the handlers for copyUrlToClipboard and the other copy action both
follow this pattern and include the error details in the log/report.
apps/web/core/components/issues/create-issue-toast-action-items.tsx
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx`:
- Around line 60-64: The copyWorkItemId handler currently calls
navigator.clipboard.writeText directly which bypasses the shared fallback
helper; update copyWorkItemId to call the shared copyTextToClipboard(workItemId)
helper (the same pattern used by copyUrlToClipboard) inside the existing
try/catch and preserve success/error handling, and add any missing import for
copyTextToClipboard so the function uses the shared plain-text clipboard
fallback implementation.
- Around line 44-56: The click handlers currently call e.preventDefault() and
e.stopPropagation() after an await, so the event can still bubble; move
e.preventDefault() and e.stopPropagation() to the very start of the
copyToClipboard function (and any other click handlers in this file that perform
async work from the toast action items) so the event is canceled immediately
before any awaits, then proceed with the await/copy logic and the existing
try/catch and state updates.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: eff5f566-8661-4c5c-b648-7b96ccb009d7
📒 Files selected for processing (1)
apps/web/core/components/issues/create-issue-toast-action-items.tsx
apps/web/core/components/issues/create-issue-toast-action-items.tsx
Outdated
Show resolved
Hide resolved
apps/web/core/components/issues/create-issue-toast-action-items.tsx
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
apps/web/core/components/issues/create-issue-toast-action-items.tsx (3)
65-66:⚠️ Potential issue | 🟡 MinorUse the shared plain-text clipboard helper for
Copy ID.
navigator.clipboard.writeText(workItemId)skips the fallback behavior the app already uses for URL copies, soCopy IDcan fail in environments whereCopy linkstill works. Reuse the plain-text helper here to keep both actions equally reliable.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx` around lines 65 - 66, Replace the direct call to navigator.clipboard.writeText(workItemId) in create-issue-toast-action-items.tsx with the app's shared plain-text clipboard helper (the same helper used for Copy link) so the Copy ID action benefits from the same fallback behavior; import the helper at the top of the file, call it (await if it’s async) instead of navigator.clipboard.writeText, and keep the existing success/error handling around the call.
31-32:⚠️ Potential issue | 🟡 MinorGuard
workItemIduntil the project identifier is available.
getProjectIdentifierById(issue?.project_id)can still be falsy here, so this buildsundefined-<sequence>and exposes it both in the visible label and theCopy IDpath. Only construct/render the ID affordances onceprojectIdentifieris truthy.Also applies to: 58-67, 76-78
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx` around lines 31 - 32, The code constructs workItemId using getProjectIdentifierById(issue?.project_id) even when that returns falsy, producing values like "undefined-<sequence>"; change this by only deriving workItemId (and calling getProjectIdentifierById) when projectIdentifier is truthy and conditionally render the ID affordances (the visible label and the "Copy ID" action/path) only when projectIdentifier exists; update the code around projectIdentifier, workItemId, and the JSX that renders the label/Copy ID so nothing referencing workItemId runs or is rendered unless projectIdentifier is truthy.
49-55:⚠️ Potential issue | 🟡 MinorDon't swallow clipboard errors.
Both handlers clear local state on failure but never log/report the exception or surface a failure message, so denied clipboard permissions look like a no-op. Handle a real
Error, log it with the action context, and show a failure state/toast.As per coding guidelines, "Use try-catch with proper error types and log errors appropriately for error handling".
Also applies to: 65-70
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx` around lines 49 - 55, The catch blocks around copyUrlToClipboard swallow errors; update both try-catch sites (the block using copyUrlToClipboard and the similar block at lines 65-70) to catch the real error (e.g., catch (error)), log it with context (e.g., console.error or your app logger: "Failed to copy issue URL", error), and surface a failure state/toast instead of silently doing nothing — mirror the success flow by setting a failure state (e.g., setCopyFailed(true) or calling showToast('Copy failed')) and clear it after ~3000ms just like setCopiedLink.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx`:
- Around line 102-105: The success label for the link copy branch currently
renders the generic "Copied!" text; update the JSX branch that checks the
copiedLink boolean (in create-issue-toast-action-items component) to render
"Link Copied!" instead of "Copied!" so the link action shows the link-specific
confirmation while leaving other copy actions (e.g., copy ID) unchanged.
- Around line 107-109: The "Copy link" button is currently unreachable for
keyboard/touch users because it uses "hidden group-hover:flex"; update the
element rendered in create-issue-toast-action-items.tsx (the button that calls
copyToClipboard) to remain in the DOM and focusable by default and reveal
visually via opacity or focus classes instead of display:none (e.g., remove
"hidden" and use "opacity-0 group-hover:opacity-100
group-focus-within:opacity-100 focus:opacity-100" or equivalent Tailwind
utilities), ensuring it stays in the tab order and remains usable on touch
devices.
---
Duplicate comments:
In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx`:
- Around line 65-66: Replace the direct call to
navigator.clipboard.writeText(workItemId) in create-issue-toast-action-items.tsx
with the app's shared plain-text clipboard helper (the same helper used for Copy
link) so the Copy ID action benefits from the same fallback behavior; import the
helper at the top of the file, call it (await if it’s async) instead of
navigator.clipboard.writeText, and keep the existing success/error handling
around the call.
- Around line 31-32: The code constructs workItemId using
getProjectIdentifierById(issue?.project_id) even when that returns falsy,
producing values like "undefined-<sequence>"; change this by only deriving
workItemId (and calling getProjectIdentifierById) when projectIdentifier is
truthy and conditionally render the ID affordances (the visible label and the
"Copy ID" action/path) only when projectIdentifier exists; update the code
around projectIdentifier, workItemId, and the JSX that renders the label/Copy ID
so nothing referencing workItemId runs or is rendered unless projectIdentifier
is truthy.
- Around line 49-55: The catch blocks around copyUrlToClipboard swallow errors;
update both try-catch sites (the block using copyUrlToClipboard and the similar
block at lines 65-70) to catch the real error (e.g., catch (error)), log it with
context (e.g., console.error or your app logger: "Failed to copy issue URL",
error), and surface a failure state/toast instead of silently doing nothing —
mirror the success flow by setting a failure state (e.g., setCopyFailed(true) or
calling showToast('Copy failed')) and clear it after ~3000ms just like
setCopiedLink.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 283b0617-4197-4644-9fa0-c70329b3ba32
📒 Files selected for processing (2)
apps/web/core/components/issues/create-issue-toast-action-items.tsxpackages/propel/src/button/helper.tsx
apps/web/core/components/issues/create-issue-toast-action-items.tsx
Outdated
Show resolved
Hide resolved
apps/web/core/components/issues/create-issue-toast-action-items.tsx
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/web/core/components/issues/create-issue-toast-action-items.tsx (1)
13-23: Remove unusedprojectIdfrom type definition.The type declares
projectId: string(line 15), but the component no longer uses it (line 23 only destructuresworkspaceSlug,issueId,isEpic). Call sites still pass this prop, causing confusion and a dead parameter. Clean up the type to match actual usage.♻️ Proposed fix
type TCreateIssueToastActionItems = { workspaceSlug: string; - projectId: string; issueId: string; isEpic?: boolean; };Note: After removing from the type, update call sites in
issue-layouts/quick-add/root.tsxandissue-modal/base.tsxto stop passingprojectId.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx` around lines 13 - 23, The TCreateIssueToastActionItems type declares an unused property projectId while the CreateIssueToastActionItems component only uses workspaceSlug, issueId, and isEpic; remove projectId from the TCreateIssueToastActionItems type and update any call sites that still pass projectId to stop supplying that prop so the prop shape and usages match (search for usages of CreateIssueToastActionItems or TCreateIssueToastActionItems to find and update callers).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx`:
- Around line 13-23: The TCreateIssueToastActionItems type declares an unused
property projectId while the CreateIssueToastActionItems component only uses
workspaceSlug, issueId, and isEpic; remove projectId from the
TCreateIssueToastActionItems type and update any call sites that still pass
projectId to stop supplying that prop so the prop shape and usages match (search
for usages of CreateIssueToastActionItems or TCreateIssueToastActionItems to
find and update callers).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2178b1fc-ba0b-4911-88a5-e92b2cb9172b
📒 Files selected for processing (1)
apps/web/core/components/issues/create-issue-toast-action-items.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
apps/web/core/components/issues/create-issue-toast-action-items.tsx (2)
51-52:⚠️ Potential issue | 🟡 MinorClipboard errors are swallowed silently.
Both catch blocks reset state but don't log the error or inform the user of the failure. A denied clipboard permission or other failure will appear as a no-op with no diagnostic trail.
As per coding guidelines: "Use try-catch with proper error types and log errors appropriately for error handling."
🛡️ Proposed fix with error logging
} catch (_error) { + console.error("Failed to copy link to clipboard:", _error); setCopiedLink(false); } ... } catch (_error) { + console.error("Failed to copy work item ID to clipboard:", _error); setCopiedId(false); }Optionally, surface a brief error toast to inform the user the copy failed.
Also applies to: 65-66
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx` around lines 51 - 52, The catch blocks in create-issue-toast-action-items.tsx currently swallow clipboard errors (they just call setCopiedLink(false)); update both catch handlers (the ones around the clipboard.copy/async copy calls) to log the caught error (use console.error or the existing logger) and surface a short user-facing failure (e.g., dispatch or call the existing toast/error notification helper) so failures aren’t silent; keep the existing setCopiedLink(false) behavior but include the error object in the log and a brief toast message indicating copy failed.
56-56:⚠️ Potential issue | 🟡 MinorGuard against undefined
projectIdentifierbefore rendering or copying.
getProjectIdentifierByIdcan returnundefinedif the project isn't yet hydrated in the store. Currently, both the displayed badge and the copied ID will showundefined-<sequence_id>, which is a degraded user experience.🛡️ Proposed fix
+ if (!issue || !projectIdentifier) return null; - if (!issue) return null; const workItemLink = generateWorkItemLink({This ensures the toast action items only render when the project identifier is available, preventing malformed IDs.
Also applies to: 72-72
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx` at line 56, The computed workItemId (`const workItemId = \`${projectIdentifier}-${issue?.sequence_id}\``) can yield malformed IDs when `getProjectIdentifierById` returns undefined; update create-issue-toast-action-items.tsx to guard uses of `projectIdentifier` so the badge and copy action only render when `projectIdentifier` is truthy (e.g., compute `workItemId` only if `projectIdentifier` exists and skip rendering/copying UI elements otherwise), referencing `projectIdentifier`, `workItemId`, and the functions that render the badge/copy action to ensure no `undefined-<sequence_id>` values are shown or copied.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx`:
- Around line 13-17: The TCreateIssueToastActionItems type no longer includes
projectId, so remove the projectId prop from all JSX/usage sites that construct
CreateIssueToastActionItems; specifically edit the spots in the QuickAdd root
render and the Issue Modal base render where CreateIssueToastActionItems (or the
component/function that consumes TCreateIssueToastActionItems) is invoked and
drop the projectId attribute/argument, leaving workspaceSlug, issueId, and
isEpic as before so the calls match the updated type.
---
Duplicate comments:
In `@apps/web/core/components/issues/create-issue-toast-action-items.tsx`:
- Around line 51-52: The catch blocks in create-issue-toast-action-items.tsx
currently swallow clipboard errors (they just call setCopiedLink(false)); update
both catch handlers (the ones around the clipboard.copy/async copy calls) to log
the caught error (use console.error or the existing logger) and surface a short
user-facing failure (e.g., dispatch or call the existing toast/error
notification helper) so failures aren’t silent; keep the existing
setCopiedLink(false) behavior but include the error object in the log and a
brief toast message indicating copy failed.
- Line 56: The computed workItemId (`const workItemId =
\`${projectIdentifier}-${issue?.sequence_id}\``) can yield malformed IDs when
`getProjectIdentifierById` returns undefined; update
create-issue-toast-action-items.tsx to guard uses of `projectIdentifier` so the
badge and copy action only render when `projectIdentifier` is truthy (e.g.,
compute `workItemId` only if `projectIdentifier` exists and skip
rendering/copying UI elements otherwise), referencing `projectIdentifier`,
`workItemId`, and the functions that render the badge/copy action to ensure no
`undefined-<sequence_id>` values are shown or copied.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6f63a6c2-5ab0-4880-ba5d-5987d49bc914
📒 Files selected for processing (1)
apps/web/core/components/issues/create-issue-toast-action-items.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR displays the work item ID (e.g., PLANE-123) in the confirmation toast after creating a new issue, along with a "Copy ID" button for quick copying.
Changes:
Added workItemId combining project identifier + sequence ID
Added "Copy ID" button to copy just the ID (not full URL)
Updated "Copied!" to "Link Copied!" for clarity
File modified: apps/web/core/components/issues/create-issue-toast-action-items.tsx
No breaking changes - all existing functionality preserved.
Test Scenarios
Create new issue → verify ID displays in toast
Click "Copy ID" → verify ID copied to clipboard
Click "Copy link" → verify full URL copied
References
Closes #8721
Summary by CodeRabbit
New Features
Style