feat: Implement ConnectedAccountsMenu buttons (#23258)

## **Description**

Implements the 'Switch to this account' and the 'Disconnect' buttons on
the ConnectedAccountsMenu panel.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/23258?quickstart=1)

## **Related issues**

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2172

## **Manual testing steps**

1. Connect two accounts to a dApp
2. Open the Connected Accounts menu panel
3. Switch between the accounts
4. Disconnect an account

## **Screenshots/Recordings**


https://github.com/MetaMask/metamask-extension/assets/11148144/eca77143-c53b-4978-b698-3cb4d2e3ac95


https://github.com/MetaMask/metamask-extension/assets/11148144/13d2a4bf-042f-477a-85b6-3459bbc0eb39


### **Before**



### **After**



## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [x] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: NidhiKJha <menidhikjha@gmail.com>
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

Author: Jony Bursztyn

ui/components/multichain/account-list-item/account-list-item.js

@@ -8,6 +8,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { shortenAddress } from '../../../helpers/utils/util';
 
 import { AccountListItemMenu, AvatarGroup } from '..';
+import { ConnectedAccountsMenu } from '../connected-accounts-menu';
 import {
   AvatarAccount,
   AvatarAccountVariant,
@@ -67,6 +68,7 @@ export const AccountListItem = ({
   selected = false,
   onClick,
   closeMenu,
+  accountsCount,
   connectedAvatar,
   connectedAvatarName,
   isPinned = false,
@@ -117,6 +119,7 @@ export const AccountListItem = ({
   );
   const isConnected =
     currentTabOrigin && currentTabIsConnectedToSelectedAddress;
+  const isSingleAccount = accountsCount === 1;
 
   return (
     <Box
@@ -358,6 +361,16 @@ export const AccountListItem = ({
           isConnected={isConnected}
         />
       )}
+      {menuType === AccountListItemMenuTypes.Connection && (
+        <ConnectedAccountsMenu
+          anchorElement={accountListItemMenuElement}
+          identity={identity}
+          onClose={() => setAccountOptionsMenuOpen(false)}
+          closeMenu={closeMenu}
+          disableAccountSwitcher={isSingleAccount}
+          isOpen={accountOptionsMenuOpen}
+        />
+      )}
     </Box>
   );
 };
@@ -394,6 +407,10 @@ AccountListItem.propTypes = {
    * Function to execute when the item is clicked
    */
   onClick: PropTypes.func,
+  /**
+   * Represents how many accounts are being listed
+   */
+  accountsCount: PropTypes.number,
   /**
    * Function that closes the menu
    */

ui/components/multichain/connected-accounts-menu/connected-accounts-menu.test.tsx

@@ -1,59 +1,65 @@
 import React from 'react';
-import { fireEvent, act } from '@testing-library/react';
-import { renderWithProvider } from '../../../../test/jest';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
 import { ConnectedAccountsMenu } from '.';
 
 const DEFAULT_PROPS = {
   isOpen: true,
   onClose: jest.fn(),
+  identity: { address: '0x123' },
+  anchorElement: null,
+  disableAccountSwitcher: false,
+  closeMenu: jest.fn(),
 };
 
-const render = (props = {}) => {
+const renderComponent = (props = {}, stateChanges = {}) => {
   const store = configureStore({
-    metamask: {
-      ...mockState.metamask,
+    ...mockState,
+    ...stateChanges,
+    activeTab: {
+      origin: 'https://example.com',
     },
   });
-  const allProps = { ...DEFAULT_PROPS, ...props };
   document.body.innerHTML = '<div id="anchor"></div>';
   const anchorElement = document.getElementById('anchor');
   return renderWithProvider(
-    <ConnectedAccountsMenu anchorElement={anchorElement} {...allProps} />,
+    <ConnectedAccountsMenu
+      {...DEFAULT_PROPS}
+      {...props}
+      anchorElement={anchorElement}
+    />,
     store,
   );
 };
 
 describe('ConnectedAccountsMenu', () => {
   it('renders permission details menu item', async () => {
-    await act(async () => {
-      const { getByText } = render();
-      expect(getByText('Permission details')).toBeInTheDocument();
-    });
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('permission-details-menu-item')).toBeInTheDocument();
   });
 
-  it('renders switch to this account menu item', async () => {
-    await act(async () => {
-      const { getByText } = render();
-      expect(getByText('Switch to this account')).toBeInTheDocument();
-    });
+  it('renders switch to this account menu item if account switcher is enabled', async () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('switch-account-menu-item')).toBeInTheDocument();
+  });
+
+  it('does not render switch to this account menu item if account switcher is disabled', async () => {
+    const { queryByTestId } = renderComponent({ disableAccountSwitcher: true });
+    expect(queryByTestId('switch-account-menu-item')).toBeNull();
   });
 
   it('renders disconnect menu item', async () => {
-    await act(async () => {
-      const { getByText } = render();
-      expect(getByText('Disconnect')).toBeInTheDocument();
-    });
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('disconnect-menu-item')).toBeInTheDocument();
   });
 
-  it('closes the menu on tab key down when focus is on the last menu item', async () => {
+  it('closes the menu on tab key down when focus is within the menu', async () => {
     const onClose = jest.fn();
-    await act(async () => {
-      const { getByText } = render({ onClose });
-      const disconnectMenuItem = getByText('Disconnect');
-      fireEvent.keyDown(disconnectMenuItem, { key: 'Tab' });
-    });
+    const { getByTestId } = renderComponent({ onClose });
+    const menu = getByTestId('permission-details-menu-item');
+    fireEvent.keyDown(menu, { key: 'Tab' });
     expect(onClose).toHaveBeenCalled();
   });
 });

ui/components/multichain/connected-accounts-menu/connected-accounts-menu.tsx

@@ -1,4 +1,5 @@
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   PopoverRole,
   PopoverPosition,
@@ -15,21 +16,55 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  removePermittedAccount,
+  setSelectedAccount,
+} from '../../../store/actions';
+import { getOriginOfCurrentTab } from '../../../selectors';
+import { Identity } from './connected-accounts-menu.types';
 
 const TsMenuItem = MenuItem as any;
 
 export const ConnectedAccountsMenu = ({
   isOpen,
+  identity,
   anchorElement,
+  disableAccountSwitcher = false,
   onClose,
+  closeMenu,
 }: {
   isOpen: boolean;
+  identity: Identity;
   anchorElement: HTMLElement | null;
-  onClose?: () => void;
+  disableAccountSwitcher: boolean;
+  onClose: () => void;
+  closeMenu: () => void;
 }) => {
+  const activeTabOrigin = useSelector(getOriginOfCurrentTab);
+  const dispatch = useDispatch();
   const t = useI18nContext();
   const popoverDialogRef = useRef<HTMLDivElement | null>(null);
 
+  const handleClickOutside = useCallback(
+    (event) => {
+      if (
+        popoverDialogRef?.current &&
+        !popoverDialogRef.current.contains(event.target)
+      ) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
   const handleKeyDown = useCallback(
     (event) => {
       if (
@@ -64,16 +99,30 @@ export const ConnectedAccountsMenu = ({
           >
             <Text variant={TextVariant.bodyMd}>{t('permissionDetails')}</Text>
           </TsMenuItem>
-          <TsMenuItem
-            iconName={IconName.SwapHorizontal}
-            data-testid="switch-account-menu-item"
-          >
-            <Text variant={TextVariant.bodyMd}>{t('switchToThisAccount')}</Text>
-          </TsMenuItem>
+          {disableAccountSwitcher ? null : (
+            <TsMenuItem
+              iconName={IconName.SwapHorizontal}
+              data-testid="switch-account-menu-item"
+              onClick={() => {
+                dispatch(setSelectedAccount(identity.address));
+                onClose();
+                closeMenu();
+              }}
+            >
+              <Text variant={TextVariant.bodyMd}>
+                {t('switchToThisAccount')}
+              </Text>
+            </TsMenuItem>
+          )}
           <TsMenuItem
             iconName={IconName.Logout}
             iconColor={IconColor.errorDefault}
             data-testid="disconnect-menu-item"
+            onClick={() => {
+              dispatch(
+                removePermittedAccount(activeTabOrigin, identity.address),
+              );
+            }}
           >
             <Text color={TextColor.errorDefault} variant={TextVariant.bodyMd}>
               {t('disconnect')}

ui/components/multichain/connected-accounts-menu/connected-accounts-menu.types.ts

@@ -0,0 +1,3 @@
+export interface Identity {
+  address: string;
+}

ui/components/multichain/connected-accounts-menu/index.scss

@@ -0,0 +1,8 @@
+@use "design-system";
+
+.multichain-connected-accounts-menu__popover {
+  z-index: design-system.$popover-in-modal-z-index;
+  overflow: hidden;
+  min-width: 225px;
+  max-width: 225px;
+}

ui/components/multichain/multichain-components.scss

@@ -14,8 +14,8 @@
 @import 'account-picker';
 @import 'activity-list-item';
 @import 'app-header';
+@import 'connected-accounts-menu';
 @import 'connected-site-menu';
-@import 'account-list-menu';
 @import 'token-list-item';
 @import 'network-list-item';
 @import 'network-list-menu';

ui/components/multichain/pages/connections/connections.tsx

@@ -60,7 +60,7 @@ export const Connections = () => {
   );
   const selectedAccount = useSelector(getSelectedAccount);
   const internalAccounts = useSelector(getInternalAccounts);
-  const mergedAccount = mergeAccounts(connectedAccounts, internalAccounts);
+  const mergedAccounts = mergeAccounts(connectedAccounts, internalAccounts);
   return (
     <Page data-testid="connections-page" className="connections-page">
       <Header
@@ -117,7 +117,7 @@ export const Connections = () => {
                 name={t('connectedaccountsTabKey')}
                 padding={4}
               >
-                {mergedAccount.map((account: AccountType, index: number) => {
+                {mergedAccounts.map((account: AccountType, index: number) => {
                   const connectedSites: ConnectedSites = {};
 
                   const connectedSite = connectedSites[account.address]?.find(
@@ -127,6 +127,7 @@ export const Connections = () => {
                     <AccountListItem
                       identity={account}
                       key={account.address}
+                      accountsCount={mergedAccounts.length}
                       selected={selectedAccount.address === account.address}
                       connectedAvatar={connectedSite?.iconUrl}
                       connectedAvatarName={connectedSite?.name}