From c1eb5055e577372bcb7a536b867378bf0934fedd Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Mon, 20 Nov 2023 16:36:50 +0530
Subject: [PATCH] fix: bug fixes & ui improvements. (#2772)

* fix: create project modal member select

* fix: overflow in workspace activity

* fix: memeber selected state
---
 web/components/core/activity.tsx              | 36 +++++++++----------
 .../project/create-project-modal.tsx          |  6 ++--
 web/components/workspace/member-select.tsx    | 18 ++++++----
 .../[workspaceSlug]/me/profile/activity.tsx   |  9 +++--
 4 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
index 2b0f7b4e6..6bddae940 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -84,7 +84,7 @@ const LabelPill = ({ labelId }: { labelId: string }) => {
 
   return (
     <span
-      className="h-1.5 w-1.5 rounded-full"
+      className="h-1.5 w-1.5 rounded-full flex-shrink-0"
       style={{
         backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000",
       }}
@@ -266,12 +266,12 @@ const activityDetails: {
       if (activity.verb === "created")
         return (
           <>
-            added this issue to the cycle{" "}
+            <span className="flex-shrink-0">added this issue to the cycle</span>
             <a
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
               <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@@ -281,12 +281,12 @@ const activityDetails: {
       else if (activity.verb === "updated")
         return (
           <>
-            set the cycle to{" "}
+            <span className="flex-shrink-0">set the cycle to </span>
             <a
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
               <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@@ -301,7 +301,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
             >
               <span className="truncate">{activity.old_value}</span>
               <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@@ -370,15 +370,15 @@ const activityDetails: {
         return (
           <>
             added a new label{" "}
-            <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+            <span className="flex truncate items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
               <LabelPill labelId={activity.new_identifier ?? ""} />
-              <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+              <span className="font-medium flex-shrink truncate text-custom-text-100">{activity.new_value}</span>
             </span>
             {showIssue && (
-              <>
+              <span>
                 {" "}
                 to <IssueLink activity={activity} />
-              </>
+              </span>
             )}
           </>
         );
@@ -386,15 +386,15 @@ const activityDetails: {
         return (
           <>
             removed the label{" "}
-            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+            <span className="flex truncate items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
               <LabelPill labelId={activity.old_identifier ?? ""} />
-              <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+              <span className="font-medium flex-shrink truncate text-custom-text-100">{activity.old_value}</span>
             </span>
             {showIssue && (
-              <>
+              <span>
                 {" "}
                 from <IssueLink activity={activity} />
-              </>
+              </span>
             )}
           </>
         );
@@ -482,7 +482,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
               <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@@ -497,7 +497,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
             >
               <span className="truncate">{activity.new_value}</span>
               <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@@ -512,7 +512,7 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
             >
               <span className="truncate">{activity.old_value}</span>
               <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@@ -525,7 +525,7 @@ const activityDetails: {
   name: {
     message: (activity, showIssue) => (
       <>
-        set the name to {activity.new_value}
+        <span className="truncate">set the name to {activity.new_value}</span>
         {showIssue && (
           <>
             {" "}
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 6659dca87..5cf6c1bcd 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -55,7 +55,7 @@ export interface ICreateProjectForm {
   description: string;
   emoji_and_icon: string;
   network: number;
-  project_lead_member: IWorkspaceMember;
+  project_lead_member: string;
   project_lead: string;
   cover_image: string;
   icon_prop: any;
@@ -126,7 +126,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
     if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon;
     else payload.emoji = formData.emoji_and_icon;
 
-    payload.project_lead = formData.project_lead_member?.member.id;
+    payload.project_lead = formData.project_lead_member;
 
     return projectStore
       .createProject(workspaceSlug.toString(), payload)
@@ -380,7 +380,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                           control={control}
                           render={({ field: { value, onChange } }) => (
                             <WorkspaceMemberSelect
-                              value={value}
+                              value={workspaceMembers?.filter((member: IWorkspaceMember) => member.member.id ===value)[0]}
                               onChange={onChange}
                               options={workspaceMembers || []}
                               placeholder="Select Lead"
diff --git a/web/components/workspace/member-select.tsx b/web/components/workspace/member-select.tsx
index 26b76845d..9cc142699 100644
--- a/web/components/workspace/member-select.tsx
+++ b/web/components/workspace/member-select.tsx
@@ -11,7 +11,7 @@ import { IWorkspaceMember } from "types";
 
 export interface IWorkspaceMemberSelect {
   value: IWorkspaceMember | undefined;
-  onChange: (value: IWorkspaceMember) => void;
+  onChange: (value: string) => void;
   options: IWorkspaceMember[];
   placeholder?: string;
   disabled?: boolean;
@@ -48,7 +48,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
       : options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase()));
 
   const label = (
-    <div className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded border-[0.5px] border-custom-border-300">
+    <div className="flex items-center justify-between gap-2 w-full text-xs text-custom-text-300 px-2.5 py-1.5 rounded border-[0.5px] border-custom-border-300">
       {value ? (
         <>
           <Avatar name={value?.member.display_name} src={value?.member.avatar} />
@@ -64,7 +64,13 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
   );
 
   return (
-    <Listbox as="div" className={`flex-shrink-0 text-left`} value={value} onChange={onChange} disabled={disabled}>
+    <Listbox
+      as="div"
+      className={`flex-shrink-0 text-left`}
+      value={value?.member.id}
+      onChange={onChange}
+      disabled={disabled}
+    >
       <Listbox.Button as={React.Fragment}>
         <button
           ref={setReferenceElement}
@@ -99,20 +105,20 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
                   {filteredOptions.map((workspaceMember: IWorkspaceMember) => (
                     <Listbox.Option
                       key={workspaceMember.id}
-                      value={workspaceMember}
+                      value={workspaceMember.member.id}
                       className={({ active, selected }) =>
                         `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
                           active && !selected ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
                     >
-                      {({ selected }) => (
+                      {() => (
                         <>
                           <div className="flex items-center gap-2">
                             <Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
                             {workspaceMember.member.display_name}
                           </div>
-                          {selected && <Check className="h-3.5 w-3.5" />}
+                          {value && value.member.id === workspaceMember.member.id && <Check className="h-3.5 w-3.5" />}
                         </>
                       )}
                     </Listbox.Option>
diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
index 820a62596..ac7d0f697 100644
--- a/web/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -154,7 +154,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
                               </div>
                             </div>
                             <div className="min-w-0 flex-1 py-4 border-b border-custom-border-100">
-                              <div className="text-sm text-custom-text-200 break-words">
+                              <div className="text-sm text-custom-text-200 break-words flex gap-1">
                                 {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                                   <span className="text-gray font-medium">Plane</span>
                                 ) : activityItem.actor_detail.is_bot ? (
@@ -166,7 +166,12 @@ const ProfileActivityPage: NextPageWithLayout = () => {
                                     <a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a>
                                   </Link>
                                 )}{" "}
-                                {message} <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
+                                <div className="flex gap-1 truncate">
+                                  {message}{" "}
+                                  <span className="whitespace-nowrap flex-shrink-0">
+                                    {timeAgo(activityItem.created_at)}
+                                  </span>
+                                </div>
                               </div>
                             </div>
                           </>