From d0452148efacb34dbe24a8c4acb70c7bd1614505 Mon Sep 17 00:00:00 2001 From: RealBhupesh Date: Thu, 10 Sep 2026 00:02:13 +0530 Subject: [PATCH] =?UTF-8?q?fix(web):=20honor=20Display=20=E2=86=92=20IDs?= =?UTF-8?q?=20when=20hiding=20work=20item=20identifiers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit List layout kept identifiers mounted whenever issue type was on, and board/calendar/gantt did not use the same display-property gate as other properties, so toggling IDs off left PROJ-123 visible. Co-authored-by: Cursor --- .../issues/issue-detail/issue-identifier.tsx | 4 ++-- .../issue-layouts/calendar/issue-block.tsx | 20 ++++++++++------ .../issues/issue-layouts/gantt/blocks.tsx | 24 +++++++++++-------- .../issues/issue-layouts/kanban/block.tsx | 17 +++++++------ .../issues/issue-layouts/list/block.tsx | 7 +++--- packages/utils/src/work-item/base.ts | 9 +++++++ 6 files changed, 52 insertions(+), 29 deletions(-) diff --git a/apps/web/core/components/issues/issue-detail/issue-identifier.tsx b/apps/web/core/components/issues/issue-detail/issue-identifier.tsx index 561b15b2320..903182a324a 100644 --- a/apps/web/core/components/issues/issue-detail/issue-identifier.tsx +++ b/apps/web/core/components/issues/issue-detail/issue-identifier.tsx @@ -7,6 +7,7 @@ import { observer } from "mobx-react"; // plane imports import type { TIssueIdentifierProps } from "@plane/types"; +import { shouldDisplayWorkItemId } from "@plane/utils"; // hooks import { useIssueDetail } from "@/hooks/store/use-issue-detail"; import { useProject } from "@/hooks/store/use-project"; @@ -25,9 +26,8 @@ export const IssueIdentifier = observer(function IssueIdentifier(props: TIssueId const issue = isUsingStoreData ? getIssueById(props.issueId) : null; const projectIdentifier = isUsingStoreData ? getProjectIdentifierById(projectId) : props.projectIdentifier; const issueSequenceId = isUsingStoreData ? issue?.sequence_id : props.issueSequenceId; - const shouldRenderIssueID = displayProperties ? displayProperties.key : true; - if (!shouldRenderIssueID) return null; + if (!shouldDisplayWorkItemId(displayProperties)) return null; return (
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx index 8a7afcda824..2dd47806f7b 100644 --- a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx +++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx @@ -24,6 +24,7 @@ import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-red import { usePlatformOS } from "@/hooks/use-platform-os"; // components import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier"; +import { WithDisplayPropertiesHOC } from "@/components/issues/issue-layouts/properties/with-display-properties-HOC"; // local components import { WorkItemPreviewCard } from "../../preview-card"; import type { TRenderQuickActions } from "../list/list-view-types"; @@ -132,13 +133,18 @@ export const CalendarIssueBlock = observer( }} /> {issue.project_id && ( - + + + )}
{issue.name}
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx index 9d475d31c13..6d5f1036934 100644 --- a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx +++ b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx @@ -10,10 +10,11 @@ import { useParams } from "next/navigation"; import { Popover } from "@plane/propel/popover"; import { Tooltip } from "@makeplane/propel/components/tooltip"; import { ControlLink } from "@plane/ui"; -import { findTotalDaysInRange, generateWorkItemLink } from "@plane/utils"; +import { generateWorkItemLink } from "@plane/utils"; // components import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants"; import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier"; +import { WithDisplayPropertiesHOC } from "@/components/issues/issue-layouts/properties/with-display-properties-HOC"; // hooks import { useIssueDetail } from "@/hooks/store/use-issue-detail"; import { useIssues } from "@/hooks/store/use-issues"; @@ -55,8 +56,6 @@ export const IssueGanttBlock = observer(function IssueGanttBlock(props: Props) { const handleIssuePeekOverview = () => handleRedirection(workspaceSlug, issueDetails, isMobile); - const duration = findTotalDaysInRange(issueDetails?.start_date, issueDetails?.target_date) || 0; - return (
{issueDetails?.project_id && ( - + + + )} {issueDetails?.name} diff --git a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx index e64e356c703..9c3600bff41 100644 --- a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx +++ b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx @@ -25,6 +25,7 @@ import { cn, generateWorkItemLink } from "@plane/utils"; import RenderIfVisible from "@/components/core/render-if-visible-HOC"; import { HIGHLIGHT_CLASS, getIssueBlockId } from "@/components/issues/issue-layouts/utils"; import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier"; +import { WithDisplayPropertiesHOC } from "@/components/issues/issue-layouts/properties/with-display-properties-HOC"; // hooks import { useIssueDetail } from "@/hooks/store/use-issue-detail"; import { useKanbanView } from "@/hooks/store/use-kanban-view"; @@ -96,13 +97,15 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props: <>
{issue.project_id && ( - + + + )} {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
)} - {displayProperties && (displayProperties.key || displayProperties.issue_type) && ( +
{issue.project_id && ( )}
- )} + {/* sub-issues chevron */}
diff --git a/packages/utils/src/work-item/base.ts b/packages/utils/src/work-item/base.ts index c79b805cfa5..79359288285 100644 --- a/packages/utils/src/work-item/base.ts +++ b/packages/utils/src/work-item/base.ts @@ -312,6 +312,15 @@ export const getComputedDisplayProperties = ( issue_type: displayProperties?.issue_type ?? true, }); +/** + * @description Hide work item IDs when Display → IDs is off. Callers that omit + * `displayProperties` (detail views, pickers, search) always show the identifier. + */ +export const shouldDisplayWorkItemId = (displayProperties?: IIssueDisplayProperties): boolean => { + if (!displayProperties) return true; + return !!displayProperties.key; +}; + export const generateWorkItemLink = ({ workspaceSlug, projectId,