[WEB-2629] chore: workspace draft issue ux copy updated #5825
Conversation
WalkthroughThis pull request introduces several text updates across multiple components related to draft issues in the application. Changes include modifications to button labels, dialog titles, and messages displayed to users, enhancing clarity and consistency in terminology. Notably, the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (5)
web/core/components/issues/workspace-draft/delete-modal.tsx (1)
68-68: Consider capitalizing the success messageThe simplified success message "draft deleted." is concise and aligns well with the component's focus on drafts. However, to improve readability and adhere to common conventions, consider capitalizing the first letter of the message.
Suggested change:
- message: `draft deleted.`, + message: `Draft deleted.`,web/core/components/issues/confirm-issue-discard.tsx (1)
67-69: Clear and informative descriptionThe updated description provides valuable context about the purpose of saving a draft. It effectively communicates the benefit to the user.
Consider removing the extra space after "later." on line 68:
- You can save this issue to Drafts so you can come back to it later.{" "} + You can save this issue to Drafts so you can come back to it later.web/core/components/issues/workspace-draft/draft-issue-block.tsx (1)
77-77: LGTM! Consider updating the menu item key for consistency.The change from "Move to issues" to "Move to project" improves clarity for users. This update aligns well with the PR objectives of updating UX copy.
For consistency, consider updating the menu item key from
"move-to-issues"to"move-to-project". This would make the key match the new title:- key: "move-to-issues", + key: "move-to-project", title: "Move to project",web/core/components/issues/issue-modal/base.tsx (1)
209-209: Remove unnecessary trailing space in success messageThe success message for creating a regular issue now ends with an extra space. This is likely unintentional and should be removed for consistency.
Consider updating the line as follows:
- message: `${is_draft_issue ? "Draft created." : "Issue created successfully."} `, + message: `${is_draft_issue ? "Draft created." : "Issue created successfully."}`,web/core/components/issues/issue-modal/form.tsx (1)
425-425: LGTM: Improved button text clarity with a minor suggestionThe change from "Create draft issue" to "Save to Drafts" is an improvement. It clarifies the action being performed and aligns better with common draft functionality in applications. This update should enhance user understanding of where their work will be stored.
Consider capitalizing "Drafts" for consistency with UI standards:
- ? "Save to Drafts" + ? "Save to Drafts"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
- web/app/[workspaceSlug]/(projects)/drafts/header.tsx (2 hunks)
- web/core/components/issues/confirm-issue-discard.tsx (2 hunks)
- web/core/components/issues/issue-modal/base.tsx (1 hunks)
- web/core/components/issues/issue-modal/draft-issue-layout.tsx (1 hunks)
- web/core/components/issues/issue-modal/form.tsx (2 hunks)
- web/core/components/issues/workspace-draft/delete-modal.tsx (3 hunks)
- web/core/components/issues/workspace-draft/draft-issue-block.tsx (1 hunks)
- web/core/constants/empty-state.ts (1 hunks)
🧰 Additional context used
🪛 GitHub Check: lint-web
web/core/components/issues/workspace-draft/delete-modal.tsx
[failure] 93-93:
'can be escaped with',‘,',’
🔇 Additional comments (10)
web/app/[workspaceSlug]/(projects)/drafts/header.tsx (2)
44-44: LGTM: Improved label consistencyThe change from "Draft" to "Drafts" in the breadcrumb label improves consistency with the component name and better represents the presence of multiple draft issues. This minor text update enhances the user interface without affecting functionality.
63-63: LGTM: Enhanced button text clarityThe change from "Draft issue" to "Draft an issue" improves the grammatical structure and clarity of the button text. This minor update enhances the user experience by making the action more explicit, aligning well with the PR objective of updating UX copy.
web/core/components/issues/workspace-draft/delete-modal.tsx (2)
11-11: LGTM: Import statement cleanupThe removal of the
useProjecthook from the import statement is consistent with the changes in the component. This cleanup helps maintain code clarity by keeping only the necessary imports.
22-22: LGTM: Prop removal consistent with type changesThe removal of the
isSubIssueprop from the destructured props is consistent with the changes to thePropstype. This simplification improves the component's interface.To ensure this change doesn't break any parent components, please run the following script:
✅ Verification successful
Verified: No remaining usages of
isSubIssueprop foundThe search for the
isSubIssueprop inWorkspaceDraftIssueDeleteIssueModaldid not return any results. This change is safe and does not affect any parent components.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any remaining usage of isSubIssue prop with WorkspaceDraftIssueDeleteIssueModal # Test: Search for components passing isSubIssue to WorkspaceDraftIssueDeleteIssueModal rg --type typescript --type tsx 'WorkspaceDraftIssueDeleteIssueModal.*isSubIssue'Length of output: 118
Script:
#!/bin/bash # Description: Check for any remaining usage of isSubIssue prop with WorkspaceDraftIssueDeleteIssueModal # Corrected Test: Search for components passing isSubIssue to WorkspaceDraftIssueDeleteIssueModal rg --type ts --type tsx 'WorkspaceDraftIssueDeleteIssueModal.*isSubIssue'Length of output: 103
Script:
#!/bin/bash # Description: Check for any remaining usage of isSubIssue prop with WorkspaceDraftIssueDeleteIssueModal # Corrected Test: Search for components passing isSubIssue to WorkspaceDraftIssueDeleteIssueModal rg 'WorkspaceDraftIssueDeleteIssueModal.*isSubIssue' --glob '*.ts' --glob '*.tsx'Length of output: 83
web/core/components/issues/confirm-issue-discard.tsx (2)
64-64: Improved dialog title clarityThe change from "Draft Issue" to "Save this draft?" enhances the user's understanding of the dialog's purpose. It's more action-oriented and clearly communicates the intended action.
Line range hint
1-95: Overall improvement in UX copyThe changes in this file significantly improve the clarity and consistency of the user interface for saving draft issues. The updated dialog title, description, and button text work together to provide a clearer understanding of the action being taken.
These updates align well with the PR objective of improving the workspace draft issue UX copy. Great job on enhancing the user experience!
web/core/components/issues/issue-modal/draft-issue-layout.tsx (1)
107-107: Improved UX copy for draft creation success messageThe change from "Draft Issue created successfully." to "Draft created." is a good improvement. It makes the success message more concise while maintaining clarity. This update aligns well with the PR objective of enhancing UX copy.
web/core/components/issues/issue-modal/form.tsx (2)
275-275: LGTM: Improved header text clarityThe change from "Create draft" to "Create a draft" improves the grammar and readability of the header text. This minor update enhances the user experience by making the text more natural and easier to understand.
426-426: LGTM: Improved consistency in button textThe change from "Create" to "Save" for the general save button improves consistency with standard UI terminology. This update aligns well with the "Save to Drafts" option and provides a more universally understood action for forms. The change enhances the overall consistency of the user interface.
web/core/constants/empty-state.ts (1)
764-768: LGTM! Improved empty state messaging for workspace draft issues.The changes to the
WORKSPACE_DRAFT_ISSUESentry enhance the user experience:
- The updated title "Half-written issues, and soon, comments will show up here." is more descriptive and inclusive, mentioning both issues and comments.
- The new description provides clearer guidance and encourages user interaction: "To try this out, start adding an issue and leave it mid-way or create your first draft below. 😉"
- The primary button text "Create your first draft" is more action-oriented and aligns better with the empty state context.
These modifications should help users better understand the purpose of this section and encourage them to interact with the draft issues feature.
| title="Delete draft" | ||
| content={<>Are you sure you want to delete this draft? This can't be undone.</>} |
There was a problem hiding this comment.
LGTM: Improved clarity in modal title and content
The updates to the modal title and content accurately reflect the action of deleting a draft, which is consistent with the component's new focus. The content clearly communicates the permanence of the action, which is important for user awareness.
There's a minor issue with the apostrophe in "can't" as flagged by the static analysis tool. To resolve this, please apply the following change:
- content={<>Are you sure you want to delete this draft? This can't be undone.</>}
+ content={<>Are you sure you want to delete this draft? This can't be undone.</>}This change will ensure proper rendering of the apostrophe across different environments.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| title="Delete draft" | |
| content={<>Are you sure you want to delete this draft? This can't be undone.</>} | |
| title="Delete draft" | |
| content={<>Are you sure you want to delete this draft? This can't be undone.</>} |
🧰 Tools
🪛 GitHub Check: lint-web
[failure] 93-93:
'can be escaped with',‘,',’
| @@ -80,7 +82,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => { | |||
| Cancel | |||
| </Button> | |||
| <Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}> | |||
| {isLoading ? "Saving" : "Save draft"} | |||
| {isLoading ? "Saving" : "Save to Drafts"} | |||
There was a problem hiding this comment.
💡 Codebase verification
Inconsistent Capitalization of "Drafts" in User-Facing Text
The shell script results indicate that "Drafts" is used inconsistently across various user-facing components and messages. To ensure a uniform user experience, please update all instances of "draft" to "Drafts" in user interface elements and documentation.
- Update button texts, messages, and labels to use "Drafts" consistently.
- Review and adjust dialog titles and descriptions to match the new capitalization.
🔗 Analysis chain
Consistent button text
The change from "Save draft" to "Save to Drafts" aligns well with the updated dialog title and description. It clearly indicates the action and destination of the draft.
To ensure consistency across the application, please verify that "Drafts" is capitalized in other relevant components and documentation. Run the following script to check for inconsistencies:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for inconsistent usage of "drafts" vs "Drafts"
# Test: Search for variations of "draft" or "drafts" (case-insensitive)
rg -i '\bdrafts?\b' --type tsx --type ts
Length of output: 70
Script:
#!/bin/bash
# Description: Check for inconsistent usage of "drafts" vs "Drafts"
# Test: Search for variations of "draft" or "drafts" (case-insensitive) in .ts and .tsx files
rg -i '\bdrafts?\b' -g '*.ts' -g '*.tsx'
Length of output: 16708
Reference:
[WEB-2629]
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Documentation