feat: edit custom network flow

ui/components/multichain/multichain-components.scss

@@ -19,6 +19,7 @@
 @import 'connected-site-menu';
 @import 'token-list-item';
 @import 'network-list-item';
+@import 'network-list-item-menu';
 @import 'network-list-menu';
 @import 'product-tour-popover';
 @import 'nft-item';

ui/components/multichain/network-list-item-menu/index.js

@@ -0,0 +1 @@
+export { NetworkListItemMenu } from './network-list-item-menu';

ui/components/multichain/network-list-item-menu/index.scss

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

ui/components/multichain/network-list-item-menu/network-list-item-menu.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  IconName,
+  ModalFocus,
+  Popover,
+  PopoverPosition,
+  PopoverRole,
+  Text,
+} from '../../component-library';
+import { MenuItem } from '../../ui/menu';
+import { IconColor, TextColor } from '../../../helpers/constants/design-system';
+
+export const NetworkListItemMenu = ({
+  anchorElement,
+  onClose,
+  onEditClick,
+  onDeleteClick,
+  isOpen,
+}) => {
+  const t = useI18nContext();
+
+  return (
+    <Popover
+      className="multichain-network-list-item-menu__popover"
+      onClickOutside={onClose}
+      referenceElement={anchorElement}
+      role={PopoverRole.Dialog}
+      position={PopoverPosition.Bottom}
+      offset={[0, 0]}
+      padding={0}
+      isOpen={isOpen}
+      isPortal
+      preventOverflow
+      flip
+    >
+      <ModalFocus restoreFocus initialFocusRef={anchorElement}>
+        <div>
+          {onEditClick ? (
+            <MenuItem
+              iconName={IconName.Edit}
+              onClick={(e) => {
+                e.stopPropagation();
+
+                // Pass network info?
+                onEditClick();
+              }}
+              data-testid="network-list-item-options-edit"
+            >
+              {t('edit')}
+            </MenuItem>
+          ) : null}
+          {onDeleteClick ? (
+            <MenuItem
+              iconName={IconName.Trash}
+              iconColor={IconColor.errorDefault}
+              onClick={(e) => {
+                e.stopPropagation();
+
+                // Pass network info?
+                onDeleteClick();
+              }}
+              data-testid="network-list-item-options-delete"
+            >
+              <Text color={TextColor.errorDefault}>{t('delete')}</Text>
+            </MenuItem>
+          ) : null}
+        </div>
+      </ModalFocus>
+    </Popover>
+  );
+};
+
+NetworkListItemMenu.propTypes = {
+  /**
+   * Element that the menu should display next to
+   */
+  anchorElement: PropTypes.instanceOf(window.Element),
+  /**
+   * Function that executes when the menu is closed
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Function that executes when the Edit menu item is clicked
+   */
+  onEditClick: PropTypes.func,
+  /**
+   * Function that executes when the Delete menu item is closed
+   */
+  onDeleteClick: PropTypes.func,
+  /**
+   * Represents if the menu is open or not
+   *
+   * @type {boolean}
+   */
+  isOpen: PropTypes.bool.isRequired,
+};

ui/components/multichain/network-list-item/index.scss

@@ -14,14 +14,6 @@
     color: inherit;
   }
 
-  &:hover,
-  &:focus,
-  &:focus-within {
-    .multichain-network-list-item__delete {
-      visibility: visible;
-    }
-  }
-
   &__network-name {
     width: 100%;
     flex: 1;
@@ -44,8 +36,4 @@
     top: 4px;
     left: 4px;
   }
-
-  &__delete {
-    visibility: hidden;
-  }
 }

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

@@ -1,28 +1,32 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import {
   AlignItems,
   BackgroundColor,
   BlockSize,
   BorderRadius,
   Color,
   Display,
-  IconColor,
   JustifyContent,
-  Size,
   TextColor,
+  Size,
+  IconColor,
 } from '../../../helpers/constants/design-system';
 import {
   AvatarNetwork,
   Box,
   ButtonIcon,
+  ButtonIconSize,
   IconName,
   Text,
 } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getAvatarNetworkColor } from '../../../helpers/utils/accounts';
 import Tooltip from '../../ui/tooltip/tooltip';
+import { NetworkListItemMenu } from '../network-list-item-menu';
+import { getLocalNetworkMenuRedesignFeatureFlag } from '../../../helpers/utils/feature-flags';
 
 const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 20;
 
@@ -33,10 +37,52 @@ export const NetworkListItem = ({
   focus = true,
   onClick,
   onDeleteClick,
+  onEditClick,
 }) => {
   const t = useI18nContext();
   const networkRef = useRef();
 
+  const [networkListItemMenuElement, setNetworkListItemMenuElement] =
+    useState();
+  const setNetworkListItemMenuRef = (ref) => {
+    setNetworkListItemMenuElement(ref);
+  };
+  const [networkOptionsMenuOpen, setNetworkOptionsMenuOpen] = useState(false);
+  const networkMenuRedesign = useSelector(
+    getLocalNetworkMenuRedesignFeatureFlag,
+  );
+
+  const renderButton = () => {
+    if (networkMenuRedesign) {
+      return onDeleteClick || onEditClick ? (
+        <ButtonIcon
+          iconName={IconName.MoreVertical}
+          ref={setNetworkListItemMenuRef}
+          data-testid="network-list-item-options-button"
+          ariaLabel={t('networkOptions')}
+          onClick={(e) => {
+            e.stopPropagation();
+            setNetworkOptionsMenuOpen(true);
+          }}
+          size={ButtonIconSize.Sm}
+        />
+      ) : null;
+    }
+
+    return onDeleteClick ? (
+      <ButtonIcon
+        className="multichain-network-list-item__delete"
+        color={IconColor.errorDefault}
+        iconName={IconName.Trash}
+        ariaLabel={t('deleteNetwork')}
+        size={Size.SM}
+        onClick={(e) => {
+          e.stopPropagation();
+          onDeleteClick();
+        }}
+      />
+    ) : null;
+  };
   useEffect(() => {
     if (networkRef.current && focus) {
       networkRef.current.focus();
@@ -103,19 +149,14 @@ export const NetworkListItem = ({
           )}
         </Text>
       </Box>
-      {onDeleteClick ? (
-        <ButtonIcon
-          className="multichain-network-list-item__delete"
-          color={IconColor.errorDefault}
-          iconName={IconName.Trash}
-          ariaLabel={t('deleteNetwork')}
-          size={Size.SM}
-          onClick={(e) => {
-            e.stopPropagation();
-            onDeleteClick();
-          }}
-        />
-      ) : null}
+      {renderButton()}
+      <NetworkListItemMenu
+        anchorElement={networkListItemMenuElement}
+        isOpen={networkOptionsMenuOpen}
+        onDeleteClick={onDeleteClick}
+        onEditClick={onEditClick}
+        onClose={() => setNetworkOptionsMenuOpen(false)}
+      />
     </Box>
   );
 };
@@ -141,6 +182,10 @@ NetworkListItem.propTypes = {
    * Executes when the delete icon is clicked
    */
   onDeleteClick: PropTypes.func,
+  /**
+   * Executes when the edit icon is clicked
+   */
+  onEditClick: PropTypes.func,
   /**
    * Represents if the network item should be keyboard selected
    */