Web: Added support for opening in a new tab for settings, payment page and profile.

packages/client/src/store/ProfileActionsStore.js

@@ -24,7 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import CatalogSettingsReactSvgUrl from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
+import CatalogSettingsReactSvgUrl from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
 import HotkeysReactSvgUrl from "PUBLIC_DIR/images/hotkeys.react.svg?url";
 import ProfileReactSvgUrl from "PUBLIC_DIR/images/profile.react.svg?url";
 import PaymentsReactSvgUrl from "PUBLIC_DIR/images/payments.react.svg?url";
@@ -46,6 +46,7 @@ import { LIVE_CHAT_LOCAL_STORAGE_KEY } from "@docspace/shared/constants";
 import { toastr } from "@docspace/shared/components/toast";
 import { isDesktop, isTablet } from "@docspace/shared/utils";
 import TariffBar from "SRC_DIR/components/TariffBar";
+import { openingNewTab } from "@docspace/shared/utils/openingNewTab";
 
 const PROXY_HOMEPAGE_URL = combineUrl(window.DocSpaceConfig?.proxy?.url, "/");
 const PROFILE_SELF_URL = combineUrl(PROXY_HOMEPAGE_URL, "/profile");
@@ -57,7 +58,7 @@ const PAYMENTS_URL = combineUrl(
 );
 
 //const VIDEO_GUIDES_URL = "https://onlyoffice.com/";
-
+let profilePrefix;
 const SPACES_URL = combineUrl(PROXY_HOMEPAGE_URL, "/management");
 class ProfileActionsStore {
   authStore = null;
@@ -131,14 +132,14 @@ class ProfileActionsStore {
     return "manager";
   };
 
-  onProfileClick = () => {
+  onProfileClick = (obj) => {
     const { isAdmin, isOwner } = this.userStore.user;
     const { isRoomAdmin } = this.authStore;
 
+    const profileUrl = `${profilePrefix}${PROFILE_SELF_URL}`;
+    if (openingNewTab(profileUrl, obj.originalEvent)) return;
+
     this.profileClicked = true;
-    const prefix = window.DocSpace.location.pathname.includes("portal-settings")
-      ? "/portal-settings"
-      : "";
 
     if ((isAdmin || isOwner || isRoomAdmin) && !prefix) {
       this.selectedFolderStore.setSelectedFolder(null);
@@ -148,10 +149,12 @@ class ProfileActionsStore {
       fromUrl: `${window.DocSpace.location.pathname}${window.DocSpace.location.search}`,
     };
 
-    window.DocSpace.navigate(`${prefix}${PROFILE_SELF_URL}`, { state });
+    window.DocSpace.navigate(profileUrl, { state });
   };
 
-  onSettingsClick = (settingsUrl) => {
+  onSettingsClick = (settingsUrl, obj) => {
+    if (openingNewTab(settingsUrl, obj.originalEvent)) return;
+
     this.selectedFolderStore.setSelectedFolder(null);
     window.DocSpace.navigate(settingsUrl);
   };
@@ -161,7 +164,9 @@ class ProfileActionsStore {
     window.open(SPACES_URL, "_blank");
   };
 
-  onPaymentsClick = () => {
+  onPaymentsClick = (obj) => {
+    if (openingNewTab(PAYMENTS_URL, obj.originalEvent)) return;
+
     this.selectedFolderStore.setSelectedFolder(null);
     window.DocSpace.navigate(PAYMENTS_URL);
   };
@@ -257,7 +262,8 @@ class ProfileActionsStore {
           key: "user-menu-settings",
           icon: CatalogSettingsReactSvgUrl,
           label: t("Common:Settings"),
-          onClick: () => this.onSettingsClick(settingsUrl),
+          onClick: (obj) => this.onSettingsClick(settingsUrl, obj),
+          url: settingsUrl,
         }
       : null;
 
@@ -348,12 +354,19 @@ class ProfileActionsStore {
     const helpCenterEnabled =
       this.settingsStore.additionalResourcesData?.helpCenterEnabled;
 
+    profilePrefix = window.DocSpace.location.pathname.includes(
+      "portal-settings",
+    )
+      ? "/portal-settings"
+      : "";
+
     const actions = [
       {
         key: "user-menu-profile",
         icon: ProfileReactSvgUrl,
         label: t("Common:Profile"),
-        onClick: this.onProfileClick,
+        onClick: (obj) => this.onProfileClick(obj),
+        url: `${profilePrefix}${PROFILE_SELF_URL}`,
       },
       settings,
       management,
@@ -362,8 +375,9 @@ class ProfileActionsStore {
           key: "user-menu-payments",
           icon: PaymentsReactSvgUrl,
           label: t("Common:PaymentsTitle"),
-          onClick: this.onPaymentsClick,
+          onClick: (obj) => this.onPaymentsClick(obj),
           additionalElement: <TariffBar />,
+          url: PAYMENTS_URL,
         },
       {
         isSeparator: true,

packages/shared/components/article/Article.types.ts

@@ -53,7 +53,7 @@ export interface ArticleProfileProps {
   user?: TUser;
   showText: boolean;
   getActions?: (t: TTranslation) => ContextMenuModel[];
-  onProfileClick?: () => void;
+  onProfileClick?: (obj: { originalEvent: React.MouseEvent }) => void;
   currentDeviceType: DeviceType;
 }
 

packages/shared/components/article/sub-components/Profile.tsx

@@ -81,10 +81,14 @@ const ArticleProfile = (props: ArticleProfileProps) => {
     if (isTabletView && !showText) {
       toggle(e, !isOpen, menuRef);
     } else {
-      onProfileClick?.();
+      onProfileClick?.({ originalEvent: e });
     }
   };
 
+  const onNameClick = (e: React.MouseEvent) => {
+    onProfileClick?.({ originalEvent: e });
+  };
+
   const onHide = () => {
     setIsOpen(false);
   };
@@ -139,7 +143,7 @@ const ArticleProfile = (props: ArticleProfileProps) => {
         </div>
         {(!isTabletView || showText) && (
           <>
-            <StyledUserName onClick={onProfileClick}>
+            <StyledUserName onClick={onNameClick} onMouseDown={onNameClick}>
               <Text fontWeight={600} noSelect truncate dir="auto">
                 {firstTerm}
                 &nbsp;

packages/shared/components/avatar/Avatar.tsx

@@ -163,6 +163,7 @@ const AvatarPure = ({
       data-testid="avatar"
       className={className}
       onClick={onClick}
+      onMouseDown={onClick}
     >
       <AvatarWrapper
         source={source}

packages/shared/utils/openingNewTab.ts

@@ -27,7 +27,7 @@
 import { combineUrl } from "./combineUrl";
 
 export const openingNewTab = (url: string, e: React.MouseEvent) => {
-  if (e.ctrlKey || e.metaKey || e.button === 1) {
+  if (e?.ctrlKey || e?.metaKey || e?.button === 1) {
     const path = combineUrl(window.DocSpaceConfig?.proxy?.url, url);
 
     window.open(path, "_blank");