From 7337707a4ed2561db3d2e30dea44bf47470be94a Mon Sep 17 00:00:00 2001
From: Saheb Giri <47132373+iamsahebgiri@users.noreply.github.com>
Date: Wed, 29 Mar 2023 19:19:37 +0530
Subject: [PATCH] style: redesign issue activity (#579)

* style: redesign the activity feed and refactor the code

* chore: remove console logs

* revert: back to remirror rich text editor

* style: make icons, text smaller and reduce the spacing between logs
---
 apps/app/components/issues/activity.tsx       | 320 ++++++++++--------
 .../issues/comment/comment-card.tsx           | 136 ++++----
 2 files changed, 250 insertions(+), 206 deletions(-)

diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index 0f260b182..b845e12e9 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -24,8 +24,8 @@ import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "co
 import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssueComment } from "types";
-import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import { IIssueComment, IIssueLabels } from "types";
+import { PROJECT_ISSUES_ACTIVITY, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 const activityDetails: {
   [key: string]: {
@@ -35,54 +35,54 @@ const activityDetails: {
 } = {
   assignee: {
     message: "removed the assignee",
-    icon: <UserGroupIcon className="h-4 w-4" />,
+    icon: <UserGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
   },
   assignees: {
     message: "added a new assignee",
-    icon: <UserGroupIcon className="h-4 w-4" />,
+    icon: <UserGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
   },
   blocks: {
     message: "marked this issue being blocked by",
-    icon: <BlockedIcon height="16" width="16" />,
+    icon: <BlockedIcon height="12" width="12" className="fill-gray-500" />,
   },
   blocking: {
     message: "marked this issue is blocking",
-    icon: <BlockerIcon height="16" width="16" />,
+    icon: <BlockerIcon height="12" width="12" />,
   },
   cycles: {
     message: "set the cycle to",
-    icon: <CyclesIcon height="16" width="16" />,
+    icon: <CyclesIcon height="12" width="12" />,
   },
   labels: {
-    icon: <TagIcon height="16" width="16" />,
+    icon: <TagIcon height="12" width="12" />,
   },
   modules: {
     message: "set the module to",
-    icon: <RectangleGroupIcon className="h-4 w-4" />,
+    icon: <RectangleGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
   },
   state: {
     message: "set the state to",
-    icon: <Squares2X2Icon className="h-4 w-4" />,
+    icon: <Squares2X2Icon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
   },
   priority: {
     message: "set the priority to",
-    icon: <ChartBarIcon className="h-4 w-4" />,
+    icon: <ChartBarIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
   },
   name: {
     message: "set the name to",
-    icon: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
+    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
   },
   description: {
     message: "updated the description.",
-    icon: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
+    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
   },
   target_date: {
     message: "set the due date to",
-    icon: <CalendarDaysIcon className="h-4 w-4" />,
+    icon: <CalendarDaysIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
   },
   parent: {
     message: "set the parent to",
-    icon: <UserIcon className="h-4 w-4" />,
+    icon: <UserIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
   },
 };
 
@@ -104,6 +104,13 @@ export const IssueActivitySection: React.FC<Props> = () => {
       : null
   );
 
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
   const handleCommentUpdate = async (comment: IIssueComment) => {
     if (!workspaceSlug || !projectId || !issueId) return;
     await issuesService
@@ -134,140 +141,171 @@ export const IssueActivitySection: React.FC<Props> = () => {
       });
   };
 
+  const getLabelColor = (labelId: string) => {
+    if (!issueLabels) return;
+    const label = issueLabels.find((label) => label.id === labelId);
+    if (typeof label !== "undefined") {
+      return label.color;
+    }
+    return "#64748b";
+  };
+
+  if (!issueActivities) {
+    return (
+      <Loader className="space-y-4">
+        <div className="space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+        </div>
+        <div className="space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+        </div>
+        <div className="space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+        </div>
+      </Loader>
+    );
+  }
+
   return (
-    <>
-      {issueActivities ? (
-        <div className="space-y-4">
-          {issueActivities.map((activity, index) => {
-            if ("field" in activity && activity.field !== "updated_by") {
-              return (
-                <div key={activity.id} className="relative flex w-full items-center gap-x-2">
-                  {issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
+    <div className="flow-root">
+      <ul role="list" className="-mb-8">
+        {issueActivities.map((activityItem, activityItemIdx) => {
+          // determines what type of action is performed
+          let action = activityDetails[activityItem.field as keyof typeof activityDetails]?.message;
+          if (activityItem.field === "labels") {
+            action = activityItem.new_value !== "" ? "added a new label" : "removed the label";
+          } else if (activityItem.field === "blocking") {
+            action =
+              activityItem.new_value !== ""
+                ? "marked this issue is blocking"
+                : "removed the issue from blocking";
+          } else if (activityItem.field === "blocks") {
+            action =
+              activityItem.new_value !== ""
+                ? "marked this issue being blocked by"
+                : "removed blocker";
+          } else if (activityItem.field === "target_date") {
+            action =
+              activityItem.new_value && activityItem.new_value !== ""
+                ? "set the due date to"
+                : "removed the due date";
+          }
+          // for values that are after the action clause
+          let value: any = activityItem.new_value ? activityItem.new_value : activityItem.old_value;
+          if (
+            activityItem.verb === "created" &&
+            activityItem.field !== "cycles" &&
+            activityItem.field !== "modules"
+          ) {
+            value = <span className="text-gray-600">created this issue.</span>;
+          } else if (activityItem.field === "state") {
+            value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None";
+          } else if (activityItem.field === "labels") {
+            let name,
+              id = "#64748b";
+            if (activityItem.new_value !== "") {
+              name = activityItem.new_value;
+              id = activityItem.new_identifier ? activityItem.new_identifier : id;
+            } else {
+              name = activityItem.old_value;
+              id = activityItem.old_identifier ? activityItem.old_identifier : id;
+            }
+
+            value = (
+              <span className="relative inline-flex items-center rounded-full px-2.5 py-1 text-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+                <span className="absolute flex flex-shrink-0 items-center justify-center">
+                  <span
+                    className="h-1.5 w-1.5 rounded-full"
+                    style={{
+                      backgroundColor: getLabelColor(id),
+                    }}
+                    aria-hidden="true"
+                  />
+                </span>
+                <span className="ml-3 font-medium text-gray-900">{name}</span>
+              </span>
+            );
+          } else if (activityItem.field === "assignees") {
+            value = activityItem.new_value;
+          } else if (activityItem.field === "target_date") {
+            value = renderShortNumericDateFormat(activityItem.new_value as string);
+          } else if (activityItem.field === "description") {
+            value = "";
+          }
+
+          if ("field" in activityItem && activityItem.field !== "updated_by") {
+            return (
+              <li key={activityItem.id}>
+                <div className="relative pb-3">
+                  {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
                     <span
-                      className="absolute top-5 left-2.5 h-full w-0.5 bg-gray-200"
+                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200"
                       aria-hidden="true"
                     />
                   ) : null}
-                  {activity.field ? (
-                    <div className="relative z-10 -ml-1 flex-shrink-0">
-                      <div className="grid h-8 w-8 place-items-center bg-white">
-                        {activityDetails[activity.field as keyof typeof activityDetails]?.icon}
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="relative z-10 -ml-4 flex-shrink-0 rounded-full border-2 border-white">
-                      <div className="grid h-12 w-12 place-items-center">
-                        {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
-                          <Image
-                            src={activity.actor_detail.avatar}
-                            alt={activity.actor_detail.first_name}
-                            height={30}
-                            width={30}
-                            className="rounded-full"
-                          />
-                        ) : (
-                          <div
-                            className={`grid h-8 w-8 place-items-center rounded-full border-2 border-white bg-gray-700 text-white`}
-                          >
-                            {activity.actor_detail.first_name.charAt(0)}
+                  <div className="relative flex items-start space-x-2">
+                    <>
+                      <div>
+                        <div className="relative px-1.5">
+                          <div className="mt-1.5">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 ring-white">
+                              {activityItem.field ? (
+                                activityDetails[activityItem.field as keyof typeof activityDetails]
+                                  ?.icon
+                              ) : activityItem.actor_detail.avatar &&
+                                activityItem.actor_detail.avatar !== "" ? (
+                                <Image
+                                  src={activityItem.actor_detail.avatar}
+                                  alt={activityItem.actor_detail.first_name}
+                                  height={24}
+                                  width={24}
+                                  className="rounded-full"
+                                />
+                              ) : (
+                                <div
+                                  className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                                >
+                                  {activityItem.actor_detail.first_name.charAt(0)}
+                                </div>
+                              )}
+                            </div>
                           </div>
-                        )}
+                        </div>
                       </div>
-                    </div>
-                  )}
-
-                  <div className={`${activity.field ? "ml-1.5" : ""} w-full text-xs`}>
-                    <p>
-                      <span className="font-medium">
-                        {activity.actor_detail.first_name}
-                        {activity.actor_detail.is_bot
-                          ? " Bot"
-                          : " " + activity.actor_detail.last_name}
-                      </span>
-                      <span>
-                        {" "}
-                        {activity.field === "labels"
-                          ? activity.new_value !== ""
-                            ? "added a new label"
-                            : "removed the label"
-                          : activity.field === "blocking"
-                          ? activity.new_value !== ""
-                            ? "marked this issue is blocking"
-                            : "removed the issue from blocking"
-                          : activity.field === "blocks"
-                          ? activity.new_value !== ""
-                            ? "marked this issue being blocked by"
-                            : "removed blocker"
-                          : activity.field === "target_date"
-                          ? activity.new_value && activity.new_value !== ""
-                            ? "set the due date to"
-                            : "removed the due date"
-                          : activityDetails[activity.field as keyof typeof activityDetails]
-                              ?.message}{" "}
-                      </span>
-                      <span className="font-medium">
-                        {activity.verb === "created" &&
-                        activity.field !== "cycles" &&
-                        activity.field !== "modules" ? (
-                          <span className="text-gray-600">created this issue.</span>
-                        ) : activity.field === "description" ? null : activity.field === "state" ? (
-                          activity.new_value ? (
-                            addSpaceIfCamelCase(activity.new_value)
-                          ) : (
-                            "None"
-                          )
-                        ) : activity.field === "labels" ||
-                          activity.field === "blocking" ||
-                          activity.field === "blocks" ? (
-                          activity.new_value !== "" ? (
-                            activity.new_value
-                          ) : (
-                            activity.old_value
-                          )
-                        ) : activity.field === "assignee" ? (
-                          activity.old_value
-                        ) : activity.field === "target_date" ? (
-                          activity.new_value ? (
-                            renderShortNumericDateFormat(activity.new_value as string)
-                          ) : null
-                        ) : activity.field === "description" ? (
-                          ""
-                        ) : (
-                          activity.new_value ?? "None"
-                        )}
-                      </span>
-                      <span className="ml-2 text-gray-500">{timeAgo(activity.created_at)}</span>
-                    </p>
+                      <div className="min-w-0 flex-1 py-3">
+                        <div className="text-xs text-gray-500">
+                          <span className="text-gray font-medium">
+                            {activityItem.actor_detail.first_name}
+                            {activityItem.actor_detail.is_bot
+                              ? " Bot"
+                              : " " + activityItem.actor_detail.last_name}
+                          </span>
+                          <span> {action} </span>
+                          <span className="text-xs font-medium text-gray-900"> {value} </span>
+                          <span className="whitespace-nowrap">
+                            {timeAgo(activityItem.created_at)}
+                          </span>
+                        </div>
+                      </div>
+                    </>
                   </div>
                 </div>
-              );
-            } else if ("comment_json" in activity)
-              return (
-                <CommentCard
-                  key={activity.id}
-                  comment={activity as any}
-                  onSubmit={handleCommentUpdate}
-                  handleCommentDeletion={handleCommentDelete}
-                />
-              );
-          })}
-        </div>
-      ) : (
-        <Loader className="space-y-4">
-          <div className="space-y-2">
-            <Loader.Item height="30px" width="40%" />
-            <Loader.Item height="15px" width="60%" />
-          </div>
-          <div className="space-y-2">
-            <Loader.Item height="30px" width="40%" />
-            <Loader.Item height="15px" width="60%" />
-          </div>
-          <div className="space-y-2">
-            <Loader.Item height="30px" width="40%" />
-            <Loader.Item height="15px" width="60%" />
-          </div>
-        </Loader>
-      )}
-    </>
+              </li>
+            );
+          } else if ("comment_json" in activityItem)
+            return (
+              <CommentCard
+                key={activityItem.id}
+                comment={activityItem as any}
+                onSubmit={handleCommentUpdate}
+                handleCommentDeletion={handleCommentDelete}
+              />
+            );
+        })}
+      </ul>
+    </div>
   );
 };
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 936d2b6b6..9cab65531 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -6,7 +6,7 @@ import dynamic from "next/dynamic";
 // react-hook-form
 import { useForm } from "react-hook-form";
 // icons
