thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: created by added in issue sidebar and peek overview (#4264)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-04-24 15:16:30 +05:30 committed by GitHub
parent 196724214b
commit d87edede79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/components/issues/issue-detail/sidebar.tsx
View File

@ -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<Props> = 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<Props> = observer((props) => {
/>
</div>
{createdByDetails && (
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<UserCircle2 className="h-4 w-4 flex-shrink-0" />
<span>Created by</span>
</div>
<Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
<div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
<ButtonAvatars showTooltip={false} userIds={createdByDetails.id} />
<span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
</div>
</Tooltip>
</div>
)}
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<CalendarClock className="h-4 w-4 flex-shrink-0" />
@ -460,12 +480,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
</div>
</div>
<IssueLinkRoot
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
disabled={!isEditable}
/>
<IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={!isEditable} />
</div>
</div>
</>

26
web/components/issues/peek-overview/properties.tsx
View File

@ -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<IPeekOverviewProperties> = 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<IPeekOverviewProperties> = observer((pro
/>
</div>
{/* created by */}
{createdByDetails && (
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<UserCircle2 className="h-4 w-4 flex-shrink-0" />
<span>Created by</span>
</div>
<Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
<div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
<ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />
<span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
</div>
</Tooltip>
</div>
)}
{/* start date */}
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">