chore: deactivate user option added (#2841)

* dev: deactivate user option added

* chore: new layout for profile settings

* fix: build errors

* fix: user profile activity

web/components/core/activity.tsx

@@ -1,11 +1,9 @@
 import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hook
 import useEstimateOption from "hooks/use-estimate-option";
-// services
-import { IssueLabelService } from "services/issue";
 // icons
 import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
 import {
@@ -29,11 +27,7 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
 import { IIssueActivity } from "types";
-// fetch-keys
-import { WORKSPACE_LABELS } from "constants/fetch-keys";
-
-// services
-const issueLabelService = new IssueLabelService();
+import { useEffect } from "react";
 
 const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   const router = useRouter();
@@ -44,7 +38,11 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
       <a
         aria-disabled={activity.issue === null}
         href={`${
-          activity.issue_detail ? `/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}` : "#"
+          activity.issue_detail
+            ? `/${workspaceSlug ?? activity.workspace_detail?.slug}/projects/${activity.project}/issues/${
+                activity.issue
+              }`
+            : "#"
         }`}
         target={activity.issue === null ? "_self" : "_blank"}
         rel={activity.issue === null ? "" : "noopener noreferrer"}
@@ -63,7 +61,9 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
 
   return (
     <a
-      href={`/${workspaceSlug}/profile/${activity.new_identifier ?? activity.old_identifier}`}
+      href={`/${workspaceSlug ?? activity.workspace_detail?.slug}/profile/${
+        activity.new_identifier ?? activity.old_identifier
+      }`}
       target="_blank"
       rel="noopener noreferrer"
       className="font-medium text-custom-text-100 inline-flex items-center hover:underline"
@@ -73,25 +73,27 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
   );
 };
 
-const LabelPill = ({ labelId }: { labelId: string }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
+const LabelPill = observer(({ labelId, workspaceSlug }: { labelId: string; workspaceSlug: string }) => {
+  const {
+    workspace: { labels, fetchWorkspaceLabels },
+  } = useMobxStore();
 
-  const { data: labels } = useSWR(
-    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString()) : null
-  );
+  const workspaceLabels = labels[workspaceSlug];
+
+  useEffect(() => {
+    if (!workspaceLabels) fetchWorkspaceLabels(workspaceSlug);
+  }, [fetchWorkspaceLabels, workspaceLabels, workspaceSlug]);
 
   return (
     <span
       className="h-1.5 w-1.5 rounded-full flex-shrink-0"
       style={{
-        backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000",
+        backgroundColor: workspaceLabels?.find((l) => l.id === labelId)?.color ?? "#000000",
       }}
       aria-hidden="true"
     />
   );
-};
+});
 
 const EstimatePoint = ({ point }: { point: string }) => {
   const { estimateValue, isEstimateActive } = useEstimateOption(Number(point));
@@ -243,24 +245,6 @@ const activityDetails: {
     },
     icon: <CopyPlus size={12} color="#6b7280" />,
   },
-  relates_to: {
-    message: (activity) => {
-      if (activity.old_value === "")
-        return (
-          <>
-            marked that this issue relates to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
-          </>
-        );
-      else
-        return (
-          <>
-            removed the relation from <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
-          </>
-        );
-    },
-    icon: <RelatedIcon height="12" width="12" color="#6b7280" />,
-  },
   cycles: {
     message: (activity, showIssue, workspaceSlug) => {
       if (activity.verb === "created")
@@ -365,13 +349,13 @@ const activityDetails: {
     icon: <LayersIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
   },
   labels: {
-    message: (activity, showIssue) => {
+    message: (activity, showIssue, workspaceSlug) => {
       if (activity.old_value === "")
         return (
           <>
             added a new label{" "}
-            <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="flex truncate items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs w-min whitespace-nowrap">
+              <LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} />
               <span className="font-medium flex-shrink truncate text-custom-text-100">{activity.new_value}</span>
             </span>
             {showIssue && (
@@ -387,7 +371,7 @@ const activityDetails: {
           <>
             removed the label{" "}
             <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 ?? ""} />
+              <LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} />
               <span className="font-medium flex-shrink truncate text-custom-text-100">{activity.old_value}</span>
             </span>
             {showIssue && (
@@ -586,6 +570,24 @@ const activityDetails: {
     ),
     icon: <SignalMediumIcon size={12} color="#6b7280" aria-hidden="true" />,
   },
+  relates_to: {
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked that this issue relates to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the relation from <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <RelatedIcon height="12" width="12" color="#6b7280" />,
+  },
   start_date: {
     message: (activity, showIssue) => {
       if (!activity.new_value)
@@ -675,7 +677,12 @@ export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
   <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
 );
 
-export const ActivityMessage = ({ activity, showIssue = false }: { activity: IIssueActivity; showIssue?: boolean }) => {
+type ActivityMessageProps = {
+  activity: IIssueActivity;
+  showIssue?: boolean;
+};
+
+export const ActivityMessage = ({ activity, showIssue = false }: ActivityMessageProps) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -684,7 +691,7 @@ export const ActivityMessage = ({ activity, showIssue = false }: { activity: IIs
       {activityDetails[activity.field as keyof typeof activityDetails]?.message(
         activity,
         showIssue,
-        workspaceSlug?.toString() ?? ""
+        workspaceSlug ? workspaceSlug.toString() : activity.workspace_detail?.slug ?? ""
       )}
     </>
   );