diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx index 52410756a..28f5f765a 100644 --- a/web/components/issues/issue-layouts/list/block.tsx +++ b/web/components/issues/issue-layouts/list/block.tsx @@ -4,20 +4,20 @@ import { IssuePeekOverview } from "components/issues/issue-peek-overview"; // ui import { Tooltip } from "@plane/ui"; // types -import { IIssue } from "types"; +import { IIssue, IIssueDisplayProperties } from "types"; interface IssueBlockProps { columnId: string; issue: IIssue; handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void; quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode; - display_properties: any; + displayProperties: IIssueDisplayProperties; isReadonly?: boolean; showEmptyGroup?: boolean; } export const IssueBlock: React.FC = (props) => { - const { columnId, issue, handleIssues, quickActions, display_properties, showEmptyGroup, isReadonly } = props; + const { columnId, issue, handleIssues, quickActions, displayProperties, showEmptyGroup, isReadonly } = props; const updateIssue = (group_by: string | null, issueToUpdate: IIssue) => { handleIssues(group_by, issueToUpdate, "update"); @@ -26,7 +26,7 @@ export const IssueBlock: React.FC = (props) => { return ( <>
- {display_properties && display_properties?.key && ( + {displayProperties && displayProperties?.key && (
{issue?.project_detail?.identifier}-{issue.sequence_id}
@@ -54,7 +54,7 @@ export const IssueBlock: React.FC = (props) => { issue={issue} isReadonly={isReadonly} handleIssues={updateIssue} - display_properties={display_properties} + displayProperties={displayProperties} showEmptyGroup={showEmptyGroup} /> {quickActions(!columnId && columnId === "null" ? null : columnId, issue)} diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx index 00779cc34..22a92a159 100644 --- a/web/components/issues/issue-layouts/list/blocks-list.tsx +++ b/web/components/issues/issue-layouts/list/blocks-list.tsx @@ -2,7 +2,7 @@ import { FC } from "react"; // components import { IssueBlock } from "components/issues"; // types -import { IIssue } from "types"; +import { IIssue, IIssueDisplayProperties } from "types"; interface Props { columnId: string; @@ -10,12 +10,12 @@ interface Props { isReadonly?: boolean; handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void; quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode; - display_properties: any; + displayProperties: IIssueDisplayProperties; showEmptyGroup?: boolean; } export const IssueBlocksList: FC = (props) => { - const { columnId, issues, handleIssues, quickActions, display_properties, showEmptyGroup, isReadonly } = props; + const { columnId, issues, handleIssues, quickActions, displayProperties, showEmptyGroup, isReadonly } = props; return (
@@ -28,7 +28,7 @@ export const IssueBlocksList: FC = (props) => { handleIssues={handleIssues} quickActions={quickActions} isReadonly={isReadonly} - display_properties={display_properties} + displayProperties={displayProperties} showEmptyGroup={showEmptyGroup} /> )) diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx index 57cdeb34b..b9d13a92b 100644 --- a/web/components/issues/issue-layouts/list/default.tsx +++ b/web/components/issues/issue-layouts/list/default.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite"; import { ListGroupByHeaderRoot } from "./headers/group-by-root"; import { IssueBlocksList, ListInlineCreateIssueForm } from "components/issues"; // types -import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types"; +import { IEstimatePoint, IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types"; // constants import { getValueFromObject } from "constants/issue"; @@ -16,7 +16,7 @@ export interface IGroupByList { listKey: string; handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void; quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode; - display_properties: any; + displayProperties: IIssueDisplayProperties; is_list?: boolean; enableQuickIssueCreate?: boolean; showEmptyGroup?: boolean; @@ -31,7 +31,7 @@ const GroupByList: React.FC = observer((props) => { listKey, handleIssues, quickActions, - display_properties, + displayProperties, is_list = false, enableQuickIssueCreate, showEmptyGroup, @@ -59,7 +59,7 @@ const GroupByList: React.FC = observer((props) => { issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]} handleIssues={handleIssues} quickActions={quickActions} - display_properties={display_properties} + displayProperties={displayProperties} isReadonly={isReadonly} showEmptyGroup={showEmptyGroup} /> @@ -86,7 +86,7 @@ export interface IList { handleDragDrop?: (result: any) => void | undefined; handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void; quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode; - display_properties: any; + displayProperties: IIssueDisplayProperties; states: IState[] | null; labels: IIssueLabels[] | null; members: IUserLite[] | null; @@ -105,7 +105,7 @@ export const List: React.FC = observer((props) => { isReadonly, handleIssues, quickActions, - display_properties, + displayProperties, states, labels, members, @@ -126,7 +126,7 @@ export const List: React.FC = observer((props) => { listKey={`id`} handleIssues={handleIssues} quickActions={quickActions} - display_properties={display_properties} + displayProperties={displayProperties} is_list enableQuickIssueCreate={enableQuickIssueCreate} isReadonly={isReadonly} @@ -142,7 +142,7 @@ export const List: React.FC = observer((props) => { listKey={`id`} handleIssues={handleIssues} quickActions={quickActions} - display_properties={display_properties} + displayProperties={displayProperties} enableQuickIssueCreate={enableQuickIssueCreate} isReadonly={isReadonly} showEmptyGroup={showEmptyGroup} @@ -157,7 +157,7 @@ export const List: React.FC = observer((props) => { listKey={`id`} handleIssues={handleIssues} quickActions={quickActions} - display_properties={display_properties} + displayProperties={displayProperties} enableQuickIssueCreate={enableQuickIssueCreate} isReadonly={isReadonly} showEmptyGroup={showEmptyGroup} @@ -172,7 +172,7 @@ export const List: React.FC = observer((props) => { listKey={`key`} handleIssues={handleIssues} quickActions={quickActions} - display_properties={display_properties} + displayProperties={displayProperties} enableQuickIssueCreate={enableQuickIssueCreate} isReadonly={isReadonly} showEmptyGroup={showEmptyGroup} @@ -187,7 +187,7 @@ export const List: React.FC = observer((props) => { listKey={`key`} handleIssues={handleIssues} quickActions={quickActions} - display_properties={display_properties} + displayProperties={displayProperties} enableQuickIssueCreate={enableQuickIssueCreate} isReadonly={isReadonly} showEmptyGroup={showEmptyGroup} @@ -202,7 +202,7 @@ export const List: React.FC = observer((props) => { listKey={`id`} handleIssues={handleIssues} quickActions={quickActions} - display_properties={display_properties} + displayProperties={displayProperties} enableQuickIssueCreate={enableQuickIssueCreate} isReadonly={isReadonly} showEmptyGroup={showEmptyGroup} @@ -217,7 +217,7 @@ export const List: React.FC = observer((props) => { listKey={`id`} handleIssues={handleIssues} quickActions={quickActions} - display_properties={display_properties} + displayProperties={displayProperties} enableQuickIssueCreate={enableQuickIssueCreate} isReadonly={isReadonly} showEmptyGroup={showEmptyGroup} @@ -232,7 +232,7 @@ export const List: React.FC = observer((props) => { listKey={`id`} handleIssues={handleIssues} quickActions={quickActions} - display_properties={display_properties} + displayProperties={displayProperties} enableQuickIssueCreate={enableQuickIssueCreate} isReadonly={isReadonly} showEmptyGroup={showEmptyGroup} diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx index c304867ac..92a203f36 100644 --- a/web/components/issues/issue-layouts/list/properties.tsx +++ b/web/components/issues/issue-layouts/list/properties.tsx @@ -11,19 +11,19 @@ import { IssuePropertyDate } from "../properties/date"; // ui import { Tooltip } from "@plane/ui"; // types -import { IIssue, IState, TIssuePriorities } from "types"; +import { IIssue, IIssueDisplayProperties, IState, TIssuePriorities } from "types"; export interface IKanBanProperties { columnId: string; issue: IIssue; handleIssues: (group_by: string | null, issue: IIssue) => void; - display_properties: any; + displayProperties: IIssueDisplayProperties; isReadonly?: boolean; showEmptyGroup?: boolean; } export const KanBanProperties: FC = observer((props) => { - const { columnId: group_id, issue, handleIssues, display_properties, isReadonly, showEmptyGroup } = props; + const { columnId: group_id, issue, handleIssues, displayProperties, isReadonly, showEmptyGroup } = props; const handleState = (state: IState) => { handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: state.id }); @@ -57,7 +57,7 @@ export const KanBanProperties: FC = observer((props) => {
{/* basic properties */} {/* state */} - {display_properties && display_properties?.state && ( + {displayProperties && displayProperties?.state && ( = observer((props) => { )} {/* priority */} - {display_properties && display_properties?.priority && ( + {displayProperties && displayProperties?.priority && ( = observer((props) => { )} {/* label */} - {display_properties && display_properties?.labels && (showEmptyGroup || issue?.labels.length > 0) && ( + {displayProperties && displayProperties?.labels && (showEmptyGroup || issue?.labels.length > 0) && ( = observer((props) => { )} {/* assignee */} - {display_properties && display_properties?.assignee && (showEmptyGroup || issue?.assignees?.length > 0) && ( + {displayProperties && displayProperties?.assignee && (showEmptyGroup || issue?.assignees?.length > 0) && ( = observer((props) => { )} {/* start date */} - {display_properties && display_properties?.start_date && (showEmptyGroup || issue?.start_date) && ( + {displayProperties && displayProperties?.start_date && (showEmptyGroup || issue?.start_date) && ( handleStartDate(date)} @@ -111,7 +111,7 @@ export const KanBanProperties: FC = observer((props) => { )} {/* target/due date */} - {display_properties && display_properties?.due_date && (showEmptyGroup || issue?.target_date) && ( + {displayProperties && displayProperties?.due_date && (showEmptyGroup || issue?.target_date) && ( handleTargetDate(date)} @@ -121,7 +121,7 @@ export const KanBanProperties: FC = observer((props) => { )} {/* estimates */} - {display_properties && display_properties?.estimate && ( + {displayProperties && displayProperties?.estimate && ( = observer((props) => { {/* extra render properties */} {/* sub-issues */} - {display_properties && display_properties?.sub_issue_count && ( + {displayProperties && displayProperties?.sub_issue_count && (
@@ -143,7 +143,7 @@ export const KanBanProperties: FC = observer((props) => { )} {/* attachments */} - {display_properties && display_properties?.attachment_count && ( + {displayProperties && displayProperties?.attachment_count && (
@@ -153,7 +153,7 @@ export const KanBanProperties: FC = observer((props) => { )} {/* link */} - {display_properties && display_properties?.link && ( + {displayProperties && displayProperties?.link && (
diff --git a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx index 63c2f1281..1ddbd5392 100644 --- a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx +++ b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx @@ -25,7 +25,7 @@ export const ArchivedIssueListLayout: FC = observer(() => { // derived values const issues = archivedIssueStore.getIssues; - const display_properties = archivedIssueFiltersStore?.userDisplayProperties || null; + const displayProperties = archivedIssueFiltersStore?.userDisplayProperties || null; const group_by: string | null = archivedIssueFiltersStore?.userDisplayFilters?.group_by || null; const handleIssues = (group_by: string | null, issue: IIssue, action: "delete" | "update") => { @@ -59,7 +59,7 @@ export const ArchivedIssueListLayout: FC = observer(() => { quickActions={(group_by, issue) => ( handleIssues(group_by, issue, "delete")} /> )} - display_properties={display_properties} + displayProperties={displayProperties} states={states} stateGroups={stateGroups} priorities={priorities} diff --git a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx index 9a67b91c1..7bbb37f46 100644 --- a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx +++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx @@ -31,7 +31,7 @@ export const CycleListLayout: React.FC = observer(() => { const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null; - const display_properties = issueFilterStore?.userDisplayProperties || null; + const displayProperties = issueFilterStore?.userDisplayProperties || null; const handleIssues = useCallback( (group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => { @@ -80,7 +80,7 @@ export const CycleListLayout: React.FC = observer(() => { handleRemoveFromCycle={async () => handleIssues(group_by, issue, "remove")} /> )} - display_properties={display_properties} + displayProperties={displayProperties} states={states} stateGroups={stateGroups} priorities={priorities} diff --git a/web/components/issues/issue-layouts/list/roots/module-root.tsx b/web/components/issues/issue-layouts/list/roots/module-root.tsx index fd748bc6c..11704f3b6 100644 --- a/web/components/issues/issue-layouts/list/roots/module-root.tsx +++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx @@ -31,7 +31,7 @@ export const ModuleListLayout: React.FC = observer(() => { const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null; - const display_properties = issueFilterStore?.userDisplayProperties || null; + const displayProperties = issueFilterStore?.userDisplayProperties || null; const handleIssues = useCallback( (group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => { @@ -80,7 +80,7 @@ export const ModuleListLayout: React.FC = observer(() => { handleRemoveFromModule={async () => handleIssues(group_by, issue, "remove")} /> )} - display_properties={display_properties} + displayProperties={displayProperties} states={states} stateGroups={stateGroups} priorities={priorities} diff --git a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx index 9e4937ffd..e66cda2d2 100644 --- a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx +++ b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx @@ -29,7 +29,7 @@ export const ProfileIssuesListLayout: FC = observer(() => { const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null; - const display_properties = profileIssueFiltersStore?.userDisplayProperties || null; + const displayProperties = profileIssueFiltersStore?.userDisplayProperties || null; const handleIssues = useCallback( (group_by: string | null, issue: IIssue, action: "update" | "delete") => { @@ -64,7 +64,7 @@ export const ProfileIssuesListLayout: FC = observer(() => { handleUpdate={async (data) => handleIssues(group_by, data, "update")} /> )} - display_properties={display_properties} + displayProperties={displayProperties} states={states} stateGroups={stateGroups} priorities={priorities} diff --git a/web/components/issues/issue-layouts/list/roots/project-root.tsx b/web/components/issues/issue-layouts/list/roots/project-root.tsx index 16ce940b5..6a832f835 100644 --- a/web/components/issues/issue-layouts/list/roots/project-root.tsx +++ b/web/components/issues/issue-layouts/list/roots/project-root.tsx @@ -29,7 +29,7 @@ export const ListLayout: FC = observer(() => { const userDisplayFilters = issueFilterStore?.userDisplayFilters || null; const group_by: string | null = userDisplayFilters?.group_by || null; - const display_properties = issueFilterStore?.userDisplayProperties || null; + const displayProperties = issueFilterStore?.userDisplayProperties || null; const handleIssues = useCallback( (group_by: string | null, issue: IIssue, action: "update" | "delete") => { @@ -68,7 +68,7 @@ export const ListLayout: FC = observer(() => { handleUpdate={async (data) => handleIssues(group_by, data, "update")} /> )} - display_properties={display_properties} + displayProperties={displayProperties} states={states} stateGroups={stateGroups} priorities={priorities} diff --git a/web/components/issues/issue-layouts/properties/estimates.tsx b/web/components/issues/issue-layouts/properties/estimates.tsx index 907946ca7..573738975 100644 --- a/web/components/issues/issue-layouts/properties/estimates.tsx +++ b/web/components/issues/issue-layouts/properties/estimates.tsx @@ -1,16 +1,13 @@ import { Fragment, useState } from "react"; - -import { observer } from "mobx-react-lite"; - -// hooks import { usePopper } from "react-popper"; -import useEstimateOption from "hooks/use-estimate-option"; -// ui -import { Check, ChevronDown, Search, Triangle } from "lucide-react"; +import { observer } from "mobx-react-lite"; import { Combobox } from "@headlessui/react"; +import { Check, ChevronDown, Search, Triangle } from "lucide-react"; +// ui import { Tooltip } from "@plane/ui"; // types import { Placement } from "@popperjs/core"; +import { useMobxStore } from "lib/mobx/store-provider"; export interface IIssuePropertyEstimates { view?: "profile" | "workspace" | "project"; @@ -27,7 +24,6 @@ export interface IIssuePropertyEstimates { export const IssuePropertyEstimates: React.FC = observer((props) => { const { - view, projectId, value, onChange, @@ -44,8 +40,6 @@ export const IssuePropertyEstimates: React.FC = observe const [referenceElement, setReferenceElement] = useState(null); const [popperElement, setPopperElement] = useState(null); - const { isEstimateActive, estimatePoints } = useEstimateOption(); - const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: placement ?? "bottom-start", modifiers: [ @@ -58,6 +52,14 @@ export const IssuePropertyEstimates: React.FC = observe ], }); + const { project: projectStore } = useMobxStore(); + + const projectDetails = projectId ? projectStore.project_details[projectId] : null; + const isEstimateEnabled = projectDetails?.estimate !== null; + const estimates = projectId ? projectStore.estimates?.[projectId] : null; + const estimatePoints = + projectDetails && isEstimateEnabled ? estimates?.find((e) => e.id === projectDetails.estimate)?.points : null; + const options: { value: number | null; query: string; content: any }[] | undefined = (estimatePoints ?? []).map( (estimate) => ({ value: estimate.key, @@ -94,6 +96,8 @@ export const IssuePropertyEstimates: React.FC = observe ); + if (!isEstimateEnabled) return null; + return (