[WEB-5139] fix: custom menu item link (#7959)

* fix: custom menu link action * chore: code refactor * chore: code refactor
2025-10-14 15:45:49 +05:30 · 2025-10-14 15:45:49 +05:30 · 9dc14d8d67
commit 9dc14d8d67
parent 56007e7d47
6 changed files with 59 additions and 93 deletions
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@ -3,8 +3,7 @@
 // ui
 import { FC } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { ChevronDown, PanelRight } from "lucide-react";
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@ -29,6 +28,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
  const { userProjectsData, type = undefined, showProfileIssuesFilter } = props;
  // router
  const { workspaceSlug, userId } = useParams();
+  const router = useRouter();
  // store hooks
  const { toggleProfileSidebar, profileSidebarCollapsed } = useAppTheme();
  const { data: currentUser } = useUser();
@ -83,14 +83,12 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
          >
            <></>
            {tabsList.map((tab) => (
-              <CustomMenu.MenuItem className="flex items-center gap-2" key={tab.route}>
-                <Link
-                  key={tab.route}
-                  href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}
-                  className="w-full text-custom-text-300"
-                >
-                  {t(tab.i18n_label)}
-                </Link>
+              <CustomMenu.MenuItem
+                className="flex items-center gap-2"
+                key={tab.route}
+                onClick={() => router.push(`/${workspaceSlug}/profile/${userId}/${tab.route}`)}
+              >
+                <span className="w-full text-custom-text-300">{t(tab.i18n_label)}</span>
              </CustomMenu.MenuItem>
            ))}
          </CustomMenu>
--- a/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
@ -2,7 +2,6 @@

 import { FC } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
 // ui
 import { CustomMenu } from "@plane/ui";
 // helpers
