diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx index 80259dada..60221f4c2 100644 --- a/web/components/issues/issue-detail/sidebar.tsx +++ b/web/components/issues/issue-detail/sidebar.tsx @@ -13,6 +13,7 @@ import { CopyPlus, CalendarClock, CalendarCheck2, + UserCircle2, } from "lucide-react"; // hooks // components @@ -36,6 +37,7 @@ import { } from "@/components/dropdowns"; // ui // helpers +import { ButtonAvatars } from "@/components/dropdowns/member/avatar"; import { DeleteIssueModal, IssueLinkRoot, @@ -54,7 +56,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper" import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper"; import { copyTextToClipboard } from "@/helpers/string.helper"; // types -import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store"; +import { useEstimate, useIssueDetail, useMember, useProject, useProjectState, useUser } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; // components import type { TIssueOperations } from "./root"; @@ -88,9 +90,12 @@ export const IssueDetailsSidebar: React.FC = observer((props) => { } = useIssueDetail(); const { getStateById } = useProjectState(); const { isMobile } = usePlatformOS(); + const { getUserDetails } = useMember(); const issue = getIssueById(issueId); if (!issue) return <>; + const createdByDetails = getUserDetails(issue.created_by); + const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => { @@ -257,6 +262,21 @@ export const IssueDetailsSidebar: React.FC = observer((props) => { /> + {createdByDetails && ( +
+
+ + Created by +
+ +
+ + {createdByDetails?.display_name} +
+
+
+ )} +
@@ -460,12 +480,7 @@ export const IssueDetailsSidebar: React.FC = observer((props) => {
- + diff --git a/web/components/issues/peek-overview/properties.tsx b/web/components/issues/peek-overview/properties.tsx index 00ffa9100..2564918b7 100644 --- a/web/components/issues/peek-overview/properties.tsx +++ b/web/components/issues/peek-overview/properties.tsx @@ -10,10 +10,11 @@ import { XCircle, CalendarClock, CalendarCheck2, + UserCircle2, } from "lucide-react"; // hooks // ui icons -import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui"; +import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon, Tooltip } from "@plane/ui"; // components import { DateDropdown, @@ -22,6 +23,7 @@ import { MemberDropdown, StateDropdown, } from "@/components/dropdowns"; +import { ButtonAvatars } from "@/components/dropdowns/member/avatar"; import { IssueLinkRoot, IssueCycleSelect, @@ -35,7 +37,8 @@ import { import { cn } from "@/helpers/common.helper"; import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"; import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper"; -import { useIssueDetail, useProject, useProjectState } from "@/hooks/store"; +import { useIssueDetail, useMember, useProject, useProjectState } from "@/hooks/store"; +import { usePlatformOS } from "@/hooks/use-platform-os"; interface IPeekOverviewProperties { workspaceSlug: string; @@ -53,9 +56,12 @@ export const PeekOverviewProperties: FC = observer((pro issue: { getIssueById }, } = useIssueDetail(); const { getStateById } = useProjectState(); + const { getUserDetails } = useMember(); + const { isMobile } = usePlatformOS(); // derived values const issue = getIssueById(issueId); if (!issue) return <>; + const createdByDetails = getUserDetails(issue?.created_by); const projectDetails = getProjectById(issue.project_id); const isEstimateEnabled = projectDetails?.estimate; const stateDetails = getStateById(issue.state_id); @@ -131,6 +137,22 @@ export const PeekOverviewProperties: FC = observer((pro /> + {/* created by */} + {createdByDetails && ( +
+
+ + Created by +
+ +
+ + {createdByDetails?.display_name} +
+
+
+ )} + {/* start date */}