fix: issue activity (#2127)

web/components/web-view/activity-message.tsx

@@ -0,0 +1,419 @@
+import { useRouter } from "next/router";
+
+// icons
+import { Icon, Tooltip } from "components/ui";
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { BlockedIcon, BlockerIcon } from "components/icons";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { capitalizeFirstLetter } from "helpers/string.helper";
+// types
+import { IIssueActivity } from "types";
+
+const IssueLink = ({ activity }: { activity: IIssueActivity }) => (
+  <Tooltip
+    tooltipContent={
+      activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"
+    }
+  >
+    <button
+      type="button"
+      onClick={() =>
+        console.log(
+          "issue",
+          JSON.stringify({
+            project_id: activity.project,
+            issue_id: activity.issue,
+          })
+        )
+      }
+      className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+    >
+      {activity.issue_detail
+        ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
+        : "Issue"}
+      <Icon iconName="launch" className="!text-xs" />
+    </button>
+  </Tooltip>
+);
+
+const UserLink = ({ activity }: { activity: IIssueActivity }) => (
+  <button
+    type="button"
+    onClick={() => {
+      console.log("user", activity.actor);
+    }}
+    className="font-medium text-custom-text-100 inline-flex items-center hover:underline"
+  >
+    {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
+  </button>
+);
+
+const activityDetails: {
+  [key: string]: {
+    message: (
+      activity: IIssueActivity,
+      showIssue: boolean,
+      workspaceSlug: string
+    ) => React.ReactNode;
+    icon: React.ReactNode;
+  };
+} = {
+  assignees: {
+    message: (activity, showIssue) => (
+      <>
+        {activity.old_value === "" ? "added a new assignee " : "removed the assignee "}
+        <UserLink activity={activity} />
+        {showIssue && (
+          <>
+            {" "}
+            to <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
+  },
+
+  archived_at: {
+    message: (activity) => {
+      if (activity.new_value === "restore") return "restored the issue.";
+      else return "archived the issue.";
+    },
+    icon: <Icon iconName="archive" className="!text-sm" aria-hidden="true" />,
+  },
+
+  attachment: {
+    message: (activity, showIssue) => (
+      <>
+        {activity.verb === "created" ? "uploaded a new " : "removed an "}
+        {activity.new_value && activity.new_value !== "" ? (
+          <button type="button" onClick={() => console.log("attachment", activity.new_value)}>
+            attachment
+          </button>
+        ) : (
+          "attachment"
+        )}
+        {showIssue && activity.verb === "created" ? " to " : " from "}
+        {showIssue && <IssueLink activity={activity} />}
+      </>
+    ),
+    icon: <Icon iconName="attach_file" className="!text-sm" aria-hidden="true" />,
+  },
+
+  blocking: {
+    message: (activity) => (
+      <>
+        {activity.old_value === ""
+          ? "marked this issue is blocking issue "
+          : "removed the blocking issue "}
+        <span className="font-medium text-custom-text-100">
+          {activity.old_value === "" ? activity.new_value : activity.old_value}
+        </span>
+        .
+      </>
+    ),
+    icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
+  },
+
+  blocks: {
+    message: (activity) => (
+      <>
+        {activity.old_value === ""
+          ? "marked this issue is being blocked by issue "
+          : "removed this issue being blocked by issue "}
+        <span className="font-medium text-custom-text-100">
+          {activity.old_value === "" ? activity.new_value : activity.old_value}
+        </span>
+        .
+      </>
+    ),
+    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
+  },
+
+  cycles: {
+    message: (activity) => (
+      <>
+        {activity.verb === "created" && "added this issue to the cycle "}
+        {activity.verb === "updated" && "set the cycle to "}
+        {activity.verb === "deleted" && "removed the issue from the cycle "}
+        <button
+          type="button"
+          onClick={() =>
+            console.log(
+              "cycle",
+              JSON.stringify({
+                cycle_id: activity.new_identifier,
+                project_id: activity.project,
+              })
+            )
+          }
+          className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+        >
+          {activity.new_value}
+          <Icon iconName="launch" className="!text-xs" />
+        </button>
+      </>
+    ),
+    icon: <Icon iconName="contrast" className="!text-sm" aria-hidden="true" />,
+  },
+
+  description: {
+    message: (activity, showIssue) => (
+      <>
+        updated the description
+        {showIssue && (
+          <>
+            {" "}
+            of <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
+  },
+
+  estimate_point: {
+    message: (activity, showIssue) => (
+      <>
+        {activity.new_value ? "set the estimate point to " : "removed the estimate point "}
+        {activity.new_value && (
+          <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        )}
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+      </>
+    ),
+    icon: <Icon iconName="change_history" className="!text-sm" aria-hidden="true" />,
+  },
+
+  issue: {
+    message: (activity) => {
+      if (activity.verb === "created") return "created the issue.";
+      else return "deleted an issue.";
+    },
+    icon: <Icon iconName="stack" className="!text-sm" aria-hidden="true" />,
+  },
+
+  labels: {
+    message: (activity, showIssue) => (
+      <>
+        {activity.old_value === "" ? "added a new label " : "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="h-1.5 w-1.5 rounded-full"
+            style={{
+              backgroundColor: "#000000",
+            }}
+            aria-hidden="true"
+          />
+          <span className="font-medium text-custom-text-100">
+            {activity.old_value === "" ? activity.new_value : activity.old_value}
+          </span>
+        </span>
+        {showIssue && (
+          <>
+            {" "}
+            to <IssueLink activity={activity} />
+          </>
+        )}
+      </>
+    ),
+    icon: <Icon iconName="sell" className="!text-sm" aria-hidden="true" />,
+  },
+
+  link: {
+    message: (activity, showIssue) => (
+      <>
+        {activity.verb === "created" && "added this "}
+        {activity.verb === "updated" && "updated this "}
+        {activity.verb === "deleted" && "removed this "}
+        <button
+          onClick={() =>
+            console.log(
+              "link",
+              activity.verb === "created" ? activity.new_value : activity.old_value
+            )
+          }
+          className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+        >
+          link
+          <Icon iconName="launch" className="!text-xs" />
+        </button>
+        {showIssue && (
+          <>
+            {" "}
+            to <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Icon iconName="link" className="!text-sm" aria-hidden="true" />,
+  },
+
+  modules: {
+    message: (activity) => (
+      <>
+        {activity.verb === "created" && "added this "}
+        {activity.verb === "updated" && "updated this "}
+        {activity.verb === "deleted" && "removed this "}
+        <button
+          onClick={() =>
+            console.log(
+              "module",
+              activity.verb === "created" ? activity.new_value : activity.old_value
+            )
+          }
+          className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+        >
+          module
+          <Icon iconName="launch" className="!text-xs" />
+        </button>
+        .
+      </>
+    ),
+    icon: <Icon iconName="dataset" className="!text-sm" aria-hidden="true" />,
+  },
+
+  name: {
+    message: (activity, showIssue) => (
+      <>
+        set the name to {activity.new_value}
+        {showIssue && (
+          <>
+            {" "}
+            of <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
+  },
+
+  parent: {
+    message: (activity, showIssue) => (
+      <>
+        {activity.new_value ? "set the parent to " : "removed the parent "}
+        <span className="font-medium text-custom-text-100">
+          {activity.new_value ? activity.new_value : activity.old_value}
+        </span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Icon iconName="supervised_user_circle" className="!text-sm" aria-hidden="true" />,
+  },
+
+  priority: {
+    message: (activity, showIssue) => (
+      <>
+        set the priority to{" "}
+        <span className="font-medium text-custom-text-100">
+          {activity.new_value ? capitalizeFirstLetter(activity.new_value) : "None"}
+        </span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Icon iconName="signal_cellular_alt" className="!text-sm" aria-hidden="true" />,
+  },
+
+  start_date: {
+    message: (activity, showIssue) => (
+      <>
+        {activity.new_value ? "set the start date to " : "removed the start date "}
+        <span className="font-medium text-custom-text-100">
+          {activity.new_value ? renderShortDateWithYearFormat(activity.new_value) : "None"}
+        </span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+      </>
+    ),
+    icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
+  },
+
+  state: {
+    message: (activity, showIssue) => (
+      <>
+        set the state to{" "}
+        <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Squares2X2Icon className="h-3 w-3" aria-hidden="true" />,
+  },
+
+  target_date: {
+    message: (activity, showIssue) => (
+      <>
+        {activity.new_value ? "set the target date to " : "removed the target date "}
+        {activity.new_value && (
+          <span className="font-medium text-custom-text-100">
+            {renderShortDateWithYearFormat(activity.new_value)}
+          </span>
+        )}
+
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+      </>
+    ),
+    icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
+  },
+};
+
+export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
+  <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
+);
+
+export const ActivityMessage = ({
+  activity,
+  showIssue = false,
+}: {
+  activity: IIssueActivity;
+  showIssue?: boolean;
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <>
+      {activityDetails[activity.field as keyof typeof activityDetails]?.message(
+        activity,
+        showIssue,
+        workspaceSlug?.toString() ?? ""
+      )}
+    </>
+  );
+};

web/components/web-view/index.ts

@@ -15,3 +15,4 @@ export * from "./add-comment";
 export * from "./select-parent";
 export * from "./select-blocker";
 export * from "./select-blocked";
+export * from "./activity-message";

web/components/web-view/issue-activity.tsx

@@ -2,7 +2,6 @@
 import React from "react";
 
 // next
-import Link from "next/link";
 import { useRouter } from "next/router";
 
 // swr
@@ -16,12 +15,10 @@ import issuesService from "services/issues.service";
 
 // hooks
 import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
 
 // components
-import { Label, AddComment } from "components/web-view";
 import { CommentCard } from "components/issues/comment";
-import { ActivityIcon, ActivityMessage } from "components/core";
+import { Label, AddComment, ActivityMessage, ActivityIcon } from "components/web-view";
 
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
@@ -183,15 +180,15 @@ export const IssueActivity: React.FC<Props> = (props) => {
                               {activityItem.actor_detail.first_name} Bot
                             </span>
                           ) : (
-                            <Link
+                            <button
-                              href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}
+                              type="button"
+                              className="text-gray font-medium"
+                              onClick={() => console.log("user", activityItem.actor)}
                             >
-                              <a className="text-gray font-medium">
                               {activityItem.actor_detail.is_bot
                                 ? activityItem.actor_detail.first_name
                                 : activityItem.actor_detail.display_name}
-                              </a>
+                            </button>
-                            </Link>
                           )}{" "}
                           {message}{" "}
                           <span className="whitespace-nowrap">

web/components/web-view/issue-web-view-form.tsx

@@ -90,7 +90,7 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
                 debouncedTitleSave();
               }}
               required={true}
-              className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+              className="min-h-10 block w-full resize-none overflow-hidden rounded border bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
               role="textbox"
               disabled={!isAllowed}
             />

web/components/web-view/web-view-modal.tsx

@@ -63,7 +63,7 @@ export const WebViewModal = (props: Props) => {
                     <XMarkIcon className="w-6 h-6 text-custom-text-200" />
                   </button>
                 </div>
-                <div className="mt-6">{children}</div>
+                <div className="mt-6 max-h-60 overflow-auto">{children}</div>
               </Dialog.Panel>
             </Transition.Child>
           </div>

web/layouts/web-view-layout/index.tsx

@@ -18,7 +18,10 @@ type Props = {
 };
 
 const getIfInWebview = (userAgent: NavigatorID["userAgent"]) => {
-  if (/iphone|ipod|ipad/.test(userAgent) || userAgent.includes("wv")) return true;
+  const safari = /safari/.test(userAgent);
+
+  if (safari) return false;
+  else if (/iphone|ipod|ipad/.test(userAgent) || userAgent.includes("wv")) return true;
   else return false;
 };