@ -42,8 +41,11 @@ export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = observer((pro

  return (
    <>
-      <CustomMenu.MenuItem key={issueDetail.id}>
-        <Link href={workItemLink} target="_blank" className="flex items-center gap-2 py-0.5">
+      <CustomMenu.MenuItem
+        key={issueDetail.id}
+        onClick={() => window.open(workItemLink, "_blank", "noopener,noreferrer")}
+      >
+        <div className="flex items-center gap-2 py-0.5">
          {issueDetail.project_id && projectDetails?.identifier && (
            <IssueIdentifier
              projectId={issueDetail.project_id}
@ -53,7 +55,7 @@ export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = observer((pro
              textContainerClassName="text-xs"
            />
          )}
-        </Link>
+        </div>
      </CustomMenu.MenuItem>
    </>
  );
--- a/apps/web/core/components/workspace/sidebar/help-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-menu.tsx
@ -65,15 +65,13 @@ export const HelpMenu: React.FC<WorkspaceHelpSectionProps> = observer(() => {
          maxHeight="lg"
          closeOnSelect
        >
-          <CustomMenu.MenuItem>
-            <a
-              href="https://go.plane.so/p-docs"
-              target="_blank"
-              className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
-            >
+          <CustomMenu.MenuItem
+            onClick={() => window.open("https://go.plane.so/p-docs", "_blank", "noopener,noreferrer")}
+          >
+            <div className="flex items-center gap-x-2 rounded text-xs hover:bg-custom-background-80">
              <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
              <span className="text-xs">{t("documentation")}</span>
-            </a>
+            </div>
          </CustomMenu.MenuItem>
          {config?.intercom_app_id && config?.is_intercom_enabled && (
            <CustomMenu.MenuItem>
@ -87,15 +85,11 @@ export const HelpMenu: React.FC<WorkspaceHelpSectionProps> = observer(() => {
              </button>
            </CustomMenu.MenuItem>
          )}
-          <CustomMenu.MenuItem>
-            <a
-              href="mailto:sales@plane.so"
-              target="_blank"
-              className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
-            >
+          <CustomMenu.MenuItem onClick={() => window.open("mailto:sales@plane.so", "_blank", "noopener,noreferrer")}>
+            <div className="flex items-center gap-x-2 rounded text-xs hover:bg-custom-background-80">
              <User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
              <span className="text-xs">{t("contact_sales")}</span>
-            </a>
+            </div>
          </CustomMenu.MenuItem>
          <div className="my-1 border-t border-custom-border-200" />
          <CustomMenu.MenuItem>
@ -116,14 +110,12 @@ export const HelpMenu: React.FC<WorkspaceHelpSectionProps> = observer(() => {
              <span className="text-xs">{t("whats_new")}</span>
            </button>
          </CustomMenu.MenuItem>
-          <CustomMenu.MenuItem>
-            <a
-              href="https://go.plane.so/p-discord"
-              target="_blank"
-              className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
-            >
+          <CustomMenu.MenuItem
+            onClick={() => window.open("https://go.plane.so/p-discord", "_blank", "noopener,noreferrer")}
+          >
+            <div className="flex items-center gap-x-2 rounded text-xs hover:bg-custom-background-80">
              <span className="text-xs">Discord</span>
-            </a>
+            </div>
          </CustomMenu.MenuItem>
          <div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
            <PlaneVersionNumber />
--- a/apps/web/core/components/workspace/sidebar/help-section.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-section.tsx
@ -68,15 +68,11 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
            maxHeight="lg"
            closeOnSelect
          >
-            <CustomMenu.MenuItem>
-              <a
-                href="https://go.plane.so/p-docs"
-                target="_blank"
-                className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
-              >
+            <CustomMenu.MenuItem onClick={() => window.open("https://go.plane.so/p-docs", "_blank")}>
+              <div className="flex items-center gap-x-2 rounded text-xs">
                <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
                <span className="text-xs">{t("documentation")}</span>
-              </a>
+              </div>
            </CustomMenu.MenuItem>
            {config?.intercom_app_id && config?.is_intercom_enabled && (
              <CustomMenu.MenuItem>
@ -90,15 +86,11 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                </button>
              </CustomMenu.MenuItem>
            )}
-            <CustomMenu.MenuItem>
-              <a
-                href="mailto:sales@plane.so"
-                target="_blank"
-                className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
-              >
+            <CustomMenu.MenuItem onClick={() => window.open("mailto:sales@plane.so", "_blank")}>
+              <div className="flex items-center gap-x-2 rounded text-xs">
                <User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
                <span className="text-xs">{t("contact_sales")}</span>
-              </a>
+              </div>
            </CustomMenu.MenuItem>
            <div className="my-1 border-t border-custom-border-200" />
            <CustomMenu.MenuItem>
@ -119,14 +111,10 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                <span className="text-xs">{t("whats_new")}</span>
              </button>
            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem>
-              <a
-                href="https://go.plane.so/p-discord"
-                target="_blank"
-                className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
-              >
+            <CustomMenu.MenuItem onClick={() => window.open("https://go.plane.so/p-discord", "_blank")}>
+              <div className="flex items-center gap-x-2 rounded text-xs">
                <span className="text-xs">Discord</span>
-              </a>
+              </div>
            </CustomMenu.MenuItem>
            <div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
              <PlaneVersionNumber />
--- a/apps/web/core/components/workspace/sidebar/help-section/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
@ -52,15 +52,11 @@ export const HelpMenuRoot = observer(() => {
        maxHeight="lg"
        closeOnSelect
      >
-        <CustomMenu.MenuItem>
-          <a
-            href="https://go.plane.so/p-docs"
-            target="_blank"
-            className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
-          >
+        <CustomMenu.MenuItem onClick={() => window.open("https://go.plane.so/p-docs", "_blank")}>
+          <div className="flex items-center gap-x-2 rounded text-xs">
            <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
            <span className="text-xs">{t("documentation")}</span>
-          </a>
+          </div>
        </CustomMenu.MenuItem>
        {config?.intercom_app_id && config?.is_intercom_enabled && (
          <CustomMenu.MenuItem>
@ -74,15 +70,11 @@ export const HelpMenuRoot = observer(() => {
            </button>
          </CustomMenu.MenuItem>
        )}
-        <CustomMenu.MenuItem>
-          <a
-            href="mailto:sales@plane.so"
-            target="_blank"
-            className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
-          >
+        <CustomMenu.MenuItem onClick={() => window.open("mailto:sales@plane.so", "_blank")}>
+          <div className="flex items-center gap-x-2 rounded text-xs">
            <User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
            <span className="text-xs">{t("contact_sales")}</span>
-          </a>
+          </div>
        </CustomMenu.MenuItem>
        <div className="my-1 border-t border-custom-border-200" />
        <CustomMenu.MenuItem>
@ -103,14 +95,12 @@ export const HelpMenuRoot = observer(() => {
            <span className="text-xs">{t("whats_new")}</span>
          </button>
        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem>
-          <a
-            href="https://go.plane.so/p-discord"
-            target="_blank"
-            className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
-          >
+        <CustomMenu.MenuItem
+          onClick={() => window.open("https://go.plane.so/p-discord", "_blank", "noopener,noreferrer")}
+        >
+          <div className="flex items-center gap-x-2 rounded text-xs">
            <span className="text-xs">Discord</span>
-          </a>
+          </div>
        </CustomMenu.MenuItem>
        <div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
          <PlaneVersionNumber />
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@ -1,7 +1,6 @@
 import { FC, useState, useRef } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { MoreHorizontal, ArchiveIcon, ChevronRight, Settings } from "lucide-react";
 import { Disclosure } from "@headlessui/react";
 // plane imports
@ -27,6 +26,7 @@ export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = o
  const actionSectionRef = useRef<HTMLDivElement | null>(null);
  // hooks
  const { workspaceSlug } = useParams();
+  const router = useRouter();
  const { allowPermissions } = useUserPermissions();
  const { t } = useTranslation();

@ -66,23 +66,19 @@ export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = o
        customButtonClassName="grid place-items-center"
        placement="bottom-start"
      >
-        <CustomMenu.MenuItem>
-          <Link href={`/${workspaceSlug}/projects/archives`}>
-            <div className="flex items-center justify-start gap-2">
-              <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-              <span>{t("archives")}</span>
-            </div>
-          </Link>
+        <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/projects/archives`)}>
+          <div className="flex items-center justify-start gap-2">
+            <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+            <span>{t("archives")}</span>
+          </div>
        </CustomMenu.MenuItem>

        {isAdmin && (
-          <CustomMenu.MenuItem>
-            <Link href={`/${workspaceSlug}/settings`}>
-              <div className="flex items-center justify-start gap-2">
-                <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
-                <span>{t("settings")}</span>
-              </div>
-            </Link>
+          <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings`)}>
+            <div className="flex items-center justify-start gap-2">
+              <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
+              <span>{t("settings")}</span>
+            </div>
          </CustomMenu.MenuItem>
        )}
      </CustomMenu>