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

[WEB-859] chore: inbox sidebar improvement (#4381)

Browse Source 
* chore: added created by field in inbox issue

* chore: inbox sidebar list item created by avatar added

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2024-05-07 14:10:27 +05:30 committed by GitHub
parent a46eccf300
commit 1eba6c24cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apiserver/plane/app/serializers/issue.py
View File

@ -636,6 +636,7 @@ class IssueInboxSerializer(DynamicBaseSerializer):
"project_id", "project_id",
"created_at", "created_at",
"label_ids", "label_ids",
"created_by",
] ]
read_only_fields = fields read_only_fields = fields

95
web/components/inbox/sidebar/inbox-list-item.tsx
View File

@ -4,12 +4,13 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Tooltip, PriorityIcon } from "@plane/ui"; import { Tooltip, PriorityIcon } from "@plane/ui";
// components // components
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
import { InboxIssueStatus } from "@/components/inbox"; import { InboxIssueStatus } from "@/components/inbox";
// helpers // helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
import { renderFormattedDate } from "@/helpers/date-time.helper"; import { renderFormattedDate } from "@/helpers/date-time.helper";
// hooks // hooks
import { useLabel, useProjectInbox } from "@/hooks/store"; import { useLabel, useMember, useProjectInbox } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os"; import { usePlatformOS } from "@/hooks/use-platform-os";
// store // store
import { IInboxIssueStore } from "@/store/inbox/inbox-issue.store"; import { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
@ -31,6 +32,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
const { currentTab } = useProjectInbox(); const { currentTab } = useProjectInbox();
const { projectLabels } = useLabel(); const { projectLabels } = useLabel();
const { isMobile } = usePlatformOS(); const { isMobile } = usePlatformOS();
const { getUserDetails } = useMember();
const issue = inboxIssue.issue; const issue = inboxIssue.issue;
const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => { const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => {
@ -39,6 +41,9 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
}; };
if (!issue) return <></>; if (!issue) return <></>;
const createdByDetails = issue?.created_by ? getUserDetails(issue?.created_by) : undefined;
return ( return (
<> <>
<Link <Link
@ -63,50 +68,54 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
<h3 className="truncate w-full text-sm">{issue.name}</h3> <h3 className="truncate w-full text-sm">{issue.name}</h3>
</div> </div>
<div className="flex flex-wrap items-center gap-2"> <div className="flex items-center justify-between">
<Tooltip <div className="flex flex-wrap items-center gap-2">
tooltipHeading="Created on" <Tooltip
tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`} tooltipHeading="Created on"
isMobile={isMobile} tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}
> isMobile={isMobile}
<div className="text-xs text-custom-text-200">{renderFormattedDate(issue.created_at ?? "")}</div> >
</Tooltip> <div className="text-xs text-custom-text-200">{renderFormattedDate(issue.created_at ?? "")}</div>
<div className="border-2 rounded-full border-custom-border-400" />
{issue.priority && (
<Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
<PriorityIcon priority={issue.priority} withContainer className="w-3 h-3" />
</Tooltip> </Tooltip>
)}
{issue.label_ids && issue.label_ids.length > 3 ? ( <div className="border-2 rounded-full border-custom-border-400" />
<div className="relative !h-[17.5px] flex items-center gap-1 rounded border border-custom-border-300 px-1 text-xs">
<span className="h-2 w-2 rounded-full bg-orange-400" /> {issue.priority && (
<span className="normal-case max-w-28 truncate">{`${issue.label_ids.length} labels`}</span> <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
</div> <PriorityIcon priority={issue.priority} withContainer className="w-3 h-3" />
) : ( </Tooltip>
<> )}
{(issue.label_ids ?? []).map((labelId) => {
const labelDetails = projectLabels?.find((l) => l.id === labelId); {issue.label_ids && issue.label_ids.length > 3 ? (
if (!labelDetails) return null; <div className="relative !h-[17.5px] flex items-center gap-1 rounded border border-custom-border-300 px-1 text-xs">
return ( <span className="h-2 w-2 rounded-full bg-orange-400" />
<div <span className="normal-case max-w-28 truncate">{`${issue.label_ids.length} labels`}</span>
key={labelId} </div>
className="relative !h-[17.5px] flex items-center gap-1 rounded border border-custom-border-300 px-1 text-xs" ) : (
> <>
<span {(issue.label_ids ?? []).map((labelId) => {
className="h-2 w-2 rounded-full" const labelDetails = projectLabels?.find((l) => l.id === labelId);
style={{ if (!labelDetails) return null;
backgroundColor: labelDetails.color, return (
}} <div
/> key={labelId}
<span className="normal-case max-w-28 truncate">{labelDetails.name}</span> className="relative !h-[17.5px] flex items-center gap-1 rounded border border-custom-border-300 px-1 text-xs"
</div> >
); <span
})} className="h-2 w-2 rounded-full"
</> style={{
)} backgroundColor: labelDetails.color,
}}
/>
<span className="normal-case max-w-28 truncate">{labelDetails.name}</span>
</div>
);
})}
</>
)}
</div>
{/* created by */}
{createdByDetails && <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />}
</div> </div>
</div> </div>
</Link> </Link>