Experiment - Add 'Add Team Members' button to Avatar menu in SaaS mode (#12647)

Co-authored-by: openhands <openhands@all-hands.dev>

frontend/__tests__/components/context-menu/account-settings-context-menu.test.tsx

@@ -1,9 +1,27 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it, test, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, test, vi } from "vitest";
 import { AccountSettingsContextMenu } from "#/components/features/context-menu/account-settings-context-menu";
 import { MemoryRouter } from "react-router";
 import { renderWithProviders } from "../../../test-utils";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createMockWebClientConfig } from "../../helpers/mock-config";
+
+const mockTrackAddTeamMembersButtonClick = vi.fn();
+
+vi.mock("#/hooks/use-tracking", () => ({
+  useTracking: () => ({
+    trackAddTeamMembersButtonClick: mockTrackAddTeamMembersButtonClick,
+  }),
+}));
+
+// Mock posthog feature flag
+vi.mock("posthog-js/react", () => ({
+  useFeatureFlagEnabled: vi.fn(),
+}));
+
+// Import the mocked module to get access to the mock
+import * as posthog from "posthog-js/react";
 
 describe("AccountSettingsContextMenu", () => {
   const user = userEvent.setup();
@@ -11,15 +29,45 @@ describe("AccountSettingsContextMenu", () => {
   const onLogoutMock = vi.fn();
   const onCloseMock = vi.fn();
 
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    // Set default feature flag to false
+    vi.mocked(posthog.useFeatureFlagEnabled).mockReturnValue(false);
+  });
+
   // Create a wrapper with MemoryRouter and renderWithProviders
   const renderWithRouter = (ui: React.ReactElement) => {
     return renderWithProviders(<MemoryRouter>{ui}</MemoryRouter>);
   };
 
+  const renderWithSaasConfig = (ui: React.ReactElement) => {
+    queryClient.setQueryData(["web-client-config"], createMockWebClientConfig({ app_mode: "saas" }));
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>{ui}</MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  const renderWithOssConfig = (ui: React.ReactElement) => {
+    queryClient.setQueryData(["web-client-config"], createMockWebClientConfig({ app_mode: "oss" }));
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>{ui}</MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
   afterEach(() => {
     onClickAccountSettingsMock.mockClear();
     onLogoutMock.mockClear();
     onCloseMock.mockClear();
+    mockTrackAddTeamMembersButtonClick.mockClear();
+    vi.mocked(posthog.useFeatureFlagEnabled).mockClear();
   });
 
   it("should always render the right options", () => {
@@ -93,4 +141,59 @@ describe("AccountSettingsContextMenu", () => {
 
     expect(onCloseMock).toHaveBeenCalledOnce();
   });
+
+  it("should show Add Team Members button in SaaS mode when feature flag is enabled", () => {
+    vi.mocked(posthog.useFeatureFlagEnabled).mockReturnValue(true);
+    renderWithSaasConfig(
+      <AccountSettingsContextMenu
+        onLogout={onLogoutMock}
+        onClose={onCloseMock}
+      />,
+    );
+
+    expect(screen.getByTestId("add-team-members-button")).toBeInTheDocument();
+    expect(screen.getByText("SETTINGS$NAV_ADD_TEAM_MEMBERS")).toBeInTheDocument();
+  });
+
+  it("should not show Add Team Members button in SaaS mode when feature flag is disabled", () => {
+    vi.mocked(posthog.useFeatureFlagEnabled).mockReturnValue(false);
+    renderWithSaasConfig(
+      <AccountSettingsContextMenu
+        onLogout={onLogoutMock}
+        onClose={onCloseMock}
+      />,
+    );
+
+    expect(screen.queryByTestId("add-team-members-button")).not.toBeInTheDocument();
+    expect(screen.queryByText("SETTINGS$NAV_ADD_TEAM_MEMBERS")).not.toBeInTheDocument();
+  });
+
+  it("should not show Add Team Members button in OSS mode even when feature flag is enabled", () => {
+    vi.mocked(posthog.useFeatureFlagEnabled).mockReturnValue(true);
+    renderWithOssConfig(
+      <AccountSettingsContextMenu
+        onLogout={onLogoutMock}
+        onClose={onCloseMock}
+      />,
+    );
+
+    expect(screen.queryByTestId("add-team-members-button")).not.toBeInTheDocument();
+    expect(screen.queryByText("SETTINGS$NAV_ADD_TEAM_MEMBERS")).not.toBeInTheDocument();
+  });
+
+  it("should call tracking function and onClose when Add Team Members button is clicked", async () => {
+    vi.mocked(posthog.useFeatureFlagEnabled).mockReturnValue(true);
+    renderWithSaasConfig(
+      <AccountSettingsContextMenu
+        onLogout={onLogoutMock}
+        onClose={onCloseMock}
+      />,
+    );
+
+    const addTeamMembersButton = screen.getByTestId("add-team-members-button");
+    await user.click(addTeamMembersButton);
+
+    expect(mockTrackAddTeamMembersButtonClick).toHaveBeenCalledOnce();
+    expect(onCloseMock).toHaveBeenCalledOnce();
+  });
 });

frontend/src/components/features/context-menu/account-settings-context-menu.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+import { useFeatureFlagEnabled } from "posthog-js/react";
 import { ContextMenu } from "#/ui/context-menu";
 import { ContextMenuListItem } from "./context-menu-list-item";
 import { Divider } from "#/ui/divider";
@@ -8,7 +9,10 @@ import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
 import { I18nKey } from "#/i18n/declaration";
 import LogOutIcon from "#/icons/log-out.svg?react";
 import DocumentIcon from "#/icons/document.svg?react";
+import PlusIcon from "#/icons/plus.svg?react";
 import { useSettingsNavItems } from "#/hooks/use-settings-nav-items";
+import { useConfig } from "#/hooks/query/use-config";
+import { useTracking } from "#/hooks/use-tracking";
 
 interface AccountSettingsContextMenuProps {
   onLogout: () => void;
@@ -21,9 +25,17 @@ export function AccountSettingsContextMenu({
 }: AccountSettingsContextMenuProps) {
   const ref = useClickOutsideElement<HTMLUListElement>(onClose);
   const { t } = useTranslation();
+  const { trackAddTeamMembersButtonClick } = useTracking();
+  const { data: config } = useConfig();
+  const isAddTeamMemberEnabled = useFeatureFlagEnabled(
+    "exp_add_team_member_button",
+  );
   // Get navigation items and filter out LLM settings if the feature flag is enabled
   const items = useSettingsNavItems();
 
+  const isSaasMode = config?.app_mode === "saas";
+  const showAddTeamMembers = isSaasMode && isAddTeamMemberEnabled;
+
   const navItems = items.map((item) => ({
     ...item,
     icon: React.cloneElement(item.icon, {
@@ -33,6 +45,11 @@ export function AccountSettingsContextMenu({
   }));
   const handleNavigationClick = () => onClose();
 
+  const handleAddTeamMembers = () => {
+    trackAddTeamMembersButtonClick();
+    onClose();
+  };
+
   return (
     <ContextMenu
       testId="account-settings-context-menu"
@@ -40,6 +57,18 @@ export function AccountSettingsContextMenu({
       alignment="right"
       className="mt-0 md:right-full md:left-full md:bottom-0 ml-0 w-fit z-[9999]"
     >
+      {showAddTeamMembers && (
+        <ContextMenuListItem
+          testId="add-team-members-button"
+          onClick={handleAddTeamMembers}
+          className="flex items-center gap-2 p-2 hover:bg-[#5C5D62] rounded h-[30px]"
+        >
+          <PlusIcon width={16} height={16} />
+          <span className="text-white text-sm">
+            {t(I18nKey.SETTINGS$NAV_ADD_TEAM_MEMBERS)}
+          </span>
+        </ContextMenuListItem>
+      )}
       {navItems.map(({ to, text, icon }) => (
         <Link key={to} to={to} className="text-decoration-none">
           <ContextMenuListItem

frontend/src/hooks/use-tracking.ts

@@ -99,6 +99,12 @@ export const useTracking = () => {
     });
   };
 
+  const trackAddTeamMembersButtonClick = () => {
+    posthog.capture("exp_add_team_members", {
+      ...commonProperties,
+    });
+  };
+
   return {
     trackLoginButtonClick,
     trackConversationCreated,
@@ -109,5 +115,6 @@ export const useTracking = () => {
     trackUserSignupCompleted,
     trackCreditsPurchased,
     trackCreditLimitReached,
+    trackAddTeamMembersButtonClick,
   };
 };

frontend/src/i18n/declaration.ts

@@ -693,6 +693,7 @@ export enum I18nKey {
   TIPS$PROTIP = "TIPS$PROTIP",
   FEEDBACK$SUBMITTING_LABEL = "FEEDBACK$SUBMITTING_LABEL",
   FEEDBACK$SUBMITTING_MESSAGE = "FEEDBACK$SUBMITTING_MESSAGE",
+  SETTINGS$NAV_ADD_TEAM_MEMBERS = "SETTINGS$NAV_ADD_TEAM_MEMBERS",
   SETTINGS$NAV_USER = "SETTINGS$NAV_USER",
   SETTINGS$USER_TITLE = "SETTINGS$USER_TITLE",
   SETTINGS$USER_EMAIL = "SETTINGS$USER_EMAIL",

frontend/src/i18n/translation.json

@@ -11087,6 +11087,22 @@
     "de": "Feedback senden, bitte warten...",
     "uk": "Відправляємо відгук, будь ласка, почекайте..."
   },
+  "SETTINGS$NAV_ADD_TEAM_MEMBERS": {
+    "en": "Add Team Members",
+    "ja": "チームメンバーを追加",
+    "zh-CN": "添加团队成员",
+    "zh-TW": "新增團隊成員",
+    "ko-KR": "팀원 추가",
+    "no": "Legg til teammedlemmer",
+    "it": "Aggiungi membri del team",
+    "pt": "Adicionar membros da equipe",
+    "es": "Agregar miembros del equipo",
+    "ar": "إضافة أعضاء الفريق",
+    "fr": "Ajouter des membres de l'équipe",
+    "tr": "Takım üyeleri ekle",
+    "de": "Teammitglieder hinzufügen",
+    "uk": "Додати учасників команди"
+  },
   "SETTINGS$NAV_USER": {
     "en": "User",
     "ja": "ユーザー",