From 1eba6c24cd886a3dbd43cd5579e8ca5dfac61f25 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 7 May 2024 14:10:27 +0530
Subject: [PATCH] [WEB-859] chore: inbox sidebar improvement (#4381)

* chore: added created by field in inbox issue

* chore: inbox sidebar list item created by avatar added

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
---
 apiserver/plane/app/serializers/issue.py      |  1 +
 .../inbox/sidebar/inbox-list-item.tsx         | 95 ++++++++++---------
 2 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/apiserver/plane/app/serializers/issue.py b/apiserver/plane/app/serializers/issue.py
index b884d60a3..748af96fb 100644
--- a/apiserver/plane/app/serializers/issue.py
+++ b/apiserver/plane/app/serializers/issue.py
@@ -636,6 +636,7 @@ class IssueInboxSerializer(DynamicBaseSerializer):
             "project_id",
             "created_at",
             "label_ids",
+            "created_by",
         ]
         read_only_fields = fields
 
diff --git a/web/components/inbox/sidebar/inbox-list-item.tsx b/web/components/inbox/sidebar/inbox-list-item.tsx
index 593d114d1..6faae778a 100644
--- a/web/components/inbox/sidebar/inbox-list-item.tsx
+++ b/web/components/inbox/sidebar/inbox-list-item.tsx
@@ -4,12 +4,13 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Tooltip, PriorityIcon } from "@plane/ui";
 // components
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { InboxIssueStatus } from "@/components/inbox";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
-import { useLabel, useProjectInbox } from "@/hooks/store";
+import { useLabel, useMember, useProjectInbox } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // store
 import { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
@@ -31,6 +32,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
   const { currentTab } = useProjectInbox();
   const { projectLabels } = useLabel();
   const { isMobile } = usePlatformOS();
+  const { getUserDetails } = useMember();
   const issue = inboxIssue.issue;
 
   const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => {
@@ -39,6 +41,9 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
   };
 
   if (!issue) return <></>;
+
+  const createdByDetails = issue?.created_by ? getUserDetails(issue?.created_by) : undefined;
+
   return (
     <>
       <Link
@@ -63,50 +68,54 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
             <h3 className="truncate w-full text-sm">{issue.name}</h3>
           </div>
 
-          <div className="flex flex-wrap items-center gap-2">
-            <Tooltip
-              tooltipHeading="Created on"
-              tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}
-              isMobile={isMobile}
-            >
-              <div className="text-xs text-custom-text-200">{renderFormattedDate(issue.created_at ?? "")}</div>
-            </Tooltip>
-
-            <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" />
+          <div className="flex items-center justify-between">
+            <div className="flex flex-wrap items-center gap-2">
+              <Tooltip
+                tooltipHeading="Created on"
+                tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}
+                isMobile={isMobile}
+              >
+                <div className="text-xs text-custom-text-200">{renderFormattedDate(issue.created_at ?? "")}</div>
               </Tooltip>
-            )}
 
-            {issue.label_ids && issue.label_ids.length > 3 ? (
-              <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" />
-                <span className="normal-case max-w-28 truncate">{`${issue.label_ids.length} labels`}</span>
-              </div>
-            ) : (
-              <>
-                {(issue.label_ids ?? []).map((labelId) => {
-                  const labelDetails = projectLabels?.find((l) => l.id === labelId);
-                  if (!labelDetails) return null;
-                  return (
-                    <div
-                      key={labelId}
-                      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"
-                        style={{
-                          backgroundColor: labelDetails.color,
-                        }}
-                      />
-                      <span className="normal-case max-w-28 truncate">{labelDetails.name}</span>
-                    </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>
+              )}
+
+              {issue.label_ids && issue.label_ids.length > 3 ? (
+                <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" />
+                  <span className="normal-case max-w-28 truncate">{`${issue.label_ids.length} labels`}</span>
+                </div>
+              ) : (
+                <>
+                  {(issue.label_ids ?? []).map((labelId) => {
+                    const labelDetails = projectLabels?.find((l) => l.id === labelId);
+                    if (!labelDetails) return null;
+                    return (
+                      <div
+                        key={labelId}
+                        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"
+                          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>
       </Link>