Merge pull request #479 from makeplane/sync/ce-ee

sync: community changes

packages/ui/src/toast/index.tsx

@@ -25,13 +25,16 @@ type SetToastProps =
       type: Exclude<TOAST_TYPE, TOAST_TYPE.LOADING>;
       title: string;
       message?: string;
+      actionItems?: React.ReactNode;
     };
 
 type PromiseToastCallback<ToastData> = (data: ToastData) => string;
+type ActionItemsPromiseToastCallback<ToastData> = (data: ToastData) => JSX.Element;
 
 type PromiseToastData<ToastData> = {
   title: string;
   message?: PromiseToastCallback<ToastData>;
+  actionItems?: ActionItemsPromiseToastCallback<ToastData>;
 };
 
 type PromiseToastOptions<ToastData> = {
@@ -54,7 +57,7 @@ type ToastProps = {
 
 export const Toast = (props: ToastProps) => {
   const { theme } = props;
-  return <Toaster visibleToasts={5} gap={20} theme={theme} />;
+  return <Toaster visibleToasts={5} gap={16} theme={theme} />;
 };
 
 export const setToast = (props: SetToastProps) => {
@@ -66,29 +69,27 @@ export const setToast = (props: SetToastProps) => {
     borderColorClassName,
   }: ToastContentProps) =>
     props.type === TOAST_TYPE.LOADING ? (
-      <div
-        onMouseDown={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-        }}
-        className={cn(
-          "w-[350px] h-[67.3px] rounded-lg border shadow-sm p-2",
-          backgroundColorClassName,
-          borderColorClassName
-        )}
-      >
-        <div className="w-full h-full flex items-center justify-center px-4 py-2">
-          {icon && <div className="flex items-center justify-center">{icon}</div>}
-          <div className={cn("w-full flex items-center gap-0.5 pr-1", icon ? "pl-4" : "pl-1")}>
-            <div className={cn("grow text-sm font-semibold", textColorClassName)}>{props.title ?? "Loading..."}</div>
-            <div className="flex-shrink-0">
-              <X
-                className="text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
-                strokeWidth={1.5}
-                width={14}
-                height={14}
-                onClick={() => toast.dismiss(toastId)}
-              />
+      <div className="flex items-center h-[98px] w-[350px]">
+        <div
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+          className={cn("w-full rounded-lg border shadow-sm p-2", backgroundColorClassName, borderColorClassName)}
+        >
+          <div className="w-full h-full flex items-center justify-center px-4 py-2">
+            {icon && <div className="flex items-center justify-center">{icon}</div>}
+            <div className={cn("w-full flex items-center gap-0.5 pr-1", icon ? "pl-4" : "pl-1")}>
+              <div className={cn("grow text-sm font-semibold", textColorClassName)}>{props.title ?? "Loading..."}</div>
+              <div className="flex-shrink-0">
+                <X
+                  className="text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
+                  strokeWidth={1.5}
+                  width={14}
+                  height={14}
+                  onClick={() => toast.dismiss(toastId)}
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -100,7 +101,7 @@ export const setToast = (props: SetToastProps) => {
           e.preventDefault();
         }}
         className={cn(
-          "relative flex flex-col w-[350px] rounded-lg border shadow-sm p-2",
+          "relative group flex flex-col w-[350px] rounded-lg border shadow-sm p-2",
           backgroundColorClassName,
           borderColorClassName
         )}
@@ -112,12 +113,15 @@ export const setToast = (props: SetToastProps) => {
           height={14}
           onClick={() => toast.dismiss(toastId)}
         />
-        <div className="w-full flex items-center px-4 py-2">
-          {icon && <div className="flex items-center justify-center">{icon}</div>}
-          <div className={cn("flex flex-col gap-0.5 pr-1", icon ? "pl-6" : "pl-1")}>
-            <div className={cn("text-sm font-semibold", textColorClassName)}>{props.title}</div>
-            {props.message && <div className="text-toast-text-secondary text-xs font-medium">{props.message}</div>}
+        <div className="w-full flex flex-col gap-2 p-2">
+          <div className="flex items-center w-full">
+            {icon && <div className="flex items-center justify-center">{icon}</div>}
+            <div className={cn("flex flex-col gap-0.5 pr-1", icon ? "pl-4" : "pl-1")}>
+              <div className={cn("text-sm font-semibold", textColorClassName)}>{props.title}</div>
+              {props.message && <div className="text-toast-text-secondary text-xs font-medium">{props.message}</div>}
+            </div>
           </div>
+          {props.actionItems && <div className="flex items-center pl-[32px]">{props.actionItems}</div>}
         </div>
       </div>
     );
@@ -128,7 +132,7 @@ export const setToast = (props: SetToastProps) => {
         (toastId) =>
           renderToastContent({
             toastId,
-            icon: <CheckCircle2 width={28} height={28} strokeWidth={1.5} className="text-toast-text-success" />,
+            icon: <CheckCircle2 width={24} height={24} strokeWidth={1.5} className="text-toast-text-success" />,
             textColorClassName: "text-toast-text-success",
             backgroundColorClassName: "bg-toast-background-success",
             borderColorClassName: "border-toast-border-success",
@@ -140,7 +144,7 @@ export const setToast = (props: SetToastProps) => {
         (toastId) =>
           renderToastContent({
             toastId,
-            icon: <XCircle width={28} height={28} strokeWidth={1.5} className="text-toast-text-error" />,
+            icon: <XCircle width={24} height={24} strokeWidth={1.5} className="text-toast-text-error" />,
             textColorClassName: "text-toast-text-error",
             backgroundColorClassName: "bg-toast-background-error",
             borderColorClassName: "border-toast-border-error",
@@ -152,7 +156,7 @@ export const setToast = (props: SetToastProps) => {
         (toastId) =>
           renderToastContent({
             toastId,
-            icon: <AlertTriangle width={28} height={28} strokeWidth={1.5} className="text-toast-text-warning" />,
+            icon: <AlertTriangle width={24} height={24} strokeWidth={1.5} className="text-toast-text-warning" />,
             textColorClassName: "text-toast-text-warning",
             backgroundColorClassName: "bg-toast-background-warning",
             borderColorClassName: "border-toast-border-warning",
@@ -197,6 +201,7 @@ export const setPromiseToast = <ToastData,>(
         id: tId,
         title: options.success.title,
         message: options.success.message?.(data),
+        actionItems: options.success.actionItems?.(data),
       });
     })
     .catch((data: ToastData) => {
@@ -205,6 +210,7 @@ export const setPromiseToast = <ToastData,>(
         id: tId,
         title: options.error.title,
         message: options.error.message?.(data),
+        actionItems: options.error.actionItems?.(data),
       });
     });
 };

web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx

@@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
 // ui
 import { Button } from "@plane/ui";
 // components
+import { PageHead } from "@/components/core";
 import { DownloadActivityButton, WorkspaceActivityListPage } from "@/components/profile";
 // constants
 import { EUserWorkspaceRoles } from "@/constants/workspace";
@@ -50,22 +51,25 @@ const ProfileActivityPage = observer(() => {
     currentUser?.id === userId && !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden py-5">
-      <div className="flex items-center justify-between gap-2 px-5 md:px-9">
-        <h3 className="text-lg font-medium">Recent activity</h3>
-        {canDownloadActivity && <DownloadActivityButton />}
+    <>
+      <PageHead title="Profile - Activity" />
+      <div className="flex h-full w-full flex-col overflow-hidden py-5">
+        <div className="flex items-center justify-between gap-2 px-5 md:px-9">
+          <h3 className="text-lg font-medium">Recent activity</h3>
+          {canDownloadActivity && <DownloadActivityButton />}
+        </div>
+        <div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
+          {activityPages}
+          {pageCount < totalPages && resultsCount !== 0 && (
+            <div className="flex w-full items-center justify-center text-xs">
+              <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+                Load more
+              </Button>
+            </div>
+          )}
+        </div>
       </div>
-      <div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
-        {activityPages}
-        {pageCount < totalPages && resultsCount !== 0 && (
-          <div className="flex w-full items-center justify-center text-xs">
-            <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
-              Load more
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
+    </>
   );
 });
 

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx

@@ -7,7 +7,7 @@ import { ProjectArchivesHeader } from "../header";
 export default function ProjectArchiveCyclesLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <AppHeader header={<ProjectArchivesHeader />} />
+      <AppHeader header={<ProjectArchivesHeader activeTab="cycles" />} />
       <ContentWrapper>{children}</ContentWrapper>
     </>
   );

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx

@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 // ui
 import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui";
 // components
@@ -15,12 +15,15 @@ import { useIssues, useProject } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
-export const ProjectArchivesHeader: FC = observer(() => {
+type TProps = {
+  activeTab: 'issues' | 'cycles' | 'modules';
+}
+
+export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
+  const { activeTab } = props;
   // router
   const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
-  const pathname = usePathname();
-  const activeTab = pathname.split("/").pop();
   // store hooks
   const {
     issuesFilter: { issueFilters },

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx

@@ -7,7 +7,7 @@ import { ProjectArchivesHeader } from "../../header";
 export default function ProjectArchiveIssuesLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <AppHeader header={<ProjectArchivesHeader />} />
+      <AppHeader header={<ProjectArchivesHeader activeTab="issues" />} />
       <ContentWrapper>{children}</ContentWrapper>
     </>
   );

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx

@@ -7,7 +7,7 @@ import { ProjectArchivesHeader } from "../header";
 export default function ProjectArchiveModulesLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <AppHeader header={<ProjectArchivesHeader />} />
+      <AppHeader header={<ProjectArchivesHeader activeTab="modules" />} />
       <ContentWrapper>{children}</ContentWrapper>
     </>
   );

web/app/onboarding/page.tsx

@@ -14,7 +14,7 @@ import { USER_WORKSPACES_LIST } from "@/constants/fetch-keys";
 // helpers
 import { EPageTypes } from "@/helpers/authentication.helper";
 // hooks
-import { useUser, useWorkspace, useUserProfile, useEventTracker } from "@/hooks/store";
+import { useUser, useWorkspace, useUserProfile, useEventTracker, useUserSettings } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers";
@@ -39,6 +39,7 @@ const OnboardingPage = observer(() => {
   const { captureEvent } = useEventTracker();
   const { isLoading: userLoader, data: user, updateCurrentUser } = useUser();
   const { data: profile, updateUserOnBoard, updateUserProfile } = useUserProfile();
+  const { data: currentUserSettings } = useUserSettings();
   const { workspaces, fetchWorkspaces } = useWorkspace();
 
   // computed values
@@ -65,6 +66,27 @@ const OnboardingPage = observer(() => {
     await updateUserProfile(payload);
   };
 
+  const getWorkspaceRedirectionUrl = (): string => {
+    let redirectionRoute = "/profile";
+
+    // validate the last and fallback workspace_slug
+    const currentWorkspaceSlug =
+      currentUserSettings?.workspace?.last_workspace_slug ||
+      currentUserSettings?.workspace?.fallback_workspace_slug ||
+      undefined;
+
+    if (currentWorkspaceSlug) {
+      const isCurrentWorkspaceValid = Object.values(workspaces || {}).findIndex(
+        (workspace) => workspace.slug === currentWorkspaceSlug
+      );
+      if (isCurrentWorkspaceValid >= 0) {
+        redirectionRoute = `/${currentWorkspaceSlug}`;
+      }
+    }
+
+    return redirectionRoute;
+  };
+
   // complete onboarding
   const finishOnboarding = async () => {
     if (!user || !workspaces) return;
@@ -95,7 +117,7 @@ const OnboardingPage = observer(() => {
         console.log("Failed to update onboarding status");
       });
 
-    router.replace(`/${firstWorkspace?.slug}`);
+    router.replace(`${getWorkspaceRedirectionUrl()}`);
   };
 
   useEffect(() => {

web/app/profile/appearance/page.tsx

@@ -49,7 +49,7 @@ const ProfileAppearancePage = observer(() => {
 
   return (
     <>
-      <PageHead title="Profile - Theme Prefrence" />
+      <PageHead title="Profile - Appearance" />
       {userProfile ? (
         <ProfileSettingContentWrapper>
           <ProfileSettingContentHeader title="Appearance" />

web/app/profile/notifications/page.tsx

@@ -23,7 +23,7 @@ export default function ProfileNotificationPage() {
 
   return (
     <>
-      <PageHead title="Profile - Email Preference" />
+      <PageHead title="Profile - Notifications" />
       <ProfileSettingContentWrapper>
         <ProfileSettingContentHeader
           title="Email notifications"

web/app/profile/page.tsx

@@ -222,7 +222,7 @@ const ProfileSettingsPage = observer(() => {
             </Link> */}
             </div>
 
-            <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3">
+            <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3 pb-8">
               <div className="flex flex-col gap-1">
                 <h4 className="text-sm">
                   First name<span className="text-red-500">*</span>

web/app/profile/security/page.tsx

@@ -130,7 +130,7 @@ const SecurityPage = observer(() => {
 
   return (
     <>
-      <PageHead title="Profile - Change Password" />
+      <PageHead title="Profile - Security" />
       <ProfileSettingContentWrapper>
         <ProfileSettingContentHeader title="Change password" />
         <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 py-6">

web/core/components/estimates/root.tsx

@@ -82,7 +82,11 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
                 <p className="text-sm text-custom-text-200">
                   Estimates have gone through a change, these are the estimates you had in your older versions which
                   were not in use. Read more about them&nbsp;
-                  <a href={"#"} target="_blank" className="text-custom-primary-100/80 hover:text-custom-primary-100">
+                  <a
+                    href={"https://docs.plane.so/core-concepts/projects/run-project#estimate"}
+                    target="_blank"
+                    className="text-custom-primary-100/80 hover:text-custom-primary-100"
+                  >
                     here.
                   </a>
                 </p>

web/core/components/issues/create-issue-toast-action-items.tsx

@@ -0,0 +1,70 @@
+"use client";
+import React, { FC, useState } from "react";
+import { observer } from "mobx-react";
+// helpers
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useIssueDetail } from "@/hooks/store";
+
+type TCreateIssueToastActionItems = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+};
+
+export const CreateIssueToastActionItems: FC<TCreateIssueToastActionItems> = observer((props) => {
+  const { workspaceSlug, projectId, issueId } = props;
+  // state
+  const [copied, setCopied] = useState(false);
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+
+  // derived values
+  const issue = getIssueById(issueId);
+
+  if (!issue) return null;
+
+  const issueLink = `${workspaceSlug}/projects/${projectId}/issues/${issueId}`;
+
+  const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    try {
+      await copyUrlToClipboard(issueLink);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 3000);
+    } catch (error) {
+      setCopied(false);
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  return (
+    <div className="flex items-center gap-1 text-xs text-custom-text-200">
+      <a
+        href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-custom-primary px-2 py-1 hover:bg-custom-background-90 font-medium rounded"
+      >
+        View issue
+      </a>
+
+      {copied ? (
+        <>
+          <span className="cursor-default px-2 py-1 text-custom-text-200">Copied!</span>
+        </>
+      ) : (
+        <>
+          <button
+            className="cursor-pointer hidden group-hover:flex px-2 py-1 text-custom-text-300 hover:text-custom-text-200 hover:bg-custom-background-90 rounded"
+            onClick={copyToClipboard}
+          >
+            Copy link
+          </button>
+        </>
+      )}
+    </div>
+  );
+});

web/core/components/issues/index.ts

@@ -9,6 +9,7 @@ export * from "./parent-issues-list-modal";
 export * from "./label";
 export * from "./confirm-issue-discard";
 export * from "./issue-update-status";
+export * from "./create-issue-toast-action-items";
 
 // issue details
 export * from "./issue-detail";

web/core/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx

@@ -12,6 +12,7 @@ import { ISearchIssueResponse, TIssue } from "@plane/types";
 import { TOAST_TYPE, setPromiseToast, setToast, CustomMenu } from "@plane/ui";
 // components
 import { ExistingIssuesListModal } from "@/components/core";
+import { CreateIssueToastActionItems } from "@/components/issues";
 // constants
 import { ISSUE_CREATED } from "@/constants/event-tracker";
 // helpers
@@ -135,6 +136,13 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
         success: {
           title: "Success!",
           message: () => "Issue created successfully.",
+          actionItems: (data) => (
+            <CreateIssueToastActionItems
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              issueId={data.id}
+            />
+          ),
         },
         error: {
           title: "Error!",

web/core/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx

@@ -8,6 +8,7 @@ import { PlusIcon } from "lucide-react";
 import { IProject, TIssue } from "@plane/types";
 // hooks
 import { setPromiseToast } from "@plane/ui";
+import { CreateIssueToastActionItems } from "@/components/issues";
 import { ISSUE_CREATED } from "@/constants/event-tracker";
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
@@ -113,6 +114,13 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
         success: {
           title: "Success!",
           message: () => "Issue created successfully.",
+          actionItems: (data) => (
+            <CreateIssueToastActionItems
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              issueId={data.id}
+            />
+          ),
         },
         error: {
           title: "Error!",

web/core/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx

@@ -8,6 +8,7 @@ import { PlusIcon } from "lucide-react";
 import { TIssue } from "@plane/types";
 // hooks
 import { setPromiseToast } from "@plane/ui";
+import { CreateIssueToastActionItems } from "@/components/issues";
 import { ISSUE_CREATED } from "@/constants/event-tracker";
 import { createIssuePayload } from "@/helpers/issue.helper";
 import { useEventTracker, useProject } from "@/hooks/store";
@@ -102,6 +103,13 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
         success: {
           title: "Success!",
           message: () => "Issue created successfully.",
+          actionItems: (data) => (
+            <CreateIssueToastActionItems
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              issueId={data.id}
+            />
+          ),
         },
         error: {
           title: "Error!",

web/core/components/issues/issue-layouts/list/quick-add-issue-form.tsx

@@ -8,6 +8,7 @@ import { PlusIcon } from "lucide-react";
 import { TIssue, IProject } from "@plane/types";
 // hooks
 import { setPromiseToast } from "@plane/ui";
+import { CreateIssueToastActionItems } from "@/components/issues";
 import { ISSUE_CREATED } from "@/constants/event-tracker";
 import { createIssuePayload } from "@/helpers/issue.helper";
 import { useEventTracker, useProject } from "@/hooks/store";
@@ -104,6 +105,13 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
         success: {
           title: "Success!",
           message: () => "Issue created successfully.",
+          actionItems: (data) => (
+            <CreateIssueToastActionItems
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              issueId={data.id}
+            />
+          ),
         },
         error: {
           title: "Error!",

web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx

@@ -81,6 +81,11 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
     },
   ];
 
+  // check if any of the menu items should render
+  const shouldRenderQuickAction = MENU_ITEMS.some((item) => item.shouldRender);
+
+  if (!shouldRenderQuickAction) return <></>;
+
   return (
     <>
       <DeleteIssueModal

web/core/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx

@@ -8,6 +8,7 @@ import { PlusIcon } from "lucide-react";
 import { TIssue } from "@plane/types";
 // hooks
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+import { CreateIssueToastActionItems } from "@/components/issues";
 import { ISSUE_CREATED } from "@/constants/event-tracker";
 import { createIssuePayload } from "@/helpers/issue.helper";
 import { useEventTracker, useProject, useWorkspace } from "@/hooks/store";
@@ -162,6 +163,13 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
         success: {
           title: "Success!",
           message: () => "Issue created successfully.",
+          actionItems: (data) => (
+            <CreateIssueToastActionItems
+              workspaceSlug={currentWorkspace.slug}
+              projectId={currentProjectDetails.id}
+              issueId={data.id}
+            />
+          ),
         },
         error: {
           title: "Error!",

web/core/components/issues/issue-modal/modal.tsx

@@ -7,6 +7,7 @@ import { useParams, usePathname } from "next/navigation";
 import type { TIssue } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
+import { CreateIssueToastActionItems } from "@/components/issues";
 // constants
 import { ISSUE_CREATED, ISSUE_UPDATED } from "@/constants/event-tracker";
 import { EIssuesStoreType } from "@/constants/issue";
@@ -189,6 +190,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
         message: `${is_draft_issue ? "Draft issue" : "Issue"} created successfully.`,
+        actionItems: !is_draft_issue && (
+          <CreateIssueToastActionItems
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            issueId={response.id}
+          />
+        ),
       });
       captureIssueEvent({
         eventName: ISSUE_CREATED,

web/core/components/notifications/notification-card.tsx

@@ -8,7 +8,6 @@ import { ArchiveRestore, Clock, MessageSquare, MoreVertical, User2 } from "lucid
 import { Menu } from "@headlessui/react";
 // type
 import type { IUserNotification, NotificationType } from "@plane/types";
-// ui
 import { ArchiveIcon, CustomMenu, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import {
@@ -20,6 +19,7 @@ import {
 import { snoozeOptions } from "@/constants/notification";
 // helper
 import { calculateTimeAgo, renderFormattedTime, renderFormattedDate, getDate } from "@/helpers/date-time.helper";
+import { sanitizeCommentForNotification } from "@/helpers/notification.helper";
 import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "@/helpers/string.helper";
 // hooks
 import { useEventTracker } from "@/hooks/store";
@@ -206,11 +206,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                     )
                   ) : (
                     <span>
-                      {`"`}
-                      {notification.data.issue_activity.new_value.length > 55
-                        ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
-                        : notification.data.issue_activity.issue_comment}
-                      {`"`}
+                      {sanitizeCommentForNotification(notification.data.issue_activity.new_value ?? undefined)}
                     </span>
                   )
                 ) : (

web/core/components/onboarding/create-workspace.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // types
 import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
@@ -10,7 +11,7 @@ import { Button, CustomSelect, Input, Spinner, TOAST_TYPE, setToast } from "@pla
 import { E_ONBOARDING, WORKSPACE_CREATED } from "@/constants/event-tracker";
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@/constants/workspace";
 // hooks
-import { useEventTracker, useUserProfile, useWorkspace } from "@/hooks/store";
+import { useEventTracker, useUserProfile, useUserSettings, useWorkspace } from "@/hooks/store";
 // services
 import { WorkspaceService } from "@/services/workspace.service";
 
@@ -24,15 +25,15 @@ type Props = {
 // services
 const workspaceService = new WorkspaceService();
 
-export const CreateWorkspace: React.FC<Props> = (props) => {
+export const CreateWorkspace: React.FC<Props> = observer((props) => {
   const { stepChange, user, invitedWorkspaces, handleCurrentViewChange } = props;
   // states
   const [slugError, setSlugError] = useState(false);
   const [invalidSlug, setInvalidSlug] = useState(false);
   // store hooks
   const { updateUserProfile } = useUserProfile();
-
-  const { createWorkspace, fetchWorkspaces, workspaces } = useWorkspace();
+  const { fetchCurrentUserSettings } = useUserSettings();
+  const { createWorkspace, fetchWorkspaces } = useWorkspace();
   const { captureWorkspaceEvent } = useEventTracker();
   // form info
   const {
@@ -59,7 +60,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
           setSlugError(false);
 
           await createWorkspace(formData)
-            .then(async (res) => {
+            .then(async (workspaceResponse) => {
               setToast({
                 type: TOAST_TYPE.SUCCESS,
                 title: "Success!",
@@ -68,14 +69,14 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
               captureWorkspaceEvent({
                 eventName: WORKSPACE_CREATED,
                 payload: {
-                  ...res,
+                  ...workspaceResponse,
                   state: "SUCCESS",
                   first_time: true,
                   element: E_ONBOARDING,
                 },
               });
               await fetchWorkspaces();
-              await completeStep();
+              await completeStep(workspaceResponse.id);
             })
             .catch(() => {
               captureWorkspaceEvent({
@@ -103,11 +104,8 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
       );
   };
 
-  const completeStep = async () => {
-    if (!user || !workspaces) return;
-
-    const firstWorkspace = Object.values(workspaces ?? {})?.[0];
-
+  const completeStep = async (workspaceId: string) => {
+    if (!user) return;
     const payload: Partial<TOnboardingSteps> = {
       workspace_create: true,
       workspace_join: true,
@@ -115,8 +113,9 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
 
     await stepChange(payload);
     await updateUserProfile({
-      last_workspace_id: firstWorkspace?.id,
+      last_workspace_id: workspaceId,
     });
+    await fetchCurrentUserSettings();
   };
 
   const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
@@ -286,4 +285,4 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
       </form>
     </div>
   );
-};
+});

web/helpers/notification.helper.ts

@@ -0,0 +1,8 @@
+import { stripAndTruncateHTML } from "./string.helper";
+
+export const sanitizeCommentForNotification = (mentionContent: string | undefined) =>
+  mentionContent
+    ? stripAndTruncateHTML(
+        mentionContent.replace(/<mention-component\b[^>]*\blabel="([^"]*)"[^>]*><\/mention-component>/g, "$1")
+      )
+    : mentionContent;