[WEB-2678]fix: create labels empty state #6216
Conversation
WalkthroughThe pull request introduces improvements to label selection and creation functionality in two related components. The changes focus on enhancing user experience by adding input validation and more informative feedback when adding new labels. Specifically, the modifications prevent users from creating empty labels and provide clearer guidance during the label creation process by dynamically updating prompts and cursor styles based on user input. Changes
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: 0
🧹 Nitpick comments (3)
web/core/components/issues/issue-detail/label/select/label-select.tsx (1)
188-191: Consider moving empty check to handleAddLabelThe empty check could be moved to the
handleAddLabelfunction to centralize validation and ensure consistent behavior across all entry points.-if(!query.length) return -handleAddLabel(query); +handleAddLabel(query); // In handleAddLabel function: const handleAddLabel = async (labelName: string) => { + if (!labelName.trim()) return; setSubmitting(true); // ... rest of the function };web/core/components/issues/issue-layouts/properties/labels.tsx (2)
344-347: Consider moving empty check to handleAddLabelSimilar to the label-select component, consider moving the empty check to the
handleAddLabelfunction for consistent validation.-if (!query.length) return; -handleAddLabel(query); +handleAddLabel(query); // In handleAddLabel function: const handleAddLabel = async (labelName: string) => { + if (!projectId || !labelName.trim()) return; - if (!projectId) return; setSubmitting(true); // ... rest of the function };
347-355: LGTM! Consistent implementation with label-selectThe implementation maintains consistency with the label-select component, providing the same user experience across different parts of the application.
Note: There's a minor inconsistency in semicolon usage between this file and label-select.tsx, but this is not a significant issue.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/core/components/issues/issue-detail/label/select/label-select.tsx(1 hunks)web/core/components/issues/issue-layouts/properties/labels.tsx(1 hunks)
🔇 Additional comments (1)
web/core/components/issues/issue-detail/label/select/label-select.tsx (1)
191-199: LGTM! Clear user feedback implementation
The implementation provides excellent user feedback by:
- Using appropriate cursor styles based on input state
- Showing clear guidance text when no input is present
- Displaying dynamic text for label creation when input exists
Description
Handled empty state when project labels were not present.
Type of Change
References
WEB-2678
Summary by CodeRabbit