-import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // hooks
 import useUser from "hooks/use-user";
 // ui
@@ -49,71 +49,77 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
   }, [isEditing, setFocus]);
 
   return (
-    <div className="-ml-1 flex h-full w-full justify-between">
-      <div className="flex w-full gap-x-4">
-        <div className="flex-shrink-0">
-          {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
-            <Image
-              src={comment.actor_detail.avatar}
-              alt={comment.actor_detail.first_name}
-              height={30}
-              width={30}
-              className="rounded-full"
-            />
-          ) : (
-            <div
-              className={`grid h-8 w-8 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
-            >
-              {comment.actor_detail.first_name.charAt(0)}
-            </div>
-          )}
-        </div>
-        <div className="w-full space-y-1">
-          <p className="flex items-center gap-2 text-xs text-gray-500">
-            <span>
-              {comment.actor_detail.first_name}
-              {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
-            </span>
-            <span>{timeAgo(comment.created_at)}</span>
-          </p>
-          <div className="issue-comments-section">
-            {isEditing ? (
-              <form className="flex flex-col gap-2" onSubmit={handleSubmit(onEnter)}>
-                <RemirrorRichTextEditor
-                  value={comment.comment_html}
-                  onBlur={(jsonValue, htmlValue) => {
-                    setValue("comment_json", jsonValue);
-                    setValue("comment_html", htmlValue);
-                  }}
-                  placeholder="Enter Your comment..."
-                />
-                <div className="flex gap-1 self-end">
-                  <button
-                    type="submit"
-                    disabled={isSubmitting}
-                    className="group rounded border border-green-500 bg-green-100 p-2 shadow-md duration-300 hover:bg-green-500"
-                  >
-                    <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
-                  </button>
-                  <button
-                    type="button"
-                    className="group rounded border border-red-500 bg-red-100 p-2 shadow-md duration-300 hover:bg-red-500"
-                    onClick={() => setIsEditing(false)}
-                  >
-                    <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
-                  </button>
-                </div>
-              </form>
-            ) : (
-              <>
-                <RemirrorRichTextEditor
-                  value={comment.comment_html}
-                  editable={false}
-                  onBlur={() => ({})}
-                />
-              </>
-            )}
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+          <Image
+            src={comment.actor_detail.avatar}
+            alt={comment.actor_detail.first_name}
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
+          />
+        ) : (
+          <div
+            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
+          >
+            {comment.actor_detail.first_name.charAt(0)}
           </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
+          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-gray-400" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.first_name}
+            {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
+          </div>
+          <p className="mt-0.5 text-xs text-gray-500">Commented {timeAgo(comment.created_at)}</p>
+        </div>
+        <div className="issue-comments-section p-0">
+          {isEditing ? (
+            <form className="flex flex-col gap-2" onSubmit={handleSubmit(onEnter)}>
+              <RemirrorRichTextEditor
+                value={comment.comment_html}
+                onBlur={(jsonValue, htmlValue) => {
+                  setValue("comment_json", jsonValue);
+                  setValue("comment_html", htmlValue);
+                }}
+                placeholder="Enter Your comment..."
+              />
+              <div className="flex gap-1 self-end">
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="group rounded border border-green-500 bg-green-100 p-2 shadow-md duration-300 hover:bg-green-500"
+                >
+                  <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+                </button>
+                <button
+                  type="button"
+                  className="group rounded border border-red-500 bg-red-100 p-2 shadow-md duration-300 hover:bg-red-500"
+                  onClick={() => setIsEditing(false)}
+                >
+                  <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+                </button>
+              </div>
+            </form>
+          ) : (
+            // <div
+            //   className="mt-2 mb-6 text-sm text-gray-700"
+            //   dangerouslySetInnerHTML={{ __html: comment.comment_html }}
+            // />
+            <RemirrorRichTextEditor
+              value={comment.comment_html}
+              editable={false}
+              onBlur={() => ({})}
+              noBorder
+              customClassName="text-xs bg-gray-100"
+            />
+          )}
         </div>
       </div>
       {user?.id === comment.actor && (