[WEB-1617] chore: created by implementation (#4831)

* chore: created by implementation

* Fix lint issue

---------

Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
This commit is contained in:
Anmol Singh Bhatia
2024-06-17 11:47:19 +05:30
committed by GitHub
parent c99579cddc
commit 1028ec8735
3 changed files with 48 additions and 5 deletions

View File

@@ -146,7 +146,6 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
.finally(() => setIsRestoring(false));
};
// auth
const isEditable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
const canRestoreIssue = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;

View File

@@ -11,12 +11,13 @@ import {
Signal,
Tag,
Triangle,
UserCircle2,
Users,
XCircle,
} from "lucide-react";
// hooks
// components
import { ContrastIcon, DiceIcon, DoubleCircleIcon, RelatedIcon } from "@plane/ui";
import { ContrastIcon, DiceIcon, DoubleCircleIcon, RelatedIcon, Tooltip } from "@plane/ui";
import {
DateDropdown,
EstimateDropdown,
@@ -26,6 +27,7 @@ import {
} from "@/components/dropdowns";
// ui
// helpers
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
import {
IssueCycleSelect,
IssueLabel,
@@ -40,7 +42,8 @@ import { cn } from "@/helpers/common.helper";
import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
// types
import { useProjectEstimates, useIssueDetail, useProject, useProjectState } from "@/hooks/store";
import { useProjectEstimates, useIssueDetail, useProject, useProjectState, useMember } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
// components
import type { TIssueOperations } from "./root";
// icons
@@ -63,10 +66,14 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
const {
issue: { getIssueById },
} = useIssueDetail();
const { getUserDetails } = useMember();
const { getStateById } = useProjectState();
const { isMobile } = usePlatformOS();
const issue = getIssueById(issueId);
if (!issue) return <></>;
const createdByDetails = getUserDetails(issue.created_by);
// derived values
const projectDetails = getProjectById(issue.project_id);
const stateDetails = getStateById(issue.state_id);
@@ -143,6 +150,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" />

View File

@@ -13,10 +13,11 @@ import {
CalendarClock,
CalendarCheck2,
Users,
UserCircle2,
} from "lucide-react";
// hooks
// ui icons
import { DiceIcon, DoubleCircleIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
import { DiceIcon, DoubleCircleIcon, ContrastIcon, RelatedIcon, Tooltip } from "@plane/ui";
// components
import {
DateDropdown,
@@ -25,6 +26,7 @@ import {
MemberDropdown,
StateDropdown,
} from "@/components/dropdowns";
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
import {
IssueLinkRoot,
IssueCycleSelect,
@@ -38,7 +40,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;
@@ -56,9 +59,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);
@@ -134,6 +140,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">