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

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<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
+          <IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={!isEditable} />
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            issueId={issueId}
-            disabled={!isEditable}
-          />
         </div>
       </div>
     </>

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<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">