[WEB-4816] chore: add label flow#7716
Conversation
anmolsinghbhatia
requested review from
prateekshourya29 and
vamsikrishnamathala
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Caution Review failedAn error occurred during the review process. Please try again later. ✨ Finishing Touches🧪 Generate unit tests
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 |
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
There was a problem hiding this comment.
Pull Request Overview
This PR improves consistency in the add label flow by removing the create label modal and replacing it with inline label creation functionality. The changes streamline the user experience by allowing labels to be created directly within the label selection dropdown.
- Removes the dedicated create label modal component and its associated state management
- Implements inline label creation with keyboard shortcuts (Enter key) in label selection dropdowns
- Refactors label selection components to handle create operations directly
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/core/components/labels/index.ts | Removes export of create-label-modal component |
| apps/web/core/components/labels/create-label-modal.tsx | Deletes the entire CreateLabelModal component |
| apps/web/core/components/issues/select/dropdown.tsx | Adds inline label creation support with permission checks |
| apps/web/core/components/issues/select/base.tsx | Implements keyboard shortcuts and UI for inline label creation |
| apps/web/core/components/issues/issue-modal/form.tsx | Removes create label modal usage and related state |
| apps/web/core/components/issues/issue-modal/components/default-properties.tsx | Removes setLabelModal prop and updates permission checks |
| apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx | Fixes CSS class name for loading spinner |
| apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx | Removes unused setIsOpen prop |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx (2)
8-12: Permission enum mismatch will block label creation.allowPermissions is checked with EUserProjectRoles.ADMIN here, but other call sites use EUserPermissions.ADMIN. This likely evaluates to false and hides the create flow.
Apply this diff:
- import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants"; - // types - import { EUserProjectRoles, IIssueLabel } from "@plane/types"; + import { EUserPermissionsLevel, EUserPermissions, getRandomLabelColor } from "@plane/constants"; + // types + import { IIssueLabel } from "@plane/types"; @@ - const canCreateLabel = - projectId && allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId); + const canCreateLabel = + projectId && allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId);Also applies to: 85-87
129-133: isLoading never set to true; “Loading” branch is unreachable.Set isLoading before fetch and clear it in finally.
Apply this diff:
- const onOpen = useCallback(() => { - if (!storeLabels && workspaceSlug && projectId) - fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false)); - }, [storeLabels, workspaceSlug, projectId, fetchProjectLabels]); + const onOpen = useCallback(() => { + if (!storeLabels && workspaceSlug && projectId) { + setIsLoading(true); + fetchProjectLabels(workspaceSlug, projectId).finally(() => setIsLoading(false)); + } + }, [storeLabels, workspaceSlug, projectId, fetchProjectLabels]);
🧹 Nitpick comments (3)
apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx (1)
147-155: Guard against duplicate/rapid submissions and duplicate IDs.Quick Enter presses can trigger multiple creates; also onChange may add duplicate IDs.
Apply this diff:
const handleAddLabel = async (labelName: string) => { if (!projectId) return; + if (submitting) return; setSubmitting(true); const label = await createLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() }); - onChange([...value, label.id]); + const next = new Set(value); + next.add(label.id); + onChange([...next]); setQuery(""); setSubmitting(false); }; @@ - if (query !== "" && e.key === "Enter" && !e.nativeEvent.isComposing && canCreateLabel) { + if (query !== "" && e.key === "Enter" && !e.nativeEvent.isComposing && canCreateLabel && !submitting) { e.preventDefault(); await handleAddLabel(query); } @@ - onClick={() => { + onClick={() => { if (!query.length) return; + if (submitting) return; handleAddLabel(query); }}Also applies to: 162-165, 283-286
apps/web/core/components/issues/select/base.tsx (2)
59-59: Guard against double submits via submitting stateUse submitting to disable interactions while a create is in-flight (input + “Add” action).
Outside the changed hunk, consider:
- Add disabled={submitting} to Combobox.Input.
- Add aria-busy={submitting} to the options container.
268-286: A11y + i18n: use a button, prevent bubbling, disable while submitting, and translate the stringClickable paragraph lacks semantics; the string isn’t localized. Also add an accessible label to the spinner.
Apply:
- ) : submitting ? ( - <Loader className="animate-spin h-3.5 w-3.5" /> + ) : submitting ? ( + <Loader className="animate-spin h-3.5 w-3.5" role="status" aria-label={t("loading")} /> ) : createLabelEnabled ? ( - <p - onClick={() => { - if (!query.length) return; - handleAddLabel(query); - }} - className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`} - > - {/* TODO: translate here */} - {query.length ? ( - <> - + Add <span className="text-custom-text-100">"{query}"</span> to labels - </> - ) : ( - t("label.create.type") - )} - </p> + <button + type="button" + onClick={(e) => { + e.stopPropagation(); + if (!query.trim().length || submitting) return; + handleAddLabel(query.trim()); + }} + disabled={!query.trim().length || submitting} + className={`text-left text-custom-text-200 ${query.trim().length && !submitting ? "cursor-pointer" : "cursor-default opacity-70"}`} + > + {query.trim().length + ? t("labels.create_add_to_labels", { name: query.trim() }) + : t("label.create.type")} + </button>If you don’t have the new key, I can add i18n entries (e.g., labels.create_add_to_labels = '+ Add "{{name}}" to labels').
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (8)
apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx(0 hunks)apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx(1 hunks)apps/web/core/components/issues/issue-modal/components/default-properties.tsx(3 hunks)apps/web/core/components/issues/issue-modal/form.tsx(0 hunks)apps/web/core/components/issues/select/base.tsx(8 hunks)apps/web/core/components/issues/select/dropdown.tsx(2 hunks)apps/web/core/components/labels/create-label-modal.tsx(0 hunks)apps/web/core/components/labels/index.ts(0 hunks)
💤 Files with no reviewable changes (4)
- apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
- apps/web/core/components/labels/index.ts
- apps/web/core/components/issues/issue-modal/form.tsx
- apps/web/core/components/labels/create-label-modal.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
apps/web/core/components/issues/select/dropdown.tsx (2)
apps/space/core/hooks/store/use-label.ts (1)
useLabel(7-11)apps/web/core/components/issues/select/base.tsx (1)
WorkItemLabelSelectBase(35-299)
apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx (1)
packages/ui/src/loader.tsx (1)
Loader(30-30)
apps/web/core/components/issues/issue-modal/components/default-properties.tsx (1)
apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Build and lint web apps
🔇 Additional comments (4)
apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx (1)
280-280: Spinner class update is correct.Switching to Tailwind’s animate-spin is consistent with the rest of the codebase.
apps/web/core/components/issues/select/dropdown.tsx (1)
30-33: LGTM: lazy-fetch on dropdown open.Fetching labels on first open avoids unnecessary store loads.
apps/web/core/components/issues/select/base.tsx (2)
5-7: LGTM: importsIcons and getRandomLabelColor import look correct.
30-31: Ignore this comment: all call sites supplycreateLabelwhenevercreateLabelEnabledis true, so the prop contract is already satisfied.Likely an incorrect or invalid review comment.
apps/web/core/components/issues/issue-modal/components/default-properties.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (4)
apps/web/core/components/issues/issue-modal/components/default-properties.tsx (1)
75-76: Project ID usage is now consistent for enablement and handlerUsing the same projectId for permission gating and IssueLabelSelect fixes the earlier mismatch. Thanks for addressing.
Also applies to: 154-157
apps/web/core/components/issues/select/base.tsx (3)
93-112: Key handling no longer swallows navigation — good fixEscape-only stopPropagation and guarded Enter creation resolve the earlier interaction bug with HeadlessUI.
Also applies to: 207-207
129-144: Create flow hardened correctlyTrim, case-insensitive dedupe, try/catch/finally, and selected-ID dedupe cover the main edge cases.
286-286: Loader rendering/class fix looks rightThe loader shows only while submitting, with the corrected className.
🧹 Nitpick comments (1)
apps/web/core/components/issues/select/base.tsx (1)
288-303: Translate the CTA and use a button with disabled/ARIA statesReplace the clickable
with a semantic button, gate by query/submitting, and wire i18n for the text.
Apply:
- ) : createLabelEnabled ? ( - <p - onClick={() => { - if (!query.length) return; - handleAddLabel(query); - }} - className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`} - > - {/* TODO: translate here */} - {query.length ? ( - <> - + Add <span className="text-custom-text-100">"{query}"</span> to labels - </> - ) : ( - t("label.create.type") - )} - </p> + ) : createLabelEnabled ? ( + <button + type="button" + onClick={async () => { + const q = query.trim(); + if (!q || submitting) return; + await handleAddLabel(q); + }} + disabled={!query.trim().length || submitting} + aria-disabled={!query.trim().length || submitting} + className={cn( + "w-full text-left text-custom-text-200 px-1.5 py-1 rounded", + query.trim().length && !submitting + ? "cursor-pointer hover:bg-custom-background-80" + : "cursor-default opacity-60" + )} + > + {query.trim().length + ? t("label.create.add_to_labels", { label: query }) + : t("label.create.type")} + </button> )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
apps/web/core/components/issues/issue-modal/components/default-properties.tsx(3 hunks)apps/web/core/components/issues/select/base.tsx(8 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-07-08T13:41:01.659Z
Learnt from: prateekshourya29
PR: makeplane/plane#7363
File: apps/web/core/components/issues/select/dropdown.tsx:9-11
Timestamp: 2025-07-08T13:41:01.659Z
Learning: The `getProjectLabelIds` function in the label store handles undefined projectId internally, so it's safe to pass undefined values to it without explicit checks in the calling component.
Applied to files:
apps/web/core/components/issues/issue-modal/components/default-properties.tsx
🧬 Code graph analysis (2)
apps/web/core/components/issues/select/base.tsx (1)
packages/i18n/src/store/index.ts (1)
t(224-245)
apps/web/core/components/issues/issue-modal/components/default-properties.tsx (1)
apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/web/core/components/issues/issue-modal/components/default-properties.tsx (1)
60-60: Props cleanup looks goodRemoving modal-related props from destructuring aligns with the new inline flow.
apps/web/core/components/issues/select/base.tsx (3)
5-5: Imports acknowledgedLoader and getRandomLabelColor are correctly imported for the new inline creation UX.
Also applies to: 7-7
30-31: Public API: createLabel prop is well-scopedOptional createLabel with a precise return type keeps the base generic and composable.
Also applies to: 47-48
59-59: Submitting guard prevents double-submitLocal submitting state is the right lightweight protection here.
* chore: remove create label modal * fix: label spinner * chore: add label flow improvements * chore: code refactor * chore: code refactor * chore: code refactor
Description
This PR improves consistency in the add label flow, removes the create label modal, and includes related code refactoring.
Type of Change
Summary by CodeRabbit
New Features
Changes
Style